@wordpress/block-editor 15.21.0 → 15.22.0

package/src/components/global-styles/background-panel.js

@@ -5,21 +5,26 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useCallback, Platform } from '@wordpress/element';
+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,
 };
 
@@ -31,7 +36,7 @@ const DEFAULT_CONTROLS = {
  * @return {boolean}        Whether site settings has activated background panel.
  */
 export function useHasBackgroundControl( settings, feature ) {
-	return Platform.OS === 'web' && settings?.background?.[ feature ];
+	return settings?.background?.[ feature ];
 }
 
 /**
@@ -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 Platform.OS === 'web' && ( 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 && (
 				<ToolsPanelItem
-					className="block-editor-background-panel__item"
+					className="block-editor-color-gradient-item"
 					hasValue={ () => hasBackgroundImageValue( value ) }
 					label={ __( 'Image' ) }
 					onDeselect={ resetBackground }
@@ -254,9 +354,49 @@ export default function BackgroundImagePanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ showBackgroundColorControl && (
+				<ColorGradientDropdownItem
+					label={ __( 'Color' ) }
+					hasValue={ () => 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 && (
-				<ColorPanelDropdown
-					className="block-editor-background-panel__item"
+				<ColorGradientDropdownItem
 					label={ __( 'Gradient' ) }
 					hasValue={ () => hasBackgroundGradientValue( value ) }
 					resetValue={ resetGradient }
@@ -280,6 +420,33 @@ export default function BackgroundImagePanel( {
 					panelId={ panelId }
 				/>
 			) }
+			{ showLegacyColorGradientControl && (
+				<ColorGradientDropdownItem
+					label={ __( 'Gradient' ) }
+					hasValue={ () => 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 }
+				/>
+			) }
 		</Wrapper>
 	);
 }

package/src/components/global-styles/border-panel.js

@@ -105,6 +105,7 @@ export default function BorderPanel( {
 	defaultControls = DEFAULT_CONTROLS,
 } ) {
 	const colors = useColorsPerOrigin( settings );
+	const areCustomSolidsEnabled = settings?.color?.custom;
 	const decodeValue = useCallback(
 		( rawValue ) => getValueFromVariable( { settings }, '', rawValue ),
 		[ settings ]
@@ -270,6 +271,7 @@ export default function BorderPanel( {
 				>
 					<BorderBoxControl
 						colors={ colors }
+						disableCustomColors={ ! areCustomSolidsEnabled }
 						enableAlpha
 						enableStyle={ showBorderStyle }
 						onChange={ onBorderChange }

package/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 (
+		<DropdownContentWrapper paddingSize="none">
+			<div className="block-editor-panel-color-gradient-settings__dropdown-content">
+				{ tabs.length === 1 && (
+					<ColorGradientTab
+						key={ firstTabKey }
+						{ ...firstTab }
+						colorGradientControlSettings={
+							colorGradientControlSettings
+						}
+						contrastWarning={ contrastWarning }
+					/>
+				) }
+				{ tabs.length > 1 && (
+					<Tabs defaultTabId={ defaultTabId }>
+						<Tabs.TabList>
+							{ tabs.map( ( tab ) => (
+								<Tabs.Tab key={ tab.key } tabId={ tab.key }>
+									{ tab.label }
+								</Tabs.Tab>
+							) ) }
+						</Tabs.TabList>
+
+						{ tabs.map( ( tab ) => {
+							const { key: tabKey, ...restTabProps } = tab;
+							return (
+								<Tabs.TabPanel
+									key={ tabKey }
+									tabId={ tabKey }
+									focusable={ false }
+								>
+									<ColorGradientTab
+										key={ tabKey }
+										{ ...restTabProps }
+										colorGradientControlSettings={
+											colorGradientControlSettings
+										}
+										contrastWarning={ contrastWarning }
+									/>
+								</Tabs.TabPanel>
+							);
+						} ) }
+					</Tabs>
+				) }
+			</div>
+		</DropdownContentWrapper>
+	);
+}
+
+const popoverProps = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+};
+
+const LabeledColorIndicators = ( { indicators, label } ) => (
+	<HStack justify="flex-start">
+		<ZStack isLayered={ false } offset={ -8 }>
+			{ indicators.map( ( indicator, index ) => (
+				<Flex key={ index } expanded={ false }>
+					<ColorIndicator colorValue={ indicator } />
+				</Flex>
+			) ) }
+		</ZStack>
+		<FlexItem className="block-editor-panel-color-gradient-settings__color-name">
+			{ label }
+		</FlexItem>
+	</HStack>
+);
+
+function ColorGradientTab( {
+	isGradient,
+	inheritedValue,
+	inheritedSlug,
+	userValue,
+	setValue,
+	colorGradientControlSettings,
+	contrastWarning,
+} ) {
+	return (
+		<ColorGradientControl
+			{ ...colorGradientControlSettings }
+			showTitle={ false }
+			enableAlpha
+			__experimentalIsRenderedInSidebar
+			colorValue={ isGradient ? undefined : inheritedValue }
+			colorSlug={ isGradient ? undefined : inheritedSlug }
+			gradientValue={ isGradient ? inheritedValue : undefined }
+			onColorChange={ isGradient ? undefined : setValue }
+			onGradientChange={ isGradient ? setValue : undefined }
+			clearable={ inheritedValue === userValue }
+			headingLevel={ 3 }
+			noticeProps={
+				! isGradient && contrastWarning
+					? {
+							children: contrastWarning,
+							status: 'warning',
+							spokenMessage: null,
+							className:
+								'block-editor-panel-color-gradient-settings__contrast-notice',
+					  }
+					: undefined
+			}
+		/>
+	);
+}
+
+// Renders a ToolsPanelItem that opens a dropdown containing one or more
+// color/gradient pickers. Shared between the Color, Background, and
+// Typography panels for consistent color-style controls.
+export default function ColorGradientDropdownItem( {
+	label,
+	hasValue,
+	resetValue,
+	isShownByDefault,
+	indicators,
+	tabs,
+	colorGradientControlSettings,
+	panelId,
+	contrastWarning,
+	className = 'block-editor-tools-panel-color-gradient-settings__item',
+} ) {
+	const colorGradientDropdownButtonRef = useRef( undefined );
+	return (
+		<ToolsPanelItem
+			className={ clsx( 'block-editor-color-gradient-item', className ) }
+			hasValue={ hasValue }
+			label={ label }
+			onDeselect={ resetValue }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<Dropdown
+				popoverProps={ popoverProps }
+				className="block-editor-tools-panel-color-gradient-settings__dropdown"
+				renderToggle={ ( { onToggle, isOpen } ) => {
+					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 (
+						<>
+							<Button { ...toggleProps } __next40pxDefaultSize>
+								<LabeledColorIndicators
+									indicators={ indicators }
+									label={ label }
+								/>
+							</Button>
+							{ hasValue() && (
+								<Button
+									__next40pxDefaultSize
+									label={ __( 'Reset' ) }
+									className="block-editor-panel-color-gradient-settings__reset"
+									size="small"
+									icon={ resetIcon }
+									onClick={ () => {
+										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.
+								<Button
+									__next40pxDefaultSize
+									size="small"
+									icon={ cautionIcon }
+									label={ __( 'Low contrast' ) }
+									className="block-editor-panel-color-gradient-settings__contrast-warning"
+									aria-expanded={ isOpen }
+									onClick={ onToggle }
+								/>
+							) }
+						</>
+					);
+				} }
+				renderContent={ () => (
+					<DropdownContent
+						tabs={ tabs }
+						colorGradientControlSettings={
+							colorGradientControlSettings
+						}
+						contrastWarning={ contrastWarning }
+					/>
+				) }
+			/>
+		</ToolsPanelItem>
+	);
+}