Skip to content

Block margin theme.json settings are being overridden #44736

@mikachan

Description

@mikachan

Description

When margin is applied via theme.json to a site title block, it looks like it's being overridden by the following CSS on the front end:

body .is-layout-flex > * {
    margin: 0;
}
Editor Front end
image image

Step-by-step reproduction instructions

  1. Insert site title block
  2. Set some custom margin sizes in theme.json for core/site-title
  3. You should see the margins correctly applied in the editor, but they are not applied correctly on the front end

Example theme.json:

"core/site-title": {
				"spacing": {
					"margin": {
						"bottom": "32px",
						"top": "32px",
						"left": "0",
						"right": "0"
					}
				},

Screenshots, screen recording, code snippet

No response

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Feature] LayoutLayout block support, its UI controls, and style output.[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions