Content Block: Unwanted top margin on the first visible element in the block when it's inside a query block in the site editor.

[iamtakashi]

Description

Sorry for the long title! There is an extra top margin on the first element in the content block when it's inside a query block. This is because, in the markup, the first visible element is not the first child, so the margin removal rule does not apply to it. This issue only occurs in the site editor. This is not a theme-specific issue.

Step-by-step reproduction instructions

1. Go to the site editor
2. Place a content block inside a query block.
3. See the unwanted gap on the first visible element.

Screenshots, screen recording, code snippet

Environment info

• WP 6.8
• Gutenberg Trunk (The issue occurs even without activating Gutenberg)
• TT5, but not a theme-specific issue.

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[biplob-g]

Hi @iamtakashi
I tried to reproduce the issue you mentioned.
This behavior appears to be intentional as an equal margin is assigned for every container block to maintain consistent spacing within the editor.

20250426-1832-48.1977173-ezgif.com-video-to-gif-converter.mp4

Since this is part of the expected layout structure, no changes are needed here.

[iamtakashi]

Hi @biplob-g, I don't think this is intentional. Please take a look at the comparison. The left is in the editor, and the right is the front of the site. In the editor, the first paragraph has the unwanted top margin, adding an extra gap between the title and the first paragraph.

an equal margin is assigned for every container block to maintain consistent spacing within the editor

You're referring to this rule.

:root :where(.is-layout-constrained) > * {
    margin-block-start: 1.2rem;
    margin-block-end: 0;
}

However, the top margin is meant to be removed from the first child with this rule.

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

However, as I mentioned initially, the rule isn't working because the first paragraph is not in the first child in the markup in the editor. There are style and svg tags in front of the paragraph. I'm unsure of the purpose of these elements in the editor markup, but either they need to be removed, or we need to adjust the removal rule above.

[yogeshbhutkar]

Thanks, @iamtakashi, for identifying the issue and providing a detailed explanation. I've opened PR #70003, which should address and resolve it.