Description
openedon Mar 29, 2024
In exploring pattern interoperability across themes, I've noticed inconsistencies around how global padding is applied.
I'm just writing out a bit on each area patterns are leveraged, to lay out where the expectations are here.
I'm using base TT4 as a reference, with this markup (gist) as my pattern. The pattern is a fullwidth, constrained layout, Group block its inner blocks set to "wide". I'd consider this the standard "section" structure, where the pattern is fullwidth, but the contents are wide—representing the standard width of the page contents. There is no padding assigned to this pattern, as I'd expect global padding to be applied when it's in use.
Site Editor
Inserting the pattern on a template (meets expectations)
If we add that to the "Blog Home" template of TT4, inside the main
wrapper Group block, the pattern performs as expected. It actually works as expected (with global padding) at the top-level as well—not just within the main
Group.
Global padding is applied properly to the left and right bounds of the pattern—ensuring that the site's intended padding is represented within the pattern, without the pattern having to declare a value for left and right padding. Notice how the inner blocks of the pattern are as wide as the header template part's inner blocks (also using wide
width).
Isolated/focus mode (does not meet expectations)
If I take that same pattern and create a synced pattern from it, there are no changes to the display within the template, as expected, but once I select to edit this pattern (which invokes focus/isolated mode) the global padding is no longer present:
As global padding is properly applied at the top level of a template, I'd expect the same behavior when in focus/isolated view, to have global padding applied.
Inserting the pattern on a page in the Site Editor (does not meet expectations)
TT4 uses a similar structure for the page template, as the blog home: a main
wrapper Group block, set as "default ", with a core/post-content
block set to a constrained
layout. This way, editors can set blocks wide, or fullwidth—but the standard width is the site's contentWidth. This is a standard established template structure.
The problem is however, with this scenario, any patterns added to the post content will not receive the expected global padding values.
The only way to have global padding assigned is to set the core/post-content
block to a default
layout—which is not appropriate, as users' text on a page will be 100% wide, and they'll loose the ability to choose width sizes.
I'd expect the global padding to apply in this scenario.
Post Editor (does not meet expectations)
Inserting the pattern on a page in the post editor
The pattern's global padding is omitted from the Post Editor, as it is within a page using Site Editor. I'd expect the global padding to apply in this scenario as well.
The difference between the Site Editor and the Post Editor, is that in the Site Editor when I changed the page template's core/post-content
block layout to default
, the global padding was applied to the pattern. There was no effect on global padding within the Post Editor.
cc @tellthemachines, as I recall you worked on global padding at some point. :)