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 🙂