Global Margin is not applied on the front end for the separator block

[antonyjsmith]

Description

When setting a margin for the separator block in global styles the margin is not output on the front end. It all looks fine in the site and page editor however no dice on the front end.

The global style appears to be getting overridden by this default style:

body .is-layout-constrained > * + * {
margin-block-start: 1.5rem;
margin-block-end: 0;
}

Applying the margin directly in the page editor works since the style is applied with a higher specificity than the above style.

Step-by-step reproduction instructions

Add a separator
Set a margin via the global style editor
Add a separator to a page

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress 6.1.1
Tried with and without Gutenberg 14.9.1
Twenty Twenty-Three theme
OSX Safari, Chrome and Firefox all the same

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

[t-hamano]

Thank you for submitting the issue.

I believe this issue can occur in all blocks that support margins. This issue is reported in detail at #43404.

[richtabor]

@antonyjsmith Are you using Twenty Twenty-Three with any edits to the page/single templates? I'm actually not able to replicate this, with WordPress 6.1.1 - with, or without, the Gutenberg plugin.

Here's the front-end:

Here's the edit:

Here's the markup I'm using for testing; feel free to add yours as well:

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}},"backgroundColor":"tertiary","layout":{"type":"default"}} -->
<div class="wp-block-group has-tertiary-background-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph -->
<p>Voluptate esse id do est ullamco enim reprehenderit enim nisi excepteur officia nulla. Excepteur ipsum velit id qui do in dolor deserunt do laborum ex eu qui. Aliquip cupidatat id cupidatat amet enim Lorem enim.</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"style":{"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Voluptate esse id do est ullamco enim reprehenderit enim nisi excepteur officia nulla. Excepteur ipsum velit id qui do in dolor deserunt do laborum ex eu qui. Aliquip cupidatat id cupidatat amet enim Lorem enim.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

[t-hamano]

@richtabor
To reproduce this issue, you need to apply margin to the block in the global style or theme.json.
Any block with margin will be able to reproduce this.