@wordpress/block-editor 12.22.0 → 12.24.0

package/src/hooks/block-renaming.js

@@ -3,13 +3,6 @@
  */
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { TextControl } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { InspectorControls } from '../components';
 
 /**
  * Filters registered block settings, adding an `__experimentalLabel` callback if one does not already exist.
@@ -45,32 +38,6 @@ export function addLabelCallback( settings ) {
 	return settings;
 }
 
-function BlockRenameControlPure( { metadata, setAttributes } ) {
-	return (
-		<InspectorControls group="advanced">
-			<TextControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize
-				label={ __( 'Block name' ) }
-				value={ metadata?.name || '' }
-				onChange={ ( newName ) => {
-					setAttributes( {
-						metadata: { ...metadata, name: newName },
-					} );
-				} }
-			/>
-		</InspectorControls>
-	);
-}
-
-export default {
-	edit: BlockRenameControlPure,
-	attributeKeys: [ 'metadata' ],
-	hasSupport( name ) {
-		return hasBlockSupport( name, 'renaming', true );
-	},
-};
-
 addFilter(
 	'blocks.registerBlockType',
 	'core/metadata/addLabelCallback',

package/src/hooks/content-lock-ui.js

@@ -24,16 +24,14 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
 		( select ) => {
 			const {
-				__unstableGetContentLockingParent,
+				getContentLockingParent,
 				getTemplateLock,
-				__unstableGetTemporarilyEditingAsBlocks,
-			} = select( blockEditorStore );
+				getTemporarilyEditingAsBlocks,
+			} = unlock( select( blockEditorStore ) );
 			return {
 				templateLock: getTemplateLock( clientId ),
-				isLockedByParent:
-					!! __unstableGetContentLockingParent( clientId ),
-				isEditingAsBlocks:
-					__unstableGetTemporarilyEditingAsBlocks() === clientId,
+				isLockedByParent: !! getContentLockingParent( clientId ),
+				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
 			};
 		},
 		[ clientId ]

package/src/hooks/index.js

@@ -21,6 +21,7 @@ import dimensions from './dimensions';
 import duotone from './duotone';
 import fontFamily from './font-family';
 import fontSize from './font-size';
+import textAlign from './text-align';
 import border from './border';
 import position from './position';
 import layout from './layout';
@@ -28,12 +29,13 @@ import childLayout from './layout-child';
 import contentLockUI from './content-lock-ui';
 import './metadata';
 import blockHooks from './block-hooks';
-import blockRenaming from './block-renaming';
+import './block-renaming';
 import './use-bindings-attributes';
 
 createBlockEditFilter(
 	[
 		align,
+		textAlign,
 		anchor,
 		customClassName,
 		style,
@@ -42,12 +44,12 @@ createBlockEditFilter(
 		layout,
 		contentLockUI,
 		blockHooks,
-		blockRenaming,
 		childLayout,
 	].filter( Boolean )
 );
 createBlockListBlockFilter( [
 	align,
+	textAlign,
 	background,
 	style,
 	color,
@@ -61,6 +63,7 @@ createBlockListBlockFilter( [
 ] );
 createBlockSaveFilter( [
 	align,
+	textAlign,
 	anchor,
 	ariaLabel,
 	customClassName,
@@ -80,3 +83,4 @@ export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
+export { useZoomOut } from './use-zoom-out';

package/src/hooks/layout.js

@@ -50,13 +50,7 @@ function hasLayoutBlockSupport( blockName ) {
  */
 export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 	const { kebabCase } = unlock( componentsPrivateApis );
-	const rootPaddingAlignment = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().__experimentalFeatures
-			?.useRootPaddingAwareAlignments;
-	}, [] );
 	const { layout } = blockAttributes;
-
 	const { default: defaultBlockLayout } =
 		getBlockSupport( blockName, layoutBlockSupportKey ) || {};
 	const usedLayout =
@@ -78,12 +72,20 @@ export function useLayoutClasses( blockAttributes = {}, blockName = '' ) {
 		layoutClassnames.push( baseClassName, compoundClassName );
 	}
 
-	if (
-		( usedLayout?.inherit ||
-			usedLayout?.contentSize ||
-			usedLayout?.type === 'constrained' ) &&
-		rootPaddingAlignment
-	) {
+	const hasGlobalPadding = useSelect(
+		( select ) => {
+			return (
+				( usedLayout?.inherit ||
+					usedLayout?.contentSize ||
+					usedLayout?.type === 'constrained' ) &&
+				select( blockEditorStore ).getSettings().__experimentalFeatures
+					?.useRootPaddingAwareAlignments
+			);
+		},
+		[ usedLayout?.contentSize, usedLayout?.inherit, usedLayout?.type ]
+	);
+
+	if ( hasGlobalPadding ) {
 		layoutClassnames.push( 'has-global-padding' );
 	}
 
@@ -353,7 +355,12 @@ export function addAttribute( settings ) {
 	return settings;
 }
 
-function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
+function BlockWithLayoutStyles( {
+	block: BlockListBlock,
+	props,
+	blockGapSupport,
+	layoutClasses,
+} ) {
 	const { name, attributes } = props;
 	const id = useInstanceId( BlockListBlock );
 	const { layout } = attributes;
@@ -363,13 +370,11 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
 		layout?.inherit || layout?.contentSize || layout?.wideSize
 			? { ...layout, type: 'constrained' }
 			: layout || defaultBlockLayout || {};
-	const layoutClasses = useLayoutClasses( attributes, name );
 
 	const { kebabCase } = unlock( componentsPrivateApis );
 	const selectorPrefix = `wp-container-${ kebabCase( name ) }-is-layout-`;
 	// Higher specificity to override defaults from theme.json.
-	const selector = `.${ selectorPrefix }${ id }.${ selectorPrefix }${ id }`;
-	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
+	const selector = `.${ selectorPrefix }${ id }`;
 	const hasBlockGapSupport = blockGapSupport !== null;
 
 	// Get CSS string for the current layout type.
@@ -410,26 +415,53 @@ function BlockWithLayoutStyles( { block: BlockListBlock, props } ) {
  */
 export const withLayoutStyles = createHigherOrderComponent(
 	( BlockListBlock ) => ( props ) => {
-		const blockSupportsLayout = hasLayoutBlockSupport( props.name );
-		const shouldRenderLayoutStyles = useSelect(
+		const { clientId, name, attributes } = props;
+		const blockSupportsLayout = hasLayoutBlockSupport( name );
+		const layoutClasses = useLayoutClasses( attributes, name );
+		const extraProps = useSelect(
 			( select ) => {
 				// The callback returns early to avoid block editor subscription.
 				if ( ! blockSupportsLayout ) {
-					return false;
+					return;
+				}
+
+				const { getSettings, getBlockSettings } = unlock(
+					select( blockEditorStore )
+				);
+				const { disableLayoutStyles } = getSettings();
+
+				if ( disableLayoutStyles ) {
+					return;
 				}
 
-				return ! select( blockEditorStore ).getSettings()
-					.disableLayoutStyles;
+				const [ blockGapSupport ] = getBlockSettings(
+					clientId,
+					'spacing.blockGap'
+				);
+
+				return { blockGapSupport };
 			},
-			[ blockSupportsLayout ]
+			[ blockSupportsLayout, clientId ]
 		);
 
-		if ( ! shouldRenderLayoutStyles ) {
-			return <BlockListBlock { ...props } />;
+		if ( ! extraProps ) {
+			return (
+				<BlockListBlock
+					{ ...props }
+					__unstableLayoutClassNames={
+						blockSupportsLayout ? layoutClasses : undefined
+					}
+				/>
+			);
 		}
 
 		return (
-			<BlockWithLayoutStyles block={ BlockListBlock } props={ props } />
+			<BlockWithLayoutStyles
+				block={ BlockListBlock }
+				props={ props }
+				layoutClasses={ layoutClasses }
+				{ ...extraProps }
+			/>
 		);
 	},
 	'withLayoutStyles'

package/src/hooks/supports.js

@@ -20,6 +20,11 @@ const FONT_STYLE_SUPPORT_KEY = 'typography.__experimentalFontStyle';
  * Key within block settings' support array indicating support for font weight.
  */
 const FONT_WEIGHT_SUPPORT_KEY = 'typography.__experimentalFontWeight';
+/**
+ * Key within block settings' supports array indicating support for text
+ * align e.g. settings found in `block.json`.
+ */
+const TEXT_ALIGN_SUPPORT_KEY = 'typography.textAlign';
 /**
  * Key within block settings' supports array indicating support for text
  * columns e.g. settings found in `block.json`.
@@ -53,6 +58,7 @@ 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,
 	TEXT_TRANSFORM_SUPPORT_KEY,
@@ -212,6 +218,24 @@ export const hasBackgroundColorSupport = ( nameOrType ) => {
 	return colorSupport && colorSupport.background !== false;
 };
 
+/**
+ * Returns true if the block defines support for text-align.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {boolean} Whether the block supports the feature.
+ */
+export const hasTextAlignSupport = ( nameOrType ) =>
+	hasBlockSupport( nameOrType, TEXT_ALIGN_SUPPORT_KEY );
+
+/**
+ * Returns the block support value for text-align, if defined.
+ *
+ * @param {string|Object} nameOrType Block name or type object.
+ * @return {unknown} The block support value.
+ */
+export const getTextAlignSupport = ( nameOrType ) =>
+	getBlockSupport( nameOrType, TEXT_ALIGN_SUPPORT_KEY );
+
 /**
  * Returns true if the block defines support for background color.
  *

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,