Skip to content

Experiment: restyle classic wp-admin controls from design system tokens #82425

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasmussen merged 26 commits into from
Oct 1, 2026
+1,824 −2
Merged

Experiment: restyle classic wp-admin controls from design system tokens #82425

Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
2c36431
Add an experiment that restyles wp-admin from design system tokens
jasmussen Aug 28, 2026
15d7d34
Grey the dropdown arrow on aria-disabled selects
jasmussen Aug 28, 2026
311e41b
Let form controls inherit their font size
jasmussen Aug 28, 2026
96e9e33
Load the restyle stylesheets in filename order
jasmussen Sep 3, 2026
e35fa8a
Leave the media handle undemoted
jasmussen Sep 4, 2026
40c56ef
Name the experiment for what it does
jasmussen Sep 4, 2026
81df8dd
Name the harness for what it shows
jasmussen Sep 4, 2026
6b1606b
Use the design system's field background and placeholder tokens
jasmussen Sep 16, 2026
ff4a281
Scope disabled field styles to text-like inputs
jasmussen Sep 16, 2026
a056b6f
Give invalid fields an error-coloured focus ring
jasmussen Sep 16, 2026
e1ce4e9
Keep grouped buttons joined
jasmussen Sep 16, 2026
6bcceca
Stop aria-disabled harness specimens from responding to input
jasmussen Sep 16, 2026
071f5ca
Update @since tags to 24.1.0
jasmussen Sep 16, 2026
3bfc605
Derive design tokens for each admin colour scheme
jasmussen Sep 16, 2026
c417b95
Pair button and checkbox colours as the design system does
jasmussen Sep 16, 2026
cd72bbf
Show a selected button in the harness's button groups
jasmussen Sep 16, 2026
057fcfb
Move the scheme token generator into the monorepo tools workspace
jasmussen Sep 17, 2026
fd36080
Describe the experiment without calling the admin classic or Core
jasmussen Sep 17, 2026
40349df
Read the admin colour schemes from admin-ui instead of a copied list
jasmussen Sep 17, 2026
d26d84e
Declare the scheme token generator's package dependencies
jasmussen Sep 17, 2026
02ae43a
Move the experiment's stylelint rules into the shared config
jasmussen Sep 17, 2026
31bbb3a
Add a changelog entry for the admin-ui scheme map export
jasmussen Sep 17, 2026
79dc2f8
Address feedback
jasmussen Sep 29, 2026
38f0bc7
Take tokens for the button metrics, and fix two control inconsistencies
jasmussen Sep 29, 2026
160d036
Say in the experiment description that it is not for live sites
jasmussen Sep 29, 2026
49cccdf
Fix the demoted URL escaping, the colour scheme preview and a harness…
jasmussen Oct 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Show a selected button in the harness's button groups 
Groups used as toggles mark the selected button with `.active`, as the
media modal's alignment and link settings do. None of the harness
specimens had one, so the pressed appearance inside a group could only
be checked in the media modal.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
  • Loading branch information
@jasmussen @claude
jasmussen and claude committed Oct 1, 2026
commit cd72bbfbbf551b1410c216efb50ea1ccdd2b3e41
3 changes: 2 additions & 1 deletion lib/experimental/wpds-admin/harness.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,11 +122,12 @@ function gutenberg_wpds_admin_render_harness() {
echo '</p>';

echo '<h2>' . esc_html__( 'Button groups', 'gutenberg' ) . '</h2>';
echo '<p>' . esc_html__( 'Grouped buttons join into one control: square inner corners, and borders that overlap rather than double.', 'gutenberg' ) . '</p>';
echo '<p>' . esc_html__( 'Grouped buttons join into one control: square inner corners, and borders that overlap rather than double. The last group has a selected button, marked with the `.active` class, as groups used as toggles do — for example the alignment and link settings in the media modal.', 'gutenberg' ) . '</p>';
$groups = array(
array( '', array( 'button', 'button', 'button' ) ),
array( '', array( 'button button-primary', 'button', 'button' ) ),
array( ' button-compact', array( 'button', 'button', 'button' ) ),
array( '', array( 'button', 'button active', 'button' ) ),
);
echo '<p style="display:flex;gap:24px;align-items:center;flex-wrap:wrap">';
foreach ( $groups as $group ) {
Expand Down