Patterns: add opt out preference to the 'Choose a Pattern' modal when adding a page

packages/edit-post/src/index.js

@@ -70,6 +70,7 @@ export function initializeEditor(
 		showBlockBreadcrumbs: true,
 		showIconLabels: false,
 		showListViewByDefault: false,
+		enableChoosePatternModal: true,
 		isPublishSidebarEnabled: true,
 	} );
 

packages/edit-site/src/index.js

@@ -79,6 +79,7 @@ export function initializeEditor( id, settings ) {
 		openPanels: [ 'post-status' ],
 		showBlockBreadcrumbs: true,
 		showListViewByDefault: false,
+		enableChoosePatternModal: true,
 	} );
 
 	if ( window.__experimentalMediaProcessing ) {

packages/edit-site/src/posts.js

@@ -72,6 +72,7 @@ export function initializePostsDashboard( id, settings ) {
 		openPanels: [ 'post-status' ],
 		showBlockBreadcrumbs: true,
 		showListViewByDefault: false,
+		enableChoosePatternModal: true,
 	} );
 
 	dispatch( editSiteStore ).updateSettings( settings );

packages/editor/src/components/preferences-modal/index.js

@@ -26,6 +26,7 @@ import PageAttributesCheck from '../page-attributes/check';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useStartPatterns } from '../start-page-options';
 
 const {
 	PreferencesModal,
@@ -57,6 +58,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 	const { setIsListViewOpened, setIsInserterOpened } =
 		useDispatch( editorStore );
 	const { set: setPreference } = useDispatch( preferencesStore );
+	const starterPatterns = useStartPatterns();
 
 	const sections = useMemo(
 		() =>
@@ -152,6 +154,18 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 											'Enable pre-publish checks'
 										) }
 									/>
+									{ starterPatterns?.length && (
+										<PreferenceToggleControl
+											scope="core"
+											featureName="enableChoosePatternModal"
+											help={ __(
+												'Shows starter patterns when creating a new page.'
+											) }
+											label={ __(
+												'Show starter patterns'
+											) }
+										/>
+									) }
 								</PreferencesModalSection>
 							) }
 							{ extraSections?.general }
@@ -314,6 +328,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 			setIsListViewOpened,
 			setPreference,
 			isLargeViewport,
+			starterPatterns,
 		]
 	);
 

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

@@ -3,7 +3,7 @@
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo, useEffect } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	__experimentalBlockPatternsList as BlockPatternsList,
@@ -12,14 +12,16 @@ 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';
+import { store as interfaceStore } from '@wordpress/interface';
 
 /**
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
 import { TEMPLATE_POST_TYPE } from '../../store/constants';
 
-function useStartPatterns() {
+export 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.
@@ -45,8 +47,14 @@ function useStartPatterns() {
 	);
 
 	return useMemo( () => {
-		// filter patterns without postTypes declared if the current postType is page
-		// or patterns that declare the current postType in its post type array.
+		if ( ! blockPatternsWithPostContentBlockType?.length ) {
+			return [];
+		}
+
+		/*
+		 * Filter patterns without postTypes declared if the current postType is page
+		 * or patterns that declare the current postType in its post type array.
+		 */
 		return blockPatternsWithPostContentBlockType.filter( ( pattern ) => {
 			return (
 				( postType === 'page' && ! pattern.postTypes ) ||
@@ -110,30 +118,24 @@ function StartPageOptionsModal( { onClose } ) {
 
 export default function StartPageOptions() {
 	const [ isClosed, setIsClosed ] = useState( false );
-	const { shouldEnableModal, postType, postId } = useSelect( ( select ) => {
-		const {
-			isEditedPostDirty,
-			isEditedPostEmpty,
-			getCurrentPostType,
-			getCurrentPostId,
-		} = select( editorStore );
-		const _postType = getCurrentPostType();
-
-		return {
-			shouldEnableModal:
-				! isEditedPostDirty() &&
-				isEditedPostEmpty() &&
-				TEMPLATE_POST_TYPE !== _postType,
-			postType: _postType,
-			postId: getCurrentPostId(),
-		};
+	const shouldEnableModal = useSelect( ( select ) => {
+		const { isEditedPostDirty, isEditedPostEmpty, getCurrentPostType } =
+			select( editorStore );
+		const preferencesModalActive =
+			select( interfaceStore ).isModalActive( 'editor/preferences' );
+		const choosePatternModalEnabled = select( preferencesStore ).get(
+			'core',
+			'enableChoosePatternModal'
+		);
+		return (
+			choosePatternModalEnabled &&
+			! preferencesModalActive &&
+			! isEditedPostDirty() &&
+			isEditedPostEmpty() &&
+			TEMPLATE_POST_TYPE !== getCurrentPostType()
+		);
 	}, [] );
 
-	useEffect( () => {
-		// Should reset the modal state when navigating to a new page/post.
-		setIsClosed( false );
-	}, [ postType, postId ] );
-
 	if ( ! shouldEnableModal || isClosed ) {
 		return null;
 	}

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

@@ -24,3 +24,25 @@
 		}
 	}
 }
+
+.editor-start-page-options__modal-content {
+	margin-bottom: 72px;
+}
+
+.editor-start-page-options__modal-footer {
+	box-sizing: border-box;
+	border-bottom: $border-width solid transparent;
+	padding: $grid-unit-10 $grid-unit-40 $grid-unit-10;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	height: $header-height + $grid-unit-15;
+	width: 100%;
+	z-index: z-index(".components-modal__header");
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	background: $white;
+	border-top: 1px solid $gray-300;
+}