Skip to content

Conversation

@Sourav61
Copy link
Contributor

Ensured consistent margin application for blocks when block list appender appears

What?

Closes #61846

Fixes an issue where the .block-list-appender dynamically modifies the block structure, causing inconsistent margin application for blocks inside .is-layout-constrained containers. This ensures that margins are correctly applied even when the block appender is added or removed dynamically.

Why?

Previously, when a block (e.g., Cover block) was inside a Group block with .is-layout-constrained, the following CSS rules were applied:

:root :where(.is-layout-constrained) > :first-child {
    margin-block-start: 0;
}

:root :where(.is-layout-constrained) > :last-child {
    margin-block-end: 0;
}

However, when selecting the Group block in the editor, the .block-list-appender gets appended to the group, making it the new :last-child, which removes the intended margin adjustments from the actual content block, causing a layout shift.

How?

  • Used :has(> .block-list-appender) to detect when a .block-list-appender is present inside .is-layout-constrained.
  • Applied :nth-last-child(2) to target the second-to-last element, ensuring the last actual content block (not the appender) retains the correct margin styles.
  • This prevents the .block-list-appender from disrupting the layout when dynamically added or removed

Testing Instructions

  1. Add a Cover block inside a Group block in the editor.
  2. Apply margin styles via theme.json or global styles.
  3. Observe the margins before and after selecting the Group block.

…ck appender

Ensured consistent margin application for blocks with dynamic block appender
…ck appender

Ensured consistent margin application for blocks with dynamic block appender
@github-actions
Copy link

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Sourav61 <sourav08@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Revert the unwanted changes
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Feature] Layout Layout block support, its UI controls, and style output. labels Apr 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Layout Layout block support, its UI controls, and style output. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants