Description

When specifying styles.elements.h2.spacing.margin.top in theme.json, I expected the same appearance in both iframe Editor and Non-iframe Editor, but the styles differ.

In the iframe Editor, margin-top: 5rem is applied to h2 as expected.
In the Non-iframe Editor, the value of styles.spacing.blockGap takes precedence, overriding the margin-top of h2.

{
    "styles": {
        "elements": {
            "h2": {
                "spacing": {
                    "margin": {
                        "top": "5rem"
                    }
                }
            }
        },
        "spacing": {
            "blockGap": "1.2rem"
        }
    }
}

Step-by-step reproduction instructions

1. Add styles.elements.h2.spacing.margin.top to theme.json
2. Create a meta box in the editor. (I activated Yoast SEO for this)
3. Make sure the editor is not an iframe.
4. Inspect the CSS.

Screenshots, screen recording, code snippet

iframe Editor

Non iframe Editor

Environment info

• WordPress: 6.6
• PHP: 8.1.23-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 126.0.0.0 (macOS)
• Theme: Twenty Twenty-Four 1.2
• MU-Plugins:
  • 0-32bit-integer-warnings.php
  • 0-allowed-redirect-hosts.php
  • 0-check-theme-availability.php
  • 0-dns-functions.php
  • 0-permalinks.php
  • 0-sqlite.php
  • 0-thumbnails.php
• Plugins:
  • Yoast SEO 23.0

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