@wordpress/block-editor 12.22.0 → 12.24.0

package/src/hooks/use-bindings-attributes.js

@@ -1,12 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType, store as blocksStore } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
-import { useLayoutEffect, useCallback, useState } from '@wordpress/element';
+import { useRegistry, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
-import { RichTextData } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -56,181 +55,111 @@ export function canBindAttribute( blockName, attributeName ) {
 	);
 }
 
-/**
- * This component is responsible for detecting and
- * propagating data changes from the source to the block.
- *
- * @param {Object}   props                   - The component props.
- * @param {string}   props.attrName          - The attribute name.
- * @param {Object}   props.blockProps        - The block props with bound attribute.
- * @param {Object}   props.source            - Source handler.
- * @param {Object}   props.args              - The arguments to pass to the source.
- * @param {Function} props.onPropValueChange - The function to call when the attribute value changes.
- * @return {null}                              Data-handling component. Render nothing.
- */
-const BindingConnector = ( {
-	args,
-	attrName,
-	blockProps,
-	source,
-	onPropValueChange,
-} ) => {
-	const { placeholder, value: propValue } = source.useSource(
-		blockProps,
-		args
-	);
-
-	const { name: blockName } = blockProps;
-	const attrValue = blockProps.attributes[ attrName ];
-
-	const updateBoundAttibute = useCallback(
-		( newAttrValue, prevAttrValue ) => {
-			/*
-			 * If the attribute is a RichTextData instance,
-			 * (core/paragraph, core/heading, core/button, etc.)
-			 * compare its HTML representation with the new value.
-			 *
-			 * To do: it looks like a workaround.
-			 * Consider improving the attribute and metadata fields types.
-			 */
-			if ( prevAttrValue instanceof RichTextData ) {
-				// Bail early if the Rich Text value is the same.
-				if ( prevAttrValue.toHTMLString() === newAttrValue ) {
-					return;
-				}
-
-				/*
-				 * To preserve the value type,
-				 * convert the new value to a RichTextData instance.
-				 */
-				newAttrValue = RichTextData.fromHTMLString( newAttrValue );
-			}
-
-			if ( prevAttrValue === newAttrValue ) {
+export const withBlockBindingSupport = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const registry = useRegistry();
+		const sources = useSelect( ( select ) =>
+			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
+		);
+		const bindings = props.attributes.metadata?.bindings;
+		const { name, clientId, context } = props;
+		const boundAttributes = useSelect( () => {
+			if ( ! bindings ) {
 				return;
 			}
 
-			onPropValueChange( { [ attrName ]: newAttrValue } );
-		},
-		[ attrName, onPropValueChange ]
-	);
-
-	useLayoutEffect( () => {
-		if ( typeof propValue !== 'undefined' ) {
-			updateBoundAttibute( propValue, attrValue );
-		} else if ( placeholder ) {
-			/*
-			 * Placeholder fallback.
-			 * If the attribute is `src` or `href`,
-			 * a placeholder can't be used because it is not a valid url.
-			 * Adding this workaround until
-			 * attributes and metadata fields types are improved and include `url`.
-			 */
-			const htmlAttribute =
-				getBlockType( blockName ).attributes[ attrName ].attribute;
+			const attributes = {};
+
+			for ( const [ attributeName, boundAttribute ] of Object.entries(
+				bindings
+			) ) {
+				const source = sources[ boundAttribute.source ];
+				if (
+					! source?.getValue ||
+					! canBindAttribute( name, attributeName )
+				) {
+					continue;
+				}
 
-			if ( htmlAttribute === 'src' || htmlAttribute === 'href' ) {
-				updateBoundAttibute( null );
-				return;
+				const args = {
+					registry,
+					context,
+					clientId,
+					attributeName,
+					args: boundAttribute.args,
+				};
+
+				attributes[ attributeName ] = source.getValue( args );
+
+				if ( attributes[ attributeName ] === undefined ) {
+					if ( attributeName === 'url' ) {
+						attributes[ attributeName ] = null;
+					} else {
+						attributes[ attributeName ] =
+							source.getPlaceholder?.( args );
+					}
+				}
 			}
 
-			updateBoundAttibute( placeholder );
-		}
-	}, [
-		updateBoundAttibute,
-		propValue,
-		attrValue,
-		placeholder,
-		blockName,
-		attrName,
-	] );
-
-	return null;
-};
+			return attributes;
+		}, [ bindings, name, clientId, context, registry, sources ] );
 
-/**
- * BlockBindingBridge acts like a component wrapper
- * that connects the bound attributes of a block
- * to the source handlers.
- * For this, it creates a BindingConnector for each bound attribute.
- *
- * @param {Object}   props                   - The component props.
- * @param {Object}   props.blockProps        - The BlockEdit props object.
- * @param {Object}   props.bindings          - The block bindings settings.
- * @param {Function} props.onPropValueChange - The function to call when the attribute value changes.
- * @return {null}                              Data-handling component. Render nothing.
- */
-function BlockBindingBridge( { blockProps, bindings, onPropValueChange } ) {
-	const blockBindingsSources = unlock(
-		useSelect( blocksStore )
-	).getAllBlockBindingsSources();
+		const { setAttributes } = props;
 
-	return (
-		<>
-			{ Object.entries( bindings ).map(
-				( [ attrName, boundAttribute ] ) => {
-					// Bail early if the block doesn't have a valid source handler.
-					const source =
-						blockBindingsSources[ boundAttribute.source ];
-					if ( ! source?.useSource ) {
-						return null;
+		const _setAttributes = useCallback(
+			( nextAttributes ) => {
+				registry.batch( () => {
+					if ( ! bindings ) {
+						return setAttributes( nextAttributes );
 					}
 
-					return (
-						<BindingConnector
-							key={ attrName }
-							attrName={ attrName }
-							source={ source }
-							blockProps={ blockProps }
-							args={ boundAttribute.args }
-							onPropValueChange={ onPropValueChange }
-						/>
-					);
-				}
-			) }
-		</>
-	);
-}
-
-const withBlockBindingSupport = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		/*
-		 * Collect and update the bound attributes
-		 * in a separate state.
-		 */
-		const [ boundAttributes, setBoundAttributes ] = useState( {} );
-		const updateBoundAttributes = useCallback(
-			( newAttributes ) =>
-				setBoundAttributes( ( prev ) => ( {
-					...prev,
-					...newAttributes,
-				} ) ),
-			[]
-		);
+					const keptAttributes = { ...nextAttributes };
+
+					for ( const [
+						attributeName,
+						boundAttribute,
+					] of Object.entries( bindings ) ) {
+						const source = sources[ boundAttribute.source ];
+						if (
+							! source?.setValue ||
+							! canBindAttribute( name, attributeName )
+						) {
+							continue;
+						}
+
+						source.setValue( {
+							registry,
+							context,
+							clientId,
+							attributeName,
+							args: boundAttribute.args,
+							value: nextAttributes[ attributeName ],
+						} );
+						delete keptAttributes[ attributeName ];
+					}
 
-		/*
-		 * Create binding object filtering
-		 * only the attributes that can be bound.
-		 */
-		const bindings = Object.fromEntries(
-			Object.entries( props.attributes.metadata?.bindings || {} ).filter(
-				( [ attrName ] ) => canBindAttribute( props.name, attrName )
-			)
+					if ( Object.keys( keptAttributes ).length ) {
+						setAttributes( keptAttributes );
+					}
+				} );
+			},
+			[
+				registry,
+				bindings,
+				name,
+				clientId,
+				context,
+				setAttributes,
+				sources,
+			]
 		);
 
 		return (
 			<>
-				{ Object.keys( bindings ).length > 0 && (
-					<BlockBindingBridge
-						blockProps={ props }
-						bindings={ bindings }
-						onPropValueChange={ updateBoundAttributes }
-					/>
-				) }
-
 				<BlockEdit
 					{ ...props }
 					attributes={ { ...props.attributes, ...boundAttributes } }
+					setAttributes={ _setAttributes }
 				/>
 			</>
 		);

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

@@ -45,9 +45,12 @@ export function getTypographyClassesAndStyles( attributes, settings ) {
 	const fontFamilyClassName = !! attributes?.fontFamily
 		? `has-${ kebabCase( attributes.fontFamily ) }-font-family`
 		: '';
-
+	const textAlignClassName = !! attributes?.style?.typography?.textAlign
+		? `has-text-align-${ attributes?.style?.typography?.textAlign }`
+		: '';
 	const className = classnames(
 		fontFamilyClassName,
+		textAlignClassName,
 		getFontSizeClass( attributes?.fontSize )
 	);
 

package/src/hooks/use-zoom-out.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+
+/**
+ * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ *
+ * @param {boolean} zoomOut If we should enter into zoomOut mode or not
+ */
+export function useZoomOut( zoomOut = true ) {
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { __unstableGetEditorMode } = useSelect( blockEditorStore );
+
+	const originalEditingMode = useRef( null );
+	const mode = __unstableGetEditorMode();
+
+	useEffect( () => {
+		// Only set this on mount so we know what to return to when we unmount.
+		if ( ! originalEditingMode.current ) {
+			originalEditingMode.current = mode;
+		}
+
+		return () => {
+			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
+			if ( __unstableGetEditorMode() !== originalEditingMode.current ) {
+				__unstableSetEditorMode( originalEditingMode.current );
+			}
+		};
+	}, [] );
+
+	// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
+	useEffect( () => {
+		if ( zoomOut && mode !== 'zoom-out' ) {
+			__unstableSetEditorMode( 'zoom-out' );
+		} else if ( ! zoomOut && originalEditingMode.current !== mode ) {
+			__unstableSetEditorMode( originalEditingMode.current );
+		}
+	}, [ __unstableSetEditorMode, zoomOut, mode ] );
+}

package/src/hooks/utils.js

@@ -3,7 +3,7 @@
  */
 import { getBlockSupport } from '@wordpress/blocks';
 import { memo, useMemo, useEffect, useId, useState } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 
@@ -133,23 +133,56 @@ export function shouldSkipSerialization(
 	return skipSerialization;
 }
 
+const pendingStyleOverrides = new WeakMap();
+
 export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
 	const { setStyleOverride, deleteStyleOverride } = unlock(
 		useDispatch( blockEditorStore )
 	);
+	const registry = useRegistry();
 	const fallbackId = useId();
 	useEffect( () => {
 		// Unmount if there is CSS and assets are empty.
 		if ( ! css && ! assets ) return;
+
 		const _id = id || fallbackId;
-		setStyleOverride( _id, {
+		const override = {
 			id,
 			css,
 			assets,
 			__unstableType,
+		};
+		// Batch updates to style overrides to avoid triggering cascading renders
+		// for each style override block included in a tree and optimize initial render.
+		if ( ! pendingStyleOverrides.get( registry ) ) {
+			pendingStyleOverrides.set( registry, [] );
+		}
+		pendingStyleOverrides.get( registry ).push( [ _id, override ] );
+		window.queueMicrotask( () => {
+			if ( pendingStyleOverrides.get( registry )?.length ) {
+				registry.batch( () => {
+					pendingStyleOverrides.get( registry ).forEach( ( args ) => {
+						setStyleOverride( ...args );
+					} );
+					pendingStyleOverrides.set( registry, [] );
+				} );
+			}
 		} );
+
 		return () => {
-			deleteStyleOverride( _id );
+			const isPending = pendingStyleOverrides
+				.get( registry )
+				?.find( ( [ currentId ] ) => currentId === _id );
+			if ( isPending ) {
+				pendingStyleOverrides.set(
+					registry,
+					pendingStyleOverrides
+						.get( registry )
+						.filter( ( [ currentId ] ) => currentId !== _id )
+				);
+			} else {
+				deleteStyleOverride( _id );
+			}
 		};
 	}, [
 		id,
@@ -159,6 +192,7 @@ export function useStyleOverride( { id, css, assets, __unstableType } = {} ) {
 		fallbackId,
 		setStyleOverride,
 		deleteStyleOverride,
+		registry,
 	] );
 }
 
@@ -186,6 +220,7 @@ export function useBlockSettings( name, parentLayout ) {
 		fontStyle,
 		fontWeight,
 		lineHeight,
+		textAlign,
 		textColumns,
 		textDecoration,
 		writingMode,
@@ -237,6 +272,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'typography.fontStyle',
 		'typography.fontWeight',
 		'typography.lineHeight',
+		'typography.textAlign',
 		'typography.textColumns',
 		'typography.textDecoration',
 		'typography.writingMode',
@@ -326,6 +362,7 @@ export function useBlockSettings( name, parentLayout ) {
 				fontStyle,
 				fontWeight,
 				lineHeight,
+				textAlign,
 				textColumns,
 				textDecoration,
 				textTransform,
@@ -368,6 +405,7 @@ export function useBlockSettings( name, parentLayout ) {
 		fontStyle,
 		fontWeight,
 		lineHeight,
+		textAlign,
 		textColumns,
 		textDecoration,
 		textTransform,

package/src/index.js

@@ -13,6 +13,7 @@ export {
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
 	useCachedTruthy,
+	useZoomOut,
 } from './hooks';
 export * from './components';
 export * from './elements';

package/src/layouts/definitions.js

@@ -34,13 +34,13 @@ export const LAYOUT_DEFINITIONS = {
 		],
 		spacingStyles: [
 			{
-				selector: ' > :first-child:first-child',
+				selector: ' > :first-child',
 				rules: {
 					'margin-block-start': '0',
 				},
 			},
 			{
-				selector: ' > :last-child:last-child',
+				selector: ' > :last-child',
 				rules: {
 					'margin-block-end': '0',
 				},
@@ -100,13 +100,13 @@ export const LAYOUT_DEFINITIONS = {
 		],
 		spacingStyles: [
 			{
-				selector: ' > :first-child:first-child',
+				selector: ' > :first-child',
 				rules: {
 					'margin-block-start': '0',
 				},
 			},
 			{
-				selector: ' > :last-child:last-child',
+				selector: ' > :last-child',
 				rules: {
 					'margin-block-end': '0',
 				},
@@ -134,7 +134,7 @@ export const LAYOUT_DEFINITIONS = {
 				},
 			},
 			{
-				selector: ' > *',
+				selector: ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
 				rules: {
 					margin: '0',
 				},
@@ -156,7 +156,7 @@ export const LAYOUT_DEFINITIONS = {
 		displayMode: 'grid',
 		baseStyles: [
 			{
-				selector: ' > *',
+				selector: ' > :is(*, div)', // :is(*, div) instead of just * increases the specificity by 001.
 				rules: {
 					margin: '0',
 				},