Editor: Move the starter template options to the editor package. (#61665

)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jasmussen <[email protected]>

packages/base-styles/_z-index.scss

@@ -205,7 +205,7 @@ $z-layers: (
 	".edit-site-sidebar-navigation-screen__title-icon": 1,
 
 	// Ensure modal footer actions appear above modal contents
-	".edit-site-start-template-options__modal__actions": 1,
+	".editor-start-template-options__modal__actions": 1,
 
 	// Ensure checkbox + actions don't overlap table header
 	".dataviews-view-table thead": 1,

packages/block-library/src/pattern/edit.js

@@ -43,7 +43,7 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	const [ hasRecursionError, setHasRecursionError ] = useState( false );
 	const parsePatternDependencies = useParsePatternDependencies();
 
-	// Duplicated in packages/edit-site/src/components/start-template-options/index.js.
+	// Duplicated in packages/editor/src/components/start-template-options/index.js.
 	function injectThemeAttributeInBlockTemplateContent( block ) {
 		if (
 			block.innerBlocks.find(

packages/edit-site/src/components/editor/index.js

@@ -44,7 +44,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import CodeEditor from '../code-editor';
 import Header from '../header-edit-mode';
 import WelcomeGuide from '../welcome-guide';
-import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from '../global-styles-renderer';
 import useTitle from '../routes/use-title';
@@ -289,7 +288,6 @@ export default function Editor( { isLoading, onClick } ) {
 					settings={ settings }
 					useSubRegistry={ false }
 				>
-					{ isEditMode && <StartTemplateOptions /> }
 					<InterfaceSkeleton
 						isDistractionFree={ isDistractionFree }
 						enableRegionNavigation={ false }

packages/edit-site/src/style.scss

@@ -16,7 +16,6 @@
 @import "./components/editor/style.scss";
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/welcome-guide/style.scss";
-@import "./components/start-template-options/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/save-hub/style.scss";
 @import "./components/save-panel/style.scss";

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

@@ -29,6 +29,7 @@ import BlockRemovalWarnings from '../block-removal-warnings';
 import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';
+import StartTemplateOptions from '../start-template-options';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
@@ -275,6 +276,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 									<KeyboardShortcutHelpModal />
 									<BlockRemovalWarnings />
 									<StartPageOptions />
+									<StartTemplateOptions />
 								</>
 							) }
 						</BlockEditorProviderComponent>

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

@@ -17,6 +17,7 @@ import { __unstableSerializeAndClean } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 
 function useStartPatterns() {
 	// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
@@ -115,14 +116,15 @@ export default function StartPageOptions() {
 			isEditedPostEmpty,
 			getCurrentPostType,
 			getCurrentPostId,
-			getEditorSettings,
 		} = select( editorStore );
-		const { __unstableIsPreviewMode: isPreviewMode } = getEditorSettings();
+		const _postType = getCurrentPostType();
 
 		return {
 			shouldEnableModal:
-				! isPreviewMode && ! isEditedPostDirty() && isEditedPostEmpty(),
-			postType: getCurrentPostType(),
+				! isEditedPostDirty() &&
+				isEditedPostEmpty() &&
+				TEMPLATE_POST_TYPE !== _postType,
+			postType: _postType,
 			postId: getCurrentPostId(),
 		};
 	}, [] );

packages/edit-site/src/components/start-template-options/index.js → packages/editor/src/components/start-template-options/index.js

@@ -3,19 +3,18 @@
  */
 import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
+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 { store as preferencesStore } from '@wordpress/preferences';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { store as editSiteStore } from '../../store';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { store as editorStore } from '../../store';
+import { TEMPLATE_POST_TYPE } from '../../store/constants';
 
 function useFallbackTemplateContent( slug, isCustom = false ) {
 	return useSelect(
@@ -38,10 +37,10 @@ function useFallbackTemplateContent( slug, isCustom = false ) {
 
 function useStartPatterns( fallbackContent ) {
 	const { slug, patterns } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
+		const { getCurrentPostType, getCurrentPostId } = select( editorStore );
 		const { getEntityRecord, getBlockPatterns } = select( coreStore );
-		const postId = getEditedPostId();
-		const postType = getEditedPostType();
+		const postId = getCurrentPostId();
+		const postType = getCurrentPostType();
 		const record = getEntityRecord( 'postType', postType, postId );
 		return {
 			slug: record.slug,
@@ -132,14 +131,14 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 	}
 	return (
 		<Modal
-			className="edit-site-start-template-options__modal"
+			className="editor-start-template-options__modal"
 			title={ __( 'Choose a pattern' ) }
 			closeLabel={ __( 'Cancel' ) }
 			focusOnMount="firstElement"
 			onRequestClose={ onClose }
 			isFullScreen
 		>
-			<div className="edit-site-start-template-options__modal-content">
+			<div className="editor-start-template-options__modal-content">
 				<PatternSelection
 					fallbackContent={ fallbackContent }
 					slug={ slug }
@@ -151,7 +150,7 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 				/>
 			</div>
 			<Flex
-				className="edit-site-start-template-options__modal__actions"
+				className="editor-start-template-options__modal__actions"
 				justify="flex-end"
 				expanded={ false }
 			>
@@ -165,56 +164,47 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 	);
 }
 
-const START_TEMPLATE_MODAL_STATES = {
-	INITIAL: 'INITIAL',
-	CLOSED: 'CLOSED',
-};
-
 export default function StartTemplateOptions() {
-	const [ modalState, setModalState ] = useState(
-		START_TEMPLATE_MODAL_STATES.INITIAL
-	);
-	const { shouldOpenModal, slug, isCustom, postType } = useSelect(
+	const [ isClosed, setIsClosed ] = useState( false );
+	const { shouldOpenModal, slug, isCustom, postType, postId } = useSelect(
 		( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const _postType = getEditedPostType();
-			const postId = getEditedPostId();
+			const { getCurrentPostType, getCurrentPostId } =
+				select( editorStore );
+			const _postType = getCurrentPostType();
+			const _postId = getCurrentPostId();
 			const { getEditedEntityRecord, hasEditsForEntityRecord } =
 				select( coreStore );
 			const templateRecord = getEditedEntityRecord(
 				'postType',
 				_postType,
-				postId
+				_postId
 			);
 			const hasEdits = hasEditsForEntityRecord(
 				'postType',
 				_postType,
-				postId
+				_postId
 			);
 
 			return {
 				shouldOpenModal:
 					! hasEdits &&
 					'' === templateRecord.content &&
-					TEMPLATE_POST_TYPE === _postType &&
-					! select( preferencesStore ).get(
-						'core/edit-site',
-						'welcomeGuide'
-					),
+					TEMPLATE_POST_TYPE === _postType,
 				slug: templateRecord.slug,
 				isCustom: templateRecord.is_custom,
 				postType: _postType,
+				postId: _postId,
 			};
 		},
 		[]
 	);
 
-	if (
-		( modalState === START_TEMPLATE_MODAL_STATES.INITIAL &&
-			! shouldOpenModal ) ||
-		modalState === START_TEMPLATE_MODAL_STATES.CLOSED
-	) {
+	useEffect( () => {
+		// Should reset the modal state when navigating to a new page/post.
+		setIsClosed( false );
+	}, [ postType, postId ] );
+
+	if ( ! shouldOpenModal || isClosed ) {
 		return null;
 	}
 
@@ -223,9 +213,7 @@ export default function StartTemplateOptions() {
 			slug={ slug }
 			isCustom={ isCustom }
 			postType={ postType }
-			onClose={ () =>
-				setModalState( START_TEMPLATE_MODAL_STATES.CLOSED )
-			}
+			onClose={ () => setIsClosed( true ) }
 		/>
 	);
 }

packages/edit-site/src/components/start-template-options/style.scss → packages/editor/src/components/start-template-options/style.scss

@@ -1,7 +1,7 @@
 $actions-height: 92px;
 
-.edit-site-start-template-options__modal {
-	.edit-site-start-template-options__modal__actions {
+.editor-start-template-options__modal {
+	.editor-start-template-options__modal__actions {
 		position: absolute;
 		bottom: 0;
 		width: 100%;
@@ -12,7 +12,7 @@ $actions-height: 92px;
 		padding-left: $grid-unit-40;
 		padding-right: $grid-unit-40;
 		border-top: 1px solid $gray-300;
-		z-index: z-index(".edit-site-start-template-options__modal__actions");
+		z-index: z-index(".editor-start-template-options__modal__actions");
 	}
 
 	.block-editor-block-patterns-list {
@@ -25,7 +25,7 @@ $actions-height: 92px;
 	}
 }
 
-.edit-site-start-template-options__modal-content .block-editor-block-patterns-list {
+.editor-start-template-options__modal-content .block-editor-block-patterns-list {
 	column-count: 2;
 	column-gap: $grid-unit-30;
 

packages/editor/src/style.scss

@@ -43,6 +43,7 @@
 @import "./components/preview-dropdown/style.scss";
 @import "./components/save-publish-panels/style.scss";
 @import "./components/start-page-options/style.scss";
+@import "./components/start-template-options/style.scss";
 @import "./components/sidebar/style.scss";
 @import "./components/table-of-contents/style.scss";
 @import "./components/template-areas/style.scss";