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 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.
Update from August 20, 2020: Fabian Kägy posted a code snippet in the comments that shows a way to make this also work for core or third-party blocks 🎉 I updated the second part of the post accordingly.
To recreate that behavior, I set the align attribute to full and add data-align="full" to the block wrapper. That is done by the following code in the registerBlockType() object:
attributes: {
align: {
type: 'string',
default: 'full',
}
},
getEditWrapperProps() {
return {
'data-align': 'full',
};
},Code language: JavaScript (javascript)Of course, that only works for own blocks that you created (the alignfull class name is not added automatically here).
To get the same behavior for core or third-party blocks, where we cannot modify the registerBlockType() object, we can use the blocks.registerBlockType filter, like in the following code example:
const modifyDefaultAlignment = ( settings, name ) => {
if ( name !== 'core/media-text' ) {
return settings;
}
const newSettings = {
...settings,
attributes: {
...settings.attributes,
align: { type: 'string', default: 'full' },
},
};
return newSettings;
};
wp.hooks.addFilter(
'blocks.registerBlockType',
'textdomain/change-media-text-default-alignment',
modifyDefaultAlignment,
);Code language: JavaScript (javascript)The code checks for the core/media-text block and, if we have one, adds the align attribute to the settings with full as the default value. That works only if the theme has support for wide and full alignment enabled.
Hi Florian,
Thats cool 🙂 I never thought about doing it that way!
The way I always modify the default alignment of any block is by using this hook:
Hi Fabian,
thanks for the comment and code example, I will give it a try!
Best,
Florian
Hi Fabian,
finally tested it and it works, thanks again! 🙂 I updated the article with that.
Best,
Florian
Hi Florian,
Great article. I'm trying to modify the category for existing blocks (core and third party) but I haven't been able to get it working. Do you know how I could do this?
Cheers
Hi Raj,
I think it should be possible with a filter, something like described here: https://wordpress.stackexchange.com/a/321279
Best,
Florian
Does that second code snippet made all core blocks go full width? Do you know how I could modify it so it makes just image blocks be affected?
I am desperately trying to make it so image blocks have a default of wide-width and appreciate any help I can get.
Hi Michael,
to just affect image blocks, it should be enough to change
core/media-texttocore/imagein theifcondition.Best,
Florian
Hi,
I found your site while I was searching for the getEditWrapperProps() function after I found the same solution on stackoverflow. I searched it because I cannot force my block to be really full width in the editor. There is still a margin of something like 8px around my block because the div-wrapper which creates the fullwidth view in the editor lands inside the block.
When you for example put the cover-block in full width alignment it gets a div wrapper around the cover block.
Does anybody knows what I am doing wrong? Or how I can constrain the wrapper around my block?
Thx and all the best
Hi,
found the solution myself. And I just wanted to type it out for those who stumbled over that problem too.
Make sure to have added 'apiVersion: 2,' to the properties inside the registration function.
But that's it and everything works like a charm now.
Have a good one ✌️
Hi Wil,
great that you found a solution, and thanks for posting it here!
Best,
Florian