Cannot override default block styles via child theme's theme.json

[dandry]

Description

I am trying to change the default top spacing (margin) for the Embed block used in Gutenberg. I noticed that for some reason, the default setting is:

.wp-block-embed {
  margin: 0 0 1em;
}

which I believe is defined in /wp-includes/blocks/embed/theme.css.

It seems that it is not really overridable/replaceable via theme.json of a child theme.

Step-by-step reproduction instructions

1. Activate a block theme
2. Create and activate a child theme
3. Anywhere on the website (page/post), try to use the embed block. When you publish and check it in the frontend, it will get the default margin of 0 0 1em.
4. Use child theme's theme.json to override the block spacing and add 2rem top margin:

"styles": {
        "blocks": {
            "core/embed": {
                "spacing": {
                    "margin": {
                        "top": "2rem"
                    }
                }
            }
        }
    }

5. Observe that the style is applied and a) it does not replace the default styling and b) it appears before the original styling in the CSS, thus the override does not work, due to CSS specificity.

I would expect the styling to be overwritten (to reduce redundant code) or at least appear as a last entry in my CSS styling to ensure that it actually is applied.

Screenshots, screen recording, code snippet

In the screenshot below, the override is applied in line 96 of the HTML document, whereas the original styling appears in line 99.

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

[aaronrobertshaw]

Thanks for taking the time to submit this issue @dandry 👍

I was initially having trouble replicating this however I think I've isolated the issue to 6.4 without Gutenberg active.

Would you be able to fill out the Environment Info section of the issue description to confirm which versions of WordPress and Gutenberg you're using?

The process I've followed so far includes:

1. Using 6.4.3 and Gutenberg trunk
2. Created new child theme from TT4
3. Couldn't replicate the issue in editor or frontend for both pages and posts
4. Opted into wp-block-styles to enqueue opinionated block styles
5. Still couldn't replicate
6. Switched WordPress to 6.5 RC
7. Couldn't replicate issue
8. Repeated process using Global Styles
9. Couldn't replicate
10. Deactivated Gutenberg (still on 6.5 RC)
11. Couldn't replicate
12. Downgraded to WordPress 6.4.3 (still with Gutenberg deactivated)
13. Could replicate the problem ✅

6.4 With Gutenberg	6.4 Without Gutenberg

[aaronrobertshaw]

Actually, it appears this issue is a duplicate of #54936 & #54936.

I'll close this one in favour of the existing issues given it looks like this isn't specific to child themes.

@dandry if you feel there are aspects of the issue you're facing that aren't covered by those issues, this can be reopened with additional details and an updated description.