@wordpress/block-editor 12.25.0 → 13.0.0

package/src/components/inspector-controls/fill.native.js

@@ -52,11 +52,9 @@ export default function InspectorControlsFill( {
 	return (
 		<>
 			<Fill { ...props }>
-				{
-					<BottomSheetConsumer>
-						{ () => <View>{ children }</View> }
-					</BottomSheetConsumer>
-				}
+				<BottomSheetConsumer>
+					{ () => <View>{ children }</View> }
+				</BottomSheetConsumer>
 			</Fill>
 			{ Children.count( children ) > 0 && <BlockSettingsButton /> }
 		</>

package/src/components/inspector-controls-tabs/index.js

@@ -5,6 +5,8 @@ import {
 	Button,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -24,6 +26,10 @@ export default function InspectorControlsTabs( {
 	hasBlockStyles,
 	tabs,
 } ) {
+	const showIconLabels = useSelect( ( select ) => {
+		return select( preferencesStore ).get( 'core', 'showIconLabels' );
+	}, [] );
+
 	// The tabs panel will mount before fills are rendered to the list view
 	// slot. This means the list view tab isn't initially included in the
 	// available tabs so the panel defaults selection to the settings tab
@@ -43,10 +49,16 @@ export default function InspectorControlsTabs( {
 							tabId={ tab.name }
 							render={
 								<Button
-									icon={ tab.icon }
-									label={ tab.title }
+									icon={
+										! showIconLabels ? tab.icon : undefined
+									}
+									label={
+										! showIconLabels ? tab.title : undefined
+									}
 									className={ tab.className }
-								/>
+								>
+									{ showIconLabels && tab.title }
+								</Button>
 							}
 						/>
 					) ) }

package/src/components/inspector-controls-tabs/style.scss

@@ -1,15 +1,7 @@
 .show-icon-labels {
 	.block-editor-block-inspector__tabs [role="tablist"] {
-		.components-button.has-icon {
-			// Hide the button icons when labels are set to display...
-			svg {
-				display: none;
-			}
-			// ... and display labels.
-			// Uses ::before as ::after is already used for active tab styling.
-			&::before {
-				content: attr(aria-label);
-			}
+		.components-button {
+			justify-content: center;
 		}
 	}
 }

package/src/components/keyboard-shortcuts/index.js

@@ -143,6 +143,18 @@ function KeyboardShortcutsRegister() {
 				character: 'l',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/block-editor/group',
+			category: 'block',
+			description: __(
+				'Create a group block from the selected multiple blocks.'
+			),
+			keyCombination: {
+				modifier: 'primary',
+				character: 'g',
+			},
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

package/src/components/line-height-control/test/index.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
-import { UP, DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -29,35 +29,37 @@ const ControlledLineHeightControl = () => {
 };
 
 describe( 'LineHeightControl', () => {
-	it( 'should immediately step up from the default value if up-arrowed from an unset state', () => {
+	it( 'should immediately step up from the default value if up-arrowed from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.keyDown( input, { keyCode: UP } );
+		await user.click( input );
+		await user.keyboard( '{ArrowUp}' );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
-	it( 'should immediately step down from the default value if down-arrowed from an unset state', () => {
+	it( 'should immediately step down from the default value if down-arrowed from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.keyDown( input, { keyCode: DOWN } );
+		await user.click( input );
+		await user.keyboard( '{ArrowDown}' );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 
-	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', () => {
+	it( 'should immediately step up from the default value if spin button up was clicked from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.change( input, { target: { value: 0.1 } } ); // simulates click on spin button up
+		await user.click( screen.getByRole( 'button', { name: 'Increment' } ) );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE + SPIN );
 	} );
 
-	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', () => {
+	it( 'should immediately step down from the default value if spin button down was clicked from an unset state', async () => {
+		const user = userEvent.setup();
 		render( <ControlledLineHeightControl /> );
 		const input = screen.getByRole( 'spinbutton' );
-		act( () => input.focus() );
-		fireEvent.change( input, { target: { value: 0 } } ); // simulates click on spin button down
+		await user.click( screen.getByRole( 'button', { name: 'Decrement' } ) );
 		expect( input ).toHaveValue( BASE_DEFAULT_VALUE - SPIN );
 	} );
 } );

package/src/components/link-control/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -220,7 +220,6 @@ function LinkControl( {
 		// because otherwise using the keyboard to select text
 		// *within* the link format is not possible.
 		if ( isMounting.current ) {
-			isMounting.current = false;
 			return;
 		}
 
@@ -238,6 +237,16 @@ function LinkControl( {
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink, isCreatingPage ] );
 
+	// The component mounting reference is maintained separately
+	// to correctly reset values in `StrictMode`.
+	useEffect( () => {
+		isMounting.current = false;
+
+		return () => {
+			isMounting.current = true;
+		};
+	}, [] );
+
 	const hasLinkValue = value?.url?.trim()?.length > 0;
 
 	/**
@@ -359,7 +368,7 @@ function LinkControl( {
 			{ isEditing && (
 				<>
 					<div
-						className={ classnames( {
+						className={ clsx( {
 							'block-editor-link-control__search-input-wrapper': true,
 							'has-text-control': showTextControl,
 							'has-actions': showActions,

package/src/components/link-control/link-preview.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ export default function LinkPreview( {
 	return (
 		<div
 			aria-label={ __( 'Currently selected' ) }
-			className={ classnames( 'block-editor-link-control__search-item', {
+			className={ clsx( 'block-editor-link-control__search-item', {
 				'is-current': true,
 				'is-rich': hasRichData,
 				'is-fetching': !! isFetching,
@@ -92,7 +92,7 @@ export default function LinkPreview( {
 			<div className="block-editor-link-control__search-item-top">
 				<span className="block-editor-link-control__search-item-header">
 					<span
-						className={ classnames(
+						className={ clsx(
 							'block-editor-link-control__search-item-icon',
 							{
 								'is-image': richData?.icon,

package/src/components/link-control/search-results.js

@@ -7,7 +7,7 @@ import { VisuallyHidden, MenuGroup } from '@wordpress/components';
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * Internal dependencies
@@ -30,7 +30,7 @@ export default function LinkControlSearchResults( {
 	createSuggestionButtonText,
 	suggestionsQuery,
 } ) {
-	const resultsListClasses = classnames(
+	const resultsListClasses = clsx(
 		'block-editor-link-control__search-results',
 		{
 			'is-loading': isLoading,

package/src/components/link-control/style.scss

@@ -36,13 +36,19 @@ $block-editor-link-control-number-of-actions: 1;
 		}
 
 		.block-editor-link-control__search-item-top {
-			gap: $grid-unit-10;
+			gap: $grid-unit-05;
+			flex-wrap: wrap;
 
 			.components-button.has-icon {
-				min-width: inherit;
-				width: min-content;
+				width: auto;
+				padding: $grid-unit-05;
 			}
 		}
+
+		.is-preview .block-editor-link-control__search-item-header {
+			min-width: 100%;
+			margin-right: 0;
+		}
 	}
 }
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -53,7 +53,7 @@ const ListViewBlockContents = forwardRef(
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
-		const className = classnames( 'block-editor-list-view-block-contents', {
+		const className = clsx( 'block-editor-list-view-block-contents', {
 			'is-dropping-before': isBlockMoveTarget,
 		} );
 
@@ -77,7 +77,7 @@ const ListViewBlockContents = forwardRef(
 				<BlockDraggable
 					appendToOwnerDocument
 					clientIds={ draggableClientIds }
-					cloneClassname={ 'block-editor-list-view-draggable-chip' }
+					cloneClassname="block-editor-list-view-draggable-chip"
 				>
 					{ ( { draggable, onDragStart, onDragEnd } ) => (
 						<ListViewBlockSelectButton

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,
 			{
@@ -452,7 +452,7 @@ export function MediaPlaceholder( {
 				multiple={ multiple }
 				onSelect={ onSelect }
 				allowedTypes={ allowedTypes }
-				mode={ 'browse' }
+				mode="browse"
 				value={
 					Array.isArray( value )
 						? value.map( ( { id } ) => id )
@@ -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-placeholder/index.native.js

@@ -164,7 +164,7 @@ function MediaPlaceholder( props ) {
 						activeOpacity={ 0.5 }
 						accessibilityLabel={ accessibilityLabel }
 						style={ buttonStyles }
-						accessibilityRole={ 'button' }
+						accessibilityRole="button"
 						accessibilityHint={ accessibilityHint }
 						hitSlop={ hitSlop }
 						onPress={ onButtonPress( open ) }
@@ -181,7 +181,7 @@ function MediaPlaceholder( props ) {
 					activeOpacity={ 0.5 }
 					accessibilityLabel={ accessibilityLabel }
 					style={ styles[ 'media-placeholder__appender' ] }
-					accessibilityRole={ 'button' }
+					accessibilityRole="button"
 					accessibilityHint={ accessibilityHint }
 					hitSlop={ hitSlop }
 					onPress={ onButtonPress( open ) }

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':