Classic.css overrides styles.elements.button styles in hybrid themes

[eric-michel]

Description

In 14.3, classic.css was introduced to provide button styles to classic themes. However, due to how when this stylesheet is output (after the global styles generated by theme.json) it overrides border radius settings (and I assume any other style attribute defined in classic.css) for buttons in theme.json. This will break many sites for me that work on our hybrid theme. I can and will of course dequeue classic-theme-styles but this feels like a very wrong implementation.

Does classic.css even need to be output at all on any theme with a theme.json? It seems like it would only be needed on fully classic themes.

Step-by-step reproduction instructions

Any hybrid theme will show this. Unfortunately, none of the Twenty Twenty-* themes are hybrid, which is my normal go-to for testing. The closest testing environment I could find would be to add a theme.json to Twenty Twenty-One and manually remove button-oriented styles from the theme's stylesheet such that theme.json controls the button border radius. Then install the Gutenberg plugin and you will see the issue.

Screenshots, screen recording, code snippet

A button with a theme.json defined 20px border radius on current production WP;

The same button with the only change being the current version of the Gutenberg plugin active:

The same styles are applied in the editor

Environment info

WP version 6.1.1 with and without the Gutenberg plugin active.

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

[t-hamano]

@eric-michel
Thank you for the report.

I have not been able to reproduce this problem. As far as I know, in WordPress 6.1, even with the classic theme, it should not enqueue the classic-theme.css file if your theme has theme.json.

The commit in this core shows that WP_Theme_JSON_Resolver::theme_has_support() decides whether to enqueue that file:

https://github.com/WordPress/wordpress-develop/blob/6.1/src/wp-includes/script-loader.php#L3667-L3673

Furthermore, in WordPress 6.2, this commit introduces the wp_theme_has_theme_json() function, but the behavior should not change.

https://github.com/WordPress/wordpress-develop/blob/d97e56fc26bbb8ae8d6d0835fb89e5e7d93c06a1/src/wp-includes/script-loader.php#L3705-L3711

However, the Gutenberg plugin still checks if it is a block theme, so I think this style is enqueued even for classic themes with theme.json.

@scruffian

I have discovered that you are attempting to fix the above problem in #45063. What do you think if we merge this PR the problem will be fixed?

[eric-michel]

edit: I wrote my whole reply while missing this note:

However, the Gutenberg plugin still checks if it is a block theme, so I think this style is enqueued even for classic themes with theme.json.

If this is a problem specific to the plugin, then that's no problem on my end. My main concern is that my sites will break when WP actually updates.

Hi @t-hamano thanks for the quick response! I am able to replicate this issue via the following method:

• Fresh install of WP
• Fresh install of the Twenty Twenty-One theme
• Install updated Gutenberg plugin
• Note that /wp-includes/css/classic-themes.min.css?ver=1 is enqueued
• Add a super basic theme.json (I used the contents below)
• Refresh page and note that now /wp-content/plugins/gutenberg/build/block-library/classic.css?ver=1 is being enqueued

Here is the theme.json I'm using (from https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/):

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Black",
                    "slug": "black",
                    "color": "#000000"
                },
                {
                    "name": "White",
                    "slug": "white",
                    "color": "#ffffff"
                }
            ]
        }
    }
}

Ironically, the classic-themes.min.css stylesheet that exists prior to the addition of theme.json is being enqueued before the global styles, which means it does not interfere with them like the post-theme.json classic.css does.

Is it possible there is something wrong with my theme.json files that is making them not recognized by WP? Does WP look for a specific value in theme.json that I don't have?

[scruffian]

I think that #45063 will solve this.

[scruffian]

Since this patch has landed in core I think we can close this issue.