@wordpress/block-editor 11.8.0 → 12.0.0

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;

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

@@ -28,7 +28,7 @@ import SpacingSizesControl from '../spacing-sizes-control';
 import HeightControl from '../height-control';
 import ChildLayoutControl from '../child-layout-control';
 import { cleanEmptyObject } from '../../hooks/utils';
-import { immutableSet } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
@@ -226,7 +226,11 @@ export default function DimensionsPanel( {
 	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
 	const setContentSizeValue = ( newValue ) => {
 		onChange(
-			immutableSet( value, [ 'layout', 'contentSize' ], newValue )
+			setImmutably(
+				value,
+				[ 'layout', 'contentSize' ],
+				newValue || undefined
+			)
 		);
 	};
 	const hasUserSetContentSizeValue = () => !! value?.layout?.contentSize;
@@ -237,7 +241,13 @@ export default function DimensionsPanel( {
 		useHasWideSize( settings ) && includeLayoutControls;
 	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
 	const setWideSizeValue = ( newValue ) => {
-		onChange( immutableSet( value, [ 'layout', 'wideSize' ], newValue ) );
+		onChange(
+			setImmutably(
+				value,
+				[ 'layout', 'wideSize' ],
+				newValue || undefined
+			)
+		);
 	};
 	const hasUserSetWideSizeValue = () => !! value?.layout?.wideSize;
 	const resetWideSizeValue = () => setWideSizeValue( undefined );
@@ -254,7 +264,7 @@ export default function DimensionsPanel( {
 		paddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setPaddingValues = ( newPaddingValues ) => {
 		const padding = filterValuesBySides( newPaddingValues, paddingSides );
-		onChange( immutableSet( value, [ 'spacing', 'padding' ], padding ) );
+		onChange( setImmutably( value, [ 'spacing', 'padding' ], padding ) );
 	};
 	const hasPaddingValue = () =>
 		!! value?.spacing?.padding &&
@@ -274,7 +284,7 @@ export default function DimensionsPanel( {
 		marginSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setMarginValues = ( newMarginValues ) => {
 		const margin = filterValuesBySides( newMarginValues, marginSides );
-		onChange( immutableSet( value, [ 'spacing', 'margin' ], margin ) );
+		onChange( setImmutably( value, [ 'spacing', 'margin' ], margin ) );
 	};
 	const hasMarginValue = () =>
 		!! value?.spacing?.margin &&
@@ -293,7 +303,7 @@ export default function DimensionsPanel( {
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setGapValue = ( newGapValue ) => {
 		onChange(
-			immutableSet( value, [ 'spacing', 'blockGap' ], newGapValue )
+			setImmutably( value, [ 'spacing', 'blockGap' ], newGapValue )
 		);
 	};
 	const setGapValues = ( nextBoxGapValue ) => {
@@ -318,7 +328,7 @@ export default function DimensionsPanel( {
 	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
 	const setMinHeightValue = ( newValue ) => {
 		onChange(
-			immutableSet( value, [ 'dimensions', 'minHeight' ], newValue )
+			setImmutably( value, [ 'dimensions', 'minHeight' ], newValue )
 		);
 	};
 	const resetMinHeightValue = () => {

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

@@ -27,7 +27,7 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
  * Internal dependencies
  */
 import { getValueFromVariable } from './utils';
-import { immutableSet } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 export function useHasEffectsPanel( settings ) {
 	const hasShadowControl = useHasShadowControl( settings );
@@ -81,7 +81,7 @@ export default function EffectsPanel( {
 	const hasShadowEnabled = useHasShadowControl( settings );
 	const shadow = decodeValue( inheritedValue?.shadow );
 	const setShadow = ( newValue ) => {
-		onChange( immutableSet( value, [ 'shadow' ], newValue ) );
+		onChange( setImmutably( value, [ 'shadow' ], newValue ) );
 	};
 	const hasShadow = () => !! value?.shadow;
 	const resetShadow = () => setShadow( undefined );

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

@@ -1,11 +1,26 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
+	ColorIndicator,
 	DuotonePicker,
+	DuotoneSwatch,
+	Dropdown,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -14,7 +29,7 @@ import { useCallback, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { getValueFromVariable } from './utils';
-import { immutableSet } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 const EMPTY_ARRAY = [];
 function useMultiOriginColorPresets(
@@ -75,6 +90,29 @@ const DEFAULT_CONTROLS = {
 	duotone: true,
 };
 
+const popoverProps = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+	className: 'block-editor-duotone-control__popover',
+	headerTitle: __( 'Duotone' ),
+};
+
+const LabeledColorIndicator = ( { indicator, label } ) => (
+	<HStack justify="flex-start">
+		<ZStack isLayered={ false } offset={ -8 }>
+			<Flex expanded={ false }>
+				{ indicator === 'unset' || ! indicator ? (
+					<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
+				) : (
+					<DuotoneSwatch values={ indicator } />
+				) }
+			</Flex>
+		</ZStack>
+		<FlexItem title={ label }>{ label }</FlexItem>
+	</HStack>
+);
+
 export default function FiltersPanel( {
 	as: Wrapper = FiltersToolsPanel,
 	value,
@@ -105,11 +143,16 @@ export default function FiltersPanel( {
 		const settedValue = duotonePreset
 			? `var:preset|duotone|${ duotonePreset.slug }`
 			: newValue;
-		onChange( immutableSet( value, [ 'filter', 'duotone' ], settedValue ) );
+		onChange( setImmutably( value, [ 'filter', 'duotone' ], settedValue ) );
 	};
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );
 
+	const disableCustomColors = ! settings?.color?.custom;
+	const disableCustomDuotone =
+		! settings?.color?.customDuotone ||
+		( colorPalette?.length === 0 && disableCustomColors );
+
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -135,21 +178,51 @@ export default function FiltersPanel( {
 					isShownByDefault={ defaultControls.duotone }
 					panelId={ panelId }
 				>
-					<VStack>
-						<p>
-							{ __(
-								'Create a two-tone color effect without losing your original image.'
-							) }
-						</p>
-						<DuotonePicker
-							colorPalette={ colorPalette }
-							duotonePalette={ duotonePalette }
-							disableCustomColors={ true }
-							disableCustomDuotone={ true }
-							value={ duotone }
-							onChange={ setDuotone }
-						/>
-					</VStack>
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="block-editor-global-styles-filters-panel__dropdown"
+						renderToggle={ ( { onToggle, isOpen } ) => {
+							const toggleProps = {
+								onClick: onToggle,
+								className: classnames( { 'is-open': isOpen } ),
+								'aria-expanded': isOpen,
+							};
+
+							return (
+								<ItemGroup isBordered isSeparated>
+									<Button { ...toggleProps }>
+										<LabeledColorIndicator
+											indicator={ duotone }
+											label={ __( 'Duotone' ) }
+										/>
+									</Button>
+								</ItemGroup>
+							);
+						} }
+						renderContent={ () => (
+							<DropdownContentWrapper paddingSize="medium">
+								<VStack>
+									<p>
+										{ __(
+											'Create a two-tone color effect without losing your original image.'
+										) }
+									</p>
+									<DuotonePicker
+										colorPalette={ colorPalette }
+										duotonePalette={ duotonePalette }
+										disableCustomColors={
+											disableCustomColors
+										}
+										disableCustomDuotone={
+											disableCustomDuotone
+										}
+										value={ duotone }
+										onChange={ setDuotone }
+									/>
+								</VStack>
+							</DropdownContentWrapper>
+						) }
+					/>
 				</ToolsPanelItem>
 			) }
 		</Wrapper>

package/src/components/global-styles/style.scss

@@ -6,11 +6,12 @@
 	width: 230px;
 }
 
+.block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles-effects-panel__shadow-dropdown {
 	display: block;
 	padding: 0;
 
-	> button {
+	button {
 		width: 100%;
 		padding: $grid-unit-10;
 

package/src/components/global-styles/test/typography-utils.js

@@ -89,11 +89,11 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
 			},
 
 			{
-				message: 'should return clamp value with eem min and max units',
+				message: 'should return clamp value with em min and max units',
 				preset: {
 					size: '1.75em',
 				},
@@ -101,19 +101,19 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
+					'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
 			},
 
 			{
 				message: 'should return clamp value for floats',
 				preset: {
-					size: '100.175px',
+					size: '70.175px',
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
+					'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
 			},
 
 			{
@@ -127,20 +127,20 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
+					'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
 			},
 
 			{
 				message: 'should coerce float to `px` and returns clamp value',
 				preset: {
-					size: 100.23,
+					size: 70.175,
 					fluid: true,
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
+					'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
 			},
 
 			{
@@ -154,7 +154,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
 			},
 
 			{
@@ -167,7 +167,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
 			},
 
 			{
@@ -183,8 +183,7 @@ describe( 'typography utils', () => {
 				typographySettings: {
 					fluid: true,
 				},
-				expected:
-					'clamp(5rem, 5rem + ((1vw - 0.48rem) * -5.769), 32px)',
+				expected: 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)',
 			},
 
 			{
@@ -240,14 +239,14 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
+					'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)',
 			},
 
 			{
 				message:
 					'should return clamp value where no fluid max size is set',
 				preset: {
-					size: '28px',
+					size: '50px',
 					fluid: {
 						min: '2.6rem',
 					},
@@ -256,7 +255,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
+					'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)',
 			},
 
 			{
@@ -272,7 +271,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)',
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
 			},
 
 			{
@@ -289,7 +288,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
+					'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)',
 			},
 
 			{
@@ -305,7 +304,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
+					'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)',
 			},
 
 			{
@@ -321,7 +320,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
+					'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)',
 			},
 
 			{
@@ -337,7 +336,7 @@ describe( 'typography utils', () => {
 				typographySettings: {
 					fluid: true,
 				},
-				expected: 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
+				expected: 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)',
 			},
 
 			{
@@ -352,7 +351,7 @@ describe( 'typography utils', () => {
 					},
 				},
 				expected:
-					'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)',
+					'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px)',
 			},
 
 			// Equivalent custom config PHP unit tests in `test_should_covert_font_sizes_to_fluid_values()`.
@@ -366,7 +365,7 @@ describe( 'typography utils', () => {
 						minFontSize: '16px',
 					},
 				},
-				expected: 'clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px)',
+				expected: 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.078), 17px)',
 			},
 
 			{
@@ -382,6 +381,48 @@ describe( 'typography utils', () => {
 				},
 				expected: '15px',
 			},
+
+			{
+				message:
+					'should apply scaled min font size for em values when custom min font size is not set',
+				preset: {
+					size: '12rem',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
+			},
+
+			{
+				message:
+					'should apply scaled min font size for px values when custom min font size is not set',
+				preset: {
+					size: '200px',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
+			},
+
+			{
+				message:
+					'should not apply scaled min font size for minimum font size when custom min font size is set',
+				preset: {
+					size: '200px',
+					fluid: {
+						min: '100px',
+					},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
+			},
 		].forEach( ( { message, preset, typographySettings, expected } ) => {
 			it( `${ message }`, () => {
 				expect(