Global Styles: Margins on the paragraph block

[scruffian]

Description

When a theme is opted in to blockGap, its not possible to set margins on the paragraph block.

Step-by-step reproduction instructions

1. Switch to emptytheme
2. Add some paragraphs to a post
3. Change your theme.json file to this one:

{
	"version": 1,
	"settings": {
		"color": {
			"gradients": [],
			"link": true,
			"palette": []
		},
		"spacing": {
			"blockGap": true,
			"customPadding": true,
			"units": [
				"%",
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
		"typography": {
			"customLineHeight": true,
			"fontFamilies": []
		},
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	},
	"styles": {
		"blocks": {
			"core/gallery": {
				"spacing": {
					"margin": {
						"bottom": "100px"
					}
				}
			},
			"core/paragraph": {
				"spacing": {
					"margin": {
						"bottom": "1em",
						"top": "1em"
					}
				}
			}
		}
	}
}

1. When you view the page, the theme uses block gap to separate paragraphs, not the margins from Global Styles

Screenshots, screen recording, code snippet

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

[ndiego]

The title of the ticket is a bit too simplistic, this issue actually nullifies any margin settings set in theme.json if blockGap is enabled. It's because the following CSS is so specific. I feel a solution needs to be found before 5.9 heads out the door, especially since more and more block types are getting dimension controls. I am happy to explore solutions, if someone can point me in the right direction.

[ramonjd]

I noticed this effect when trying to layout a homepage in the Site Editor using stacked Group Blocks.

This is the effect I was after (the mixed units are just there so I can recognize my styles in the inspector 😄 ):

                "blocks": {
                        "core/group": {
                                "spacing": {
                                        "margin": {
                                                "top": "0rem",
                                                "bottom": "0px"
                                        }
                                }
                        },

When blockGap is enabled:

The only way I found to get around it is to opt-in to margin support for the Group Block and manually set it to 0, which isn't ideal.

Here is where we're adding the specific CSS for the default layout support.

The .editor-styles-wrapper parent selector makes things specific here. Removing .editor-styles-wrapper makes things work as expected.

The extra specificity is explained in the layout rule builder utility comments:

	// Ideally we shouldn't need the `.editor-styles-wrapper` increased specificity here
	// The problem though is that we have a `.editor-styles-wrapper p { margin: reset; }` style
	// it's used to reset the default margin added by wp-admin to paragraphs
	// so we need this to be higher speficity otherwise, it won't be applied to paragraphs inside containers
	// When the post editor is fully iframed, this extra classname could be removed.

The Post Editor doesn't yet appear to be "fully iframed"

I agree that styles defined at the block level in theme.json should override the rules of the layout abstraction. What's the right approach? Make these styles even more specific?

I'm thinking it could be another job for :where(.editor-styles-wrapper) ${ subselector } ${ append }

Nope, just tried it 😄

[tellthemachines]

Closing since #47858 has been merged.