How to Change Default Alignment of Gutenberg Block?

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;
});