@wordpress/block-editor 12.25.0 → 12.26.0

package/src/components/inserter/menu.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -17,6 +17,7 @@ import {
 import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDebouncedInput } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -31,6 +32,7 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { useZoomOut } from '../../hooks/use-zoom-out';
+import { store as blockEditorStore } from '../../store';
 
 const NOOP = () => {};
 function InserterMenu(
@@ -45,18 +47,29 @@ function InserterMenu(
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
 		__experimentalOnPatternCategorySelection = NOOP,
+		onClose,
+		__experimentalInitialTab,
+		__experimentalInitialCategory,
 	},
 	ref
 ) {
+	const isZoomOutMode = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+		[]
+	);
 	const [ filterValue, setFilterValue, delayedFilterValue ] =
 		useDebouncedInput( __experimentalFilterValue );
 	const [ hoveredItem, setHoveredItem ] = useState( null );
-	const [ selectedPatternCategory, setSelectedPatternCategory ] =
-		useState( null );
+	const [ selectedPatternCategory, setSelectedPatternCategory ] = useState(
+		__experimentalInitialCategory
+	);
 	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
-	const [ selectedTab, setSelectedTab ] = useState( 'blocks' );
+	const [ selectedTab, setSelectedTab ] = useState(
+		__experimentalInitialTab
+	);
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -66,13 +79,27 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
+	const blockTypesTabRef = useRef();
 
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {
 			onInsertBlocks( blocks, meta, shouldForceFocusBlock );
 			onSelect();
+
+			// Check for focus loss due to filtering blocks by selected block type
+			window.requestAnimationFrame( () => {
+				if (
+					! shouldFocusBlock &&
+					! blockTypesTabRef?.current.contains(
+						ref.current.ownerDocument.activeElement
+					)
+				) {
+					// There has been a focus loss, so focus the first button in the block types tab
+					blockTypesTabRef?.current.querySelector( 'button' ).focus();
+				}
+			} );
 		},
-		[ onInsertBlocks, onSelect ]
+		[ onInsertBlocks, onSelect, shouldFocusBlock ]
 	);
 
 	const onInsertPattern = useCallback(
@@ -98,34 +125,27 @@ function InserterMenu(
 		[ onToggleInsertionPoint ]
 	);
 
-	const isZoomedOutViewExperimentEnabled =
-		window?.__experimentalEnableZoomedOutView;
 	const onClickPatternCategory = useCallback(
 		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
 			setPatternFilter( filter );
-			if ( isZoomedOutViewExperimentEnabled ) {
-				__experimentalOnPatternCategorySelection();
-			}
+			__experimentalOnPatternCategorySelection();
 		},
-		[
-			setSelectedPatternCategory,
-			__experimentalOnPatternCategorySelection,
-			isZoomedOutViewExperimentEnabled,
-		]
+		[ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ]
 	);
 
 	const showPatternPanel =
 		selectedTab === 'patterns' &&
 		! delayedFilterValue &&
-		selectedPatternCategory;
+		!! selectedPatternCategory;
 
-	const showMediaPanel = selectedTab === 'media' && selectedMediaCategory;
+	const showMediaPanel = selectedTab === 'media' && !! selectedMediaCategory;
 
 	const inserterSearch = useMemo( () => {
 		if ( selectedTab === 'media' ) {
 			return null;
 		}
+
 		return (
 			<>
 				<SearchControl
@@ -177,83 +197,68 @@ function InserterMenu(
 		isAppender,
 	] );
 
-	const blocksTab = useMemo(
-		() => (
+	const blocksTab = useMemo( () => {
+		return (
 			<>
-				{ inserterSearch }
-				{ ! delayedFilterValue && (
-					<>
-						<div className="block-editor-inserter__block-list">
-							<BlockTypesTab
-								rootClientId={ destinationRootClientId }
-								onInsert={ onInsert }
-								onHover={ onHover }
-								showMostUsedBlocks={ showMostUsedBlocks }
-							/>
-						</div>
-						{ showInserterHelpPanel && (
-							<div className="block-editor-inserter__tips">
-								<VisuallyHidden as="h2">
-									{ __( 'A tip for using the block editor' ) }
-								</VisuallyHidden>
-								<Tips />
-							</div>
-						) }
-					</>
+				<div className="block-editor-inserter__block-list">
+					<BlockTypesTab
+						ref={ blockTypesTabRef }
+						rootClientId={ destinationRootClientId }
+						onInsert={ onInsert }
+						onHover={ onHover }
+						showMostUsedBlocks={ showMostUsedBlocks }
+					/>
+				</div>
+				{ showInserterHelpPanel && (
+					<div className="block-editor-inserter__tips">
+						<VisuallyHidden as="h2">
+							{ __( 'A tip for using the block editor' ) }
+						</VisuallyHidden>
+						<Tips />
+					</div>
 				) }
 			</>
-		),
-		[
-			destinationRootClientId,
-			onInsert,
-			onHover,
-			showMostUsedBlocks,
-			showInserterHelpPanel,
-			inserterSearch,
-			delayedFilterValue,
-		]
-	);
+		);
+	}, [
+		destinationRootClientId,
+		onInsert,
+		onHover,
+		showMostUsedBlocks,
+		showInserterHelpPanel,
+	] );
 
-	const patternsTab = useMemo(
-		() => (
-			<>
-				{ inserterSearch }
-				{ ! delayedFilterValue && (
-					<BlockPatternsTab
+	const patternsTab = useMemo( () => {
+		return (
+			<BlockPatternsTab
+				rootClientId={ destinationRootClientId }
+				onInsert={ onInsertPattern }
+				onSelectCategory={ onClickPatternCategory }
+				selectedCategory={ selectedPatternCategory }
+			>
+				{ showPatternPanel && (
+					<PatternCategoryPreviewPanel
 						rootClientId={ destinationRootClientId }
 						onInsert={ onInsertPattern }
-						onSelectCategory={ onClickPatternCategory }
-						selectedCategory={ selectedPatternCategory }
-					>
-						{ showPatternPanel && (
-							<PatternCategoryPreviewPanel
-								rootClientId={ destinationRootClientId }
-								onInsert={ onInsertPattern }
-								onHover={ onHoverPattern }
-								category={ selectedPatternCategory }
-								patternFilter={ patternFilter }
-								showTitlesAsTooltip
-							/>
-						) }
-					</BlockPatternsTab>
+						onHover={ onHoverPattern }
+						category={ selectedPatternCategory }
+						patternFilter={ patternFilter }
+						showTitlesAsTooltip
+					/>
 				) }
-			</>
-		),
-		[
-			destinationRootClientId,
-			onHoverPattern,
-			onInsertPattern,
-			onClickPatternCategory,
-			patternFilter,
-			selectedPatternCategory,
-			showPatternPanel,
-			inserterSearch,
-			delayedFilterValue,
-		]
-	);
+			</BlockPatternsTab>
+		);
+	}, [
+		destinationRootClientId,
+		onHoverPattern,
+		onInsertPattern,
+		onClickPatternCategory,
+		patternFilter,
+		selectedPatternCategory,
+		showPatternPanel,
+	] );
 
-	const mediaTab = useMemo(
-		() => (
+	const mediaTab = useMemo( () => {
+		return (
 			<MediaTab
 				rootClientId={ destinationRootClientId }
 				selectedCategory={ selectedMediaCategory }
@@ -268,24 +273,14 @@ function InserterMenu(
 					/>
 				) }
 			</MediaTab>
-		),
-		[
-			destinationRootClientId,
-			onInsert,
-			selectedMediaCategory,
-			setSelectedMediaCategory,
-			showMediaPanel,
-		]
-	);
-
-	const inserterTabsContents = useMemo(
-		() => ( {
-			blocks: blocksTab,
-			patterns: patternsTab,
-			media: mediaTab,
-		} ),
-		[ blocksTab, mediaTab, patternsTab ]
-	);
+		);
+	}, [
+		destinationRootClientId,
+		onInsert,
+		selectedMediaCategory,
+		setSelectedMediaCategory,
+		showMediaPanel,
+	] );
 
 	// When the pattern panel is showing, we want to use zoom out mode
 	useZoomOut( showPatternPanel );
@@ -312,8 +307,9 @@ function InserterMenu(
 
 	return (
 		<div
-			className={ classnames( 'block-editor-inserter__menu', {
+			className={ clsx( 'block-editor-inserter__menu', {
 				'show-panel': showPatternPanel || showMediaPanel,
+				'is-zoom-out': isZoomOutMode,
 			} ) }
 			ref={ ref }
 		>
@@ -321,8 +317,18 @@ function InserterMenu(
 				<InserterTabs
 					ref={ tabsRef }
 					onSelect={ handleSetSelectedTab }
-					tabsContents={ inserterTabsContents }
-				/>
+					onClose={ onClose }
+					selectedTab={ selectedTab }
+				>
+					{ inserterSearch }
+					{ selectedTab === 'blocks' &&
+						! delayedFilterValue &&
+						blocksTab }
+					{ selectedTab === 'patterns' &&
+						! delayedFilterValue &&
+						patternsTab }
+					{ selectedTab === 'media' && mediaTab }
+				</InserterTabs>
 			</div>
 			{ showInserterHelpPanel && hoveredItem && (
 				<Popover

package/src/components/inserter/quick-inserter.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -96,7 +96,7 @@ export default function QuickInserter( {
 
 	return (
 		<div
-			className={ classnames( 'block-editor-inserter__quick-inserter', {
+			className={ clsx( 'block-editor-inserter__quick-inserter', {
 				'has-search': showSearch,
 				'has-expand': setInserterIsOpened,
 			} ) }

package/src/components/inserter/style.scss

@@ -116,7 +116,7 @@ $block-inserter-tabs-height: 44px;
 	overflow: hidden;
 
 	.block-editor-inserter__tablist {
-		border-bottom: $border-width solid $gray-300;
+		width: 100%;
 
 		button[role="tab"] {
 			flex-grow: 1;
@@ -187,7 +187,8 @@ $block-inserter-tabs-height: 44px;
 	width: 100%;
 }
 
-.block-editor-inserter__no-results {
+.block-editor-inserter__no-results,
+.block-editor-inserter__patterns-loading {
 	padding: $grid-unit-40;
 	text-align: center;
 }
@@ -700,12 +701,9 @@ $block-inserter-tabs-height: 44px;
 	display: none;
 }
 
-.is-zoom-out {
-	.block-editor-inserter__menu {
-		display: flex;
-	}
-
-	.show-panel::after {
+.block-editor-inserter__menu.is-zoom-out {
+	display: flex;
+	&.show-panel::after {
 		// Makes space for the inserter flyout panel
 		@include break-medium {
 			content: "";

package/src/components/inserter/tabs.js

@@ -1,9 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { forwardRef } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -29,23 +33,33 @@ const mediaTab = {
 	title: __( 'Media' ),
 };
 
-function InserterTabs( { onSelect, tabsContents }, ref ) {
+function InserterTabs( { onSelect, children, onClose, selectedTab }, ref ) {
 	const tabs = [ blocksTab, patternsTab, mediaTab ];
 
 	return (
 		<div className="block-editor-inserter__tabs" ref={ ref }>
-			<Tabs onSelect={ onSelect }>
-				<Tabs.TabList className="block-editor-inserter__tablist">
-					{ tabs.map( ( tab ) => (
-						<Tabs.Tab
-							key={ tab.name }
-							tabId={ tab.name }
-							className="block-editor-inserter__tab"
-						>
-							{ tab.title }
-						</Tabs.Tab>
-					) ) }
-				</Tabs.TabList>
+			<Tabs onSelect={ onSelect } selectedTabId={ selectedTab }>
+				<div className="block-editor-inserter-sidebar__header">
+					<Button
+						className="block-editor-inserter-sidebar__close-button"
+						icon={ closeSmall }
+						label={ __( 'Close block inserter' ) }
+						onClick={ () => onClose() }
+						size="small"
+					/>
+
+					<Tabs.TabList className="block-editor-inserter__tablist">
+						{ tabs.map( ( tab ) => (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className="block-editor-inserter__tab"
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+				</div>
 				{ tabs.map( ( tab ) => (
 					<Tabs.TabPanel
 						key={ tab.name }
@@ -53,7 +67,7 @@ function InserterTabs( { onSelect, tabsContents }, ref ) {
 						focusable={ false }
 						className="block-editor-inserter__tabpanel"
 					>
-						{ tabsContents[ tab.name ] }
+						{ children }
 					</Tabs.TabPanel>
 				) ) }
 			</Tabs>

package/src/components/inserter-list-item/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -62,7 +62,7 @@ function InserterListItem( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
-					className={ classnames(
+					className={ clsx(
 						'block-editor-block-types-list__list-item',
 						{
 							'is-synced': isSynced,
@@ -85,7 +85,7 @@ function InserterListItem( {
 				>
 					<InserterListboxItem
 						isFirst={ isFirst }
-						className={ classnames(
+						className={ clsx(
 							'block-editor-block-types-list__item',
 							className
 						) }

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
@@ -359,7 +359,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/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,
 		} );