@wordpress/block-editor 12.23.0 → 12.24.0

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/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',
 				},

package/src/layouts/grid.js

@@ -69,7 +69,9 @@ export default {
 		layout = {},
 		onChange,
 		clientId,
+		layoutBlockSupport = {},
 	} ) {
+		const { allowSizingOnChildren = false } = layoutBlockSupport;
 		return (
 			<>
 				<GridLayoutTypeControl
@@ -77,9 +79,10 @@ export default {
 					onChange={ onChange }
 				/>
 				{ layout?.columnCount ? (
-					<GridLayoutColumnsControl
+					<GridLayoutColumnsAndRowsControl
 						layout={ layout }
 						onChange={ onChange }
+						allowSizingOnChildren={ allowSizingOnChildren }
 					/>
 				) : (
 					<GridLayoutMinimumWidthControl
@@ -104,7 +107,11 @@ export default {
 		hasBlockGapSupport,
 		layoutDefinitions = LAYOUT_DEFINITIONS,
 	} ) {
-		const { minimumColumnWidth = '12rem', columnCount = null } = layout;
+		const {
+			minimumColumnWidth = '12rem',
+			columnCount = null,
+			rowCount = null,
+		} = layout;
 
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,
 		// don't apply the user-defined value to the styles.
@@ -121,6 +128,11 @@ export default {
 			rules.push(
 				`grid-template-columns: repeat(${ columnCount }, minmax(0, 1fr))`
 			);
+			if ( rowCount ) {
+				rules.push(
+					`grid-template-rows: repeat(${ rowCount }, minmax(0, 1fr))`
+				);
+			}
 		} else if ( minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
@@ -227,53 +239,100 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 }
 
 // Enables setting number of grid columns
-function GridLayoutColumnsControl( { layout, onChange } ) {
-	const { columnCount = 3 } = layout;
+function GridLayoutColumnsAndRowsControl( {
+	layout,
+	onChange,
+	allowSizingOnChildren,
+} ) {
+	const { columnCount = 3, rowCount } = layout;
 
 	return (
-		<fieldset>
-			<BaseControl.VisualLabel as="legend">
-				{ __( 'Columns' ) }
-			</BaseControl.VisualLabel>
-			<Flex gap={ 4 }>
-				<FlexItem isBlock>
-					<NumberControl
-						size={ '__unstable-large' }
-						onChange={ ( value ) => {
-							/**
-							 * If the input is cleared, avoid switching
-							 * back to "Auto" by setting a value of "1".
-							 */
-							const validValue = value !== '' ? value : '1';
-							onChange( {
-								...layout,
-								columnCount: validValue,
-							} );
-						} }
-						value={ columnCount }
-						min={ 1 }
-						label={ __( 'Columns' ) }
-						hideLabelFromVision
-					/>
-				</FlexItem>
-				<FlexItem isBlock>
-					<RangeControl
-						value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
-						onChange={ ( value ) =>
-							onChange( {
-								...layout,
-								columnCount: value,
-							} )
-						}
-						min={ 1 }
-						max={ 16 }
-						withInputField={ false }
-						label={ __( 'Columns' ) }
-						hideLabelFromVision
-					/>
-				</FlexItem>
-			</Flex>
-		</fieldset>
+		<>
+			<fieldset>
+				<BaseControl.VisualLabel as="legend">
+					{ __( 'Columns' ) }
+				</BaseControl.VisualLabel>
+				<Flex gap={ 4 }>
+					<FlexItem isBlock>
+						<NumberControl
+							size={ '__unstable-large' }
+							onChange={ ( value ) => {
+								/**
+								 * If the input is cleared, avoid switching
+								 * back to "Auto" by setting a value of "1".
+								 */
+								const validValue = value !== '' ? value : '1';
+								onChange( {
+									...layout,
+									columnCount: validValue,
+								} );
+							} }
+							value={ columnCount }
+							min={ 1 }
+							label={ __( 'Columns' ) }
+							hideLabelFromVision
+						/>
+					</FlexItem>
+					<FlexItem isBlock>
+						<RangeControl
+							value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
+							onChange={ ( value ) =>
+								onChange( {
+									...layout,
+									columnCount: value,
+								} )
+							}
+							min={ 1 }
+							max={ 16 }
+							withInputField={ false }
+							label={ __( 'Columns' ) }
+							hideLabelFromVision
+						/>
+					</FlexItem>
+				</Flex>
+			</fieldset>
+			{ allowSizingOnChildren &&
+				window.__experimentalEnableGridInteractivity && (
+					<fieldset>
+						<BaseControl.VisualLabel as="legend">
+							{ __( 'Rows' ) }
+						</BaseControl.VisualLabel>
+						<Flex gap={ 4 }>
+							<FlexItem isBlock>
+								<NumberControl
+									size={ '__unstable-large' }
+									onChange={ ( value ) => {
+										onChange( {
+											...layout,
+											rowCount: value,
+										} );
+									} }
+									value={ rowCount }
+									min={ 1 }
+									label={ __( 'Rows' ) }
+									hideLabelFromVision
+								/>
+							</FlexItem>
+							<FlexItem isBlock>
+								<RangeControl
+									value={ parseInt( rowCount, 10 ) } // RangeControl can't deal with strings.
+									onChange={ ( value ) =>
+										onChange( {
+											...layout,
+											rowCount: value,
+										} )
+									}
+									min={ 1 }
+									max={ 16 }
+									withInputField={ false }
+									label={ __( 'Rows' ) }
+									hideLabelFromVision
+								/>
+							</FlexItem>
+						</Flex>
+					</fieldset>
+				) }
+		</>
 	);
 }
 

package/src/store/actions.js

@@ -31,6 +31,8 @@ import {
 	__experimentalUpdateSettings,
 	privateRemoveBlocks,
 } from './private-actions';
+import { STORE_NAME } from './constants';
+import { unlock } from '../lock-unlock';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
@@ -1432,16 +1434,30 @@ export const setNavigationMode =
  */
 export const __unstableSetEditorMode =
 	( mode ) =>
-	( { dispatch, select } ) => {
-		// When switching to zoom-out mode, we need to select the root block
+	( { dispatch, select, registry } ) => {
+		// When switching to zoom-out mode, we need to select the parent section
 		if ( mode === 'zoom-out' ) {
 			const firstSelectedClientId = select.getBlockSelectionStart();
-			if ( firstSelectedClientId ) {
-				dispatch.selectBlock(
-					select.getBlockHierarchyRootClientId(
+			const { sectionRootClientId } = unlock(
+				registry.select( STORE_NAME ).getSettings()
+			);
+			if ( sectionRootClientId ) {
+				const sectionClientIds =
+					select.getBlockOrder( sectionRootClientId );
+				if ( sectionClientIds ) {
+					const parents = select.getBlockParents(
 						firstSelectedClientId
-					)
+					);
+					const firstSectionClientId = parents.find( ( parent ) =>
+						sectionClientIds.includes( parent )
+					);
+					dispatch.selectBlock( firstSectionClientId );
+				}
+			} else if ( firstSelectedClientId ) {
+				const rootClientId = select.getBlockHierarchyRootClientId(
+					firstSelectedClientId
 				);
+				dispatch.selectBlock( rootClientId );
 			}
 		}
 

package/src/store/private-actions.js

@@ -7,6 +7,8 @@ import { Platform } from '@wordpress/element';
  * Internal dependencies
  */
 import { undoIgnoreBlocks } from './undo-ignore';
+import { store as blockEditorStore } from './index';
+import { unlock } from '../lock-unlock';
 
 const castArray = ( maybeArray ) =>
 	Array.isArray( maybeArray ) ? maybeArray : [ maybeArray ];
@@ -339,9 +341,10 @@ export function setLastFocus( lastFocus = null ) {
  * @param {string} clientId The block's clientId.
  */
 export function stopEditingAsBlocks( clientId ) {
-	return ( { select, dispatch } ) => {
-		const focusModeToRevert =
-			select.__unstableGetTemporarilyEditingFocusModeToRevert();
+	return ( { select, dispatch, registry } ) => {
+		const focusModeToRevert = unlock(
+			registry.select( blockEditorStore )
+		).getTemporarilyEditingFocusModeToRevert();
 		dispatch.__unstableMarkNextChangeAsNotPersistent();
 		dispatch.updateBlockAttributes( clientId, {
 			templateLock: 'contentOnly',

package/src/store/private-selectors.js

@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import createSelector from 'rememo';
-
 /**
  * WordPress dependencies
  */
-import { createRegistrySelector } from '@wordpress/data';
+import { createSelector, createRegistrySelector } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -17,6 +12,8 @@ import {
 	getBlockEditingMode,
 	getSettings,
 	canInsertBlockType,
+	getBlockName,
+	getTemplateLock,
 } from './selectors';
 import {
 	checkAllowListRecursive,
@@ -295,38 +292,83 @@ export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
 	)
 );
 
+function mapUserPattern(
+	userPattern,
+	__experimentalUserPatternCategories = []
+) {
+	return {
+		name: `core/block/${ userPattern.id }`,
+		id: userPattern.id,
+		type: INSERTER_PATTERN_TYPES.user,
+		title: userPattern.title.raw,
+		categories: userPattern.wp_pattern_category.map( ( catId ) => {
+			const category = __experimentalUserPatternCategories.find(
+				( { id } ) => id === catId
+			);
+			return category ? category.slug : catId;
+		} ),
+		content: userPattern.content.raw,
+		syncStatus: userPattern.wp_pattern_sync_status,
+	};
+}
+
+export const getPatternBySlug = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, patternName ) => {
+			// Only fetch reusable blocks if we know we need them. To do: maybe
+			// use the entity record API to retrieve the block by slug.
+			if ( patternName?.startsWith( 'core/block/' ) ) {
+				const _id = parseInt(
+					patternName.slice( 'core/block/'.length ),
+					10
+				);
+				const block = unlock( select( STORE_NAME ) )
+					.getReusableBlocks()
+					.find( ( { id } ) => id === _id );
+
+				if ( ! block ) {
+					return null;
+				}
+
+				return mapUserPattern(
+					block,
+					state.settings.__experimentalUserPatternCategories
+				);
+			}
+
+			return [
+				// This setting is left for back compat.
+				...( state.settings.__experimentalBlockPatterns ?? [] ),
+				...( state.settings[ selectBlockPatternsKey ]?.( select ) ??
+					[] ),
+			].find( ( { name } ) => name === patternName );
+		},
+		( state, patternName ) =>
+			patternName?.startsWith( 'core/block/' )
+				? [
+						unlock( select( STORE_NAME ) ).getReusableBlocks(),
+						state.settings.__experimentalReusableBlocks,
+				  ]
+				: [
+						state.settings.__experimentalBlockPatterns,
+						state.settings[ selectBlockPatternsKey ]?.( select ),
+				  ]
+	)
+);
+
 export const getAllPatterns = createRegistrySelector( ( select ) =>
 	createSelector( ( state ) => {
-		// This setting is left for back compat.
-		const {
-			__experimentalBlockPatterns = [],
-			__experimentalUserPatternCategories = [],
-			__experimentalReusableBlocks = [],
-		} = state.settings;
-		const reusableBlocksSelect = state.settings[ reusableBlocksSelectKey ];
-		const userPatterns = (
-			reusableBlocksSelect
-				? reusableBlocksSelect( select )
-				: __experimentalReusableBlocks ?? []
-		).map( ( userPattern ) => {
-			return {
-				name: `core/block/${ userPattern.id }`,
-				id: userPattern.id,
-				type: INSERTER_PATTERN_TYPES.user,
-				title: userPattern.title.raw,
-				categories: userPattern.wp_pattern_category.map( ( catId ) => {
-					const category = (
-						__experimentalUserPatternCategories ?? []
-					).find( ( { id } ) => id === catId );
-					return category ? category.slug : catId;
-				} ),
-				content: userPattern.content.raw,
-				syncStatus: userPattern.wp_pattern_sync_status,
-			};
-		} );
 		return [
-			...userPatterns,
-			...__experimentalBlockPatterns,
+			...unlock( select( STORE_NAME ) )
+				.getReusableBlocks()
+				.map( ( userPattern ) =>
+					mapUserPattern(
+						userPattern,
+						state.settings.__experimentalUserPatternCategories
+					)
+				),
+			// This setting is left for back compat.
+			...( state.settings.__experimentalBlockPatterns ?? [] ),
 			...( state.settings[ selectBlockPatternsKey ]?.( select ) ?? [] ),
 		].filter(
 			( x, index, arr ) =>
@@ -380,3 +422,53 @@ export function isDragging( state ) {
 export function getExpandedBlock( state ) {
 	return state.expandedBlock;
 }
+
+/**
+ * Retrieves the client ID of the ancestor block that is content locking the block
+ * with the provided client ID.
+ *
+ * @param {Object} state    Global application state.
+ * @param {Object} clientId Client Id of the block.
+ *
+ * @return {?string} Client ID of the ancestor block that is content locking the block.
+ */
+export const getContentLockingParent = createSelector(
+	( state, clientId ) => {
+		let current = clientId;
+		let result;
+		while ( ( current = state.blocks.parents.get( current ) ) ) {
+			if (
+				getBlockName( state, current ) === 'core/block' ||
+				getTemplateLock( state, current ) === 'contentOnly'
+			) {
+				result = current;
+			}
+		}
+		return result;
+	},
+	( state ) => [ state.blocks.parents, state.blockListSettings ]
+);
+
+/**
+ * Retrieves the client ID of the block that is content locked but is
+ * currently being temporarily edited as a non-locked block.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {?string} The client ID of the block being temporarily edited as a non-locked block.
+ */
+export function getTemporarilyEditingAsBlocks( state ) {
+	return state.temporarilyEditingAsBlocks;
+}
+
+/**
+ * Returns the focus mode that should be reapplied when the user stops editing
+ * a content locked blocks as a block without locking.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {?string} The focus mode that should be re-set when temporarily editing as blocks stops.
+ */
+export function getTemporarilyEditingFocusModeToRevert( state ) {
+	return state.temporarilyEditingFocusModeRevert;
+}