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.

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>
	);
}
Code language: JavaScript (javascript)

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' ]
	);
}
Code language: PHP (php)