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 ( !== '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)

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

Leave a Reply

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