Color schemes: Use contextual palette values in the editor - #80809
Draft
MaggieCabrera wants to merge 2 commits into
Draft
Color schemes: Use contextual palette values in the editor#80809MaggieCabrera wants to merge 2 commits into
MaggieCabrera wants to merge 2 commits into
Conversation
github-actions
Bot
added
[Package] Components
This was referenced Jul 28, 2026
|
Size Change: +1.02 kB (+0.01%) Total Size: 7.76 MB 📦 View Changed
|
|
Flaky tests detected in d29f6ef. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30390930036
|
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR makes theme-defined light/dark color scheme preset values contextual throughout the editor (controls + previews), while keeping base and alternative palettes independently editable in Global Styles. It introduces shared normalization utilities for scheme presets, and updates editor style rendering to preserve preset CSS custom property references when schemes exist so the browser can apply the active scheme.
Changes:
- Add
flattenColorSchemePresets/normalizeColorSchemePresetsutilities to@wordpress/global-styles-engineand reuse them from Global Styles UI. - Update Block Editor color/gradient/border/duotone-related hooks and Global Styles panels to use the active scheme’s preset values, and preserve preset CSS vars when schemes are present.
- Add/adjust unit tests for preset normalization and for scheme-aware preset selection.
Reviewed changes
Copilot reviewed 28 out of 28 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/global-styles-ui/tsconfig.json | Excludes test files from the package TS project. |
| packages/global-styles-ui/src/test/color-scheme-palette.spec.ts | Updates tests to cover scheme preset normalization behavior. |
| packages/global-styles-ui/src/test/color-palette-panel.spec.tsx | Adds coverage ensuring alternative palettes are complete and unmatched slugs are omitted. |
| packages/global-styles-ui/src/scheme-preview-indicator.tsx | Tightens scheme preset typing to BasePreset. |
| packages/global-styles-ui/src/gradients-palette-panel.tsx | Uses normalized scheme gradients for Global Styles scheme panels. |
| packages/global-styles-ui/src/duotone-palette-panel.tsx | Uses normalized scheme duotones for Global Styles scheme panels. |
| packages/global-styles-ui/src/color-scheme-palette.tsx | Switches to re-exporting scheme helpers from @wordpress/global-styles-engine. |
| packages/global-styles-ui/src/color-palette-panel.tsx | Uses normalized scheme colors for Global Styles scheme panels. |
| packages/global-styles-engine/src/utils/color-schemes.ts | Introduces shared flatten/normalize helpers for scheme presets. |
| packages/global-styles-engine/src/index.ts | Exposes scheme utilities/types via the package public API. |
| packages/components/src/palette-edit/stories/index.story.tsx | Updates PaletteEdit story typing for palette variations. |
| packages/components/src/palette-edit/index.tsx | Hardens PaletteEdit variation mapping when variation elements are absent. |
| packages/block-editor/src/utils/test/color-values.js | Adds tests for new preset CSS var and scheme-aware style value helpers. |
| packages/block-editor/src/utils/color-values.ts | Adds helpers to keep preset CSS var references when schemes exist. |
| packages/block-editor/src/hooks/utils.js | Plumbs light/dark scheme settings into block settings. |
| packages/block-editor/src/hooks/use-color-props.js | Uses active-scheme theme presets + preserves preset CSS vars for styles. |
| packages/block-editor/src/hooks/use-border-props.js | Preserves preset CSS vars for named border colors when schemes exist. |
| packages/block-editor/src/hooks/duotone.js | Uses active-scheme theme presets for duotone preset resolution. |
| packages/block-editor/src/hooks/color.js | Preserves preset CSS vars for named text/background colors when schemes exist. |
| packages/block-editor/src/components/gradients/use-gradient.js | Uses active-scheme theme gradients for gradient selection/update. |
| packages/block-editor/src/components/global-styles/hooks.js | Makes Global Styles color/gradient origins scheme-aware + improves preset decoding. |
| packages/block-editor/src/components/global-styles/filters-panel.js | Makes filter preset lists scheme-aware and decodes duotone preset vars. |
| packages/block-editor/src/components/global-styles/border-panel.js | Decodes preset color vars using the active-scheme palette for UI display. |
| packages/block-editor/src/components/colors/with-colors.js | Supplies active-scheme theme palette to wrapped components. |
| packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js | Uses scheme-aware theme colors/gradients and exposes hasColorSchemes. |
| packages/block-editor/src/components/colors-gradients/use-color-scheme-presets.js | Adds hook to compute effective presets for the current OS scheme. |
| packages/block-editor/src/components/colors-gradients/test/use-color-scheme-presets.js | Adds unit tests for scheme-aware preset selection/normalization. |
| packages/block-editor/src/components/color-palette/with-color-context.js | Switches color context to active-scheme theme palette. |
Comment on lines
+85
to
+88
| const hasLightGradients = | ||
| lightScheme !== undefined && normalizedLightGradients.length > 0; | ||
| const hasDarkGradients = | ||
| darkScheme !== undefined && normalizedDarkGradients.length > 0; |
Comment on lines
+90
to
+93
| const hasLightColors = | ||
| lightScheme !== undefined && normalizedLightColors.length > 0; | ||
| const hasDarkColors = | ||
| darkScheme !== undefined && normalizedDarkColors.length > 0; |
Comment on lines
+113
to
+116
| const hasLightDuotones = | ||
| lightScheme !== undefined && normalizedLightDuotones.length > 0; | ||
| const hasDarkDuotones = | ||
| darkScheme !== undefined && normalizedDarkDuotones.length > 0; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Makes theme-defined color schemes contextual throughout the editor while keeping the base and alternative palettes independently editable in Global Styles.
This is stacked on #80805, #80746, and #80698.
Why?
A theme can define a base palette and a dark alternative. When a user's system prefers dark mode, the canvas uses the dark values, but editor color controls currently preview the base values. Named presets can also be resolved to fixed color values too early, preventing the browser from applying the active scheme.
The implementation uses the name
colorSchemebecause it matches the CSScolor-schemeproperty andprefers-color-schememedia feature.How?
Testing Instructions
Use either fixture from WordPress/community-themes#266 with the full PR stack.
Testing Instructions for Keyboard
Follow the steps above using Tab and Shift+Tab to move through the controls, Enter or Space to activate them, and the arrow keys where supported. Confirm both palette sections and their color controls remain reachable and labeled.
Screenshots or screencast
Use of AI Tools
This PR was implemented and tested with assistance from OpenAI Codex. The author reviewed the resulting code and remains responsible for the contribution.