From fbc8dbda0316a11f741b9b3bb71ffe3beef61783 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 6 Feb 2025 17:49:50 +0400 Subject: [PATCH 1/6] Editor: Restore starter content modal --- .../inserter/block-patterns-explorer/index.js | 5 +- .../inserter/block-patterns-tab/index.js | 4 +- .../pattern-category-previews.js | 8 +- .../block-patterns-tab/patterns-filter.js | 4 +- .../inserter/category-tabs/index.js | 4 +- .../block-editor/src/hooks/use-zoom-out.js | 12 +- .../src/components/preferences-modal/index.js | 21 ++- .../components/start-page-options/index.js | 153 ++++++++++++++---- .../various/template-resolution.spec.js | 4 - .../block-style-variations.spec.js | 4 +- test/e2e/specs/site-editor/pages.spec.js | 3 - 11 files changed, 147 insertions(+), 75 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js index 2bc41a7176954c..93a03ee200497e 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/index.js @@ -14,8 +14,9 @@ import { usePatternCategories } from '../block-patterns-tab/use-pattern-categori function PatternsExplorer( { initialCategory, rootClientId } ) { const [ searchValue, setSearchValue ] = useState( '' ); - const [ selectedCategory, setSelectedCategory ] = - useState( initialCategory ); + const [ selectedCategory, setSelectedCategory ] = useState( + initialCategory?.name + ); const patternCategories = usePatternCategories( rootClientId ); diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index f250ed6f12ebad..45db4732aa9c6a 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -70,9 +70,7 @@ function BlockPatternsTab( { ) } { showPatternsExplorer && ( setShowPatternsExplorer( false ) } rootClientId={ rootClientId } diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js index f9af2b6f8c42d2..c6ce9ba97d2501 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js @@ -69,19 +69,19 @@ export function PatternCategoryPreviews( { return false; } - if ( category.name === allPatternsCategory?.name ) { + if ( category.name === allPatternsCategory.name ) { return true; } if ( - category.name === myPatternsCategory?.name && + category.name === myPatternsCategory.name && pattern.type === INSERTER_PATTERN_TYPES.user ) { return true; } if ( - category.name === starterPatternsCategory?.name && + category.name === starterPatternsCategory.name && pattern.blockTypes?.includes( 'core/post-content' ) ) { return true; @@ -149,7 +149,7 @@ export function PatternCategoryPreviews( { level={ 4 } as="div" > - { category?.label } + { category.label } sourceFilter !== 'all' && sourceFilter !== 'user'; const getShouldHideSourcesFilter = ( category ) => { - return category?.name === myPatternsCategory.name; + return category.name === myPatternsCategory.name; }; const PATTERN_SOURCE_MENU_OPTIONS = [ @@ -60,7 +60,7 @@ export function PatternsFilter( { // the user may be confused when switching to another category if the haven't explicitly set // this filter themselves. const currentPatternSourceFilter = - category?.name === myPatternsCategory.name + category.name === myPatternsCategory.name ? INSERTER_PATTERN_TYPES.user : patternSourceFilter; diff --git a/packages/block-editor/src/components/inserter/category-tabs/index.js b/packages/block-editor/src/components/inserter/category-tabs/index.js index 7f5f9ba3f65ad6..2f70ea58f2532a 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -65,9 +65,7 @@ function CategoryTabs( { key={ category.name } tabId={ category.name } aria-current={ - category.name === selectedCategory?.name - ? 'true' - : undefined + category === selectedCategory ? 'true' : undefined } > { category.label } diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 5c37822eba4b38..adcea8b605aeb7 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -2,14 +2,13 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect, useRef, useContext } from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; /** * Internal dependencies */ import { store as blockEditorStore } from '../store'; import { unlock } from '../lock-unlock'; -import BlockContext from '../components/block-context'; /** * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. @@ -20,7 +19,6 @@ import BlockContext from '../components/block-context'; * @param {boolean} enabled If we should enter into zoomOut mode or not */ export function useZoomOut( enabled = true ) { - const { postId } = useContext( BlockContext ); const { setZoomLevel, resetZoomLevel } = unlock( useDispatch( blockEditorStore ) ); @@ -39,7 +37,6 @@ export function useZoomOut( enabled = true ) { const controlZoomLevelRef = useRef( false ); const isEnabledRef = useRef( enabled ); - const postIdRef = useRef( postId ); /** * This hook tracks if the zoom state was changed manually by the user via clicking @@ -58,11 +55,6 @@ export function useZoomOut( enabled = true ) { useEffect( () => { isEnabledRef.current = enabled; - // If the user created a new post/page, we should take control of the zoom level. - if ( postIdRef.current !== postId ) { - controlZoomLevelRef.current = true; - } - if ( enabled !== isZoomOut() ) { controlZoomLevelRef.current = true; @@ -79,5 +71,5 @@ export function useZoomOut( enabled = true ) { resetZoomLevel(); } }; - }, [ enabled, isZoomOut, postId, resetZoomLevel, setZoomLevel ] ); + }, [ enabled, isZoomOut, resetZoomLevel, setZoomLevel ] ); } diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index b8482885986989..fbb179253998d6 100644 --- 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, @@ -72,6 +73,7 @@ function PreferencesModalContents( { extraSections = {} } ) { const { setIsListViewOpened, setIsInserterOpened } = useDispatch( editorStore ); const { set: setPreference } = useDispatch( preferencesStore ); + const hasStarterPatterns = !! useStartPatterns().length; const sections = useMemo( () => @@ -112,14 +114,16 @@ function PreferencesModalContents( { extraSections = {} } ) { 'Allow right-click contextual menus' ) } /> - + { hasStarterPatterns && ( + + ) } { + 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', + rootClientId + ), + postType: getCurrentPostType(), + }; + }, + [] + ); + + return useMemo( () => { + 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 ) || + ( Array.isArray( pattern.postTypes ) && + pattern.postTypes.includes( postType ) ) + ); + } ); + }, [ postType, blockPatternsWithPostContentBlockType ] ); +} + +function PatternSelection( { blockPatterns, onChoosePattern } ) { + const { editEntityRecord } = useDispatch( coreStore ); + const { postType, postId } = useSelect( ( select ) => { + const { getCurrentPostType, getCurrentPostId } = select( editorStore ); + + return { + postType: getCurrentPostType(), + postId: getCurrentPostId(), + }; + }, [] ); + return ( + { + editEntityRecord( 'postType', postType, postId, { + blocks, + content: ( { blocks: blocksForSerialization = [] } ) => + __unstableSerializeAndClean( blocksForSerialization ), + } ); + onChoosePattern(); + } } + /> + ); +} + +function StartPageOptionsModal( { onClose } ) { + const startPatterns = useStartPatterns(); + const hasStartPattern = startPatterns.length > 0; + + if ( ! hasStartPattern ) { + return null; + } + + return ( + +
+ +
+ + ); +} export default function StartPageOptions() { - const { postId, enabled } = useSelect( ( select ) => { - const { getCurrentPostId, getCurrentPostType } = select( editorStore ); + const [ isClosed, setIsClosed ] = useState( false ); + 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 { - postId: getCurrentPostId(), - enabled: - choosePatternModalEnabled && - ! preferencesModalActive && - 'page' === getCurrentPostType(), - }; + return ( + choosePatternModalEnabled && + ! preferencesModalActive && + ! isEditedPostDirty() && + isEditedPostEmpty() && + TEMPLATE_POST_TYPE !== getCurrentPostType() + ); }, [] ); - const { isEditedPostDirty, isEditedPostEmpty } = useSelect( editorStore ); - const { setIsInserterOpened } = useDispatch( editorStore ); - useEffect( () => { - if ( ! enabled ) { - return; - } - - const isFreshPage = ! isEditedPostDirty() && isEditedPostEmpty(); - if ( isFreshPage ) { - setIsInserterOpened( { - tab: 'patterns', - category: 'core/starter-content', - } ); - } + if ( ! shouldEnableModal || isClosed ) { + return null; + } - // 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; + return setIsClosed( true ) } />; } diff --git a/test/e2e/specs/editor/various/template-resolution.spec.js b/test/e2e/specs/editor/various/template-resolution.spec.js index 82e336feff7334..13503ddaf23d5b 100644 --- a/test/e2e/specs/editor/various/template-resolution.spec.js +++ b/test/e2e/specs/editor/various/template-resolution.spec.js @@ -55,15 +55,12 @@ test.describe( 'Template resolution', () => { status: 'publish', } ); await admin.editPost( newPage.id ); - await page.locator( 'role=button[name="Block Inserter"i]' ).click(); await editor.openDocumentSettingsSidebar(); await expect( page.getByRole( 'button', { name: 'Template options' } ) ).toHaveText( 'Single Entries' ); await updateSiteSettings( { requestUtils, pageId: newPage.id } ); await page.reload(); - await page.locator( 'role=button[name="Block Inserter"i]' ).click(); - await editor.openDocumentSettingsSidebar(); await expect( page.getByRole( 'button', { name: 'Template options' } ) ).toHaveText( 'Index' ); @@ -84,7 +81,6 @@ test.describe( 'Template resolution', () => { postType: 'page', canvas: 'edit', } ); - await page.locator( 'role=button[name="Block Inserter"i]' ).click(); await editor.openDocumentSettingsSidebar(); await expect( page.getByRole( 'button', { name: 'Template options' } ) diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js index 1aa3c576b72c05..7fd9b15ca5374c 100644 --- a/test/e2e/specs/site-editor/block-style-variations.spec.js +++ b/test/e2e/specs/site-editor/block-style-variations.spec.js @@ -317,7 +317,9 @@ async function draftNewPage( page ) { // Create a Group block with 2 nested Group blocks. async function addPageContent( editor, page ) { - const inserterButton = page.locator( 'role=tab[name="Blocks"i]' ); + const inserterButton = page.locator( + 'role=button[name="Block Inserter"i]' + ); await inserterButton.click(); await page.type( 'role=searchbox[name="Search"i]', 'Group' ); await page.click( diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js index 1a8ab33b9e8843..8dcf336a1e8ff0 100644 --- a/test/e2e/specs/site-editor/pages.spec.js +++ b/test/e2e/specs/site-editor/pages.spec.js @@ -272,7 +272,6 @@ test.describe( 'Pages', () => { // Create new page that has the default template so as to swap it. await draftNewPage( page ); - await page.locator( 'role=button[name="Block Inserter"i]' ).click(); await editor.openDocumentSettingsSidebar(); const templateOptionsButton = page .getByRole( 'region', { name: 'Editor settings' } ) @@ -295,7 +294,6 @@ test.describe( 'Pages', () => { } ); // Now reset, and apply the default template back. - await editor.openDocumentSettingsSidebar(); await templateOptionsButton.click(); const resetButton = page .getByRole( 'menu', { name: 'Template options' } ) @@ -310,7 +308,6 @@ test.describe( 'Pages', () => { editor, } ) => { await draftNewPage( page ); - await page.locator( 'role=button[name="Block Inserter"i]' ).click(); await editor.openDocumentSettingsSidebar(); const templateOptionsButton = page .getByRole( 'region', { name: 'Editor settings' } ) From 2b88906aae596af76af671b0c4d1ed314f03ff05 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 6 Feb 2025 18:04:37 +0400 Subject: [PATCH 2/6] Restore limit to page post type --- packages/editor/src/components/start-page-options/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index 783a4a224fa378..8a7f42d20e30e1 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -18,7 +18,6 @@ import { store as interfaceStore } from '@wordpress/interface'; * Internal dependencies */ import { store as editorStore } from '../../store'; -import { TEMPLATE_POST_TYPE } from '../../store/constants'; export function useStartPatterns() { // A pattern is a start pattern if it includes 'core/post-content' in its blockTypes, @@ -129,7 +128,7 @@ export default function StartPageOptions() { ! preferencesModalActive && ! isEditedPostDirty() && isEditedPostEmpty() && - TEMPLATE_POST_TYPE !== getCurrentPostType() + 'page' === getCurrentPostType() ); }, [] ); From 3e056d5eb19b63a40727c225a2b61523e2370203 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 6 Feb 2025 18:41:23 +0400 Subject: [PATCH 3/6] Add don't show the option to the modal again --- packages/base-styles/_z-index.scss | 1 + .../components/start-page-options/index.js | 33 +++++++++++++++++-- .../components/start-page-options/style.scss | 27 +++++++++++++++ 3 files changed, 58 insertions(+), 3 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 6f7e3f2f13c309..527f8141d2ec4e 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -199,6 +199,7 @@ $z-layers: ( // Ensure modal footer actions appear above modal contents ".editor-start-template-options__modal__actions": 1, + ".editor-start-page-options__modal__actions": 1, // Ensure checkbox + actions don't overlap table header ".dataviews-view-table thead": 1, diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index 8a7f42d20e30e1..9dd5e549eb4520 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { Modal } from '@wordpress/components'; +import { Flex, FlexItem, Modal, ToggleControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useState, useMemo } from '@wordpress/element'; import { @@ -89,6 +89,8 @@ function PatternSelection( { blockPatterns, onChoosePattern } ) { } function StartPageOptionsModal( { onClose } ) { + const [ showStartPatterns, setShowStartPatterns ] = useState( true ); + const { set: setPreference } = useDispatch( preferencesStore ); const startPatterns = useStartPatterns(); const hasStartPattern = startPatterns.length > 0; @@ -96,18 +98,43 @@ function StartPageOptionsModal( { onClose } ) { return null; } + function handleClose() { + onClose(); + setPreference( 'core', 'enableChoosePatternModal', showStartPatterns ); + } + return (
+ + + { + setShowStartPatterns( newValue ); + } } + /> + + ); } diff --git a/packages/editor/src/components/start-page-options/style.scss b/packages/editor/src/components/start-page-options/style.scss index 129d670526c709..e97fc4a9b2cd9a 100644 --- a/packages/editor/src/components/start-page-options/style.scss +++ b/packages/editor/src/components/start-page-options/style.scss @@ -1,3 +1,30 @@ +$actions-height: 92px; + +.editor-start-page-options__modal { + .editor-start-page-options__modal__actions { + position: absolute; + bottom: 0; + width: 100%; + height: $actions-height; + background-color: $white; + margin-left: - $grid-unit-40; + margin-right: - $grid-unit-40; + padding-left: $grid-unit-40; + padding-right: $grid-unit-40; + border-top: 1px solid $gray-300; + z-index: z-index(".editor-start-page-options__modal__actions"); + } + + .block-editor-block-patterns-list { + // Since the actions container is positioned absolutely, + // this padding bottom ensures that the content wrapper will properly + // detect overflowing content and start showing scrollbars at the right + // moment. Without this padding, the content would render under the actions + // bar without causing the wrapper to show a scrollbar. + padding-bottom: $actions-height; + } +} + // 2 column masonry layout. .editor-start-page-options__modal-content .block-editor-block-patterns-list { column-count: 2; From 67452d10b96e2d4f6706d2c547bc0de16fc0be54 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Thu, 6 Feb 2025 19:36:50 +0400 Subject: [PATCH 4/6] Adjust logic for opening modal --- .../components/start-page-options/index.js | 42 ++++++++++++------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index 9dd5e549eb4520..b023de788cf657 100644 --- 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 { Flex, FlexItem, Modal, ToggleControl } 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, @@ -140,28 +140,42 @@ function StartPageOptionsModal( { onClose } ) { } export default function StartPageOptions() { - const [ isClosed, setIsClosed ] = useState( false ); - const shouldEnableModal = useSelect( ( select ) => { - const { isEditedPostDirty, isEditedPostEmpty, getCurrentPostType } = - select( editorStore ); + const [ isOpen, setIsOpen ] = useState( false ); + const { isEditedPostDirty, isEditedPostEmpty } = useSelect( editorStore ); + const { enabled, postId } = useSelect( ( select ) => { + const { getCurrentPostId, getCurrentPostType } = select( editorStore ); const preferencesModalActive = select( interfaceStore ).isModalActive( 'editor/preferences' ); const choosePatternModalEnabled = select( preferencesStore ).get( 'core', 'enableChoosePatternModal' ); - return ( - choosePatternModalEnabled && - ! preferencesModalActive && - ! isEditedPostDirty() && - isEditedPostEmpty() && - 'page' === getCurrentPostType() - ); + return { + postId: getCurrentPostId(), + enabled: + choosePatternModalEnabled && + ! preferencesModalActive && + 'page' === getCurrentPostType(), + }; }, [] ); - if ( ! shouldEnableModal || isClosed ) { + // 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. + useEffect( () => { + const isFreshPage = ! isEditedPostDirty() && isEditedPostEmpty(); + if ( ! enabled || ! isFreshPage ) { + return; + } + + // Open the modal after the initial render for a new page. + setIsOpen( true ); + + return () => setIsOpen( false ); + }, [ enabled, postId, isEditedPostDirty, isEditedPostEmpty ] ); + + if ( ! isOpen ) { return null; } - return setIsClosed( true ) } />; + return setIsOpen( false ) } />; } From d9e990b817a7469f7c0cdf77273eebc82e136241 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Fri, 7 Feb 2025 11:30:47 +0400 Subject: [PATCH 5/6] Feedback --- .../src/components/preferences-modal/index.js | 21 +++++++------------ .../components/start-page-options/index.js | 2 -- 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index fbb179253998d6..b8482885986989 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -26,7 +26,6 @@ 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, @@ -73,7 +72,6 @@ function PreferencesModalContents( { extraSections = {} } ) { const { setIsListViewOpened, setIsInserterOpened } = useDispatch( editorStore ); const { set: setPreference } = useDispatch( preferencesStore ); - const hasStarterPatterns = !! useStartPatterns().length; const sections = useMemo( () => @@ -114,16 +112,14 @@ function PreferencesModalContents( { extraSections = {} } ) { 'Allow right-click contextual menus' ) } /> - { hasStarterPatterns && ( - - ) } + setIsOpen( false ); }, [ enabled, postId, isEditedPostDirty, isEditedPostEmpty ] ); if ( ! isOpen ) { From 91078a218db804f287282b536c510b89375c9515 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 17 Feb 2025 16:01:49 +0800 Subject: [PATCH 6/6] Don't re-open the starter content modal after closing Preferences --- .../components/start-page-options/index.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index 1910a39af1b3c2..14d052052e7005 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -142,10 +142,9 @@ function StartPageOptionsModal( { onClose } ) { export default function StartPageOptions() { const [ isOpen, setIsOpen ] = useState( false ); const { isEditedPostDirty, isEditedPostEmpty } = useSelect( editorStore ); + const { isModalActive } = useSelect( interfaceStore ); const { enabled, postId } = useSelect( ( select ) => { const { getCurrentPostId, getCurrentPostType } = select( editorStore ); - const preferencesModalActive = - select( interfaceStore ).isModalActive( 'editor/preferences' ); const choosePatternModalEnabled = select( preferencesStore ).get( 'core', 'enableChoosePatternModal' @@ -153,9 +152,7 @@ export default function StartPageOptions() { return { postId: getCurrentPostId(), enabled: - choosePatternModalEnabled && - ! preferencesModalActive && - 'page' === getCurrentPostType(), + choosePatternModalEnabled && 'page' === getCurrentPostType(), }; }, [] ); @@ -163,13 +160,21 @@ export default function StartPageOptions() { // Examples: changing pages in the List View, creating a new page via Command Palette. useEffect( () => { const isFreshPage = ! isEditedPostDirty() && isEditedPostEmpty(); - if ( ! enabled || ! isFreshPage ) { + // Prevents immediately opening when features is enabled via preferences modal. + const isPreferencesModalActive = isModalActive( 'editor/preferences' ); + if ( ! enabled || ! isFreshPage || isPreferencesModalActive ) { return; } // Open the modal after the initial render for a new page. setIsOpen( true ); - }, [ enabled, postId, isEditedPostDirty, isEditedPostEmpty ] ); + }, [ + enabled, + postId, + isEditedPostDirty, + isEditedPostEmpty, + isModalActive, + ] ); if ( ! isOpen ) { return null;