@wordpress/block-editor 10.2.0 → 10.3.0

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/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>
 	);
 }

package/src/components/inserter/style.scss

@@ -22,14 +22,13 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	height: 100%;
 	gap: $grid-unit-20;
-	width: auto;
-	@include break-medium {
-		width: $block-inserter-width;
-	}
-
 	&.show-as-tabs {
 		gap: 0;
 	}
+
+	@include break-medium {
+		width: $block-inserter-width;
+	}
 }
 
 .block-editor-inserter__popover.is-quick {
@@ -148,10 +147,6 @@ $block-inserter-tabs-height: 44px;
 	padding: $grid-unit-20 $grid-unit-20 0;
 }
 
-.block-editor-inserter__panel-header-patterns {
-	padding: $grid-unit-20 $grid-unit-20 0;
-}
-
 .block-editor-inserter__panel-content {
 	padding: $grid-unit-20;
 }
@@ -235,6 +230,92 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__patterns-explore-button.components-button {
+	padding: $grid-unit-20;
+	justify-content: center;
+	margin-top: $grid-unit-20;
+	width: 100%;
+}
+
+.block-editor-inserter__patterns-selected-category.block-editor-inserter__patterns-selected-category {
+	color: var(--wp-admin-theme-color);
+	position: relative;
+
+	.components-flex-item {
+		filter: brightness(0.95);
+	}
+
+	svg {
+		fill: var(--wp-admin-theme-color);
+	}
+
+	&::after {
+		content: "";
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		border-radius: $radius-block-ui;
+		opacity: 0.04;
+		background: var(--wp-admin-theme-color);
+	}
+}
+
+.block-editor-inserter__block-patterns-tabs-container {
+	height: 100%;
+	nav {
+		height: 100%;
+	}
+}
+
+.block-editor-inserter__block-patterns-tabs {
+	display: flex;
+	flex-direction: column;
+	padding: $grid-unit-20;
+	overflow-y: auto;
+	height: 100%;
+}
+
+.block-editor-inserter__patterns-fill-space {
+	flex-grow: 1;
+}
+
+.block-editor-inserter__patterns-category-panel {
+	background: $gray-100;
+	border-left: $border-width solid $gray-200;
+	border-right: $border-width solid $gray-200;
+	position: absolute;
+	padding: $grid-unit-40 $grid-unit-30;
+	top: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	overflow-y: auto;
+	scrollbar-gutter: stable both-edges;
+
+	@include break-medium {
+		left: 100%;
+		display: block;
+		width: 300px;
+	}
+
+	.block-editor-block-patterns-list {
+		margin-top: $grid-unit-30;
+	}
+
+	.block-editor-block-preview__container {
+		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
+		&:hover {
+			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
+		}
+	}
+
+	.block-editor-block-patterns-list__item-title {
+		display: none;
+	}
+}
+
 .block-editor-inserter__preview-content {
 	min-height: $grid-unit-60 * 3;
 	background: $gray-100;
@@ -388,3 +469,7 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 }
+
+.block-editor-inserter__patterns-category-panel-title {
+	font-size: calc(1.25 * 13px);
+}

package/src/components/inserter/test/reusable-blocks-tab.js

@@ -41,14 +41,14 @@ function InserterBlockList( props ) {
 }
 
 const initializeAllClosedMenuState = ( propOverrides ) => {
-	const result = render( <InserterBlockList { ...propOverrides } /> );
-	const activeTabs = result.container.querySelectorAll(
+	const { container } = render( <InserterBlockList { ...propOverrides } /> );
+	const activeTabs = container.querySelectorAll(
 		'.components-panel__body.is-opened button.components-panel__body-toggle'
 	);
 	activeTabs.forEach( ( tab ) => {
 		fireEvent.click( tab );
 	} );
-	return result;
+	return container;
 };
 
 describe( 'InserterMenu', () => {
@@ -92,13 +92,13 @@ describe( 'InserterMenu', () => {
 	} );
 
 	it( 'should list reusable blocks', () => {
-		const { container } = initializeAllClosedMenuState();
+		const container = initializeAllClosedMenuState();
 		const blocks = container.querySelectorAll(
 			'.block-editor-block-types-list__item-title'
 		);
 
 		expect( blocks ).toHaveLength( 1 );
-		expect( blocks[ 0 ].textContent ).toBe( 'My reusable block' );
+		expect( blocks[ 0 ] ).toHaveTextContent( 'My reusable block' );
 	} );
 
 	it( 'should trim whitespace of search terms', () => {
@@ -111,6 +111,6 @@ describe( 'InserterMenu', () => {
 		);
 
 		expect( blocks ).toHaveLength( 1 );
-		expect( blocks[ 0 ].textContent ).toBe( 'My reusable block' );
+		expect( blocks[ 0 ] ).toHaveTextContent( 'My reusable block' );
 	} );
 } );

package/src/components/inserter-draggable-blocks/index.js

@@ -7,7 +7,13 @@ import { Draggable } from '@wordpress/components';
  */
 import BlockDraggableChip from '../block-draggable/draggable-chip';
 
-const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => {
+const InserterDraggableBlocks = ( {
+	isEnabled,
+	blocks,
+	icon,
+	children,
+	isPattern,
+} ) => {
 	const transferData = {
 		type: 'inserter',
 		blocks,
@@ -18,7 +24,11 @@ const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			__experimentalDragComponent={
-				<BlockDraggableChip count={ blocks.length } icon={ icon } />
+				<BlockDraggableChip
+					count={ blocks.length }
+					icon={ icon }
+					isPattern={ isPattern }
+				/>
 			}
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {

package/src/components/inserter-list-item/style.scss

@@ -30,7 +30,26 @@
 
 	&:not(:disabled) {
 		&:hover {
-			color: var(--wp-admin-theme-color) !important;
+			.block-editor-block-types-list__item-title {
+				color: var(--wp-admin-theme-color) !important;
+				filter: brightness(0.95);
+			}
+
+			svg {
+				color: var(--wp-admin-theme-color) !important;
+			}
+
+			&::after {
+				content: "";
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				border-radius: $radius-block-ui;
+				opacity: 0.04;
+				background: var(--wp-admin-theme-color);
+			}
 		}
 
 		&:focus {

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

@@ -392,7 +392,7 @@ describe( 'Searching for a link', () => {
 			fauxEntitySuggestions.length
 		);
 
-		expect( searchInput.getAttribute( 'aria-expanded' ) ).toBe( 'true' );
+		expect( searchInput ).toHaveAttribute( 'aria-expanded', 'true' );
 
 		// Sanity check that a search suggestion shows up corresponding to the data.
 		expect( searchResultElements[ 0 ] ).toHaveTextContent(