@wordpress/block-editor 12.22.0 → 12.24.0

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

@@ -5,11 +5,10 @@ import { useState } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
 import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalHStack as HStack,
 	FlexBlock,
 	Button,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 
@@ -20,40 +19,48 @@ import PatternsExplorerModal from '../block-patterns-explorer';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 function BlockPatternsTab( {
 	onSelectCategory,
 	selectedCategory,
 	onInsert,
 	rootClientId,
+	children,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 
 	const categories = usePatternCategories( rootClientId );
 
-	const initialCategory = selectedCategory || categories[ 0 ];
 	const isMobile = useViewportMatch( 'medium', '<' );
+
 	return (
 		<>
 			{ ! isMobile && (
 				<div className="block-editor-inserter__block-patterns-tabs-container">
-					<nav
-						aria-label={ __( 'Block pattern categories' ) }
-						className="block-editor-inserter__block-patterns-tabs"
+					<Tabs
+						selectOnMove={ false }
+						selectedTabId={
+							selectedCategory ? selectedCategory.name : null
+						}
+						orientation={ 'vertical' }
+						onSelect={ ( categoryId ) => {
+							// Pass the full category object
+							onSelectCategory(
+								categories.find(
+									( category ) => category.name === categoryId
+								)
+							);
+						} }
 					>
-						<ItemGroup role="list">
+						<Tabs.TabList className="block-editor-inserter__block-patterns-tablist">
 							{ categories.map( ( category ) => (
-								<Item
-									role="listitem"
+								<Tabs.Tab
 									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'
-									}
+									tabId={ category.name }
+									className="block-editor-inserter__patterns-tab"
 									aria-label={ category.label }
 									aria-current={
 										category === selectedCategory
@@ -73,39 +80,47 @@ function BlockPatternsTab( {
 											}
 										/>
 									</HStack>
-								</Item>
+								</Tabs.Tab>
 							) ) }
-							<div role="listitem">
-								<Button
-									className="block-editor-inserter__patterns-explore-button"
-									onClick={ () =>
-										setShowPatternsExplorer( true )
-									}
-									variant="secondary"
-								>
-									{ __( 'Explore all patterns' ) }
-								</Button>
-							</div>
-						</ItemGroup>
-					</nav>
+						</Tabs.TabList>
+						{ categories.map( ( category ) => (
+							<Tabs.TabPanel
+								key={ category.name }
+								tabId={ category.name }
+								focusable={ false }
+								className="block-editor-inserter__patterns-category-panel"
+							>
+								{ children }
+							</Tabs.TabPanel>
+						) ) }
+					</Tabs>
+					<Button
+						className="block-editor-inserter__patterns-explore-button"
+						onClick={ () => setShowPatternsExplorer( true ) }
+						variant="secondary"
+					>
+						{ __( 'Explore all patterns' ) }
+					</Button>
 				</div>
 			) }
 			{ isMobile && (
 				<MobileTabNavigation categories={ categories }>
 					{ ( category ) => (
-						<PatternCategoryPreviews
-							key={ category.name }
-							onInsert={ onInsert }
-							rootClientId={ rootClientId }
-							category={ category }
-							showTitlesAsTooltip={ false }
-						/>
+						<div className="block-editor-inserter__patterns-category-panel">
+							<PatternCategoryPreviews
+								key={ category.name }
+								onInsert={ onInsert }
+								rootClientId={ rootClientId }
+								category={ category }
+								showTitlesAsTooltip={ false }
+							/>
+						</div>
 					) }
 				</MobileTabNavigation>
 			) }
 			{ showPatternsExplorer && (
 				<PatternsExplorerModal
-					initialCategory={ initialCategory }
+					initialCategory={ selectedCategory || categories[ 0 ] }
 					patternCategories={ categories }
 					onModalClose={ () => setShowPatternsExplorer( false ) }
 					rootClientId={ rootClientId }

package/src/components/inserter/block-patterns-tab/pattern-category-preview-panel.js

@@ -1,10 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { useRef, useEffect } from '@wordpress/element';
-
-import { focus } from '@wordpress/dom';
-
 /**
  * Internal dependencies
  */
@@ -19,30 +12,15 @@ export function PatternCategoryPreviewPanel( {
 	showTitlesAsTooltip,
 	patternFilter,
 } ) {
-	const container = useRef();
-
-	useEffect( () => {
-		const timeout = setTimeout( () => {
-			const [ firstTabbable ] = focus.tabbable.find( container.current );
-			firstTabbable?.focus();
-		} );
-		return () => clearTimeout( timeout );
-	}, [ category ] );
-
 	return (
-		<div
-			ref={ container }
-			className="block-editor-inserter__patterns-category-dialog"
-		>
-			<PatternCategoryPreviews
-				key={ category.name }
-				rootClientId={ rootClientId }
-				onInsert={ onInsert }
-				onHover={ onHover }
-				category={ category }
-				showTitlesAsTooltip={ showTitlesAsTooltip }
-				patternFilter={ patternFilter }
-			/>
-		</div>
+		<PatternCategoryPreviews
+			key={ category.name }
+			rootClientId={ rootClientId }
+			onInsert={ onInsert }
+			onHover={ onHover }
+			category={ category }
+			showTitlesAsTooltip={ showTitlesAsTooltip }
+			patternFilter={ patternFilter }
+		/>
 	);
 }

package/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -128,7 +128,7 @@ export function PatternCategoryPreviews( {
 	);
 
 	return (
-		<div className="block-editor-inserter__patterns-category-panel">
+		<>
 			<VStack
 				spacing={ 2 }
 				className="block-editor-inserter__patterns-category-panel-header"
@@ -174,6 +174,6 @@ export function PatternCategoryPreviews( {
 					pagingProps={ pagingProps }
 				/>
 			) }
-		</div>
+		</>
 	);
 }

package/src/components/inserter/library.js

@@ -21,6 +21,7 @@ function InserterLibrary(
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
 		__experimentalFilterValue,
+		__experimentalOnPatternCategorySelection,
 		onSelect = noop,
 		shouldFocusBlock = false,
 	},
@@ -48,6 +49,9 @@ function InserterLibrary(
 			showMostUsedBlocks={ showMostUsedBlocks }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
+			__experimentalOnPatternCategorySelection={
+				__experimentalOnPatternCategorySelection
+			}
 			shouldFocusBlock={ shouldFocusBlock }
 			ref={ ref }
 		/>

package/src/components/inserter/menu.js

@@ -33,7 +33,9 @@ import InserterSearchResults from './search-results';
 import useInsertionPoint from './hooks/use-insertion-point';
 import InserterTabs from './tabs';
 import { store as blockEditorStore } from '../../store';
+import { useZoomOut } from '../../hooks/use-zoom-out';
 
+const NOOP = () => {};
 function InserterMenu(
 	{
 		rootClientId,
@@ -45,6 +47,7 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
+		__experimentalOnPatternCategorySelection = NOOP,
 	},
 	ref
 ) {
@@ -110,14 +113,24 @@ function InserterMenu(
 		[ onToggleInsertionPoint ]
 	);
 
+	const isZoomedOutViewExperimentEnabled =
+		window?.__experimentalEnableZoomedOutView;
 	const onClickPatternCategory = useCallback(
 		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
 			setPatternFilter( filter );
+			if ( isZoomedOutViewExperimentEnabled ) {
+				__experimentalOnPatternCategorySelection();
+			}
 		},
-		[ setSelectedPatternCategory ]
+		[ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ]
 	);
 
+	const showPatternPanel =
+		selectedTab === 'patterns' &&
+		! delayedFilterValue &&
+		selectedPatternCategory;
+
 	const blocksTab = useMemo(
 		() => (
 			<>
@@ -155,13 +168,25 @@ function InserterMenu(
 				onInsert={ onInsertPattern }
 				onSelectCategory={ onClickPatternCategory }
 				selectedCategory={ selectedPatternCategory }
-			/>
+			>
+				{ showPatternPanel && (
+					<PatternCategoryPreviewPanel
+						rootClientId={ destinationRootClientId }
+						onInsert={ onInsertPattern }
+						onHover={ onHoverPattern }
+						category={ selectedPatternCategory }
+						patternFilter={ patternFilter }
+						showTitlesAsTooltip
+					/>
+				) }
+			</BlockPatternsTab>
 		),
 		[
 			destinationRootClientId,
 			onInsertPattern,
 			onClickPatternCategory,
 			selectedPatternCategory,
+			showPatternPanel,
 		]
 	);
 
@@ -198,16 +223,15 @@ function InserterMenu(
 		},
 	} ) );
 
-	const showPatternPanel =
-		selectedTab === 'patterns' &&
-		! delayedFilterValue &&
-		selectedPatternCategory;
 	const showAsTabs = ! delayedFilterValue && ( showPatterns || showMedia );
 	const showMediaPanel =
 		selectedTab === 'media' &&
 		! delayedFilterValue &&
 		selectedMediaCategory;
 
+	// When the pattern panel is showing, we want to use zoom out mode
+	useZoomOut( showPatternPanel );
+
 	const handleSetSelectedTab = ( value ) => {
 		// If no longer on patterns tab remove the category setting.
 		if ( value !== 'patterns' ) {
@@ -217,7 +241,11 @@ function InserterMenu(
 	};
 
 	return (
-		<div className="block-editor-inserter__menu">
+		<div
+			className={ classnames( 'block-editor-inserter__menu', {
+				'show-panel': showPatternPanel,
+			} ) }
+		>
 			<div
 				className={ classnames( 'block-editor-inserter__main-area', {
 					'show-as-tabs': showAsTabs,
@@ -285,16 +313,6 @@ function InserterMenu(
 					<InserterPreviewPanel item={ hoveredItem } />
 				</Popover>
 			) }
-			{ showPatternPanel && (
-				<PatternCategoryPreviewPanel
-					rootClientId={ destinationRootClientId }
-					onInsert={ onInsertPattern }
-					onHover={ onHoverPattern }
-					category={ selectedPatternCategory }
-					patternFilter={ patternFilter }
-					showTitlesAsTooltip
-				/>
-			) }
 		</div>
 	);
 }

package/src/components/inserter/search-items.js

@@ -12,6 +12,17 @@ const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultGetCategory = ( item ) => item.category;
 const defaultGetCollection = () => null;
 
+// Normalization regexes
+const splitRegexp = [
+	/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
+	/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
+];
+const stripRegexp = /(\p{C}|\p{P}|\p{S})+/giu; // Anything that's not a punctuation, symbol or control/format character.
+
+// Normalization cache
+const extractedWords = new Map();
+const normalizedStrings = new Map();
+
 /**
  * Extracts words from an input string.
  *
@@ -19,16 +30,21 @@ const defaultGetCollection = () => null;
  *
  * @return {Array} Words, extracted from the input string.
  */
-function extractWords( input = '' ) {
-	return noCase( input, {
-		splitRegexp: [
-			/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
-			/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
-		],
-		stripRegexp: /(\p{C}|\p{P}|\p{S})+/giu, // Anything that's not a punctuation, symbol or control/format character.
+export function extractWords( input = '' ) {
+	if ( extractedWords.has( input ) ) {
+		return extractedWords.get( input );
+	}
+
+	const result = noCase( input, {
+		splitRegexp,
+		stripRegexp,
 	} )
 		.split( ' ' )
 		.filter( Boolean );
+
+	extractedWords.set( input, result );
+
+	return result;
 }
 
 /**
@@ -38,20 +54,26 @@ function extractWords( input = '' ) {
  *
  * @return {string} The normalized search input.
  */
-function normalizeSearchInput( input = '' ) {
+export function normalizeString( input = '' ) {
+	if ( normalizedStrings.has( input ) ) {
+		return normalizedStrings.get( input );
+	}
+
 	// Disregard diacritics.
 	//  Input: "média"
-	input = removeAccents( input );
+	let result = removeAccents( input );
 
 	// Accommodate leading slash, matching autocomplete expectations.
 	//  Input: "/media"
-	input = input.replace( /^\//, '' );
+	result = result.replace( /^\//, '' );
 
 	// Lowercase.
 	//  Input: "MEDIA"
-	input = input.toLowerCase();
+	result = result.toLowerCase();
+
+	normalizedStrings.set( input, result );
 
-	return input;
+	return result;
 }
 
 /**
@@ -62,7 +84,7 @@ function normalizeSearchInput( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	return extractWords( normalizeSearchInput( input ) );
+	return extractWords( normalizeString( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -148,8 +170,8 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 	const category = getCategory( item );
 	const collection = getCollection( item );
 
-	const normalizedSearchInput = normalizeSearchInput( searchTerm );
-	const normalizedTitle = normalizeSearchInput( title );
+	const normalizedSearchInput = normalizeString( searchTerm );
+	const normalizedTitle = normalizeString( title );
 
 	let rank = 0;
 

package/src/components/inserter/style.scss

@@ -22,7 +22,6 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	height: 100%;
 	gap: $grid-unit-20;
-	overflow-y: hidden;
 
 	&.show-as-tabs {
 		gap: 0;
@@ -63,7 +62,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__popover .block-editor-inserter__menu {
 	margin: -$grid-unit-15;
 
-	.block-editor-inserter__tabs div[role="tablist"] {
+	.block-editor-inserter__tablist {
 		top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60 - $grid-unit-15;
 	}
 
@@ -116,7 +115,7 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	overflow: hidden;
 
-	div[role="tablist"] {
+	.block-editor-inserter__tablist {
 		border-bottom: $border-width solid $gray-300;
 
 		button[role="tab"] {
@@ -131,7 +130,7 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 
-	div[role="tabpanel"] {
+	.block-editor-inserter__tabpanel {
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
@@ -142,6 +141,8 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__no-tab-container {
 	overflow-y: auto;
 	flex-grow: 1;
+	// Fixes the editor canvas scrolling on search results https://github.com/WordPress/gutenberg/issues/56811
+	position: relative;
 }
 
 .block-editor-inserter__panel-header {
@@ -241,60 +242,79 @@ $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%;
-	}
+	padding: $grid-unit-20;
 }
 
-.block-editor-inserter__block-patterns-tabs {
+.block-editor-inserter__block-patterns-tablist {
 	display: flex;
 	flex-direction: column;
-	padding: $grid-unit-20;
-	overflow-y: auto;
-	height: 100%;
+	border: none;
+	margin-bottom: $grid-unit-10;
 	// Push the listitem wrapping the "explore" button to the bottom of the panel.
 	div[role="listitem"]:last-child {
 		margin-top: auto;
 	}
 
-	.block-editor-inserter__patterns-category {
+	.block-editor-inserter__patterns-tab {
 		// Account for the icon on the right so that it's visually balanced.
-		padding-right: $grid-unit-05;
+		padding: $grid-unit-10 $grid-unit-05 $grid-unit-10 $grid-unit-15;
+		text-align: left;
+		font-weight: inherit;
+		display: block;
+		position: relative;
+		height: auto;
+
+		&[aria-selected="true"] {
+			color: var(--wp-admin-theme-color);
+
+			.components-flex-item {
+				filter: brightness(0.95);
+			}
+
+			svg {
+				fill: var(--wp-admin-theme-color);
+			}
+
+			&::after {
+				content: "";
+				display: block;
+				outline: none;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				border-radius: $radius-block-ui;
+				opacity: 0.04;
+				background: var(--wp-admin-theme-color);
+				height: 100%;
+			}
+		}
+
+		&:focus-visible,
+		&:focus:not(:disabled) {
+			border-radius: 2px;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			// Windows high contrast mode.
+			outline: 2px solid transparent;
+			outline-offset: 0;
+		}
+
+		&::before {
+			display: none;
+		}
+
+		&::after {
+			display: none;
+		}
 	}
 }
 
-.block-editor-inserter__patterns-category-dialog {
+.block-editor-inserter__patterns-category-panel {
 	background: $gray-100;
 	border-left: $border-width solid $gray-200;
 	border-right: $border-width solid $gray-200;
@@ -303,46 +323,29 @@ $block-inserter-tabs-height: 44px;
 	left: 0;
 	height: 100%;
 	width: 100%;
-
-	@include break-medium {
-		left: 100%;
-		display: block;
-		width: 300px;
-	}
-
-	.block-editor-block-patterns-list {
-		overflow-y: auto;
-		flex-grow: 1;
-		height: 100%;
-		padding: $grid-unit-20 $grid-unit-30;
-	}
-}
-
-.block-editor-block-patterns-list__list-item {
-	.block-editor-block-preview__container {
-		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
-	}
-	&:hover {
-		.block-editor-block-preview__container {
-			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
-		}
-	}
-}
-
-.block-editor-inserter__patterns-category-panel {
 	padding: 0 $grid-unit-20;
 	display: flex;
 	flex-direction: column;
-	height: 100%;
+
 	@include break-medium {
 		padding: 0;
+		left: 100%;
+		width: 300px;
 	}
+
 	.block-editor-inserter__patterns-category-panel-header {
 		padding: 16px $grid-unit-30;
 	}
 	.block-editor-inserter__patterns-category-no-results {
 		margin-top: $grid-unit-30;
 	}
+
+	.block-editor-block-patterns-list {
+		overflow-y: auto;
+		flex-grow: 1;
+		height: 100%;
+		padding: $grid-unit-20 $grid-unit-30;
+	}
 }
 
 .block-editor-inserter__preview-content {
@@ -768,12 +771,27 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+// Only relevant in zoom-out-mode
+.block-editor-inserter__pattern-panel-placeholder {
+	display: none;
+}
+
 .is-zoom-out {
 	.block-editor-inserter__menu {
 		display: flex;
 	}
 
-	.block-editor-inserter__patterns-category-dialog {
+	.show-panel::after {
+		// Makes space for the inserter flyout panel
+		@include break-medium {
+			content: "";
+			display: block;
+			width: 300px;
+			height: 100%;
+		}
+	}
+
+	.block-editor-inserter__media-dialog {
 		position: static;
 	}
 }