WP6.1 Button block Themes based on block-library css will have a different style

[shimotmk]

Description

The theme based on block-library css changes the style of button block.

Perhaps this is due to the fact that the css has been removed by this pull request.
#34180

Is this something that has to be handled on the theme side?

Step-by-step reproduction instructions

1. Theme will be Twenty Ten.
2. Place the button block in WordPress 6.0.
3. Update to WordPress 6.1.
4. Look at the page you created in 2.

Screenshots, screen recording, code snippet

WordPress6.0 Style

WordPress6.1 Style

Environment info

• WordPress 6.1
• Themes Twenty Ten

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

[Mamaduka]

Some of the styles then were restored in #41934.

[ockham]

I thought WordPress/wordpress-develop#3331 had fixed this 🤔

I just tried on wordpress-develop trunk and can't seem to repro:

@shimotmk Did you test this with WP 6.1 Beta 3 (or an earlier Beta, or trunk)? If you haven't tried with Beta 3, would you mind trying it there to see if the issue has been fixed?

cc/ @scruffian

[shimotmk]

@ockham
Thanks for the comment!
I can confirm that it's fixed on the front screen in beta3!

However, it doesn't seem to be fixed in the block editor.💦

The theme is Twenty Ten.

I think if you add the following code, the css will load on the edit screen.
wp_add_inline_style( 'wp-edit-blocks', file_get_contents( gutenberg_url( 'build/block-library/classic.css' ) );

[ockham]

I can repro this -- it's still present in the editor 😕

@scruffian Could you look into fixing this? 🙏 😊

[scruffian]

I see that the CSS file is loaded, but the CSS itself isn't present. It's trying to be loaded from /wp-includes/css/dist/block-library/classic.css?ver=1, but there's nothing at that location. Is this connected to the package building process?

[ockham]

Hmm, I see that file both in my local build, and in https://wordpress.org/wordpress-6.1-beta3.zip, as well as in a Beta 3 test install 🤔

[scruffian]

I have an idea for a fix here: #44731

[ockham]

Update: #44731 was merged and included in WP 6.1 RC1.

@shimotmk Could you check if the issue is fixed in RC1? 😊

[ockham]

I just tested this myself by newly inserting a Buttons block into a post created with current Core trunk (and a freshly reset database):

Editor:

❌

Frontend:

✅

@scruffian Can you have another look what might cause the almost-invisible button label in the editor?

[ockham]

@scruffian pointed out to me that #44731 didn't make it into Core -- it's a PHP change, so it will need a manual backport 😅

[ockham]

@scruffian pointed out to me that #44731 didn't make it into Core -- it's a PHP change, so it will need a manual backport 😅

WordPress/wordpress-develop#3481

[ockham]

WordPress/wordpress-develop#3481 has been committed, and will be included in WP 6.1 RC3.

Please test RC3 once it's released, so we can close this issue if it has been fixed 😊

[shimotmk]

@ockham
Sorry for the late reply.
I checked with WP6.1RC3 and it seems that the color is not hit when hovering the button.
I think you need to add the css that was removed in this pull request to classic-themes.css.
#43553

Themes Twenty Ten

[cbravobernal]

Hi @shimotmk !

Now that 6.1 has been released, could you please check if the issue has been solved?

Thanks!

[edent]

6.1 forces a "classic-themes" stylesheet which overrides the user's theme. This is rather annoying. Would it be possible to either revert this change, or make it so that it respects any theme set up by the user?

There's a brief discussion about how to reverse this change at https://wordpress.stackexchange.com/questions/410983/dequeue-classic-themes-min-css

[scruffian]

These rules were also present previous to 6.1, as they were in the button block. The aim of this CSS is to ensure that blocks that were relying on the default styles are still given the same defaults, but your theme should be able to override them in CSS still. What theme are you seeing a problem with?

[edent]

I built my own theme. Prior to 6.1 the "Subscribe" widget's button was controlled by my theme. This morning, after I upgraded, it had a different colour - set by classic-themes.

[shimotmk]

@c4rl0sbr4v0
I checked with 6.1 and some styles were not reflected.

Can you please check the pull request I made?
#45570

[glendaviesnz]

@scruffian It looks like this is still an issue with some themes unless the block content is resaved in the editor https://core.trac.wordpress.org/ticket/57126#comment:2

[shimotmk]

Yes, I have.
Some styles were added in this branch, but we forgot to add &:hover,&:focus,&:active,&:visited etc. #44334

[scruffian]

I believe &:hover,&:focus,&:active,&:visited were removed in #43553. @jasmussen do you think this is worth reconsidering?

[jasmussen]

It would be ideal if we didn't reintroduce that hardcoded white, the fewer such styles, the better. If need be, we could put it in /wp-includes/css/classic-themes.min.css perhaps? The tricky bit here is that the pseudo styles appear unable to inherit from their main element.

[scruffian]

Maybe the best thing is to ask themes that are experiencing issues to add their own styles for this, if not too many are impacted?

[chthonic-ds]

I built my own theme. Prior to 6.1 the "Subscribe" widget's button was controlled by my theme. This morning, after I upgraded, it had a different colour - set by classic-themes.

Similar situation and outcome here: theme button styles have been overridden when upgrading a bunch of sites to WP 6.1.1. These are sites that use blocks but were created before theme.json was introduced.

The aim of this CSS is to ensure that blocks that were relying on the default styles are still given the same defaults

The classic-themes.min.css stylesheet is overwriting theme styles in themes that have opted out of using core CSS.

[tmanolov]

I built my own theme. Prior to 6.1 the "Subscribe" widget's button was controlled by my theme. This morning, after I upgraded, it had a different colour - set by classic-themes.

Similar situation and outcome here: theme button styles have been overridden when upgrading a bunch of sites to WP 6.1.1. These are sites that use blocks but were created before theme.json was introduced. The classic-themes.min.css stylesheet is overwriting theme styles in themes that have opted out of using core CSS.

This was mentioned above, it works for me.
https://wordpress.stackexchange.com/questions/410983/dequeue-classic-themes-min-css

[shimotmk]

Okay, if there is a rule that the core (Gutneberg) removes styles that the theme side adds, that is fine.

As far as I know, some themes have changed their look by not adapting this style, and some confusion was caused by the style being added by another file.

I think there should have been an announcement post or something in advance.

This issue is closed for now.
Please reopen again if you have any questions.