Buttons Block: Theme style seems to be overridden

[iamtakashi]

Description

I've realised recently the style of buttons on a site has changed, and it seems to be the theme style is overridden with the following CSS.

.wp-element-button, .wp-block-button__link {
    background-color: #32373c;
    color: #fff;
    font-size: 1.125em;
    text-decoration: none;
}

This issue can be seen in multiple themes, and it doesn't appear to be a theme-specific issue. The button appears as expected in the editor, but not on the front of the site. If I deactivate the Gutenberg plugin, the theme style comes back.

Step-by-step reproduction instructions

1. Go to the editor and add a button with a Buttons block.
2. See the block on the front of the site.

Screenshots, screen recording, code snippet

Remote Theme

Without plugin	With plugin

Twenty Twenty-two Theme

Without plugin	With plugin

Environment info

WordPress 6.0
Gutenberg trunk
Chrome Mac

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

[annezazu]

Listing as a bug for now but I'm not quite sure what's intentional so it may not be as there have been some recent changes #34180

[iamtakashi]

Thank you, @scruffian!

[christinameyne]

Still having this issue 7 months later. I can't specify a default button color without adding !important to the theme file. Don't want to do that because I don't want ALL buttons my custom color, just the default.

[scruffian]

@christinameyne what CSS are you using? There's probably a way to achieve what you want with more specific CSS, and no !important. Alternatively if you're using a theme.json file you can specify your colors in there.

[christinameyne]

@scruffian Ah! I was just using ".wp-element-button", but I added

.wp-element-button, .wp-block-button__link 

And that worked! My mistake. :)

I didn't realize we could update the buttons in the theme.json yet. I tried this:

"styles": {
		"elements": {
			"button": {
				"color": {
					"text": "#ffffff",
					"background": "var(--wp--preset--color--black)"
				},
				"border": {
					"color": "var(--wp--preset--color--black)"
				}
			}
		}
	}

But it didn't work for me.

[scruffian]

@christinameyne that should work. Do other settings in your theme.json work?

[patrickwc]

Hi @scruffian , I've noticed this issue as well since WP 6.0. Adding the buttons to theme.json like @christinameyne had worked for me. Is it intentional behaviour to have WP Core output a black button everywhere unless you do this?

[patrickwc]

Is there a list of which elements should be added to theme.json to avoid WP Core colours being added to them by default?

[scruffian]

Is it intentional behaviour to have WP Core output a black button everywhere unless you do this?

This was the default style of buttons prior to 6.0, so the intention was to maintain these styles unless you overrode them, otherwise people who didn't have any button styles would lose their default styles.

Is there a list of which elements should be added to theme.json to avoid WP Core colours being added to them by default?

You can see the default styles here: https://github.com/WordPress/gutenberg/blob/trunk/lib/theme.json

The main things are:

• Buttons have colors, padding and no border
• Links have an underline
• Blocks have default gap of 24px

[patrickwc]

Thanks, this is good to know. I don't think the button styles used to be output inline onto every page, which obviously means their priority is now higher than the theme's CSS unless you update the theme.json colours. That solved a mystery to me, I will try to get a list together and share my findings - hopefully it will help others. We noticed some flickering from the default black to the blue because we use Perfmatters and their UnusedCSS critical CSS generation feature.

Cheers!

[patrickwc]

@scruffian further to this, I realised that this only works if I override the core button styles in my parent theme. If a child theme is active, the parent theme's theme.json button styles are included inline on every page, not the child theme's theme.json button styles. So we are still getting flickering with perfmatters on projects if the child theme's button styles are different. Would you recommend me submitting a separate issue for this?

[scruffian]

Yes creating an issue that describes the problem would be great, thank you!