Skip to content
👋 I'm currently taking a break from WordPress Daniel Shaw · WordPress Developer Wellington, New Zealand 020 414 82576

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.

Please note: the core function filtered in the example below has changed in Gutenberg, now that multiple layout models are supported. For now, this approach will continue to work in WordPress 5.8, and I’ll update this post when 5.9 is released.

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

Footnotes

  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. The easiest way to use this is by including it in a theme’s functions.php