@wordpress/block-editor 12.15.0 → 12.16.0

package/src/hooks/duotone.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import { extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 
@@ -13,7 +12,7 @@ import {
 	getBlockType,
 	hasBlockSupport,
 } from '@wordpress/blocks';
-import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { useMemo, useEffect } from '@wordpress/element';
 
@@ -95,8 +94,7 @@ export function getDuotonePresetFromColors( colors, duotonePalette ) {
 	return preset ? `var:preset|duotone|${ preset.slug }` : undefined;
 }
 
-function DuotonePanel( { attributes, setAttributes, name } ) {
-	const style = attributes?.style;
+function DuotonePanelPure( { style, setAttributes, name } ) {
 	const duotoneStyle = style?.color?.duotone;
 	const settings = useBlockSettings( name );
 	const blockEditingMode = useBlockEditingMode();
@@ -176,6 +174,16 @@ function DuotonePanel( { attributes, setAttributes, name } ) {
 	);
 }
 
+export default {
+	shareWithChildBlocks: true,
+	edit: DuotonePanelPure,
+	useBlockProps,
+	attributeKeys: [ 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'filter.duotone' );
+	},
+};
+
 /**
  * Filters registered block settings, extending attributes to include
  * the `duotone` attribute.
@@ -204,38 +212,7 @@ function addDuotoneAttributes( settings ) {
 	return settings;
 }
 
-/**
- * Override the default edit UI to include toolbar controls for duotone if the
- * block supports duotone.
- *
- * @param {Function} BlockEdit Original component.
- *
- * @return {Function} Wrapped component.
- */
-const withDuotoneControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		// Previous `color.__experimentalDuotone` support flag is migrated via
-		// block_type_metadata_settings filter in `lib/block-supports/duotone.php`.
-		const hasDuotoneSupport = hasBlockSupport(
-			props.name,
-			'filter.duotone'
-		);
-
-		// CAUTION: code added before this line will be executed
-		// for all blocks, not just those that support duotone. Code added
-		// above this line should be carefully evaluated for its impact on
-		// performance.
-		return (
-			<>
-				{ hasDuotoneSupport && <DuotonePanel { ...props } /> }
-				<BlockEdit { ...props } />
-			</>
-		);
-	},
-	'withDuotoneControls'
-);
-
-function DuotoneStyles( {
+function useDuotoneStyles( {
 	clientId,
 	id: filterId,
 	selector: duotoneSelector,
@@ -333,103 +310,69 @@ function DuotoneStyles( {
 			blockElement.style.display = display;
 		}
 	}, [ isValidFilter, blockElement ] );
-
-	return null;
 }
 
-/**
- * Override the default block element to include duotone styles.
- *
- * @param {Function} BlockListBlock Original component.
- *
- * @return {Function} Wrapped component.
- */
-const withDuotoneStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const id = useInstanceId( BlockListBlock );
-
-		const selector = useMemo( () => {
-			const blockType = getBlockType( props.name );
-
-			if ( blockType ) {
-				// Backwards compatibility for `supports.color.__experimentalDuotone`
-				// is provided via the `block_type_metadata_settings` filter. If
-				// `supports.filter.duotone` has not been set and the
-				// experimental property has been, the experimental property
-				// value is copied into `supports.filter.duotone`.
-				const duotoneSupport = getBlockSupport(
-					blockType,
-					'filter.duotone',
-					false
-				);
-				if ( ! duotoneSupport ) {
-					return null;
-				}
-
-				// If the experimental duotone support was set, that value is
-				// to be treated as a selector and requires scoping.
-				const experimentalDuotone = getBlockSupport(
-					blockType,
-					'color.__experimentalDuotone',
-					false
-				);
-				if ( experimentalDuotone ) {
-					const rootSelector = getBlockCSSSelector( blockType );
-					return typeof experimentalDuotone === 'string'
-						? scopeSelector( rootSelector, experimentalDuotone )
-						: rootSelector;
-				}
-
-				// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
-				return getBlockCSSSelector( blockType, 'filter.duotone', {
-					fallback: true,
-				} );
+function useBlockProps( { name, style } ) {
+	const id = useInstanceId( useBlockProps );
+	const selector = useMemo( () => {
+		const blockType = getBlockType( name );
+
+		if ( blockType ) {
+			// Backwards compatibility for `supports.color.__experimentalDuotone`
+			// is provided via the `block_type_metadata_settings` filter. If
+			// `supports.filter.duotone` has not been set and the
+			// experimental property has been, the experimental property
+			// value is copied into `supports.filter.duotone`.
+			const duotoneSupport = getBlockSupport(
+				blockType,
+				'filter.duotone',
+				false
+			);
+			if ( ! duotoneSupport ) {
+				return null;
 			}
-		}, [ props.name ] );
-
-		const attribute = props?.attributes?.style?.color?.duotone;
-
-		const filterClass = `wp-duotone-${ id }`;
-
-		const shouldRender = selector && attribute;
-
-		const className = shouldRender
-			? classnames( props?.className, filterClass )
-			: props?.className;
-
-		// CAUTION: code added before this line will be executed
-		// for all blocks, not just those that support duotone. Code added
-		// above this line should be carefully evaluated for its impact on
-		// performance.
-		return (
-			<>
-				{ shouldRender && (
-					<DuotoneStyles
-						clientId={ props.clientId }
-						id={ filterClass }
-						selector={ selector }
-						attribute={ attribute }
-					/>
-				) }
-				<BlockListBlock { ...props } className={ className } />
-			</>
-		);
-	},
-	'withDuotoneStyles'
-);
+
+			// If the experimental duotone support was set, that value is
+			// to be treated as a selector and requires scoping.
+			const experimentalDuotone = getBlockSupport(
+				blockType,
+				'color.__experimentalDuotone',
+				false
+			);
+			if ( experimentalDuotone ) {
+				const rootSelector = getBlockCSSSelector( blockType );
+				return typeof experimentalDuotone === 'string'
+					? scopeSelector( rootSelector, experimentalDuotone )
+					: rootSelector;
+			}
+
+			// Regular filter.duotone support uses filter.duotone selectors with fallbacks.
+			return getBlockCSSSelector( blockType, 'filter.duotone', {
+				fallback: true,
+			} );
+		}
+	}, [ name ] );
+
+	const attribute = style?.color?.duotone;
+
+	const filterClass = `wp-duotone-${ id }`;
+
+	const shouldRender = selector && attribute;
+
+	useDuotoneStyles( {
+		clientId: id,
+		id: filterClass,
+		selector,
+		attribute,
+	} );
+
+	return {
+		className: shouldRender ? filterClass : '',
+	};
+}
 
 addFilter(
 	'blocks.registerBlockType',
 	'core/editor/duotone/add-attributes',
 	addDuotoneAttributes
 );
-addFilter(
-	'editor.BlockEdit',
-	'core/editor/duotone/with-editor-controls',
-	withDuotoneControls
-);
-addFilter(
-	'editor.BlockListBlock',
-	'core/editor/duotone/with-styles',
-	withDuotoneStyles
-);

package/src/hooks/font-family.js

@@ -74,31 +74,18 @@ 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_FAMILY_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;
+function useBlockProps( { name, fontFamily } ) {
+	return addSaveProps( {}, name, { fontFamily } );
 }
 
+export default {
+	useBlockProps,
+	attributeKeys: [ 'fontFamily' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY );
+	},
+};
+
 /**
  * Resets the font family block support attribute. This can be used when
  * disabling the font family support controls for a block via a progressive
@@ -122,9 +109,3 @@ addFilter(
 	'core/fontFamily/addSaveProps',
 	addSaveProps
 );
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/fontFamily/addEditProps',
-	addEditProps
-);

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,27 +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 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';