Daniel Shaw · WordPress & WooCommerce Developer Wellington, New Zealand

👋 Not available for new client work right now!

How to filter styles for WordPress blocks with layout support

Updated

I spent much of June working on a forward-looking WordPress theme, in anticipation of “Full Site Editing” arriving in WordPress 5.9 at the end of 2021.1 There was a small snag early on with the CSS syntax delivered inline alongside the new layout-supported Group block: it presumes one type of layout model by default.

What follows is a solution for customising the contents of a Group block’s style element, to match the requirements of a different layout model.

Default styles for blocks with layout support

First, what does “layout support” mean? The settings panel for a Group block in WordPress 5.8+ offers a configurable Layout option, allowing user-defined widths to be set from inside the block editor.

For dynamic width values to work they must be scoped to each block. WordPress handles this by inlining a style element, with styles scoped to a unique auto-generated class per block. Unfortunately, these styles presume a layout model using max-width paired with margin-left: auto; margin-right: auto. Child elements are also presumed to use CSS floats for horizontal alignment.

For example:

/* Default Group block layout inline styles. */ <style> .wp-container-60e5046dbe359 > * { max-width: 100rem; margin-left: auto !important; margin-right: auto !important; } .wp-container-60e5046dbe359 > .alignwide { max-width: 100rem; } .wp-container-60e5046dbe359 .alignfull { max-width: none; } .wp-container-60e5046dbe359 .alignleft { float: left; margin-right: 2em; } .wp-container-60e5046dbe359 .alignright { float: right; margin-left: 2em; } </style>

How to manage this style element for a layout model requiring different CSS syntax?

Filtering the layout style element

The layout support styles are printed by a function found at wp-includes/block-supports/layout.php: wp_render_layout_support_flag(). Touching this directly is not an option, but the good news here is there’s a filter that makes it easy to take over and print a tailored style element via a custom function.

add_filter( 'render_block', 'name_of_custom_function', 10, 2 );

Adding custom CSS

Working with a copy of the original function, the key part is assigning new CSS declarations to the style variable. This snippet 2 demonstrates how I’m returning styles for a layout model based on CSS Grid syntax, with the resulting style element returned like this:

/* Custom Group block layout inline styles. */ <style> .wp-container-60e51fc2dbfd2 { max-width:100rem; justify-self:center } .wp-container-60e51fc2dbfd2.alignwide { max-width:100rem; } .wp-container-60e51fc2dbfd2.alignfull{ max-width:none; } </style>

Unhooking native functions

To prevent multiple style elements being loaded per block, it’s necessary to run remove_filter for the native core function. The Gutenberg plugin currently (as of v10.9.1) has its own implementation which should also be unhooked.

remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 ); remove_filter( 'render_block', 'gutenberg_render_layout_support_flag', 10, 2 );
  1. The final name for this functionality seems yet to be resolved, and it’s sadly unclear if this will actually land by the end of the year. ↩
  2. Originally written for WordPress 5.8, here’s an updated snippet for WordPress 5.9 with layout support for additional blocks. ↩
π