@wordpress/block-editor 11.7.0 → 12.0.0

package/src/components/global-styles/README.md

@@ -14,9 +14,7 @@ import { useGlobalStylesReset } from '@wordpress/block-editor';
 function MyComponent() {
 	const [ canReset, reset ] = useGlobalStylesReset();
 
-	return canReset 
-		? <Button onClick={ () => reset() }>Reset</Button> 
-		: null;
+	return canReset ? <Button onClick={ () => reset() }>Reset</Button> : null;
 }
 ```
 
@@ -25,17 +23,25 @@ function MyComponent() {
 A React hook used to retrieve the styles array and settings to provide for block editor instances based on the current global styles.
 
 ```js
-import { useGlobalStylesOutput, BlockEditorProvider, BlockList } from '@wordpress/block-editor';
+import {
+	useGlobalStylesOutput,
+	BlockEditorProvider,
+	BlockList,
+} from '@wordpress/block-editor';
 
 function MyComponent() {
 	const [ styles, settings ] = useGlobalStylesOutput();
 
-	return <BlockEditorProvider settings={{
-		styles,
-		__experimentalFeatures: settings
-	}}>
-		<BlockList />
-	</BlockEditorProvider>
+	return (
+		<BlockEditorProvider
+			settings={ {
+				styles,
+				__experimentalFeatures: settings,
+			} }
+		>
+			<BlockList />
+		</BlockEditorProvider>
+	);
 }
 ```
 
@@ -48,12 +54,16 @@ import { useGlobalStyle } from '@wordpress/block-editor';
 
 function MyComponent() {
 	// Text color for the site root.
-	const [ color, setColor ] = useGlobalStyle( 'color.text' ); 
+	const [ color, setColor ] = useGlobalStyle( 'color.text' );
 
 	// The user modified color for the core paragraph block.
-	const [ pColor, setPColor ] = useGlobalStyle( 'color.text', 'core/paragraph', 'user' ); 
+	const [ pColor, setPColor ] = useGlobalStyle(
+		'color.text',
+		'core/paragraph',
+		'user'
+	);
 
-	return "Something";
+	return 'Something';
 }
 ```
 
@@ -66,12 +76,115 @@ import { useGlobalSetting } from '@wordpress/block-editor';
 
 function MyComponent() {
 	// The theme color palette.
-	const [ colorPalette, setColorPalette ] = useGlobalSetting( 'color.palette.theme' ); 
+	const [ colorPalette, setColorPalette ] = useGlobalSetting(
+		'color.palette.theme'
+	);
 
 	// The theme color palette for the paragraph block, ignoring user changes.
 	// If the palette is not defined for the paragraph block, the root one is returned.
-	const [ pColor, setPColor ] = useGlobalSetting( 'color.palette.theme', 'core/paragraph', 'base' ); 
+	const [ pColor, setPColor ] = useGlobalSetting(
+		'color.palette.theme',
+		'core/paragraph',
+		'base'
+	);
 
-	return "Something";
+	return 'Something';
 }
 ```
+
+## UI Components
+
+The global styles folder also offers a set of reusable UI components. These components follow a strict set of guidelines:
+
+-   They are independent of any context or any store dependency. They only rely on the props passed to them.
+-   They receive a similar set of props:
+
+    -   `value`: The value is a style object that maps closely the format used in `theme.json` and is also very close to the format of the `style` attributes for blocks. There are some differences with the block attributes due to the iteration process and the fact that we need to maintain compatibility with the existing blocks even if they predate the introduction of Global Styles and these UI components. An example value for a style object is:
+
+```js
+{
+	color: {
+		text: 'var:preset|color|blue',
+		background: '#FF0000',
+	},
+	typography: {
+		fontFamily: 'var:preset|font-family|base',
+		fontSize: '10px',
+		lineHeight: 1.5,
+	},
+	spacing: {
+		padding: 'var:preset|spacing|medium',
+	},
+	elements: {
+		link: {
+			color: {
+			text: 'var:preset|color|green',
+			},
+		},
+	},
+}
+```
+
+-   `onChange`: A callback that receives the new value and is called when the user changes the value of the UI component.
+-   `inheritedValue`: The inherited value is a style object that represents the combined value of the style inherited from the parent context in addition to the style applied to the current context. The format is the same as the `value` prop.
+-   `settings`: The settings are the theme.json settings. They are used to provide the UI components with the necessary information to render the UI. An example value for the settings is:
+
+```js
+{
+	color: {
+		palette: {
+			custom: [
+				{
+					slug: 'black',
+					color: '#000000',
+				},
+				{
+					slug: 'white',
+					color: '#FFFFFF',
+				},
+				{
+					slug: 'blue',
+					color: '#0000FF',
+				},
+			]
+		},
+		gradients: {
+			custom: [
+				{
+					slug: 'gradient-1',
+					gradient: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+				},
+				{
+					slug: 'gradient-2',
+					gradient: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+				},
+			]
+		},
+	},
+	typography: {
+		fontSizes: [
+			{
+				slug: 'small',
+				size: '12px',
+			},
+			{
+				slug: 'medium',
+				size: '16px',
+			},
+			{
+				slug: 'large',
+				size: '24px',
+			},
+		],
+	}
+}
+```
+-   `defaultControls`: The default controls are the controls that are used by default to render the UI. They are used to provide the UI components with the necessary information to render the UI. An example value for the default controls for the `ColorPanel` component is:
+
+```js
+{
+	background: true,
+	text: true,
+	link: true,
+},
+```

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

@@ -45,35 +45,6 @@ function useHasBorderWidthControl( settings ) {
 	return settings?.border?.width;
 }
 
-function applyFallbackStyle( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( ! border.style && ( border.color || border.width ) ) {
-		return { ...border, style: 'solid' };
-	}
-
-	return border;
-}
-
-function applyAllFallbackStyles( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( hasSplitBorders( border ) ) {
-		return {
-			top: applyFallbackStyle( border.top ),
-			right: applyFallbackStyle( border.right ),
-			bottom: applyFallbackStyle( border.bottom ),
-			left: applyFallbackStyle( border.left ),
-		};
-	}
-
-	return applyFallbackStyle( border );
-}
-
 function BorderToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -186,39 +157,20 @@ export default function BorderPanel( {
 	const onBorderChange = ( newBorder ) => {
 		// Ensure we have a visible border style when a border width or
 		// color is being selected.
-		const newBorderWithStyle = applyAllFallbackStyles( newBorder );
-
-		// As we can't conditionally generate styles based on if other
-		// style properties have been set we need to force split border
-		// definitions for user set border styles. Border radius is derived
-		// from the same property i.e. `border.radius` if it is a string
-		// that is used. The longhand border radii styles are only generated
-		// if that property is an object.
-		//
-		// For borders (color, style, and width) those are all properties on
-		// the `border` style property. This means if the theme.json defined
-		// split borders and the user condenses them into a flat border or
-		// vice-versa we'd get both sets of styles which would conflict.
-		const updatedBorder = ! hasSplitBorders( newBorderWithStyle )
-			? {
-					top: newBorderWithStyle,
-					right: newBorderWithStyle,
-					bottom: newBorderWithStyle,
-					left: newBorderWithStyle,
-			  }
-			: {
-					color: null,
-					style: null,
-					width: null,
-					...newBorderWithStyle,
-			  };
+		const updatedBorder = { ...newBorder };
 
-		[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
-			updatedBorder[ side ] = {
-				...updatedBorder[ side ],
-				color: encodeColorValue( updatedBorder[ side ]?.color ),
-			};
-		} );
+		if ( hasSplitBorders( updatedBorder ) ) {
+			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
+				if ( updatedBorder[ side ] ) {
+					updatedBorder[ side ] = {
+						...updatedBorder[ side ],
+						color: encodeColorValue( updatedBorder[ side ]?.color ),
+					};
+				}
+			} );
+		} else if ( updatedBorder ) {
+			updatedBorder.color = encodeColorValue( updatedBorder.color );
+		}
 
 		// As radius is maintained separately to color, style, and width
 		// maintain its value. Undefined values here will be cleaned when

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

@@ -28,7 +28,7 @@ import { __ } from '@wordpress/i18n';
 import ColorGradientControl from '../colors-gradients/control';
 import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { getValueFromVariable } from './utils';
-import { immutableSet } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
@@ -330,7 +330,7 @@ export default function ColorPanel( {
 	const hasTextColor = () => !! userTextColor;
 	const setTextColor = ( newColor ) => {
 		onChange(
-			immutableSet(
+			setImmutably(
 				value,
 				[ 'color', 'text' ],
 				encodeColorValue( newColor )
@@ -347,7 +347,7 @@ export default function ColorPanel( {
 	const userGradient = decodeValue( value?.color?.gradient );
 	const hasBackground = () => !! userBackgroundColor || !! userGradient;
 	const setBackgroundColor = ( newColor ) => {
-		const newValue = immutableSet(
+		const newValue = setImmutably(
 			value,
 			[ 'color', 'background' ],
 			encodeColorValue( newColor )
@@ -356,7 +356,7 @@ export default function ColorPanel( {
 		onChange( newValue );
 	};
 	const setGradient = ( newGradient ) => {
-		const newValue = immutableSet(
+		const newValue = setImmutably(
 			value,
 			[ 'color', 'gradient' ],
 			encodeGradientValue( newGradient )
@@ -365,7 +365,7 @@ export default function ColorPanel( {
 		onChange( newValue );
 	};
 	const resetBackground = () => {
-		const newValue = immutableSet(
+		const newValue = setImmutably(
 			value,
 			[ 'color', 'background' ],
 			undefined
@@ -382,7 +382,7 @@ export default function ColorPanel( {
 	const userLinkColor = decodeValue( value?.elements?.link?.color?.text );
 	const setLinkColor = ( newColor ) => {
 		onChange(
-			immutableSet(
+			setImmutably(
 				value,
 				[ 'elements', 'link', 'color', 'text' ],
 				encodeColorValue( newColor )
@@ -397,7 +397,7 @@ export default function ColorPanel( {
 	);
 	const setHoverLinkColor = ( newColor ) => {
 		onChange(
-			immutableSet(
+			setImmutably(
 				value,
 				[ 'elements', 'link', ':hover', 'color', 'text' ],
 				encodeColorValue( newColor )
@@ -406,12 +406,12 @@ export default function ColorPanel( {
 	};
 	const hasLink = () => !! userLinkColor || !! userHoverLinkColor;
 	const resetLink = () => {
-		let newValue = immutableSet(
+		let newValue = setImmutably(
 			value,
 			[ 'elements', 'link', ':hover', 'color', 'text' ],
 			undefined
 		);
-		newValue = immutableSet(
+		newValue = setImmutably(
 			newValue,
 			[ 'elements', 'link', 'color', 'text' ],
 			undefined
@@ -591,7 +591,7 @@ export default function ColorPanel( {
 				elementGradientUserColor
 			);
 		const resetElement = () => {
-			const newValue = immutableSet(
+			const newValue = setImmutably(
 				value,
 				[ 'elements', name, 'color', 'background' ],
 				undefined
@@ -603,7 +603,7 @@ export default function ColorPanel( {
 
 		const setElementTextColor = ( newTextColor ) => {
 			onChange(
-				immutableSet(
+				setImmutably(
 					value,
 					[ 'elements', name, 'color', 'text' ],
 					encodeColorValue( newTextColor )
@@ -611,7 +611,7 @@ export default function ColorPanel( {
 			);
 		};
 		const setElementBackgroundColor = ( newBackgroundColor ) => {
-			const newValue = immutableSet(
+			const newValue = setImmutably(
 				value,
 				[ 'elements', name, 'color', 'background' ],
 				encodeColorValue( newBackgroundColor )
@@ -620,7 +620,7 @@ export default function ColorPanel( {
 			onChange( newValue );
 		};
 		const setElementGradient = ( newGradient ) => {
-			const newValue = immutableSet(
+			const newValue = setImmutably(
 				value,
 				[ 'elements', name, 'color', 'gradient' ],
 				encodeGradientValue( newGradient )

package/src/components/global-styles/color-panel.native.js

@@ -0,0 +1,207 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useGlobalStyles } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorGradientSettings from '../colors-gradients/panel-color-gradient-settings';
+import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
+import { getValueFromVariable } from './utils';
+import { setImmutably } from '../../utils/object';
+import ContrastChecker from '../contrast-checker';
+import InspectorControls from '../inspector-controls';
+import {
+	useHasColorPanel,
+	useHasTextPanel,
+	useHasBackgroundPanel,
+} from './color-panel.js';
+
+const ColorPanel = ( {
+	value,
+	inheritedValue = value,
+	onChange,
+	settings,
+} ) => {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	const globalStyles = useGlobalStyles();
+
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedTextColor, setDetectedTextColor ] = useState();
+
+	const { baseGlobalStyles } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			baseGlobalStyles:
+				getSettings()?.__experimentalGlobalStylesBaseStyles?.color,
+		};
+	} );
+
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+	const encodeColorValue = useCallback(
+		( colorValue ) => {
+			const allColors = colors.flatMap(
+				( { colors: originColors } ) => originColors
+			);
+			const colorObject = allColors.find(
+				( { color } ) => color === colorValue
+			);
+			return colorObject
+				? 'var:preset|color|' + colorObject.slug
+				: colorValue;
+		},
+		[ colors ]
+	);
+	const encodeGradientValue = useCallback(
+		( gradientValue ) => {
+			const allGradients = gradients.flatMap(
+				( { gradients: originGradients } ) => originGradients
+			);
+			const gradientObject = allGradients.find(
+				( { gradient } ) => gradient === gradientValue
+			);
+			return gradientObject
+				? 'var:preset|gradient|' + gradientObject.slug
+				: gradientValue;
+		},
+		[ gradients ]
+	);
+
+	// Text Color
+	const showTextPanel = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const setTextColor = useCallback(
+		( newColor ) => {
+			onChange(
+				setImmutably(
+					value,
+					[ 'color', 'text' ],
+					encodeColorValue( newColor )
+				)
+			);
+		},
+		[ encodeColorValue, onChange, value ]
+	);
+	const resetTextColor = useCallback(
+		() => setTextColor( undefined ),
+		[ setTextColor ]
+	);
+
+	// BackgroundColor
+	const showBackgroundPanel = useHasBackgroundPanel( settings );
+	const backgroundColor = decodeValue( inheritedValue?.color?.background );
+	const gradient = decodeValue( inheritedValue?.color?.gradient );
+	const setBackgroundColor = useCallback(
+		( newColor ) => {
+			const newValue = setImmutably(
+				value,
+				[ 'color', 'background' ],
+				encodeColorValue( newColor )
+			);
+			newValue.color.gradient = undefined;
+			onChange( newValue );
+		},
+		[ encodeColorValue, onChange, value ]
+	);
+	const setGradient = useCallback(
+		( newGradient ) => {
+			const newValue = setImmutably(
+				value,
+				[ 'color', 'gradient' ],
+				encodeGradientValue( newGradient )
+			);
+			newValue.color.background = undefined;
+			onChange( newValue );
+		},
+		[ encodeGradientValue, onChange, value ]
+	);
+	const resetBackground = useCallback( () => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'background' ],
+			undefined
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	}, [ onChange, value ] );
+	const currentGradients = settings?.color?.gradients;
+	const withoutGradientsSupport =
+		Array.isArray( currentGradients ) && currentGradients.length === 0;
+
+	const items = useMemo(
+		() =>
+			[
+				showTextPanel && {
+					label: __( 'Text' ),
+					colorValue: textColor,
+					onColorChange: setTextColor,
+					onColorCleared: resetTextColor,
+				},
+				showBackgroundPanel && {
+					label: __( 'Background' ),
+					colorValue: backgroundColor,
+					onColorChange: setBackgroundColor,
+					onColorCleared: resetBackground,
+					onGradientChange: ! withoutGradientsSupport
+						? setGradient
+						: undefined,
+					gradientValue: gradient,
+				},
+			].filter( Boolean ),
+		[
+			backgroundColor,
+			gradient,
+			resetBackground,
+			resetTextColor,
+			setBackgroundColor,
+			setGradient,
+			setTextColor,
+			showBackgroundPanel,
+			showTextPanel,
+			textColor,
+			withoutGradientsSupport,
+		]
+	);
+
+	useEffect( () => {
+		// The following logic is used to determine current text/background colors:
+		// 1. The globalStyles object is queried to determine whether a color has been
+		// set via a block's settings.
+		// 2. If a block-based theme is in use and no globalStyles exist, the theme's
+		// default/base colors are used.
+		// 3. If no globalStyles exist and a theme isn't block-based, there is no way
+		// to determine the default text/background color and the checker won't run.
+		const currentDetectedTextColor =
+			globalStyles?.color || baseGlobalStyles?.text;
+		const currentDetectedBackgroundColor =
+			globalStyles?.backgroundColor || baseGlobalStyles?.background;
+
+		setDetectedTextColor( currentDetectedTextColor );
+		setDetectedBackgroundColor( currentDetectedBackgroundColor );
+	}, [ globalStyles, baseGlobalStyles ] );
+
+	return (
+		<InspectorControls>
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				initialOpen={ false }
+				settings={ items }
+			>
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedTextColor }
+				/>
+			</PanelColorGradientSettings>
+		</InspectorControls>
+	);
+};
+
+export { useHasColorPanel };
+export default ColorPanel;