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)
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
#2
@
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
- Start two Playground sites, one with the nightly and one with the PR build.
- 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-buttonclass. 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. - 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. - Check which file is printed as
classic-theme-styles-inline-css, with and without?rtl=1. - 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 |
- ✅ 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.jsonload the stylesheet synced from Gutenberg, get the Accordion Heading and Tab resets, and keep the Button and File block look thatclassic-themes.cssgave them.
Additional Notes
- File button: core's
classic-themes.csssetstext-decoration: noneon.wp-block-file__button(added in [55323] for #57688), but Gutenberg'sclassic.scssnever 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 setstext-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.csstarget.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 nowbuttonelements withrole="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: addtext-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, becausewp_maybe_inline_styles()reads thepathdata, which points at the LTR file (the same happens forwp-block-library-theme). It makes no difference today becauseclassic-rtl.cssis identical toclassic.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, after:
- Twenty Ten, File block with the older markup (second row), before:
- Twenty Ten, File block with the older markup (second row), after:
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 -->
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
Registers
classic-theme-styleswithwp-includes/css/dist/block-library/classic.css, which is synced from Gutenberg, instead of the hand-maintainedwp-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