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

… adding a page (WordPress#65026) * Adds a preference to disable the loading of the Choose a pattern modal when adding new pages. * Return an empty array from the memoized value of useStartPatterns() so that the preferences modal has a value to test. * Don't reset the `isClosed` value in the same editor session. This prevents the modal popping open between page > template part > page navigation. Co-authored-by: ramonjd <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: kevin940726 <[email protected]> Co-authored-by: noisysocks <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: jakobtrost <[email protected]> Co-authored-by: johnstonphilip <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: MattrCoUk <[email protected]> Co-authored-by: jasonbahl <[email protected]> Co-authored-by: colorful-tones <[email protected]> Co-authored-by: Blindmikey <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: luminuu <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: jordesign <[email protected]>
carstingaxion · Sep 8, 2024 · fa78b66 · fa78b66
1 parent 886c2b4
commit fa78b66
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 26 deletions.
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
@@ -70,6 +70,7 @@ export function initializeEditor(
 		showBlockBreadcrumbs: true,
 		showIconLabels: false,
 		showListViewByDefault: false,
+		enableChoosePatternModal: true,
 		isPublishSidebarEnabled: true,
 	} );
 

diff --git a/packages/edit-site/src/index.js b/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 ) {

diff --git a/packages/edit-site/src/posts.js b/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 );

diff --git a/packages/editor/src/components/preferences-modal/index.js b/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 hasStarterPatterns = !! useStartPatterns().length;
 
 	const sections = useMemo(
 		() =>
@@ -97,6 +99,16 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 										'Allow right-click contextual menus'
 									) }
 								/>
+								{ hasStarterPatterns && (
+									<PreferenceToggleControl
+										scope="core"
+										featureName="enableChoosePatternModal"
+										help={ __(
+											'Shows starter patterns when creating a new page.'
+										) }
+										label={ __( 'Show starter patterns' ) }
+									/>
+								) }
 							</PreferencesModalSection>
 							<PreferencesModalSection
 								title={ __( 'Document settings' ) }
@@ -314,6 +326,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
 			setIsListViewOpened,
 			setPreference,
 			isLargeViewport,
+			hasStarterPatterns,
 		]
 	);
 

diff --git a/packages/editor/src/components/start-page-options/index.js b/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;
 	}