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

package/src/hooks/test/style.js

@@ -1,12 +1,7 @@
-/**
- * WordPress dependencies
- */
-import { applyFilters } from '@wordpress/hooks';
-
 /**
  * Internal dependencies
  */
-import { getInlineStyles, omitStyle } from '../style';
+import _style, { getInlineStyles, omitStyle } from '../style';
 
 describe( 'getInlineStyles', () => {
 	it( 'should return an empty object when called with undefined', () => {
@@ -120,11 +115,6 @@ describe( 'getInlineStyles', () => {
 } );
 
 describe( 'addSaveProps', () => {
-	const addSaveProps = applyFilters.bind(
-		null,
-		'blocks.getSaveContent.extraProps'
-	);
-
 	const blockSettings = {
 		save: () => <div className="default" />,
 		category: 'text',
@@ -166,7 +156,7 @@ describe( 'addSaveProps', () => {
 	};
 
 	it( 'should serialize all styles by default', () => {
-		const extraProps = addSaveProps( {}, blockSettings, attributes );
+		const extraProps = _style.addSaveProps( {}, blockSettings, attributes );
 
 		expect( extraProps.style ).toEqual( {
 			background:
@@ -183,7 +173,7 @@ describe( 'addSaveProps', () => {
 		const settings = applySkipSerialization( {
 			typography: true,
 		} );
-		const extraProps = addSaveProps( {}, settings, attributes );
+		const extraProps = _style.addSaveProps( {}, settings, attributes );
 
 		expect( extraProps.style ).toEqual( {
 			background:
@@ -198,7 +188,7 @@ describe( 'addSaveProps', () => {
 			color: [ 'gradient' ],
 			typography: [ 'textDecoration', 'textTransform' ],
 		} );
-		const extraProps = addSaveProps( {}, settings, attributes );
+		const extraProps = _style.addSaveProps( {}, settings, attributes );
 
 		expect( extraProps.style ).toEqual( {
 			color: '#d92828',

package/src/hooks/typography.js

@@ -3,6 +3,7 @@
  */
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { useMemo, useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -16,7 +17,8 @@ import {
 import { LINE_HEIGHT_SUPPORT_KEY } from './line-height';
 import { FONT_FAMILY_SUPPORT_KEY } from './font-family';
 import { FONT_SIZE_SUPPORT_KEY } from './font-size';
-import { cleanEmptyObject, useBlockSettings } from './utils';
+import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
 
 function omit( object, keys ) {
 	return Object.fromEntries(
@@ -106,22 +108,18 @@ function TypographyInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-export function TypographyPanel( {
-	clientId,
-	name,
-	attributes,
-	setAttributes,
-	__unstableParentLayout,
-} ) {
-	const settings = useBlockSettings( name, __unstableParentLayout );
+export function TypographyPanel( { clientId, name, setAttributes, settings } ) {
+	function selector( select ) {
+		const { style, fontFamily, fontSize } =
+			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+		return { style, fontFamily, fontSize };
+	}
+	const { style, fontFamily, fontSize } = useSelect( selector, [ clientId ] );
 	const isEnabled = useHasTypographyPanel( settings );
-	const value = useMemo( () => {
-		return attributesToStyle( {
-			style: attributes.style,
-			fontFamily: attributes.fontFamily,
-			fontSize: attributes.fontSize,
-		} );
-	}, [ attributes.style, attributes.fontSize, attributes.fontFamily ] );
+	const value = useMemo(
+		() => attributesToStyle( { style, fontFamily, fontSize } ),
+		[ style, fontSize, fontFamily ]
+	);
 
 	const onChange = ( newStyle ) => {
 		setAttributes( styleToAttributes( newStyle ) );

package/src/hooks/typography.native.js

@@ -1,10 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
-/**
- * External dependencies
- */
+import { useSelect } from '@wordpress/data';
+import { pure } from '@wordpress/compose';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -12,17 +10,12 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
+import { useHasTypographyPanel } from '../components/global-styles/typography-panel';
 
-import {
-	LINE_HEIGHT_SUPPORT_KEY,
-	LineHeightEdit,
-	useIsLineHeightDisabled,
-} from './line-height';
-import {
-	FONT_SIZE_SUPPORT_KEY,
-	FontSizeEdit,
-	useIsFontSizeDisabled,
-} from './font-size';
+import { store as blockEditorStore } from '../store';
+
+import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height';
+import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size';
 
 export const TYPOGRAPHY_SUPPORT_KEY = 'typography';
 export const TYPOGRAPHY_SUPPORT_KEYS = [
@@ -30,11 +23,26 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_SIZE_SUPPORT_KEY,
 ];
 
-export function TypographyPanel( props ) {
-	const isDisabled = useIsTypographyDisabled( props );
-	const isSupported = hasTypographySupport( props.name );
-
-	if ( isDisabled || ! isSupported ) return null;
+function TypographyPanelPure( { clientId, setAttributes, settings } ) {
+	function selector( select ) {
+		const { style, fontFamily, fontSize } =
+			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+		return { style, fontFamily, fontSize };
+	}
+	const { style, fontSize } = useSelect( selector, [ clientId ] );
+	const isEnabled = useHasTypographyPanel( settings );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	const props = {
+		attributes: {
+			fontSize,
+			style,
+		},
+		setAttributes,
+	};
 
 	return (
 		<InspectorControls>
@@ -46,17 +54,7 @@ export function TypographyPanel( props ) {
 	);
 }
 
-const hasTypographySupport = ( blockName ) => {
-	return TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) =>
-		hasBlockSupport( blockName, key )
-	);
-};
-
-function useIsTypographyDisabled( props = {} ) {
-	const configs = [
-		useIsFontSizeDisabled( props ),
-		useIsLineHeightDisabled( props ),
-	];
-
-	return configs.filter( Boolean ).length === configs.length;
-}
+// We don't want block controls to re-render when typing inside a block. `pure`
+// will prevent re-renders unless props change, so only pass the needed props
+// and not the whole attributes object.
+export const TypographyPanel = pure( TypographyPanelPure );

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

@@ -3,6 +3,11 @@
  */
 import classnames from 'classnames';
 
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -12,7 +17,7 @@ import {
 	getTypographyFontSizeValue,
 	getFluidTypographyOptionsFromSettings,
 } from '../components/global-styles/typography-utils';
-import { kebabCase } from '../utils/object';
+import { unlock } from '../lock-unlock';
 
 /*
  * This utility is intended to assist where the serialization of the typography
@@ -29,6 +34,7 @@ import { kebabCase } from '../utils/object';
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 export function getTypographyClassesAndStyles( attributes, settings ) {
+	const { kebabCase } = unlock( componentsPrivateApis );
 	let typographyStyles = attributes?.style?.typography || {};
 	const fluidTypographySettings =
 		getFluidTypographyOptionsFromSettings( settings );

package/src/hooks/utils.js

@@ -2,17 +2,28 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, useEffect, useId } from '@wordpress/element';
+import { useMemo, useEffect, useId, useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
+import { createHigherOrderComponent, pure } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+	mayDisplayParentControlsKey,
+} from '../components/block-edit/context';
 import { useSettings } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
 import { getValueFromObjectPath, setImmutably } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 
 /**
  * Removed falsy values from nested object.
@@ -101,14 +112,18 @@ export function transformStyles(
  * Check whether serialization of specific block support feature or set should
  * be skipped.
  *
- * @param {string|Object} blockType  Block name or block type object.
- * @param {string}        featureSet Name of block support feature set.
- * @param {string}        feature    Name of the individual feature to check.
+ * @param {string|Object} blockNameOrType Block name or block type object.
+ * @param {string}        featureSet      Name of block support feature set.
+ * @param {string}        feature         Name of the individual feature to check.
  *
  * @return {boolean} Whether serialization should occur.
  */
-export function shouldSkipSerialization( blockType, featureSet, feature ) {
-	const support = getBlockSupport( blockType, featureSet );
+export function shouldSkipSerialization(
+	blockNameOrType,
+	featureSet,
+	feature
+) {
+	const support = getBlockSupport( blockNameOrType, featureSet );
 	const skipSerialization = support?.__experimentalSkipSerialization;
 
 	if ( Array.isArray( skipSerialization ) ) {
@@ -159,8 +174,13 @@ export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
  */
 export function useBlockSettings( name, parentLayout ) {
 	const [
+		backgroundImage,
+		backgroundSize,
 		fontFamilies,
-		fontSizes,
+		userFontSizes,
+		themeFontSizes,
+		defaultFontSizes,
+		defaultFontSizesEnabled,
 		customFontSize,
 		fontStyle,
 		fontWeight,
@@ -202,8 +222,13 @@ export function useBlockSettings( name, parentLayout ) {
 		isHeadingEnabled,
 		isButtonEnabled,
 	] = useSettings(
+		'background.backgroundImage',
+		'background.backgroundSize',
 		'typography.fontFamilies',
-		'typography.fontSizes',
+		'typography.fontSizes.custom',
+		'typography.fontSizes.theme',
+		'typography.fontSizes.default',
+		'typography.defaultFontSizes',
 		'typography.customFontSize',
 		'typography.fontStyle',
 		'typography.fontWeight',
@@ -248,6 +273,10 @@ export function useBlockSettings( name, parentLayout ) {
 
 	const rawSettings = useMemo( () => {
 		return {
+			background: {
+				backgroundImage,
+				backgroundSize,
+			},
 			color: {
 				palette: {
 					custom: customColors,
@@ -281,9 +310,12 @@ export function useBlockSettings( name, parentLayout ) {
 					custom: fontFamilies,
 				},
 				fontSizes: {
-					custom: fontSizes,
+					custom: userFontSizes,
+					theme: themeFontSizes,
+					default: defaultFontSizes,
 				},
 				customFontSize,
+				defaultFontSizes: defaultFontSizesEnabled,
 				fontStyle,
 				fontWeight,
 				lineHeight,
@@ -315,8 +347,13 @@ export function useBlockSettings( name, parentLayout ) {
 			parentLayout,
 		};
 	}, [
+		backgroundImage,
+		backgroundSize,
 		fontFamilies,
-		fontSizes,
+		userFontSizes,
+		themeFontSizes,
+		defaultFontSizes,
+		defaultFontSizesEnabled,
 		customFontSize,
 		fontStyle,
 		fontWeight,
@@ -362,3 +399,217 @@ export function useBlockSettings( name, parentLayout ) {
 
 	return useSettingsForBlockElement( rawSettings, name );
 }
+
+export function createBlockEditFilter( features ) {
+	// We don't want block controls to re-render when typing inside a block.
+	// `pure` will prevent re-renders unless props change, so only pass the
+	// needed props and not the whole attributes object.
+	features = features.map( ( settings ) => {
+		return { ...settings, Edit: pure( settings.edit ) };
+	} );
+	const withBlockEditHooks = createHigherOrderComponent(
+		( OriginalBlockEdit ) => ( props ) => {
+			const context = useBlockEditContext();
+			// CAUTION: code added before this line will be executed for all
+			// blocks, not just those that support the feature! Code added
+			// above this line should be carefully evaluated for its impact on
+			// performance.
+			return [
+				...features.map( ( feature, i ) => {
+					const {
+						Edit,
+						hasSupport,
+						attributeKeys = [],
+						shareWithChildBlocks,
+					} = feature;
+					const shouldDisplayControls =
+						context[ mayDisplayControlsKey ] ||
+						( context[ mayDisplayParentControlsKey ] &&
+							shareWithChildBlocks );
+
+					if (
+						! shouldDisplayControls ||
+						! hasSupport( props.name )
+					) {
+						return null;
+					}
+
+					const neededProps = {};
+					for ( const key of attributeKeys ) {
+						if ( props.attributes[ key ] ) {
+							neededProps[ key ] = props.attributes[ key ];
+						}
+					}
+
+					return (
+						<Edit
+							// We can use the index because the array length
+							// is fixed per page load right now.
+							key={ i }
+							name={ props.name }
+							isSelected={ props.isSelected }
+							clientId={ props.clientId }
+							setAttributes={ props.setAttributes }
+							__unstableParentLayout={
+								props.__unstableParentLayout
+							}
+							// This component is pure, so only pass needed
+							// props!!!
+							{ ...neededProps }
+						/>
+					);
+				} ),
+				<OriginalBlockEdit key="edit" { ...props } />,
+			];
+		},
+		'withBlockEditHooks'
+	);
+	addFilter( 'editor.BlockEdit', 'core/editor/hooks', withBlockEditHooks );
+}
+
+function BlockProps( { index, useBlockProps, setAllWrapperProps, ...props } ) {
+	const wrapperProps = useBlockProps( props );
+	const setWrapperProps = ( next ) =>
+		setAllWrapperProps( ( prev ) => {
+			const nextAll = [ ...prev ];
+			nextAll[ index ] = next;
+			return nextAll;
+		} );
+	// Setting state after every render is fine because this component is
+	// pure and will only re-render when needed props change.
+	useEffect( () => {
+		// We could shallow compare the props, but since this component only
+		// changes when needed attributes change, the benefit is probably small.
+		setWrapperProps( wrapperProps );
+		return () => {
+			setWrapperProps( undefined );
+		};
+	} );
+	return null;
+}
+
+const BlockPropsPure = pure( BlockProps );
+
+export function createBlockListBlockFilter( features ) {
+	const withBlockListBlockHooks = createHigherOrderComponent(
+		( BlockListBlock ) => ( props ) => {
+			const [ allWrapperProps, setAllWrapperProps ] = useState(
+				Array( features.length ).fill( undefined )
+			);
+			return [
+				...features.map( ( feature, i ) => {
+					const {
+						hasSupport,
+						attributeKeys = [],
+						useBlockProps,
+					} = feature;
+
+					const neededProps = {};
+					for ( const key of attributeKeys ) {
+						if ( props.attributes[ key ] ) {
+							neededProps[ key ] = props.attributes[ key ];
+						}
+					}
+
+					if (
+						// Skip rendering if none of the needed attributes are
+						// set.
+						! Object.keys( neededProps ).length ||
+						! hasSupport( props.name )
+					) {
+						return null;
+					}
+
+					return (
+						<BlockPropsPure
+							// We can use the index because the array length
+							// is fixed per page load right now.
+							key={ i }
+							index={ i }
+							useBlockProps={ useBlockProps }
+							// This component is pure, so we must pass a stable
+							// function reference.
+							setAllWrapperProps={ setAllWrapperProps }
+							name={ props.name }
+							// This component is pure, so only pass needed
+							// props!!!
+							{ ...neededProps }
+						/>
+					);
+				} ),
+				<BlockListBlock
+					key="edit"
+					{ ...props }
+					wrapperProps={ allWrapperProps
+						.filter( Boolean )
+						.reduce( ( acc, wrapperProps ) => {
+							return {
+								...acc,
+								...wrapperProps,
+								className: classnames(
+									acc.className,
+									wrapperProps.className
+								),
+								style: {
+									...acc.style,
+									...wrapperProps.style,
+								},
+							};
+						}, props.wrapperProps || {} ) }
+				/>,
+			];
+		},
+		'withBlockListBlockHooks'
+	);
+	addFilter(
+		'editor.BlockListBlock',
+		'core/editor/hooks',
+		withBlockListBlockHooks
+	);
+}
+
+export function createBlockSaveFilter( features ) {
+	function extraPropsFromHooks( props, name, attributes ) {
+		return features.reduce( ( accu, feature ) => {
+			const { hasSupport, attributeKeys = [], addSaveProps } = feature;
+
+			const neededAttributes = {};
+			for ( const key of attributeKeys ) {
+				if ( attributes[ key ] ) {
+					neededAttributes[ key ] = attributes[ key ];
+				}
+			}
+
+			if (
+				// Skip rendering if none of the needed attributes are
+				// set.
+				! Object.keys( neededAttributes ).length ||
+				! hasSupport( name )
+			) {
+				return accu;
+			}
+
+			return addSaveProps( accu, name, neededAttributes );
+		}, props );
+	}
+	addFilter(
+		'blocks.getSaveContent.extraProps',
+		'core/editor/hooks',
+		extraPropsFromHooks,
+		0
+	);
+	addFilter(
+		'blocks.getSaveContent.extraProps',
+		'core/editor/hooks',
+		( props ) => {
+			// Previously we had a filter deleting the className if it was an empty
+			// string. That filter is no longer running, so now we need to delete it
+			// here.
+			if ( props.hasOwnProperty( 'className' ) && ! props.className ) {
+				delete props.className;
+			}
+
+			return props;
+		}
+	);
+}

package/src/private-apis.js

@@ -5,13 +5,11 @@ import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
-import { kebabCase } from './utils/object';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
-import BlockContextualToolbar from './components/block-tools/block-contextual-toolbar';
-import { useShouldContextualToolbarShow } from './utils/use-should-contextual-toolbar-show';
+import { useCanBlockToolbarBeFocused } from './utils/use-can-block-toolbar-be-focused';
 import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
@@ -37,13 +35,11 @@ lock( privateApis, {
 	ExperimentalBlockEditorProvider,
 	getDuotoneFilter,
 	getRichTextValues,
-	kebabCase,
 	PrivateInserter,
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
-	BlockContextualToolbar,
-	useShouldContextualToolbarShow,
+	useCanBlockToolbarBeFocused,
 	cleanEmptyObject,
 	useStyleOverride,
 	BlockQuickNavigation,

package/src/private-apis.native.js

@@ -3,7 +3,6 @@
  */
 import * as globalStyles from './components/global-styles';
 import { ExperimentalBlockEditorProvider } from './components/provider';
-import { kebabCase } from './utils/object';
 import { lock } from './lock-unlock';
 
 /**
@@ -12,6 +11,5 @@ import { lock } from './lock-unlock';
 export const privateApis = {};
 lock( privateApis, {
 	...globalStyles,
-	kebabCase,
 	ExperimentalBlockEditorProvider,
 } );

package/src/store/actions.js

@@ -1919,18 +1919,3 @@ export function unsetBlockEditingMode( clientId = '' ) {
 		clientId,
 	};
 }
-
-/**
- * Action that sets the element that had focus when focus leaves the editor canvas.
- *
- * @param {Object} lastFocus The last focused element.
- *
- *
- * @return {Object} Action object.
- */
-export function setLastFocus( lastFocus = null ) {
-	return {
-		type: 'LAST_FOCUS',
-		lastFocus,
-	};
-}

package/src/store/private-actions.js

@@ -3,6 +3,11 @@
  */
 import { Platform } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { undoIgnoreBlocks } from './undo-ignore';
+
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
 
@@ -290,3 +295,46 @@ export function deleteStyleOverride( id ) {
 		id,
 	};
 }
+
+/**
+ * A higher-order action that mark every change inside a callback as "non-persistent"
+ * and ignore pushing to the undo history stack. It's primarily used for synchronized
+ * derived updates from the block editor without affecting the undo history.
+ *
+ * @param {() => void} callback The synchronous callback to derive updates.
+ */
+export function syncDerivedUpdates( callback ) {
+	return ( { dispatch, select, registry } ) => {
+		registry.batch( () => {
+			// Mark every change in the `callback` as non-persistent.
+			dispatch( {
+				type: 'SET_EXPLICIT_PERSISTENT',
+				isPersistentChange: false,
+			} );
+			callback();
+			dispatch( {
+				type: 'SET_EXPLICIT_PERSISTENT',
+				isPersistentChange: undefined,
+			} );
+
+			// Ignore pushing undo stack for the updated blocks.
+			const updatedBlocks = select.getBlocks();
+			undoIgnoreBlocks.add( updatedBlocks );
+		} );
+	};
+}
+
+/**
+ * Action that sets the element that had focus when focus leaves the editor canvas.
+ *
+ * @param {Object} lastFocus The last focused element.
+ *
+ *
+ * @return {Object} Action object.
+ */
+export function setLastFocus( lastFocus = null ) {
+	return {
+		type: 'LAST_FOCUS',
+		lastFocus,
+	};
+}