@wordpress/block-editor 10.3.0 → 10.5.0

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

@@ -7,9 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
-import { Platform } from '@wordpress/element';
+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,45 +47,75 @@ 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 {
+		__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 };
+}
+
 /**
  * Inspector controls for dimensions support.
  *
  * @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' );
+	const paddingMouseOver = useVisualizerMouseOver();
+	const marginMouseOver = useVisualizerMouseOver();
 
 	if ( isDisabled || ! isSupported ) {
 		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,
@@ -92,11 +130,18 @@ 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 }
 					>
-						<PaddingEdit { ...props } />
+						<PaddingEdit
+							onMouseOver={ paddingMouseOver.onMouseOver }
+							onMouseOut={ paddingMouseOver.onMouseOut }
+							{ ...props }
+						/>
 					</ToolsPanelItem>
 				) }
 				{ ! isMarginDisabled && (
@@ -105,11 +150,18 @@ 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 }
 					>
-						<MarginEdit { ...props } />
+						<MarginEdit
+							onMouseOver={ marginMouseOver.onMouseOver }
+							onMouseOut={ marginMouseOver.onMouseOut }
+							{ ...props }
+						/>
 					</ToolsPanelItem>
 				) }
 				{ ! isGapDisabled && (
@@ -118,16 +170,47 @@ 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 { ...props } /> }
-			{ ! isMarginDisabled && <MarginVisualizer { ...props } /> }
+			{ ! isPaddingDisabled && (
+				<PaddingVisualizer
+					forceShow={ paddingMouseOver.isMouseOver }
+					{ ...props }
+				/>
+			) }
+			{ ! isMarginDisabled && (
+				<MarginVisualizer
+					forceShow={ marginMouseOver.isMouseOver }
+					{ ...props }
+				/>
+			) }
 		</>
 	);
 }
@@ -146,6 +229,7 @@ export function hasDimensionsSupport( blockName ) {
 
 	return (
 		hasGapSupport( blockName ) ||
+		hasMinHeightSupport( blockName ) ||
 		hasPaddingSupport( blockName ) ||
 		hasMarginSupport( blockName )
 	);
@@ -160,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/font-size.js

@@ -150,6 +150,7 @@ export function FontSizeEdit( props ) {
 			onChange={ onChange }
 			value={ fontSizeValue }
 			withReset={ false }
+			withSlider
 			size="__unstable-large"
 			__nextHasNoMarginBottom
 		/>

package/src/hooks/layout.js

@@ -9,11 +9,7 @@ import { kebabCase } from 'lodash';
  */
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import {
-	getBlockDefaultClassName,
-	getBlockSupport,
-	hasBlockSupport,
-} from '@wordpress/blocks';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
 	Button,
@@ -366,9 +362,8 @@ export const withLayoutStyles = createHigherOrderComponent(
 		const layoutClasses = hasLayoutBlockSupport
 			? useLayoutClasses( block )
 			: null;
-		const selector = `.${ getBlockDefaultClassName(
-			name
-		) }.wp-container-${ id }`;
+		// Higher specificity to override defaults from theme.json.
+		const selector = `.wp-container-${ id }.wp-container-${ id }`;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapSupport = blockGapSupport !== null;
 
@@ -390,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.
 			},
@@ -413,7 +407,10 @@ export const withLayoutStyles = createHigherOrderComponent(
 						/>,
 						element
 					) }
-				<BlockListBlock { ...props } className={ className } />
+				<BlockListBlock
+					{ ...props }
+					__unstableLayoutClassNames={ layoutClassNames }
+				/>
 			</>
 		);
 	}

package/src/hooks/margin.js

@@ -29,7 +29,7 @@ import {
 import { cleanEmptyObject } from './utils';
 import BlockPopover from '../components/block-popover';
 import SpacingSizesControl from '../components/spacing-sizes-control';
-import { getCustomValueFromPreset } from '../components/spacing-sizes-control/utils';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 
 /**
  * Determines if there is margin support.
@@ -101,6 +101,8 @@ export function MarginEdit( props ) {
 		name: blockName,
 		attributes: { style },
 		setAttributes,
+		onMouseOver,
+		onMouseOut,
 	} = props;
 
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
@@ -148,6 +150,8 @@ export function MarginEdit( props ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ splitOnAxis }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				) }
 				{ spacingSizes?.length > 0 && (
@@ -159,6 +163,8 @@ export function MarginEdit( props ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ false }
+						onMouseOver={ onMouseOver }
+						onMouseOut={ onMouseOut }
 					/>
 				) }
 			</>
@@ -167,22 +173,21 @@ export function MarginEdit( props ) {
 	} );
 }
 
-export function MarginVisualizer( { clientId, attributes } ) {
+export function MarginVisualizer( { clientId, attributes, forceShow } ) {
 	const margin = attributes?.style?.spacing?.margin;
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
 
 	const style = useMemo( () => {
 		const marginTop = margin?.top
-			? getCustomValueFromPreset( margin?.top, spacingSizes )
+			? getSpacingPresetCssVar( margin?.top )
 			: 0;
 		const marginRight = margin?.right
-			? getCustomValueFromPreset( margin?.right, spacingSizes )
+			? getSpacingPresetCssVar( margin?.right )
 			: 0;
 		const marginBottom = margin?.bottom
-			? getCustomValueFromPreset( margin?.bottom, spacingSizes )
+			? getSpacingPresetCssVar( margin?.bottom )
 			: 0;
 		const marginLeft = margin?.left
-			? getCustomValueFromPreset( margin?.left, spacingSizes )
+			? getSpacingPresetCssVar( margin?.left )
 			: 0;
 
 		return {
@@ -190,10 +195,10 @@ export function MarginVisualizer( { clientId, attributes } ) {
 			borderRightWidth: marginRight,
 			borderBottomWidth: marginBottom,
 			borderLeftWidth: marginLeft,
-			top: marginTop !== 0 ? `calc(${ marginTop } * -1)` : 0,
-			right: marginRight !== 0 ? `calc(${ marginRight } * -1)` : 0,
-			bottom: marginBottom !== 0 ? `calc(${ marginBottom } * -1)` : 0,
-			left: marginLeft !== 0 ? `calc(${ marginLeft } * -1)` : 0,
+			top: marginTop ? `calc(${ marginTop } * -1)` : 0,
+			right: marginRight ? `calc(${ marginRight } * -1)` : 0,
+			bottom: marginBottom ? `calc(${ marginBottom } * -1)` : 0,
+			left: marginLeft ? `calc(${ marginLeft } * -1)` : 0,
 		};
 	}, [ margin ] );
 
@@ -208,21 +213,22 @@ export function MarginVisualizer( { clientId, attributes } ) {
 	};
 
 	useEffect( () => {
-		if ( ! isShallowEqual( margin, valueRef.current ) ) {
+		if ( ! isShallowEqual( margin, valueRef.current ) && ! forceShow ) {
 			setIsActive( true );
 			valueRef.current = margin;
 
-			clearTimer();
-
 			timeoutRef.current = setTimeout( () => {
 				setIsActive( false );
 			}, 400 );
 		}
 
-		return () => clearTimer();
-	}, [ margin ] );
+		return () => {
+			setIsActive( false );
+			clearTimer();
+		};
+	}, [ margin, forceShow ] );
 
-	if ( ! isActive ) {
+	if ( ! isActive && ! forceShow ) {
 		return null;
 	}
 

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' }
+		/>
+	);
+}