How to Change Default Alignment of Gutenberg Block?

I believe we all agree that Columns block should default to Wide alignment. This article will show you how to modify that.

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', ( settingsname ) => {

  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 🙂

Default image
Henner Setyono
A web developer who mainly build custom theme for WordPress since 2013. Young enough to never had to deal with using Table as layout.
Leave a Reply

8 Comments

  1. 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.

  2. 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/image changed let alone all the blocks mentioned in your post.

    My code:

    addFilter(
        'blocks.registerBlockType',
        'mysite/BlockDefaults',
        ( settings, name ) =&gt; {
            switch ( name ) {
                case 'core/image':
                    return assign( {}, settings, {
                        attributes: assign( {}, settings.attributes, {
                            align: {
                                type: 'string',
                                default: 'center',
                            },
                        } ),
                    } );
            }
    
            return settings;
        }
    );

    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 save function:

    > ``

    > 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

  3. 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!