Block-Editor: Einen ganzen Spalten-Block verlinken

Es gibt Fälle, in denen man einen ganzen Spalten-Block zu einem anderen Ziel verlinken möchte. Aber natürlich gibt es keine Option für diesen Edge-Case direkt im Spalten-Block des Block-Editors. Glücklicherweise ist JavaScript ziemlich mächtig, sodass du diese Funktionalität mit ein bisschen Code erreichen kannst.

Dieser Code ist auch hier auf der Startseite aktiv und verlinkt die Portfolio-Spalten. Es war mir wichtig, dass dieser Code auch barrierefreien Zugriff auf die Links mithilfe der Tabulator-Taste zulässt. Das JavaScript erstellt dafür versteckte Buttons, die nur angezeigt werden, wenn sie fokussiert werden (was der Fall ist, wenn man durch die Seite tabbt).

Das gesamte Skript sieht folgendermaßen aus:

/**
 * Accessible portfolio links.
 */
document.addEventListener( 'DOMContentLoaded', function() {
	const columns = document.querySelectorAll( '.portfolio-columns > .wp-block-column' );
	
	if ( ! columns ) {
		return;
	}
	
	for ( const column of columns ) {
		initColumn( column );
		column.addEventListener( 'click', clickColumn );
	}
	
	/**
	 * Click on a column.
	 * 
	 * @param	{Event}	event The event
	 */
	function clickColumn( event ) {
		window.location.href = getTarget( event.currentTarget );
	}
	
	/**
	 * Get the link target.
	 * 
	 * @param	{Element}	column The column
	 * @return	{string} The link target
	 */
	function getTarget( column ) {
		switch ( true ) {
			case column.classList.contains( 'column-impressum' ):
			case column.classList.contains( 'column-impressum-plus' ):
				return '#column-impressum';
			case column.classList.contains( 'column-embed-privacy' ):
				return '#column-embed-privacy';
			case column.classList.contains( 'column-block-control' ):
				return '#column-block-control';
		}
	}
	
	/**
	 * Initialize column by generating button for accessibility.
	 * 
	 * @param	{Element}	column The column
	 */
	function initColumn( column ) {
		const button = document.createElement( 'a' );
		
		button.href = getTarget( column );
		button.textContent = column.querySelector( 'h3' ).textContent;
		
		button.classList.add( 'screen-reader-text' );
		column.appendChild( button );
	}
} );
Code-Sprache: JavaScript (javascript)

Der Code ist spezifisch auf meine Portfolio-Spalten erstellt, aber das kannst du anpassen. Ändere erst den Selektor in Zeile 5, um deinen gewünschten Spalten-Blöcken zu entsprechen. Beispielsweise von '.portfolio-columns > .wp-block-column' zu .my-cool-linkable-columns > .wp-block-column.

Dann ist der wichtige Teil innerhalb der Funktion getTarget. Ich verwende Klassen für alle meine Spalten-Blöcke, um zu identifizieren, wohin diese verlinken sollen. So prüft column.classList.contains( 'column-impressum' ), ob die aktuell angeklickte Spalte die Klasse column-impressum beinhaltet. Du solltest das entsprechend ändern und deinen Spalten einen für dich spezifischeren Namen geben, die ihrem Inhalt entspricht.

Der Rückgabewert gibt dann den Wert zurück, z. B.: return '#column-impressum';
Hier verlinke ich zum Anker mit der ID column-impressum. Passe diesen Link an, wie du möchtest. Du kannst auch absolute URLs verwenden: return 'https://epiph.yt/;'

Aktuell ist das eher ein manueller Prozess innerhalb des Skripts, der für mich ausreicht. Allerdings werde ich eine saubere Funktionalität zum Spalten-Block im Block-Editor selbst hinzufügen und möglicherweise darüber dann auch bald bloggen. 🤓

Schreibe einen Kommentar Antworten abbrechen