diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index d7874000ffc420..54d956ff06e7c3 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -12,13 +12,8 @@ import { store as interfaceStore } from '@wordpress/interface'; import { store as editorStore } from '../../store'; export default function StartPageOptions() { - const { postId, shouldEnable } = useSelect( ( select ) => { - const { - isEditedPostDirty, - isEditedPostEmpty, - getCurrentPostId, - getCurrentPostType, - } = select( editorStore ); + const { postId, enabled } = useSelect( ( select ) => { + const { getCurrentPostId, getCurrentPostType } = select( editorStore ); const preferencesModalActive = select( interfaceStore ).isModalActive( 'editor/preferences' ); const choosePatternModalEnabled = select( preferencesStore ).get( @@ -27,24 +22,37 @@ export default function StartPageOptions() { ); return { postId: getCurrentPostId(), - shouldEnable: + enabled: choosePatternModalEnabled && ! preferencesModalActive && - ! isEditedPostDirty() && - isEditedPostEmpty() && 'page' === getCurrentPostType(), }; }, [] ); + const { isEditedPostDirty, isEditedPostEmpty } = useSelect( editorStore ); const { setIsInserterOpened } = useDispatch( editorStore ); useEffect( () => { - if ( shouldEnable ) { + if ( ! enabled ) { + return; + } + + const isFreshPage = ! isEditedPostDirty() && isEditedPostEmpty(); + if ( isFreshPage ) { setIsInserterOpened( { tab: 'patterns', category: 'core/starter-content', } ); } - }, [ postId, shouldEnable, setIsInserterOpened ] ); + + // Note: The `postId` ensures the effect re-runs when pages are switched without remounting the component. + // Examples: changing pages in the List View, creating a new page via Command Palette. + }, [ + postId, + enabled, + setIsInserterOpened, + isEditedPostDirty, + isEditedPostEmpty, + ] ); return null; }