@wordpress/block-editor 12.14.0 → 12.16.0

package/src/hooks/font-size.js

@@ -4,7 +4,6 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
-import { createHigherOrderComponent } from '@wordpress/compose';
 import { select } from '@wordpress/data';
 
 /**
@@ -59,19 +58,23 @@ function addAttributes( settings ) {
 /**
  * Override props assigned to save component to inject font size.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type.
- * @param {Object} attributes Block attributes.
+ * @param {Object} props           Additional props applied to save element.
+ * @param {Object} blockNameOrType Block type.
+ * @param {Object} attributes      Block attributes.
  *
  * @return {Object} Filtered props applied to save element.
  */
-function addSaveProps( props, blockType, attributes ) {
-	if ( ! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ) {
+function addSaveProps( props, blockNameOrType, attributes ) {
+	if ( ! hasBlockSupport( blockNameOrType, FONT_SIZE_SUPPORT_KEY ) ) {
 		return props;
 	}
 
 	if (
-		shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )
+		shouldSkipSerialization(
+			blockNameOrType,
+			TYPOGRAPHY_SUPPORT_KEY,
+			'fontSize'
+		)
 	) {
 		return props;
 	}
@@ -85,31 +88,6 @@ function addSaveProps( props, blockType, attributes ) {
 	return props;
 }
 
-/**
- * Filters registered block settings to expand the block edit wrapper
- * by applying the desired styles and classnames.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-function addEditProps( settings ) {
-	if ( ! hasBlockSupport( settings, FONT_SIZE_SUPPORT_KEY ) ) {
-		return settings;
-	}
-
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
-		return addSaveProps( props, settings, attributes );
-	};
-
-	return settings;
-}
-
 /**
  * Inspector control panel containing the font size related configuration
  *
@@ -175,62 +153,69 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) {
 	);
 }
 
-/**
- * Add inline styles for font sizes.
- * Ideally, this is not needed and themes load the font-size classes on the
- * editor.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-const withFontSizeInlineStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const [ fontSizes ] = useSettings( 'typography.fontSizes' );
-		const {
-			name: blockName,
-			attributes: { fontSize, style },
-			wrapperProps,
-		} = props;
+function useBlockProps( { name, fontSize, style } ) {
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
-		// Only add inline styles if the block supports font sizes,
-		// doesn't skip serialization of font sizes,
-		// doesn't already have an inline font size,
-		// and does have a class to extract the font size from.
-		if (
-			! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) ||
-			shouldSkipSerialization(
-				blockName,
-				TYPOGRAPHY_SUPPORT_KEY,
-				'fontSize'
-			) ||
-			! fontSize ||
-			style?.typography?.fontSize
-		) {
-			return <BlockListBlock { ...props } />;
-		}
+	// Only add inline styles if the block supports font sizes,
+	// doesn't skip serialization of font sizes,
+	// doesn't already have an inline font size,
+	// and does have a class to extract the font size from.
+	if (
+		! hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY ) ||
+		shouldSkipSerialization( name, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' ) ||
+		! fontSize
+	) {
+		return;
+	}
 
-		const fontSizeValue = getFontSize(
-			fontSizes,
-			fontSize,
-			style?.typography?.fontSize
-		).size;
+	let props = {};
 
-		const newProps = {
-			...props,
-			wrapperProps: {
-				...wrapperProps,
-				style: {
-					fontSize: fontSizeValue,
-					...wrapperProps?.style,
-				},
+	if ( ! style?.typography?.fontSize ) {
+		props = {
+			style: {
+				fontSize: getFontSize(
+					fontSizes,
+					fontSize,
+					style?.typography?.fontSize
+				).size,
 			},
 		};
+	}
+
+	// TODO: This sucks! We should be using useSetting( 'typography.fluid' )
+	// or even useSelect( blockEditorStore ). We can't do either here
+	// because getEditWrapperProps is a plain JavaScript function called by
+	// BlockListBlock and not a React component rendered within
+	// 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.
+
+	// TODO: We can do the thing above now.
+	const fluidTypographySettings = getFluidTypographyOptionsFromSettings(
+		select( blockEditorStore ).getSettings().__experimentalFeatures
+	);
+
+	if ( fontSize ) {
+		props = {
+			style: {
+				fontSize: getTypographyFontSizeValue(
+					{ size: fontSize },
+					fluidTypographySettings
+				),
+			},
+		};
+	}
 
-		return <BlockListBlock { ...newProps } />;
+	return addSaveProps( props, name, { fontSize } );
+}
+
+export default {
+	useBlockProps,
+	attributeKeys: [ 'fontSize', 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY );
 	},
-	'withFontSizeInlineStyles'
-);
+};
 
 const MIGRATION_PATHS = {
 	fontSize: [ [ 'fontSize' ], [ 'style', 'typography', 'fontSize' ] ],
@@ -254,70 +239,6 @@ function addTransforms( result, source, index, results ) {
 	);
 }
 
-/**
- * Allow custom font sizes to appear fluid when fluid typography is enabled at
- * the theme level.
- *
- * Adds a custom getEditWrapperProps() callback to all block types that support
- * font sizes. Then, if fluid typography is enabled, this callback will swap any
- * custom font size in style.fontSize with a fluid font size (i.e. one that uses
- * clamp()).
- *
- * It's important that this hook runs after 'core/style/addEditProps' sets
- * style.fontSize as otherwise fontSize will be overwritten.
- *
- * @param {Object} blockType Block settings object.
- */
-function addEditPropsForFluidCustomFontSizes( blockType ) {
-	if (
-		! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ||
-		shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )
-	) {
-		return blockType;
-	}
-
-	const existingGetEditWrapperProps = blockType.getEditWrapperProps;
-
-	blockType.getEditWrapperProps = ( attributes ) => {
-		const wrapperProps = existingGetEditWrapperProps
-			? existingGetEditWrapperProps( attributes )
-			: {};
-
-		const fontSize = wrapperProps?.style?.fontSize;
-
-		// TODO: This sucks! We should be using useSetting( 'typography.fluid' )
-		// or even useSelect( blockEditorStore ). We can't do either here
-		// because getEditWrapperProps is a plain JavaScript function called by
-		// BlockListBlock and not a React component rendered within
-		// 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 fluidTypographySettings = getFluidTypographyOptionsFromSettings(
-			select( blockEditorStore ).getSettings().__experimentalFeatures
-		);
-		const newFontSize = fontSize
-			? getTypographyFontSizeValue(
-					{ size: fontSize },
-					fluidTypographySettings
-			  )
-			: null;
-
-		if ( newFontSize === null ) {
-			return wrapperProps;
-		}
-
-		return {
-			...wrapperProps,
-			style: {
-				...wrapperProps?.style,
-				fontSize: newFontSize,
-			},
-		};
-	};
-
-	return blockType;
-}
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/font/addAttribute',
@@ -330,25 +251,8 @@ addFilter(
 	addSaveProps
 );
 
-addFilter( 'blocks.registerBlockType', 'core/font/addEditProps', addEditProps );
-
-addFilter(
-	'editor.BlockListBlock',
-	'core/font-size/with-font-size-inline-styles',
-	withFontSizeInlineStyles
-);
-
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',
 	'core/font-size/addTransforms',
 	addTransforms
 );
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/font-size/addEditPropsForFluidCustomFontSizes',
-	addEditPropsForFluidCustomFontSizes,
-	// Run after 'core/style/addEditProps' so that the style object has already
-	// been translated into inline CSS.
-	11
-);

package/src/hooks/index.js

@@ -1,28 +1,55 @@
 /**
  * Internal dependencies
  */
+import { createBlockEditFilter, createBlockListBlockFilter } from './utils';
 import './compat';
-import './align';
+import align from './align';
 import './lock';
-import './anchor';
+import anchor from './anchor';
 import './aria-label';
-import './custom-class-name';
+import customClassName from './custom-class-name';
 import './generated-class-name';
-import './style';
+import style from './style';
 import './settings';
-import './color';
-import './duotone';
-import './font-family';
-import './font-size';
-import './border';
-import './position';
-import './layout';
+import color from './color';
+import duotone from './duotone';
+import fontFamily from './font-family';
+import fontSize from './font-size';
+import border from './border';
+import position from './position';
+import layout from './layout';
+import childLayout from './layout-child';
 import './content-lock-ui';
 import './metadata';
-import './custom-fields';
-import './block-hooks';
-import './block-renaming';
-import './block-rename-ui';
+import customFields from './custom-fields';
+import blockHooks from './block-hooks';
+import blockRenaming from './block-renaming';
+
+createBlockEditFilter(
+	[
+		align,
+		anchor,
+		customClassName,
+		style,
+		duotone,
+		position,
+		layout,
+		window.__experimentalConnections ? customFields : null,
+		blockHooks,
+		blockRenaming,
+	].filter( Boolean )
+);
+createBlockListBlockFilter( [
+	align,
+	style,
+	color,
+	duotone,
+	fontFamily,
+	fontSize,
+	border,
+	position,
+	childLayout,
+] );
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

package/src/hooks/index.native.js

@@ -1,16 +1,19 @@
 /**
  * Internal dependencies
  */
+import { createBlockEditFilter } from './utils';
 import './compat';
-import './align';
-import './anchor';
+import align from './align';
+import anchor from './anchor';
 import './custom-class-name';
 import './generated-class-name';
-import './style';
+import style from './style';
 import './color';
 import './font-size';
 import './layout';
 
+createBlockEditFilter( [ align, anchor, style ] );
+
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';

package/src/hooks/layout-child.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { useStyleOverride } from './utils';
+
+function useBlockPropsChildLayoutStyles( { style } ) {
+	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
+		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
+	} );
+	const layout = style?.layout ?? {};
+	const { selfStretch, flexSize } = layout;
+	const id = useInstanceId( useBlockPropsChildLayoutStyles );
+	const selector = `.wp-container-content-${ id }`;
+
+	let css = '';
+	if ( shouldRenderChildLayoutStyles ) {
+		if ( selfStretch === 'fixed' && flexSize ) {
+			css = `${ selector } {
+				flex-basis: ${ flexSize };
+				box-sizing: border-box;
+			}`;
+		} else if ( selfStretch === 'fill' ) {
+			css = `${ selector } {
+				flex-grow: 1;
+			}`;
+		}
+	}
+
+	useStyleOverride( { css } );
+
+	// Only attach a container class if there is generated CSS to be attached.
+	if ( ! css ) {
+		return;
+	}
+
+	// Attach a `wp-container-content` id-based classname.
+	return { className: `wp-container-content-${ id }` };
+}
+
+export default {
+	useBlockProps: useBlockPropsChildLayoutStyles,
+	attributeKeys: [ 'style' ],
+	hasSupport() {
+		return true;
+	},
+};

package/src/hooks/layout.js

@@ -133,13 +133,11 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 	return css;
 }
 
-function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
+function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 	const settings = useBlockSettings( blockName );
-	const {
-		layout: { allowEditing: allowEditingSetting },
-	} = settings;
-
-	const { layout } = attributes;
+	// Block settings come from theme.json under settings.[blockName].
+	const { layout: layoutSettings } = settings;
+	// Layout comes from block attributes.
 	const [ defaultThemeLayout ] = useSettings( 'layout' );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -153,17 +151,22 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		return null;
 	}
 
+	// Layout block support comes from the block's block.json.
 	const layoutBlockSupport = getBlockSupport(
 		blockName,
 		layoutBlockSupportKey,
 		{}
 	);
+	const blockSupportAndThemeSettings = {
+		...layoutSettings,
+		...layoutBlockSupport,
+	};
 	const {
 		allowSwitching,
-		allowEditing = allowEditingSetting ?? true,
+		allowEditing = true,
 		allowInheriting = true,
 		default: defaultBlockLayout,
-	} = layoutBlockSupport;
+	} = blockSupportAndThemeSettings;
 
 	if ( ! allowEditing ) {
 		return null;
@@ -260,14 +263,14 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 						<layoutType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
-							layoutBlockSupport={ layoutBlockSupport }
+							layoutBlockSupport={ blockSupportAndThemeSettings }
 						/>
 					) }
 					{ constrainedType && displayControlsForLegacyLayouts && (
 						<constrainedType.inspectorControls
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
-							layoutBlockSupport={ layoutBlockSupport }
+							layoutBlockSupport={ blockSupportAndThemeSettings }
 						/>
 					) }
 				</PanelBody>
@@ -283,6 +286,15 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 	);
 }
 
+export default {
+	shareWithChildBlocks: true,
+	edit: LayoutPanelPure,
+	attributeKeys: [ 'layout' ],
+	hasSupport( name ) {
+		return hasLayoutBlockSupport( name );
+	},
+};
+
 function LayoutTypeSwitcher( { type, onChange } ) {
 	return (
 		<ButtonGroup>
@@ -324,25 +336,6 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-/**
- * Override the default edit UI to include layout controls
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-export const withLayoutControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const supportLayout = hasLayoutBlockSupport( props.name );
-
-		return [
-			supportLayout && <LayoutPanel key="layout" { ...props } />,
-			<BlockEdit key="edit" { ...props } />,
-		];
-	},
-	'withLayoutControls'
-);
-
 function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
 	const { name, attributes } = props;
 	const id = useInstanceId( BlockListBlock );
@@ -355,8 +348,9 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
 			: layout || defaultBlockLayout || {};
 	const layoutClasses = useLayoutClasses( attributes, name );
 
+	const selectorPrefix = `wp-container-${ kebabCase( name ) }-layout-`;
 	// Higher specificity to override defaults from theme.json.
-	const selector = `.wp-container-${ id }.wp-container-${ id }`;
+	const selector = `.${ selectorPrefix }${ id }.${ selectorPrefix }${ id }`;
 	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 
@@ -374,7 +368,7 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
 	// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
 	const layoutClassNames = classnames(
 		{
-			[ `wp-container-${ id }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
+			[ `${ selectorPrefix }${ id }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
 		},
 		layoutClasses
 	);
@@ -423,75 +417,6 @@ export const withLayoutStyles = createHigherOrderComponent(
 	'withLayoutStyles'
 );
 
-function BlockWithChildLayoutStyles( { block: BlockListBlock, props } ) {
-	const layout = props.attributes.style?.layout ?? {};
-	const { selfStretch, flexSize } = layout;
-
-	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 }` ]: !! css, // Only attach a container class if there is generated CSS to be attached.
-	} );
-
-	useStyleOverride( { css } );
-
-	return <BlockListBlock { ...props } className={ className } />;
-}
-
-/**
- * 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 layout = props.attributes.style?.layout ?? {};
-		const { selfStretch, flexSize } = layout;
-		const hasChildLayout = selfStretch || flexSize;
-
-		const shouldRenderChildLayoutStyles = useSelect(
-			( select ) => {
-				// The callback returns early to avoid block editor subscription.
-				if ( ! hasChildLayout ) {
-					return false;
-				}
-
-				return ! select( blockEditorStore ).getSettings()
-					.disableLayoutStyles;
-			},
-			[ hasChildLayout ]
-		);
-
-		if ( ! shouldRenderChildLayoutStyles ) {
-			return <BlockListBlock { ...props } />;
-		}
-
-		return (
-			<BlockWithChildLayoutStyles
-				block={ BlockListBlock }
-				props={ props }
-			/>
-		);
-	},
-	'withChildLayoutStyles'
-);
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/layout/addAttribute',
@@ -502,13 +427,3 @@ 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',
-	withLayoutControls
-);

package/src/hooks/padding.js

@@ -16,11 +16,11 @@ function getComputedCSS( element, property ) {
 		.getPropertyValue( property );
 }
 
-export function PaddingVisualizer( { clientId, attributes, forceShow } ) {
+export function PaddingVisualizer( { clientId, value, forceShow } ) {
 	const blockElement = useBlockElement( clientId );
 	const [ style, setStyle ] = useState();
 
-	const padding = attributes?.style?.spacing?.padding;
+	const padding = value?.spacing?.padding;
 
 	useEffect( () => {
 		if (