The root-level padding introduced in https://github.com/WordPress/gutenberg/pull/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 https://github.com/WordPress/twentytwentytwo/pull/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.
The root-level padding introduced in https://github.com/WordPress/gutenberg/pull/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 https://github.com/WordPress/twentytwentytwo/pull/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
alignfullitems override that with negative margins and a modifiedmax-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.