Skip to content

Improve global padding to be more consistent #60308

Closed

Description

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

CleanShot 2024-03-29 at 14 12 53

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:

CleanShot 2024-03-29 at 14 26 14

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.

CleanShot 2024-03-29 at 14 41 46

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.

CleanShot 2024-03-29 at 16 35 00

cc @tellthemachines, as I recall you worked on global padding at some point. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    [Feature] LayoutLayout block support, its UI controls, and style output.[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions