@wordpress/block-editor 11.6.0 → 11.8.0

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

@@ -28,6 +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';
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
@@ -183,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( {
@@ -223,13 +225,9 @@ export default function DimensionsPanel( {
 		useHasContentSize( settings ) && includeLayoutControls;
 	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
 	const setContentSizeValue = ( newValue ) => {
-		onChange( {
-			...value,
-			layout: {
-				...value?.layout,
-				contentSize: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'layout', 'contentSize' ], newValue )
+		);
 	};
 	const hasUserSetContentSizeValue = () => !! value?.layout?.contentSize;
 	const resetContentSizeValue = () => setContentSizeValue( undefined );
@@ -239,13 +237,7 @@ export default function DimensionsPanel( {
 		useHasWideSize( settings ) && includeLayoutControls;
 	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
 	const setWideSizeValue = ( newValue ) => {
-		onChange( {
-			...value,
-			layout: {
-				...value?.layout,
-				wideSize: newValue,
-			},
-		} );
+		onChange( immutableSet( value, [ 'layout', 'wideSize' ], newValue ) );
 	};
 	const hasUserSetWideSizeValue = () => !! value?.layout?.wideSize;
 	const resetWideSizeValue = () => setWideSizeValue( undefined );
@@ -262,13 +254,7 @@ export default function DimensionsPanel( {
 		paddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setPaddingValues = ( newPaddingValues ) => {
 		const padding = filterValuesBySides( newPaddingValues, paddingSides );
-		onChange( {
-			...value,
-			spacing: {
-				...value?.spacing,
-				padding,
-			},
-		} );
+		onChange( immutableSet( value, [ 'spacing', 'padding' ], padding ) );
 	};
 	const hasPaddingValue = () =>
 		!! value?.spacing?.padding &&
@@ -288,13 +274,7 @@ export default function DimensionsPanel( {
 		marginSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setMarginValues = ( newMarginValues ) => {
 		const margin = filterValuesBySides( newMarginValues, marginSides );
-		onChange( {
-			...value,
-			spacing: {
-				...value?.spacing,
-				margin,
-			},
-		} );
+		onChange( immutableSet( value, [ 'spacing', 'margin' ], margin ) );
 	};
 	const hasMarginValue = () =>
 		!! value?.spacing?.margin &&
@@ -312,13 +292,9 @@ export default function DimensionsPanel( {
 	const isAxialGap =
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setGapValue = ( newGapValue ) => {
-		onChange( {
-			...value,
-			spacing: {
-				...value?.spacing,
-				blockGap: newGapValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'spacing', 'blockGap' ], newGapValue )
+		);
 	};
 	const setGapValues = ( nextBoxGapValue ) => {
 		if ( ! nextBoxGapValue ) {
@@ -341,13 +317,9 @@ export default function DimensionsPanel( {
 	const showMinHeightControl = useHasMinHeight( settings );
 	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
 	const setMinHeightValue = ( newValue ) => {
-		onChange( {
-			...value,
-			dimensions: {
-				...value?.dimensions,
-				minHeight: newValue,
-			},
-		} );
+		onChange(
+			immutableSet( value, [ 'dimensions', 'minHeight' ], newValue )
+		);
 	};
 	const resetMinHeightValue = () => {
 		setMinHeightValue( undefined );
@@ -420,7 +392,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">
@@ -446,7 +421,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">
@@ -471,7 +448,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,
 					} ) }
@@ -510,7 +489,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,
 					} ) }
@@ -549,7 +530,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,
 					} ) }
@@ -595,7 +578,9 @@ export default function DimensionsPanel( {
 					hasValue={ hasMinHeightValue }
 					label={ __( 'Min. height' ) }
 					onDeselect={ resetMinHeightValue }
-					isShownByDefault={ defaultControls.minHeight }
+					isShownByDefault={
+						defaultControls.minHeight ?? DEFAULT_CONTROLS.minHeight
+					}
 					panelId={ panelId }
 				>
 					<HeightControl
@@ -612,7 +597,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 { immutableSet } 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( immutableSet( 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,157 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalVStack as VStack,
+	DuotonePicker,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromVariable } from './utils';
+import { immutableSet } 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,
+};
+
+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( immutableSet( value, [ 'filter', 'duotone' ], settedValue ) );
+	};
+	const hasDuotone = () => !! value?.filter?.duotone;
+	const resetDuotone = () => setDuotone( undefined );
+
+	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 }
+				>
+					<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>
+				</ToolsPanelItem>
+			) }
+		</Wrapper>
+	);
+}

package/src/components/global-styles/get-block-css-selector.js

@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import { get, isEmpty } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { scopeSelector } from './utils';
+
+/**
+ * Determine the CSS selector for the block type and target provided, returning
+ * it if available.
+ *
+ * @param {import('@wordpress/blocks').Block} blockType        The block's type.
+ * @param {string|string[]}                   target           The desired selector's target e.g. `root`, delimited string, or array path.
+ * @param {Object}                            options          Options object.
+ * @param {boolean}                           options.fallback Whether or not to fallback to broader selector.
+ *
+ * @return {?string} The CSS selector or `null` if no selector available.
+ */
+export function getBlockCSSSelector(
+	blockType,
+	target = 'root',
+	options = {}
+) {
+	if ( ! target ) {
+		return null;
+	}
+
+	const { fallback = false } = options;
+	const { name, selectors, supports } = blockType;
+
+	const hasSelectors = ! isEmpty( selectors );
+	const path = Array.isArray( target ) ? target.join( '.' ) : target;
+
+	// Root selector.
+
+	// Calculated before returning as it can be used as a fallback for feature
+	// selectors later on.
+	let rootSelector = null;
+
+	if ( hasSelectors && selectors.root ) {
+		// Use the selectors API if available.
+		rootSelector = selectors?.root;
+	} else if ( supports?.__experimentalSelector ) {
+		// Use the old experimental selector supports property if set.
+		rootSelector = supports.__experimentalSelector;
+	} else {
+		// If no root selector found, generate default block class selector.
+		rootSelector =
+			'.wp-block-' + name.replace( 'core/', '' ).replace( '/', '-' );
+	}
+
+	// Return selector if it's the root target we are looking for.
+	if ( path === 'root' ) {
+		return rootSelector;
+	}
+
+	// If target is not `root` or `duotone` we have a feature or subfeature
+	// as the target. If the target is a string convert to an array.
+	const pathArray = Array.isArray( target ) ? target : target.split( '.' );
+
+	// Feature selectors ( may fallback to root selector );
+	if ( pathArray.length === 1 ) {
+		const fallbackSelector = fallback ? rootSelector : null;
+
+		// Prefer the selectors API if available.
+		if ( hasSelectors ) {
+			// Get selector from either `feature.root` or shorthand path.
+			const featureSelector =
+				get( selectors, `${ path }.root`, null ) ||
+				get( selectors, path, null );
+
+			// Return feature selector if found or any available fallback.
+			return featureSelector || fallbackSelector;
+		}
+
+		// Try getting old experimental supports selector value.
+		const featureSelector = get(
+			supports,
+			`${ path }.__experimentalSelector`,
+			null
+		);
+
+		// If nothing to work with, provide fallback selector if available.
+		if ( ! featureSelector ) {
+			return fallbackSelector;
+		}
+
+		// Scope the feature selector by the block's root selector.
+		return scopeSelector( rootSelector, featureSelector );
+	}
+
+	// Subfeature selector.
+	// This may fallback either to parent feature or root selector.
+	let subfeatureSelector;
+
+	// Use selectors API if available.
+	if ( hasSelectors ) {
+		subfeatureSelector = get( selectors, path, null );
+	}
+
+	// Only return if we have a subfeature selector.
+	if ( subfeatureSelector ) {
+		return subfeatureSelector;
+	}
+
+	// To this point we don't have a subfeature selector. If a fallback has been
+	// requested, remove subfeature from target path and return results of a
+	// call for the parent feature's selector.
+	if ( fallback ) {
+		return getBlockCSSSelector( blockType, pathArray[ 0 ], options );
+	}
+
+	// We tried.
+	return null;
+}