Site Editor: Support starter patterns

packages/block-library/src/block/test/edit.native.js

@@ -45,6 +45,7 @@ const getMockedReusableBlock = ( id ) => ( {
 	title: { raw: `Reusable block - ${ id }` },
 	type: 'wp_block',
 	meta: { footnotes: '' },
+	wp_pattern_category: [],
 } );
 
 beforeAll( () => {

packages/edit-post/src/components/layout/index.js

@@ -56,7 +56,6 @@ import SettingsSidebar from '../sidebar/settings-sidebar';
 import MetaBoxes from '../meta-boxes';
 import WelcomeGuide from '../welcome-guide';
 import ActionsPanel from './actions-panel';
-import StartPageOptions from '../start-page-options';
 import { store as editPostStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import useCommonCommands from '../../hooks/commands/use-common-commands';
@@ -364,7 +363,6 @@ function Layout( { initialPost } ) {
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
 			<InitPatternModal />
-			<StartPageOptions />
 			<PluginArea onError={ onPluginAreaError } />
 			{ ! isDistractionFree && <SettingsSidebar /> }
 		</>

packages/edit-post/src/style.scss

@@ -11,7 +11,6 @@
 @import "./components/text-editor/style.scss";
 @import "./components/visual-editor/style.scss";
 @import "./components/welcome-guide/style.scss";
-@import "./components/start-page-options/style.scss";
 
 /**
  * Animations

packages/editor/src/components/provider/index.js

@@ -26,6 +26,7 @@ import NavigationBlockEditingMode from './navigation-block-editing-mode';
 import { useHideBlocksFromInserter } from './use-hide-blocks-from-inserter';
 import useCommands from '../commands';
 import BlockRemovalWarnings from '../block-removal-warnings';
+import StartPageOptions from '../start-page-options';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -267,6 +268,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 								<NavigationBlockEditingMode />
 							) }
 							<BlockRemovalWarnings />
+							<StartPageOptions />
 						</BlockEditorProviderComponent>
 					</BlockContextProvider>
 				</EntityProvider>

packages/edit-post/src/components/start-page-options/index.js → packages/editor/src/components/start-page-options/index.js

@@ -3,31 +3,39 @@
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
+import { useState, useMemo, useEffect } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	__experimentalBlockPatternsList as BlockPatternsList,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
-import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { store as editPostStore } from '../../store';
+import { store as editorStore } from '../../store';
 
 function useStartPatterns() {
 	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
 	// and it has no postTypes declared and the current post type is page or if
 	// the current post type is part of the postTypes declared.
 	const { blockPatternsWithPostContentBlockType, postType } = useSelect(
 		( select ) => {
-			const { getPatternsByBlockTypes } = select( blockEditorStore );
-			const { getCurrentPostType } = select( editorStore );
+			const { getPatternsByBlockTypes, getBlocksByName } =
+				select( blockEditorStore );
+			const { getCurrentPostType, getRenderingMode } =
+				select( editorStore );
+			const rootClientId =
+				getRenderingMode() === 'post-only'
+					? ''
+					: getBlocksByName( 'core/post-content' )?.[ 0 ];
 			return {
-				blockPatternsWithPostContentBlockType:
-					getPatternsByBlockTypes( 'core/post-content' ),
+				blockPatternsWithPostContentBlockType: getPatternsByBlockTypes(
+					'core/post-content',
+					rootClientId
+				),
 				postType: getCurrentPostType(),
 			};
 		},
@@ -49,13 +57,21 @@ function useStartPatterns() {
 
 function PatternSelection( { blockPatterns, onChoosePattern } ) {
 	const shownBlockPatterns = useAsyncList( blockPatterns );
-	const { resetEditorBlocks } = useDispatch( editorStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+	const { postType, postId } = useSelect( ( select ) => {
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
+
+		return {
+			postType: getCurrentPostType(),
+			postId: getCurrentPostId(),
+		};
+	}, [] );
 	return (
 		<BlockPatternsList
 			blockPatterns={ blockPatterns }
 			shownPatterns={ shownBlockPatterns }
 			onClickPattern={ ( _pattern, blocks ) => {
-				resetEditorBlocks( blocks );
+				editEntityRecord( 'postType', postType, postId, { blocks } );
 				onChoosePattern();
 			} }
 		/>
@@ -72,12 +88,11 @@ function StartPageOptionsModal( { onClose } ) {
 
 	return (
 		<Modal
-			className="edit-post-start-page-options__modal"
 			title={ __( 'Choose a pattern' ) }
 			isFullScreen
 			onRequestClose={ onClose }
 		>
-			<div className="edit-post-start-page-options__modal-content">
+			<div className="editor-start-page-options__modal-content">
 				<PatternSelection
 					blockPatterns={ startPatterns }
 					onChoosePattern={ onClose }
@@ -89,17 +104,29 @@ function StartPageOptionsModal( { onClose } ) {
 
 export default function StartPageOptions() {
 	const [ isClosed, setIsClosed ] = useState( false );
-	const shouldEnableModal = useSelect( ( select ) => {
-		const { isCleanNewPost, getRenderingMode } = select( editorStore );
-		const { isFeatureActive } = select( editPostStore );
+	const { shouldEnableModal, postType, postId } = useSelect( ( select ) => {
+		const {
+			isEditedPostDirty,
+			isEditedPostEmpty,
+			getCurrentPostType,
+			getCurrentPostId,
+			getEditorSettings,
+		} = select( editorStore );
+		const { __unstableIsPreviewMode: isPreviewMode } = getEditorSettings();
 
-		return (
-			getRenderingMode() === 'post-only' &&
-			! isFeatureActive( 'welcomeGuide' ) &&
-			isCleanNewPost()
-		);
+		return {
+			shouldEnableModal:
+				! isPreviewMode && ! isEditedPostDirty() && isEditedPostEmpty(),
+			postType: getCurrentPostType(),
+			postId: getCurrentPostId(),
+		};
 	}, [] );
 
+	useEffect( () => {
+		// Should reset the modal state when navigating to a new page/post.
+		setIsClosed( false );
+	}, [ postType, postId ] );
+
 	if ( ! shouldEnableModal || isClosed ) {
 		return null;
 	}

packages/edit-post/src/components/start-page-options/style.scss → packages/editor/src/components/start-page-options/style.scss

@@ -1,5 +1,5 @@
 // 2 column masonry layout.
-.edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
+.editor-start-page-options__modal-content .block-editor-block-patterns-list {
 	column-count: 2;
 	column-gap: $grid-unit-30;
 

packages/editor/src/style.scss

@@ -30,5 +30,6 @@
 @import "./components/post-visibility/style.scss";
 @import "./components/post-trash/style.scss";
 @import "./components/preview-dropdown/style.scss";
+@import "./components/start-page-options/style.scss";
 @import "./components/table-of-contents/style.scss";
 @import "./components/template-areas/style.scss";