@wordpress/block-editor 12.15.0 → 12.16.1-next.79a6196f.0

package/src/hooks/font-family.js

@@ -4,13 +4,14 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
-import { kebabCase } from '../utils/object';
+import { unlock } from '../lock-unlock';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 
@@ -67,6 +68,7 @@ function addSaveProps( props, blockType, attributes ) {
 
 	// Use TokenList to dedupe classes.
 	const classes = new TokenList( props.className );
+	const { kebabCase } = unlock( componentsPrivateApis );
 	classes.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` );
 	const newClassName = classes.value;
 	props.className = newClassName ? newClassName : undefined;
@@ -74,31 +76,19 @@ 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,
+	addSaveProps,
+	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
@@ -116,15 +106,3 @@ addFilter(
 	'core/fontFamily/addAttribute',
 	addAttributes
 );
-
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'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,70 @@ 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 addSaveProps( props, name, { fontSize } );
+}
 
-		return <BlockListBlock { ...newProps } />;
+export default {
+	useBlockProps,
+	addSaveProps,
+	attributeKeys: [ 'fontSize', 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY );
 	},
-	'withFontSizeInlineStyles'
-);
+};
 
 const MIGRATION_PATHS = {
 	fontSize: [ [ 'fontSize' ], [ 'style', 'typography', 'fontSize' ] ],
@@ -254,101 +240,14 @@ 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',
 	addAttributes
 );
 
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/font/addSaveProps',
-	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,69 @@
 /**
  * Internal dependencies
  */
+import {
+	createBlockEditFilter,
+	createBlockListBlockFilter,
+	createBlockSaveFilter,
+} from './utils';
 import './compat';
-import './align';
+import align from './align';
 import './lock';
-import './anchor';
-import './aria-label';
-import './custom-class-name';
+import anchor from './anchor';
+import ariaLabel from './aria-label';
+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 './content-lock-ui';
+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 contentLockUI from './content-lock-ui';
 import './metadata';
-import './custom-fields';
-import './block-hooks';
-import './block-renaming';
+import blockHooks from './block-hooks';
+import blockRenaming from './block-renaming';
+
+createBlockEditFilter(
+	[
+		align,
+		anchor,
+		customClassName,
+		style,
+		duotone,
+		position,
+		layout,
+		contentLockUI,
+		blockHooks,
+		blockRenaming,
+	].filter( Boolean )
+);
+createBlockListBlockFilter( [
+	align,
+	style,
+	color,
+	duotone,
+	fontFamily,
+	fontSize,
+	border,
+	position,
+	childLayout,
+] );
+createBlockSaveFilter( [
+	align,
+	anchor,
+	ariaLabel,
+	customClassName,
+	border,
+	color,
+	style,
+	fontFamily,
+	fontSize,
+] );
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

package/src/hooks/index.native.js

@@ -1,16 +1,32 @@
 /**
  * Internal dependencies
  */
+import {
+	createBlockEditFilter,
+	createBlockListBlockFilter,
+	createBlockSaveFilter,
+} from './utils';
 import './compat';
-import './align';
-import './anchor';
-import './custom-class-name';
+import align from './align';
+import anchor from './anchor';
+import customClassName from './custom-class-name';
 import './generated-class-name';
-import './style';
-import './color';
-import './font-size';
+import style from './style';
+import color from './color';
+import fontSize from './font-size';
 import './layout';
 
+createBlockEditFilter( [ align, anchor, style ] );
+createBlockListBlockFilter( [ align, style, color, fontSize ] );
+createBlockSaveFilter( [
+	align,
+	anchor,
+	customClassName,
+	color,
+	style,
+	fontSize,
+] );
+
 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;
+	},
+};