Skip to content

Editor block styles for core button overwritten by random global styles #77015

@hellodaylight

Description

@hellodaylight

Description

There are global styles for the core/button being output and I can't figure out where they are coming from. I have no settings or styles on buttons in my theme.json. And in the editor the block styles for Button (and Buttons) are reset to default (cleared). On inspect I can see the offending code is coming from global-styles-inline-css.css, but why is it randomly grabbing some of my other global style attributes (fonts, colors, etc), and why can't I overwrite it via Styles -> Blocks > Button, and why is it output AFTER other site or editor block styles. The only way to fix this seems to be adding theme.json overrides, which is fine, but surely the block style editor should overwrite those and global styles by default, for example.

"styles": {
	"blocks": {
		"core/button": {
			"variations": {
				"fill": {
					"border": {
						"radius": "0"
					},
					"spacing": {
						"padding": {
							"top": "0.5rem",
							"bottom": "0.5rem",
							"right": "1rem",
							"left": "1rem"
						}
					}
				}
			}
		}
	}
}

Step-by-step reproduction instructions

  • Make sure no core/button block overrides are set in theme.json.
  • Make sure there are no extra css styles for .wp-block-button__link, .wp-element-button, .wp-block-button, and .wp-block-buttons in your theme or site css files.
  • Go to Styles -> Blocks -> Button styles in the editor and make sure all styles are cleared/reset.
  • Click the little Preview/Eye icon
  • Try to change the horizontal padding, text and background colors, border radius, font family, font size.
  • For me, there are no styles results in the preview or editor or front end

Screenshots, screen recording, code snippet

Image Image

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

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Block] ButtonsAffects the Buttons Block[Type] BugAn existing feature does not function as intended

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions