@wordpress/block-editor 11.6.0 → 11.8.0

package/src/hooks/color.js

@@ -8,8 +8,7 @@ import classnames from 'classnames';
  */
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { useRef, useEffect, useMemo, Platform } from '@wordpress/element';
+import { useMemo, Platform, useCallback } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
@@ -17,22 +16,22 @@ import { createHigherOrderComponent } from '@wordpress/compose';
  */
 import {
 	getColorClassName,
-	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 } from '../components/colors';
-import {
-	__experimentalGetGradientClass,
-	getGradientValueBySlug,
-	getGradientSlugByValue,
-} from '../components/gradients';
+import { __experimentalGetGradientClass } from '../components/gradients';
 import {
 	cleanEmptyObject,
 	transformStyles,
-	immutableSet,
 	shouldSkipSerialization,
+	useBlockSettings,
 } from './utils';
-import ColorPanel from './color-panel';
 import useSetting from '../components/use-setting';
+import InspectorControls from '../components/inspector-controls';
+import {
+	useHasColorPanel,
+	default as StylesColorPanel,
+} from '../components/global-styles/color-panel';
+import BlockColorContrastChecker from './contrast-checker';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
@@ -83,60 +82,6 @@ const hasTextColorSupport = ( blockType ) => {
 	return colorSupport && colorSupport.text !== false;
 };
 
-/**
- * Clears a single color property from a style object.
- *
- * @param {Array}  path  Path to color property to clear within styles object.
- * @param {Object} style Block attributes style object.
- * @return {Object} Styles with the color property omitted.
- */
-const clearColorFromStyles = ( path, style ) =>
-	cleanEmptyObject( immutableSet( style, path, undefined ) );
-
-/**
- * Clears text color related properties from supplied attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Update block attributes with text color properties omitted.
- */
-const resetAllTextFilter = ( attributes ) => ( {
-	textColor: undefined,
-	style: clearColorFromStyles( [ 'color', 'text' ], attributes.style ),
-} );
-
-/**
- * Clears link color related properties from supplied attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Update block attributes with link color properties omitted.
- */
-const resetAllLinkFilter = ( attributes ) => ( {
-	style: clearColorFromStyles(
-		[ 'elements', 'link', 'color', 'text' ],
-		attributes.style
-	),
-} );
-
-/**
- * Clears all background color related properties including gradients from
- * supplied block attributes.
- *
- * @param {Object} attributes Block attributes.
- * @return {Object} Block attributes with background and gradient omitted.
- */
-const clearBackgroundAndGradient = ( attributes ) => ( {
-	backgroundColor: undefined,
-	gradient: undefined,
-	style: {
-		...attributes.style,
-		color: {
-			...attributes.style?.color,
-			background: undefined,
-			gradient: undefined,
-		},
-	},
-} );
-
 /**
  * Filters registered block settings, extending attributes to include
  * `backgroundColor` and `textColor` attribute.
@@ -273,194 +218,112 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
-const getLinkColorFromAttributeValue = ( colors, value ) => {
-	const attributeParsed = /var:preset\|color\|(.+)/.exec( value );
-	if ( attributeParsed && attributeParsed[ 1 ] ) {
-		return getColorObjectByAttributeValues( colors, attributeParsed[ 1 ] )
-			.color;
-	}
-	return value;
-};
-
-/**
- * Inspector control panel containing the color related configuration
- *
- * @param {Object} props
- *
- * @return {WPElement} Color edit element.
- */
-export function ColorEdit( props ) {
-	const { name: blockName, attributes } = props;
-	// Some color settings have a special handling for deprecated flags in `useSetting`,
-	// so we can't unwrap them by doing const { ... } = useSetting('color')
-	// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-	const userPalette = useSetting( 'color.palette.custom' );
-	const themePalette = useSetting( 'color.palette.theme' );
-	const defaultPalette = useSetting( 'color.palette.default' );
-	const allSolids = useMemo(
-		() => [
-			...( userPalette || [] ),
-			...( themePalette || [] ),
-			...( defaultPalette || [] ),
-		],
-		[ userPalette, themePalette, defaultPalette ]
-	);
-	const userGradientPalette = useSetting( 'color.gradients.custom' );
-	const themeGradientPalette = useSetting( 'color.gradients.theme' );
-	const defaultGradientPalette = useSetting( 'color.gradients.default' );
-	const allGradients = useMemo(
-		() => [
-			...( userGradientPalette || [] ),
-			...( themeGradientPalette || [] ),
-			...( defaultGradientPalette || [] ),
-		],
-		[ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
-	);
-	const areCustomSolidsEnabled = useSetting( 'color.custom' );
-	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
-	const isBackgroundEnabled = useSetting( 'color.background' );
-	const isLinkEnabled = useSetting( 'color.link' );
-	const isTextEnabled = useSetting( 'color.text' );
-
-	const solidsEnabled =
-		areCustomSolidsEnabled || ! themePalette || themePalette?.length > 0;
-
-	const gradientsEnabled =
-		areCustomGradientsEnabled ||
-		! themeGradientPalette ||
-		themeGradientPalette?.length > 0;
-
-	// Shouldn't be needed but right now the ColorGradientsPanel
-	// can trigger both onChangeColor and onChangeBackground
-	// synchronously causing our two callbacks to override changes
-	// from each other.
-	const localAttributes = useRef( attributes );
-	useEffect( () => {
-		localAttributes.current = attributes;
-	}, [ attributes ] );
-
-	if ( ! hasColorSupport( blockName ) ) {
-		return null;
-	}
-
-	const hasLinkColor =
-		hasLinkColorSupport( blockName ) && isLinkEnabled && solidsEnabled;
-	const hasTextColor =
-		hasTextColorSupport( blockName ) && isTextEnabled && solidsEnabled;
-	const hasBackgroundColor =
-		hasBackgroundColorSupport( blockName ) &&
-		isBackgroundEnabled &&
-		solidsEnabled;
-	const hasGradientColor =
-		hasGradientSupport( blockName ) && gradientsEnabled;
-
-	if (
-		! hasLinkColor &&
-		! hasTextColor &&
-		! hasBackgroundColor &&
-		! hasGradientColor
-	) {
-		return null;
-	}
+function styleToAttributes( style ) {
+	const textColorValue = style?.color?.text;
+	const textColorSlug = textColorValue?.startsWith( 'var:preset|color|' )
+		? textColorValue.substring( 'var:preset|color|'.length )
+		: undefined;
+	const backgroundColorValue = style?.color?.background;
+	const backgroundColorSlug = backgroundColorValue?.startsWith(
+		'var:preset|color|'
+	)
+		? backgroundColorValue.substring( 'var:preset|color|'.length )
+		: undefined;
+	const gradientValue = style?.color?.gradient;
+	const gradientSlug = gradientValue?.startsWith( 'var:preset|gradient|' )
+		? gradientValue.substring( 'var:preset|gradient|'.length )
+		: undefined;
+	const updatedStyle = { ...style };
+	updatedStyle.color = {
+		...updatedStyle.color,
+		text: textColorSlug ? undefined : textColorValue,
+		background: backgroundColorSlug ? undefined : backgroundColorValue,
+		gradient: gradientSlug ? undefined : gradientValue,
+	};
+	return {
+		style: cleanEmptyObject( updatedStyle ),
+		textColor: textColorSlug,
+		backgroundColor: backgroundColorSlug,
+		gradient: gradientSlug,
+	};
+}
 
-	const { style, textColor, backgroundColor, gradient } = attributes;
-	let gradientValue;
-	if ( hasGradientColor && gradient ) {
-		gradientValue = getGradientValueBySlug( allGradients, gradient );
-	} else if ( hasGradientColor ) {
-		gradientValue = style?.color?.gradient;
-	}
+function attributesToStyle( attributes ) {
+	return {
+		...attributes.style,
+		color: {
+			...attributes.style?.color,
+			text: attributes.textColor
+				? 'var:preset|color|' + attributes.textColor
+				: attributes.style?.color?.text,
+			background: attributes.backgroundColor
+				? 'var:preset|color|' + attributes.backgroundColor
+				: attributes.style?.color?.background,
+			gradient: attributes.gradient
+				? 'var:preset|gradient|' + attributes.gradient
+				: attributes.style?.color?.gradient,
+		},
+	};
+}
 
-	const onChangeColor = ( name ) => ( value ) => {
-		const colorObject = getColorObjectByColorValue( allSolids, value );
-		const attributeName = name + 'Color';
-		const newStyle = {
-			...localAttributes.current.style,
-			color: {
-				...localAttributes.current?.style?.color,
-				[ name ]: colorObject?.slug ? undefined : value,
-			},
-		};
+function ColorInspectorControl( { children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const existingStyle = attributesToStyle( attributes );
+			const updatedStyle = resetAllFilter( existingStyle );
+			return {
+				...attributes,
+				...styleToAttributes( updatedStyle ),
+			};
+		},
+		[ resetAllFilter ]
+	);
 
-		const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
-		const newAttributes = {
-			style: cleanEmptyObject( newStyle ),
-			[ attributeName ]: newNamedColor,
-		};
+	return (
+		<InspectorControls
+			group="color"
+			resetAllFilter={ attributesResetAllFilter }
+		>
+			{ children }
+		</InspectorControls>
+	);
+}
 
-		props.setAttributes( newAttributes );
-		localAttributes.current = {
-			...localAttributes.current,
-			...newAttributes,
-		};
-	};
+export function ColorEdit( props ) {
+	const { clientId, name, attributes, setAttributes } = props;
+	const settings = useBlockSettings( name );
+	const isEnabled = useHasColorPanel( settings );
+	const value = useMemo( () => {
+		return attributesToStyle( {
+			style: attributes.style,
+			textColor: attributes.textColor,
+			backgroundColor: attributes.backgroundColor,
+			gradient: attributes.gradient,
+		} );
+	}, [
+		attributes.style,
+		attributes.textColor,
+		attributes.backgroundColor,
+		attributes.gradient,
+	] );
 
-	const onChangeGradient = ( value ) => {
-		const slug = getGradientSlugByValue( allGradients, value );
-		let newAttributes;
-		if ( slug ) {
-			const newStyle = {
-				...localAttributes.current?.style,
-				color: {
-					...localAttributes.current?.style?.color,
-					gradient: undefined,
-				},
-			};
-			newAttributes = {
-				style: cleanEmptyObject( newStyle ),
-				gradient: slug,
-			};
-		} else {
-			const newStyle = {
-				...localAttributes.current?.style,
-				color: {
-					...localAttributes.current?.style?.color,
-					gradient: value,
-				},
-			};
-			newAttributes = {
-				style: cleanEmptyObject( newStyle ),
-				gradient: undefined,
-			};
-		}
-		props.setAttributes( newAttributes );
-		localAttributes.current = {
-			...localAttributes.current,
-			...newAttributes,
-		};
+	const onChange = ( newStyle ) => {
+		setAttributes( styleToAttributes( newStyle ) );
 	};
 
-	const onChangeLinkColor = ( value ) => {
-		const colorObject = getColorObjectByColorValue( allSolids, value );
-		const newLinkColorValue = colorObject?.slug
-			? `var:preset|color|${ colorObject.slug }`
-			: value;
-
-		const newStyle = cleanEmptyObject(
-			immutableSet(
-				localAttributes.current?.style,
-				[ 'elements', 'link', 'color', 'text' ],
-				newLinkColorValue
-			)
-		);
-		props.setAttributes( { style: newStyle } );
-		localAttributes.current = {
-			...localAttributes.current,
-			...{ style: newStyle },
-		};
-	};
+	if ( ! isEnabled ) {
+		return null;
+	}
 
-	const defaultColorControls = getBlockSupport( props.name, [
+	const defaultControls = getBlockSupport( props.name, [
 		COLOR_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
 
 	const enableContrastChecking =
 		Platform.OS === 'web' &&
-		! gradient &&
-		! style?.color?.gradient &&
-		hasBackgroundColor &&
-		( hasLinkColor || hasTextColor ) &&
+		! 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`.
@@ -471,64 +334,25 @@ export function ColorEdit( props ) {
 			] );
 
 	return (
-		<ColorPanel
-			enableContrastChecking={ enableContrastChecking }
-			clientId={ props.clientId }
-			enableAlpha={ true }
-			settings={ [
-				...( hasTextColor
-					? [
-							{
-								label: __( 'Text' ),
-								onColorChange: onChangeColor( 'text' ),
-								colorValue: getColorObjectByAttributeValues(
-									allSolids,
-									textColor,
-									style?.color?.text
-								).color,
-								isShownByDefault: defaultColorControls?.text,
-								resetAllFilter: resetAllTextFilter,
-							},
-					  ]
-					: [] ),
-				...( hasBackgroundColor || hasGradientColor
-					? [
-							{
-								label: __( 'Background' ),
-								onColorChange: hasBackgroundColor
-									? onChangeColor( 'background' )
-									: undefined,
-								colorValue: getColorObjectByAttributeValues(
-									allSolids,
-									backgroundColor,
-									style?.color?.background
-								).color,
-								gradientValue,
-								onGradientChange: hasGradientColor
-									? onChangeGradient
-									: undefined,
-								isShownByDefault:
-									defaultColorControls?.background,
-								resetAllFilter: clearBackgroundAndGradient,
-							},
-					  ]
-					: [] ),
-				...( hasLinkColor
-					? [
-							{
-								label: __( 'Link' ),
-								onColorChange: onChangeLinkColor,
-								colorValue: getLinkColorFromAttributeValue(
-									allSolids,
-									style?.elements?.link?.color?.text
-								),
-								isShownByDefault: defaultColorControls?.link,
-								resetAllFilter: resetAllLinkFilter,
-							},
-					  ]
-					: [] ),
-			] }
-		/>
+		<StylesColorPanel
+			as={ ColorInspectorControl }
+			panelId={ clientId }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+			defaultControls={ defaultControls }
+			enableContrastChecker={
+				false !==
+				getBlockSupport( props.name, [
+					COLOR_SUPPORT_KEY,
+					'enableContrastChecker',
+				] )
+			}
+		>
+			{ enableContrastChecking && (
+				<BlockColorContrastChecker clientId={ clientId } />
+			) }
+		</StylesColorPanel>
 	);
 }
 

package/src/hooks/content-lock-ui.js

@@ -104,9 +104,13 @@ export const withBlockControls = createHigherOrderComponent(
 			return <BlockEdit { ...props } />;
 		}
 
+		const showStopEditingAsBlocks = isEditingAsBlocks && ! isContentLocked;
+		const showStartEditingAsBlocks =
+			! isEditingAsBlocks && isContentLocked && props.isSelected;
+
 		return (
 			<>
-				{ isEditingAsBlocks && ! isContentLocked && (
+				{ showStopEditingAsBlocks && (
 					<>
 						<StopEditingAsBlocksOnOutsideSelect
 							clientId={ props.clientId }
@@ -123,7 +127,7 @@ export const withBlockControls = createHigherOrderComponent(
 						</BlockControls>
 					</>
 				) }
-				{ ! isEditingAsBlocks && isContentLocked && props.isSelected && (
+				{ showStartEditingAsBlocks && (
 					<BlockSettingsMenuControls>
 						{ ( { onClose } ) => (
 							<MenuItem

package/src/hooks/{color-panel.js → contrast-checker.js}

@@ -6,45 +6,23 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import ColorGradientSettingsDropdown from '../components/colors-gradients/dropdown';
 import ContrastChecker from '../components/contrast-checker';
-import InspectorControls from '../components/inspector-controls';
-import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
 }
 
-export default function ColorPanel( {
-	enableAlpha = false,
-	settings,
-	clientId,
-	enableContrastChecking = true,
-} ) {
+export default function BlockColorContrastChecker( { clientId } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
 	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
 	const ref = useBlockRef( clientId );
-	const definedColors = settings.filter( ( setting ) => setting?.colorValue );
 
+	// There are so many things that can change the color of a block
+	// So we perform this check on every render.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => {
-		if ( ! enableContrastChecking ) {
-			return;
-		}
-		if ( ! definedColors.length ) {
-			if ( detectedBackgroundColor ) {
-				setDetectedBackgroundColor();
-			}
-			if ( detectedColor ) {
-				setDetectedColor();
-			}
-			if ( detectedLinkColor ) {
-				setDetectedColor();
-			}
-			return;
-		}
-
 		if ( ! ref.current ) {
 			return;
 		}
@@ -72,26 +50,12 @@ export default function ColorPanel( {
 		setDetectedBackgroundColor( backgroundColor );
 	} );
 
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
-
 	return (
-		<InspectorControls group="color">
-			<ColorGradientSettingsDropdown
-				enableAlpha={ enableAlpha }
-				panelId={ clientId }
-				settings={ settings }
-				__experimentalIsItemGroup={ false }
-				__experimentalIsRenderedInSidebar
-				{ ...colorGradientSettings }
-			/>
-			{ enableContrastChecking && (
-				<ContrastChecker
-					backgroundColor={ detectedBackgroundColor }
-					textColor={ detectedColor }
-					enableAlphaChecker={ enableAlpha }
-					linkColor={ detectedLinkColor }
-				/>
-			) }
-		</InspectorControls>
+		<ContrastChecker
+			backgroundColor={ detectedBackgroundColor }
+			textColor={ detectedColor }
+			enableAlphaChecker
+			linkColor={ detectedLinkColor }
+		/>
 	);
 }

package/src/hooks/dimensions.js

@@ -105,7 +105,6 @@ export function DimensionsPanel( props ) {
 			<StylesDimensionsPanel
 				as={ DimensionsInspectorControl }
 				panelId={ clientId }
-				name={ name }
 				settings={ settings }
 				value={ value }
 				onChange={ onChange }