Boot: Wire user admin theme preference to ThemeProvider#74011
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
aduth
added
[Type] Task
|
Flaky tests detected in 5037b7f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/20246455195
|
|
Is the body class expected to be present in all WP-Admin pages? |
I think so. If we have a screen that doesn't have that body class, I think we should add it. I just committed a fix related to this to core today: https://core.trac.wordpress.org/changeset/61385 |
| const THEME_PRIMARY_COLORS = new Map< string, string >( [ | ||
| [ 'light', '#0085ba' ], | ||
| [ 'modern', '#3858e9' ], | ||
| [ 'blue', '#096484' ], | ||
| [ 'coffee', '#46403c' ], | ||
| [ 'ectoplasm', '#523f6d' ], | ||
| [ 'midnight', '#e14d43' ], | ||
| [ 'ocean', '#627c83' ], | ||
| [ 'sunrise', '#dd823b' ], | ||
| ] ); | ||
|
|
||
| export function getAdminThemePrimaryColor(): string | undefined { | ||
| const theme = | ||
| document.body.className.match( /admin-color-([a-z]+)/ )?.[ 1 ]; | ||
|
|
||
| return theme && THEME_PRIMARY_COLORS.get( theme ); | ||
| } |
There was a problem hiding this comment.
I pushed a small micro-optimization / code simplification in 883a400 . I think it reads a bit better and is ~1.7x faster.
map x 281,001,631 ops/sec ±5.77% (74 runs sampled)
switch x 167,011,358 ops/sec ±3.54% (87 runs sampled)
Fastest is map
Benchmark code
import Benchmark from "benchmark";
const suite = new Benchmark.Suite();
const theme = "coffee";
const MAPPING = new Map([
["light", "#0085ba"],
["modern", "#3858e9"],
["blue", "#096484"],
["coffee", "#46403c"],
["ectoplasm", "#523f6d"],
["midnight", "#e14d43"],
["ocean", "#627c83"],
["sunrise", "#dd823b"],
]);
function getThemeSwitch(theme) {
switch (theme) {
case "light":
return "#0085ba";
case "modern":
return "#3858e9";
case "blue":
return "#096484";
case "coffee":
return "#46403c";
case "ectoplasm":
return "#523f6d";
case "midnight":
return "#e14d43";
case "ocean":
return "#627c83";
case "sunrise":
return "#dd823b";
}
return undefined;
}
function getThemeMap(theme) {
return theme && MAPPING.get(theme);
}
suite.add("map", (event) => {
getThemeMap(theme);
});
suite.add("switch", async () => {
getThemeSwitch(theme);
});
suite
.run({ async: true })
.on("cycle", (event) => {
console.log(String(event.target));
})
.on("complete", () => {
console.log("Fastest is " + suite.filter("fastest").map("name"));
});
3 participants
What?
Updates boot screens to initialize
ThemeProviderusing the user's color preference, extracted from the document body'sadmin-theme-*class.Includes a supporting change to expose
ThemeProviderTypeScript type from the package, which ensures that the component is still private, but its types are available (e.g. as used to inherit props forUserThemeProviderwrapper).Related discussion: #69130 (comment)
Why?
--wp-admin-theme-color.How?
Creates a new
UserThemeProvidercomponent in thebootpackage, which wrapsThemeProviderand maps the admin body class to the expectedprimaryseed value.This follows from how
base-stylesmaps admin schemes to equivalent seed colors (source).Testing Instructions
Prerequisite: Use a user theme other than the default:
Verify that the Fonts page respects the configured color theme:
Screenshots or screencast