Skip to content

Layout Styles: Block list appender causes inconsistent application of layout margin styles #61846

@aaronrobertshaw

Description

@aaronrobertshaw

Description

When a block type has margins, defined either through theme.json or global styles, they can be overridden by layout styles e.g. the constrained layout which removes the start and end margins on the first and last child elements respectively.

When the block list appender is inserted within a container with such a layout, the style removing the last child's margin now targets the appender instead of the last block causing a layout shift

Step-by-step reproduction instructions

  1. Navigate to Appearance > Editor > Global Styles > Blocks > Cover
  2. Apply vertical margins to Cover blocks
  3. Add a Cover block within a Group block to a page or post
  4. Note the Group block's default constrained layout removes the Cover block's margins
  5. Select the Group block and see the bottom margin suddenly applied

Screenshots, screen recording, code snippet

Screen.Recording.2024-05-22.at.4.50.11.PM.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Feature] LayoutLayout block support, its UI controls, and style output.[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions