diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index 16ee894e8fe182..0c22016e8e842a 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/packages/block-editor/src/components/block-inspector/index.js
@@ -57,6 +57,10 @@ function StyleInspectorSlots( {
return (
<>
{
: true
}
{ ...props }
- className="block-editor-tools-panel-color-gradient-settings__item"
+ className={ clsx(
+ 'block-editor-color-gradient-item',
+ 'block-editor-tools-panel-color-gradient-settings__item'
+ ) }
panelId={ panelId }
// Pass resetAllFilter if supplied due to rendering via SlotFill
// into parent ToolsPanel.
diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index 43f076345ac58b..8e32894c316434 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -68,14 +68,23 @@ $swatch-gap: 12px;
background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
}
+// Space the in-popover contrast notice away from the color palette below it.
+.block-editor-panel-color-gradient-settings__contrast-notice {
+ margin-bottom: $grid-unit-20;
+}
+
/**
* The following styles replicate the separated border of the
* `ItemGroup` component but allows for hidden items. This is because
* to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
* must at least render a placeholder which would otherwise interfere
* with the `:last-child` styles.
+*
+* Applied via the shared `block-editor-color-gradient-item` class on
+* color/gradient dropdown items across the Color, Background, and
+* Typography panels.
*/
-.block-editor-tools-panel-color-gradient-settings__item {
+.block-editor-color-gradient-item {
padding: 0;
max-width: 100%;
position: relative;
@@ -87,7 +96,6 @@ $swatch-gap: 12px;
// Identify the first visible instance as placeholder items will not have this class.
&:nth-child(1 of &) {
- margin-top: $grid-unit-30;
border-top-left-radius: $radius-small;
border-top-right-radius: $radius-small;
border-top: 1px solid $gray-300;
@@ -127,6 +135,12 @@ $swatch-gap: 12px;
text-overflow: ellipsis;
max-width: calc(100% - ($button-size-next-default-40px + $grid-unit-05));
}
+
+ // Reserve extra space for the always-visible contrast warning icon,
+ // which sits alongside the hover-revealed reset button.
+ > button.has-contrast-warning .block-editor-panel-color-gradient-settings__color-name {
+ max-width: calc(100% - ($button-size-next-default-40px + $button-size-small + $grid-unit));
+ }
}
.block-editor-panel-color-gradient-settings__dropdown {
@@ -161,4 +175,27 @@ $swatch-gap: 12px;
// Show reset button on devices that do not support hover.
opacity: 1;
}
+
+ // While a contrast warning is in effect the warning icon occupies the
+ // far-right slot, so the reset button shifts left to sit beside it.
+ .block-editor-panel-color-gradient-settings__dropdown.has-contrast-warning + & {
+ right: $button-size-small + $grid-unit-05;
+ }
+}
+
+// Icon-only "Low contrast" warning shown to the right of the color
+// control toggle whenever the selection has insufficient contrast.
+// Unlike the reset button it stays visible without hover. It is not a
+// menu; activating it opens the color picker popover (where the full
+// warning notice lives), so it doubles as a shortcut to the fix. The
+// accessible name and hover/focus tooltip come from the button label.
+.block-editor-panel-color-gradient-settings__contrast-warning {
+ position: absolute;
+ right: 0;
+ top: $grid-unit;
+ margin: auto $grid-unit auto;
+
+ &.block-editor-panel-color-gradient-settings__contrast-warning {
+ border-radius: $radius-small;
+ }
}
diff --git a/packages/block-editor/src/components/contrast-checker/README.md b/packages/block-editor/src/components/contrast-checker/README.md
index cb9d18252a04c9..11cc222815801d 100644
--- a/packages/block-editor/src/components/contrast-checker/README.md
+++ b/packages/block-editor/src/components/contrast-checker/README.md
@@ -69,3 +69,12 @@ The text color to check the contrast of the background against.
- Type: `String`
- Required: No
+
+#### messageOverride
+
+Custom warning message to display (and announce) instead of the default
+contrast guidance when the color combination has insufficient contrast. Useful
+for providing panel-specific, more concise copy.
+
+- Type: `String`
+- Required: No
diff --git a/packages/block-editor/src/components/contrast-checker/index.js b/packages/block-editor/src/components/contrast-checker/index.js
index 98b4a6fb1afdf6..73e77923be7dec 100644
--- a/packages/block-editor/src/components/contrast-checker/index.js
+++ b/packages/block-editor/src/components/contrast-checker/index.js
@@ -14,7 +14,28 @@ import { speak } from '@wordpress/a11y';
extend( [ namesPlugin, a11yPlugin ] );
-function ContrastChecker( {
+/**
+ * Computes a contrast warning for the given color combination, if any.
+ *
+ * Shared between the `ContrastChecker` component and the block inspector
+ * contrast warning indicators, which surface the result without rendering
+ * a notice.
+ *
+ * @param {Object} props
+ * @param {string} [props.backgroundColor] Background color.
+ * @param {string} [props.fallbackBackgroundColor] Fallback background color.
+ * @param {string} [props.fallbackTextColor] Fallback text color.
+ * @param {string} [props.fallbackLinkColor] Fallback link color.
+ * @param {number} [props.fontSize] Font size value in pixels.
+ * @param {boolean} [props.isLargeText] Whether the text is large.
+ * @param {string} [props.textColor] Text color.
+ * @param {string} [props.linkColor] Link color.
+ * @param {string} [props.messageOverride] Caller-provided copy used in place of the generic guidance.
+ * @param {boolean} [props.enableAlphaChecker] Whether to warn about transparent text.
+ *
+ * @return {?Object} `{ message, speakMessage }` when contrast is insufficient, otherwise `null`.
+ */
+export function getContrastWarning( {
backgroundColor,
fallbackBackgroundColor,
fallbackTextColor,
@@ -23,6 +44,7 @@ function ContrastChecker( {
isLargeText,
textColor,
linkColor,
+ messageOverride,
enableAlphaChecker = false,
} ) {
const currentBackgroundColor = backgroundColor || fallbackBackgroundColor;
@@ -81,6 +103,13 @@ function ContrastChecker( {
if ( backgroundColorHasTransparency || textHasTransparency ) {
continue;
}
+ // A caller can provide panel-specific copy that is clearer and
+ // more concise than the generic brighter/darker guidance.
+ if ( messageOverride ) {
+ message = messageOverride;
+ speakMessage = messageOverride;
+ break;
+ }
message =
backgroundColorBrightness < colordTextColor.brightness()
? sprintf(
@@ -119,11 +148,21 @@ function ContrastChecker( {
return null;
}
+ return { message, speakMessage };
+}
+
+function ContrastChecker( props ) {
+ const warning = getContrastWarning( props );
+
+ if ( ! warning ) {
+ return null;
+ }
+
// Note: The `Notice` component can speak messages via its `spokenMessage`
// prop, but the contrast checker requires granular control over when the
// announcements are made. Notably, the message will be re-announced if a
// new color combination is selected and the contrast is still insufficient.
- speak( speakMessage );
+ speak( warning.speakMessage );
return (
@@ -132,7 +171,7 @@ function ContrastChecker( {
status="warning"
isDismissible={ false }
>
- { message }
+ { warning.message }
);
diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js
index 8a151f8a376537..13d6ff11285c6f 100644
--- a/packages/block-editor/src/components/global-styles/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/background-panel.js
@@ -7,19 +7,24 @@ import {
} from '@wordpress/components';
import { useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { getValueFromVariable } from '@wordpress/global-styles-engine';
/**
* Internal dependencies
*/
import BackgroundImageControl from '../background-image-control';
-import { ColorPanelDropdown } from './color-panel';
-import { useGradientsPerOrigin } from './hooks';
+import ColorGradientDropdownItem from './color-gradient-dropdown-item';
+import { useHasBackgroundColorPanel } from './color-panel';
+import { useColorGradientSettings } from './hooks';
import { useToolsPanelDropdownMenuProps } from './utils';
import { setImmutably } from '../../utils/object';
+import {
+ extractPresetSlug,
+ encodeColorValueWithPalette,
+} from '../../utils/color-values';
const DEFAULT_CONTROLS = {
backgroundImage: true,
+ backgroundColor: true,
gradient: true,
};
@@ -39,12 +44,17 @@ export function useHasBackgroundControl( settings, feature ) {
* `settings.background.backgroundSize` exists also,
* but can only be used if settings?.background?.backgroundImage is `true`.
*
+ * The panel is also shown when the block has color panel background
+ * support (`settings.color.background`), because background color and
+ * the legacy `color.gradient` control are rendered here.
+ *
* @param {Object} settings Site settings
* @return {boolean} Whether site settings has activated background panel.
*/
export function useHasBackgroundPanel( settings ) {
+ const hasBackgroundColor = useHasBackgroundColorPanel( settings );
const { backgroundImage, gradient } = settings?.background || {};
- return backgroundImage || gradient;
+ return backgroundImage || gradient || hasBackgroundColor;
}
/**
@@ -92,7 +102,30 @@ export function hasBackgroundGradientValue( style ) {
);
}
-function BackgroundToolsPanel( {
+/**
+ * Checks if there is a current value for the background color (written to
+ * `color.background`).
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean} Whether the block has a background color value set.
+ */
+export function hasBackgroundColorValue( style ) {
+ return !! style?.color?.background;
+}
+
+/**
+ * Checks if there is a current value in the legacy `color.gradient` location
+ * (used by blocks with color panel gradient support that haven't adopted the
+ * `background.gradient` block support).
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean} Whether the block has a legacy color gradient value set.
+ */
+export function hasLegacyColorGradientValue( style ) {
+ return !! style?.color?.gradient;
+}
+
+export function BackgroundToolsPanel( {
resetAllFilter,
onChange,
value,
@@ -128,23 +161,46 @@ export default function BackgroundImagePanel( {
as: Wrapper = BackgroundToolsPanel,
value,
onChange,
- inheritedValue,
+ inheritedValue = value,
settings,
panelId,
defaultControls = DEFAULT_CONTROLS,
defaultValues = {},
headerLabel = __( 'Background' ),
+ contrastWarning,
} ) {
- const gradients = useGradientsPerOrigin( settings );
- const areCustomGradientsEnabled = settings?.color?.customGradient;
- const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
+ const {
+ colors,
+ gradients,
+ allColors,
+ areCustomSolidsEnabled,
+ areCustomGradientsEnabled,
+ hasSolidColors,
+ hasGradientColors,
+ decodeValue,
+ encodeGradientValue,
+ } = useColorGradientSettings( settings );
const hasBackgroundGradientControl = useHasBackgroundControl(
settings,
'gradient'
);
+ const hasColorPanelBackgroundSupport =
+ useHasBackgroundColorPanel( settings );
+ const showBackgroundColorControl =
+ hasColorPanelBackgroundSupport && hasSolidColors;
+ // New `background.gradient` block support — gradient lives under the
+ // `background` style path.
const showBackgroundGradientControl =
hasGradientColors && hasBackgroundGradientControl;
+ // Legacy `color.gradient` path — only rendered when the block has
+ // color panel background support and hasn't adopted the newer
+ // `background.gradient` support. Keeps the UI consistent for blocks
+ // that still write gradients to `color.gradient`.
+ const showLegacyColorGradientControl =
+ hasColorPanelBackgroundSupport &&
+ hasGradientColors &&
+ ! hasBackgroundGradientControl;
const showBackgroundImageControl = useHasBackgroundControl(
settings,
'backgroundImage'
@@ -152,38 +208,38 @@ export default function BackgroundImagePanel( {
const resetAllFilter = useCallback(
( previousValue ) => {
+ const clearsColorBackground = showBackgroundColorControl;
+ const clearsColorGradient =
+ hasBackgroundGradientControl || showLegacyColorGradientControl;
+ if ( ! clearsColorBackground && ! clearsColorGradient ) {
+ return { ...previousValue, background: {} };
+ }
return {
...previousValue,
background: {},
- color: hasBackgroundGradientControl
- ? {
- ...previousValue?.color,
- gradient: undefined,
- }
- : previousValue?.color,
+ color: {
+ ...previousValue?.color,
+ ...( clearsColorBackground && { background: undefined } ),
+ ...( clearsColorGradient && { gradient: undefined } ),
+ },
};
},
- [ hasBackgroundGradientControl ]
+ [
+ hasBackgroundGradientControl,
+ showBackgroundColorControl,
+ showLegacyColorGradientControl,
+ ]
);
- if ( ! showBackgroundGradientControl && ! showBackgroundImageControl ) {
+ if (
+ ! showBackgroundImageControl &&
+ ! showBackgroundColorControl &&
+ ! showBackgroundGradientControl &&
+ ! showLegacyColorGradientControl
+ ) {
return null;
}
- const decodeValue = ( rawValue ) =>
- getValueFromVariable( { settings }, '', rawValue );
- const encodeGradientValue = ( gradientValue ) => {
- const allGradients = gradients.flatMap(
- ( { gradients: originGradients } ) => originGradients
- );
- const gradientObject = allGradients.find(
- ( { gradient } ) => gradient === gradientValue
- );
- return gradientObject
- ? 'var:preset|gradient|' + gradientObject.slug
- : gradientValue;
- };
-
const resetBackground = () =>
onChange(
setImmutably(
@@ -203,6 +259,50 @@ export default function BackgroundImagePanel( {
onChange( newValue );
};
+ // Background color (written to `color.background`).
+ const backgroundColor = decodeValue( inheritedValue?.color?.background );
+ const userBackgroundColor = decodeValue( value?.color?.background );
+ const setBackgroundColor = ( newColor, newSlug ) => {
+ const newValue = setImmutably(
+ value,
+ [ 'color', 'background' ],
+ encodeColorValueWithPalette( allColors, newColor, newSlug )
+ );
+ // Legacy `color.gradient` is mutually exclusive with
+ // `color.background`. `background.gradient` is independent and
+ // should not be touched.
+ if ( showLegacyColorGradientControl ) {
+ newValue.color.gradient = undefined;
+ }
+ onChange( newValue );
+ };
+ const resetBackgroundColor = () => {
+ const newValue = setImmutably(
+ value,
+ [ 'color', 'background' ],
+ undefined
+ );
+ if ( showLegacyColorGradientControl ) {
+ newValue.color.gradient = undefined;
+ }
+ onChange( newValue );
+ };
+
+ // Legacy `color.gradient` setters.
+ const legacyColorGradient = decodeValue( inheritedValue?.color?.gradient );
+ const userLegacyColorGradient = decodeValue( value?.color?.gradient );
+ const setLegacyColorGradient = ( newGradient ) => {
+ const newValue = setImmutably(
+ value,
+ [ 'color', 'gradient' ],
+ encodeGradientValue( newGradient )
+ );
+ newValue.color.background = undefined;
+ onChange( newValue );
+ };
+ const resetLegacyColorGradient = () =>
+ onChange( setImmutably( value, [ 'color', 'gradient' ], undefined ) );
+
// Get current gradient value, decoding preset slug references.
// Fall back to color.gradient for legacy blocks that haven't migrated
// to background.gradient yet (mirrors block inspector fallback in
@@ -237,7 +337,7 @@ export default function BackgroundImagePanel( {
>
{ showBackgroundImageControl && (
hasBackgroundImageValue( value ) }
label={ __( 'Image' ) }
onDeselect={ resetBackground }
@@ -254,9 +354,49 @@ export default function BackgroundImagePanel( {
/>
) }
+ { showBackgroundColorControl && (
+ hasBackgroundColorValue( value ) }
+ resetValue={ resetBackgroundColor }
+ isShownByDefault={ defaultControls.backgroundColor }
+ indicators={ [ userBackgroundColor ?? backgroundColor ] }
+ contrastWarning={ contrastWarning }
+ tabs={ [
+ {
+ key: 'background',
+ label: __( 'Color' ),
+ inheritedValue:
+ userBackgroundColor ?? backgroundColor,
+ // Resolve the slug from the same source as the
+ // displayed value (user value first, then the
+ // inherited fallback). For a block instance the
+ // selection lives in `value` while `inheritedValue`
+ // only holds the global styles fallback, so reading
+ // the slug from `inheritedValue` alone would miss it
+ // and two same-hex presets would both appear selected.
+ inheritedSlug:
+ extractPresetSlug(
+ value?.color?.background,
+ 'color'
+ ) ??
+ extractPresetSlug(
+ inheritedValue?.color?.background,
+ 'color'
+ ),
+ setValue: setBackgroundColor,
+ userValue: userBackgroundColor,
+ },
+ ] }
+ colorGradientControlSettings={ {
+ colors,
+ disableCustomColors: ! areCustomSolidsEnabled,
+ } }
+ panelId={ panelId }
+ />
+ ) }
{ showBackgroundGradientControl && (
- hasBackgroundGradientValue( value ) }
resetValue={ resetGradient }
@@ -280,6 +420,33 @@ export default function BackgroundImagePanel( {
panelId={ panelId }
/>
) }
+ { showLegacyColorGradientControl && (
+ hasLegacyColorGradientValue( value ) }
+ resetValue={ resetLegacyColorGradient }
+ isShownByDefault={ defaultControls.gradient }
+ indicators={ [
+ userLegacyColorGradient ?? legacyColorGradient,
+ ] }
+ tabs={ [
+ {
+ key: 'gradient',
+ label: __( 'Gradient' ),
+ inheritedValue:
+ userLegacyColorGradient ?? legacyColorGradient,
+ setValue: setLegacyColorGradient,
+ userValue: userLegacyColorGradient,
+ isGradient: true,
+ },
+ ] }
+ colorGradientControlSettings={ {
+ gradients,
+ disableCustomGradients: ! areCustomGradientsEnabled,
+ } }
+ panelId={ panelId }
+ />
+ ) }
);
}
diff --git a/packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js b/packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js
new file mode 100644
index 00000000000000..ee6b2c7298e5b8
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js
@@ -0,0 +1,258 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+ __experimentalToolsPanelItem as ToolsPanelItem,
+ __experimentalHStack as HStack,
+ __experimentalZStack as ZStack,
+ __experimentalDropdownContentWrapper as DropdownContentWrapper,
+ ColorIndicator,
+ Flex,
+ FlexItem,
+ Dropdown,
+ Button,
+ privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { reset as resetIcon, caution as cautionIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import ColorGradientControl from '../colors-gradients/control';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+/**
+ * @typedef {Object} DropdownContentProps
+ * @property {Array} tabs Tab configurations to render.
+ * @property {Object} colorGradientControlSettings Settings passed to ColorGradientControl.
+ * @property {string} [contrastWarning] Contrast warning message for the color value.
+ */
+
+/**
+ * Renders the dropdown content containing the color/gradient picker tabs.
+ *
+ * @param {DropdownContentProps} props
+ */
+function DropdownContent( {
+ tabs,
+ colorGradientControlSettings,
+ contrastWarning,
+} ) {
+ const { key: firstTabKey, ...firstTab } = tabs[ 0 ] ?? {};
+ const defaultTabId = tabs.find(
+ ( tab ) => tab.userValue !== undefined
+ )?.key;
+ return (
+
+
+ { tabs.length === 1 && (
+
+
+ { tabs.map( ( tab ) => (
+
+ { tab.label }
+
+ ) ) }
+
+
+ { tabs.map( ( tab ) => {
+ const { key: tabKey, ...restTabProps } = tab;
+ return (
+
+
+ );
+ } ) }
+
+ ) }
+
+
+ );
+}
+
+const popoverProps = {
+ placement: 'left-start',
+ offset: 36,
+ shift: true,
+};
+
+const LabeledColorIndicators = ( { indicators, label } ) => (
+
+
+ { indicators.map( ( indicator, index ) => (
+
+
+ ) ) }
+
+
+ { label }
+
+
+);
+
+function ColorGradientTab( {
+ isGradient,
+ inheritedValue,
+ inheritedSlug,
+ userValue,
+ setValue,
+ colorGradientControlSettings,
+ contrastWarning,
+} ) {
+ return (
+
+ {
+ const toggleProps = {
+ onClick: onToggle,
+ className: clsx(
+ 'block-editor-panel-color-gradient-settings__dropdown',
+ {
+ 'is-open': isOpen,
+ 'has-contrast-warning': !! contrastWarning,
+ }
+ ),
+ 'aria-expanded': isOpen,
+ ref: colorGradientDropdownButtonRef,
+ };
+
+ return (
+ <>
+
+
+ { hasValue() && (
+ {
+ resetValue();
+ if ( isOpen ) {
+ onToggle();
+ }
+ colorGradientDropdownButtonRef.current?.focus();
+ } }
+ />
+ ) }
+ { contrastWarning && (
+ // An icon-only warning that stays visible while a
+ // contrast warning is in effect. It is not a menu;
+ // activating it opens the color picker popover where
+ // the full warning notice is shown, so the indicator
+ // doubles as a shortcut to where the issue is fixed.
+
+ );
+}
diff --git a/packages/block-editor/src/components/global-styles/color-panel.js b/packages/block-editor/src/components/global-styles/color-panel.js
index ee86293babf122..bbd2564cc96d9b 100644
--- a/packages/block-editor/src/components/global-styles/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/color-panel.js
@@ -1,55 +1,39 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
/**
* WordPress dependencies
*/
-import {
- __experimentalToolsPanel as ToolsPanel,
- __experimentalToolsPanelItem as ToolsPanelItem,
- __experimentalHStack as HStack,
- __experimentalZStack as ZStack,
- __experimentalDropdownContentWrapper as DropdownContentWrapper,
- ColorIndicator,
- Flex,
- FlexItem,
- Dropdown,
- Button,
- privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { useMemo, useRef } from '@wordpress/element';
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+import { useCallback, useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
-import { getValueFromVariable } from '@wordpress/global-styles-engine';
-import { reset as resetIcon } from '@wordpress/icons';
/**
* Internal dependencies
*/
-import ColorGradientControl from '../colors-gradients/control';
-import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
+import ColorGradientDropdownItem from './color-gradient-dropdown-item';
+import {
+ useColorsPerOrigin,
+ useGradientsPerOrigin,
+ useColorGradientSettings,
+} from './hooks';
import { useToolsPanelDropdownMenuProps } from './utils';
import { setImmutably } from '../../utils/object';
-import { extractPresetSlug } from '../../utils/color-values';
-import { unlock } from '../../lock-unlock';
-
+import {
+ extractPresetSlug,
+ encodeColorValueWithPalette,
+} from '../../utils/color-values';
+
+// Despite the "ColorPanel" name, this gates only the element-level color
+// controls (link, heading, button, caption, h1–h6) — surfaced as the
+// "Elements" panel in the block inspector and the "Colors" screen in
+// Global Styles. Top-level text and background color moved to the
+// Typography and Background panels, so this returns false for blocks
+// whose only color support is text and/or background.
export function useHasColorPanel( settings ) {
- const hasTextPanel = useHasTextPanel( settings );
- const hasBackgroundPanel = useHasBackgroundColorPanel( settings );
const hasLinkPanel = useHasLinkPanel( settings );
const hasHeadingPanel = useHasHeadingPanel( settings );
const hasButtonPanel = useHasButtonPanel( settings );
const hasCaptionPanel = useHasCaptionPanel( settings );
- return (
- hasTextPanel ||
- hasBackgroundPanel ||
- hasLinkPanel ||
- hasHeadingPanel ||
- hasButtonPanel ||
- hasCaptionPanel
- );
+ return hasLinkPanel || hasHeadingPanel || hasButtonPanel || hasCaptionPanel;
}
export function useHasTextPanel( settings ) {
@@ -145,205 +129,13 @@ export function ColorToolsPanel( {
);
}
-/**
- * Encodes a color value for storage in the style object.
- *
- * When a `slug` is provided it is used directly (slug-based selection path).
- * Otherwise the function falls back to looking up the hex value in the
- * palette; if found it encodes the slug, otherwise it stores the raw hex.
- *
- * Extracted to module scope so it is not re-created on every render.
- * Callers pass the flattened palette (`allColors`), computed once in `ColorPanel` from the per-origin `colors` array.
- *
- * @param {Array} allColors Flat array of `{ color, slug }` objects.
- * @param {string|void} colorValue Hex or CSS color string.
- * @param {string|void} slug Optional palette slug from slug-aware selection.
- * @return {string|void} Encoded value suitable for the style object.
- */
-function encodeColorValueWithPalette( allColors, colorValue, slug ) {
- if ( slug ) {
- return 'var:preset|color|' + slug;
- }
- const colorObject = allColors.find( ( { color } ) => color === colorValue );
- return colorObject ? 'var:preset|color|' + colorObject.slug : colorValue;
-}
-
const DEFAULT_CONTROLS = {
- text: true,
- background: true,
link: true,
heading: true,
button: true,
caption: true,
};
-const popoverProps = {
- placement: 'left-start',
- offset: 36,
- shift: true,
-};
-
-const { Tabs } = unlock( componentsPrivateApis );
-
-const LabeledColorIndicators = ( { indicators, label } ) => (
-
-
- { indicators.map( ( indicator, index ) => (
-
-
- ) ) }
-
-
- { label }
-
-
-);
-
-function ColorPanelTab( {
- isGradient,
- inheritedValue,
- inheritedSlug,
- userValue,
- setValue,
- colorGradientControlSettings,
-} ) {
- return (
-
- {
- const toggleProps = {
- onClick: onToggle,
- className: clsx(
- 'block-editor-panel-color-gradient-settings__dropdown',
- { 'is-open': isOpen }
- ),
- 'aria-expanded': isOpen,
- ref: colorGradientDropdownButtonRef,
- };
-
- return (
- <>
-
-
- { hasValue() && (
- {
- resetValue();
- if ( isOpen ) {
- onToggle();
- }
- // Return focus to parent button
- colorGradientDropdownButtonRef.current?.focus();
- } }
- />
- ) }
-
- );
- } }
- renderContent={ () => (
-
-
- { tabs.length === 1 && (
-
-
- { tabs.map( ( tab ) => (
-
- { tab.label }
-
- ) ) }
-
-
- { tabs.map( ( tab ) => {
- const { key: tabKey, ...restTabProps } =
- tab;
- return (
-
-
- );
- } ) }
-
- ) }
-
-
- ) }
- />
-
- );
-}
-
export default function ColorPanel( {
as: Wrapper = ColorToolsPanel,
value,
@@ -354,80 +146,19 @@ export default function ColorPanel( {
defaultControls = DEFAULT_CONTROLS,
label,
children,
+ contrastWarning,
} ) {
- const colors = useColorsPerOrigin( settings );
- const gradients = useGradientsPerOrigin( settings );
- const areCustomSolidsEnabled = settings?.color?.custom;
- const areCustomGradientsEnabled = settings?.color?.customGradient;
- const hasSolidColors = colors.length > 0 || areCustomSolidsEnabled;
- const hasGradientColors = gradients.length > 0 || areCustomGradientsEnabled;
- // When a block opts into background.gradient support, the gradient
- // picker moves to the Background panel. Hide it here to avoid
- // showing duplicate gradient controls.
- const hasBackgroundGradientSupport = !! settings?.background?.gradient;
- const showGradientColors =
- hasGradientColors && ! hasBackgroundGradientSupport;
-
- const decodeValue = ( rawValue ) =>
- getValueFromVariable( { settings }, '', rawValue );
-
- const allColors = useMemo(
- () => colors.flatMap( ( { colors: originColors } ) => originColors ),
- [ colors ]
- );
-
- const encodeGradientValue = ( gradientValue ) => {
- const allGradients = gradients.flatMap(
- ( { gradients: originGradients } ) => originGradients
- );
- const gradientObject = allGradients.find(
- ( { gradient } ) => gradient === gradientValue
- );
- return gradientObject
- ? 'var:preset|gradient|' + gradientObject.slug
- : gradientValue;
- };
-
- // BackgroundColor
- const showBackgroundPanel = useHasBackgroundColorPanel( settings );
- const backgroundColor = decodeValue( inheritedValue?.color?.background );
- const userBackgroundColor = decodeValue( value?.color?.background );
- const gradient = decodeValue( inheritedValue?.color?.gradient );
- const userGradient = decodeValue( value?.color?.gradient );
- const hasBackground = () =>
- !! userBackgroundColor ||
- ( ! hasBackgroundGradientSupport && !! userGradient );
- const setBackgroundColor = ( newColor, newSlug ) => {
- const newValue = setImmutably(
- value,
- [ 'color', 'background' ],
- encodeColorValueWithPalette( allColors, newColor, newSlug )
- );
- if ( ! hasBackgroundGradientSupport ) {
- newValue.color.gradient = undefined;
- }
- onChange( newValue );
- };
- const setGradient = ( newGradient ) => {
- const newValue = setImmutably(
- value,
- [ 'color', 'gradient' ],
- encodeGradientValue( newGradient )
- );
- newValue.color.background = undefined;
- onChange( newValue );
- };
- const resetBackground = () => {
- const newValue = setImmutably(
- value,
- [ 'color', 'background' ],
- undefined
- );
- if ( ! hasBackgroundGradientSupport ) {
- newValue.color.gradient = undefined;
- }
- onChange( newValue );
- };
+ const {
+ colors,
+ gradients,
+ areCustomSolidsEnabled,
+ areCustomGradientsEnabled,
+ hasSolidColors,
+ hasGradientColors,
+ allColors,
+ decodeValue,
+ encodeGradientValue,
+ } = useColorGradientSettings( settings );
// Links
const showLinkPanel = useHasLinkPanel( settings );
@@ -474,178 +205,91 @@ export default function ColorPanel( {
onChange( newValue );
};
- // Text Color
- const showTextPanel = useHasTextPanel( settings );
const showCaptionPanel = useHasCaptionPanel( settings );
const showButtonPanel = useHasButtonPanel( settings );
const showHeadingPanel = useHasHeadingPanel( settings );
- const textColor = decodeValue( inheritedValue?.color?.text );
- const userTextColor = decodeValue( value?.color?.text );
- const hasTextColor = () => !! userTextColor;
- const setTextColor = ( newColor, newSlug ) => {
- let changedObject = setImmutably(
- value,
- [ 'color', 'text' ],
- encodeColorValueWithPalette( allColors, newColor, newSlug )
- );
- // Compare raw encoded references (e.g. `var:preset|color|slug`), not
- // decoded hex values. Two palette entries can share the same hex but
- // carry different slugs (e.g. `var:preset|color|dark-background` and
- // `var:preset|color|dark-text` both resolving to `#000`); comparing decoded
- // values would conflate them and incorrectly force the link color to
- // follow the text color even when the user deliberately chose a
- // different palette slot.
- //
- // Note: this is stricter than the previous decoded comparison.
- // If text and link were stored in different formats that resolved to
- // the same hex (e.g. one as `var:preset|color|x` and the other as
- // `var(--wp--preset--color--x)`), the old check would sync them
- // and this one will not. In practice this should not arise because
- // both values are written through the same encoding path.
- if (
- inheritedValue?.color?.text ===
- inheritedValue?.elements?.link?.color?.text
- ) {
- changedObject = setImmutably(
- changedObject,
- [ 'elements', 'link', 'color', 'text' ],
- encodeColorValueWithPalette( allColors, newColor, newSlug )
- );
- }
-
- onChange( changedObject );
- };
- const resetTextColor = () => setTextColor( undefined );
// Elements
- const elements = [
- {
- name: 'caption',
- label: __( 'Captions' ),
- showPanel: showCaptionPanel,
- },
- {
- name: 'button',
- label: __( 'Button' ),
- showPanel: showButtonPanel,
- },
- {
- name: 'heading',
- label: __( 'Heading' ),
- showPanel: showHeadingPanel,
- },
- {
- name: 'h1',
- label: __( 'H1' ),
- showPanel: showHeadingPanel,
- },
- {
- name: 'h2',
- label: __( 'H2' ),
- showPanel: showHeadingPanel,
- },
- {
- name: 'h3',
- label: __( 'H3' ),
- showPanel: showHeadingPanel,
- },
- {
- name: 'h4',
- label: __( 'H4' ),
- showPanel: showHeadingPanel,
- },
- {
- name: 'h5',
- label: __( 'H5' ),
- showPanel: showHeadingPanel,
- },
- {
- name: 'h6',
- label: __( 'H6' ),
- showPanel: showHeadingPanel,
- },
- ];
+ const elements = useMemo(
+ () => [
+ {
+ name: 'caption',
+ label: __( 'Captions' ),
+ showPanel: showCaptionPanel,
+ },
+ {
+ name: 'button',
+ label: __( 'Button' ),
+ showPanel: showButtonPanel,
+ },
+ {
+ name: 'heading',
+ label: __( 'Heading' ),
+ showPanel: showHeadingPanel,
+ },
+ {
+ name: 'h1',
+ label: __( 'H1' ),
+ showPanel: showHeadingPanel,
+ },
+ {
+ name: 'h2',
+ label: __( 'H2' ),
+ showPanel: showHeadingPanel,
+ },
+ {
+ name: 'h3',
+ label: __( 'H3' ),
+ showPanel: showHeadingPanel,
+ },
+ {
+ name: 'h4',
+ label: __( 'H4' ),
+ showPanel: showHeadingPanel,
+ },
+ {
+ name: 'h5',
+ label: __( 'H5' ),
+ showPanel: showHeadingPanel,
+ },
+ {
+ name: 'h6',
+ label: __( 'H6' ),
+ showPanel: showHeadingPanel,
+ },
+ ],
+ [ showCaptionPanel, showButtonPanel, showHeadingPanel ]
+ );
- const resetAllFilter = ( previousValue ) => {
- return {
- ...previousValue,
- color: undefined,
- elements: {
- ...previousValue?.elements,
- link: {
- ...previousValue?.elements?.link,
- color: undefined,
- ':hover': {
+ const resetAllFilter = useCallback(
+ ( previousValue ) => {
+ return {
+ ...previousValue,
+ elements: {
+ ...previousValue?.elements,
+ link: {
+ ...previousValue?.elements?.link,
color: undefined,
- },
- },
- ...elements.reduce( ( acc, element ) => {
- return {
- ...acc,
- [ element.name ]: {
- ...previousValue?.elements?.[ element.name ],
+ ':hover': {
color: undefined,
},
- };
- }, {} ),
- },
- };
- };
-
- const items = [
- showTextPanel && {
- key: 'text',
- label: __( 'Text' ),
- hasValue: hasTextColor,
- resetValue: resetTextColor,
- isShownByDefault: defaultControls.text,
- indicators: [ textColor ],
- tabs: [
- {
- key: 'text',
- label: __( 'Text' ),
- inheritedValue: textColor,
- inheritedSlug: extractPresetSlug(
- inheritedValue?.color?.text,
- 'color'
- ),
- setValue: setTextColor,
- userValue: userTextColor,
- },
- ],
- },
- showBackgroundPanel && {
- key: 'background',
- label: __( 'Background' ),
- hasValue: hasBackground,
- resetValue: resetBackground,
- isShownByDefault: defaultControls.background,
- indicators: [
- ( showGradientColors ? gradient : undefined ) ??
- backgroundColor,
- ],
- tabs: [
- hasSolidColors && {
- key: 'background',
- label: __( 'Color' ),
- inheritedValue: backgroundColor,
- inheritedSlug: extractPresetSlug(
- inheritedValue?.color?.background,
- 'color'
- ),
- setValue: setBackgroundColor,
- userValue: userBackgroundColor,
- },
- showGradientColors && {
- key: 'gradient',
- label: __( 'Gradient' ),
- inheritedValue: gradient,
- setValue: setGradient,
- userValue: userGradient,
- isGradient: true,
+ },
+ ...elements.reduce( ( acc, element ) => {
+ return {
+ ...acc,
+ [ element.name ]: {
+ ...previousValue?.elements?.[ element.name ],
+ color: undefined,
+ },
+ };
+ }, {} ),
},
- ].filter( Boolean ),
+ };
},
+ [ elements ]
+ );
+
+ const items = [
showLinkPanel && {
key: 'link',
label: __( 'Link' ),
@@ -653,6 +297,7 @@ export default function ColorPanel( {
resetValue: resetLink,
isShownByDefault: defaultControls.link,
indicators: [ linkColor, hoverLinkColor ],
+ contrastWarning,
tabs: [
{
key: 'link',
@@ -756,7 +401,6 @@ export default function ColorPanel( {
newValue.elements[ name ].color.background = undefined;
onChange( newValue );
};
- const supportsTextColor = true;
// Background color is not supported for `caption`
// as there isn't yet a way to set padding for the element.
const supportsBackground = name !== 'caption';
@@ -767,30 +411,24 @@ export default function ColorPanel( {
hasValue: hasElement,
resetValue: resetElement,
isShownByDefault: defaultControls[ name ],
- indicators:
- supportsTextColor && supportsBackground
- ? [
- elementTextColor,
- elementGradient ?? elementBackgroundColor,
- ]
- : [
- supportsTextColor
- ? elementTextColor
- : elementGradient ?? elementBackgroundColor,
- ],
+ indicators: supportsBackground
+ ? [
+ elementTextColor,
+ elementGradient ?? elementBackgroundColor,
+ ]
+ : [ elementTextColor ],
tabs: [
- hasSolidColors &&
- supportsTextColor && {
- key: 'text',
- label: __( 'Text' ),
- inheritedValue: elementTextColor,
- inheritedSlug: extractPresetSlug(
- inheritedValue?.elements?.[ name ]?.color?.text,
- 'color'
- ),
- setValue: setElementTextColor,
- userValue: elementTextUserColor,
- },
+ hasSolidColors && {
+ key: 'text',
+ label: __( 'Text' ),
+ inheritedValue: elementTextColor,
+ inheritedSlug: extractPresetSlug(
+ inheritedValue?.elements?.[ name ]?.color?.text,
+ 'color'
+ ),
+ setValue: setElementTextColor,
+ userValue: elementTextUserColor,
+ },
hasSolidColors &&
supportsBackground && {
key: 'background',
@@ -828,7 +466,7 @@ export default function ColorPanel( {
{ items.map( ( item ) => {
const { key, ...restItem } = item;
return (
- colors.flatMap( ( { colors: originColors } ) => originColors ),
+ [ colors ]
+ );
+ const decodeValue = ( rawValue ) =>
+ getValueFromVariable( { settings }, '', rawValue );
+ const encodeGradientValue = ( gradientValue ) => {
+ const allGradients = gradients.flatMap(
+ ( { gradients: originGradients } ) => originGradients
+ );
+ const gradientObject = allGradients.find(
+ ( { gradient } ) => gradient === gradientValue
+ );
+ return gradientObject
+ ? 'var:preset|gradient|' + gradientObject.slug
+ : gradientValue;
+ };
+ return {
+ colors,
+ gradients,
+ allColors,
+ areCustomSolidsEnabled,
+ areCustomGradientsEnabled,
+ hasSolidColors: colors.length > 0 || areCustomSolidsEnabled,
+ hasGradientColors: gradients.length > 0 || areCustomGradientsEnabled,
+ decodeValue,
+ encodeGradientValue,
+ };
+}
diff --git a/packages/block-editor/src/components/global-styles/test/background-panel.js b/packages/block-editor/src/components/global-styles/test/background-panel.js
index c5e30846358f21..fe4d5cc4a1bfcb 100644
--- a/packages/block-editor/src/components/global-styles/test/background-panel.js
+++ b/packages/block-editor/src/components/global-styles/test/background-panel.js
@@ -5,6 +5,8 @@
import {
hasBackgroundImageValue,
hasBackgroundGradientValue,
+ hasBackgroundColorValue,
+ hasLegacyColorGradientValue,
} from '../background-panel';
describe( 'hasBackgroundImageValue', () => {
@@ -80,3 +82,57 @@ describe( 'hasBackgroundGradientValue', () => {
expect( hasBackgroundGradientValue( undefined ) ).toBe( false );
} );
} );
+
+describe( 'hasBackgroundColorValue', () => {
+ it( 'should return `true` when a background color string is set', () => {
+ expect(
+ hasBackgroundColorValue( { color: { background: '#ff0000' } } )
+ ).toBe( true );
+ } );
+
+ it( 'should return `true` for a preset slug reference', () => {
+ expect(
+ hasBackgroundColorValue( {
+ color: { background: 'var:preset|color|vivid-red' },
+ } )
+ ).toBe( true );
+ } );
+
+ it( 'should return `false` when background color is undefined', () => {
+ expect( hasBackgroundColorValue( { color: {} } ) ).toBe( false );
+ } );
+
+ it( 'should return `false` when color is undefined', () => {
+ expect( hasBackgroundColorValue( {} ) ).toBe( false );
+ } );
+
+ it( 'should return `false` when style is undefined', () => {
+ expect( hasBackgroundColorValue( undefined ) ).toBe( false );
+ } );
+} );
+
+describe( 'hasLegacyColorGradientValue', () => {
+ it( 'should return `true` when a legacy color.gradient string is set', () => {
+ expect(
+ hasLegacyColorGradientValue( {
+ color: { gradient: 'linear-gradient(135deg, red, blue)' },
+ } )
+ ).toBe( true );
+ } );
+
+ it( 'should return `false` when color.gradient is undefined', () => {
+ expect( hasLegacyColorGradientValue( { color: {} } ) ).toBe( false );
+ } );
+
+ it( 'should return `false` when style is undefined', () => {
+ expect( hasLegacyColorGradientValue( undefined ) ).toBe( false );
+ } );
+
+ it( 'should not be confused by background.gradient', () => {
+ expect(
+ hasLegacyColorGradientValue( {
+ background: { gradient: 'linear-gradient(red, blue)' },
+ } )
+ ).toBe( false );
+ } );
+} );
diff --git a/packages/block-editor/src/components/global-styles/test/color-panel.js b/packages/block-editor/src/components/global-styles/test/color-panel.js
index d78a87992fa2e3..134c9d04c13beb 100644
--- a/packages/block-editor/src/components/global-styles/test/color-panel.js
+++ b/packages/block-editor/src/components/global-styles/test/color-panel.js
@@ -1,135 +1,189 @@
/**
* External dependencies
*/
-import { screen } from '@testing-library/react';
-import { click, render } from '@ariakit/test/react';
+import { renderHook } from '@testing-library/react';
/**
* Internal dependencies
*/
-import ColorPanel from '../color-panel';
-
-// ---------------------------------------------------------------------------
-// Shared fixtures
-// ---------------------------------------------------------------------------
-
-// Two palette entries that share the same decoded hex value (#000) but carry
-// distinct slugs. This mirrors the duplicate-color scenario that motivated
-// the slug-based selection work.
-const DUPLICATE_PALETTE_SETTINGS = {
+import {
+ useHasColorPanel,
+ useHasTextPanel,
+ useHasBackgroundColorPanel,
+ useHasLinkPanel,
+ useHasHeadingPanel,
+ useHasButtonPanel,
+ useHasCaptionPanel,
+} from '../color-panel';
+
+const settingsWithColors = ( overrides = {} ) => ( {
color: {
- text: true,
- link: false, // keep the panel simple so button queries are unambiguous
- background: false,
- custom: false,
- customGradient: false,
- defaultPalette: false,
palette: {
- theme: [
- {
- color: '#000',
- name: 'Dark Background',
- slug: 'dark-background',
- },
- { color: '#000', name: 'Dark Text', slug: 'dark-text' },
- ],
+ theme: [ { slug: 'red', color: '#ff0000', name: 'Red' } ],
},
+ ...overrides,
},
-};
-
-// ---------------------------------------------------------------------------
-// ColorPanel — setTextColor behaviour (render tests)
-// ---------------------------------------------------------------------------
-
-describe( 'ColorPanel — setTextColor', () => {
- // Helper: open the Text-color dropdown and return the rendered swatches.
- async function openTextDropdown() {
- await click(
- screen.getByRole( 'button', { name: /Text/, expanded: false } )
- );
- // `findAllByRole` waits for the Popover/portal content to appear.
- return screen.findAllByRole( 'option' );
- }
-
- it( 'encodes a slug-selected color as var:preset|color| rather than falling back to a hex-value lookup', async () => {
- const onChange = jest.fn();
-
- await render(
- {
+ // After moving top-level text color to TypographyPanel and top-level
+ // background color to BackgroundPanel, the Color panel only aggregates
+ // link and element controls (heading, button, caption).
+ it( 'should be false when only text color is enabled', () => {
+ const { result } = renderHook( () =>
+ useHasColorPanel( settingsWithColors( { text: true } ) )
+ );
+ expect( result.current ).toBeFalsy();
+ } );
+
+ it( 'should be false when only background color is enabled', () => {
+ const { result } = renderHook( () =>
+ useHasColorPanel( settingsWithColors( { background: true } ) )
+ );
+ expect( result.current ).toBeFalsy();
+ } );
+
+ it( 'should be false when both text and background are enabled but no element controls are', () => {
+ const { result } = renderHook( () =>
+ useHasColorPanel(
+ settingsWithColors( { text: true, background: true } )
+ )
+ );
+ expect( result.current ).toBeFalsy();
+ } );
+
+ it( 'should be true when link color is enabled', () => {
+ const { result } = renderHook( () =>
+ useHasColorPanel( settingsWithColors( { link: true } ) )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be true when heading element is enabled', () => {
+ const { result } = renderHook( () =>
+ useHasColorPanel( settingsWithColors( { heading: true } ) )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be true when button element is enabled', () => {
+ const { result } = renderHook( () =>
+ useHasColorPanel( settingsWithColors( { button: true } ) )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be true when caption element is enabled', () => {
+ const { result } = renderHook( () =>
+ useHasColorPanel( settingsWithColors( { caption: true } ) )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be false when no color controls are enabled', () => {
+ const { result } = renderHook( () => useHasColorPanel( {} ) );
+ expect( result.current ).toBeFalsy();
+ } );
+} );
+
+describe( 'useHasTextPanel', () => {
+ // Still exported for TypographyPanel to consume as its text color gate.
+ it( 'should be true when text color is enabled and colors exist', () => {
+ const { result } = renderHook( () =>
+ useHasTextPanel( settingsWithColors( { text: true } ) )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be true when text color is enabled with custom colors support', () => {
+ const { result } = renderHook( () =>
+ useHasTextPanel( { color: { text: true, custom: true } } )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be false when text color is disabled', () => {
+ const { result } = renderHook( () =>
+ useHasTextPanel( settingsWithColors( { text: false } ) )
+ );
+ expect( result.current ).toBeFalsy();
+ } );
+
+ it( 'should be false when no colors or custom support exist', () => {
+ const { result } = renderHook( () =>
+ useHasTextPanel( { color: { text: true } } )
+ );
+ expect( result.current ).toBeFalsy();
+ } );
+} );
+
+describe( 'useHasBackgroundColorPanel', () => {
+ // Still exported for BackgroundPanel to consume as its background color gate.
+ it( 'should be true when background is enabled and colors exist', () => {
+ const { result } = renderHook( () =>
+ useHasBackgroundColorPanel(
+ settingsWithColors( { background: true } )
+ )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be true when only gradients are available', () => {
+ const { result } = renderHook( () =>
+ useHasBackgroundColorPanel( {
+ color: {
+ background: true,
+ gradients: {
+ theme: [
+ {
+ slug: 'cyan',
+ gradient: 'linear-gradient(cyan, blue)',
+ name: 'Cyan',
+ },
+ ],
},
- } }
- settings={ DUPLICATE_PALETTE_SETTINGS }
- panelId="test"
- onChange={ onChange }
- />
+ },
+ } )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be false when background color is disabled', () => {
+ const { result } = renderHook( () =>
+ useHasBackgroundColorPanel(
+ settingsWithColors( { background: false } )
+ )
);
+ expect( result.current ).toBeFalsy();
+ } );
+} );
- const swatches = await openTextDropdown();
- await click( swatches[ 1 ] );
+describe( 'element color hooks', () => {
+ it( 'useHasLinkPanel is truthy when link is enabled with colors', () => {
+ const { result } = renderHook( () =>
+ useHasLinkPanel( settingsWithColors( { link: true } ) )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
- const result = onChange.mock.calls[ 0 ][ 0 ];
- expect( result?.color?.text ).toBe( 'var:preset|color|dark-text' );
- // Link must NOT be updated: raw-ref identity is what matters,
- // not decoded-value equality.
- expect( result?.elements?.link?.color?.text ).toBeUndefined();
+ it( 'useHasHeadingPanel is truthy when heading is enabled with colors', () => {
+ const { result } = renderHook( () =>
+ useHasHeadingPanel( settingsWithColors( { heading: true } ) )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'useHasButtonPanel is truthy when button is enabled with colors', () => {
+ const { result } = renderHook( () =>
+ useHasButtonPanel( settingsWithColors( { button: true } ) )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'useHasCaptionPanel is truthy when caption is enabled with colors', () => {
+ const { result } = renderHook( () =>
+ useHasCaptionPanel( settingsWithColors( { caption: true } ) )
+ );
+ expect( result.current ).toBeTruthy();
} );
} );
diff --git a/packages/block-editor/src/components/global-styles/test/typography-panel.js b/packages/block-editor/src/components/global-styles/test/typography-panel.js
new file mode 100644
index 00000000000000..23ea5c2cf87125
--- /dev/null
+++ b/packages/block-editor/src/components/global-styles/test/typography-panel.js
@@ -0,0 +1,167 @@
+/**
+ * External dependencies
+ */
+import { renderHook, screen } from '@testing-library/react';
+import { click, render } from '@ariakit/test/react';
+
+/**
+ * Internal dependencies
+ */
+import TypographyPanel, { useHasTypographyPanel } from '../typography-panel';
+
+const settingsWithColors = ( overrides = {} ) => ( {
+ color: {
+ palette: {
+ theme: [ { slug: 'red', color: '#ff0000', name: 'Red' } ],
+ },
+ ...overrides,
+ },
+} );
+
+describe( 'useHasTypographyPanel', () => {
+ // After moving top-level text color into TypographyPanel, text color
+ // alone should be enough to open the panel.
+ it( 'should be true when only text color is enabled', () => {
+ const { result } = renderHook( () =>
+ useHasTypographyPanel( settingsWithColors( { text: true } ) )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be true when only font family is enabled', () => {
+ const { result } = renderHook( () =>
+ useHasTypographyPanel( {
+ typography: {
+ fontFamilies: {
+ theme: [ { slug: 'sans', fontFamily: 'sans-serif' } ],
+ },
+ },
+ } )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be true when only line height is enabled', () => {
+ const { result } = renderHook( () =>
+ useHasTypographyPanel( { typography: { lineHeight: true } } )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+
+ it( 'should be false when no typography or text color controls are enabled', () => {
+ const { result } = renderHook( () => useHasTypographyPanel( {} ) );
+ expect( result.current ).toBeFalsy();
+ } );
+
+ it( 'should be false when text color is enabled but no colors or custom support exist', () => {
+ const { result } = renderHook( () =>
+ useHasTypographyPanel( { color: { text: true } } )
+ );
+ expect( result.current ).toBeFalsy();
+ } );
+
+ it( 'should be true when text color is enabled with custom colors support', () => {
+ const { result } = renderHook( () =>
+ useHasTypographyPanel( { color: { text: true, custom: true } } )
+ );
+ expect( result.current ).toBeTruthy();
+ } );
+} );
+
+// ---------------------------------------------------------------------------
+// TypographyPanel — setTextColor link-sync behaviour (render tests)
+// ---------------------------------------------------------------------------
+
+// Setting the text color should keep an in-sync link color following it (e.g.
+// a Button's link color tracks its text color). The two palette entries below
+// share the same decoded hex value (#000) but carry distinct slugs, ensuring
+// the sync keys off the raw preset reference rather than the decoded hex.
+const DUPLICATE_PALETTE_SETTINGS = {
+ color: {
+ text: true,
+ custom: false,
+ customGradient: false,
+ defaultPalette: false,
+ palette: {
+ theme: [
+ {
+ color: '#000',
+ name: 'Dark Background',
+ slug: 'dark-background',
+ },
+ { color: '#000', name: 'Dark Text', slug: 'dark-text' },
+ ],
+ },
+ },
+};
+
+describe( 'TypographyPanel — setTextColor link sync', () => {
+ // Helper: open the text Color dropdown and return the rendered swatches.
+ async function openTextColorDropdown() {
+ await click(
+ screen.getByRole( 'button', { name: /Color/, expanded: false } )
+ );
+ // `findAllByRole` waits for the Popover/portal content to appear.
+ return screen.findAllByRole( 'option' );
+ }
+
+ it( 'syncs the link color when text and link share the same raw preset reference', async () => {
+ const onChange = jest.fn();
+ const sharedRef = 'var:preset|color|dark-background';
+
+ await render(
+
+ { hasTextColorEnabled && (
+ ( { ...settings, typography: {} } ),
+ [ settings ]
+ );
+ const backgroundSettings = useMemo(
+ () => ( {
+ ...settings,
+ background: {
+ ...settings.background,
+ backgroundImage: false,
+ backgroundSize: false,
+ },
+ } ),
+ [ settings ]
+ );
+
return (
-
+
+
{ children }
);
@@ -169,122 +173,179 @@ export function BackgroundImagePanel( {
name,
setAttributes,
settings,
+ // Allows rendering outside the `background` inspector group (e.g. section
+ // blocks direct-render this panel because their support fills are gated
+ // off by editing mode). Defaults to the slot-based wrapper.
+ asWrapper,
} ) {
const selectedState = useBlockStyleState();
- const { style, className, inheritedValue } = useSelect(
- ( select ) => {
- const { getBlockAttributes, getSettings } =
- select( blockEditorStore );
- const _settings = getSettings();
- const blockAttributes = getBlockAttributes( clientId );
- return {
- style: blockAttributes?.style,
- className: blockAttributes?.className,
- /*
- * To ensure we pass down the right inherited values:
- * @TODO 1. Pass inherited value down to all block style controls,
- * See: packages/block-editor/src/hooks/style.js
- * @TODO 2. Add support for block style variations,
- * See implementation: packages/block-editor/src/hooks/block-style-variation.js
- */
- inheritedValue:
- _settings[ globalStylesDataKey ]?.blocks?.[ name ],
- };
- },
- [ clientId, name ]
- );
+ const { style, className, backgroundColor, gradient, inheritedValue } =
+ useSelect(
+ ( select ) => {
+ const { getBlockAttributes, getSettings } =
+ select( blockEditorStore );
+ const _settings = getSettings();
+ const blockAttributes = getBlockAttributes( clientId );
+ return {
+ style: blockAttributes?.style,
+ className: blockAttributes?.className,
+ backgroundColor: blockAttributes?.backgroundColor,
+ gradient: blockAttributes?.gradient,
+ inheritedValue:
+ _settings[ globalStylesDataKey ]?.blocks?.[ name ],
+ };
+ },
+ [ clientId, name ]
+ );
const backgroundGradientSupported = hasBackgroundSupport(
name,
'gradient'
);
- // Must be declared before the early return to follow Rules of Hooks.
- // Passes backgroundGradientSupported so that "Reset All" also clears
- // the legacy color.gradient value when background.gradient is supported.
- const as = useCallback(
- ( { children } ) => (
-
- { children }
-
+ const colorSupport = getBlockSupport( name, 'color' );
+ const hasColorBackgroundSupport =
+ colorSupport && colorSupport.background !== false;
+ const hasColorGradientSupport = !! colorSupport?.gradients;
+
+ const isStateSelected = ! isDefaultBlockStyleState( selectedState );
+
+ // Fold the backgroundColor / gradient attribute slugs back into the style
+ // object the panel consumes. When background.gradient is supported but not
+ // yet explicitly set, fall back to color.gradient for display.
+ const styleValue = {
+ ...style,
+ color: {
+ ...style?.color,
+ background: backgroundColor
+ ? 'var:preset|color|' + backgroundColor
+ : style?.color?.background,
+ gradient:
+ ! backgroundGradientSupported && gradient
+ ? 'var:preset|gradient|' + gradient
+ : style?.color?.gradient,
+ },
+ ...( backgroundGradientSupported && {
+ background: {
+ ...style?.background,
+ gradient: gradient
+ ? 'var:preset|gradient|' + gradient
+ : style?.background?.gradient ?? style?.color?.gradient,
+ },
+ } ),
+ };
+
+ // Skipped for gradients, which can't be reliably evaluated for contrast.
+ const enableContrastChecking =
+ ! isStateSelected &&
+ ! styleValue?.color?.gradient &&
+ ! styleValue?.background?.gradient &&
+ !! styleValue?.color?.background &&
+ ( settings?.color?.text || settings?.color?.link ) &&
+ false !== getBlockSupport( name, [ 'color', 'enableContrastChecker' ] );
+
+ const contrastWarning = useBlockColorContrastWarning( {
+ clientId,
+ name,
+ enabled: !! enableContrastChecking,
+ messageOverride: __(
+ 'This color combination has poor contrast. Consider increasing contrast between background and foreground.'
),
- [ backgroundGradientSupported ]
- );
+ } );
if (
! useHasBackgroundPanel( settings ) ||
- ! hasBackgroundSupport( name )
+ ( ! hasBackgroundSupport( name ) &&
+ ! hasColorBackgroundSupport &&
+ ! hasColorGradientSupport )
) {
return null;
}
- const isStateSelected = ! isDefaultBlockStyleState( selectedState );
+ const onChange = ( newStyle ) => {
+ if ( isStateSelected ) {
+ setAttributes( {
+ style: setStyleForState( style, selectedState, newStyle ),
+ } );
+ return;
+ }
- const onChange = isStateSelected
- ? ( newStyle ) => {
- setAttributes( {
- style: setStyleForState( style, selectedState, newStyle ),
- } );
- }
- : ( newStyle ) => {
- const isMigrating =
- backgroundGradientSupported && !! style?.color?.gradient;
- const newAttributes = {
- style: cleanEmptyObject(
- backgroundGradientSupported
- ? {
- ...newStyle,
- color: {
- ...newStyle?.color,
- gradient: undefined,
- },
- }
- : newStyle
- ),
- };
+ // Extract background color slug from style.color.background.
+ const newBackgroundColorValue = newStyle?.color?.background;
+ const newBackgroundColorSlug = extractPresetSlug(
+ newBackgroundColorValue,
+ 'color'
+ );
+
+ // Extract gradient slug — prefer the new background.gradient path
+ // when backgroundGradientSupported, fall back to color.gradient.
+ const newGradientValue = backgroundGradientSupported
+ ? newStyle?.background?.gradient
+ : newStyle?.color?.gradient;
+ const newGradientSlug = extractPresetSlug(
+ newGradientValue,
+ 'gradient'
+ );
+ const cleanedColorGradient = newGradientSlug
+ ? undefined
+ : newStyle?.color?.gradient;
- // When migrating from color.gradient to background.gradient, preserve
- // the has-background class so existing styles relying on it (e.g.
- // theme padding) are not silently broken. Only add the class when a
- // gradient value is being set — not when it is being cleared/reset.
- // Conversely, if the gradient is cleared and has-background was added
- // during a previous migration, remove it so it does not linger.
- if ( isMigrating && !! newStyle?.background?.gradient ) {
- newAttributes.className = clsx(
- className,
- 'has-background'
- );
- } else if (
- ! newStyle?.background?.gradient &&
- className?.includes( 'has-background' )
- ) {
- newAttributes.className =
- className
- .split( ' ' )
- .filter( ( c ) => c !== 'has-background' )
- .join( ' ' ) || undefined;
- }
-
- setAttributes( newAttributes );
- };
-
- // When background.gradient is supported but not yet explicitly set, fall
- // back to color.gradient for display. Any write from this panel migrates
- // the value to background.gradient and clears color.gradient atomically.
- const styleValue =
- backgroundGradientSupported &&
- ! style?.background?.gradient &&
- style?.color?.gradient
- ? {
- ...style,
- background: {
- ...style?.background,
- gradient: style?.color?.gradient,
- },
- }
- : style;
+ // Drop slug-resolved values so they aren't persisted inline alongside
+ // the attribute slugs.
+ const cleanedStyle = {
+ ...newStyle,
+ color: {
+ ...newStyle?.color,
+ background: newBackgroundColorSlug
+ ? undefined
+ : newBackgroundColorValue,
+ gradient: backgroundGradientSupported
+ ? undefined
+ : cleanedColorGradient,
+ },
+ };
+ if ( backgroundGradientSupported ) {
+ // Background gradients are kept whole in `style.background.gradient`
+ // rather than extracted to the legacy `gradient` attribute.
+ cleanedStyle.background = {
+ ...cleanedStyle.background,
+ gradient: newStyle?.background?.gradient,
+ };
+ }
+
+ const isMigrating =
+ backgroundGradientSupported && !! style?.color?.gradient;
+ const newAttributes = {
+ style: cleanEmptyObject( cleanedStyle ),
+ backgroundColor: newBackgroundColorSlug,
+ // The legacy `gradient` attribute is only used when the block does
+ // not support `background.gradient`; otherwise the gradient is
+ // stored in `style.background.gradient` above.
+ gradient: backgroundGradientSupported ? undefined : newGradientSlug,
+ };
+
+ // When migrating from color.gradient to background.gradient, preserve
+ // the has-background class so existing styles relying on it (e.g.
+ // theme padding) are not silently broken. Only add the class when a
+ // gradient value is being set — not when it is being cleared/reset.
+ // Conversely, if the gradient is cleared and has-background was added
+ // during a previous migration, remove it so it does not linger.
+ const hasNewGradient = !! newGradientSlug || !! newGradientValue;
+ if ( isMigrating && hasNewGradient ) {
+ newAttributes.className = clsx( className, 'has-background' );
+ } else if (
+ ! hasNewGradient &&
+ className?.includes( 'has-background' )
+ ) {
+ newAttributes.className =
+ className
+ .split( ' ' )
+ .filter( ( c ) => c !== 'has-background' )
+ .join( ' ' ) || undefined;
+ }
+
+ setAttributes( newAttributes );
+ };
const updatedSettings = {
...settings,
@@ -296,15 +357,30 @@ export function BackgroundImagePanel( {
},
};
- const defaultControls = getBlockSupport( name, [
+ const backgroundDefaultControls = getBlockSupport( name, [
BACKGROUND_SUPPORT_KEY,
'__experimentalDefaultControls',
] );
+ const colorDefaultControls = getBlockSupport( name, [
+ 'color',
+ '__experimentalDefaultControls',
+ ] );
+ const defaultControls = {
+ ...backgroundDefaultControls,
+ backgroundColor: colorDefaultControls?.background,
+ // Mirror the old combined control: show the gradient item by default
+ // when background color was shown by default.
+ gradient:
+ backgroundDefaultControls?.gradient ??
+ colorDefaultControls?.background,
+ };
+
+ const Wrapper = asWrapper || BackgroundInspectorControl;
return (
- { children }
-
- );
-}
-
-export function ColorEdit( {
- clientId,
- name,
- setAttributes,
- settings,
- asWrapper,
- label,
- defaultControls,
-} ) {
- const selectedState = useBlockStyleState();
- const isEnabled = useHasColorPanel( settings );
-
- const { style, textColor, backgroundColor, gradient } = useSelect(
- ( select ) => {
- // Early return to avoid subscription when disabled
- if ( ! isEnabled ) {
- return {};
- }
- const {
- style: _style,
- textColor: _textColor,
- backgroundColor: _backgroundColor,
- gradient: _gradient,
- } = select( blockEditorStore ).getBlockAttributes( clientId ) || {};
- return {
- style: _style,
- textColor: _textColor,
- backgroundColor: _backgroundColor,
- gradient: _gradient,
- };
- },
- [ clientId, isEnabled ]
- );
-
- const isStateSelected = ! isDefaultBlockStyleState( selectedState );
-
- const value = useMemo( () => {
- if ( isStateSelected ) {
- return getStyleForState( style, selectedState );
- }
- return attributesToStyle( {
- style,
- textColor,
- backgroundColor,
- gradient,
- } );
- }, [
- isStateSelected,
- selectedState,
- style,
- textColor,
- backgroundColor,
- gradient,
- ] );
-
- const onChange = isStateSelected
- ? ( newStyle ) => {
- setAttributes( {
- style: setStyleForState( style, selectedState, newStyle ),
- } );
- }
- : ( newStyle ) => {
- setAttributes( styleToAttributes( newStyle ) );
- };
-
- const Wrapper = asWrapper || ColorInspectorControl;
-
- if ( ! isEnabled ) {
- return null;
- }
-
- defaultControls = defaultControls
- ? defaultControls
- : getBlockSupport( name, [
- COLOR_SUPPORT_KEY,
- '__experimentalDefaultControls',
- ] );
-
- const enableContrastChecking =
- ! isStateSelected &&
- ! value?.color?.gradient &&
- ( settings?.color?.text || settings?.color?.link ) &&
- // Contrast checking is enabled by default.
- // Deactivating it requires `enableContrastChecker` to have
- // an explicit value of `false`.
- false !==
- getBlockSupport( name, [
- COLOR_SUPPORT_KEY,
- 'enableContrastChecker',
- ] );
-
- return (
-
- { enableContrastChecking && (
-
- );
-}
-
function useBlockProps( {
name,
backgroundColor,
diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
index 60d30a885d1f58..bde15666c04a8e 100644
--- a/packages/block-editor/src/hooks/color.scss
+++ b/packages/block-editor/src/hooks/color.scss
@@ -1,6 +1,9 @@
@use "@wordpress/base-styles/variables" as *;
.color-block-support-panel {
+ // Blocks with non-standard color attributes (e.g. Social Icons,
+ // Navigation) still render the public ContrastChecker component
+ // directly within the color panel.
.block-editor-contrast-checker {
grid-column: span 2;
margin-top: $grid-unit-20;
@@ -12,13 +15,4 @@
row-gap: 0;
}
}
-
- /**
- * After converting PanelColorGradientSettings to render as a ToolsPanel
- * we need to remove the top margin when wrapping inner content due to
- * rendering via SlotFills.
- */
- .block-editor-tools-panel-color-gradient-settings__item.first {
- margin-top: 0;
- }
}
diff --git a/packages/block-editor/src/hooks/contrast-checker.js b/packages/block-editor/src/hooks/contrast-checker.js
index 42f910e0c3d534..6372139fe9a836 100644
--- a/packages/block-editor/src/hooks/contrast-checker.js
+++ b/packages/block-editor/src/hooks/contrast-checker.js
@@ -1,15 +1,17 @@
/**
* WordPress dependencies
*/
-import { useLayoutEffect, useReducer } from '@wordpress/element';
+import { useEffect, useLayoutEffect, useReducer } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { store as blocksStore } from '@wordpress/blocks';
import { getBlockSelector } from '@wordpress/global-styles-engine';
+import { speak } from '@wordpress/a11y';
/**
* Internal dependencies
*/
-import ContrastChecker from '../components/contrast-checker';
+import { getContrastWarning } from '../components/contrast-checker';
+
import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
function getComputedValue( node, property ) {
@@ -80,23 +82,47 @@ function reducer( prevColors, newColors ) {
return hasChanged ? newColors : prevColors;
}
-export default function BlockColorContrastChecker( { clientId, name } ) {
+/**
+ * Returns a contrast warning message for a block's computed colors, or
+ * `undefined` when contrast is sufficient or checking is disabled.
+ *
+ * Colors are read from the rendered block element so that inherited values
+ * (e.g. from Global Styles or ancestor blocks) are taken into account.
+ *
+ * @param {Object} props
+ * @param {string} props.clientId Block client ID.
+ * @param {string} props.name Block name.
+ * @param {boolean} [props.enabled] Whether contrast checking is active.
+ * @param {boolean} [props.checkTextColor] Whether to evaluate the text/background pair.
+ * @param {boolean} [props.checkLinkColor] Whether to evaluate the link/background pair.
+ * @param {string} [props.messageOverride] Caller-provided copy used in place of the generic guidance.
+ *
+ * @return {?string} The warning message, if any.
+ */
+export default function useBlockColorContrastWarning( {
+ clientId,
+ name,
+ enabled = true,
+ checkTextColor = true,
+ checkLinkColor = true,
+ messageOverride,
+} ) {
const blockEl = useBlockElement( clientId );
const [ colors, setColors ] = useReducer( reducer, {} );
const blockType = useSelect(
( select ) => {
- return name
+ return name && enabled
? select( blocksStore ).getBlockType( name )
: undefined;
},
- [ name ]
+ [ name, enabled ]
);
// There are so many things that can change the color of a block
// So we perform this check on every render.
useLayoutEffect( () => {
- if ( ! blockEl || ! blockType ) {
+ if ( ! enabled || ! blockEl || ! blockType ) {
return;
}
@@ -112,7 +138,7 @@ export default function BlockColorContrastChecker( { clientId, name } ) {
// Runs in its own effect with dependencies so the observer is only
// recreated when the block element or block type changes.
useLayoutEffect( () => {
- if ( ! blockEl || ! blockType ) {
+ if ( ! enabled || ! blockEl || ! blockType ) {
return;
}
@@ -123,19 +149,36 @@ export default function BlockColorContrastChecker( { clientId, name } ) {
observer.observe( blockEl, {
attributes: true,
attributeFilter: [ 'class', 'style' ],
+ subtree: true,
} );
return () => {
observer.disconnect();
};
- }, [ blockEl, blockType ] );
-
- return (
-
+ { children }
+
+ );
+}
+
+export function ElementsEdit( {
+ clientId,
+ name,
+ setAttributes,
+ settings,
+ asWrapper,
+ label,
+ defaultControls,
+} ) {
+ const selectedState = useBlockStyleState();
+ const isEnabled = useHasColorPanel( settings );
+
+ const style = useSelect(
+ ( select ) => {
+ if ( ! isEnabled ) {
+ return undefined;
+ }
+ const attributes =
+ select( blockEditorStore ).getBlockAttributes( clientId );
+ return attributes?.style;
+ },
+ [ clientId, isEnabled ]
+ );
+
+ const isStateSelected = ! isDefaultBlockStyleState( selectedState );
+
+ const value = useMemo( () => {
+ if ( isStateSelected ) {
+ return getStyleForState( style, selectedState );
+ }
+ return style;
+ }, [ isStateSelected, selectedState, style ] );
+
+ const onChange = isStateSelected
+ ? ( newStyle ) => {
+ setAttributes( {
+ style: setStyleForState( style, selectedState, newStyle ),
+ } );
+ }
+ : ( newStyle ) => {
+ setAttributes( { style: cleanEmptyObject( newStyle ) } );
+ };
+
+ // Text and background color failures are reported by the Typography and
+ // Background panels, which own those selections.
+ const enableContrastChecking =
+ ! isStateSelected &&
+ !! value?.elements?.link?.color?.text &&
+ settings?.color?.link &&
+ false !==
+ getBlockSupport( name, [
+ COLOR_SUPPORT_KEY,
+ 'enableContrastChecker',
+ ] );
+
+ const contrastWarning = useBlockColorContrastWarning( {
+ clientId,
+ name,
+ enabled: !! enableContrastChecking,
+ checkTextColor: false,
+ messageOverride: __(
+ 'This link color has poor contrast against the background. Consider increasing contrast.'
+ ),
+ } );
+
+ if ( ! isEnabled ) {
+ return null;
+ }
+
+ defaultControls = defaultControls
+ ? defaultControls
+ : getBlockSupport( name, [
+ COLOR_SUPPORT_KEY,
+ '__experimentalDefaultControls',
+ ] );
+
+ const Wrapper = asWrapper || ElementsInspectorControl;
+
+ return (
+
- {
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();
- await page.click(
- 'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
- );
+ const editorSettings = page.getByRole( 'region', {
+ name: 'Editor settings',
+ } );
+ await editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
await page.click( 'role=option[name="Cyan bluish gray"i]' );
- await page.click(
- 'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
- );
+ await editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
await page.click( 'role=option[name="Vivid red"i]' );
// Check the content.
@@ -296,15 +307,26 @@ test.describe( 'Buttons', () => {
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();
- await page.click(
- 'role=region[name="Editor settings"i] >> role=button[name="Text"i]'
- );
+ const editorSettings = page.getByRole( 'region', {
+ name: 'Editor settings',
+ } );
+ await editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
await page.click( 'role=button[name="Custom color picker"i]' );
await page.fill( 'role=textbox[name="Hex color"i]', 'ff0000' );
- await page.click(
- 'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
- );
+ await editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
await page.click( 'role=button[name="Custom color picker"i]' );
await page.fill( 'role=textbox[name="Hex color"i]', '00ff00' );
@@ -327,10 +349,10 @@ test.describe( 'Buttons', () => {
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();
- await page.click(
- 'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
- );
- await page.click( 'role=tab[name="Gradient"i]' );
+ await page
+ .getByRole( 'region', { name: 'Editor settings' } )
+ .getByRole( 'button', { name: 'Gradient', exact: true } )
+ .click();
await page.click( 'role=option[name="Gradient: Purple to yellow"i]' );
// Check the content.
@@ -352,10 +374,10 @@ test.describe( 'Buttons', () => {
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();
- await page.click(
- 'role=region[name="Editor settings"i] >> role=button[name="Background"i]'
- );
- await page.click( 'role=tab[name="Gradient"i]' );
+ await page
+ .getByRole( 'region', { name: 'Editor settings' } )
+ .getByRole( 'button', { name: 'Gradient', exact: true } )
+ .click();
await page.click(
'role=button[name=/^Gradient control point at position 0% with color code/]'
);
@@ -385,13 +407,26 @@ test.describe( 'Buttons', () => {
await page.keyboard.type( 'Content' );
await editor.openDocumentSettingsSidebar();
- // Apply named colors to the first button.
+ // Apply named colors to the first button. Text and background color
+ // controls now live in the Typography and Background panels.
const settings = page.getByRole( 'region', {
name: 'Editor settings',
} );
- await settings.getByRole( 'button', { name: 'Text' } ).click();
+ await settings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
await page.getByRole( 'option', { name: 'Cyan bluish gray' } ).click();
- await settings.getByRole( 'button', { name: 'Background' } ).click();
+ await settings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
await page.getByRole( 'option', { name: 'Vivid red' } ).click();
// Select the parent Buttons block so the appender is visible.
diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js
index 884395426507da..acb4e31b676de8 100644
--- a/test/e2e/specs/editor/blocks/heading.spec.js
+++ b/test/e2e/specs/editor/blocks/heading.spec.js
@@ -180,7 +180,11 @@ test.describe( 'Heading', () => {
.getByRole( 'region', {
name: 'Editor settings',
} )
- .getByRole( 'button', { name: 'Text' } );
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } );
await textColor.click();
await page
@@ -214,7 +218,11 @@ test.describe( 'Heading', () => {
.getByRole( 'region', {
name: 'Editor settings',
} )
- .getByRole( 'button', { name: 'Text', exact: true } );
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } );
await textColor.click();
diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
index b2c28dde5fc437..49c2ae081888ce 100644
--- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js
@@ -89,14 +89,33 @@ test.describe( 'Navigation colors', () => {
await page.getByRole( 'menuitem', { name: 'Group' } ).click();
// In the sidebar inspector we add text and background colors to the group block.
+ // Text and background color controls now live in the Typography and
+ // Background panels respectively, so no separate "Styles" tab is shown.
await editor.openDocumentSettingsSidebar();
- await page.getByRole( 'button', { name: 'Text' } ).click();
+ const editorSettings = page.getByRole( 'region', {
+ name: 'Editor settings',
+ } );
+ const textColorToggle = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } );
+ await textColorToggle.click();
await page
.getByRole( 'option', { name: 'White' } )
.click( { force: true } );
-
- await page
- .getByRole( 'button', { name: 'Background', exact: true } )
+ // Close the text color popover before opening the background one so the
+ // two option pickers don't overlap (each palette contains a "Black"
+ // swatch, which would otherwise be ambiguous).
+ await textColorToggle.click();
+
+ await editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
.click();
await page
.getByRole( 'option', { name: 'Black' } )
@@ -140,8 +159,9 @@ test.describe( 'Navigation colors', () => {
await page.getByRole( 'menuitem', { name: 'Group' } ).click();
// In the sidebar inspector we add a link color and link hover color to the group block.
+ // Link/element colors now live in the Elements panel.
await editor.openDocumentSettingsSidebar();
- await page.getByRole( 'button', { name: 'Color options' } ).click();
+ await page.getByRole( 'button', { name: 'Elements options' } ).click();
await page
.getByRole( 'menuitemcheckbox', { name: 'Show Link' } )
.click();
diff --git a/test/e2e/specs/editor/plugins/server-side-rendered-block.spec.js b/test/e2e/specs/editor/plugins/server-side-rendered-block.spec.js
index 64d33ff807bab7..4695ba24af0032 100644
--- a/test/e2e/specs/editor/plugins/server-side-rendered-block.spec.js
+++ b/test/e2e/specs/editor/plugins/server-side-rendered-block.spec.js
@@ -213,13 +213,24 @@ test.describe( 'PHP-only auto-register blocks', () => {
await blockWrapper.click();
await editor.openDocumentSettingsSidebar();
- const colorsButton = page.getByRole( 'button', { name: /Color/i } );
- await colorsButton.click();
+ // Background color now lives in the Background panel and is hidden by
+ // default for this block, so reveal it via the panel options menu.
+ await page
+ .getByRole( 'button', { name: 'Background options' } )
+ .click();
+ await page
+ .getByRole( 'menuitemcheckbox', { name: 'Show Color' } )
+ .click();
+
+ const backgroundColorButton = page
+ .getByRole( 'region', { name: 'Editor settings' } )
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } );
+ await backgroundColorButton.click();
- const backgroundButton = page.getByRole( 'button', {
- name: /Background/i,
- } );
- await backgroundButton.click();
const firstColor = page.getByRole( 'option' ).first();
const colorName = await firstColor.getAttribute( 'aria-label' );
await firstColor.click();
diff --git a/test/e2e/specs/editor/various/block-style-state-colors.spec.js b/test/e2e/specs/editor/various/block-style-state-colors.spec.js
new file mode 100644
index 00000000000000..d17c2cb3750351
--- /dev/null
+++ b/test/e2e/specs/editor/various/block-style-state-colors.spec.js
@@ -0,0 +1,181 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Relocated color controls with block style states', () => {
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost();
+ } );
+
+ test( 'stores relocated text and background colors under the selected viewport state', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( { name: 'core/group' } );
+ await editor.openDocumentSettingsSidebar();
+
+ const settings = page.getByRole( 'region', {
+ name: 'Editor settings',
+ } );
+
+ // Switch the block's editing context to the Mobile viewport state.
+ await settings
+ .getByRole( 'button', { name: 'State: Default', exact: true } )
+ .click();
+ await page
+ .getByRole( 'menuitem', { name: 'Mobile', exact: true } )
+ .click();
+
+ // Text color now lives in the Typography panel.
+ await settings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
+ await page.getByRole( 'option', { name: 'Vivid red' } ).click();
+
+ // Background color now lives in the Background panel.
+ await settings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
+ await page.getByRole( 'option', { name: 'Vivid cyan blue' } ).click();
+
+ const [ block ] = await editor.getBlocks();
+
+ // Values are stored inline under the selected state slice...
+ expect( block.attributes.style?.mobile?.color?.text ).toBe(
+ 'var:preset|color|vivid-red'
+ );
+ expect( block.attributes.style?.mobile?.color?.background ).toBe(
+ 'var:preset|color|vivid-cyan-blue'
+ );
+
+ // ...and the default state is untouched (no bleed across contexts).
+ expect( block.attributes.style?.color ).toBeUndefined();
+
+ // State values stay in `style`; they are not hoisted to the
+ // textColor/backgroundColor attributes the way the default state is.
+ expect( block.attributes.textColor ).toBeUndefined();
+ expect( block.attributes.backgroundColor ).toBeUndefined();
+ } );
+
+ test( 'stores relocated element colors under the selected viewport state', async ( {
+ editor,
+ page,
+ } ) => {
+ await editor.insertBlock( { name: 'core/group' } );
+ await editor.openDocumentSettingsSidebar();
+
+ const settings = page.getByRole( 'region', {
+ name: 'Editor settings',
+ } );
+
+ // Switch the block's editing context to the Mobile viewport state.
+ await settings
+ .getByRole( 'button', { name: 'State: Default', exact: true } )
+ .click();
+ await page
+ .getByRole( 'menuitem', { name: 'Mobile', exact: true } )
+ .click();
+
+ const elementsPanel = settings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Elements' } ),
+ } );
+
+ // The Link element control is hidden by default; enable it via the
+ // Elements panel options menu.
+ await elementsPanel
+ .getByRole( 'button', { name: 'Elements options' } )
+ .click();
+ await page
+ .getByRole( 'menuitemcheckbox', { name: 'Show Link' } )
+ .click();
+ await elementsPanel
+ .getByRole( 'button', { name: 'Elements options' } )
+ .click();
+
+ // Set the link color while the Mobile state is selected.
+ await elementsPanel
+ .getByRole( 'button', { name: 'Link', exact: true } )
+ .click();
+ await page.getByRole( 'option', { name: 'Vivid red' } ).click();
+
+ const [ block ] = await editor.getBlocks();
+
+ // The element color is stored under the selected state slice...
+ expect(
+ block.attributes.style?.mobile?.elements?.link?.color?.text
+ ).toBe( 'var:preset|color|vivid-red' );
+
+ // ...and the default state's elements are untouched.
+ expect( block.attributes.style?.elements ).toBeUndefined();
+ } );
+
+ test( 'reset all in a viewport state clears only that viewport state colors', async ( {
+ editor,
+ page,
+ } ) => {
+ // The default state has a text color; the Mobile state has its own
+ // text and background colors.
+ await editor.insertBlock( {
+ name: 'core/group',
+ attributes: {
+ style: {
+ color: { text: 'var:preset|color|vivid-red' },
+ mobile: {
+ color: {
+ text: 'var:preset|color|vivid-cyan-blue',
+ background: 'var:preset|color|vivid-red',
+ },
+ },
+ },
+ },
+ } );
+ await editor.openDocumentSettingsSidebar();
+
+ const settings = page.getByRole( 'region', {
+ name: 'Editor settings',
+ } );
+
+ await settings
+ .getByRole( 'button', { name: 'State: Default', exact: true } )
+ .click();
+ await page
+ .getByRole( 'menuitem', { name: 'Mobile', exact: true } )
+ .click();
+
+ // Reset all of the Background panel while the Mobile state is selected.
+ await settings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } )
+ .getByRole( 'button', { name: 'Background options' } )
+ .click();
+ await page.getByRole( 'menuitem', { name: 'Reset all' } ).click();
+
+ const [ block ] = await editor.getBlocks();
+
+ // Only the Mobile background color is cleared.
+ expect(
+ block.attributes.style?.mobile?.color?.background
+ ).toBeUndefined();
+ // The Mobile text color (owned by a different panel) is preserved.
+ expect( block.attributes.style?.mobile?.color?.text ).toBe(
+ 'var:preset|color|vivid-cyan-blue'
+ );
+ // The default-state text color is preserved.
+ expect( block.attributes.style?.color?.text ).toBe(
+ 'var:preset|color|vivid-red'
+ );
+ } );
+} );
diff --git a/test/e2e/specs/editor/various/color-picker-hsl.spec.js b/test/e2e/specs/editor/various/color-picker-hsl.spec.js
index 945c8ea5679ed6..f5676135578dac 100644
--- a/test/e2e/specs/editor/various/color-picker-hsl.spec.js
+++ b/test/e2e/specs/editor/various/color-picker-hsl.spec.js
@@ -17,7 +17,11 @@ test.describe( 'ColorPicker HSL inputs', () => {
await page
.getByRole( 'region', { name: 'Editor settings' } )
- .getByRole( 'button', { name: 'Text' } )
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
.click();
await page
diff --git a/test/e2e/specs/editor/various/color-support.spec.js b/test/e2e/specs/editor/various/color-support.spec.js
index b3118b2a501e36..4a8f9597cb3cb6 100644
--- a/test/e2e/specs/editor/various/color-support.spec.js
+++ b/test/e2e/specs/editor/various/color-support.spec.js
@@ -22,7 +22,7 @@ test.describe( 'Link color in themes', () => {
await editor.openDocumentSettingsSidebar();
- await page.getByRole( 'button', { name: 'Color options' } ).click();
+ await page.getByRole( 'button', { name: 'Elements options' } ).click();
await page
.getByRole( 'menuitemcheckbox', { name: 'Show Link' } )
diff --git a/test/e2e/specs/editor/various/content-only-lock.spec.js b/test/e2e/specs/editor/various/content-only-lock.spec.js
index 20ed07a65bb655..81d8a8b7fcef9a 100644
--- a/test/e2e/specs/editor/various/content-only-lock.spec.js
+++ b/test/e2e/specs/editor/various/content-only-lock.spec.js
@@ -118,7 +118,7 @@ test.describe( 'Content-only lock', () => {
.first()
.click();
await expect(
- page.locator( '.color-block-support-panel' )
+ page.locator( '.typography-block-support-panel' )
).toBeAttached();
await editor.clickBlockOptionsMenuItem( 'Delete' );
// Click "Exit pattern" button to exit edit mode
@@ -133,7 +133,7 @@ test.describe( 'Content-only lock', () => {
.click();
// Block is content locked again, simple styles like color cannot be changed.
await expect(
- page.locator( '.color-block-support-panel' )
+ page.locator( '.typography-block-support-panel' )
).not.toBeAttached();
} );
@@ -180,7 +180,7 @@ test.describe( 'Content-only lock', () => {
.first()
.click();
await expect(
- editorSettings.getByRole( 'heading', { name: 'Color' } )
+ editorSettings.getByRole( 'heading', { name: 'Background' } )
).toBeVisible();
await expect(
editorSettings.getByRole( 'heading', { name: 'Typography' } )
@@ -203,7 +203,7 @@ test.describe( 'Content-only lock', () => {
.click();
// Block is content locked again — style panels are hidden.
await expect(
- editorSettings.getByRole( 'heading', { name: 'Color' } )
+ editorSettings.getByRole( 'heading', { name: 'Background' } )
).toBeHidden();
await expect(
editorSettings.getByRole( 'heading', { name: 'Typography' } )
@@ -264,7 +264,7 @@ test.describe( 'Content-only lock', () => {
// Verify Block is not content locked
// Styles can be changed and nested blocks can be removed
await expect(
- page.locator( '.color-block-support-panel' )
+ page.locator( '.typography-block-support-panel' )
).toBeAttached();
await editor.clickBlockOptionsMenuItem( 'Delete' );
// Select an outside block to exit edit mode
@@ -279,7 +279,7 @@ test.describe( 'Content-only lock', () => {
// Block is content locked again simple styles like position can not be changed.
await expect(
- page.locator( '.color-block-support-panel' )
+ page.locator( '.typography-block-support-panel' )
).not.toBeAttached();
} );
diff --git a/test/e2e/specs/editor/various/contrast-checker.spec.js b/test/e2e/specs/editor/various/contrast-checker.spec.js
index 3a3f49b4e99923..c879e553d9bd96 100644
--- a/test/e2e/specs/editor/various/contrast-checker.spec.js
+++ b/test/e2e/specs/editor/various/contrast-checker.spec.js
@@ -3,79 +3,99 @@
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
-const WARNING_TEXT = 'This color combination may be hard for people to read';
+// Per-context warning messages rendered inside the color popover's notice.
+const TEXT_CONTRAST_WARNING =
+ 'This color has poor contrast against the background.';
+const BACKGROUND_CONTRAST_WARNING = 'This color combination has poor contrast.';
+const LINK_CONTRAST_WARNING =
+ 'This link color has poor contrast against the background.';
+
+// Selector for the icon-only "Low contrast" warning shown on a color
+// control's toggle when its selection has insufficient contrast. It is the
+// at-a-glance panel-level indicator (an icon button whose accessible name and
+// tooltip are "Low contrast"); the full warning message is rendered inside the
+// color popover.
+const WARNING_SELECTOR =
+ '.block-editor-panel-color-gradient-settings__contrast-warning';
+// Selector for the full warning notice rendered within the color popover.
+const POPOVER_NOTICE_SELECTOR =
+ '.block-editor-panel-color-gradient-settings__contrast-notice';
test.describe( 'Contrast Checker', () => {
test.beforeEach( async ( { admin } ) => {
await admin.createNewPost();
} );
- test( 'should show warning for insufficient contrast', async ( {
+ test( 'should show warning in both the Typography and Background panels for insufficient contrast', async ( {
editor,
page,
} ) => {
await editor.openDocumentSettingsSidebar();
- const lowContrastWarning = page.locator(
- '.block-editor-contrast-checker'
- );
-
- await test.step( 'Check black text on black background', async () => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'Black text on Black background' },
- } );
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: { content: 'Black text on Black background' },
+ } );
- const editorSettings = page.getByRole( 'region', {
- name: 'Editor settings',
- } );
+ const editorSettings = page.getByRole( 'region', {
+ name: 'Editor settings',
+ } );
- const textButton = editorSettings.getByRole( 'button', {
- name: 'Text',
+ const typographyPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
} );
- const backgroundButton = editorSettings.getByRole( 'button', {
- name: 'Background',
+ const backgroundPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
} );
- await expect( textButton ).toBeVisible();
- await textButton.click();
- await page.getByRole( 'option', { name: 'Black' } ).click();
-
- // Close the popover by clicking outside before opening background.
- await textButton.click();
- await backgroundButton.click();
- await page.getByRole( 'option', { name: 'Black' } ).click();
-
- // Close the popover to ensure colors are fully applied.
- await backgroundButton.click();
-
- await expect( lowContrastWarning ).toBeVisible();
- await expect( lowContrastWarning ).toContainText( WARNING_TEXT );
+ const textButton = typographyPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
+ } );
+ const backgroundButton = backgroundPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
} );
- await test.step( 'Check white text on default background', async () => {
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: { content: 'White text on Default background' },
- } );
+ // The icon-only "Low contrast" warning is shown on the affected color
+ // control in each panel, visible without opening the popovers.
+ const typographyWarning = typographyPanel.locator( WARNING_SELECTOR );
+ const backgroundWarning = backgroundPanel.locator( WARNING_SELECTOR );
- const editorSettings = page.getByRole( 'region', {
- name: 'Editor settings',
- } );
+ // Set text color to black.
+ await expect( textButton ).toBeVisible();
+ await textButton.click();
+ await page.getByRole( 'option', { name: 'Black' } ).click();
+ // Close the text color popover before opening background.
+ await textButton.click();
- const textButton = editorSettings.getByRole( 'button', {
- name: 'Text',
- } );
- await expect( textButton ).toBeVisible();
- await textButton.click();
- await page.getByRole( 'option', { name: 'White' } ).click();
+ // Open background color popover and set to black.
+ await backgroundButton.click();
+ await page.getByRole( 'option', { name: 'Black' } ).click();
+ // Close the background color popover.
+ await backgroundButton.click();
- // Close the popover to ensure colors are fully applied.
- await textButton.click();
+ // The warning should appear on both color controls even with the
+ // popovers closed, exposing its "Low contrast" accessible name.
+ await expect( typographyWarning ).toBeVisible();
+ await expect( backgroundWarning ).toBeVisible();
+ await expect( typographyWarning ).toHaveAccessibleName(
+ 'Low contrast'
+ );
+ await expect( backgroundWarning ).toHaveAccessibleName(
+ 'Low contrast'
+ );
- await expect( lowContrastWarning ).toBeVisible();
- await expect( lowContrastWarning ).toContainText( WARNING_TEXT );
- } );
+ // The full warning message is shown inside the color popover.
+ await textButton.click();
+ await expect( page.locator( POPOVER_NOTICE_SELECTOR ) ).toContainText(
+ TEXT_CONTRAST_WARNING
+ );
+ await textButton.click();
} );
test( 'should not show warning for sufficient contrast', async ( {
@@ -84,10 +104,6 @@ test.describe( 'Contrast Checker', () => {
} ) => {
await editor.openDocumentSettingsSidebar();
- const lowContrastWarning = page.locator(
- '.block-editor-contrast-checker'
- );
-
await editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: 'Black text on White background' },
@@ -97,25 +113,42 @@ test.describe( 'Contrast Checker', () => {
name: 'Editor settings',
} );
- const textButton = editorSettings.getByRole( 'button', {
- name: 'Text',
+ const typographyPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } );
+ const backgroundPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } );
+
+ const textButton = typographyPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
} );
- const backgroundButton = editorSettings.getByRole( 'button', {
- name: 'Background',
+ const backgroundButton = backgroundPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
} );
+
+ const typographyWarning = typographyPanel.locator( WARNING_SELECTOR );
+ const backgroundWarning = backgroundPanel.locator( WARNING_SELECTOR );
+
await expect( textButton ).toBeVisible();
await textButton.click();
await page.getByRole( 'option', { name: 'Black' } ).click();
- // Close the popover before opening background.
+ // Close the text color popover before opening background.
await textButton.click();
await backgroundButton.click();
await page.getByRole( 'option', { name: 'White' } ).click();
-
- // Close the popover to ensure colors are fully applied
await backgroundButton.click();
- await expect( lowContrastWarning ).toBeHidden();
+ // No warning should appear on either control — contrast is sufficient.
+ await expect( typographyWarning ).toBeHidden();
+ await expect( backgroundWarning ).toBeHidden();
} );
test( 'should hide warning when contrast is fixed', async ( {
@@ -124,10 +157,6 @@ test.describe( 'Contrast Checker', () => {
} ) => {
await editor.openDocumentSettingsSidebar();
- const lowContrastWarning = page.locator(
- '.block-editor-contrast-checker'
- );
-
await editor.insertBlock( {
name: 'core/paragraph',
attributes: { content: 'Text with poor contrast' },
@@ -137,96 +166,117 @@ test.describe( 'Contrast Checker', () => {
name: 'Editor settings',
} );
- // Set poor contrast: black text on black background
- const textButton = editorSettings.getByRole( 'button', {
- name: 'Text',
+ const typographyPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } );
+ const backgroundPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } );
+
+ const textButton = typographyPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
} );
- const backgroundButton = editorSettings.getByRole( 'button', {
- name: 'Background',
+ const backgroundButton = backgroundPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
} );
+
+ const typographyWarning = typographyPanel.locator( WARNING_SELECTOR );
+ const backgroundWarning = backgroundPanel.locator( WARNING_SELECTOR );
+
+ // Set poor contrast: black text on black background.
await expect( textButton ).toBeVisible();
await textButton.click();
await page.getByRole( 'option', { name: 'Black' } ).click();
-
await textButton.click();
+
await backgroundButton.click();
await page.getByRole( 'option', { name: 'Black' } ).click();
- await backgroundButton.click();
- // Verify warning appears
- await expect( lowContrastWarning ).toBeVisible();
+ // Verify the warning appears on both color controls.
+ await expect( typographyWarning ).toBeVisible();
+ await expect( backgroundWarning ).toBeVisible();
- // Fix contrast: change background to white
- await backgroundButton.click();
+ // Fix contrast: change background to white while popover is still open.
await page.getByRole( 'option', { name: 'White' } ).click();
- await backgroundButton.click();
- // Verify warning disappears
- await expect( lowContrastWarning ).toBeHidden();
+ // Verify the warning disappears once contrast is sufficient.
+ await expect( typographyWarning ).toBeHidden();
+ await expect( backgroundWarning ).toBeHidden();
+
+ await backgroundButton.click();
} );
- test( 'should show warning for insufficient link color contrast', async ( {
+ test( 'should show warning for insufficient contrast on buttons', async ( {
editor,
page,
} ) => {
await editor.openDocumentSettingsSidebar();
- const lowContrastWarning = page.locator(
- '.block-editor-contrast-checker'
- );
-
- // Insert paragraph with a link
- await editor.insertBlock( {
- name: 'core/paragraph',
- attributes: {
- content:
- 'Link text in paragraph',
- },
- } );
+ // Insert a button block.
+ await editor.insertBlock( { name: 'core/buttons' } );
+ await page.keyboard.type( 'Button text' );
const editorSettings = page.getByRole( 'region', {
name: 'Editor settings',
} );
- // Set background to black first
- const backgroundButton = editorSettings.getByRole( 'button', {
- name: 'Background',
+ const typographyPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } );
+ const backgroundPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } );
+
+ const typographyWarning = typographyPanel.locator( WARNING_SELECTOR );
+ const backgroundWarning = backgroundPanel.locator( WARNING_SELECTOR );
+
+ const textButton = typographyPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
+ } );
+ await expect( textButton ).toBeVisible();
+ await textButton.click();
+ await page.getByRole( 'option', { name: 'Black' } ).click();
+ await textButton.click();
+
+ // Set background to black (poor contrast with black text).
+ const backgroundButton = backgroundPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
} );
await backgroundButton.click();
await page.getByRole( 'option', { name: 'Black' } ).click();
await backgroundButton.click();
- // Try to find and set link color to black (poor contrast with black background)
- // The link color control might be in a collapsible panel or not visible by default
- const linkButton = editorSettings.getByRole( 'button', {
- name: 'Link',
- } );
- const linkButtonCount = await linkButton.count();
-
- if ( linkButtonCount > 0 ) {
- await linkButton.click();
- await page.getByRole( 'option', { name: 'Black' } ).click();
- await linkButton.click();
-
- // Verify warning appears for link color contrast
- await expect( lowContrastWarning ).toBeVisible();
- await expect( lowContrastWarning ).toContainText( WARNING_TEXT );
- }
- // Note: If link color control is not available, the test will pass
- // as the contrast checker only checks link colors when they are set
+ // Verify the warning appears on both color controls.
+ await expect( typographyWarning ).toBeVisible();
+ await expect( backgroundWarning ).toBeVisible();
+
+ // The full warning message is shown inside the color popover.
+ await backgroundButton.click();
+ await expect( page.locator( POPOVER_NOTICE_SELECTOR ) ).toContainText(
+ BACKGROUND_CONTRAST_WARNING
+ );
+ await backgroundButton.click();
} );
- test( 'should show warning for insufficient contrast on buttons', async ( {
+ test( 'should not show warning for sufficient contrast on buttons', async ( {
editor,
page,
} ) => {
await editor.openDocumentSettingsSidebar();
- const lowContrastWarning = page.locator(
- '.block-editor-contrast-checker'
- );
-
- // Insert a button block
+ // Insert a button block.
await editor.insertBlock( { name: 'core/buttons' } );
await page.keyboard.type( 'Button text' );
@@ -234,64 +284,116 @@ test.describe( 'Contrast Checker', () => {
name: 'Editor settings',
} );
- // Set text color to black
- const textButton = editorSettings.getByRole( 'button', {
- name: 'Text',
+ const typographyPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } );
+ const backgroundPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } );
+
+ const typographyWarning = typographyPanel.locator( WARNING_SELECTOR );
+ const backgroundWarning = backgroundPanel.locator( WARNING_SELECTOR );
+
+ const textButton = typographyPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
} );
await expect( textButton ).toBeVisible();
await textButton.click();
await page.getByRole( 'option', { name: 'Black' } ).click();
await textButton.click();
- // Set background to black (poor contrast with black text)
- const backgroundButton = editorSettings.getByRole( 'button', {
- name: 'Background',
+ // Set background to white (good contrast with black text).
+ const backgroundButton = backgroundPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
} );
await backgroundButton.click();
- await page.getByRole( 'option', { name: 'Black' } ).click();
+ await page.getByRole( 'option', { name: 'White' } ).click();
await backgroundButton.click();
- // Verify warning appears for button contrast
- await expect( lowContrastWarning ).toBeVisible();
- await expect( lowContrastWarning ).toContainText( WARNING_TEXT );
+ // No warning should appear on either control — contrast is sufficient.
+ await expect( typographyWarning ).toBeHidden();
+ await expect( backgroundWarning ).toBeHidden();
} );
- test( 'should not show warning for sufficient contrast on buttons', async ( {
+ test( 'should show warning for insufficient link color contrast in the Elements panel', async ( {
editor,
page,
} ) => {
await editor.openDocumentSettingsSidebar();
- const lowContrastWarning = page.locator(
- '.block-editor-contrast-checker'
- );
-
- // Insert a button block
- await editor.insertBlock( { name: 'core/buttons' } );
- await page.keyboard.type( 'Button text' );
+ // A paragraph containing a link exercises the Elements-panel Link
+ // control, whose link-only contrast check (against the background) is
+ // not covered by the Typography or Background panels. The rendered
+ // `` is required for the contrast check to read a link color.
+ await editor.insertBlock( {
+ name: 'core/paragraph',
+ attributes: {
+ content:
+ 'Text with a link .',
+ },
+ } );
const editorSettings = page.getByRole( 'region', {
name: 'Editor settings',
} );
+ const elementsPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Elements' } ),
+ } );
+ const backgroundPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } );
- // Set text color to black
- const textButton = editorSettings.getByRole( 'button', {
- name: 'Text',
+ const linkWarning = elementsPanel.locator( WARNING_SELECTOR );
+
+ // The Link control is hidden by default; enable it via the Elements
+ // panel options menu.
+ await elementsPanel
+ .getByRole( 'button', { name: 'Elements options' } )
+ .click();
+ await page
+ .getByRole( 'menuitemcheckbox', { name: 'Show Link' } )
+ .click();
+ await elementsPanel
+ .getByRole( 'button', { name: 'Elements options' } )
+ .click();
+
+ // Set the link color to black.
+ const linkButton = elementsPanel.getByRole( 'button', {
+ name: 'Link',
+ exact: true,
} );
- await expect( textButton ).toBeVisible();
- await textButton.click();
+ await expect( linkButton ).toBeVisible();
+ await linkButton.click();
await page.getByRole( 'option', { name: 'Black' } ).click();
- await textButton.click();
+ await linkButton.click();
- // Set background to white (good contrast with black text)
- const backgroundButton = editorSettings.getByRole( 'button', {
- name: 'Background',
+ // Set the background to black (poor contrast with the black link).
+ const backgroundButton = backgroundPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
} );
await backgroundButton.click();
- await page.getByRole( 'option', { name: 'White' } ).click();
+ await page.getByRole( 'option', { name: 'Black' } ).click();
await backgroundButton.click();
- // Verify no warning appears
- await expect( lowContrastWarning ).toBeHidden();
+ // The icon-only "Low contrast" warning is shown on the Link control.
+ await expect( linkWarning ).toBeVisible();
+
+ // The full, link-specific warning message is shown inside the popover.
+ await linkButton.click();
+ await expect( page.locator( POPOVER_NOTICE_SELECTOR ) ).toContainText(
+ LINK_CONTRAST_WARNING
+ );
+ await linkButton.click();
} );
} );
diff --git a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
index 76c131449d7235..0beba7364db571 100644
--- a/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
+++ b/test/e2e/specs/editor/various/keep-styles-on-block-transforms.spec.js
@@ -17,8 +17,19 @@ test.describe( 'Keep styles on block transforms', () => {
.locator( 'role=button[name="Add default block"i]' )
.click();
await page.keyboard.type( '## Heading' );
- await page.click( 'role=button[name="Text"i]' );
- await page.click( 'role=option[name="Luminous vivid orange"i]' );
+
+ // Text color now lives in the Typography panel.
+ await page
+ .getByRole( 'region', { name: 'Editor settings' } )
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
+ await page
+ .getByRole( 'option', { name: 'Luminous vivid orange' } )
+ .click();
await page
.getByRole( 'toolbar', { name: 'Block tools' } )
diff --git a/test/e2e/specs/editor/various/section-block-style-panels.spec.js b/test/e2e/specs/editor/various/section-block-style-panels.spec.js
new file mode 100644
index 00000000000000..3a0f07085037d7
--- /dev/null
+++ b/test/e2e/specs/editor/various/section-block-style-panels.spec.js
@@ -0,0 +1,166 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+// A top-level `contentOnly` locked Group is treated as a section block when
+// selected, so it exercises the curated section-block inspector without
+// needing the Site Editor. The non-locked Group is otherwise identical, so the
+// content-only lock is the only variable between the two tests.
+const SECTION_BLOCK = `
+
+`;
+
+const NORMAL_BLOCK = `
+
+`;
+
+test.describe( 'Section block style panels', () => {
+ test.beforeEach( async ( { admin } ) => {
+ await admin.createNewPost();
+ } );
+
+ test( 'a section block exposes curated Typography (text color), Background (color/gradient, no image) and Elements panels, each once', async ( {
+ editor,
+ page,
+ pageUtils,
+ } ) => {
+ // Insert the section block via the code editor.
+ await pageUtils.pressKeys( 'secondary+M' );
+ await page
+ .getByPlaceholder( 'Start writing with text or HTML' )
+ .fill( SECTION_BLOCK );
+ await pageUtils.pressKeys( 'secondary+M' );
+
+ await editor.openDocumentSettingsSidebar();
+
+ // Select the section (contentOnly Group) block.
+ await editor.canvas
+ .getByRole( 'document', { name: 'Block: Group' } )
+ .click();
+
+ const editorSettings = page.getByRole( 'region', {
+ name: 'Editor settings',
+ } );
+ await editorSettings.getByRole( 'tab', { name: 'Styles' } ).click();
+
+ const typographyPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Typography' } ),
+ } );
+ const backgroundPanel = editorSettings
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } );
+
+ // The three curated panels are present, each exactly once (guards
+ // against duplication).
+ await expect(
+ editorSettings.getByRole( 'heading', {
+ name: 'Typography',
+ exact: true,
+ } )
+ ).toHaveCount( 1 );
+ await expect(
+ editorSettings.getByRole( 'heading', {
+ name: 'Background',
+ exact: true,
+ } )
+ ).toHaveCount( 1 );
+ await expect(
+ editorSettings.getByRole( 'heading', {
+ name: 'Elements',
+ exact: true,
+ } )
+ ).toHaveCount( 1 );
+
+ // The Typography panel exposes only the text color control — none of
+ // the font controls (size/family/etc.) leak into a section block, so
+ // the font-size control is absent from the whole Styles tab.
+ await expect(
+ typographyPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
+ } )
+ ).toBeVisible();
+ await expect(
+ editorSettings.getByRole( 'group', { name: 'Font size' } )
+ ).toHaveCount( 0 );
+
+ // The Background panel exposes color/gradient but not the background
+ // image control.
+ await expect(
+ backgroundPanel.getByRole( 'button', {
+ name: 'Color',
+ exact: true,
+ } )
+ ).toBeVisible();
+ await expect(
+ backgroundPanel.getByRole( 'button', {
+ name: 'Image',
+ exact: true,
+ } )
+ ).toHaveCount( 0 );
+
+ // The Typography color control writes to the section block, proving the
+ // direct-rendered panel's round-trip works end to end (not just that it
+ // renders).
+ await typographyPanel
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
+ await page.getByRole( 'option', { name: 'Black' } ).click();
+ await expect
+ .poll( async () => {
+ const [ block ] = await editor.getBlocks();
+ return (
+ block.attributes.textColor ||
+ block.attributes.style?.color?.text
+ );
+ } )
+ .toBeTruthy();
+ } );
+
+ test( 'a normal (non-section) block still shows the full Typography panel', async ( {
+ editor,
+ page,
+ pageUtils,
+ } ) => {
+ await pageUtils.pressKeys( 'secondary+M' );
+ await page
+ .getByPlaceholder( 'Start writing with text or HTML' )
+ .fill( NORMAL_BLOCK );
+ await pageUtils.pressKeys( 'secondary+M' );
+
+ await editor.openDocumentSettingsSidebar();
+
+ // Select the Group (a normal, non-section block). `selectBlocks`
+ // targets the Group itself rather than click-through to its content.
+ await editor.selectBlocks(
+ editor.canvas.getByRole( 'document', { name: 'Block: Group' } )
+ );
+
+ const editorSettings = page.getByRole( 'region', {
+ name: 'Editor settings',
+ } );
+
+ // A normal (non-section) block renders the single-column block
+ // inspector, where the full Typography panel — including the font
+ // controls — is shown directly. The section-block curation must not
+ // strip typography from regular blocks.
+ await expect(
+ editorSettings.getByRole( 'heading', {
+ name: 'Typography',
+ exact: true,
+ } )
+ ).toBeVisible();
+ await expect(
+ editorSettings.getByRole( 'group', { name: 'Font size' } )
+ ).toBeVisible();
+ } );
+} );
diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js
index dea17a9183f36f..ede3aab0510679 100644
--- a/test/e2e/specs/site-editor/block-style-variations.spec.js
+++ b/test/e2e/specs/site-editor/block-style-variations.spec.js
@@ -61,6 +61,9 @@ test.describe( 'Block Style Variations', () => {
} );
test.afterAll( async ( { requestUtils } ) => {
+ // Reset the global styles saved by these tests so they don't leak
+ // into other specs that share this theme's global styles.
+ await requestUtils.resetThemeGlobalStyles();
await Promise.all( [
requestUtils.activateTheme( 'twentytwentyone' ),
requestUtils.deleteAllPages(),
diff --git a/test/e2e/specs/site-editor/global-styles-button-states.spec.js b/test/e2e/specs/site-editor/global-styles-button-states.spec.js
index 9f9a7a7108ab45..ebaaef099c983f 100644
--- a/test/e2e/specs/site-editor/global-styles-button-states.spec.js
+++ b/test/e2e/specs/site-editor/global-styles-button-states.spec.js
@@ -52,7 +52,14 @@ test.describe( 'Global Styles - Button States', () => {
.getByRole( 'menuitem', { name: 'Hover', exact: true } )
.click();
- await page.getByRole( 'button', { name: 'Background' } ).click();
+ await page
+ .getByRole( 'region', { name: 'Editor settings' } )
+ .locator( '.components-tools-panel' )
+ .filter( {
+ has: page.getByRole( 'heading', { name: 'Background' } ),
+ } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
+ .click();
await page
.getByRole( 'option', { name: 'Luminous vivid orange' } )
diff --git a/test/e2e/specs/site-editor/style-variations.spec.js b/test/e2e/specs/site-editor/style-variations.spec.js
index fa16194004ef48..cbf9ed456393fb 100644
--- a/test/e2e/specs/site-editor/style-variations.spec.js
+++ b/test/e2e/specs/site-editor/style-variations.spec.js
@@ -14,6 +14,9 @@ test.describe( 'Global styles variations', () => {
await requestUtils.activateTheme(
'gutenberg-test-themes/style-variations'
);
+ // Ensure a clean slate so the "Default" variation is detected as active,
+ // independent of any global styles a prior spec saved for this theme.
+ await requestUtils.resetThemeGlobalStyles();
await requestUtils.deleteAllTemplates( 'wp_template' );
await requestUtils.deleteAllTemplates( 'wp_template_part' );
} );
@@ -76,24 +79,24 @@ test.describe( 'Global styles variations', () => {
await siteEditorStyleVariations.browseStyles();
await page.click( 'role=button[name="pink"i]' );
await page.click( 'role=button[name="Back"i]' );
- await page.click( 'role=button[name="Colors"i]' );
+ await page.click( 'role=button[name="Background styles"i]' );
await expect(
page.locator(
- 'role=button[name="Background"i] >> .component-color-indicator'
+ 'role=button[name="Color"i] >> .component-color-indicator'
)
).toHaveCSS( 'background', /rgb\(202, 105, 211\)/ );
+ await page.click( 'role=button[name="Back"i]' );
+ await page.click( 'role=button[name="Typography"i]' );
+ await page.click( 'role=button[name="Text"i]' );
+
await expect(
page.locator(
- 'role=button[name="Text"i] >> .component-color-indicator'
+ 'role=button[name="Color"i] >> .component-color-indicator'
)
).toHaveCSS( 'background', /rgb\(74, 7, 74\)/ );
- await page.click( 'role=button[name="Back"i]' );
- await page.click( 'role=button[name="Typography"i]' );
- await page.click( 'role=button[name="Text"i]' );
-
await expect(
page.locator( 'role=radio[name="Medium"i]' )
).toHaveAttribute( 'aria-checked', 'true' );
@@ -112,24 +115,24 @@ test.describe( 'Global styles variations', () => {
await siteEditorStyleVariations.browseStyles();
await page.click( 'role=button[name="yellow"i]' );
await page.click( 'role=button[name="Back"i]' );
- await page.click( 'role=button[name="Colors"i]' );
+ await page.click( 'role=button[name="Background styles"i]' );
await expect(
page.locator(
- 'role=button[name="Background"i] >> .component-color-indicator'
+ 'role=button[name="Color"i] >> .component-color-indicator'
)
).toHaveCSS( 'background', /rgb\(255, 239, 11\)/ );
+ await page.click( 'role=button[name="Back"i]' );
+ await page.click( 'role=button[name="Typography"i]' );
+ await page.click( 'role=button[name="Text"i]' );
+
await expect(
page.locator(
- 'role=button[name="Text"i] >> .component-color-indicator'
+ 'role=button[name="Color"i] >> .component-color-indicator'
)
).toHaveCSS( 'background', /rgb\(25, 25, 17\)/ );
- await page.click( 'role=button[name="Back"i]' );
- await page.click( 'role=button[name="Typography"i]' );
- await page.click( 'role=button[name="Text"i]' );
-
await expect(
page.locator( 'role=spinbutton[name="Font size"i]' )
).toHaveValue( '15' );
diff --git a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
index 07bb8c3b527f4a..459bbfed21fb1a 100644
--- a/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
+++ b/test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
@@ -76,9 +76,9 @@ test.describe( 'Style Revisions', () => {
} ) => {
await editor.canvas.locator( 'body' ).click();
await userGlobalStylesRevisions.openStylesPanel();
- await page.getByRole( 'button', { name: 'Colors' } ).click();
+ await page.getByRole( 'button', { name: 'Background styles' } ).click();
await page
- .getByRole( 'button', { name: 'Background', exact: true } )
+ .getByRole( 'button', { name: 'Color', exact: true } )
.click();
await page
.getByRole( 'option', { name: 'Luminous vivid amber' } )
diff --git a/test/integration/fixtures/blocks/core__form__deprecated-v1-preset-value.serialized.html b/test/integration/fixtures/blocks/core__form__deprecated-v1-preset-value.serialized.html
index bfc9e6a8af4096..8ffa0ffb78f1a0 100644
--- a/test/integration/fixtures/blocks/core__form__deprecated-v1-preset-value.serialized.html
+++ b/test/integration/fixtures/blocks/core__form__deprecated-v1-preset-value.serialized.html
@@ -1,3 +1,3 @@
-
+
diff --git a/tools/eslint/suppressions.json b/tools/eslint/suppressions.json
index 0cbd16fdae0f32..598244faf41ed3 100644
--- a/tools/eslint/suppressions.json
+++ b/tools/eslint/suppressions.json
@@ -132,7 +132,7 @@
"count": 2
}
},
- "packages/block-editor/src/components/global-styles/color-panel.js": {
+ "packages/block-editor/src/components/global-styles/color-gradient-dropdown-item.js": {
"@wordpress/use-recommended-components": {
"count": 3
}