File Block: Missing backward compatible styles for classic themes

[wildworks]

Gutenberg issue: ​https://github.com/WordPress/gutenberg/pull/47686

The button element styles were moved from each block to theme.json (​https://github.com/WordPress/gutenberg/pull/41822). And the style for representing the download button in the file block has also been removed from the block's stylesheet. Since there are no backward-compatible styles for the file block, classic themes without theme.json will apply unnatural styles.

Editor-side styles were fixed by Gutenberg's PR: ​https://github.com/WordPress/gutenberg/issues/45399

However, if we want to apply this style to the front-end side, we need to update the file (src/wp-includes/css/classic-themes.css) included in the WordPress core.

Trac ticket:

[hellofromTonya]

Self-assigning for testing, review, and commit.

[hellofromTonya]

Testing Instruction

Classic themes such as Twenty Twenty One and Twenty Twenty cannot be reproduced because they have styles for file blocks. So a plan theme is needed to test.

• Step 1: Create a directory wp-content/themes/empty-classic.

• Step 2: Navigate into that theme directory.

• Step 3: Add a new file named style.css.

• Step 4: Open and then copy/paste the following code into the style.css file:

/*
Theme Name: Empty Classic
*/

• Step 5: Create a new file named index.php.

• Step 6: Open and then copy/paste the following code into the index.php file:

<?php
wp_head();
the_post();
the_content();
wp_footer();

• Step 7: Log into the admin area.

• Step 8: Create a new post in Posts > Add New.

• Step 9: Add a file block to that new post.

• Step 10: Select a file from your hard drive (e.g. test.txt file).

• Step 11: Publish the post.

• Step 12: View the post in the front-end.

Expected results

• Before the patch, the download button is unstyled.
• After the patch, the download button is styled to match the new CSS added by the patch (i.e. text color and background color).

[hellofromTonya]

Test Report

Patch: ​https://github.com/WordPress/wordpress-develop/pull/4045/

Env

• WordPress: trunk
• Plugins: none
• Theme: empty classic (see test instructions)
• OS: macOS
• Browser: Chrome, Firefox, and Edge

Test Results

• Before the patch, the download button is a hyperlink ❌

• After the patch, the download button is styled as expected ✅

[hellofromTonya]

​Patch is approved. Marking for and preparing the commit.

[hellofromTonya]

In 55323:

Editor: Restores file block button styles for classic themes.

Adds styles into wp-includes/css/classic-themes.css to restore file block button element styling for classic themes.

Why?

In [54257] and [54118], button element styles were moved from each block to theme.json. For the file block, the download button styles were removed from the block's stylesheet. These changes impacted themes without a theme.json file (i.e. classic themes).

This changeset restores the styles for backwards-compatibility.

References:

• ​Gutenberg PR 47686

Follow-up to [54257], [54118].

Props wildworks, scruffian, mamaduka, ntsekouras.
Fixes #57688.

[hellofromTonya]

Was introduced in 6.1 when [54257] and [54118] moved button element styles from each block to theme.json.

Committed via https://core.trac.wordpress.org/changeset/55323.

[sabernhardt]

update version number to '6.2'

[sabernhardt]

@flixos90 noticed that the external stylesheet's version number is always 1 (ticket:56990#comment:34), but it will not be solved by moving the styles inline. The version argument still needs updating, and I chose '6.2' instead of the '20230213' modified date. (Either string would work.)

[hellofromTonya]

Replying to sabernhardt:

@flixos90 noticed that the external stylesheet's version number is always 1 (ticket:56990#comment:34), but it will not be solved by moving the styles inline. The version argument still needs updating, and I chose '6.2' instead of the '20230213' modified date. (Either string would work.)

Thanks for raising this @sabernhardt. However, that bugfix is not related to this specific ticket, as this ticket is adding to the stylesheet for the File Block.

In doing a search of Core, there are multiple instances of using true for the version number. Each needs to be reviewed and potentially fixed. I've opened #57771 for this scope of work.

Reclosing this ticket fixed.

[flixos90]

In 55417:

Editor: Fix invalid parameters being passed to wp_register_style().

Boolean true is not a valid value for the $ver or $media parameters of wp_register_style().

Props sabernhardt, flixos90, hellofromtonya.
Fixes #57771. See #56990, #57688.