Full-Width Blocks and Root Padding in WordPress 6.1

Just under a year ago, a root padding solution was introduced for blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes. This allowed designers to add padding values to their theme.json files and users to adjust it via the Styles panel in the site editor. However, there was one catch. There was no built-in way to allow full-width blocks to stretch beyond any horizontal padding and reach the edge of the screen. It was the bane of many theme author’s existence. Sure, they could write custom CSSCSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. solutions to address the problem, but that didn’t solve cases where end-users customized things.

Eventually, this issue was fixed in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 13.8 and will land in WordPress 6.1.

The fix added a new useRootPaddingAwareAlignments option to the theme.json standard. The following is an example of its usage:

{
    "version": 2,
    "settings": {
        "useRootPaddingAwareAlignments": true
    },
    "styles": {}
}

If set to true, root padding gets added to Group blocks with a constrained layout, and any nested full-width blocks will stretch outside of the Group. If set to false, the padding is applied to the site-wide wrapper, and full-width blocks will not break outside of their containers.

For this to work, there is one caveat. Any padding applied via styles.spacing.padding must be in its object form rather than CSS shorthand (this does not apply to other padding usages, only the root level). The following is an example of how these two features work together:

{
    "settings": {
        "useRootPaddingAwareAlignments": true
    },
    "styles": {
        "spacing": {
            "padding": {
                "top": "0px",
                "right": "2rem",
                "bottom": "0px",
                "left": "2rem"
            }
        }
    }
}

How to Test

To test, you should install the latest version of the Gutenberg plugin (currently version 14.0). Then, install the Twenty Twenty-Three theme, which is currently under development. It already has both the useRootPaddingAwareAlignments and styles.spacing.padding values set. You can adjust these to your liking.

Open a new post or page and add some content to it. Then, add at least one full-width block, such as an image.

When viewing the post on the front end of the site, the full-width block should stretch to the edge of the screen while maintaining padding on other elements, as shown in the following screenshot:

Any feedback or questions on this new feature is welcome:

• Does the padding solution work as expected?
• Do full-width blocks stretch beyond the container’s padding when in use?
• Did you run into any problems when testing?

How the Solution Works

For theme authors, they only need to know how to set this up in their theme.json files, as shown above. For those who want to dig a bit deeper into the inner workings, this section will describe how it all comes together.

When setting useRootPaddingAwareAlignments to true, root left and right padding values are applied at the block level instead of the site-wide wrapper. Group blocks with constrained layouts are given the .has-global-padding class so that they are output as shown in the following code snippet:

<div class="has-global-padding is-layout-constrained wp-block-group">
    <!-- nested blocks -->
</div>

Suppose that you added a full-width Cover block inside of that Group. The HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. would look similar to the following:

<div class="has-global-padding is-layout-constrained wp-block-group">
	<div class="wp-block-cover alignfull"></div>
</div>

Remember that the outer Group block now has padding applied to it. To allow the Cover block to stretch outside of it, WordPress will give it negative left and right margins equal to the padding.

Known Issues

Currently, there is still one outstanding issue. When nesting constrained Groups, each get the .has-global-padding class. However, this creates additional horizontal padding at each nested level. There is a ticket where a solution is being discussed.

Props to @kafleg for technical review and feedback.