Skip to content

Consider a root-level site padding solution that still lets some items go full-width #35607

@kjellr

Description

@kjellr

The root-level padding introduced in #35241 lets you add padding around your entire site. This works great, but only if you do not want anything on the site to ever appear edge-to-edge.

In WordPress/twentytwentytwo#88, we tried to implement the site-wide padding value in Twenty Twenty-Two, but found it did not work for us for that reason. Twenty Twenty-Two is designed to let certain full width elements extend edge-to-edge on the screen. The most obvious example is its black homepage header, which is intended to extend to the screen edges:

This sort of thing is common to lots of themes, especially since Gutenberg rolled out its "full width" alignment. Themes want full-width elements to extend to the screen edges, and they want some sort of padding for everything else. This is how the past three default themes have functioned:

Today's implementation of the global padding setting wouldn't work for any of those themes.

That said, a global padding value in general would still be really useful. In the Twenty Twenty-Two homepage screenshot for example, you can see that there is a shared padding value inside of the group block header, and on the content below it, to ensure that non-full-width content doesn't bump up against the screen edges:

Generally, classic themes accomplished this sort of thing by setting a global padding rule, and then having alignfull items override that with negative margins and a modified max-width. If necessary, they'd apply those same rules inside of full-width group blocks too so the padding was consistent.

Let's discuss if there's a solution that can account for this scenario without requiring a block theme to supply custom CSS.

Metadata

Metadata

Labels

Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

Type

No type

Projects

Status

✅ Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions