The margin added at the top level styles (for body) in theme.json is override by a margin added from gutenberg

[overclokk]

Description

If I add a margin property to the theme.json at the top level styles the style generated is overwritten by a style added by the gutenberg plugin.

I also tried with the 2022 theme and gutenberg active.

Step-by-step reproduction instructions

Gutenberg plugin is activated.
Theme 2022 activated

Add this to theme.json

{
	"styles": {
		"spacing": {
			"margin": "0 5rem",
			"padding": "0"
		},
	}
}

See the source of the page.
In my test I see this in the source:

body { // This is added by the theme.json
	margin: 0 5rem;
	padding: 0;
	--wp--style--block-gap: 1.5rem;
}
body { margin: 0; } // This is added by the gutenberg plugin

Screenshots, screen recording, code snippet

No response

Environment info

WP latest
Gutenberg Latest fro repo
Theme 2022

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

[getdave]

After some digging and testing I've identified this is coming from

https://github.com/WordPress/wordpress-develop/blob/64b7eb383a567aaeab5460c92e82afbd731d1e63/src/wp-includes/class-wp-theme-json.php#L698

This margin is added because we always add a top level node to our styles in get_style_nodes():

https://github.com/WordPress/wordpress-develop/blob/64b7eb383a567aaeab5460c92e82afbd731d1e63/src/wp-includes/class-wp-theme-json.php#L1312-L1322

I have a potential fix.

[getdave]

Gutenberg PR: #36960

Core patch: https://core.trac.wordpress.org/ticket/54550