{"id":1953,"date":"2020-11-12T08:53:00","date_gmt":"2020-11-12T01:53:00","guid":{"rendered":"https:\/\/wptips.dev\/?p=1953"},"modified":"2021-01-04T09:20:46","modified_gmt":"2021-01-04T02:20:46","slug":"change-gutenberg-alignment","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/change-gutenberg-alignment\/","title":{"rendered":"How to Change Default Alignment of Gutenberg Block?"},"content":{"rendered":"\n

I believe we all agree that Columns block should default to Wide<\/strong> alignment. It’s just rare for you to want to divide an already narrow container into 2.<\/p>\n\n\n\n

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<\/strong>.<\/p>\n\n\n\n

This article will show you how to modify those.<\/p>\n\n\n\n

Step 1 – Enqueue a JS into the Editor<\/h2>\n\n\n\n

We have to do it via JavaScript. There’s no PHP functions that can change the alignment.<\/p>\n\n\n\n

add_action( 'enqueue_block_editor_assets', 'my_editor_assets', 100 );\n\n\nfunction<\/em> my_editor_assets() {\n  $js_dir = get_stylesheet_directory_uri() . '\/js';\n\n  wp_enqueue_script( 'my-editor', $js_dir . '\/my-editor.js',\n    [ 'wp-blocks', 'wp-dom' ] , '', true );\n}<\/code><\/pre>\n\n\n\n
Step 2 – Modify the Alignments<\/h2>\n\n\n\n
The code snippet below will change the available and default alignment in some blocks.<\/p>\n\n\n\n
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<\/strong>:<\/p>\n\n\n\n
\/\/ Modify settings for Core blocks\nwp.hooks.addFilter( 'blocks.registerBlockType',\n  'my\/change_alignment', ( settings<\/em>, name<\/em> ) =><\/em> {\n\n  switch( name ) {\n    \/\/ These blocks only allowed to use Wide alignment\n    case 'core\/paragraph':\n    case 'core\/list':\n    case 'core\/gallery':\n    case 'core\/code':\n    case 'core\/verse':\n    case 'core\/preformatted':\n    case 'core\/table':\n    case 'core\/pullquote':\n    case 'core\/heading':\n      return lodash.assign( {}, settings, {\n        supports: lodash.assign( {}, settings.supports, {\n          align: [ 'wide']\n        } ),\n      } );\n    \n    \/\/ Has no alignment choice\n    case 'core\/file':\n    case 'core\/audio':\n      return lodash.assign( {}, settings, {\n        supports: lodash.assign( {}, settings.supports, {\n          align: []\n        } ),\n      } );\n\n    \/\/ Only allow Center and Wide\n    case 'core\/buttons':\n      return lodash.assign( {}, settings, {\n        supports: lodash.assign( {}, settings.supports, {\n          align: ['center', 'wide']\n        } ),\n      } );\n\n    \/\/ Only allow Center\n    case 'core\/social-links':\n      return lodash.assign( {}, settings, {\n        supports: lodash.assign( {}, settings.supports, {\n          align: ['center']\n        } ),\n      } );\n\n    \/\/ Default to Wide\n    \/\/   Existing Columns that isn't Wide will have \"invalid content\" error.\n    \/\/   Clicking \"Attempt Block Recovery\" will fix it, but it becomes Wide.\n    case 'core\/columns':\n      return lodash.assign( {}, settings, {\n        supports: lodash.assign( {}, settings.supports, {\n          align: ['wide']\n        } ),\n        attributes: lodash.assign( {}, settings.attributes, { align: {\n          type: 'string', default: 'wide'\n        } } ),\n      } );\n\n    \/\/ Default to Full\n    \/\/   Existing Group that isn't Full will have \"invalid content\" error.\n    \/\/   Clicking \"Attempt Block Recovery\" will fix it, but it becomes Full.\n    case 'core\/group':\n    case 'core\/cover':\n      return lodash.assign( {}, settings, {\n        attributes: lodash.assign( {}, settings.attributes, { align: {\n          type: 'string', default: 'full'\n        } } ),\n      } );\n  }\n\n  return settings;\n});\n\n<\/code><\/pre>\n\n\n\n
Step 3 – Try it Out<\/h2>\n\n\n\n
Try creating a Column block, does it immediately goes into Wide alignment?<\/p>\n\n\n\n
If not, check whether my-editor.js<\/code> is enqueued properly by opening DevTool (F12) and search for its <script><\/code> tag.<\/p>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
I have been using this snippet since Gutenberg launch in December 2018. I’m quite surprised that it’s still relevant today.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
It also reduces human error by disabling weird alignments like floating Table or floating Button.<\/p>\n\n\n\n
If you have any trouble or question, let me know in the comment below \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I believe we all agree that Columns block should default to Wide alignment. This article will show you how to modify that.<\/p>\n","protected":false},"author":1,"featured_media":1957,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[22,32],"class_list":["post-1953","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg","tag-gutenberg","tag-javascript"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1953"}],"version-history":[{"count":3,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1953\/revisions"}],"predecessor-version":[{"id":1987,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1953\/revisions\/1987"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1957"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}