Admin: Add CSS variable fallbacks to stylesheets.#10934
Admin: Add CSS variable fallbacks to stylesheets.#10934fabiankaegy wants to merge 1 commit intoWordPress:trunkfrom
Conversation
Add fallback values for CSS custom properties so buttons render correctly when wp-base-styles is not loaded, such as on the upgrade.php screen.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
fabiankaegy
requested review from
aaronjorbin,
jasmussen,
joedolson,
karmatosed and
t-hamano
There was a problem hiding this comment.
Pull request overview
Adds fallback values for admin CSS custom properties so key UI elements (buttons, form focus states, notice links) render with appropriate colors even when wp-base-styles is not enqueued (e.g., upgrade.php).
Changes:
- Add fallback hex values for
--wp-admin-theme-colorand its darker variants in button styles. - Add fallback values for theme color usage in form focus/checked states.
- Add fallback values for notice link colors and focus rings in common admin UI styles.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
src/wp-includes/css/buttons.css |
Adds fallback values for button colors, hover/active states, and focus rings when admin CSS vars are missing. |
src/wp-admin/css/forms.css |
Adds fallbacks for theme-colored focus outlines and checked control states. |
src/wp-admin/css/common.css |
Adds fallbacks for notice link colors and focus box-shadow theme variables. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
peterwilsoncc
left a comment
peterwilsoncc
left a comment
There was a problem hiding this comment.
I think this is a good approach but I'm seeing the issue with invisible checkmarks in checkboxes remain with the PR applied.
Test Report
Description
This report validates the patch only partially fixes the problem
While the buttons are displaying as expected, the remember me checkbox on the login screen fails to indicate that the button is checked.
Environment
- WordPress: 7.0-alpha-61215-src
- PHP: 8.5.2
- Server: nginx/1.24.0
- Database: mysqli (Server: 8.0.44-0ubuntu0.24.04.2 / Client: mysqlnd 8.5.2)
- Browser: Firefox 147.0
- OS: macOS
- Theme: Twenty Twenty-Five 1.4
- MU Plugins:
- cpt-test.php
- _admin_bar_show_cache.php
- _qm-mappings.php
- Plugins:
- Query Monitor 3.20.2
- Test Reports 1.2.1
Actual Results
- ✅ Button issue resolved with patch
- ❌ Remember me button checkbox fails to check
Additional Notes
Tested screens:
- database update screen
- login screen
- installation web gui
Supplemental Artifacts
|
There is also a way to output fallback default CSS variables as shown below, but what do you think? First, add the default CSS variables to the build styles in the diff --git a/packages/base-styles/src/admin-schemes.scss b/packages/base-styles/src/admin-schemes.scss
index 9ae678fd7bf..3e9c1bf2778 100644
--- a/packages/base-styles/src/admin-schemes.scss
+++ b/packages/base-styles/src/admin-schemes.scss
@@ -1,3 +1,4 @@
@use "mixins" as *;
+@use "default-custom-properties.scss" as *;
@include wordpress-admin-schemes();Next, in WP core, add diff --git a/src/wp-admin/css/login.css b/src/wp-admin/css/login.css
index 97c3f7e07a..6f90693447 100644
--- a/src/wp-admin/css/login.css
+++ b/src/wp-admin/css/login.css
@@ -358,12 +358,6 @@ p {
padding-right: 2.5rem;
}
-.login form .input,
-.login input[type="text"],
-.login form input[type="checkbox"] {
- background: #fff;
-}
-
.js.login-action-resetpass input[type="text"],
.js.login-action-resetpass input[type="password"],
.js.login-action-rp input[type="text"],
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index 4384c7c10e..1b9a9703ff 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -1633,8 +1633,8 @@ function wp_default_styles( $styles ) {
$styles->add( 'wp-admin', false, array( 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n', 'wp-base-styles' ) );
- $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
- $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
+ $styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'wp-base-styles' ) );
+ $styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'wp-base-styles' ) );
$styles->add( 'wp-color-picker', "/wp-admin/css/color-picker$suffix.css" );
$styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'imgareaselect' ) );
$styles->add( 'customize-widgets', "/wp-admin/css/customize-widgets$suffix.css", array( 'wp-admin', 'colors' ) ); |
|
@t-hamano That was similar to the approach I took before seeing this PR: I was looking at changing the selector in this block of code to I'm happy with either approach. |
|
Closing in favor of #10948 |
3 participants
Add fallback values for CSS custom properties so buttons render correctly when
wp-base-stylesis not loaded, such as on the upgrade.php screen.Trac ticket: https://core.trac.wordpress.org/ticket/64640
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.