@wordpress/block-editor 10.1.1-next.4d3b314fd5.0 → 10.3.0

package/src/components/image-size-control/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -85,7 +85,7 @@ describe( 'ImageSizeControl', () => {
 	} );
 
 	describe( 'updating dimension inputs', () => {
-		it( 'updates height and calls onChange', async () => {
+		it( 'updates height and calls onChange', () => {
 			render( <ImageSizeControl onChange={ mockOnChange } /> );
 
 			const heightInput = getHeightInput();
@@ -96,16 +96,14 @@ describe( 'ImageSizeControl', () => {
 
 			fireEvent.change( heightInput, { target: { value: '500' } } );
 
-			await waitFor( () => {
-				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-				expect( mockOnChange ).toHaveBeenCalledWith( { height: 500 } );
-			} );
+			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnChange ).toHaveBeenCalledWith( { height: 500 } );
 
 			expect( heightInput.value ).toBe( '500' );
 			expect( widthInput.value ).toBe( '' );
 		} );
 
-		it( 'updates width and calls onChange', async () => {
+		it( 'updates width and calls onChange', () => {
 			render( <ImageSizeControl onChange={ mockOnChange } /> );
 
 			const heightInput = getHeightInput();
@@ -115,16 +113,15 @@ describe( 'ImageSizeControl', () => {
 			expect( widthInput.value ).toBe( '' );
 
 			fireEvent.change( widthInput, { target: { value: '500' } } );
-			await waitFor( () => {
-				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-				expect( mockOnChange ).toHaveBeenCalledWith( { width: 500 } );
-			} );
+
+			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnChange ).toHaveBeenCalledWith( { width: 500 } );
 
 			expect( heightInput.value ).toBe( '' );
 			expect( widthInput.value ).toBe( '500' );
 		} );
 
-		it( 'updates height and calls onChange for empty value', async () => {
+		it( 'updates height and calls onChange for empty value', () => {
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -141,20 +138,19 @@ describe( 'ImageSizeControl', () => {
 
 			fireEvent.change( heightInput, { target: { value: '' } } );
 
-			await waitFor( () => {
-				// onChange is called and sets the dimension to undefined rather than
-				// the empty string.
-				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-				expect( mockOnChange ).toHaveBeenCalledWith( {
-					height: undefined,
-				} );
+			// onChange is called and sets the dimension to undefined rather than
+			// the empty string.
+			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnChange ).toHaveBeenCalledWith( {
+				height: undefined,
 			} );
+
 			// Height is updated to empty value and does not reset to default.
 			expect( heightInput.value ).toBe( '' );
 			expect( widthInput.value ).toBe( '100' );
 		} );
 
-		it( 'updates width and calls onChange for empty value', async () => {
+		it( 'updates width and calls onChange for empty value', () => {
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -171,14 +167,13 @@ describe( 'ImageSizeControl', () => {
 
 			fireEvent.change( widthInput, { target: { value: '' } } );
 
-			await waitFor( () => {
-				// onChange is called and sets the dimension to undefined rather than
-				// the empty string.
-				expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
-				expect( mockOnChange ).toHaveBeenCalledWith( {
-					width: undefined,
-				} );
+			// onChange is called and sets the dimension to undefined rather than
+			// the empty string.
+			expect( mockOnChange ).toHaveBeenCalledTimes( 1 );
+			expect( mockOnChange ).toHaveBeenCalledWith( {
+				width: undefined,
 			} );
+
 			// Width is updated to empty value and does not reset to default.
 			expect( heightInput.value ).toBe( '100' );
 			expect( widthInput.value ).toBe( '' );
@@ -186,7 +181,7 @@ describe( 'ImageSizeControl', () => {
 	} );
 
 	describe( 'reset button', () => {
-		it( 'resets both height and width to default values', async () => {
+		it( 'resets both height and width to default values', () => {
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -206,22 +201,20 @@ describe( 'ImageSizeControl', () => {
 
 			fireEvent.click( screen.getByText( 'Reset' ) );
 
-			await waitFor( () => {
-				// Both attributes are set to undefined to clear custom values.
-				expect( mockOnChange ).toHaveBeenCalledWith( {
-					height: undefined,
-					width: undefined,
-				} );
-
-				// The inputs display the default values once more.
-				expect( heightInput.value ).toBe( '100' );
-				expect( widthInput.value ).toBe( '200' );
+			// Both attributes are set to undefined to clear custom values.
+			expect( mockOnChange ).toHaveBeenCalledWith( {
+				height: undefined,
+				width: undefined,
 			} );
+
+			// The inputs display the default values once more.
+			expect( heightInput.value ).toBe( '100' );
+			expect( widthInput.value ).toBe( '200' );
 		} );
 	} );
 
 	describe( 'image size percentage presets', () => {
-		it( 'updates height and width attributes on selection', async () => {
+		it( 'updates height and width attributes on selection', () => {
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -232,18 +225,16 @@ describe( 'ImageSizeControl', () => {
 
 			fireEvent.click( screen.getByText( '50%' ) );
 
-			await waitFor( () => {
-				expect( screen.getByText( '50%' ) ).toHaveClass( 'is-pressed' );
+			expect( screen.getByText( '50%' ) ).toHaveClass( 'is-pressed' );
 
-				// Both attributes are set to the rounded scaled value.
-				expect( mockOnChange ).toHaveBeenCalledWith( {
-					height: 50,
-					width: 101,
-				} );
+			// Both attributes are set to the rounded scaled value.
+			expect( mockOnChange ).toHaveBeenCalledWith( {
+				height: 50,
+				width: 101,
 			} );
 		} );
 
-		it( 'updates height and width inputs on selection', async () => {
+		it( 'updates height and width inputs on selection', () => {
 			render(
 				<ImageSizeControl
 					imageHeight="100"
@@ -254,11 +245,9 @@ describe( 'ImageSizeControl', () => {
 
 			fireEvent.click( screen.getByText( '50%' ) );
 
-			await waitFor( () => {
-				// Both attributes are set to the rounded scaled value.
-				expect( getHeightInput().value ).toBe( '50' );
-				expect( getWidthInput().value ).toBe( '101' );
-			} );
+			// Both attributes are set to the rounded scaled value.
+			expect( getHeightInput().value ).toBe( '50' );
+			expect( getWidthInput().value ).toBe( '101' );
 		} );
 	} );
 
@@ -284,7 +273,7 @@ describe( 'ImageSizeControl', () => {
 			);
 		} );
 
-		it( 'calls onChangeImage with selected slug on selection', async () => {
+		it( 'calls onChangeImage with selected slug on selection', () => {
 			render(
 				<ImageSizeControl
 					imageSizeOptions={ IMAGE_SIZE_OPTIONS }
@@ -298,13 +287,11 @@ describe( 'ImageSizeControl', () => {
 				target: { value: 'thumbnail' },
 			} );
 
-			await waitFor( () => {
-				// onChangeImage is called with the slug and the event.
-				expect( mockOnChangeImage ).toHaveBeenCalledWith(
-					'thumbnail',
-					expect.any( Object )
-				);
-			} );
+			// onChangeImage is called with the slug and the event.
+			expect( mockOnChangeImage ).toHaveBeenCalledWith(
+				'thumbnail',
+				expect.any( Object )
+			);
 		} );
 	} );
 } );

package/src/components/index.js

@@ -155,7 +155,6 @@ export {
 export { default as __experimentalBlockPatternsList } from './block-patterns-list';
 export { default as __experimentalPublishDateTimePicker } from './publish-date-time-picker';
 export { default as __experimentalInspectorPopoverHeader } from './inspector-popover-header';
-export { default as __experimentalUseOnBlockDrop } from './use-on-block-drop';
 
 /*
  * State Related Components

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -40,7 +40,7 @@ export default function useInnerBlockTemplateSync(
 	templateLock,
 	templateInsertUpdatesSelection
 ) {
-	const { getSelectedBlocksInitialCaretPosition } =
+	const { getSelectedBlocksInitialCaretPosition, isBlockSelected } =
 		useSelect( blockEditorStore );
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const innerBlocks = useSelect(
@@ -86,7 +86,8 @@ export default function useInnerBlockTemplateSync(
 					nextBlocks,
 					currentInnerBlocks.length === 0 &&
 						templateInsertUpdatesSelection &&
-						nextBlocks.length !== 0,
+						nextBlocks.length !== 0 &&
+						isBlockSelected( clientId ),
 					// This ensures the "initialPosition" doesn't change when applying the template
 					// If we're supposed to focus the block, we'll focus the first inner block
 					// otherwise, we won't apply any auto-focus.

package/src/components/inserter/block-patterns-tab.js

@@ -1,96 +1,37 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useState, useCallback } from '@wordpress/element';
-import { _x } from '@wordpress/i18n';
-import { useAsyncList } from '@wordpress/compose';
+import {
+	useMemo,
+	useState,
+	useCallback,
+	useRef,
+	useEffect,
+} from '@wordpress/element';
+import { _x, __, isRTL } from '@wordpress/i18n';
+import { useAsyncList, useViewportMatch } from '@wordpress/compose';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalNavigatorBackButton as NavigatorBackButton,
+	FlexBlock,
+	Button,
+} from '@wordpress/components';
+import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
+import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
  */
-import PatternInserterPanel from './pattern-panel';
 import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 
-function BlockPatternsCategory( {
-	rootClientId,
-	onInsert,
-	selectedCategory,
-	populatedCategories,
-} ) {
-	const [ allPatterns, , onClick ] = usePatternsState(
-		onInsert,
-		rootClientId
-	);
-
-	const getPatternIndex = useCallback(
-		( pattern ) => {
-			if ( ! pattern.categories?.length ) {
-				return Infinity;
-			}
-			const indexedCategories = populatedCategories.reduce(
-				( accumulator, { name }, index ) => {
-					accumulator[ name ] = index;
-					return accumulator;
-				},
-				{}
-			);
-			return Math.min(
-				...pattern.categories.map( ( cat ) =>
-					indexedCategories[ cat ] !== undefined
-						? indexedCategories[ cat ]
-						: Infinity
-				)
-			);
-		},
-		[ populatedCategories ]
-	);
-
-	const currentCategoryPatterns = useMemo(
-		() =>
-			allPatterns.filter( ( pattern ) =>
-				selectedCategory.name === 'uncategorized'
-					? getPatternIndex( pattern ) === Infinity
-					: pattern.categories?.includes( selectedCategory.name )
-			),
-		[ allPatterns, selectedCategory ]
-	);
-
-	// Ordering the patterns is important for the async rendering.
-	const orderedPatterns = useMemo( () => {
-		return currentCategoryPatterns.sort( ( a, b ) => {
-			return getPatternIndex( a ) - getPatternIndex( b );
-		} );
-	}, [ currentCategoryPatterns, getPatternIndex ] );
-
-	const currentShownPatterns = useAsyncList( orderedPatterns );
-
-	if ( ! currentCategoryPatterns.length ) {
-		return null;
-	}
-
-	return (
-		<div className="block-editor-inserter__panel-content">
-			<BlockPatternList
-				shownPatterns={ currentShownPatterns }
-				blockPatterns={ currentCategoryPatterns }
-				onClickPattern={ onClick }
-				label={ selectedCategory.label }
-				orientation="vertical"
-				isDraggable
-			/>
-		</div>
-	);
-}
-
-function BlockPatternsTabs( {
-	rootClientId,
-	onInsert,
-	onClickCategory,
-	selectedCategory,
-} ) {
-	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
+function usePatternsCategories() {
 	const [ allPatterns, allCategories ] = usePatternsState();
 
 	const hasRegisteredCategory = useCallback(
@@ -138,30 +79,173 @@ function BlockPatternsTabs( {
 		return categories;
 	}, [ allPatterns, allCategories ] );
 
-	const patternCategory = selectedCategory
-		? selectedCategory
-		: populatedCategories[ 0 ];
+	return populatedCategories;
+}
+
+export function BlockPatternsCategoryDialog( {
+	rootClientId,
+	onInsert,
+	category,
+} ) {
+	const container = useRef();
+
+	useEffect( () => {
+		const timeout = setTimeout( () => {
+			const [ firstTabbable ] = focus.tabbable.find( container.current );
+			firstTabbable?.focus();
+		} );
+		return () => clearTimeout( timeout );
+	}, [ category ] );
 
 	return (
-		<>
-			<PatternInserterPanel
-				selectedCategory={ patternCategory }
-				patternCategories={ populatedCategories }
-				onClickCategory={ onClickCategory }
-				openPatternExplorer={ () => setShowPatternsExplorer( true ) }
+		<div
+			ref={ container }
+			className="block-editor-inserter__patterns-category-panel"
+		>
+			<BlockPatternsCategoryPanel
+				rootClientId={ rootClientId }
+				onInsert={ onInsert }
+				category={ category }
 			/>
-			{ ! showPatternsExplorer && (
-				<BlockPatternsCategory
-					rootClientId={ rootClientId }
+		</div>
+	);
+}
+
+export function BlockPatternsCategoryPanel( {
+	rootClientId,
+	onInsert,
+	category,
+} ) {
+	const [ allPatterns, , onClick ] = usePatternsState(
+		onInsert,
+		rootClientId
+	);
+
+	const availableCategories = usePatternsCategories();
+	const currentCategoryPatterns = useMemo(
+		() =>
+			allPatterns.filter( ( pattern ) => {
+				if ( category.name !== 'uncategorized' ) {
+					return pattern.categories?.includes( category.name );
+				}
+
+				// The uncategorized category should show all the patterns without any category
+				// or with no available category.
+				const availablePatternCategories =
+					pattern.categories?.filter( ( cat ) =>
+						availableCategories.find(
+							( availableCategory ) =>
+								availableCategory.name === cat
+						)
+					) ?? [];
+
+				return availablePatternCategories.length === 0;
+			} ),
+		[ allPatterns, category ]
+	);
+
+	const currentShownPatterns = useAsyncList( currentCategoryPatterns );
+
+	if ( ! currentCategoryPatterns.length ) {
+		return null;
+	}
+
+	return (
+		<div>
+			<div className="block-editor-inserter__patterns-category-panel-title">
+				{ category.label }
+			</div>
+			<p>{ category.description }</p>
+			<BlockPatternList
+				shownPatterns={ currentShownPatterns }
+				blockPatterns={ currentCategoryPatterns }
+				onClickPattern={ onClick }
+				label={ category.label }
+				orientation="vertical"
+				category={ category.label }
+				isDraggable
+			/>
+		</div>
+	);
+}
+
+function BlockPatternsTabs( {
+	onSelectCategory,
+	selectedCategory,
+	onInsert,
+	rootClientId,
+} ) {
+	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
+	const categories = usePatternsCategories();
+	const isMobile = useViewportMatch( 'medium', '<' );
+
+	return (
+		<>
+			{ ! isMobile && (
+				<div className="block-editor-inserter__block-patterns-tabs-container">
+					<nav aria-label={ __( 'Block pattern categories' ) }>
+						<ItemGroup
+							role="list"
+							className="block-editor-inserter__block-patterns-tabs"
+						>
+							{ categories.map( ( category ) => (
+								<Item
+									role="listitem"
+									key={ category.name }
+									onClick={ () =>
+										onSelectCategory( category )
+									}
+									className={
+										category === selectedCategory
+											? 'block-editor-inserter__patterns-category block-editor-inserter__patterns-selected-category'
+											: 'block-editor-inserter__patterns-category'
+									}
+									aria-label={ category.label }
+									aria-current={
+										category === selectedCategory
+											? 'true'
+											: undefined
+									}
+								>
+									<HStack>
+										<FlexBlock>
+											{ category.label }
+										</FlexBlock>
+										<Icon icon={ chevronRight } />
+									</HStack>
+								</Item>
+							) ) }
+
+							<div
+								role="presentation"
+								className="block-editor-inserter__patterns-fill-space"
+							/>
+
+							<div role="listitem">
+								<Button
+									className="block-editor-inserter__patterns-explore-button"
+									onClick={ () =>
+										setShowPatternsExplorer( true )
+									}
+									variant="secondary"
+								>
+									{ __( 'Explore all patterns' ) }
+								</Button>
+							</div>
+						</ItemGroup>
+					</nav>
+				</div>
+			) }
+			{ isMobile && (
+				<BlockPatternsTabNavigation
 					onInsert={ onInsert }
-					selectedCategory={ patternCategory }
-					populatedCategories={ populatedCategories }
+					rootClientId={ rootClientId }
 				/>
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal
-					initialCategory={ patternCategory }
-					patternCategories={ populatedCategories }
+					initialCategory={ selectedCategory }
+					patternCategories={ categories }
 					onModalClose={ () => setShowPatternsExplorer( false ) }
 				/>
 			) }
@@ -169,4 +253,54 @@ function BlockPatternsTabs( {
 	);
 }
 
+function BlockPatternsTabNavigation( { onInsert, rootClientId } ) {
+	const categories = usePatternsCategories();
+
+	return (
+		<NavigatorProvider initialPath="/">
+			<NavigatorScreen path="/">
+				<ItemGroup>
+					{ categories.map( ( category ) => (
+						<NavigatorButton
+							key={ category.name }
+							path={ `/category/${ category.name }` }
+							as={ Item }
+							isAction
+						>
+							<HStack>
+								<FlexBlock>{ category.label }</FlexBlock>
+								<Icon
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
+							</HStack>
+						</NavigatorButton>
+					) ) }
+				</ItemGroup>
+			</NavigatorScreen>
+
+			{ categories.map( ( category ) => (
+				<NavigatorScreen
+					key={ category.name }
+					path={ `/category/${ category.name }` }
+				>
+					<NavigatorBackButton
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						isSmall
+						aria-label={ __( 'Navigate to the categories list' ) }
+					>
+						{ __( 'Back' ) }
+					</NavigatorBackButton>
+					<BlockPatternsCategoryPanel
+						category={ category }
+						rootClientId={ rootClientId }
+						onInsert={ onInsert }
+					/>
+				</NavigatorScreen>
+			) ) }
+		</NavigatorProvider>
+	);
+}
+
 export default BlockPatternsTabs;

package/src/components/inserter/block-types-tab.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { map, flow, groupBy, orderBy } from 'lodash';
+import { map, groupBy, orderBy } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
 import { useMemo, useEffect } from '@wordpress/element';
-import { useAsyncList } from '@wordpress/compose';
+import { pipe, useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -53,7 +53,7 @@ export function BlockTypesTab( {
 	}, [ items ] );
 
 	const itemsPerCategory = useMemo( () => {
-		return flow(
+		return pipe(
 			( itemList ) =>
 				itemList.filter(
 					( item ) => item.category && item.category !== 'reusable'

package/src/components/inserter/menu.js

@@ -24,7 +24,9 @@ import { useSelect } from '@wordpress/data';
 import Tips from './tips';
 import InserterPreviewPanel from './preview-panel';
 import BlockTypesTab from './block-types-tab';
-import BlockPatternsTabs from './block-patterns-tab';
+import BlockPatternsTabs, {
+	BlockPatternsCategoryDialog,
+} from './block-patterns-tab';
 import ReusableBlocksTab from './reusable-blocks-tab';
 import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
@@ -52,6 +54,7 @@ function InserterMenu(
 	const [ hoveredItem, setHoveredItem ] = useState( null );
 	const [ selectedPatternCategory, setSelectedPatternCategory ] =
 		useState( null );
+	const [ selectedTab, setSelectedTab ] = useState( null );
 
 	const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] =
 		useInsertionPoint( {
@@ -144,7 +147,7 @@ function InserterMenu(
 			<BlockPatternsTabs
 				rootClientId={ destinationRootClientId }
 				onInsert={ onInsertPattern }
-				onClickCategory={ onClickPatternCategory }
+				onSelectCategory={ onClickPatternCategory }
 				selectedCategory={ selectedPatternCategory }
 			/>
 		),
@@ -186,6 +189,8 @@ function InserterMenu(
 		},
 	} ) );
 
+	const showPatternPanel =
+		selectedTab === 'patterns' && ! filterValue && selectedPatternCategory;
 	const showAsTabs = ! filterValue && ( showPatterns || hasReusableBlocks );
 
 	return (
@@ -228,6 +233,7 @@ function InserterMenu(
 						showPatterns={ showPatterns }
 						showReusableBlocks={ hasReusableBlocks }
 						prioritizePatterns={ prioritizePatterns }
+						onSelect={ setSelectedTab }
 					>
 						{ getCurrentTab }
 					</InserterTabs>
@@ -241,6 +247,13 @@ function InserterMenu(
 			{ showInserterHelpPanel && hoveredItem && (
 				<InserterPreviewPanel item={ hoveredItem } />
 			) }
+			{ showPatternPanel && (
+				<BlockPatternsCategoryDialog
+					rootClientId={ destinationRootClientId }
+					onInsert={ onInsertPattern }
+					category={ selectedPatternCategory }
+				/>
+			) }
 		</div>
 	);
 }