@wordpress/editor 14.11.0 → 14.12.0

package/src/components/create-template-part-modal/index.js

@@ -158,6 +158,7 @@ export function CreateTemplatePartModalContents( {
 						{ templatePartAreas.map(
 							( { icon, label, area: value, description } ) => (
 								<Radio
+									__next40pxDefaultSize
 									key={ label }
 									value={ value }
 									className="editor-create-template-part-modal__area-radio"

package/src/components/document-bar/index.js

@@ -15,7 +15,7 @@ import {
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
-import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
+import { chevronLeftSmall, chevronRightSmall, layout } from '@wordpress/icons';
 import { displayShortcut } from '@wordpress/keycodes';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as commandsStore } from '@wordpress/commands';
@@ -59,12 +59,14 @@ export default function DocumentBar( props ) {
 		isNotFound,
 		templateTitle,
 		onNavigateToPreviousEntityRecord,
+		isTemplatePreview,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostType,
 			getCurrentPostId,
 			getEditorSettings,
 			__experimentalGetTemplateInfo: getTemplateInfo,
+			getRenderingMode,
 		} = select( editorStore );
 		const {
 			getEditedEntityRecord,
@@ -96,6 +98,7 @@ export default function DocumentBar( props ) {
 			templateTitle: _templateInfo.title,
 			onNavigateToPreviousEntityRecord:
 				getEditorSettings().onNavigateToPreviousEntityRecord,
+			isTemplatePreview: getRenderingMode() === 'template-locked',
 		};
 	}, [] );
 
@@ -146,6 +149,12 @@ export default function DocumentBar( props ) {
 					</MotionButton>
 				) }
 			</AnimatePresence>
+			{ ! isTemplate && isTemplatePreview && (
+				<BlockIcon
+					icon={ layout }
+					className="editor-document-bar__icon-layout"
+				/>
+			) }
 			{ isNotFound ? (
 				<Text>{ __( 'Document not found' ) }</Text>
 			) : (

package/src/components/document-bar/style.scss

@@ -102,3 +102,16 @@
 		background-color: transparent;
 	}
 }
+
+.editor-document-bar__icon-layout.editor-document-bar__icon-layout {
+	position: absolute;
+	margin-left: $grid-unit-15;
+	display: none;
+	pointer-events: none;
+	svg {
+		fill: $gray-600;
+	}
+	@include break-small {
+		display: flex;
+	}
+}

package/src/components/document-tools/index.js

@@ -35,6 +35,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 		inserterSidebarToggleRef,
 		listViewToggleRef,
 		showIconLabels,
+		showTools,
 	} = useSelect( ( select ) => {
 		const { get } = select( preferencesStore );
 		const {
@@ -42,6 +43,8 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			getEditorMode,
 			getInserterSidebarToggleRef,
 			getListViewToggleRef,
+			getRenderingMode,
+			getCurrentPostType,
 		} = unlock( select( editorStore ) );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
@@ -56,6 +59,9 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 			showIconLabels: get( 'core', 'showIconLabels' ),
 			isDistractionFree: get( 'core', 'distractionFree' ),
 			isVisualMode: getEditorMode() === 'visual',
+			showTools:
+				getRenderingMode() !== 'post-only' ||
+				getCurrentPostType() === 'wp_template',
 		};
 	}, [] );
 
@@ -128,7 +134,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
 				) }
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
-						{ isLargeViewport && (
+						{ showTools && isLargeViewport && (
 							<ToolbarItem
 								as={ ToolSelector }
 								showTooltip={ ! showIconLabels }

package/src/components/editor-interface/index.js

@@ -131,7 +131,6 @@ export default function EditorInterface( {
 						customSaveButton={ customSaveButton }
 						forceDisableBlockTools={ forceDisableBlockTools }
 						title={ title }
-						isEditorIframed={ ! disableIframe }
 					/>
 				)
 			}

package/src/components/global-styles-provider/index.js

@@ -57,11 +57,13 @@ function useGlobalStylesUserConfig() {
 
 			let record;
 
-			// We want the global styles ID request to finish before triggering
-			// the OPTIONS request for user capabilities, otherwise it will
-			// fetch `/wp/v2/global-styles` instead of
-			// `/wp/v2/global-styles/{id}`!
-			// Please adjust the preloaded requests if this changes!
+			/*
+			 * Ensure that the global styles ID request is complete by testing `_globalStylesId`,
+			 * before firing off the `canUser` OPTIONS request for user capabilities, otherwise it will
+			 * fetch `/wp/v2/global-styles` instead of `/wp/v2/global-styles/{id}`.
+			 * NOTE: Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,
+			 * or set using the `block_editor_rest_api_preload_paths` filter, if this changes.
+			 */
 			const userCanEditGlobalStyles = _globalStylesId
 				? canUser( 'update', {
 						kind: 'root',
@@ -72,11 +74,21 @@ function useGlobalStylesUserConfig() {
 
 			if (
 				_globalStylesId &&
-				// We want the OPTIONS request for user capabilities to finish
-				// before getting the records, otherwise we'll fetch both!
+				/*
+				 * Test that the OPTIONS request for user capabilities is complete
+				 * before fetching the global styles entity record.
+				 * This is to avoid fetching the global styles entity unnecessarily.
+				 */
 				typeof userCanEditGlobalStyles === 'boolean'
 			) {
-				// Please adjust the preloaded requests if this changes!
+				/*
+				 * Fetch the global styles entity record based on the user's capabilities.
+				 * The default context is `edit` for users who can edit global styles.
+				 * Otherwise, the context is `view`.
+				 * NOTE: There is an equivalent conditional check using `current_user_can()` in the backend
+				 * to preload the global styles entity. Please keep in sync any preload paths sent to `block_editor_rest_api_preload()`,
+				 * or set using `block_editor_rest_api_preload_paths` filter, if this changes.
+				 */
 				if ( userCanEditGlobalStyles ) {
 					record = getEditedEntityRecord(
 						'root',

package/src/components/header/index.js

@@ -25,6 +25,11 @@ import PostViewLink from '../post-view-link';
 import PreviewDropdown from '../preview-dropdown';
 import ZoomOutToggle from '../zoom-out-toggle';
 import { store as editorStore } from '../../store';
+import {
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+} from '../../store/constants';
 
 const toolbarVariations = {
 	distractionFreeDisabled: { y: '-50px' },
@@ -48,7 +53,6 @@ function Header( {
 	forceDisableBlockTools,
 	setEntitiesSavedStatesCallback,
 	title,
-	isEditorIframed,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -60,12 +64,10 @@ function Header( {
 		showIconLabels,
 		hasFixedToolbar,
 		hasBlockSelection,
-		isNestedEntity,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
 			getEditorMode,
-			getEditorSettings,
 			getCurrentPostType,
 			isPublishSidebarOpened: _isPublishSidebarOpened,
 		} = select( editorStore );
@@ -78,8 +80,6 @@ function Header( {
 			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
 			hasBlockSelection:
 				!! select( blockEditorStore ).getBlockSelectionStart(),
-			isNestedEntity:
-				!! getEditorSettings().onNavigateToPreviousEntityRecord,
 		};
 	}, [] );
 
@@ -87,6 +87,12 @@ function Header( {
 		postType
 	);
 
+	const disablePreviewOption = [
+		NAVIGATION_POST_TYPE,
+		TEMPLATE_PART_POST_TYPE,
+		PATTERN_POST_TYPE,
+	].includes( postType );
+
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 
@@ -149,19 +155,21 @@ function Header( {
 					<PostSavedState forceIsDirty={ forceIsDirty } />
 				) }
 
-				{ canBeZoomedOut && isEditorIframed && isWideViewport && (
-					<ZoomOutToggle disabled={ forceDisableBlockTools } />
-				) }
+				<PostViewLink />
 
 				<PreviewDropdown
 					forceIsAutosaveable={ forceIsDirty }
-					disabled={ isNestedEntity }
+					disabled={ disablePreviewOption }
 				/>
+
 				<PostPreviewButton
 					className="editor-header__post-preview-button"
 					forceIsAutosaveable={ forceIsDirty }
 				/>
-				<PostViewLink />
+
+				{ canBeZoomedOut && isWideViewport && (
+					<ZoomOutToggle disabled={ forceDisableBlockTools } />
+				) }
 
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<PinnedItems.Slot scope="core" />

package/src/components/more-menu/index.js

@@ -35,6 +35,7 @@ export default function MoreMenu() {
 			select( preferencesStore ).get( 'core', 'showIconLabels' ),
 		[]
 	);
+
 	const turnOffDistractionFree = () => {
 		setPreference( 'core', 'distractionFree', false );
 	};
@@ -67,10 +68,10 @@ export default function MoreMenu() {
 									'Access all block and document tools in a single place'
 								) }
 								messageActivated={ __(
-									'Top toolbar activated'
+									'Top toolbar activated.'
 								) }
 								messageDeactivated={ __(
-									'Top toolbar deactivated'
+									'Top toolbar deactivated.'
 								) }
 							/>
 							<PreferenceToggleMenuItem
@@ -79,12 +80,16 @@ export default function MoreMenu() {
 								label={ __( 'Distraction free' ) }
 								info={ __( 'Write with calmness' ) }
 								handleToggling={ false }
-								onToggle={ toggleDistractionFree }
+								onToggle={ () =>
+									toggleDistractionFree( {
+										createNotice: false,
+									} )
+								}
 								messageActivated={ __(
-									'Distraction free mode activated'
+									'Distraction free mode activated.'
 								) }
 								messageDeactivated={ __(
-									'Distraction free mode deactivated'
+									'Distraction free mode deactivated.'
 								) }
 								shortcut={ displayShortcut.primaryShift(
 									'\\'
@@ -96,10 +101,10 @@ export default function MoreMenu() {
 								label={ __( 'Spotlight mode' ) }
 								info={ __( 'Focus on one block at a time' ) }
 								messageActivated={ __(
-									'Spotlight mode activated'
+									'Spotlight mode activated.'
 								) }
 								messageDeactivated={ __(
-									'Spotlight mode deactivated'
+									'Spotlight mode deactivated.'
 								) }
 							/>
 							<ViewMoreMenuGroup.Slot fillProps={ { onClose } } />

package/src/components/plugin-post-publish-panel/test/__snapshots__/index.js.snap

@@ -10,7 +10,7 @@ exports[`PluginPostPublishPanel renders fill properly 1`] = `
     >
       <button
         aria-expanded="true"
-        class="components-button components-panel__body-toggle"
+        class="components-button components-panel__body-toggle is-next-40px-default-size"
         type="button"
       >
         <span

package/src/components/post-taxonomies/flat-term-selector.js

@@ -57,6 +57,13 @@ const termNamesToIds = ( names, terms ) => {
 		.filter( ( id ) => id !== undefined );
 };
 
+const Wrapper = ( { children, __nextHasNoMarginBottom } ) =>
+	__nextHasNoMarginBottom ? (
+		<VStack spacing={ 4 }>{ children }</VStack>
+	) : (
+		<Fragment>{ children }</Fragment>
+	);
+
 /**
  * Renders a flat term selector component.
  *
@@ -292,15 +299,8 @@ export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
 		singularName
 	);
 
-	const Wrapper = ( { children } ) =>
-		__nextHasNoMarginBottom ? (
-			<VStack spacing={ 4 }>{ children }</VStack>
-		) : (
-			<Fragment>{ children }</Fragment>
-		);
-
 	return (
-		<Wrapper>
+		<Wrapper __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
 			<FormTokenField
 				__next40pxDefaultSize
 				value={ values }

package/src/components/post-template/swap-template-button.js

@@ -9,7 +9,6 @@ import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { parse } from '@wordpress/blocks';
-import { useAsyncList } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -71,12 +70,10 @@ function TemplatesList( { postType, onSelect } ) {
 			} ) ),
 		[ availableTemplates ]
 	);
-	const shownTemplates = useAsyncList( templatesAsPatterns );
 	return (
 		<BlockPatternsList
 			label={ __( 'Templates' ) }
 			blockPatterns={ templatesAsPatterns }
-			shownPatterns={ shownTemplates }
 			onClickPattern={ onSelect }
 		/>
 	);

package/src/components/post-transform-panel/index.js

@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useAsyncList } from '@wordpress/compose';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { serialize } from '@wordpress/blocks';
 
@@ -20,7 +19,6 @@ import {
 } from '../../store/constants';
 
 function TemplatesList( { availableTemplates, onSelect } ) {
-	const shownTemplates = useAsyncList( availableTemplates );
 	if ( ! availableTemplates || availableTemplates?.length === 0 ) {
 		return null;
 	}
@@ -29,7 +27,6 @@ function TemplatesList( { availableTemplates, onSelect } ) {
 		<BlockPatternsList
 			label={ __( 'Templates' ) }
 			blockPatterns={ availableTemplates }
-			shownPatterns={ shownTemplates }
 			onClickPattern={ onSelect }
 			showTitlesAsTooltip
 		/>

package/src/components/preferences-modal/index.js

@@ -36,25 +36,40 @@ const {
 } = unlock( preferencesPrivateApis );
 
 export default function EditorPreferencesModal( { extraSections = {} } ) {
+	const isActive = useSelect( ( select ) => {
+		return select( interfaceStore ).isModalActive( 'editor/preferences' );
+	}, [] );
+	const { closeModal } = useDispatch( interfaceStore );
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	// Please wrap all contents inside PreferencesModalContents to prevent all
+	// hooks from executing when the modal is not open.
+	return (
+		<PreferencesModal closeModal={ closeModal }>
+			<PreferencesModalContents extraSections={ extraSections } />
+		</PreferencesModal>
+	);
+}
+
+function PreferencesModalContents( { extraSections = {} } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { isActive, showBlockBreadcrumbsOption } = useSelect(
+	const showBlockBreadcrumbsOption = useSelect(
 		( select ) => {
 			const { getEditorSettings } = select( editorStore );
 			const { get } = select( preferencesStore );
-			const { isModalActive } = select( interfaceStore );
 			const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
 			const isDistractionFreeEnabled = get( 'core', 'distractionFree' );
-			return {
-				showBlockBreadcrumbsOption:
-					! isDistractionFreeEnabled &&
-					isLargeViewport &&
-					isRichEditingEnabled,
-				isActive: isModalActive( 'editor/preferences' ),
-			};
+			return (
+				! isDistractionFreeEnabled &&
+				isLargeViewport &&
+				isRichEditingEnabled
+			);
 		},
 		[ isLargeViewport ]
 	);
-	const { closeModal } = useDispatch( interfaceStore );
 	const { setIsListViewOpened, setIsInserterOpened } =
 		useDispatch( editorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
@@ -330,13 +345,5 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 		]
 	);
 
-	if ( ! isActive ) {
-		return null;
-	}
-
-	return (
-		<PreferencesModal closeModal={ closeModal }>
-			<PreferencesModalTabs sections={ sections } />
-		</PreferencesModal>
-	);
+	return <PreferencesModalTabs sections={ sections } />;
 }

package/src/components/preferences-modal/test/index.js

@@ -19,7 +19,7 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 
 describe( 'EditPostPreferencesModal', () => {
 	it( 'should not render when the modal is not active', () => {
-		useSelect.mockImplementation( () => [ false, false, false ] );
+		useSelect.mockImplementation( () => false );
 		render( <EditPostPreferencesModal /> );
 		expect(
 			screen.queryByRole( 'dialog', { name: 'Preferences' } )

package/src/components/preview-dropdown/index.js

@@ -16,7 +16,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { desktop, mobile, tablet, external } from '@wordpress/icons';
+import { desktop, mobile, tablet, external, check } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -31,21 +31,32 @@ import PostPreviewButton from '../post-preview-button';
 import { unlock } from '../../lock-unlock';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
-	const { deviceType, homeUrl, isTemplate, isViewable, showIconLabels } =
-		useSelect( ( select ) => {
-			const { getDeviceType, getCurrentPostType } = select( editorStore );
-			const { getEntityRecord, getPostType } = select( coreStore );
-			const { get } = select( preferencesStore );
-			const _currentPostType = getCurrentPostType();
-			return {
-				deviceType: getDeviceType(),
-				homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
-				isTemplate: _currentPostType === 'wp_template',
-				isViewable: getPostType( _currentPostType )?.viewable ?? false,
-				showIconLabels: get( 'core', 'showIconLabels' ),
-			};
-		}, [] );
-	const { setDeviceType } = useDispatch( editorStore );
+	const {
+		deviceType,
+		homeUrl,
+		isTemplate,
+		isViewable,
+		showIconLabels,
+		isTemplateHidden,
+		templateId,
+	} = useSelect( ( select ) => {
+		const { getDeviceType, getCurrentPostType, getCurrentTemplateId } =
+			select( editorStore );
+		const { getRenderingMode } = unlock( select( editorStore ) );
+		const { getEntityRecord, getPostType } = select( coreStore );
+		const { get } = select( preferencesStore );
+		const _currentPostType = getCurrentPostType();
+		return {
+			deviceType: getDeviceType(),
+			homeUrl: getEntityRecord( 'root', '__unstableBase' )?.home,
+			isTemplate: _currentPostType === 'wp_template',
+			isViewable: getPostType( _currentPostType )?.viewable ?? false,
+			showIconLabels: get( 'core', 'showIconLabels' ),
+			isTemplateHidden: getRenderingMode() === 'post-only',
+			templateId: getCurrentTemplateId(),
+		};
+	}, [] );
+	const { setDeviceType, setRenderingMode } = useDispatch( editorStore );
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	const handleDevicePreviewChange = ( newDeviceType ) => {
@@ -142,6 +153,24 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 							</MenuItem>
 						</MenuGroup>
 					) }
+					{ ! isTemplate && !! templateId && (
+						<MenuGroup>
+							<MenuItem
+								icon={ ! isTemplateHidden ? check : undefined }
+								isSelected={ ! isTemplateHidden }
+								role="menuitemcheckbox"
+								onClick={ () => {
+									setRenderingMode(
+										isTemplateHidden
+											? 'template-locked'
+											: 'post-only'
+									);
+								} }
+							>
+								{ __( 'Show template' ) }
+							</MenuItem>
+						</MenuGroup>
+					) }
 					{ isViewable && (
 						<MenuGroup>
 							<PostPreviewButton

package/src/components/provider/use-block-editor-settings.js

@@ -7,6 +7,7 @@ import {
 	store as coreStore,
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
+	privateApis as coreDataPrivateApis,
 } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -29,17 +30,12 @@ import { useGlobalStylesContext } from '../global-styles-provider';
 const EMPTY_OBJECT = {};
 
 function __experimentalReusableBlocksSelect( select ) {
-	const { getEntityRecords, hasFinishedResolution } = select( coreStore );
-	const reusableBlocks = getEntityRecords( 'postType', 'wp_block', {
+	const { RECEIVE_INTERMEDIATE_RESULTS } = unlock( coreDataPrivateApis );
+	const { getEntityRecords } = select( coreStore );
+	return getEntityRecords( 'postType', 'wp_block', {
 		per_page: -1,
+		[ RECEIVE_INTERMEDIATE_RESULTS ]: true,
 	} );
-	return hasFinishedResolution( 'getEntityRecords', [
-		'postType',
-		'wp_block',
-		{ per_page: -1 },
-	] )
-		? reusableBlocks
-		: undefined;
 }
 
 const BLOCK_EDITOR_SETTINGS = [
@@ -332,6 +328,10 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 					: settings.template,
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			[ sectionRootClientIdKey ]: sectionRootClientId,
+			editorTool:
+				renderingMode === 'post-only' && postType !== 'wp_template'
+					? 'edit'
+					: undefined,
 		};
 
 		return blockEditorSettings;
@@ -359,6 +359,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		sectionRootClientId,
 		globalStylesData,
 		globalStylesLinksData,
+		renderingMode,
 	] );
 }
 

package/src/components/sidebar/post-summary.js

@@ -87,11 +87,11 @@ export default function PostSummary( { onActionPerformed } ) {
 										<PostsPerPage />
 										<SiteDiscussion />
 										<PostFormatPanel />
+										{ fills }
 									</VStack>
 									<PostTrash
 										onActionPerformed={ onActionPerformed }
 									/>
-									{ fills }
 								</VStack>
 							) }
 						</VStack>

package/src/components/sidebar/style.scss

@@ -1,11 +1,9 @@
 .components-panel__header.editor-sidebar__panel-tabs {
 	padding-left: 0;
-	padding-right: $grid-unit-15;
+	padding-right: $grid-unit-10;
 
 	.components-button.has-icon {
 		padding: 0;
-		min-width: $icon-size;
-		height: $icon-size;
 
 		@include break-medium() {
 			display: flex;

package/src/components/start-page-options/index.js

@@ -9,7 +9,6 @@ import {
 	__experimentalBlockPatternsList as BlockPatternsList,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
 import { __unstableSerializeAndClean } from '@wordpress/blocks';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -66,7 +65,6 @@ export function useStartPatterns() {
 }
 
 function PatternSelection( { blockPatterns, onChoosePattern } ) {
-	const shownBlockPatterns = useAsyncList( blockPatterns );
 	const { editEntityRecord } = useDispatch( coreStore );
 	const { postType, postId } = useSelect( ( select ) => {
 		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
@@ -79,7 +77,6 @@ function PatternSelection( { blockPatterns, onChoosePattern } ) {
 	return (
 		<BlockPatternsList
 			blockPatterns={ blockPatterns }
-			shownPatterns={ shownBlockPatterns }
 			onClickPattern={ ( _pattern, blocks ) => {
 				editEntityRecord( 'postType', postType, postId, {
 					blocks,

package/src/components/start-template-options/index.js

@@ -6,7 +6,6 @@ import { __ } from '@wordpress/i18n';
 import { useState, useMemo, useEffect } from '@wordpress/element';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 
@@ -111,11 +110,9 @@ function useStartPatterns( fallbackContent ) {
 function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
 	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
 	const blockPatterns = useStartPatterns( fallbackContent );
-	const shownBlockPatterns = useAsyncList( blockPatterns );
 	return (
 		<BlockPatternsList
 			blockPatterns={ blockPatterns }
-			shownPatterns={ shownBlockPatterns }
 			onClickPattern={ ( pattern, blocks ) => {
 				onChange( blocks, { selection: undefined } );
 				onChoosePattern();