@wordpress/block-editor 10.4.0 → 11.0.0

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,13 +409,68 @@ export const withLayoutStyles = createHigherOrderComponent(
 					) }
 				<BlockListBlock
 					{ ...props }
-					__unstableLayoutClassNames={ className }
+					__unstableLayoutClassNames={ layoutClassNames }
 				/>
 			</>
 		);
 	}
 );
 
+/**
+ * Override the default block element to add the child layout styles.
+ *
+ * @param {Function} BlockListBlock Original component.
+ *
+ * @return {Function} Wrapped component.
+ */
+export const withChildLayoutStyles = createHigherOrderComponent(
+	( BlockListBlock ) => ( props ) => {
+		const { attributes } = props;
+		const { style: { layout = {} } = {} } = attributes;
+		const { selfStretch, flexSize } = layout;
+		const hasChildLayout = selfStretch || flexSize;
+		const disableLayoutStyles = useSelect( ( select ) => {
+			const { getSettings } = select( blockEditorStore );
+			return !! getSettings().disableLayoutStyles;
+		} );
+		const shouldRenderChildLayoutStyles =
+			hasChildLayout && ! disableLayoutStyles;
+
+		const element = useContext( BlockList.__unstableElementContext );
+		const id = useInstanceId( BlockListBlock );
+		const selector = `.wp-container-content-${ id }`;
+
+		let css = '';
+
+		if ( selfStretch === 'fixed' && flexSize ) {
+			css += `${ selector } {
+				flex-basis: ${ flexSize };
+				box-sizing: border-box;
+			}`;
+		} else if ( selfStretch === 'fill' ) {
+			css += `${ selector } {
+				flex-grow: 1;
+			}`;
+		}
+
+		// Attach a `wp-container-content` id-based classname.
+		const className = classnames( props?.className, {
+			[ `wp-container-content-${ id }` ]:
+				shouldRenderChildLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+		} );
+
+		return (
+			<>
+				{ shouldRenderChildLayoutStyles &&
+					element &&
+					!! css &&
+					createPortal( <style>{ css }</style>, element ) }
+				<BlockListBlock { ...props } className={ className } />
+			</>
+		);
+	}
+);
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/layout/addAttribute',
@@ -427,6 +481,11 @@ addFilter(
 	'core/editor/layout/with-layout-styles',
 	withLayoutStyles
 );
+addFilter(
+	'editor.BlockListBlock',
+	'core/editor/layout/with-child-layout-styles',
+	withChildLayoutStyles
+);
 addFilter(
 	'editor.BlockEdit',
 	'core/editor/layout/with-inspector-controls',

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,104 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockSupport } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../components/use-setting';
+import HeightControl from '../components/height-control';
+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;
+
+	if ( useIsMinHeightDisabled( props ) ) {
+		return null;
+	}
+
+	const onChange = ( next ) => {
+		const newStyle = {
+			...style,
+			dimensions: {
+				...style?.dimensions,
+				minHeight: next,
+			},
+		};
+
+		setAttributes( { style: cleanEmptyObject( newStyle ) } );
+	};
+
+	return (
+		<HeightControl
+			label={ __( 'Min. height' ) }
+			value={ style?.dimensions?.minHeight }
+			onChange={ onChange }
+		/>
+	);
+}

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

package/src/layouts/flex.js

@@ -10,7 +10,14 @@ import {
 	arrowRight,
 	arrowDown,
 } from '@wordpress/icons';
-import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
+import {
+	Button,
+	ToggleControl,
+	Flex,
+	FlexItem,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -289,22 +296,23 @@ function FlexLayoutJustifyContentControl( {
 	}
 
 	return (
-		<fieldset className="block-editor-hooks__flex-layout-justification-controls">
-			<legend>{ __( 'Justification' ) }</legend>
-			<div>
-				{ justificationOptions.map( ( { value, icon, label } ) => {
-					return (
-						<Button
-							key={ value }
-							label={ label }
-							icon={ icon }
-							isPressed={ justifyContent === value }
-							onClick={ () => onJustificationChange( value ) }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<ToggleGroupControl
+			label={ __( 'Justification' ) }
+			value={ justifyContent }
+			onChange={ onJustificationChange }
+			className="block-editor-hooks__flex-layout-justification-controls"
+		>
+			{ justificationOptions.map( ( { value, icon, label } ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ value }
+						value={ value }
+						icon={ icon }
+						label={ label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }
 
@@ -327,30 +335,27 @@ function FlexWrapControl( { layout, onChange } ) {
 function OrientationControl( { layout, onChange } ) {
 	const { orientation = 'horizontal' } = layout;
 	return (
-		<fieldset className="block-editor-hooks__flex-layout-orientation-controls">
-			<legend>{ __( 'Orientation' ) }</legend>
-			<Button
-				label={ __( 'Horizontal' ) }
+		<ToggleGroupControl
+			className="block-editor-hooks__flex-layout-orientation-controls"
+			label={ __( 'Orientation' ) }
+			value={ orientation }
+			onChange={ ( value ) =>
+				onChange( {
+					...layout,
+					orientation: value,
+				} )
+			}
+		>
+			<ToggleGroupControlOptionIcon
 				icon={ arrowRight }
-				isPressed={ orientation === 'horizontal' }
-				onClick={ () =>
-					onChange( {
-						...layout,
-						orientation: 'horizontal',
-					} )
-				}
+				value={ 'horizontal' }
+				label={ __( 'Horizontal' ) }
 			/>
-			<Button
-				label={ __( 'Vertical' ) }
+			<ToggleGroupControlOptionIcon
 				icon={ arrowDown }
-				isPressed={ orientation === 'vertical' }
-				onClick={ () =>
-					onChange( {
-						...layout,
-						orientation: 'vertical',
-					} )
-				}
+				value={ 'vertical' }
+				label={ __( 'Vertical' ) }
 			/>
-		</fieldset>
+		</ToggleGroupControl>
 	);
 }

package/src/store/actions.js

@@ -1263,6 +1263,28 @@ export function toggleBlockMode( clientId ) {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be hidden.
+ *
+ * @return {Object} Action object.
+ */
+export function __experimentalHideBlockInterface() {
+	return {
+		type: 'HIDE_BLOCK_INTERFACE',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be shown.
+ *
+ * @return {Object} Action object.
+ */
+export function __experimentalShowBlockInterface() {
+	return {
+		type: 'SHOW_BLOCK_INTERFACE',
+	};
+}
+
 /**
  * Returns an action object used in signalling that the user has begun to type.
  *