Layout: top margin overwrites theme.json block CSS when gap support enabled

[ramonjd]

Description

Since Gutenberg 11.7 (in #34491), the gutenberg_get_layout_style method adds the following CSS to .wp-block-post-content children and their adjacent siblings where block spacing support (A.K.A blockGap) is enabled:

> * + * {
    margin-top: var( --wp--style--block-gap );
    margin-bottom: 0;
}

See layout.php.

Block spacing support was introduced in #33991.

For blocks that have opted-in to block spacing, such as the Columns block or in the PR for the Social Links block, this CSS's specificity overwrites any block-specific top and bottom margins in theme.json.

Noticed by @stacimc when testing #35374 (comment) 👍

Step-by-step reproduction instructions

Set a top and bottom margin for the core/columns block in your theme.json

       ...
	"styles": {
                 ...
		"blocks": {
			"core/columns": {
				"spacing": {
					"margin": {
						"top": "20px",
						"bottom": "30px"
					}
				}
			}
		}
	}

In a new post, insert a Columns Block as a second block, for example, insert a paragraph first, then columns.

Save the post and inspect the styles.

What I expected

The theme.json styles would take precedence over any plugin-generated block layout styles.

What happened

The plugin-generated block layout styles take precedence. See screenshot below.

Screenshots, screen recording, code snippet

Environment info

• WordPress 5.8, Gutenberg 11.7, TT1 Blocks

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

[ulziibat-n]

I have the same problem.

[ramonjd]

Closing. Cannot reproduce as of 14.3