Make WordPress Core

Opened 16 months ago

Closed 15 months ago

Last modified 15 months ago

#57688 closed defect (bug) (fixed)

File Block: Missing backward compatible styles for classic themes

Reported by: wildworks's profile wildworks Owned by: hellofromtonya's profile hellofromTonya
Milestone: 6.2 Priority: normal
Severity: normal Version: 6.1
Component: Editor Keywords: has-patch gutenberg-merge has-testing-info commit
Focuses: css Cc:

Description

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.

Attachments (1)

57688.version-number.diff (644 bytes) - added by sabernhardt 15 months ago.
update version number to '6.2'

Download all attachments as: .zip

Change History (13)

This ticket was mentioned in PR #4045 on WordPress/wordpress-develop by @wildworks.


16 months ago
#1

  • Keywords has-patch added

Trac ticket:

#2 @Mamaduka
16 months ago

  • Keywords gutenberg-merge added
  • Milestone changed from Awaiting Review to 6.2

#3 @hellofromTonya
15 months ago

  • Keywords has-testing-info added
  • Owner set to hellofromTonya
  • Status changed from new to reviewing

Self-assigning for testing, review, and commit.

#4 @hellofromTonya
15 months ago

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).

#5 @hellofromTonya
15 months ago

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 ✅

#6 @hellofromTonya
15 months ago

  • Component changed from General to Editor
  • Focuses css added
  • Keywords commit added

Patch is approved. Marking for and preparing the commit.

#7 @hellofromTonya
15 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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:

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

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

#8 @hellofromTonya
15 months ago

  • Version set to 6.1

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

@sabernhardt
15 months ago

update version number to '6.2'

#10 follow-up: @sabernhardt
15 months ago

  • Keywords has-testing-info commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

@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.)

Last edited 15 months ago by sabernhardt (previous) (diff)

#11 in reply to: ↑ 10 @hellofromTonya
15 months ago

  • Keywords has-testing-info commit added
  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#12 @flixos90
15 months ago

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.

Note: See TracTickets for help on using tickets.