Gutenberg: wrap core block in element

Yesterday I had the problem, that the core table block is not wrapped in a div at the frontend. Of course, it is great that no useless markup is outputted, but I needed a wrapper element for my responsive table solution. Here I show you how to wrap a core block in an element.

Update from November 22, 2018: Under the German version of this post, Mario posted a comment and mentions an alternative solution for the problem. The render_block allows us to filter the content of blocks.

Currently, that is only available in WordPress trunk. Maybe it will be backported into the plugin, maybe not – depends on the next decisions regarding the final release date, I think.

Gutenberg comes with various filters, which allow us to modify things from the core blocks. One filter is blocks.getSaveElement, that can be used to modify the result of a block’s save function. So I simply tried to wrap this element of the table blocks in a div and return that, and what should I say: it worked instantly (that happened not so often during my first steps with Gutenberg) 🙂 That is the code:

wp.hooks.addFilter(
	'blocks.getSaveElement',
	'slug/modify-get-save-content-extra-props',
	modifyGetSaveContentExtraProps
);

/**
 * Wrap table block in div.
 * 
 * @param {object} element 
 * @param {object} blockType 
 * @param {object} attributes 
 * 
 * @return The element.
 */
function modifyGetSaveContentExtraProps( element, blockType, attributes  ) {
	// Check if that is not a table block.
	if (blockType.name !== 'core/table') {
		return element;
	}

	// Return the table block with div wrapper.
	return (
		<div className='table-wrapper'>
			{element}
		</div>
	);
}

At first, we hook our modifyGetSaveContentExtraProps function to blocks.getSaveElement via wp.hooks.addFilter. In the function we check if it is not a table block and return element without modifications in those cases. If we have a table block, we just wrap the element in a div inside the return statement and get our wrapper in the frontend as a result 🎉 To make this work, we have to enqueue the script of course, so that Gutenberg knows it. This can look like the following in a plugin:

add_action( 'enqueue_block_editor_assets', 'slug_enqueue_block_editor_assets' );

/**
 * Register the block.
 */
function slug_enqueue_block_editor_assets() {
	wp_enqueue_script(
		'slug-gutenberg-block-editor-script',
		plugins_url( 'assets/js/editor.blocks.js', __FILE__ ),
		[ 'wp-blocks', 'wp-element', 'wp-edit-post' ]
	);
}

Related posts

2 comments on »Gutenberg: wrap core block in element«

Leave a Reply to Brock Cancel reply

Your email address will not be published. Required fields are marked *