@wordpress/block-editor 10.4.0 → 10.5.0

package/src/components/url-popover/index.js

@@ -3,8 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { Button, Popover } from '@wordpress/components';
+import {
+	Button,
+	Popover,
+	__experimentalPopoverPositionToPlacement as positionToPlacement,
+} from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -12,14 +17,39 @@ import { chevronDown } from '@wordpress/icons';
 import LinkViewer from './link-viewer';
 import LinkEditor from './link-editor';
 
+const DEFAULT_PLACEMENT = 'bottom';
+
 function URLPopover( {
 	additionalControls,
 	children,
 	renderSettings,
-	position = 'bottom center',
+	// The DEFAULT_PLACEMENT value is assigned inside the function's body
+	placement,
 	focusOnMount = 'firstElement',
+	// Deprecated
+	position,
+	// Rest
 	...popoverProps
 } ) {
+	if ( position !== undefined ) {
+		deprecated( '`position` prop in wp.blockEditor.URLPopover', {
+			since: '6.2',
+			alternative: '`placement` prop',
+		} );
+	}
+
+	// Compute popover's placement:
+	// - give priority to `placement` prop, if defined
+	// - otherwise, compute it from the legacy `position` prop (if defined)
+	// - finally, fallback to the DEFAULT_PLACEMENT.
+	let computedPlacement;
+	if ( placement !== undefined ) {
+		computedPlacement = placement;
+	} else if ( position !== undefined ) {
+		computedPlacement = positionToPlacement( position );
+	}
+	computedPlacement = computedPlacement || DEFAULT_PLACEMENT;
+
 	const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );
 
 	const showSettings = !! renderSettings && isSettingsExpanded;
@@ -32,7 +62,7 @@ function URLPopover( {
 		<Popover
 			className="block-editor-url-popover"
 			focusOnMount={ focusOnMount }
-			position={ position }
+			placement={ computedPlacement }
 			shift
 			{ ...popoverProps }
 		>

package/src/components/use-setting/index.js

@@ -18,7 +18,13 @@ import {
 import { useBlockEditContext } from '../block-edit';
 import { store as blockEditorStore } from '../../store';
 
-const blockedPaths = [ 'color', 'border', 'typography', 'spacing' ];
+const blockedPaths = [
+	'color',
+	'border',
+	'dimensions',
+	'typography',
+	'spacing',
+];
 
 const deprecatedFlags = {
 	'color.palette': ( settings ) => settings.colors,

package/src/hooks/color-panel.js

@@ -29,7 +29,19 @@ export default function ColorPanel( {
 	const definedColors = settings.filter( ( setting ) => setting?.colorValue );
 
 	useEffect( () => {
-		if ( ! enableContrastChecking || ! definedColors.length ) {
+		if ( ! enableContrastChecking ) {
+			return;
+		}
+		if ( ! definedColors.length ) {
+			if ( detectedBackgroundColor ) {
+				setDetectedBackgroundColor();
+			}
+			if ( detectedColor ) {
+				setDetectedColor();
+			}
+			if ( detectedLinkColor ) {
+				setDetectedColor();
+			}
 			return;
 		}
 

package/src/hooks/color.js

@@ -459,6 +459,8 @@ export function ColorEdit( props ) {
 		Platform.OS === 'web' &&
 		! gradient &&
 		! style?.color?.gradient &&
+		hasBackgroundColor &&
+		( hasLinkColor || hasTextColor ) &&
 		// Contrast checking is enabled by default.
 		// Deactivating it requires `enableContrastChecker` to have
 		// an explicit value of `false`.

package/src/hooks/content-lock-ui.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton } from '@wordpress/components';
+import { ToolbarButton, MenuItem } from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
@@ -12,7 +12,7 @@ import { useEffect, useRef, useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
-import { BlockControls } from '../components';
+import { BlockControls, BlockSettingsMenuControls } from '../components';
 /**
  * External dependencies
  */
@@ -107,39 +107,51 @@ export const withBlockControls = createHigherOrderComponent(
 		return (
 			<>
 				{ isEditingAsBlocks && ! isContentLocked && (
-					<StopEditingAsBlocksOnOutsideSelect
-						clientId={ props.clientId }
-						stopEditingAsBlock={ stopEditingAsBlock }
-					/>
+					<>
+						<StopEditingAsBlocksOnOutsideSelect
+							clientId={ props.clientId }
+							stopEditingAsBlock={ stopEditingAsBlock }
+						/>
+						<BlockControls group="other">
+							<ToolbarButton
+								onClick={ () => {
+									stopEditingAsBlock();
+								} }
+							>
+								{ __( 'Done' ) }
+							</ToolbarButton>
+						</BlockControls>
+					</>
+				) }
+				{ ! isEditingAsBlocks && isContentLocked && props.isSelected && (
+					<BlockSettingsMenuControls>
+						{ ( { onClose } ) => (
+							<MenuItem
+								onClick={ () => {
+									__unstableMarkNextChangeAsNotPersistent();
+									updateBlockAttributes( props.clientId, {
+										templateLock: undefined,
+									} );
+									updateBlockListSettings( props.clientId, {
+										...getBlockListSettings(
+											props.clientId
+										),
+										templateLock: false,
+									} );
+									focusModeToRevert.current =
+										getSettings().focusMode;
+									updateSettings( { focusMode: true } );
+									__unstableSetTemporarilyEditingAsBlocks(
+										props.clientId
+									);
+									onClose();
+								} }
+							>
+								{ __( 'Modify' ) }
+							</MenuItem>
+						) }
+					</BlockSettingsMenuControls>
 				) }
-				<BlockControls group="other">
-					<ToolbarButton
-						onClick={ () => {
-							if ( isEditingAsBlocks && ! isContentLocked ) {
-								stopEditingAsBlock();
-							} else {
-								__unstableMarkNextChangeAsNotPersistent();
-								updateBlockAttributes( props.clientId, {
-									templateLock: undefined,
-								} );
-								updateBlockListSettings( props.clientId, {
-									...getBlockListSettings( props.clientId ),
-									templateLock: false,
-								} );
-								focusModeToRevert.current =
-									getSettings().focusMode;
-								updateSettings( { focusMode: true } );
-								__unstableSetTemporarilyEditingAsBlocks(
-									props.clientId
-								);
-							}
-						} }
-					>
-						{ isEditingAsBlocks && ! isContentLocked
-							? __( 'Done' )
-							: __( 'Modify' ) }
-					</ToolbarButton>
-				</BlockControls>
 				<BlockEdit
 					{ ...props }
 					className={ classnames(

package/src/hooks/dimensions.js

@@ -10,6 +10,7 @@ import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/compo
 import { Platform, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -30,6 +31,13 @@ import {
 	resetMargin,
 	useIsMarginDisabled,
 } from './margin';
+import {
+	MinHeightEdit,
+	hasMinHeightSupport,
+	hasMinHeightValue,
+	resetMinHeight,
+	useIsMinHeightDisabled,
+} from './min-height';
 import {
 	PaddingEdit,
 	PaddingVisualizer,
@@ -39,15 +47,29 @@ import {
 	useIsPaddingDisabled,
 } from './padding';
 import useSetting from '../components/use-setting';
+import { store as blockEditorStore } from '../store';
 
+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 );
-	const onMouseOver = () => setIsMouseOver( true );
-	const onMouseOut = () => setIsMouseOver( false );
+	const {
+		__experimentalHideBlockInterface: hideBlockInterface,
+		__experimentalShowBlockInterface: showBlockInterface,
+	} = useDispatch( blockEditorStore );
+	const onMouseOver = ( e ) => {
+		e.stopPropagation();
+		hideBlockInterface();
+		setIsMouseOver( true );
+	};
+	const onMouseOut = ( e ) => {
+		e.stopPropagation();
+		showBlockInterface();
+		setIsMouseOver( false );
+	};
 	return { isMouseOver, onMouseOver, onMouseOut };
 }
 
@@ -56,12 +78,13 @@ function useVisualizerMouseOver() {
  *
  * @param {Object} props Block props.
  *
- * @return {WPElement} Inspector controls for spacing support features.
+ * @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 isDisabled = useIsDimensionsDisabled( props );
 	const isSupported = hasDimensionsSupport( props.name );
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
@@ -72,21 +95,27 @@ export function DimensionsPanel( props ) {
 		return null;
 	}
 
+	const defaultDimensionsControls = getBlockSupport( props.name, [
+		DIMENSIONS_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
 	const defaultSpacingControls = getBlockSupport( props.name, [
 		SPACING_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
 
-	const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
-		...newAttributes,
-		style: {
-			...newAttributes.style,
-			spacing: {
-				...newAttributes.style?.spacing,
-				[ attribute ]: undefined,
+	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,
@@ -101,7 +130,10 @@ export function DimensionsPanel( props ) {
 						hasValue={ () => hasPaddingValue( props ) }
 						label={ __( 'Padding' ) }
 						onDeselect={ () => resetPadding( props ) }
-						resetAllFilter={ createResetAllFilter( 'padding' ) }
+						resetAllFilter={ createResetAllFilter(
+							'padding',
+							'spacing'
+						) }
 						isShownByDefault={ defaultSpacingControls?.padding }
 						panelId={ props.clientId }
 					>
@@ -118,7 +150,10 @@ export function DimensionsPanel( props ) {
 						hasValue={ () => hasMarginValue( props ) }
 						label={ __( 'Margin' ) }
 						onDeselect={ () => resetMargin( props ) }
-						resetAllFilter={ createResetAllFilter( 'margin' ) }
+						resetAllFilter={ createResetAllFilter(
+							'margin',
+							'spacing'
+						) }
 						isShownByDefault={ defaultSpacingControls?.margin }
 						panelId={ props.clientId }
 					>
@@ -135,13 +170,34 @@ export function DimensionsPanel( props ) {
 						hasValue={ () => hasGapValue( props ) }
 						label={ __( 'Block spacing' ) }
 						onDeselect={ () => resetGap( props ) }
-						resetAllFilter={ createResetAllFilter( 'blockGap' ) }
+						resetAllFilter={ createResetAllFilter(
+							'blockGap',
+							'spacing'
+						) }
 						isShownByDefault={ defaultSpacingControls?.blockGap }
 						panelId={ props.clientId }
 					>
 						<GapEdit { ...props } />
 					</ToolsPanelItem>
 				) }
+				{ ! isMinHeightDisabled && (
+					<ToolsPanelItem
+						className="single-column"
+						hasValue={ () => hasMinHeightValue( props ) }
+						label={ __( 'Min. height' ) }
+						onDeselect={ () => resetMinHeight( props ) }
+						resetAllFilter={ createResetAllFilter(
+							'minHeight',
+							'dimensions'
+						) }
+						isShownByDefault={
+							defaultDimensionsControls?.minHeight
+						}
+						panelId={ props.clientId }
+					>
+						<MinHeightEdit { ...props } />
+					</ToolsPanelItem>
+				) }
 			</InspectorControls>
 			{ ! isPaddingDisabled && (
 				<PaddingVisualizer
@@ -173,6 +229,7 @@ export function hasDimensionsSupport( blockName ) {
 
 	return (
 		hasGapSupport( blockName ) ||
+		hasMinHeightSupport( blockName ) ||
 		hasPaddingSupport( blockName ) ||
 		hasMarginSupport( blockName )
 	);
@@ -187,10 +244,13 @@ export function hasDimensionsSupport( blockName ) {
  */
 const useIsDimensionsDisabled = ( props = {} ) => {
 	const gapDisabled = useIsGapDisabled( props );
+	const minHeightDisabled = useIsMinHeightDisabled( props );
 	const paddingDisabled = useIsPaddingDisabled( props );
 	const marginDisabled = useIsMarginDisabled( props );
 
-	return gapDisabled && paddingDisabled && marginDisabled;
+	return (
+		gapDisabled && minHeightDisabled && paddingDisabled && marginDisabled
+	);
 };
 
 /**

package/src/hooks/layout.js

@@ -385,8 +385,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 		}
 
 		// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
-		const className = classnames(
-			props?.className,
+		const layoutClassNames = classnames(
 			{
 				[ `wp-container-${ id }` ]: shouldRenderLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
 			},
@@ -410,7 +409,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 					) }
 				<BlockListBlock
 					{ ...props }
-					__unstableLayoutClassNames={ className }
+					__unstableLayoutClassNames={ layoutClassNames }
 				/>
 			</>
 		);

package/src/hooks/margin.js

@@ -217,14 +217,15 @@ export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 			setIsActive( true );
 			valueRef.current = margin;
 
-			clearTimer();
-
 			timeoutRef.current = setTimeout( () => {
 				setIsActive( false );
 			}, 400 );
 		}
 
-		return () => clearTimer();
+		return () => {
+			setIsActive( false );
+			clearTimer();
+		};
 	}, [ margin, forceShow ] );
 
 	if ( ! isActive && ! forceShow ) {

package/src/hooks/min-height.js

@@ -0,0 +1,121 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+import {
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../components/use-setting';
+import { DIMENSIONS_SUPPORT_KEY } from './dimensions';
+import { cleanEmptyObject } from './utils';
+
+/**
+ * Determines if there is minHeight support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ * @return {boolean} Whether there is support.
+ */
+export function hasMinHeightSupport( blockType ) {
+	const support = getBlockSupport( blockType, DIMENSIONS_SUPPORT_KEY );
+	return !! ( true === support || support?.minHeight );
+}
+
+/**
+ * Checks if there is a current value in the minHeight block support attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean} Whether or not the block has a minHeight value set.
+ */
+export function hasMinHeightValue( props ) {
+	return props.attributes.style?.dimensions?.minHeight !== undefined;
+}
+
+/**
+ * Resets the minHeight block support attributes. This can be used when disabling
+ * the padding support controls for a block via a `ToolsPanel`.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetMinHeight( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			dimensions: {
+				...style?.dimensions,
+				minHeight: undefined,
+			},
+		} ),
+	} );
+}
+
+/**
+ * Custom hook that checks if minHeight controls have been disabled.
+ *
+ * @param {string} name The name of the block.
+ * @return {boolean} Whether minHeight control is disabled.
+ */
+export function useIsMinHeightDisabled( { name: blockName } = {} ) {
+	const isDisabled = ! useSetting( 'dimensions.minHeight' );
+	return ! hasMinHeightSupport( blockName ) || isDisabled;
+}
+
+/**
+ * Inspector control panel containing the minHeight related configuration.
+ *
+ * @param {Object} props Block props.
+ * @return {WPElement} Edit component for height.
+ */
+export function MinHeightEdit( props ) {
+	const {
+		attributes: { style },
+		setAttributes,
+	} = props;
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'dimensions.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vh',
+			'vw',
+		],
+	} );
+
+	if ( useIsMinHeightDisabled( props ) ) {
+		return null;
+	}
+
+	const onChange = ( next ) => {
+		const newStyle = {
+			...style,
+			dimensions: {
+				...style?.dimensions,
+				minHeight: next,
+			},
+		};
+
+		setAttributes( { style: cleanEmptyObject( newStyle ) } );
+	};
+
+	return (
+		<UnitControl
+			label={ __( 'Min. height' ) }
+			value={ style?.dimensions?.minHeight }
+			units={ units }
+			onChange={ onChange }
+			min={ 0 }
+			size={ '__unstable-large' }
+		/>
+	);
+}

package/src/hooks/padding.js

@@ -206,14 +206,15 @@ export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
 			setIsActive( true );
 			valueRef.current = padding;
 
-			clearTimer();
-
 			timeoutRef.current = setTimeout( () => {
 				setIsActive( false );
 			}, 400 );
 		}
 
-		return () => clearTimer();
+		return () => {
+			setIsActive( false );
+			clearTimer();
+		};
 	}, [ padding, forceShow ] );
 
 	if ( ! isActive && ! forceShow ) {

package/src/hooks/style.js

@@ -27,7 +27,11 @@ import {
 	TYPOGRAPHY_SUPPORT_KEY,
 	TYPOGRAPHY_SUPPORT_KEYS,
 } from './typography';
-import { SPACING_SUPPORT_KEY, DimensionsPanel } from './dimensions';
+import {
+	DIMENSIONS_SUPPORT_KEY,
+	SPACING_SUPPORT_KEY,
+	DimensionsPanel,
+} from './dimensions';
 import useDisplayBlockControls from '../components/use-display-block-controls';
 import { shouldSkipSerialization } from './utils';
 
@@ -35,6 +39,7 @@ const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
 	BORDER_SUPPORT_KEY,
 	COLOR_SUPPORT_KEY,
+	DIMENSIONS_SUPPORT_KEY,
 	SPACING_SUPPORT_KEY,
 ];
 
@@ -98,8 +103,11 @@ const skipSerializationPathsEdit = {
 	[ `${ TYPOGRAPHY_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		TYPOGRAPHY_SUPPORT_KEY,
 	],
+	[ `${ DIMENSIONS_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+		DIMENSIONS_SUPPORT_KEY,
+	],
 	[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
-		'spacing',
+		SPACING_SUPPORT_KEY,
 	],
 };
 

package/src/hooks/test/style.js

@@ -28,6 +28,9 @@ describe( 'getInlineStyles', () => {
 					style: 'dotted',
 					color: '#21759b',
 				},
+				dimensions: {
+					minHeight: '50vh',
+				},
 				spacing: {
 					blockGap: '1em',
 					padding: { top: '10px' },
@@ -44,6 +47,7 @@ describe( 'getInlineStyles', () => {
 			lineHeight: 1.5,
 			fontSize: 10,
 			marginBottom: '15px',
+			minHeight: '50vh',
 			paddingTop: '10px',
 		} );
 	} );

package/src/hooks/test/use-typography-props.js

@@ -42,7 +42,7 @@ describe( 'getTypographyClassesAndStyles', () => {
 			style: {
 				letterSpacing: '22px',
 				fontSize:
-					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 2.885), 3rem)',
+					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
 				textTransform: 'uppercase',
 			},
 		} );