I believe we all agree that Columns block should default to Wide alignment. It’s just rare for you to want to divide an already narrow container into 2.
And why does Table block has Left and Right alignment that makes it float? From 8 years of web development, never once I use a floating table.
This article will show you how to modify those.
Step 1 – Enqueue a JS into the Editor
We have to do it via JavaScript. There’s no PHP functions that can change the alignment.
add_action( 'enqueue_block_editor_assets', 'my_editor_assets', 100 );
function my_editor_assets() {
$js_dir = get_stylesheet_directory_uri() . '/js';
wp_enqueue_script( 'my-editor', $js_dir . '/my-editor.js',
[ 'wp-blocks', 'wp-dom' ] , '', true );
}Step 2 – Modify the Alignments
The code snippet below will change the available and default alignment in some blocks.
You might not agree with some changes like making the Cover block defaults to Full width. So, feel free to adjust it to your liking:
// Modify settings for Core blocks
wp.hooks.addFilter( 'blocks.registerBlockType',
'my/change_alignment', ( settings, name ) => {
switch( name ) {
// These blocks only allowed to use Wide alignment
case 'core/paragraph':
case 'core/list':
case 'core/gallery':
case 'core/code':
case 'core/verse':
case 'core/preformatted':
case 'core/table':
case 'core/pullquote':
case 'core/heading':
return lodash.assign( {}, settings, {
supports: lodash.assign( {}, settings.supports, {
align: [ 'wide']
} ),
} );
// Has no alignment choice
case 'core/file':
case 'core/audio':
return lodash.assign( {}, settings, {
supports: lodash.assign( {}, settings.supports, {
align: []
} ),
} );
// Only allow Center and Wide
case 'core/buttons':
return lodash.assign( {}, settings, {
supports: lodash.assign( {}, settings.supports, {
align: ['center', 'wide']
} ),
} );
// Only allow Center
case 'core/social-links':
return lodash.assign( {}, settings, {
supports: lodash.assign( {}, settings.supports, {
align: ['center']
} ),
} );
// Default to Wide
// Existing Columns that isn't Wide will have "invalid content" error.
// Clicking "Attempt Block Recovery" will fix it, but it becomes Wide.
case 'core/columns':
return lodash.assign( {}, settings, {
supports: lodash.assign( {}, settings.supports, {
align: ['wide']
} ),
attributes: lodash.assign( {}, settings.attributes, { align: {
type: 'string', default: 'wide'
} } ),
} );
// Default to Full
// Existing Group that isn't Full will have "invalid content" error.
// Clicking "Attempt Block Recovery" will fix it, but it becomes Full.
case 'core/group':
case 'core/cover':
return lodash.assign( {}, settings, {
attributes: lodash.assign( {}, settings.attributes, { align: {
type: 'string', default: 'full'
} } ),
} );
}
return settings;
});
Step 3 – Try it Out
Try creating a Column block, does it immediately goes into Wide alignment?
If not, check whether my-editor.js is enqueued properly by opening DevTool (F12) and search for its <script> tag.
Conclusion
I have been using this snippet since Gutenberg launch in December 2018. I’m quite surprised that it’s still relevant today.
You might think this is just a minor thing, but it gives a much better User Experience especially if you let your client edit the site.
It also reduces human error by disabling weird alignments like floating Table or floating Button.
If you have any trouble or question, let me know in the comment below 🙂
Hey man,
I just want to thank you for this. After lots of trial and error I found your article and was able to modify your code example so I could have image blocks and gallery blocks default to a wide width.
Super grateful.
Glad you found it useful! I agree that finding resources for unconventional Gutenberg modification is really tough.
Very helpful, thank you! It does appear to work though I noticed if you open web inspector on the backend as you're creating a post you get a bunch of block validation errors. It looks like Gutenberg tests the current settings against expected strings on startup and because we're messing with the default settings, the values returned aren't 'correct'.
Here's an example from going to the 'Add new Post' page with only
core/imagechanged let alone all the blocks mentioned in your post.My code:
One of the many errors that appear in console whether my post has images in it or not - these appear to be hidden wordpress test blocks of some sort?:
> Block validation: Block validation failed for
core/image({name: "core/image", icon: {…}, ...: Object).> Content generated by
savefunction:> ``
> Content retrieved from post body:
> ``
Hi Flyn,
I just tried changing the default alignment for Image and also got the console error. It's weird because other block doesn't product this error.
I guess either we do not change the alignment or try to live with console error.
There are a few other oddities. For example if you try to set the supported alignments on images (I tried restricting to just left/center), it seems to work and the 'alignment' drop down restricts to just the ones you specified...but a second alignment drop down appears right beside the first with all the original options!
https://i.imgur.com/QmFAvJD.png
Gutenberg is weird, man
I think this is caused by the recent Gutenberg update that split Wide / Full dropdown with Left / Center / Right. It used to be in 1 dropdown.
Just have to live with it
I was looking for a way to do this with the theme.json file, which is currently not possible. At least this is a method that does what I need, so thanks!
Thanks! I haven't taken a deeper look at theme.json. Hopefully this will be added in later version.
The only weird thing is that if you add only one alignment option (per example: 'full'), the align button is still available and the user can toggle between 'full' and 'none'.
Fantastic Post!!