@wordpress/block-editor 12.23.0 → 12.25.0

package/src/hooks/test/text-align.js

@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getBlockTypes,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { getValidTextAlignments, addAssignedTextAlign } from '../text-align';
+
+const noop = () => {};
+
+describe( 'textAlign', () => {
+	const blockSettings = {
+		save: noop,
+		category: 'text',
+		title: 'block title',
+		edit: ( { children } ) => <>{ children }</>,
+	};
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	describe( 'getValidTextAlignments()', () => {
+		it( 'should return an empty array if block does not define align support', () => {
+			expect( getValidTextAlignments() ).toEqual( [] );
+		} );
+
+		it( 'should return all custom text aligns set', () => {
+			expect( getValidTextAlignments( [ 'left', 'right' ] ) ).toEqual( [
+				'left',
+				'right',
+			] );
+		} );
+
+		it( 'should return all text aligns sorted when provided in the random order', () => {
+			expect(
+				getValidTextAlignments( [ 'right', 'center', 'left' ] )
+			).toEqual( [ 'left', 'center', 'right' ] );
+		} );
+
+		it( 'should return all text aligns if block defines text align support as true', () => {
+			expect( getValidTextAlignments( true ) ).toEqual( [
+				'left',
+				'center',
+				'right',
+			] );
+		} );
+
+		it( 'should remove incorrect text aligns', () => {
+			expect(
+				getValidTextAlignments( [ 'left', 'right', 'justify' ] )
+			).toEqual( [ 'left', 'right' ] );
+		} );
+	} );
+
+	describe( 'addAssignedTextAlign', () => {
+		it( 'should do nothing if block does not support text align', () => {
+			registerBlockType( 'core/foo', blockSettings );
+
+			const props = addAssignedTextAlign(
+				{
+					className: 'foo',
+				},
+				'core/foo',
+				{
+					typography: {
+						textAlign: 'center',
+					},
+				}
+			);
+
+			expect( props ).toEqual( {
+				className: 'foo',
+			} );
+		} );
+
+		it( 'should do add text align classname if block supports text align', () => {
+			registerBlockType( 'core/foo', {
+				...blockSettings,
+				supports: {
+					typography: {
+						textAlign: true,
+					},
+				},
+			} );
+
+			const props = addAssignedTextAlign(
+				{
+					className: 'foo',
+				},
+				'core/foo',
+				{
+					style: {
+						typography: {
+							textAlign: 'center',
+						},
+					},
+				}
+			);
+
+			expect( props ).toEqual( {
+				className: 'has-text-align-center foo',
+			} );
+		} );
+	} );
+} );

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

@@ -12,13 +12,15 @@ describe( 'getTypographyClassesAndStyles', () => {
 				typography: {
 					letterSpacing: '22px',
 					fontSize: '2rem',
+					textAlign: 'center',
 					textColumns: 3,
 					textTransform: 'uppercase',
 				},
 			},
 		};
 		expect( getTypographyClassesAndStyles( attributes ) ).toEqual( {
-			className: 'has-tofu-font-family has-large-font-size',
+			className:
+				'has-tofu-font-family has-text-align-center has-large-font-size',
 			style: {
 				columnCount: 3,
 				letterSpacing: '22px',

package/src/hooks/text-align.js

@@ -0,0 +1,178 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { AlignmentControl, BlockControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
+import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
+
+export const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
+
+const TEXT_ALIGNMENT_OPTIONS = [
+	{
+		icon: alignLeft,
+		title: __( 'Align text left' ),
+		align: 'left',
+	},
+	{
+		icon: alignCenter,
+		title: __( 'Align text center' ),
+		align: 'center',
+	},
+	{
+		icon: alignRight,
+		title: __( 'Align text right' ),
+		align: 'right',
+	},
+];
+
+const VALID_TEXT_ALIGNMENTS = [ 'left', 'center', 'right' ];
+
+/**
+ * Returns the valid text alignments.
+ * Takes into consideration the text aligns supported by a block.
+ * Exported just for testing purposes, not exported outside the module.
+ *
+ * @param {?boolean|string[]} blockTextAlign Text aligns supported by the block.
+ *
+ * @return {string[]} Valid text alignments.
+ */
+export function getValidTextAlignments( blockTextAlign ) {
+	let validTextAlignments;
+	if ( Array.isArray( blockTextAlign ) ) {
+		validTextAlignments = VALID_TEXT_ALIGNMENTS.filter( ( textAlign ) =>
+			blockTextAlign.includes( textAlign )
+		);
+	} else if ( blockTextAlign === true ) {
+		// `true` includes all alignments...
+		validTextAlignments = [ ...VALID_TEXT_ALIGNMENTS ];
+	} else {
+		validTextAlignments = [];
+	}
+
+	return validTextAlignments;
+}
+
+function BlockEditTextAlignmentToolbarControlsPure( {
+	style,
+	name: blockName,
+	setAttributes,
+} ) {
+	const validTextAlignments = getValidTextAlignments(
+		getBlockSupport( blockName, TEXT_ALIGN_SUPPORT_KEY )
+	);
+	const blockEditingMode = useBlockEditingMode();
+	if ( ! validTextAlignments.length || blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	const textAlignmentControls = TEXT_ALIGNMENT_OPTIONS.filter( ( control ) =>
+		validTextAlignments.includes( control.align )
+	);
+
+	const onChange = ( newTextAlignValue ) => {
+		const newStyle = {
+			...style,
+			typography: {
+				...style?.typography,
+				textAlign: newTextAlignValue,
+			},
+		};
+
+		setAttributes( { style: cleanEmptyObject( newStyle ) } );
+	};
+
+	return (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ style?.typography?.textAlign }
+				onChange={ onChange }
+				alignmentControls={ textAlignmentControls }
+			/>
+		</BlockControls>
+	);
+}
+
+export default {
+	edit: BlockEditTextAlignmentToolbarControlsPure,
+	useBlockProps,
+	addSaveProps: addAssignedTextAlign,
+	attributeKeys: [ 'style' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY, false );
+	},
+};
+
+function useBlockProps( { name, style } ) {
+	if ( ! style?.typography?.textAlign ) {
+		return null;
+	}
+
+	const validTextAlignments = getValidTextAlignments(
+		getBlockSupport( name, TEXT_ALIGN_SUPPORT_KEY )
+	);
+
+	if ( ! validTextAlignments.length ) {
+		return null;
+	}
+
+	if (
+		shouldSkipSerialization( name, TYPOGRAPHY_SUPPORT_KEY, 'textAlign' )
+	) {
+		return null;
+	}
+
+	const textAlign = style.typography.textAlign;
+
+	const className = classnames( {
+		[ `has-text-align-${ textAlign }` ]: textAlign,
+	} );
+	return { className };
+}
+
+/**
+ * Override props assigned to save component to inject text alignment class
+ * name if block supports it.
+ *
+ * @param {Object} props      Additional props applied to save element.
+ * @param {Object} blockType  Block type.
+ * @param {Object} attributes Block attributes.
+ *
+ * @return {Object} Filtered props applied to save element.
+ */
+export function addAssignedTextAlign( props, blockType, attributes ) {
+	if ( ! attributes?.style?.typography?.textAlign ) {
+		return props;
+	}
+
+	const { textAlign } = attributes.style.typography;
+	const blockTextAlign = getBlockSupport( blockType, TEXT_ALIGN_SUPPORT_KEY );
+	const isTextAlignValid =
+		getValidTextAlignments( blockTextAlign ).includes( textAlign );
+	if (
+		isTextAlignValid &&
+		! shouldSkipSerialization(
+			blockType,
+			TYPOGRAPHY_SUPPORT_KEY,
+			'textAlign'
+		)
+	) {
+		props.className = classnames(
+			`has-text-align-${ textAlign }`,
+			props.className
+		);
+	}
+	return props;
+}

package/src/hooks/typography.js

@@ -17,6 +17,7 @@ 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 { TEXT_ALIGN_SUPPORT_KEY } from './text-align';
 import { cleanEmptyObject } from './utils';
 import { store as blockEditorStore } from '../store';
 
@@ -40,6 +41,7 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [
 	FONT_STYLE_SUPPORT_KEY,
 	FONT_WEIGHT_SUPPORT_KEY,
 	FONT_FAMILY_SUPPORT_KEY,
+	TEXT_ALIGN_SUPPORT_KEY,
 	TEXT_COLUMNS_SUPPORT_KEY,
 	TEXT_DECORATION_SUPPORT_KEY,
 	WRITING_MODE_SUPPORT_KEY,

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -11,26 +11,36 @@ 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() {
+export function useZoomOut( zoomOut = true ) {
 	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
-	const { mode } = useSelect( ( select ) => {
-		return {
-			mode: select( blockEditorStore ).__unstableGetEditorMode(),
+	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 );
+			}
 		};
 	}, [] );
 
-	// Intentionality left without any dependency.
-	// This effect should only run when the component is rendered and unmounted.
-	// The effect opens the zoom-out view if it is not open before when applying a style variation.
+	// The effect opens the zoom-out view if we want it open and it's not currently in zoom-out mode.
 	useEffect( () => {
-		if ( mode !== 'zoom-out' ) {
+		if ( zoomOut && mode !== 'zoom-out' ) {
 			__unstableSetEditorMode( 'zoom-out' );
-			return () => {
-				// Revert to original mode
-				__unstableSetEditorMode( mode );
-			};
+		} else if ( ! zoomOut && originalEditingMode.current !== mode ) {
+			__unstableSetEditorMode( originalEditingMode.current );
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
+	}, [ __unstableSetEditorMode, zoomOut, mode ] );
 }