@wordpress/block-editor 11.7.0 → 12.0.0

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' ];
 
@@ -184,12 +184,13 @@ function DimensionsToolsPanel( {
 }
 
 const DEFAULT_CONTROLS = {
-	contentSize: true,
-	wideSize: true,
-	padding: true,
-	margin: true,
-	blockGap: true,
-	minHeight: true,
+	contentSize: false,
+	wideSize: false,
+	padding: false,
+	margin: false,
+	blockGap: false,
+	minHeight: false,
+	childLayout: true,
 };
 
 export default function DimensionsPanel( {
@@ -225,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;
@@ -236,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 );
@@ -253,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 &&
@@ -273,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 &&
@@ -292,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 ) => {
@@ -317,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 = () => {
@@ -391,7 +402,10 @@ export default function DimensionsPanel( {
 					label={ __( 'Content size' ) }
 					hasValue={ hasUserSetContentSizeValue }
 					onDeselect={ resetContentSizeValue }
-					isShownByDefault={ defaultControls.contentSize }
+					isShownByDefault={
+						defaultControls.contentSize ??
+						DEFAULT_CONTROLS.contentSize
+					}
 					panelId={ panelId }
 				>
 					<HStack alignment="flex-end" justify="flex-start">
@@ -417,7 +431,9 @@ export default function DimensionsPanel( {
 					label={ __( 'Wide size' ) }
 					hasValue={ hasUserSetWideSizeValue }
 					onDeselect={ resetWideSizeValue }
-					isShownByDefault={ defaultControls.wideSize }
+					isShownByDefault={
+						defaultControls.wideSize ?? DEFAULT_CONTROLS.wideSize
+					}
 					panelId={ panelId }
 				>
 					<HStack alignment="flex-end" justify="flex-start">
@@ -442,7 +458,9 @@ export default function DimensionsPanel( {
 					hasValue={ hasPaddingValue }
 					label={ __( 'Padding' ) }
 					onDeselect={ resetPaddingValue }
-					isShownByDefault={ defaultControls.padding }
+					isShownByDefault={
+						defaultControls.padding ?? DEFAULT_CONTROLS.padding
+					}
 					className={ classnames( {
 						'tools-panel-item-spacing': showSpacingPresetsControl,
 					} ) }
@@ -481,7 +499,9 @@ export default function DimensionsPanel( {
 					hasValue={ hasMarginValue }
 					label={ __( 'Margin' ) }
 					onDeselect={ resetMarginValue }
-					isShownByDefault={ defaultControls.margin }
+					isShownByDefault={
+						defaultControls.margin ?? DEFAULT_CONTROLS.margin
+					}
 					className={ classnames( {
 						'tools-panel-item-spacing': showSpacingPresetsControl,
 					} ) }
@@ -520,7 +540,9 @@ export default function DimensionsPanel( {
 					hasValue={ hasGapValue }
 					label={ __( 'Block spacing' ) }
 					onDeselect={ resetGapValue }
-					isShownByDefault={ defaultControls.blockGap }
+					isShownByDefault={
+						defaultControls.blockGap ?? DEFAULT_CONTROLS.blockGap
+					}
 					className={ classnames( {
 						'tools-panel-item-spacing': showSpacingPresetsControl,
 					} ) }
@@ -566,7 +588,9 @@ export default function DimensionsPanel( {
 					hasValue={ hasMinHeightValue }
 					label={ __( 'Min. height' ) }
 					onDeselect={ resetMinHeightValue }
-					isShownByDefault={ defaultControls.minHeight }
+					isShownByDefault={
+						defaultControls.minHeight ?? DEFAULT_CONTROLS.minHeight
+					}
 					panelId={ panelId }
 				>
 					<HeightControl
@@ -583,7 +607,10 @@ export default function DimensionsPanel( {
 					hasValue={ hasChildLayoutValue }
 					label={ childLayoutOrientationLabel }
 					onDeselect={ resetChildLayoutValue }
-					isShownByDefault={ defaultControls.childLayout }
+					isShownByDefault={
+						defaultControls.childLayout ??
+						DEFAULT_CONTROLS.childLayout
+					}
 					panelId={ panelId }
 				>
 					<ChildLayoutControl

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

@@ -0,0 +1,228 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalGrid as Grid,
+	__experimentalHeading as Heading,
+	FlexItem,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
+import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromVariable } from './utils';
+import { setImmutably } from '../../utils/object';
+
+export function useHasEffectsPanel( settings ) {
+	const hasShadowControl = useHasShadowControl( settings );
+	return hasShadowControl;
+}
+
+function useHasShadowControl( settings ) {
+	return !! settings?.shadow;
+}
+
+function EffectsToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Effects' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	shadow: true,
+};
+
+export default function EffectsPanel( {
+	as: Wrapper = EffectsToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+} ) {
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+
+	// Shadow
+	const hasShadowEnabled = useHasShadowControl( settings );
+	const shadow = decodeValue( inheritedValue?.shadow );
+	const setShadow = ( newValue ) => {
+		onChange( setImmutably( value, [ 'shadow' ], newValue ) );
+	};
+	const hasShadow = () => !! value?.shadow;
+	const resetShadow = () => setShadow( undefined );
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			shadow: undefined,
+		};
+	}, [] );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ hasShadowEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Shadow' ) }
+					hasValue={ hasShadow }
+					onDeselect={ resetShadow }
+					isShownByDefault={ defaultControls.shadow }
+					panelId={ panelId }
+				>
+					<ItemGroup isBordered isSeparated>
+						<ShadowPopover
+							shadow={ shadow }
+							onShadowChange={ setShadow }
+							settings={ settings }
+						/>
+					</ItemGroup>
+				</ToolsPanelItem>
+			) }
+		</Wrapper>
+	);
+}
+
+const ShadowPopover = ( { shadow, onShadowChange, settings } ) => {
+	const popoverProps = {
+		placement: 'left-start',
+		offset: 36,
+		shift: true,
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ popoverProps }
+			className="block-editor-global-styles-effects-panel__shadow-dropdown"
+			renderToggle={ renderShadowToggle() }
+			renderContent={ () => (
+				<DropdownContentWrapper paddingSize="medium">
+					<ShadowPopoverContainer
+						shadow={ shadow }
+						onShadowChange={ onShadowChange }
+						settings={ settings }
+					/>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+};
+
+function renderShadowToggle() {
+	return ( { onToggle, isOpen } ) => {
+		const toggleProps = {
+			onClick: onToggle,
+			className: classnames( { 'is-open': isOpen } ),
+			'aria-expanded': isOpen,
+		};
+
+		return (
+			<Button { ...toggleProps }>
+				<HStack justify="flex-start">
+					<Icon
+						className="block-editor-global-styles-effects-panel__toggle-icon"
+						icon={ shadowIcon }
+						size={ 24 }
+					/>
+					<FlexItem>{ __( 'Shadow' ) }</FlexItem>
+				</HStack>
+			</Button>
+		);
+	};
+}
+
+function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
+	const defaultShadows = settings?.shadow?.presets?.default;
+	const themeShadows = settings?.shadow?.presets?.theme;
+	const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
+
+	const shadows = [
+		...( defaultPresetsEnabled ? defaultShadows : [] ),
+		...( themeShadows || [] ),
+	];
+
+	return (
+		<div className="block-editor-global-styles-effects-panel__shadow-popover-container">
+			<VStack spacing={ 4 }>
+				<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>
+				<ShadowPresets
+					presets={ shadows }
+					activeShadow={ shadow }
+					onSelect={ onShadowChange }
+				/>
+			</VStack>
+		</div>
+	);
+}
+
+function ShadowPresets( { presets, activeShadow, onSelect } ) {
+	return ! presets ? null : (
+		<Grid columns={ 6 } gap={ 0 } align="center" justify="center">
+			{ presets.map( ( { name, slug, shadow } ) => (
+				<ShadowIndicator
+					key={ slug }
+					label={ name }
+					isActive={ shadow === activeShadow }
+					onSelect={ () =>
+						onSelect( shadow === activeShadow ? undefined : shadow )
+					}
+					shadow={ shadow }
+				/>
+			) ) }
+		</Grid>
+	);
+}
+
+function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
+	return (
+		<div className="block-editor-global-styles-effects-panel__shadow-indicator-wrapper">
+			<Button
+				className="block-editor-global-styles-effects-panel__shadow-indicator"
+				onClick={ onSelect }
+				label={ label }
+				style={ { boxShadow: shadow } }
+				showTooltip
+			>
+				{ isActive && <Icon icon={ check } /> }
+			</Button>
+		</div>
+	);
+}

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

@@ -0,0 +1,230 @@
+/**
+ * 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';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromVariable } from './utils';
+import { setImmutably } from '../../utils/object';
+
+const EMPTY_ARRAY = [];
+function useMultiOriginColorPresets(
+	settings,
+	{ presetSetting, defaultSetting }
+) {
+	const disableDefault = ! settings?.color?.[ defaultSetting ];
+	const userPresets =
+		settings?.color?.[ presetSetting ]?.custom || EMPTY_ARRAY;
+	const themePresets =
+		settings?.color?.[ presetSetting ]?.theme || EMPTY_ARRAY;
+	const defaultPresets =
+		settings?.color?.[ presetSetting ]?.default || EMPTY_ARRAY;
+	return useMemo(
+		() => [
+			...userPresets,
+			...themePresets,
+			...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+		],
+		[ disableDefault, userPresets, themePresets, defaultPresets ]
+	);
+}
+
+export function useHasFiltersPanel( settings ) {
+	const hasDuotone = useHasDuotoneControl( settings );
+
+	return hasDuotone;
+}
+
+function useHasDuotoneControl( settings ) {
+	return settings.color.customDuotone || settings.color.defaultDuotone;
+}
+
+function FiltersToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Filters' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+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,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+} ) {
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+
+	// Duotone
+	const hasDuotoneEnabled = useHasDuotoneControl( settings );
+	const duotonePalette = useMultiOriginColorPresets( settings, {
+		presetSetting: 'duotone',
+		defaultSetting: 'defaultDuotone',
+	} );
+	const colorPalette = useMultiOriginColorPresets( settings, {
+		presetSetting: 'palette',
+		defaultSetting: 'defaultPalette',
+	} );
+	const duotone = decodeValue( inheritedValue?.filter?.duotone );
+	const setDuotone = ( newValue ) => {
+		const duotonePreset = duotonePalette.find( ( { colors } ) => {
+			return colors === newValue;
+		} );
+		const settedValue = duotonePreset
+			? `var:preset|duotone|${ duotonePreset.slug }`
+			: newValue;
+		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,
+			filter: {
+				...previousValue.filter,
+				duotone: undefined,
+			},
+		};
+	}, [] );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ hasDuotoneEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Duotone' ) }
+					hasValue={ hasDuotone }
+					onDeselect={ resetDuotone }
+					isShownByDefault={ defaultControls.duotone }
+					panelId={ panelId }
+				>
+					<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/get-block-css-selector.js

@@ -34,17 +34,6 @@ export function getBlockCSSSelector(
 	const hasSelectors = ! isEmpty( selectors );
 	const path = Array.isArray( target ) ? target.join( '.' ) : target;
 
-	// Duotone ( no fallback selectors for Duotone ).
-	if ( path === 'filter.duotone' ) {
-		// If selectors API in use, only use its value or null.
-		if ( hasSelectors ) {
-			return get( selectors, path, null );
-		}
-
-		// Selectors API, not available, check for old experimental selector.
-		return get( supports, 'color.__experimentalDuotone', null );
-	}
-
 	// Root selector.
 
 	// Calculated before returning as it can be used as a fallback for feature

package/src/components/global-styles/hooks.js

@@ -283,6 +283,12 @@ export function useSettingsForBlockElement(
 			updatedSettings.color.customGradient = false;
 		}
 
+		// If filters are not supported by the block/element, disable duotone.
+		if ( ! supportedStyles.includes( 'filter' ) ) {
+			updatedSettings.color.defaultDuotone = false;
+			updatedSettings.color.customDuotone = false;
+		}
+
 		[
 			'lineHeight',
 			'fontStyle',
@@ -360,6 +366,10 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
+		updatedSettings.shadow = supportedStyles.includes( 'shadow' )
+			? updatedSettings.shadow
+			: false;
+
 		return updatedSettings;
 	}, [ parentSettings, supportedStyles, supports ] );
 }

package/src/components/global-styles/index.js

@@ -17,3 +17,5 @@ export {
 } from './dimensions-panel';
 export { default as BorderPanel, useHasBorderPanel } from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
+export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
+export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';