@wordpress/block-editor 11.4.0 → 11.6.0

package/src/hooks/dimensions.js

@@ -1,109 +1,89 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { Platform, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { getBlockSupport } from '@wordpress/blocks';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { getBlockSupport } from '@wordpress/blocks';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
 import {
-	GapEdit,
-	hasGapSupport,
-	hasGapValue,
-	resetGap,
-	useIsGapDisabled,
-} from './gap';
-import {
-	MarginEdit,
-	MarginVisualizer,
-	hasMarginSupport,
-	hasMarginValue,
-	resetMargin,
-	useIsMarginDisabled,
-} from './margin';
-import {
-	MinHeightEdit,
-	hasMinHeightSupport,
-	hasMinHeightValue,
-	resetMinHeight,
-	useIsMinHeightDisabled,
-} from './min-height';
-import {
-	PaddingEdit,
-	PaddingVisualizer,
-	hasPaddingSupport,
-	hasPaddingValue,
-	resetPadding,
-	useIsPaddingDisabled,
-} from './padding';
-import {
-	ChildLayoutEdit,
-	hasChildLayoutSupport,
-	hasChildLayoutValue,
-	resetChildLayout,
-	useIsChildLayoutDisabled,
-	childLayoutOrientation,
-} from './child-layout';
-import useSetting from '../components/use-setting';
+	DimensionsPanel as StylesDimensionsPanel,
+	useHasDimensionsPanel,
+} from '../components/global-styles';
+import { MarginVisualizer } from './margin';
+import { PaddingVisualizer } from './padding';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
+import { cleanEmptyObject, useBlockSettings } from './utils';
+
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
-function useVisualizerMouseOver() {
-	const [ isMouseOver, setIsMouseOver ] = useState( false );
+function useVisualizer() {
+	const [ property, setProperty ] = useState( false );
 	const { hideBlockInterface, showBlockInterface } = unlock(
 		useDispatch( blockEditorStore )
 	);
-	const onMouseOver = ( e ) => {
-		e.stopPropagation();
-		hideBlockInterface();
-		setIsMouseOver( true );
-	};
-	const onMouseOut = ( e ) => {
-		e.stopPropagation();
-		showBlockInterface();
-		setIsMouseOver( false );
-	};
-	return { isMouseOver, onMouseOver, onMouseOut };
+	useEffect( () => {
+		if ( ! property ) {
+			showBlockInterface();
+		} else {
+			hideBlockInterface();
+		}
+	}, [ property, showBlockInterface, hideBlockInterface ] );
+
+	return [ property, setProperty ];
+}
+
+function DimensionsInspectorControl( { children, resetAllFilter } ) {
+	const attributesResetAllFilter = useCallback(
+		( attributes ) => {
+			const existingStyle = attributes.style;
+			const updatedStyle = resetAllFilter( existingStyle );
+			return {
+				...attributes,
+				style: updatedStyle,
+			};
+		},
+		[ resetAllFilter ]
+	);
+
+	return (
+		<InspectorControls
+			group="dimensions"
+			resetAllFilter={ attributesResetAllFilter }
+		>
+			{ children }
+		</InspectorControls>
+	);
 }
 
-/**
- * Inspector controls for dimensions support.
- *
- * @param {Object} props Block props.
- *
- * @return {WPElement} Inspector controls for dimensions and spacing support features.
- */
 export function DimensionsPanel( props ) {
-	const isGapDisabled = useIsGapDisabled( props );
-	const isPaddingDisabled = useIsPaddingDisabled( props );
-	const isMarginDisabled = useIsMarginDisabled( props );
-	const isMinHeightDisabled = useIsMinHeightDisabled( props );
-	const isChildLayoutDisabled = useIsChildLayoutDisabled( props );
-	const isDisabled = useIsDimensionsDisabled( props );
-	const isSupported = hasDimensionsSupport( props );
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
-	const paddingMouseOver = useVisualizerMouseOver();
-	const marginMouseOver = useVisualizerMouseOver();
+	const {
+		clientId,
+		name,
+		attributes,
+		setAttributes,
+		__unstableParentLayout,
+	} = props;
+	const settings = useBlockSettings( name, __unstableParentLayout );
+	const isEnabled = useHasDimensionsPanel( settings );
+	const value = attributes.style;
+	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
+	const onChange = ( newStyle ) => {
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
 
-	if ( isDisabled || ! isSupported ) {
+	if ( ! isEnabled ) {
 		return null;
 	}
 
@@ -111,133 +91,36 @@ export function DimensionsPanel( props ) {
 		DIMENSIONS_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
-
 	const defaultSpacingControls = getBlockSupport( props.name, [
 		SPACING_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
-
-	const createResetAllFilter =
-		( attribute, featureSet ) => ( newAttributes ) => ( {
-			...newAttributes,
-			style: {
-				...newAttributes.style,
-				[ featureSet ]: {
-					...newAttributes.style?.[ featureSet ],
-					[ attribute ]: undefined,
-				},
-			},
-		} );
-
-	const spacingClassnames = classnames( {
-		'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0,
-	} );
-
-	const { __unstableParentLayout: parentLayout } = props;
+	const defaultControls = {
+		...defaultDimensionsControls,
+		...defaultSpacingControls,
+	};
 
 	return (
 		<>
-			<InspectorControls group="dimensions">
-				{ ! isPaddingDisabled && (
-					<ToolsPanelItem
-						className={ spacingClassnames }
-						hasValue={ () => hasPaddingValue( props ) }
-						label={ __( 'Padding' ) }
-						onDeselect={ () => resetPadding( props ) }
-						resetAllFilter={ createResetAllFilter(
-							'padding',
-							'spacing'
-						) }
-						isShownByDefault={ defaultSpacingControls?.padding }
-						panelId={ props.clientId }
-					>
-						<PaddingEdit
-							onMouseOver={ paddingMouseOver.onMouseOver }
-							onMouseOut={ paddingMouseOver.onMouseOut }
-							{ ...props }
-						/>
-					</ToolsPanelItem>
-				) }
-				{ ! isMarginDisabled && (
-					<ToolsPanelItem
-						className={ spacingClassnames }
-						hasValue={ () => hasMarginValue( props ) }
-						label={ __( 'Margin' ) }
-						onDeselect={ () => resetMargin( props ) }
-						resetAllFilter={ createResetAllFilter(
-							'margin',
-							'spacing'
-						) }
-						isShownByDefault={ defaultSpacingControls?.margin }
-						panelId={ props.clientId }
-					>
-						<MarginEdit
-							onMouseOver={ marginMouseOver.onMouseOver }
-							onMouseOut={ marginMouseOver.onMouseOut }
-							{ ...props }
-						/>
-					</ToolsPanelItem>
-				) }
-				{ ! isGapDisabled && (
-					<ToolsPanelItem
-						className={ spacingClassnames }
-						hasValue={ () => hasGapValue( props ) }
-						label={ __( 'Block spacing' ) }
-						onDeselect={ () => resetGap( props ) }
-						resetAllFilter={ createResetAllFilter(
-							'blockGap',
-							'spacing'
-						) }
-						isShownByDefault={ defaultSpacingControls?.blockGap }
-						panelId={ props.clientId }
-					>
-						<GapEdit { ...props } />
-					</ToolsPanelItem>
-				) }
-				{ ! isMinHeightDisabled && (
-					<ToolsPanelItem
-						hasValue={ () => hasMinHeightValue( props ) }
-						label={ __( 'Min. height' ) }
-						onDeselect={ () => resetMinHeight( props ) }
-						resetAllFilter={ createResetAllFilter(
-							'minHeight',
-							'dimensions'
-						) }
-						isShownByDefault={
-							defaultDimensionsControls?.minHeight
-						}
-						panelId={ props.clientId }
-					>
-						<MinHeightEdit { ...props } />
-					</ToolsPanelItem>
-				) }
-				{ ! isChildLayoutDisabled && (
-					<VStack
-						as={ ToolsPanelItem }
-						spacing={ 2 }
-						hasValue={ () => hasChildLayoutValue( props ) }
-						label={ childLayoutOrientation( parentLayout ) }
-						onDeselect={ () => resetChildLayout( props ) }
-						resetAllFilter={ createResetAllFilter(
-							'selfStretch',
-							'layout'
-						) }
-						isShownByDefault={ false }
-						panelId={ props.clientId }
-					>
-						<ChildLayoutEdit { ...props } />
-					</VStack>
-				) }
-			</InspectorControls>
-			{ ! isPaddingDisabled && (
+			<StylesDimensionsPanel
+				as={ DimensionsInspectorControl }
+				panelId={ clientId }
+				name={ name }
+				settings={ settings }
+				value={ value }
+				onChange={ onChange }
+				defaultControls={ defaultControls }
+				onVisualize={ setVisualizedProperty }
+			/>
+			{ !! settings?.spacing?.padding && (
 				<PaddingVisualizer
-					forceShow={ paddingMouseOver.isMouseOver }
+					forceShow={ visualizedProperty === 'padding' }
 					{ ...props }
 				/>
 			) }
-			{ ! isMarginDisabled && (
+			{ !! settings?.spacing?.margin && (
 				<MarginVisualizer
-					forceShow={ marginMouseOver.isMouseOver }
+					forceShow={ visualizedProperty === 'margin' }
 					{ ...props }
 				/>
 			) }
@@ -246,80 +129,13 @@ export function DimensionsPanel( props ) {
 }
 
 /**
- * Determine whether there is dimensions related block support.
- *
- * @param {Object} props Block props.
- *
- * @return {boolean} Whether there is support.
- */
-export function hasDimensionsSupport( props ) {
-	if ( Platform.OS !== 'web' ) {
-		return false;
-	}
-
-	const { name: blockName } = props;
-
-	return (
-		hasGapSupport( blockName ) ||
-		hasMinHeightSupport( blockName ) ||
-		hasPaddingSupport( blockName ) ||
-		hasMarginSupport( blockName ) ||
-		hasChildLayoutSupport( props )
-	);
-}
-
-/**
- * Determines whether dimensions support has been disabled.
- *
- * @param {Object} props Block properties.
- *
- * @return {boolean} If spacing support is completely disabled.
- */
-const useIsDimensionsDisabled = ( props = {} ) => {
-	const gapDisabled = useIsGapDisabled( props );
-	const minHeightDisabled = useIsMinHeightDisabled( props );
-	const paddingDisabled = useIsPaddingDisabled( props );
-	const marginDisabled = useIsMarginDisabled( props );
-	const childLayoutDisabled = useIsChildLayoutDisabled( props );
-
-	return (
-		gapDisabled &&
-		minHeightDisabled &&
-		paddingDisabled &&
-		marginDisabled &&
-		childLayoutDisabled
-	);
-};
-
-/**
- * Custom hook to retrieve which padding/margin/blockGap is supported
- * e.g. top, right, bottom or left.
- *
- * Sides are opted into by default. It is only if a specific side is set to
- * false that it is omitted.
- *
- * @param {string} blockName Block name.
- * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
- *
- * @return {string[] | undefined} Strings representing the custom sides available.
+ * @deprecated
  */
-export function useCustomSides( blockName, feature ) {
-	const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );
-
-	// Skip when setting is boolean as theme isn't setting arbitrary sides.
-	if ( ! support || typeof support[ feature ] === 'boolean' ) {
-		return;
-	}
-
-	// Return if the setting is an array of sides (e.g. `[ 'top', 'bottom' ]`).
-	if ( Array.isArray( support[ feature ] ) ) {
-		return support[ feature ];
-	}
-
-	// Finally, attempt to return `.sides` if the setting is an object.
-	if ( support[ feature ]?.sides ) {
-		return support[ feature ].sides;
-	}
+export function useCustomSides() {
+	deprecated( 'wp.blockEditor.__experimentalUseCustomSides', {
+		since: '6.3',
+		version: '6.4',
+	} );
 }
 
 /**

package/src/hooks/duotone.js

@@ -75,9 +75,34 @@ function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
 	);
 }
 
+export function getColorsFromDuotonePreset( duotone, duotonePalette ) {
+	if ( ! duotone ) {
+		return;
+	}
+	const preset = duotonePalette?.find( ( { slug } ) => {
+		return duotone === `var:preset|duotone|${ slug }`;
+	} );
+
+	return preset ? preset.colors : undefined;
+}
+
+export function getDuotonePresetFromColors( colors, duotonePalette ) {
+	if ( ! colors || ! Array.isArray( colors ) ) {
+		return;
+	}
+
+	const preset = duotonePalette?.find( ( duotonePreset ) => {
+		return duotonePreset?.colors?.every(
+			( val, index ) => val === colors[ index ]
+		);
+	} );
+
+	return preset ? `var:preset|duotone|${ preset.slug }` : undefined;
+}
+
 function DuotonePanel( { attributes, setAttributes } ) {
 	const style = attributes?.style;
-	const duotone = style?.color?.duotone;
+	const duotoneStyle = style?.color?.duotone;
 
 	const duotonePalette = useMultiOriginPresets( {
 		presetSetting: 'color.duotone',
@@ -96,6 +121,10 @@ function DuotonePanel( { attributes, setAttributes } ) {
 		return null;
 	}
 
+	const duotonePresetOrColors = ! Array.isArray( duotoneStyle )
+		? getColorsFromDuotonePreset( duotoneStyle, duotonePalette )
+		: duotoneStyle;
+
 	return (
 		<BlockControls group="block" __experimentalShareWithChildBlocks>
 			<DuotoneControl
@@ -103,13 +132,18 @@ function DuotonePanel( { attributes, setAttributes } ) {
 				colorPalette={ colorPalette }
 				disableCustomDuotone={ disableCustomDuotone }
 				disableCustomColors={ disableCustomColors }
-				value={ duotone }
+				value={ duotonePresetOrColors }
 				onChange={ ( newDuotone ) => {
+					const maybePreset = getDuotonePresetFromColors(
+						newDuotone,
+						duotonePalette
+					);
+
 					const newStyle = {
 						...style,
 						color: {
 							...style?.color,
-							duotone: newDuotone,
+							duotone: maybePreset ?? newDuotone, // use preset or fallback to custom colors.
 						},
 					};
 					setAttributes( { style: newStyle } );
@@ -168,12 +202,16 @@ const withDuotoneControls = createHigherOrderComponent(
 			[ props.clientId ]
 		);
 
+		// CAUTION: code added before this line will be executed
+		// for all blocks, not just those that support duotone. Code added
+		// above this line should be carefully evaluated for its impact on
+		// performance.
 		return (
 			<>
-				<BlockEdit { ...props } />
 				{ hasDuotoneSupport && ! isContentLocked && (
 					<DuotonePanel { ...props } />
 				) }
+				<BlockEdit { ...props } />
 			</>
 		);
 	},
@@ -211,6 +249,49 @@ function scopeSelector( scope, selector ) {
 	return selectorsScoped.join( ', ' );
 }
 
+function BlockDuotoneStyles( { name, duotoneStyle, id } ) {
+	const duotonePalette = useMultiOriginPresets( {
+		presetSetting: 'color.duotone',
+		defaultSetting: 'color.defaultDuotone',
+	} );
+
+	const element = useContext( BlockList.__unstableElementContext );
+
+	// Portals cannot exist without a container.
+	// Guard against empty Duotone styles.
+	if ( ! element || ! duotoneStyle ) {
+		return null;
+	}
+
+	let colors = duotoneStyle;
+
+	if ( ! Array.isArray( colors ) && colors !== 'unset' ) {
+		colors = getColorsFromDuotonePreset( colors, duotonePalette );
+	}
+
+	const duotoneSupportSelectors = getBlockSupport(
+		name,
+		'color.__experimentalDuotone'
+	);
+
+	// Extra .editor-styles-wrapper specificity is needed in the editor
+	// since we're not using inline styles to apply the filter. We need to
+	// override duotone applied by global styles and theme.json.
+	const selectorsGroup = scopeSelector(
+		`.editor-styles-wrapper .${ id }`,
+		duotoneSupportSelectors
+	);
+
+	return createPortal(
+		<InlineDuotone
+			selector={ selectorsGroup }
+			id={ id }
+			colors={ colors }
+		/>,
+		element
+	);
+}
+
 /**
  * Override the default block element to include duotone styles.
  *
@@ -224,37 +305,26 @@ const withDuotoneStyles = createHigherOrderComponent(
 			props.name,
 			'color.__experimentalDuotone'
 		);
-		const colors = props?.attributes?.style?.color?.duotone;
-
-		if ( ! duotoneSupport || ! colors ) {
-			return <BlockListBlock { ...props } />;
-		}
 
 		const id = `wp-duotone-${ useInstanceId( BlockListBlock ) }`;
+		const className = duotoneSupport
+			? classnames( props?.className, id )
+			: props?.className;
+		const duotoneStyle = props?.attributes?.style?.color?.duotone;
 
-		// Extra .editor-styles-wrapper specificity is needed in the editor
-		// since we're not using inline styles to apply the filter. We need to
-		// override duotone applied by global styles and theme.json.
-		const selectorsGroup = scopeSelector(
-			`.editor-styles-wrapper .${ id }`,
-			duotoneSupport
-		);
-
-		const className = classnames( props?.className, id );
-
-		const element = useContext( BlockList.__unstableElementContext );
-
+		// CAUTION: code added before this line will be executed
+		// for all blocks, not just those that support duotone. Code added
+		// above this line should be carefully evaluated for its impact on
+		// performance.
 		return (
 			<>
-				{ element &&
-					createPortal(
-						<InlineDuotone
-							selector={ selectorsGroup }
-							id={ id }
-							colors={ colors }
-						/>,
-						element
-					) }
+				{ duotoneSupport && duotoneStyle && (
+					<BlockDuotoneStyles
+						name={ props?.name }
+						duotoneStyle={ duotoneStyle }
+						id={ id }
+					/>
+				) }
 				<BlockListBlock { ...props } className={ className } />
 			</>
 		);