@wordpress/block-editor 12.25.0 → 12.26.0

package/src/components/list-view/block-select-button.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,7 @@ import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -26,6 +27,7 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import useListViewImages from './use-list-view-images';
+import { store as blockEditorStore } from '../../store';
 
 function ListViewBlockSelectButton(
 	{
@@ -51,6 +53,15 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
+	const { isContentOnly } = useSelect(
+		( select ) => ( {
+			isContentOnly:
+				select( blockEditorStore ).getBlockEditingMode( clientId ) ===
+				'contentOnly',
+		} ),
+		[ clientId ]
+	);
+	const shouldShowLockIcon = isLocked && ! isContentOnly;
 	const isSticky = blockInformation?.positionType === 'sticky';
 	const images = useListViewImages( { clientId, isExpanded } );
 
@@ -82,7 +93,7 @@ function ListViewBlockSelectButton(
 
 	return (
 		<Button
-			className={ classnames(
+			className={ clsx(
 				'block-editor-list-view-block-select-button',
 				className
 			) }
@@ -147,7 +158,7 @@ function ListViewBlockSelectButton(
 						) ) }
 					</span>
 				) : null }
-				{ isLocked && (
+				{ shouldShowLockIcon && (
 					<span className="block-editor-list-view-block-select-button__lock">
 						<Icon icon={ lock } />
 					</span>

package/src/components/list-view/block.js

@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport } from '@wordpress/blocks';
+import {
+	hasBlockSupport,
+	switchToBlockType,
+	store as blocksStore,
+} from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
@@ -25,6 +29,7 @@ import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -85,6 +90,7 @@ function ListViewBlock( {
 		toggleBlockHighlight,
 		duplicateBlocks,
 		multiSelect,
+		replaceBlocks,
 		removeBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
@@ -100,38 +106,32 @@ function ListViewBlock( {
 		getBlockParents,
 		getBlocksByClientId,
 		canRemoveBlocks,
+		isGroupable,
 	} = useSelect( blockEditorStore );
+	const { getGroupingBlockName } = useSelect( blocksStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 
-	const { block, blockName, blockEditingMode, allowRightClickOverrides } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlock,
-					getBlockName,
-					getBlockEditingMode,
-					getSettings,
-				} = select( blockEditorStore );
-
-				return {
-					block: getBlock( clientId ),
-					blockName: getBlockName( clientId ),
-					blockEditingMode: getBlockEditingMode( clientId ),
-					allowRightClickOverrides:
-						getSettings().allowRightClickOverrides,
-				};
-			},
-			[ clientId ]
-		);
+	const { block, blockName, allowRightClickOverrides } = useSelect(
+		( select ) => {
+			const { getBlock, getBlockName, getSettings } =
+				select( blockEditorStore );
+
+			return {
+				block: getBlock( clientId ),
+				blockName: getBlockName( clientId ),
+				allowRightClickOverrides:
+					getSettings().allowRightClickOverrides,
+			};
+		},
+		[ clientId ]
+	);
 
 	const showBlockActions =
 		// When a block hides its toolbar it also hides the block settings menu,
 		// since that menu is part of the toolbar in the editor canvas.
 		// List View respects this by also hiding the block settings menu.
-		hasBlockSupport( blockName, '__experimentalToolbar', true ) &&
-		// Don't show the settings menu if block is disabled or content only.
-		blockEditingMode === 'default';
+		hasBlockSupport( blockName, '__experimentalToolbar', true );
 	const instanceId = useInstanceId( ListViewBlock );
 	const descriptionId = `list-view-block-select-button__description-${ instanceId }`;
 
@@ -181,6 +181,8 @@ function ListViewBlock( {
 			return;
 		}
 
+		const isDeleteKey = [ BACKSPACE, DELETE ].includes( event.keyCode );
+
 		// If multiple blocks are selected, deselect all blocks when the user
 		// presses the escape key.
 		if (
@@ -191,10 +193,15 @@ function ListViewBlock( {
 			event.preventDefault();
 			selectBlock( event, undefined );
 		} else if (
-			event.keyCode === BACKSPACE ||
-			event.keyCode === DELETE ||
+			isDeleteKey ||
 			isMatch( 'core/block-editor/remove', event )
 		) {
+			// Do not handle single-key block deletion shortcuts when events come from modals;
+			// retain the default behavior for these keys.
+			if ( isDeleteKey && event.target.closest( '[role=dialog]' ) ) {
+				return;
+			}
+
 			const {
 				blocksToUpdate: blocksToDelete,
 				firstBlockClientId,
@@ -324,6 +331,23 @@ function ListViewBlock( {
 			collapseAll();
 			// Expand all parents of the current block.
 			expand( blockParents );
+		} else if ( isMatch( 'core/block-editor/group', event ) ) {
+			const { blocksToUpdate } = getBlocksToUpdate();
+			if ( blocksToUpdate.length > 1 && isGroupable( blocksToUpdate ) ) {
+				event.preventDefault();
+				const blocks = getBlocksByClientId( blocksToUpdate );
+				const groupingBlockName = getGroupingBlockName();
+				const newBlocks = switchToBlockType(
+					blocks,
+					groupingBlockName
+				);
+				replaceBlocks( blocksToUpdate, newBlocks );
+				speak( __( 'Selected blocks are grouped.' ) );
+				const newlySelectedBlocks = getSelectedBlockClientIds();
+				// Focus the first block of the newly inserted blocks, to keep focus within the list view.
+				setOpenedBlockSettingsMenu( undefined );
+				updateFocusAndSelection( newlySelectedBlocks[ 0 ], false );
+			}
 		}
 	}
 
@@ -446,12 +470,12 @@ function ListViewBlock( {
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
-	const moverCellClassName = classnames(
+	const moverCellClassName = clsx(
 		'block-editor-list-view-block__mover-cell',
 		{ 'is-visible': isHovered || isSelected }
 	);
 
-	const listViewBlockSettingsClassName = classnames(
+	const listViewBlockSettingsClassName = clsx(
 		'block-editor-list-view-block__menu-cell',
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
@@ -463,7 +487,7 @@ function ListViewBlock( {
 		colSpan = 3;
 	}
 
-	const classes = classnames( {
+	const classes = clsx( {
 		'is-selected': isSelected,
 		'is-first-selected': isFirstSelectedBlock,
 		'is-last-selected': isLastSelectedBlock,

package/src/components/list-view/drop-indicator.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -302,7 +302,7 @@ export default function ListViewDropIndicatorPreview( {
 		>
 			<div
 				style={ style }
-				className={ classnames(
+				className={ clsx(
 					'block-editor-list-view-drop-indicator__line',
 					{
 						'block-editor-list-view-drop-indicator__line--darker':
@@ -315,7 +315,7 @@ export default function ListViewDropIndicatorPreview( {
 					aria-level={ ariaLevel }
 				>
 					<div
-						className={ classnames(
+						className={ clsx(
 							'block-editor-list-view-block-select-button',
 							'block-editor-list-view-block-contents'
 						) }

package/src/components/list-view/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -366,7 +366,7 @@ function ListViewComponent(
 			) }
 			<TreeGrid
 				id={ id }
-				className={ classnames( 'block-editor-list-view-tree', {
+				className={ clsx( 'block-editor-list-view-tree', {
 					'is-dragging':
 						draggedClientIds?.length > 0 &&
 						blockDropTargetIndex !== undefined,

package/src/components/list-view/leaf.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { animated } from '@react-spring/web';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -44,10 +44,7 @@ const ListViewLeaf = forwardRef(
 		return (
 			<AnimatedTreeGridRow
 				ref={ mergedRef }
-				className={ classnames(
-					'block-editor-list-view-leaf',
-					className
-				) }
+				className={ clsx( 'block-editor-list-view-leaf', className ) }
 				level={ level }
 				positionInSet={ position }
 				setSize={ rowCount }

package/src/components/media-placeholder/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -349,7 +349,7 @@ export function MediaPlaceholder( {
 			}
 		}
 
-		const placeholderClassName = classnames(
+		const placeholderClassName = clsx(
 			'block-editor-media-placeholder',
 			className,
 			{
@@ -475,7 +475,7 @@ export function MediaPlaceholder( {
 								<>
 									<Button
 										variant="primary"
-										className={ classnames(
+										className={ clsx(
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
 										) }
@@ -502,7 +502,7 @@ export function MediaPlaceholder( {
 					{ renderDropZone() }
 					<FormFileUpload
 						variant="primary"
-						className={ classnames(
+						className={ clsx(
 							'block-editor-media-placeholder__button',
 							'block-editor-media-placeholder__upload-button'
 						) }

package/src/components/media-replace-flow/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -207,7 +207,7 @@ const MediaReplaceFlow = ( {
 					{ onSelectURL && (
 						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 						<form
-							className={ classnames(
+							className={ clsx(
 								'block-editor-media-flow__url-input',
 								{
 									'has-siblings':

package/src/components/plain-text/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import TextareaAutosize from 'react-autosize-textarea';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,7 @@ const PlainText = forwardRef( ( { __experimentalVersion, ...props }, ref ) => {
 	return (
 		<TextareaAutosize
 			ref={ ref }
-			className={ classnames( 'block-editor-plain-text', className ) }
+			className={ clsx( 'block-editor-plain-text', className ) }
 			onChange={ ( event ) => onChange( event.target.value ) }
 			{ ...remainingProps }
 		/>

package/src/components/provider/use-block-sync.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { useRegistry } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 
 /**
@@ -82,6 +82,15 @@ export default function useBlockSync( {
 	} = registry.dispatch( blockEditorStore );
 	const { getBlockName, getBlocks, getSelectionStart, getSelectionEnd } =
 		registry.select( blockEditorStore );
+	const isControlled = useSelect(
+		( select ) => {
+			return (
+				! clientId ||
+				select( blockEditorStore ).areInnerBlocksControlled( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	const pendingChanges = useRef( { incoming: null, outgoing: [] } );
 	const subscribed = useRef( false );
@@ -177,6 +186,23 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
+	const isMounted = useRef( false );
+
+	useEffect( () => {
+		// On mount, controlled blocks are already set in the effect above.
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
+			return;
+		}
+
+		// When the block becomes uncontrolled, it means its inner state has been reset
+		// we need to take the blocks again from the external value property.
+		if ( ! isControlled ) {
+			pendingChanges.current.outgoing = [];
+			setControlledBlocks();
+		}
+	}, [ isControlled ] );
+
 	useEffect( () => {
 		const {
 			getSelectedBlocksInitialCaretPosition,

package/src/components/responsive-block-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -98,7 +98,7 @@ function ResponsiveBlockControl( props ) {
 					help={ toggleHelpText }
 				/>
 				<div
-					className={ classnames(
+					className={ clsx(
 						'block-editor-responsive-block-control__group',
 						{
 							'is-responsive': isResponsive,

package/src/components/rich-text/README.md

@@ -29,14 +29,6 @@ _Optional._ Placeholder text to show when the field is empty, similar to the
 
 _Optional._  Disables inserting line breaks on `Enter` when it is set to `true`
 
-### `multiline: Boolean | String`
-
-_Optional._ By default, a line break will be inserted on <kbd>Enter</kbd>. If the editable field can contain multiple paragraphs, this property can be set to create new paragraphs on <kbd>Enter</kbd>.
-
-### `onSplit( value: String ): Function`
-
-_Optional._ Called when the content can be split, where `value` is a piece of content being split off. Here you should create a new block with that content and return it. Note that you also need to provide `onReplace` in order for this to take any effect.
-
 ### `onReplace( blocks: Array ): Function`
 
 _Optional._ Called when the `RichText` instance can be replaced with the given blocks.

package/src/components/rich-text/event-listeners/enter.js

@@ -3,33 +3,37 @@
  */
 import { ENTER } from '@wordpress/keycodes';
 import { insert, remove } from '@wordpress/rich-text';
-import { getBlockTransforms, findTransform } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-import { splitValue } from '../split-value';
 
 export default ( props ) => ( element ) => {
-	function onKeyDown( event ) {
-		if ( event.target.contentEditable !== 'true' ) {
+	function onKeyDownDeprecated( event ) {
+		if ( event.keyCode !== ENTER ) {
 			return;
 		}
 
+		const { onReplace, onSplit } = props.current;
+
+		if ( onReplace && onSplit ) {
+			event.__deprecatedOnSplit = true;
+		}
+	}
+
+	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) {
 			return;
 		}
 
+		// The event listener is attached to the window, so we need to check if
+		// the target is the element.
+		if ( event.target !== element ) {
+			return;
+		}
+
 		if ( event.keyCode !== ENTER ) {
 			return;
 		}
 
 		const {
-			removeEditorOnlyFormats,
 			value,
-			onReplace,
-			onSplit,
 			onChange,
 			disableLineBreaks,
 			onSplitAtEnd,
@@ -39,43 +43,12 @@ export default ( props ) => ( element ) => {
 
 		event.preventDefault();
 
-		const _value = { ...value };
-		_value.formats = removeEditorOnlyFormats( value );
-		const canSplit = onReplace && onSplit;
-
-		if ( onReplace ) {
-			const transforms = getBlockTransforms( 'from' ).filter(
-				( { type } ) => type === 'enter'
-			);
-			const transformation = findTransform( transforms, ( item ) => {
-				return item.regExp.test( _value.text );
-			} );
-
-			if ( transformation ) {
-				onReplace( [
-					transformation.transform( {
-						content: _value.text,
-					} ),
-				] );
-				registry
-					.dispatch( blockEditorStore )
-					.__unstableMarkAutomaticChange();
-				return;
-			}
-		}
-
-		const { text, start, end } = _value;
+		const { text, start, end } = value;
 
 		if ( event.shiftKey ) {
 			if ( ! disableLineBreaks ) {
-				onChange( insert( _value, '\n' ) );
+				onChange( insert( value, '\n' ) );
 			}
-		} else if ( canSplit ) {
-			splitValue( {
-				value: _value,
-				onReplace,
-				onSplit,
-			} );
 		} else if ( onSplitAtEnd && start === end && end === text.length ) {
 			onSplitAtEnd();
 		} else if (
@@ -88,17 +61,24 @@ export default ( props ) => ( element ) => {
 			text.slice( -2 ) === '\n\n'
 		) {
 			registry.batch( () => {
+				const _value = { ...value };
 				_value.start = _value.end - 2;
 				onChange( remove( _value ) );
 				onSplitAtDoubleLineEnd();
 			} );
 		} else if ( ! disableLineBreaks ) {
-			onChange( insert( _value, '\n' ) );
+			onChange( insert( value, '\n' ) );
 		}
 	}
 
-	element.addEventListener( 'keydown', onKeyDown );
+	const { defaultView } = element.ownerDocument;
+
+	// Attach the listener to the window so parent elements have the chance to
+	// prevent the default behavior.
+	defaultView.addEventListener( 'keydown', onKeyDown );
+	element.addEventListener( 'keydown', onKeyDownDeprecated );
 	return () => {
-		element.removeEventListener( 'keydown', onKeyDown );
+		defaultView.removeEventListener( 'keydown', onKeyDown );
+		element.removeEventListener( 'keydown', onKeyDownDeprecated );
 	};
 };

package/src/components/rich-text/event-listeners/paste-handler.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	pasteHandler,
-	findTransform,
-	getBlockTransforms,
-} from '@wordpress/blocks';
+import { pasteHandler } from '@wordpress/blocks';
 import { isEmpty, insert, create } from '@wordpress/rich-text';
 import { isURL } from '@wordpress/url';
 
@@ -13,7 +9,6 @@ import { isURL } from '@wordpress/url';
  * Internal dependencies
  */
 import { addActiveFormats } from '../utils';
-import { splitValue } from '../split-value';
 import { getPasteEventData } from '../../../utils/pasting';
 
 /** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
@@ -27,12 +22,22 @@ export default ( props ) => ( element ) => {
 			formatTypes,
 			tagName,
 			onReplace,
-			onSplit,
 			__unstableEmbedURLOnPaste,
+			preserveWhiteSpace,
 			pastePlainText,
 		} = props.current;
 
-		const { plainText, html, files } = getPasteEventData( event );
+		// The event listener is attached to the window, so we need to check if
+		// the target is the element.
+		if ( event.target !== element ) {
+			return;
+		}
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		const { plainText, html } = getPasteEventData( event );
 
 		event.preventDefault();
 
@@ -85,47 +90,7 @@ export default ( props ) => ( element ) => {
 			return;
 		}
 
-		if ( files?.length ) {
-			// Allows us to ask for this information when we get a report.
-			// eslint-disable-next-line no-console
-			window.console.log( 'Received items:\n\n', files );
-
-			const fromTransforms = getBlockTransforms( 'from' );
-			const blocks = files
-				.reduce( ( accumulator, file ) => {
-					const transformation = findTransform(
-						fromTransforms,
-						( transform ) =>
-							transform.type === 'files' &&
-							transform.isMatch( [ file ] )
-					);
-					if ( transformation ) {
-						accumulator.push(
-							transformation.transform( [ file ] )
-						);
-					}
-					return accumulator;
-				}, [] )
-				.flat();
-			if ( ! blocks.length ) {
-				return;
-			}
-
-			if ( onReplace && isEmpty( value ) ) {
-				onReplace( blocks );
-			} else {
-				splitValue( {
-					value,
-					pastedBlocks: blocks,
-					onReplace,
-					onSplit,
-				} );
-			}
-
-			return;
-		}
-
-		let mode = onReplace && onSplit ? 'AUTO' : 'INLINE';
+		let mode = 'INLINE';
 
 		const trimmedPlainText = plainText.trim();
 
@@ -144,6 +109,7 @@ export default ( props ) => ( element ) => {
 			plainText,
 			mode,
 			tagName,
+			preserveWhiteSpace,
 		} );
 
 		if ( typeof content === 'string' ) {
@@ -151,19 +117,16 @@ export default ( props ) => ( element ) => {
 		} else if ( content.length > 0 ) {
 			if ( onReplace && isEmpty( value ) ) {
 				onReplace( content, content.length - 1, -1 );
-			} else {
-				splitValue( {
-					value,
-					pastedBlocks: content,
-					onReplace,
-					onSplit,
-				} );
 			}
 		}
 	}
 
-	element.addEventListener( 'paste', _onPaste );
+	const { defaultView } = element.ownerDocument;
+
+	// Attach the listener to the window so parent elements have the chance to
+	// prevent the default behavior.
+	defaultView.addEventListener( 'paste', _onPaste );
 	return () => {
-		element.removeEventListener( 'paste', _onPaste );
+		defaultView.removeEventListener( 'paste', _onPaste );
 	};
 };