{"id":5339,"date":"2018-07-13T14:42:35","date_gmt":"2018-07-13T12:42:35","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=5339"},"modified":"2020-02-09T11:13:11","modified_gmt":"2020-02-09T10:13:11","slug":"gutenberg-wrap-core-block-in-element","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/gutenberg-wrap-core-block-in-element-5339\/","title":{"rendered":"Gutenberg: wrap core block in element"},"content":{"rendered":"\n

Yesterday I had the problem, that the core table block is not wrapped in a div<\/code> 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. <\/p>\n\n\n\n\n\n\n\n

\n

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

Currently, that is only available in WordPress trunk. Maybe it will be backported into the plugin, maybe not \u2013 depends on the next decisions regarding the final release date, I think.<\/p>\n<\/div>\n\n\n\n

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

wp.hooks.addFilter(\n\t'blocks.getSaveElement'<\/span>,\n\t'slug\/modify-get-save-content-extra-props'<\/span>,\n\tmodifyGetSaveContentExtraProps\n);\n\n\/**\n * Wrap table block in div.\n * \n * @param {object} element \n * @param {object} blockType \n * @param {object} attributes \n * \n * @return The element.\n *\/<\/span>\nfunction<\/span> modifyGetSaveContentExtraProps<\/span>( element, blockType, attributes  <\/span>) <\/span>{\n\t\/\/ Check if that is not a table block.<\/span>\n\tif<\/span> (blockType.name !== 'core\/table'<\/span>) {\n\t\treturn<\/span> element;\n\t}\n\n\t\/\/ Return the table block with div wrapper.<\/span>\n\treturn<\/span> (\n\t\t<div<\/span> className<\/span>='table-wrapper'<\/span>><\/span>\n\t\t\t{element}\n\t\t<\/div<\/span>><\/span><\/span>\n\t);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
At first, we hook our modifyGetSaveContentExtraProps<\/code> function to blocks.getSaveElement<\/code> via wp.hooks.addFilter<\/code>. In the function we check if it is not a table block and return element<\/code> without modifications in those cases. If we have a table block, we just wrap the element in a div<\/code> inside the return<\/code> statement and get our wrapper in the frontend as a result \ud83c\udf89 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:<\/p>\n\n\n
add_action( 'enqueue_block_editor_assets'<\/span>, 'slug_enqueue_block_editor_assets'<\/span> );\n\n\/**\n * Register the block.\n *\/<\/span>\nfunction<\/span> slug_enqueue_block_editor_assets<\/span>()<\/span> <\/span>{\n\twp_enqueue_script(\n\t\t'slug-gutenberg-block-editor-script'<\/span>,\n\t\tplugins_url( 'assets\/js\/editor.blocks.js'<\/span>, __FILE__<\/span> ),\n\t\t[ 'wp-blocks'<\/span>, 'wp-element'<\/span>, 'wp-edit-post'<\/span> ]\n\t);\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[115],"tags":[],"class_list":["post-5339","post","type-post","status-publish","format-standard","hentry","category-wordpress-snippets"],"wp-worthy-pixel":{"ignored":false,"public":"d840116dac9a476d9be11688d64eb0d6","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/d840116dac9a476d9be11688d64eb0d6"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=5339"}],"version-history":[{"count":4,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5339\/revisions"}],"predecessor-version":[{"id":5955,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/5339\/revisions\/5955"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=5339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=5339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=5339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}