{"id":6012,"date":"2020-08-06T11:16:10","date_gmt":"2020-08-06T09:16:10","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=6012"},"modified":"2020-08-20T13:19:27","modified_gmt":"2020-08-20T11:19:27","slug":"block-full-width-gutenberg","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/block-full-width-gutenberg-6012\/","title":{"rendered":"Make custom block full-width in Gutenberg by default"},"content":{"rendered":"\n

By default, all blocks are inserted with the same width in the Gutenberg editor. Depending on the block and theme support, you get the option to set blocks to wide or full width, to let the block go beyond the normal content width on the website.<\/p>\n\n\n\n

Now I had the case that a custom block should be displayed full-width by default, without the option to change that. On the frontend, I just modified the styling, but in the editor, there are a few more adjustments necessary because the block controls for a full-width block are above the block, not on the left side.<\/p>\n\n\n\n\n\n\n\n

\n\n

Update from August 20, 2020:<\/strong> Fabian K\u00e4gy posted a code snippet in the comments<\/a> that shows a way to make this also work for core or third-party blocks \ud83c\udf89 I updated the second part of the post accordingly.<\/p>\n\n<\/div>\n\n\n\n

To recreate that behavior, I set the align<\/code> attribute to full<\/code> and add data-align=\"full\"<\/code> to the block wrapper. That is done by the following code in the registerBlockType()<\/code> object:<\/p>\n\n\n

attributes: {\n\talign<\/span>: {\n\t\ttype<\/span>: 'string'<\/span>,\n\t\tdefault<\/span>: 'full'<\/span>,\n\t}\n},\ngetEditWrapperProps() {\n\treturn<\/span> {\n\t\t'data-align'<\/span>: 'full'<\/span>,\n\t};\n},<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Of course, that only works for own blocks that you created (the alignfull<\/code> class name is not added automatically here).<\/p>\n\n\n\n
To get the same behavior for core or third-party blocks, where we cannot modify the registerBlockType()<\/code> object, we can use the blocks.registerBlockType<\/code> filter, like in the following code example:<\/p>\n\n\n
const<\/span> modifyDefaultAlignment = ( settings, name <\/span>) =><\/span> {\n\tif<\/span> ( name !== 'core\/media-text'<\/span> ) {\n\t\treturn<\/span> settings;\n\t}\n\tconst<\/span> newSettings = {\n\t\t...settings,\n\t\tattributes<\/span>: {\n\t\t\t...settings.attributes,\n\t\t\talign<\/span>: { type<\/span>: 'string'<\/span>, default<\/span>: 'full'<\/span> },\n\t\t},\n\t};\n\treturn<\/span> newSettings;\n};\nwp.hooks.addFilter(\n\t'blocks.registerBlockType'<\/span>,\n\t'textdomain\/change-media-text-default-alignment'<\/span>,\n\tmodifyDefaultAlignment,\n);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The code checks for the core\/media-text<\/code> block and, if we have one, adds the align<\/code> attribute to the settings with full<\/code> as the default value. That works only if the theme has support for wide and full alignment enabled.<\/p>\n","protected":false},"excerpt":{"rendered":"
By default, all blocks are inserted with the same width in the Gutenberg editor. Depending on the block and theme support, you get the option to set blocks to wide or full width, to let the block go beyond the normal content width on the website. Now I had the case that a custom block […]<\/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":[6],"tags":[],"class_list":["post-6012","post","type-post","status-publish","format-standard","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":"4c0b98c394e34561976427e4d180f690","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/4c0b98c394e34561976427e4d180f690"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/6012","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=6012"}],"version-history":[{"count":10,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/6012\/revisions"}],"predecessor-version":[{"id":6031,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/6012\/revisions\/6031"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=6012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=6012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=6012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}