@wordpress/block-editor 12.25.0 → 13.0.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,8 @@ import { getFontSizeClass } from '../components/font-sizes';
 import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 import { unlock } from '../lock-unlock';
 
+const { kebabCase } = unlock( componentsPrivateApis );
+
 /*
  * This utility is intended to assist where the serialization of the typography
  * block support is being skipped for a block but the typography related CSS
@@ -31,7 +33,6 @@ import { unlock } from '../lock-unlock';
  * @return {Object} Typography block support derived CSS classes & styles.
  */
 export function getTypographyClassesAndStyles( attributes, settings ) {
-	const { kebabCase } = unlock( componentsPrivateApis );
 	let typographyStyles = attributes?.style?.typography || {};
 	typographyStyles = {
 		...typographyStyles,
@@ -48,7 +49,7 @@ export function getTypographyClassesAndStyles( attributes, settings ) {
 	const textAlignClassName = !! attributes?.style?.typography?.textAlign
 		? `has-text-align-${ attributes?.style?.typography?.textAlign }`
 		: '';
-	const className = classnames(
+	const className = clsx(
 		fontFamilyClassName,
 		textAlignClassName,
 		getFontSizeClass( attributes?.fontSize )

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

@@ -29,7 +29,10 @@ export function useZoomOut( zoomOut = true ) {
 
 		return () => {
 			// We need to use  __unstableGetEditorMode() here and not `mode`, as mode may not update on unmount
-			if ( __unstableGetEditorMode() !== originalEditingMode.current ) {
+			if (
+				__unstableGetEditorMode() === 'zoom-out' &&
+				__unstableGetEditorMode() !== originalEditingMode.current
+			) {
 				__unstableSetEditorMode( originalEditingMode.current );
 			}
 		};
@@ -39,7 +42,11 @@ export function useZoomOut( zoomOut = true ) {
 	useEffect( () => {
 		if ( zoomOut && mode !== 'zoom-out' ) {
 			__unstableSetEditorMode( 'zoom-out' );
-		} else if ( ! zoomOut && originalEditingMode.current !== mode ) {
+		} else if (
+			! zoomOut &&
+			__unstableGetEditorMode() === 'zoom-out' &&
+			originalEditingMode.current !== mode
+		) {
 			__unstableSetEditorMode( originalEditingMode.current );
 		}
 	}, [ __unstableSetEditorMode, zoomOut, mode ] );

package/src/hooks/utils.js

@@ -23,7 +23,7 @@ import { unlock } from '../lock-unlock';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Removed falsy values from nested object.
@@ -240,7 +240,11 @@ export function useBlockSettings( name, parentLayout ) {
 		padding,
 		margin,
 		blockGap,
-		spacingSizes,
+		defaultSpacingSizesEnabled,
+		customSpacingSize,
+		userSpacingSizes,
+		defaultSpacingSizes,
+		themeSpacingSizes,
 		units,
 		aspectRatio,
 		minHeight,
@@ -293,7 +297,11 @@ export function useBlockSettings( name, parentLayout ) {
 		'spacing.padding',
 		'spacing.margin',
 		'spacing.blockGap',
-		'spacing.spacingSizes',
+		'spacing.defaultSpacingSizes',
+		'spacing.customSpacingSize',
+		'spacing.spacingSizes.custom',
+		'spacing.spacingSizes.default',
+		'spacing.spacingSizes.theme',
 		'spacing.units',
 		'dimensions.aspectRatio',
 		'dimensions.minHeight',
@@ -384,8 +392,12 @@ export function useBlockSettings( name, parentLayout ) {
 			},
 			spacing: {
 				spacingSizes: {
-					custom: spacingSizes,
+					custom: userSpacingSizes,
+					default: defaultSpacingSizes,
+					theme: themeSpacingSizes,
 				},
+				customSpacingSize,
+				defaultSpacingSizes: defaultSpacingSizesEnabled,
 				padding,
 				margin,
 				blockGap,
@@ -428,7 +440,11 @@ export function useBlockSettings( name, parentLayout ) {
 		padding,
 		margin,
 		blockGap,
-		spacingSizes,
+		defaultSpacingSizesEnabled,
+		customSpacingSize,
+		userSpacingSizes,
+		defaultSpacingSizes,
+		themeSpacingSizes,
 		units,
 		aspectRatio,
 		minHeight,
@@ -595,6 +611,7 @@ export function createBlockListBlockFilter( features ) {
 							// function reference.
 							setAllWrapperProps={ setAllWrapperProps }
 							name={ props.name }
+							clientId={ props.clientId }
 							// This component is pure, so only pass needed
 							// props!!!
 							{ ...neededProps }
@@ -610,7 +627,7 @@ export function createBlockListBlockFilter( features ) {
 							return {
 								...acc,
 								...wrapperProps,
-								className: classnames(
+								className: clsx(
 									acc.className,
 									wrapperProps.className
 								),

package/src/layouts/flex.js

@@ -403,12 +403,12 @@ function OrientationControl( { layout, onChange } ) {
 		>
 			<ToggleGroupControlOptionIcon
 				icon={ arrowRight }
-				value={ 'horizontal' }
+				value="horizontal"
 				label={ __( 'Horizontal' ) }
 			/>
 			<ToggleGroupControlOptionIcon
 				icon={ arrowDown }
-				value={ 'vertical' }
+				value="vertical"
 				label={ __( 'Vertical' ) }
 			/>
 		</ToggleGroupControl>

package/src/layouts/grid.js

@@ -68,7 +68,6 @@ export default {
 	inspectorControls: function GridLayoutInspectorControls( {
 		layout = {},
 		onChange,
-		clientId,
 		layoutBlockSupport = {},
 	} ) {
 		const { allowSizingOnChildren = false } = layoutBlockSupport;
@@ -90,14 +89,11 @@ export default {
 						onChange={ onChange }
 					/>
 				) }
-				{ window.__experimentalEnableGridInteractivity && (
-					<GridVisualizer clientId={ clientId } />
-				) }
 			</>
 		);
 	},
-	toolBarControls: function GridLayoutToolbarControls() {
-		return null;
+	toolBarControls: function GridLayoutToolbarControls( { clientId } ) {
+		return <GridVisualizer clientId={ clientId } />;
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
@@ -136,7 +132,7 @@ export default {
 		} else if ( minimumColumnWidth ) {
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
-				`container-type: inline-size`
+				'container-type: inline-size'
 			);
 		}
 
@@ -207,7 +203,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 			<Flex gap={ 4 }>
 				<FlexItem isBlock>
 					<UnitControl
-						size={ '__unstable-large' }
+						size="__unstable-large"
 						onChange={ ( newValue ) => {
 							onChange( {
 								...layout,
@@ -255,7 +251,7 @@ function GridLayoutColumnsAndRowsControl( {
 				<Flex gap={ 4 }>
 					<FlexItem isBlock>
 						<NumberControl
-							size={ '__unstable-large' }
+							size="__unstable-large"
 							onChange={ ( value ) => {
 								/**
 								 * If the input is cleared, avoid switching
@@ -300,7 +296,7 @@ function GridLayoutColumnsAndRowsControl( {
 						<Flex gap={ 4 }>
 							<FlexItem isBlock>
 								<NumberControl
-									size={ '__unstable-large' }
+									size="__unstable-large"
 									onChange={ ( value ) => {
 										onChange( {
 											...layout,
@@ -376,12 +372,12 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 			isBlock
 		>
 			<ToggleGroupControlOption
-				key={ 'auto' }
+				key="auto"
 				value="auto"
 				label={ __( 'Auto' ) }
 			/>
 			<ToggleGroupControlOption
-				key={ 'manual' }
+				key="manual"
 				value="manual"
 				label={ __( 'Manual' ) }
 			/>

package/src/private-apis.js

@@ -35,9 +35,14 @@ import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
+	globalStylesDataKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
+import { PrivateBlockPopover } from './components/block-popover';
+import { PrivateInserterLibrary } from './components/inserter/library';
+import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker';
+import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -72,8 +77,13 @@ lock( privateApis, {
 	useReusableBlocksRenameHint,
 	usesContextKey,
 	useFlashEditableBlocks,
+	globalStylesDataKey,
 	selectBlockPatternsKey,
 	requiresWrapperOnCopy,
 	PrivateRichText,
+	PrivateInserterLibrary,
 	reusableBlocksSelectKey,
+	PrivateBlockPopover,
+	PrivatePublishDateTimePicker,
+	useSpacingSizes,
 } );

package/src/store/actions.js

@@ -14,9 +14,11 @@ import {
 	synchronizeBlocksWithTemplate,
 	getBlockSupport,
 	isUnmodifiedDefaultBlock,
+	isUnmodifiedBlock,
 } from '@wordpress/blocks';
 import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 
@@ -25,6 +27,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import {
 	retrieveSelectedAttribute,
+	findRichTextAttributeKey,
 	START_OF_SELECTED_AREA,
 } from '../utils/selection';
 import {
@@ -821,27 +824,13 @@ export const __unstableDeleteSelection =
 
 /**
  * Split the current selection.
+ * @param {?Array} blocks
  */
 export const __unstableSplitSelection =
-	() =>
-	( { select, dispatch } ) => {
+	( blocks = [] ) =>
+	( { registry, select, dispatch } ) => {
 		const selectionAnchor = select.getSelectionStart();
 		const selectionFocus = select.getSelectionEnd();
-
-		if ( selectionAnchor.clientId === selectionFocus.clientId ) {
-			return;
-		}
-
-		// Can't split if the selection is not set.
-		if (
-			! selectionAnchor.attributeKey ||
-			! selectionFocus.attributeKey ||
-			typeof selectionAnchor.offset === 'undefined' ||
-			typeof selectionFocus.offset === 'undefined'
-		) {
-			return;
-		}
-
 		const anchorRootClientId = select.getBlockRootClientId(
 			selectionAnchor.clientId
 		);
@@ -872,12 +861,113 @@ export const __unstableSplitSelection =
 
 		const selectionA = selectionStart;
 		const selectionB = selectionEnd;
-
 		const blockA = select.getBlock( selectionA.clientId );
 		const blockB = select.getBlock( selectionB.clientId );
+		const blockAType = getBlockType( blockA.name );
+		const blockBType = getBlockType( blockB.name );
+		const attributeKeyA =
+			typeof selectionA.attributeKey === 'string'
+				? selectionA.attributeKey
+				: findRichTextAttributeKey( blockAType );
+		const attributeKeyB =
+			typeof selectionB.attributeKey === 'string'
+				? selectionB.attributeKey
+				: findRichTextAttributeKey( blockBType );
+		const blockAttributes = select.getBlockAttributes(
+			selectionA.clientId
+		);
+		const bindings = blockAttributes?.metadata?.bindings;
+
+		// If the attribute is bound, don't split the selection and insert a new block instead.
+		if ( bindings?.[ attributeKeyA ] ) {
+			// Show warning if user tries to insert a block into another block with bindings.
+			if ( blocks.length ) {
+				const { createWarningNotice } =
+					registry.dispatch( noticesStore );
+				createWarningNotice(
+					__(
+						"Blocks can't be inserted into other blocks with bindings"
+					),
+					{
+						type: 'snackbar',
+					}
+				);
+				return;
+			}
+			dispatch.insertAfterBlock( selectionA.clientId );
+			return;
+		}
 
-		const htmlA = blockA.attributes[ selectionA.attributeKey ];
-		const htmlB = blockB.attributes[ selectionB.attributeKey ];
+		// Can't split if the selection is not set.
+		if (
+			! attributeKeyA ||
+			! attributeKeyB ||
+			typeof selectionAnchor.offset === 'undefined' ||
+			typeof selectionFocus.offset === 'undefined'
+		) {
+			return;
+		}
+
+		// We can do some short-circuiting if the selection is collapsed.
+		if (
+			selectionA.clientId === selectionB.clientId &&
+			attributeKeyA === attributeKeyB &&
+			selectionA.offset === selectionB.offset
+		) {
+			// If an unmodified default block is selected, replace it. We don't
+			// want to be converting into a default block.
+			if ( blocks.length ) {
+				if ( isUnmodifiedDefaultBlock( blockA ) ) {
+					dispatch.replaceBlocks(
+						[ selectionA.clientId ],
+						blocks,
+						blocks.length - 1,
+						-1
+					);
+					return;
+				}
+			}
+
+			// If selection is at the start or end, we can simply insert an
+			// empty block, provided this block has no inner blocks.
+			else if ( ! select.getBlockOrder( selectionA.clientId ).length ) {
+				function createEmpty() {
+					const defaultBlockName = getDefaultBlockName();
+					return select.canInsertBlockType(
+						defaultBlockName,
+						anchorRootClientId
+					)
+						? createBlock( defaultBlockName )
+						: createBlock(
+								select.getBlockName( selectionA.clientId )
+						  );
+				}
+
+				const length = blockAttributes[ attributeKeyA ].length;
+
+				if ( selectionA.offset === 0 && length ) {
+					dispatch.insertBlocks(
+						[ createEmpty() ],
+						select.getBlockIndex( selectionA.clientId ),
+						anchorRootClientId,
+						false
+					);
+					return;
+				}
+
+				if ( selectionA.offset === length ) {
+					dispatch.insertBlocks(
+						[ createEmpty() ],
+						select.getBlockIndex( selectionA.clientId ) + 1,
+						anchorRootClientId
+					);
+					return;
+				}
+			}
+		}
+
+		const htmlA = blockA.attributes[ attributeKeyA ];
+		const htmlB = blockB.attributes[ attributeKeyB ];
 
 		let valueA = create( { html: htmlA } );
 		let valueB = create( { html: htmlB } );
@@ -885,28 +975,130 @@ export const __unstableSplitSelection =
 		valueA = remove( valueA, selectionA.offset, valueA.text.length );
 		valueB = remove( valueB, 0, selectionB.offset );
 
-		dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
-			{
-				// Preserve the original client ID.
-				...blockA,
-				attributes: {
-					...blockA.attributes,
-					[ selectionA.attributeKey ]: toHTMLString( {
-						value: valueA,
-					} ),
-				},
+		let head = {
+			// Preserve the original client ID.
+			...blockA,
+			// If both start and end are the same, should only copy innerBlocks
+			// once.
+			innerBlocks:
+				blockA.clientId === blockB.clientId ? [] : blockA.innerBlocks,
+			attributes: {
+				...blockA.attributes,
+				[ attributeKeyA ]: toHTMLString( { value: valueA } ),
 			},
-			{
-				// Preserve the original client ID.
-				...blockB,
+		};
+
+		const tail = {
+			...blockB,
+			// Only preserve the original client ID if the end is different.
+			clientId:
+				blockA.clientId === blockB.clientId
+					? createBlock( blockB.name ).clientId
+					: blockB.clientId,
+			attributes: {
+				...blockB.attributes,
+				[ attributeKeyB ]: toHTMLString( { value: valueB } ),
+			},
+		};
+
+		if ( ! blocks.length ) {
+			dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
+				head,
+				tail,
+			] );
+			return;
+		}
+
+		let selection;
+		const output = [];
+		const clonedBlocks = [ ...blocks ];
+		const firstBlock = clonedBlocks.shift();
+		const headType = getBlockType( head.name );
+		const firstBlocks =
+			headType.merge && firstBlock.name === headType.name
+				? [ firstBlock ]
+				: switchToBlockType( firstBlock, headType.name );
+
+		if ( firstBlocks?.length ) {
+			const first = firstBlocks.shift();
+			head = {
+				...head,
 				attributes: {
-					...blockB.attributes,
-					[ selectionB.attributeKey ]: toHTMLString( {
-						value: valueB,
-					} ),
+					...head.attributes,
+					...headType.merge( head.attributes, first.attributes ),
 				},
-			},
-		] );
+			};
+			output.push( head );
+			selection = {
+				clientId: head.clientId,
+				attributeKey: attributeKeyA,
+				offset: create( { html: head.attributes[ attributeKeyA ] } )
+					.text.length,
+			};
+			clonedBlocks.unshift( ...firstBlocks );
+		} else {
+			if ( ! isUnmodifiedBlock( head ) ) {
+				output.push( head );
+			}
+			output.push( firstBlock );
+		}
+
+		const lastBlock = clonedBlocks.pop();
+		const tailType = getBlockType( tail.name );
+
+		if ( clonedBlocks.length ) {
+			output.push( ...clonedBlocks );
+		}
+
+		if ( lastBlock ) {
+			const lastBlocks =
+				tailType.merge && tailType.name === lastBlock.name
+					? [ lastBlock ]
+					: switchToBlockType( lastBlock, tailType.name );
+
+			if ( lastBlocks?.length ) {
+				const last = lastBlocks.pop();
+				output.push( {
+					...tail,
+					attributes: {
+						...tail.attributes,
+						...tailType.merge( last.attributes, tail.attributes ),
+					},
+				} );
+				output.push( ...lastBlocks );
+				selection = {
+					clientId: tail.clientId,
+					attributeKey: attributeKeyB,
+					offset: create( {
+						html: last.attributes[ attributeKeyB ],
+					} ).text.length,
+				};
+			} else {
+				output.push( lastBlock );
+				if ( ! isUnmodifiedBlock( tail ) ) {
+					output.push( tail );
+				}
+			}
+		} else if ( ! isUnmodifiedBlock( tail ) ) {
+			output.push( tail );
+		}
+
+		registry.batch( () => {
+			dispatch.replaceBlocks(
+				select.getSelectedBlockClientIds(),
+				output,
+				output.length - 1,
+				0
+			);
+			if ( selection ) {
+				dispatch.selectionChange(
+					selection.clientId,
+					selection.attributeKey,
+					selection.offset,
+					selection.offset
+				);
+			}
+		} );
 	};
 
 /**
@@ -1340,11 +1532,18 @@ export const insertDefaultBlock =
 	};
 
 /**
- * Action that changes the nested settings of a given block.
+ * @typedef {Object< string, Object >} SettingsByClientId
+ */
+
+/**
+ * Action that changes the nested settings of the given block(s).
  *
- * @param {string} clientId Client ID of the block whose nested setting are
- *                          being received.
- * @param {Object} settings Object with the new settings for the nested block.
+ * @param {string | SettingsByClientId} clientId Client ID of the block whose
+ *                                               nested setting are being
+ *                                               received, or object of settings
+ *                                               by client ID.
+ * @param {Object}                      settings Object with the new settings
+ *                                               for the nested block.
  *
  * @return {Object} Action object
  */
@@ -1446,42 +1645,31 @@ export const __unstableSetEditorMode =
 		// When switching to zoom-out mode, we need to select the parent section
 		if ( mode === 'zoom-out' ) {
 			const firstSelectedClientId = select.getBlockSelectionStart();
-			const allBlocks = select.getBlocks();
-
 			const { sectionRootClientId } = unlock(
 				registry.select( STORE_NAME ).getSettings()
 			);
-			if ( sectionRootClientId ) {
-				const sectionClientIds =
-					select.getBlockOrder( sectionRootClientId );
-				const lastSectionClientId =
-					sectionClientIds[ sectionClientIds.length - 1 ];
-				if ( sectionClientIds ) {
-					if ( firstSelectedClientId ) {
-						const parents = select.getBlockParents(
-							firstSelectedClientId
-						);
-						const firstSectionClientId = parents.find( ( parent ) =>
+			if ( firstSelectedClientId ) {
+				let sectionClientId;
+
+				if ( sectionRootClientId ) {
+					const sectionClientIds =
+						select.getBlockOrder( sectionRootClientId );
+					sectionClientId = select
+						.getBlockParents( firstSelectedClientId )
+						.find( ( parent ) =>
 							sectionClientIds.includes( parent )
 						);
-						if ( firstSectionClientId ) {
-							dispatch.selectBlock( firstSectionClientId );
-						} else {
-							dispatch.selectBlock( lastSectionClientId );
-						}
-					} else {
-						dispatch.selectBlock( lastSectionClientId );
-					}
+				} else {
+					sectionClientId = select.getBlockHierarchyRootClientId(
+						firstSelectedClientId
+					);
+				}
+
+				if ( sectionClientId ) {
+					dispatch.selectBlock( sectionClientId );
+				} else {
+					dispatch.clearSelectedBlock();
 				}
-			} else if ( firstSelectedClientId ) {
-				const rootClientId = select.getBlockHierarchyRootClientId(
-					firstSelectedClientId
-				);
-				dispatch.selectBlock( rootClientId );
-			} else {
-				// If there's no block selected and no sectionRootClientId, select the last root block.
-				const lastRootBlock = allBlocks[ allBlocks.length - 1 ];
-				dispatch.selectBlock( lastRootBlock?.clientId );
 			}
 		}