@wordpress/block-editor 10.5.0 → 11.1.0

package/src/hooks/child-layout.js

@@ -0,0 +1,190 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../components/use-setting';
+
+function helpText( selfStretch, parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	if ( selfStretch === 'fill' ) {
+		return __( 'Stretch to fill available space.' );
+	}
+	if ( selfStretch === 'fixed' ) {
+		if ( orientation === 'horizontal' ) {
+			return __( 'Specify a fixed width.' );
+		}
+		return __( 'Specify a fixed height.' );
+	}
+	return __( 'Fit contents.' );
+}
+
+/**
+ * Inspector controls containing the child layout related configuration.
+ *
+ * @param {Object} props                        Block props.
+ * @param {Object} props.attributes             Block attributes.
+ * @param {Object} props.setAttributes          Function to set block attributes.
+ * @param {Object} props.__unstableParentLayout
+ *
+ * @return {WPElement} child layout edit element.
+ */
+export function ChildLayoutEdit( {
+	attributes,
+	setAttributes,
+	__unstableParentLayout: parentLayout,
+} ) {
+	const { style = {} } = attributes;
+	const { layout: childLayout = {} } = style;
+	const { selfStretch, flexSize } = childLayout;
+
+	useEffect( () => {
+		if ( selfStretch === 'fixed' && ! flexSize ) {
+			setAttributes( {
+				style: {
+					...style,
+					layout: {
+						...childLayout,
+						selfStretch: 'fit',
+					},
+				},
+			} );
+		}
+	}, [] );
+
+	return (
+		<>
+			<ToggleGroupControl
+				size={ '__unstable-large' }
+				label={ childLayoutOrientation( parentLayout ) }
+				value={ selfStretch || 'fit' }
+				help={ helpText( selfStretch, parentLayout ) }
+				onChange={ ( value ) => {
+					const newFlexSize = value !== 'fixed' ? null : flexSize;
+					setAttributes( {
+						style: {
+							...style,
+							layout: {
+								...childLayout,
+								selfStretch: value,
+								flexSize: newFlexSize,
+							},
+						},
+					} );
+				} }
+				isBlock={ true }
+			>
+				<ToggleGroupControlOption
+					key={ 'fit' }
+					value={ 'fit' }
+					label={ __( 'Fit' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fill' }
+					value={ 'fill' }
+					label={ __( 'Fill' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fixed' }
+					value={ 'fixed' }
+					label={ __( 'Fixed' ) }
+				/>
+			</ToggleGroupControl>
+			{ selfStretch === 'fixed' && (
+				<UnitControl
+					size={ '__unstable-large' }
+					onChange={ ( value ) => {
+						setAttributes( {
+							style: {
+								...style,
+								layout: {
+									...childLayout,
+									flexSize: value,
+								},
+							},
+						} );
+					} }
+					value={ flexSize }
+				/>
+			) }
+		</>
+	);
+}
+
+/**
+ * Determines if there is child layout support.
+ *
+ * @param {Object} props                        Block Props object.
+ * @param {Object} props.__unstableParentLayout Parent layout.
+ *
+ * @return {boolean}     Whether there is support.
+ */
+export function hasChildLayoutSupport( {
+	__unstableParentLayout: parentLayout = {},
+} ) {
+	const {
+		type: parentLayoutType = 'default',
+		allowSizingOnChildren = false,
+	} = parentLayout;
+	const support = parentLayoutType === 'flex' && allowSizingOnChildren;
+
+	return support;
+}
+
+/**
+ * Checks if there is a current value in the child layout attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}      Whether or not the block has a child layout value set.
+ */
+export function hasChildLayoutValue( props ) {
+	return props.attributes.style?.layout !== undefined;
+}
+
+/**
+ * Resets the child layout attribute. This can be used when disabling
+ * child layout controls for a block via a progressive discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block attributes.
+ * @param {Object} props.setAttributes Function to set block attributes.
+ */
+export function resetChildLayout( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: {
+			...style,
+			layout: undefined,
+		},
+	} );
+}
+
+/**
+ * Custom hook that checks if child layout settings have been disabled.
+ *
+ * @param {Object} props Block props.
+ *
+ * @return {boolean}     Whether the child layout setting is disabled.
+ */
+export function useIsChildLayoutDisabled( props ) {
+	const isDisabled = ! useSetting( 'layout' );
+
+	return ! hasChildLayoutSupport( props ) || isDisabled;
+}
+
+export function childLayoutOrientation( parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+}

package/src/hooks/color-panel.js

@@ -81,7 +81,6 @@ export default function ColorPanel( {
 				panelId={ clientId }
 				settings={ settings }
 				__experimentalIsItemGroup={ false }
-				__experimentalHasMultipleOrigins
 				__experimentalIsRenderedInSidebar
 				{ ...colorGradientSettings }
 			/>

package/src/hooks/color.js

@@ -522,8 +522,6 @@ export function ColorEdit( props ) {
 									allSolids,
 									style?.elements?.link?.color?.text
 								),
-								clearable:
-									!! style?.elements?.link?.color?.text,
 								isShownByDefault: defaultColorControls?.link,
 								resetAllFilter: resetAllLinkFilter,
 							},

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

@@ -168,6 +168,6 @@ export const withBlockControls = createHigherOrderComponent(
 
 addFilter(
 	'editor.BlockEdit',
-	'core/style/with-block-controls',
+	'core/content-lock-ui/with-block-controls',
 	withBlockControls
 );

package/src/hooks/dimensions.js

@@ -6,7 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+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';
@@ -46,6 +49,14 @@ import {
 	resetPadding,
 	useIsPaddingDisabled,
 } from './padding';
+import {
+	ChildLayoutEdit,
+	hasChildLayoutSupport,
+	hasChildLayoutValue,
+	resetChildLayout,
+	useIsChildLayoutDisabled,
+	childLayoutOrientation,
+} from './child-layout';
 import useSetting from '../components/use-setting';
 import { store as blockEditorStore } from '../store';
 
@@ -85,8 +96,9 @@ export function DimensionsPanel( 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.name );
+	const isSupported = hasDimensionsSupport( props );
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
 	const paddingMouseOver = useVisualizerMouseOver();
 	const marginMouseOver = useVisualizerMouseOver();
@@ -121,6 +133,8 @@ export function DimensionsPanel( props ) {
 		'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0,
 	} );
 
+	const { __unstableParentLayout: parentLayout } = props;
+
 	return (
 		<>
 			<InspectorControls __experimentalGroup="dimensions">
@@ -182,7 +196,6 @@ export function DimensionsPanel( props ) {
 				) }
 				{ ! isMinHeightDisabled && (
 					<ToolsPanelItem
-						className="single-column"
 						hasValue={ () => hasMinHeightValue( props ) }
 						label={ __( 'Min. height' ) }
 						onDeselect={ () => resetMinHeight( props ) }
@@ -198,6 +211,23 @@ export function DimensionsPanel( props ) {
 						<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 && (
 				<PaddingVisualizer
@@ -218,20 +248,23 @@ export function DimensionsPanel( props ) {
 /**
  * Determine whether there is dimensions related block support.
  *
- * @param {string} blockName Block name.
+ * @param {Object} props Block props.
  *
  * @return {boolean} Whether there is support.
  */
-export function hasDimensionsSupport( blockName ) {
+export function hasDimensionsSupport( props ) {
 	if ( Platform.OS !== 'web' ) {
 		return false;
 	}
 
+	const { name: blockName } = props;
+
 	return (
 		hasGapSupport( blockName ) ||
 		hasMinHeightSupport( blockName ) ||
 		hasPaddingSupport( blockName ) ||
-		hasMarginSupport( blockName )
+		hasMarginSupport( blockName ) ||
+		hasChildLayoutSupport( props )
 	);
 }
 
@@ -247,9 +280,14 @@ const useIsDimensionsDisabled = ( props = {} ) => {
 	const minHeightDisabled = useIsMinHeightDisabled( props );
 	const paddingDisabled = useIsPaddingDisabled( props );
 	const marginDisabled = useIsMarginDisabled( props );
+	const childLayoutDisabled = useIsChildLayoutDisabled( props );
 
 	return (
-		gapDisabled && minHeightDisabled && paddingDisabled && marginDisabled
+		gapDisabled &&
+		minHeightDisabled &&
+		paddingDisabled &&
+		marginDisabled &&
+		childLayoutDisabled
 	);
 };
 

package/src/hooks/font-family.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -111,14 +111,12 @@ export function FontFamilyEdit( {
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
 
-	const value = find(
-		fontFamilies,
+	const value = fontFamilies?.find(
 		( { slug } ) => fontFamily === slug
 	)?.fontFamily;
 
 	function onChange( newValue ) {
-		const predefinedFontFamily = find(
-			fontFamilies,
+		const predefinedFontFamily = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		);
 		setAttributes( {

package/src/hooks/font-size.js

@@ -324,13 +324,22 @@ function addEditPropsForFluidCustomFontSizes( blockType ) {
 		// BlockListContext.Provider. If we set fontSize using editor.
 		// BlockListBlock instead of using getEditWrapperProps then the value is
 		// clobbered when the core/style/addEditProps filter runs.
-		const isFluidTypographyEnabled =
-			!! select( blockEditorStore ).getSettings().__experimentalFeatures
+		const fluidTypographyConfig =
+			select( blockEditorStore ).getSettings().__experimentalFeatures
 				?.typography?.fluid;
 
+		const fluidTypographySettings =
+			typeof fluidTypographyConfig === 'object'
+				? fluidTypographyConfig
+				: {};
+
 		const newFontSize =
-			fontSize && isFluidTypographyEnabled
-				? getComputedFluidTypographyValue( { fontSize } )
+			fontSize && !! fluidTypographyConfig
+				? getComputedFluidTypographyValue( {
+						fontSize,
+						minimumFontSizeLimit:
+							fluidTypographySettings?.minFontSize,
+				  } )
 				: null;
 
 		if ( newFontSize === null ) {

package/src/hooks/layout.js

@@ -416,6 +416,61 @@ export const withLayoutStyles = createHigherOrderComponent(
 	}
 );
 
+/**
+ * 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',
@@ -426,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/min-height.js

@@ -2,16 +2,13 @@
  * 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 HeightControl from '../components/height-control';
 import { DIMENSIONS_SUPPORT_KEY } from './dimensions';
 import { cleanEmptyObject } from './utils';
 
@@ -81,17 +78,6 @@ export function MinHeightEdit( props ) {
 		setAttributes,
 	} = props;
 
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'dimensions.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vh',
-			'vw',
-		],
-	} );
-
 	if ( useIsMinHeightDisabled( props ) ) {
 		return null;
 	}
@@ -109,13 +95,10 @@ export function MinHeightEdit( props ) {
 	};
 
 	return (
-		<UnitControl
+		<HeightControl
 			label={ __( 'Min. height' ) }
 			value={ style?.dimensions?.minHeight }
-			units={ units }
 			onChange={ onChange }
-			min={ 0 }
-			size={ '__unstable-large' }
 		/>
 	);
 }

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

@@ -47,4 +47,30 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should return configured fluid font size styles', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					textDecoration: 'underline',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect(
+			getTypographyClassesAndStyles( attributes, {
+				minFontSize: '1rem',
+			} )
+		).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				textDecoration: 'underline',
+				fontSize:
+					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );

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

@@ -19,23 +19,31 @@ import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object}  attributes            Block attributes.
- * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
+ * @param {Object}         attributes              Block attributes.
+ * @param {Object|boolean} fluidTypographySettings If boolean, whether the function should try to convert font sizes to fluid values,
+ *                                                 otherwise an object containing theme fluid typography settings.
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 export function getTypographyClassesAndStyles(
 	attributes,
-	isFluidFontSizeActive
+	fluidTypographySettings
 ) {
 	let typographyStyles = attributes?.style?.typography || {};
 
-	if ( isFluidFontSizeActive ) {
+	if (
+		!! fluidTypographySettings &&
+		( true === fluidTypographySettings ||
+			Object.keys( fluidTypographySettings ).length !== 0 )
+	) {
+		const newFontSize =
+			getComputedFluidTypographyValue( {
+				fontSize: attributes?.style?.typography?.fontSize,
+				minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+			} ) || attributes?.style?.typography?.fontSize;
 		typographyStyles = {
 			...typographyStyles,
-			fontSize: getComputedFluidTypographyValue( {
-				fontSize: attributes?.style?.typography?.fontSize,
-			} ),
+			fontSize: newFontSize,
 		};
 	}