@wordpress/block-editor 12.16.0 → 12.17.0

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
@@ -32,6 +32,7 @@ function useShallowMemo( value ) {
  * came from props.
  *
  * @param {string}               clientId                   The client ID of the block to update.
+ * @param {string}               parentLock
  * @param {string[]}             allowedBlocks              An array of block names which are permitted
  *                                                          in inner blocks.
  * @param {string[]}             prioritizedInserterBlocks  Block names and/or block variations to be prioritized in the inserter, in the format {blockName}/{variationName}.
@@ -53,6 +54,7 @@ function useShallowMemo( value ) {
  */
 export default function useNestedSettingsUpdate(
 	clientId,
+	parentLock,
 	allowedBlocks,
 	prioritizedInserterBlocks,
 	defaultBlock,
@@ -64,21 +66,12 @@ export default function useNestedSettingsUpdate(
 	orientation,
 	layout
 ) {
+	// Instead of adding a useSelect mapping here, please add to the useSelect
+	// mapping in InnerBlocks! Every subscription impacts performance.
+
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 	const registry = useRegistry();
 
-	const { parentLock } = useSelect(
-		( select ) => {
-			const rootClientId =
-				select( blockEditorStore ).getBlockRootClientId( clientId );
-			return {
-				parentLock:
-					select( blockEditorStore ).getTemplateLock( rootClientId ),
-			};
-		},
-		[ clientId ]
-	);
-
 	// Implementors often pass a new array on every render,
 	// and the contents of the arrays are just strings, so the entire array
 	// can be passed as dependencies but We need to include the length of the array,

package/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -18,7 +18,7 @@ import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
 import {
-	PATTERN_TYPES,
+	INSERTER_PATTERN_TYPES,
 	allPatternsCategory,
 	myPatternsCategory,
 } from '../block-patterns-tab/utils';
@@ -73,7 +73,7 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 			}
 			if (
 				selectedCategory === myPatternsCategory.name &&
-				pattern.type === PATTERN_TYPES.user
+				pattern.type === INSERTER_PATTERN_TYPES.user
 			) {
 				return true;
 			}

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

@@ -30,7 +30,7 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
-	PATTERN_TYPES,
+	INSERTER_PATTERN_TYPES,
 } from './utils';
 
 const noop = () => {};
@@ -70,27 +70,27 @@ export function PatternCategoryPreviews( {
 				if ( category.name === allPatternsCategory.name ) {
 					return true;
 				}
+
 				if (
 					category.name === myPatternsCategory.name &&
-					pattern.type === PATTERN_TYPES.user
+					pattern.type === INSERTER_PATTERN_TYPES.user
 				) {
 					return true;
 				}
-				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
-						)
-					) ?? [];
+				if ( category.name === 'uncategorized' ) {
+					// The uncategorized category should show all the patterns without any category...
+					if ( ! pattern.categories ) {
+						return true;
+					}
+
+					// ...or with no available category.
+					return ! pattern.categories.some( ( catName ) =>
+						availableCategories.some( ( c ) => c.name === catName )
+					);
+				}
 
-				return availablePatternCategories.length === 0;
+				return pattern.categories?.includes( category.name );
 			} ),
 		[
 			allPatterns,

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

@@ -16,11 +16,13 @@ import { useMemo, createInterpolateElement } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { myPatternsCategory, SYNC_TYPES, PATTERN_TYPES } from './utils';
-
-const getShouldDisableSyncFilter = ( sourceFilter ) =>
-	sourceFilter !== PATTERN_TYPES.all && sourceFilter !== PATTERN_TYPES.user;
+import {
+	myPatternsCategory,
+	INSERTER_SYNC_TYPES,
+	INSERTER_PATTERN_TYPES,
+} from './utils';
 
+const getShouldDisableSyncFilter = ( sourceFilter ) => sourceFilter !== 'all';
 const getShouldDisableNonUserSources = ( category ) => {
 	return category.name === myPatternsCategory.name;
 };
@@ -39,7 +41,7 @@ export function PatternsFilter( {
 	// this filter themselves.
 	const currentPatternSourceFilter =
 		category.name === myPatternsCategory.name
-			? PATTERN_TYPES.user
+			? INSERTER_PATTERN_TYPES.user
 			: patternSourceFilter;
 
 	// We need to disable the sync filter option if the source filter is not 'all' or 'user'
@@ -56,11 +58,11 @@ export function PatternsFilter( {
 	const patternSyncMenuOptions = useMemo(
 		() => [
 			{
-				value: SYNC_TYPES.all,
+				value: 'all',
 				label: _x( 'All', 'Option that shows all patterns' ),
 			},
 			{
-				value: SYNC_TYPES.full,
+				value: INSERTER_SYNC_TYPES.full,
 				label: _x(
 					'Synced',
 					'Option that shows all synchronized patterns'
@@ -68,7 +70,7 @@ export function PatternsFilter( {
 				disabled: shouldDisableSyncFilter,
 			},
 			{
-				value: SYNC_TYPES.unsynced,
+				value: INSERTER_SYNC_TYPES.unsynced,
 				label: _x(
 					'Not synced',
 					'Option that shows all patterns that are not synchronized'
@@ -82,22 +84,22 @@ export function PatternsFilter( {
 	const patternSourceMenuOptions = useMemo(
 		() => [
 			{
-				value: PATTERN_TYPES.all,
+				value: 'all',
 				label: __( 'All' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
-				value: PATTERN_TYPES.directory,
+				value: INSERTER_PATTERN_TYPES.directory,
 				label: __( 'Pattern Directory' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
-				value: PATTERN_TYPES.theme,
+				value: INSERTER_PATTERN_TYPES.theme,
 				label: __( 'Theme & Plugins' ),
 				disabled: shouldDisableNonUserSources,
 			},
 			{
-				value: PATTERN_TYPES.user,
+				value: INSERTER_PATTERN_TYPES.user,
 				label: __( 'User' ),
 			},
 		],
@@ -107,7 +109,7 @@ export function PatternsFilter( {
 	function handleSetSourceFilterChange( newSourceFilter ) {
 		setPatternSourceFilter( newSourceFilter );
 		if ( getShouldDisableSyncFilter( newSourceFilter ) ) {
-			setPatternSyncFilter( SYNC_TYPES.all );
+			setPatternSyncFilter( 'all' );
 		}
 	}
 

package/src/components/inserter/block-patterns-tab/use-pattern-categories.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useCallback } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { _x, _n, sprintf } from '@wordpress/i18n';
 
 import { speak } from '@wordpress/a11y';
@@ -14,9 +14,19 @@ import {
 	isPatternFiltered,
 	allPatternsCategory,
 	myPatternsCategory,
-	PATTERN_TYPES,
+	INSERTER_PATTERN_TYPES,
 } from './utils';
 
+function hasRegisteredCategory( pattern, allCategories ) {
+	if ( ! pattern.categories || ! pattern.categories.length ) {
+		return false;
+	}
+
+	return pattern.categories.some( ( cat ) =>
+		allCategories.some( ( category ) => category.name === cat )
+	);
+}
+
 export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 	const [ patterns, allCategories ] = usePatternsState(
 		undefined,
@@ -34,19 +44,6 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 		[ sourceFilter, patterns ]
 	);
 
-	const hasRegisteredCategory = useCallback(
-		( pattern ) => {
-			if ( ! pattern.categories || ! pattern.categories.length ) {
-				return false;
-			}
-
-			return pattern.categories.some( ( cat ) =>
-				allCategories.some( ( category ) => category.name === cat )
-			);
-		},
-		[ allCategories ]
-	);
-
 	// Remove any empty categories.
 	const populatedCategories = useMemo( () => {
 		const categories = allCategories
@@ -59,7 +56,7 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 
 		if (
 			filteredPatterns.some(
-				( pattern ) => ! hasRegisteredCategory( pattern )
+				( pattern ) => ! hasRegisteredCategory( pattern, allCategories )
 			) &&
 			! categories.find(
 				( category ) => category.name === 'uncategorized'
@@ -72,7 +69,7 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 		}
 		if (
 			filteredPatterns.some(
-				( pattern ) => pattern.type === PATTERN_TYPES.user
+				( pattern ) => pattern.type === INSERTER_PATTERN_TYPES.user
 			)
 		) {
 			categories.unshift( myPatternsCategory );
@@ -95,7 +92,7 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) {
 			)
 		);
 		return categories;
-	}, [ allCategories, filteredPatterns, hasRegisteredCategory ] );
+	}, [ allCategories, filteredPatterns ] );
 
 	return populatedCategories;
 }

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

@@ -4,17 +4,13 @@
 
 import { __ } from '@wordpress/i18n';
 
-export const PATTERN_TYPES = {
-	all: 'all',
-	synced: 'synced',
-	unsynced: 'unsynced',
+export const INSERTER_PATTERN_TYPES = {
 	user: 'user',
 	theme: 'theme',
 	directory: 'directory',
 };
 
-export const SYNC_TYPES = {
-	all: 'all',
+export const INSERTER_SYNC_TYPES = {
 	full: 'fully',
 	unsynced: 'unsynced',
 };
@@ -38,7 +34,7 @@ export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 	// If theme source selected, filter out user created patterns and those from
 	// the core patterns directory.
 	if (
-		sourceFilter === PATTERN_TYPES.theme &&
+		sourceFilter === INSERTER_PATTERN_TYPES.theme &&
 		( isUserPattern || isDirectoryPattern )
 	) {
 		return true;
@@ -47,7 +43,7 @@ export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 	// If the directory source is selected, filter out user created patterns
 	// and those bundled with the theme.
 	if (
-		sourceFilter === PATTERN_TYPES.directory &&
+		sourceFilter === INSERTER_PATTERN_TYPES.directory &&
 		( isUserPattern || ! isDirectoryPattern )
 	) {
 		return true;
@@ -55,19 +51,22 @@ export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 
 	// If user source selected, filter out theme patterns.
 	if (
-		sourceFilter === PATTERN_TYPES.user &&
-		pattern.type !== PATTERN_TYPES.user
+		sourceFilter === INSERTER_PATTERN_TYPES.user &&
+		pattern.type !== INSERTER_PATTERN_TYPES.user
 	) {
 		return true;
 	}
 
 	// Filter by sync status.
-	if ( syncFilter === SYNC_TYPES.full && pattern.syncStatus !== '' ) {
+	if (
+		syncFilter === INSERTER_SYNC_TYPES.full &&
+		pattern.syncStatus !== ''
+	) {
 		return true;
 	}
 
 	if (
-		syncFilter === SYNC_TYPES.unsynced &&
+		syncFilter === INSERTER_SYNC_TYPES.unsynced &&
 		pattern.syncStatus !== 'unsynced' &&
 		isUserPattern
 	) {

package/src/components/inserter/hooks/use-block-types-state.js

@@ -23,20 +23,18 @@ import { store as blockEditorStore } from '../../../store';
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
 const useBlockTypesState = ( rootClientId, onInsert ) => {
-	const { categories, collections, items } = useSelect(
-		( select ) => {
-			const { getInserterItems } = select( blockEditorStore );
-			const { getCategories, getCollections } = select( blocksStore );
-
-			return {
-				categories: getCategories(),
-				collections: getCollections(),
-				items: getInserterItems( rootClientId ),
-			};
-		},
+	const [ items ] = useSelect(
+		( select ) => [
+			select( blockEditorStore ).getInserterItems( rootClientId ),
+		],
 		[ rootClientId ]
 	);
 
+	const [ categories, collections ] = useSelect( ( select ) => {
+		const { getCategories, getCollections } = select( blocksStore );
+		return [ getCategories(), getCollections() ];
+	}, [] );
+
 	const onSelectItem = useCallback(
 		(
 			{ name, initialAttributes, innerBlocks, syncStatus, content },

package/src/components/inserter/hooks/use-patterns-state.js

@@ -11,7 +11,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
-import { PATTERN_TYPES } from '../block-patterns-tab/utils';
+import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils';
 
 /**
  * Retrieves the block patterns inserter state.
@@ -58,7 +58,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
 			const patternBlocks =
-				pattern.type === PATTERN_TYPES.user &&
+				pattern.type === INSERTER_PATTERN_TYPES.user &&
 				pattern.syncStatus !== 'unsynced'
 					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 					: blocks;

package/src/components/inserter/index.js

@@ -186,7 +186,6 @@ class PrivateInserter extends Component {
 				clientId={ clientId }
 				isAppender={ isAppender }
 				showInserterHelpPanel={ showInserterHelpPanel }
-				prioritizePatterns={ prioritizePatterns }
 			/>
 		);
 	}

package/src/components/inserter/library.js

@@ -26,18 +26,13 @@ function InserterLibrary(
 	},
 	ref
 ) {
-	const { destinationRootClientId, prioritizePatterns } = useSelect(
+	const { destinationRootClientId } = useSelect(
 		( select ) => {
-			const { getBlockRootClientId, getSettings } =
-				select( blockEditorStore );
-
+			const { getBlockRootClientId } = select( blockEditorStore );
 			const _rootClientId =
 				rootClientId || getBlockRootClientId( clientId ) || undefined;
 			return {
 				destinationRootClientId: _rootClientId,
-				prioritizePatterns:
-					getSettings().__experimentalPreferPatternsOnRoot &&
-					! _rootClientId,
 			};
 		},
 		[ clientId, rootClientId ]
@@ -54,7 +49,6 @@ function InserterLibrary(
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
 			shouldFocusBlock={ shouldFocusBlock }
-			prioritizePatterns={ prioritizePatterns }
 			ref={ ref }
 		/>
 	);

package/src/components/inserter/menu.js

@@ -45,7 +45,6 @@ function InserterMenu(
 		showMostUsedBlocks,
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
-		prioritizePatterns,
 	},
 	ref
 ) {
@@ -67,26 +66,18 @@ function InserterMenu(
 			insertionIndex: __experimentalInsertionIndex,
 			shouldFocusBlock,
 		} );
-	const { showPatterns, inserterItems } = useSelect(
+	const { showPatterns } = useSelect(
 		( select ) => {
-			const { hasAllowedPatterns, getInserterItems } = unlock(
-				select( blockEditorStore )
-			);
+			const { hasAllowedPatterns } = unlock( select( blockEditorStore ) );
 			return {
 				showPatterns: hasAllowedPatterns( destinationRootClientId ),
-				inserterItems: getInserterItems( destinationRootClientId ),
 			};
 		},
 		[ destinationRootClientId ]
 	);
-	const hasReusableBlocks = useMemo( () => {
-		return inserterItems.some(
-			( { category } ) => category === 'reusable'
-		);
-	}, [ inserterItems ] );
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
-	const showMedia = !! mediaCategories.length;
+	const showMedia = mediaCategories.length > 0;
 
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {
@@ -191,17 +182,13 @@ function InserterMenu(
 		]
 	);
 
-	const getCurrentTab = useCallback(
-		( tab ) => {
-			if ( tab.name === 'blocks' ) {
-				return blocksTab;
-			} else if ( tab.name === 'patterns' ) {
-				return patternsTab;
-			} else if ( tab.name === 'media' ) {
-				return mediaTab;
-			}
-		},
-		[ blocksTab, patternsTab, mediaTab ]
+	const inserterTabsContents = useMemo(
+		() => ( {
+			blocks: blocksTab,
+			patterns: patternsTab,
+			media: mediaTab,
+		} ),
+		[ blocksTab, mediaTab, patternsTab ]
 	);
 
 	const searchRef = useRef();
@@ -215,9 +202,7 @@ function InserterMenu(
 		selectedTab === 'patterns' &&
 		! delayedFilterValue &&
 		selectedPatternCategory;
-	const showAsTabs =
-		! delayedFilterValue &&
-		( showPatterns || hasReusableBlocks || showMedia );
+	const showAsTabs = ! delayedFilterValue && ( showPatterns || showMedia );
 	const showMediaPanel =
 		selectedTab === 'media' &&
 		! delayedFilterValue &&
@@ -271,13 +256,10 @@ function InserterMenu(
 				{ showAsTabs && (
 					<InserterTabs
 						showPatterns={ showPatterns }
-						showReusableBlocks={ hasReusableBlocks }
 						showMedia={ showMedia }
-						prioritizePatterns={ prioritizePatterns }
 						onSelect={ handleSetSelectedTab }
-					>
-						{ getCurrentTab }
-					</InserterTabs>
+						tabsContents={ inserterTabsContents }
+					/>
 				) }
 				{ ! delayedFilterValue && ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">

package/src/components/inserter/style.scss

@@ -22,6 +22,8 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	height: 100%;
 	gap: $grid-unit-20;
+	overflow-y: hidden;
+
 	&.show-as-tabs {
 		gap: 0;
 	}
@@ -61,7 +63,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-inserter__popover .block-editor-inserter__menu {
 	margin: -$grid-unit-15;
 
-	.block-editor-inserter__tabs .components-tab-panel__tabs {
+	.block-editor-inserter__tabs div[role="tablist"] {
 		top: $grid-unit-10 + $grid-unit-20 + $grid-unit-60 - $grid-unit-15;
 	}
 
@@ -118,10 +120,10 @@ $block-inserter-tabs-height: 44px;
 	flex-direction: column;
 	overflow: hidden;
 
-	.components-tab-panel__tabs {
+	div[role="tablist"] {
 		border-bottom: $border-width solid $gray-300;
 
-		.components-tab-panel__tabs-item {
+		button[role="tab"] {
 			flex-grow: 1;
 			margin-bottom: -$border-width;
 			&[id$="reusable"] {
@@ -133,7 +135,7 @@ $block-inserter-tabs-height: 44px;
 		}
 	}
 
-	.components-tab-panel__tab-content {
+	div[role="tabpanel"] {
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;

package/src/components/inserter/tabs.js

@@ -1,10 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
-import { TabPanel } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
 const blocksTab = {
 	name: 'blocks',
 	/* translators: Blocks tab title in the block inserter. */
@@ -23,35 +29,38 @@ const mediaTab = {
 };
 
 function InserterTabs( {
-	children,
 	showPatterns = false,
 	showMedia = false,
 	onSelect,
-	prioritizePatterns,
+	tabsContents,
 } ) {
-	const tabs = useMemo( () => {
-		const tempTabs = [];
-		if ( prioritizePatterns && showPatterns ) {
-			tempTabs.push( patternsTab );
-		}
-		tempTabs.push( blocksTab );
-		if ( ! prioritizePatterns && showPatterns ) {
-			tempTabs.push( patternsTab );
-		}
-		if ( showMedia ) {
-			tempTabs.push( mediaTab );
-		}
-		return tempTabs;
-	}, [ prioritizePatterns, showPatterns, showMedia ] );
+	const tabs = [
+		blocksTab,
+		showPatterns && patternsTab,
+		showMedia && mediaTab,
+	].filter( Boolean );
 
 	return (
-		<TabPanel
-			className="block-editor-inserter__tabs"
-			tabs={ tabs }
-			onSelect={ onSelect }
-		>
-			{ children }
-		</TabPanel>
+		<div className="block-editor-inserter__tabs">
+			<Tabs onSelect={ onSelect }>
+				<Tabs.TabList>
+					{ tabs.map( ( tab ) => (
+						<Tabs.Tab key={ tab.name } tabId={ tab.name }>
+							{ tab.title }
+						</Tabs.Tab>
+					) ) }
+				</Tabs.TabList>
+				{ tabs.map( ( tab ) => (
+					<Tabs.TabPanel
+						key={ tab.name }
+						tabId={ tab.name }
+						focusable={ false }
+					>
+						{ tabsContents[ tab.name ] }
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
+		</div>
 	);
 }
 

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

@@ -12,7 +12,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import BlockDraggableChip from '../block-draggable/draggable-chip';
-import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
+import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
 const InserterDraggableBlocks = ( {
 	isEnabled,
@@ -42,7 +42,7 @@ const InserterDraggableBlocks = ( {
 			transferData={ transferData }
 			onDragStart={ ( event ) => {
 				const parsedBlocks =
-					pattern?.type === PATTERN_TYPES.user &&
+					pattern?.type === INSERTER_PATTERN_TYPES.user &&
 					pattern?.syncStatus !== 'unsynced'
 						? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 						: blocks;