Make WordPress Core

Opened 6 days ago

Last modified 4 days ago

#66375 new defect (bug)

Enqueue the classic theme styles synced from Gutenberg instead of `classic-themes.css`

Reported by: wildworks Owned by:
Priority: normal Milestone: Awaiting Review
Component: Editor Version:
Severity: normal Keywords: has-patch has-unit-tests
Cc: Focuses:

Description

wp-includes/css/classic-themes.css is needed to provide the default styles of some core blocks, such as the Button block, in classic themes without a theme.json.

Gutenberg has the same styles in ​classic.scss, and its build output is already synced to core as wp-includes/css/dist/block-library/classic.css, but this file is never loaded. Instead, core enqueues its own copy, which is outdated compared to Gutenberg and is missing the styles for the Tabs and Accordion blocks (​GB 73608), ​GB 77607).

Proposed changes

Remove the file bundled in core, and enqueue the stylesheet synced from Gutenberg as classic-theme-styles instead. This way, future changes to the styles will reach core through the regular package sync.

Attachments (4)

66375-tt1-trunk.png​ (17.7 KB ) - added by softglaze 4 days ago.
Twenty Twenty-One, before the patch (trunk 7.2-beta1-64694)
66375-tt1-pr.png​ (17.6 KB ) - added by softglaze 4 days ago.
Twenty Twenty-One, with PR 14826
66375-file-old-markup-twentyten-trunk.png​ (6.4 KB ) - added by softglaze 4 days ago.
Twenty Ten, File block with pre-6.1 markup (second row), before the patch
66375-file-old-markup-twentyten-pr.png​ (6.5 KB ) - added by softglaze 4 days ago.
Twenty Ten, File block with pre-6.1 markup (second row), with PR 14826

Download all attachments as: .zip

Change History (6)

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


6 days ago
#1

  • Keywords has-patch has-unit-tests added

Registers classic-theme-styles with wp-includes/css/dist/block-library/classic.css, which is synced from Gutenberg, instead of the hand-maintained wp-includes/css/classic-themes.css. The old file is removed, and the stylesheet now has RTL support.

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: Implementation and PR description; reviewed by me.

---
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See ​GitHub Pull Requests for Code Review in the Core Handbook for more details.

🤖 Generated with ​Claude Code

@softglaze
4 days ago

Twenty Twenty-One, before the patch (trunk 7.2-beta1-64694)

@softglaze
4 days ago

Twenty Twenty-One, with PR 14826

@softglaze
4 days ago

Twenty Ten, File block with pre-6.1 markup (second row), before the patch

@softglaze
4 days ago

Twenty Ten, File block with pre-6.1 markup (second row), with PR 14826

#2 @softglaze
4 days ago

Patch Testing Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/14826 (head 83edc9f, the wordpress-build-14826 build from the PR's Test Build Processes run)

Environment

  • WordPress: 7.2-beta1-64694 (nightly, before) and 7.2-beta1-20261024.113604 (PR build, after)
  • PHP: 8.3.33
  • Server: PHP.wasm (WordPress Playground CLI 3.1.60)
  • Database: SQLite (8.0.38-mysql-on-sqlite-3.1.0)
  • Browser: Chrome 155
  • OS: Windows 11 Pro
  • Theme: Twenty Twenty-One 2.9, then each of the 11 classic default themes (Twenty Ten to Twenty Twenty-One)
  • MU Plugins: one test helper that switches the front end to RTL with ?rtl=1
  • Plugins: None

Steps taken

  1. Start two Playground sites, one with the nightly and one with the PR build.
  2. In both, publish the same post: a Buttons block, a File block, an Accordion block and a Tabs block (added in the block editor), plus a File block with the older markup, where the download link has no wp-element-button class. That class was added in ​https://github.com/WordPress/gutenberg/pull/41239 (WordPress 6.1), so File blocks saved before that still have the older markup.
  3. Activate each of the 11 classic default themes in turn and compare the front end: computed styles of .wp-block-button__link, .wp-block-file__button, .wp-block-accordion-heading__toggle (normal and hover) and the tab buttons, plus screenshots.
  4. Check which file is printed as classic-theme-styles-inline-css, with and without ?rtl=1.
  5. Results:
Check Before (trunk) After (patch)
Stylesheet printed as classic-theme-styles classic-themes.min.css, 350 bytes css/dist/block-library/classic.min.css, 1,062 bytes
Accordion Heading, Twenty Twenty-One toggle looks like a theme button (dark #28303d background, light text) transparent background, text inherits the heading color, same on hover
Accordion Heading, other 10 themes transparent no change
Button block, 11 themes theme look no change
File block, current markup, 11 themes not underlined (except Twenty Fourteen) no change
File block, older markup, Twenty Ten "Download" not underlined "Download" underlined
Tabs, 11 themes tab buttons pick up the theme's button styles (filled buttons in Twenty Twenty-One and Twenty Twenty, for example) no change
  1. ✅ Patch is solving the problem for the Accordion Heading block. ❌ Two gaps, both in the synced Gutenberg stylesheet: the File button underline on older markup, and the Tab rules, which match nothing.

Expected result

  • Classic themes without a theme.json load the stylesheet synced from Gutenberg, get the Accordion Heading and Tab resets, and keep the Button and File block look that classic-themes.css gave them.

Additional Notes

  • File button: core's classic-themes.css sets text-decoration: none on .wp-block-file__button (added in [55323] for #57688), but Gutenberg's classic.scss never had that line, so the patch drops it. With the current markup nothing changes, because the global styles rule :root :where(.wp-element-button, .wp-block-button__link) already sets text-decoration: none. Only File blocks saved with the older markup lose it, and only where the theme does not style the button itself (Twenty Ten here; Twenty Twenty-One, Twenty Twenty and Twenty Fourteen look the same before and after).
  • Tabs: the Tab rules in classic.css target .wp-block-tab, but no element on the page has that class. The Tab block was removed in ​https://github.com/WordPress/gutenberg/pull/77439 (June 2026), and the tabs are now button elements with role="tab" inside .wp-block-tab-list. In Twenty Twenty-One they still look like the theme's dark buttons with the patch.
  • Both would need a change in Gutenberg's packages/block-library/src/classic.scss: add text-decoration: none; to .wp-block-file__button, and point the Tab rules at the tab buttons (for example .wp-block-tab-list button). I can open a Gutenberg issue for them if that helps.
  • RTL: with RTL on, the inlined CSS is still classic.min.css, because wp_maybe_inline_styles() reads the path data, which points at the LTR file (the same happens for wp-block-library-theme). It makes no difference today because classic-rtl.css is identical to classic.css.
  • I did not run the unit tests locally; the PR's PHPUnit, end-to-end and upgrade workflows passed on the PR head.

Screenshots/Screencast with results

  • Twenty Twenty-One, before: Twenty Twenty-One, before the patch (trunk 7.2-beta1-64694)
  • Twenty Twenty-One, after: Twenty Twenty-One, with PR 14826
  • Twenty Ten, File block with the older markup (second row), before: Twenty Ten, File block with pre-6.1 markup (second row), before the patch
  • Twenty Ten, File block with the older markup (second row), after: Twenty Ten, File block with pre-6.1 markup (second row), with PR 14826

Support Content

File block with the older markup, used in step 2:

<!-- wp:file {"href":"/wp-includes/images/media/document.svg"} -->
<div class="wp-block-file"><a href="/wp-includes/images/media/document.svg">old-markup-file.svg</a><a href="/wp-includes/images/media/document.svg" class="wp-block-file__button" download>Download</a></div>
<!-- /wp:file -->
Note: See TracTickets for help on using tickets.