Block Editor: Add a link to a whole column block

There are cases where you want to link a whole column block to another target. However, obviously there is no such option for an edge case directly built into the column block in the block editor. Fortunately, JavaScript is quite powerful, so you can achieve this functionality with a little bit of code.

This code is enabled here on the start page to link the portfolio columns. It was important to me that the links are also accessible, so you can use the tabulator key to also navigate through them. The JavaScript handles the creation of hidden buttons, which are only displayed if they become focus (which the do by tabbing through the page).

The whole script looks like the following:

/**
 * 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 language: JavaScript (javascript)

The code is highly specific to my portfolio columns, but you can workaround them. First, change the selector in line 5 to match your desired column blocks. E.g. from '.portfolio-columns > .wp-block-column' to .my-cool-linkable-columns > .wp-block-column.

Then, the important part is inside the function getTarget. I use classes for all my column blocks to identify where they should link to. Basically speaking: column.classList.contains( 'column-impressum' ) checks whether the current clicked column contains the class column-impressum. You should change that accordingly and give your columns more specific classes that match their content.

The return value then returns the link value, e.g.: return '#column-impressum';
Here, I link to the anchor with ID column-impressum. Change that link as you wish, you can also use absolute URLs like this: return 'https://epiph.yt/en/;'

Currently, it’s a rather manual process inside the script, but for me it’s enough. However, I will add a proper functionality to the column block in the block editor itself soon and maybe also blog about it. 🤓

Leave a Reply Cancel reply