From e08efbcf7bb04b8de59e48d74797cd6ae8d56d9f Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 9 May 2024 14:08:21 +0900 Subject: [PATCH 1/9] Zoom out: try pattern inserter instead of starter pattern modal Select starter patterns Put category on top Capitalize Fix for empty starter patterns Fix label on open Fix for site editor simplify StartPageOptions Dont use the registry fix double import --- .../inserter/block-patterns-tab/index.js | 5 +- .../use-pattern-categories.js | 10 ++ .../inserter/block-patterns-tab/utils.js | 7 +- .../inserter/hooks/use-patterns-state.js | 36 +++- .../src/components/inserter/menu.js | 9 +- packages/block-editor/src/store/selectors.js | 27 ++- .../src/components/inserter-sidebar/index.js | 6 +- .../src/components/preferences-modal/index.js | 13 +- .../components/start-page-options/index.js | 170 +++++------------- 9 files changed, 147 insertions(+), 136 deletions(-) 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 141ebf8cc84016..400753254e73f0 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 @@ -13,7 +13,6 @@ import { useSelect } from '@wordpress/data'; import PatternsExplorerModal from '../block-patterns-explorer'; import MobileTabNavigation from '../mobile-tab-navigation'; import { PatternCategoryPreviews } from './pattern-category-previews'; -import { usePatternCategories } from './use-pattern-categories'; import CategoryTabs from '../category-tabs'; import InserterNoResults from '../no-results'; import { store as blockEditorStore } from '../../../store'; @@ -22,14 +21,12 @@ import { unlock } from '../../../lock-unlock'; function BlockPatternsTab( { onSelectCategory, selectedCategory, + categories, onInsert, rootClientId, children, } ) { const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false ); - - const categories = usePatternCategories( rootClientId ); - const isMobile = useViewportMatch( 'medium', '<' ); const isResolvingPatterns = useSelect( ( select ) => diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js b/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js index cff5fbf3413820..939ee5b1d1ff20 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/use-pattern-categories.js @@ -14,6 +14,7 @@ import { isPatternFiltered, allPatternsCategory, myPatternsCategory, + starterContentCategory, INSERTER_PATTERN_TYPES, } from './utils'; @@ -67,6 +68,15 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) { label: _x( 'Uncategorized' ), } ); } + + if ( + patterns.find( ( pattern ) => + pattern.categories.includes( 'core/content' ) + ) + ) { + categories.unshift( starterContentCategory ); + } + if ( filteredPatterns.some( ( pattern ) => pattern.type === INSERTER_PATTERN_TYPES.user diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js b/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js index f8ba47f3790e14..75590e0ed87bd3 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js @@ -22,7 +22,12 @@ export const allPatternsCategory = { export const myPatternsCategory = { name: 'myPatterns', - label: __( 'My patterns' ), + label: __( 'My Patterns' ), +}; + +export const starterContentCategory = { + name: 'core/content', + label: __( 'Starter Content' ), }; export function isPatternFiltered( pattern, sourceFilter, syncFilter ) { diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js index 6483dc58ae8b97..20d564bb28d5ba 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js @@ -13,6 +13,17 @@ import { store as noticesStore } from '@wordpress/notices'; import { store as blockEditorStore } from '../../../store'; import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils'; +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. + return useSelect( ( select ) => + select( blockEditorStore ).getPatternsByBlockTypes( + 'core/post-content' + ) + ); +} + /** * Retrieves the block patterns inserter state. * @@ -40,6 +51,29 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => { [ rootClientId ] ); + const starterPatterns = useStartPatterns(); + const starterPatternsNames = starterPatterns.map( + ( pattern ) => pattern.name + ); + const newPatterns = useMemo( + () => + patterns.map( ( pattern ) => { + if ( starterPatternsNames.includes( pattern.name ) ) { + // TODO - I'm not sure why we can't just use the pattern? + return { + ...pattern, + categories: [ + ...( pattern.categories ?? [] ), + 'core/content', + ], + }; + } + + return pattern; + } ), + [ patterns, starterPatterns ] + ); + const allCategories = useMemo( () => { const categories = [ ...patternCategories ]; userPatternCategories?.forEach( ( userCategory ) => { @@ -94,7 +128,7 @@ const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => { [ createSuccessNotice, onInsert, selectedCategory ] ); - return [ patterns, allCategories, onClickPattern ]; + return [ newPatterns, allCategories, onClickPattern ]; }; export default usePatternsState; diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index faf2c20514f67a..744ea23cbc6cfc 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -32,6 +32,9 @@ import InserterSearchResults from './search-results'; import useInsertionPoint from './hooks/use-insertion-point'; import { store as blockEditorStore } from '../../store'; import TabbedSidebar from '../tabbed-sidebar'; +import { useZoomOut } from '../../hooks/use-zoom-out'; +import { usePatternCategories } from './block-patterns-tab/use-pattern-categories'; +import { unlock } from '../../lock-unlock'; const NOOP = () => {}; function InserterMenu( @@ -60,8 +63,11 @@ function InserterMenu( const [ filterValue, setFilterValue, delayedFilterValue ] = useDebouncedInput( __experimentalFilterValue ); const [ hoveredItem, setHoveredItem ] = useState( null ); + const categories = usePatternCategories( rootClientId ); const [ selectedPatternCategory, setSelectedPatternCategory ] = useState( - __experimentalInitialCategory + categories.find( + ( category ) => category.name === __experimentalInitialCategory + ) ); const [ patternFilter, setPatternFilter ] = useState( 'all' ); const [ selectedMediaCategory, setSelectedMediaCategory ] = @@ -237,6 +243,7 @@ function InserterMenu( onInsert={ onInsertPattern } onSelectCategory={ onClickPatternCategory } selectedCategory={ selectedPatternCategory } + categories={ categories } > { showPatternPanel && ( if ( ! blockNames ) { return EMPTY_ARRAY; } - const patterns = - select( STORE_NAME ).__experimentalGetAllowedPatterns( - rootClientId - ); + let patterns; + + if ( rootClientId ) { + patterns = + select( STORE_NAME ).__experimentalGetAllowedPatterns( + rootClientId + ); + } else { + const { + getAllPatterns, + __experimentalGetParsedPattern: getParsedPattern, + } = unlock( select( STORE_NAME ) ); + patterns = getAllPatterns() + .filter( ( { inserter = true } ) => !! inserter ) + .map( ( { name } ) => getParsedPattern( name ) ); + } + const normalizedBlockNames = Array.isArray( blockNames ) ? blockNames : [ blockNames ]; @@ -2444,7 +2457,11 @@ export const getPatternsByBlockTypes = createRegistrySelector( ( select ) => return filteredPatterns; }, ( state, blockNames, rootClientId ) => - getAllowedPatternsDependants( select )( state, rootClientId ) + ! rootClientId + ? unlock( select( STORE_NAME ) ).getAllPatterns() + : select( STORE_NAME ).__experimentalGetAllowedPatterns( + rootClientId + ) ) ); diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index b98770b7afe8fa..30df2d0dc62579 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -33,6 +33,7 @@ export default function InserterSidebar() { getInsertionPoint, isPublishSidebarOpened, } = unlock( select( editorStore ) ); + const { getBlockRootClientId, __unstableGetEditorMode, @@ -40,6 +41,7 @@ export default function InserterSidebar() { } = unlock( select( blockEditorStore ) ); const { get } = select( preferencesStore ); const { getActiveComplementaryArea } = select( interfaceStore ); + const getBlockSectionRootClientId = () => { if ( __unstableGetEditorMode() === 'zoom-out' ) { const sectionRootClientId = getSectionRootClientId(); @@ -54,10 +56,10 @@ export default function InserterSidebar() { inserterSidebarToggleRef: getInserterSidebarToggleRef(), insertionPoint: getInsertionPoint(), showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ), - blockSectionRootClientId: getBlockSectionRootClientId(), sidebarIsOpened: !! ( getActiveComplementaryArea( 'core' ) || isPublishSidebarOpened() ), + blockSectionRootClientId: getBlockSectionRootClientId(), }; }, [] ); const { setIsInserterOpened } = useDispatch( editorStore ); @@ -89,7 +91,7 @@ export default function InserterSidebar() { showInserterHelpPanel shouldFocusBlock={ isMobileViewport } rootClientId={ - blockSectionRootClientId ?? insertionPoint.rootClientId + insertionPoint.rootClientId ?? blockSectionRootClientId } __experimentalInsertionIndex={ insertionPoint.insertionIndex } onSelect={ insertionPoint.onSelect } diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index a8cfd8245522cd..36ed1f0eee835a 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -11,6 +11,7 @@ import { privateApis as preferencesPrivateApis, } from '@wordpress/preferences'; import { store as interfaceStore } from '@wordpress/interface'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -26,7 +27,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, @@ -35,6 +35,17 @@ const { PreferenceToggleControl, } = unlock( preferencesPrivateApis ); +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. + return useSelect( ( select ) => + select( blockEditorStore ).getPatternsByBlockTypes( + 'core/post-content' + ) + ); +} + export default function EditorPreferencesModal( { extraSections = {} } ) { const isLargeViewport = useViewportMatch( 'medium' ); const { isActive, showBlockBreadcrumbsOption } = useSelect( diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index 07fee67fbed19b..b9e766b931f0a0 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -1,19 +1,9 @@ /** * WordPress dependencies */ -import { Modal } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { useState, useMemo } from '@wordpress/element'; -import { - store as blockEditorStore, - __experimentalBlockPatternsList as BlockPatternsList, -} from '@wordpress/block-editor'; +import { useState, useEffect } from '@wordpress/element'; 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'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -21,124 +11,62 @@ import { store as interfaceStore } from '@wordpress/interface'; 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, - // 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. - const { blockPatternsWithPostContentBlockType, postType } = useSelect( +export default function StartPageOptions() { + const [ isClosed, setIsClosed ] = useState( false ); + const { shouldEnableStartPage, postType, postId } = useSelect( ( select ) => { - const { getPatternsByBlockTypes, getBlocksByName } = - select( blockEditorStore ); - const { getCurrentPostType, getRenderingMode } = - select( editorStore ); - const rootClientId = - getRenderingMode() === 'post-only' - ? '' - : getBlocksByName( 'core/post-content' )?.[ 0 ]; + const { + isEditedPostDirty, + isEditedPostEmpty, + getCurrentPostType, + getCurrentPostId, + } = select( editorStore ); + const _postType = getCurrentPostType(); + return { - blockPatternsWithPostContentBlockType: getPatternsByBlockTypes( - 'core/post-content', - rootClientId - ), - postType: getCurrentPostType(), + shouldEnableStartPage: + ! isEditedPostDirty() && + isEditedPostEmpty() && + TEMPLATE_POST_TYPE !== _postType, + postType: _postType, + postId: getCurrentPostId(), }; }, [] ); - return useMemo( () => { - if ( ! blockPatternsWithPostContentBlockType?.length ) { - return []; - } + const { setIsInserterOpened } = useDispatch( editorStore ); + const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); - /* - * 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 ] ); -} + useEffect( () => { + // Should reset the start page state when navigating to a new page/post. + setIsClosed( false ); + }, [ postType, postId ] ); -function PatternSelection( { blockPatterns, onChoosePattern } ) { - const shownBlockPatterns = useAsyncList( blockPatterns ); - 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(); - } } - /> + // 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. + const hasStarterPatterns = useSelect( + ( select ) => + !! select( blockEditorStore ).getPatternsByBlockTypes( + 'core/post-content' + ).length ); -} - -function StartPageOptionsModal( { onClose } ) { - const startPatterns = useStartPatterns(); - const hasStartPattern = startPatterns.length > 0; - - if ( ! hasStartPattern ) { - return null; - } - return ( - -
- -
- - ); -} - -export default function StartPageOptions() { - 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 ( - choosePatternModalEnabled && - ! preferencesModalActive && - ! isEditedPostDirty() && - isEditedPostEmpty() && - TEMPLATE_POST_TYPE !== getCurrentPostType() - ); - }, [] ); - - if ( ! shouldEnableModal || isClosed ) { - return null; - } - - return setIsClosed( true ) } />; + const showInserterOnNewPage = + shouldEnableStartPage && ! isClosed && hasStarterPatterns; + useEffect( () => { + if ( showInserterOnNewPage ) { + setIsInserterOpened( { + tab: 'patterns', + category: 'core/content', + } ); + __unstableSetEditorMode( 'zoom-out' ); + } + }, [ + showInserterOnNewPage, + setIsInserterOpened, + __unstableSetEditorMode, + ] ); + return null; } From 0d86c43e0e33edb91a77510b45a9b1a6fec078e2 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 10 Sep 2024 12:27:02 +0100 Subject: [PATCH 2/9] hide behind the zoom out experiment --- packages/editor/src/components/start-page-options/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index b9e766b931f0a0..f8704749991921 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -54,7 +54,10 @@ export default function StartPageOptions() { ); const showInserterOnNewPage = - shouldEnableStartPage && ! isClosed && hasStarterPatterns; + shouldEnableStartPage && + ! isClosed && + hasStarterPatterns && + window.__experimentalEnableZoomOutExperiment; useEffect( () => { if ( showInserterOnNewPage ) { setIsInserterOpened( { From 3ad2e3e471b5989fdb6f2071ff369ae4360bff55 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 10 Sep 2024 15:19:02 +0100 Subject: [PATCH 3/9] hide behind experiment --- .../components/start-page-options/index.js | 146 +++++++++++++++++- 1 file changed, 141 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index f8704749991921..e9fe5933eeaba5 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -1,9 +1,19 @@ /** * WordPress dependencies */ -import { useState, useEffect } from '@wordpress/element'; +import { Modal } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useEffect, useMemo, useState } from '@wordpress/element'; +import { + store as blockEditorStore, + __experimentalBlockPatternsList as BlockPatternsList, +} from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; -import { store as blockEditorStore } from '@wordpress/block-editor'; +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 @@ -11,8 +21,124 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; 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, + // 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. + const { blockPatternsWithPostContentBlockType, postType } = useSelect( + ( select ) => { + 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 shownBlockPatterns = useAsyncList( blockPatterns ); + 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 [ isClosed, setIsClosed ] = useState( false ); + + // Select for starter page modal. + 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() + ); + }, [] ); + + // Select for starter pattern inserter. const { shouldEnableStartPage, postType, postId } = useSelect( ( select ) => { const { @@ -35,9 +161,6 @@ export default function StartPageOptions() { [] ); - const { setIsInserterOpened } = useDispatch( editorStore ); - const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); - useEffect( () => { // Should reset the start page state when navigating to a new page/post. setIsClosed( false ); @@ -53,11 +176,15 @@ export default function StartPageOptions() { ).length ); + const { setIsInserterOpened } = useDispatch( editorStore ); + const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); + const showInserterOnNewPage = shouldEnableStartPage && ! isClosed && hasStarterPatterns && window.__experimentalEnableZoomOutExperiment; + useEffect( () => { if ( showInserterOnNewPage ) { setIsInserterOpened( { @@ -71,5 +198,14 @@ export default function StartPageOptions() { setIsInserterOpened, __unstableSetEditorMode, ] ); + + if ( + shouldEnableModal && + ! isClosed && + ! window.__experimentalEnableZoomOutExperiment + ) { + return setIsClosed( true ) } />; + } + return null; } From eff19e0120eb498ece12b2908eb3569e8c055471 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 10 Sep 2024 15:26:50 +0100 Subject: [PATCH 4/9] revert unused changes --- .../src/components/preferences-modal/index.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index 36ed1f0eee835a..a8cfd8245522cd 100644 --- a/packages/editor/src/components/preferences-modal/index.js +++ b/packages/editor/src/components/preferences-modal/index.js @@ -11,7 +11,6 @@ import { privateApis as preferencesPrivateApis, } from '@wordpress/preferences'; import { store as interfaceStore } from '@wordpress/interface'; -import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -27,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, @@ -35,17 +35,6 @@ const { PreferenceToggleControl, } = unlock( preferencesPrivateApis ); -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. - return useSelect( ( select ) => - select( blockEditorStore ).getPatternsByBlockTypes( - 'core/post-content' - ) - ); -} - export default function EditorPreferencesModal( { extraSections = {} } ) { const isLargeViewport = useViewportMatch( 'medium' ); const { isActive, showBlockBreadcrumbsOption } = useSelect( From 89572a8a78612ba484939688fe62854d89fc1b8f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 16 Sep 2024 15:23:22 +0100 Subject: [PATCH 5/9] Allow finding appropriate route even outside zoom out mode --- .../src/components/inserter-sidebar/index.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index 30df2d0dc62579..40a6f6dcf0808c 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -34,22 +34,19 @@ export default function InserterSidebar() { isPublishSidebarOpened, } = unlock( select( editorStore ) ); - const { - getBlockRootClientId, - __unstableGetEditorMode, - getSectionRootClientId, - } = unlock( select( blockEditorStore ) ); + const { getBlockRootClientId, getSectionRootClientId } = unlock( + select( blockEditorStore ) + ); const { get } = select( preferencesStore ); const { getActiveComplementaryArea } = select( interfaceStore ); const getBlockSectionRootClientId = () => { - if ( __unstableGetEditorMode() === 'zoom-out' ) { - const sectionRootClientId = getSectionRootClientId(); + const sectionRootClientId = getSectionRootClientId(); - if ( sectionRootClientId ) { - return sectionRootClientId; - } + if ( sectionRootClientId ) { + return sectionRootClientId; } + return getBlockRootClientId(); }; return { From 66ba934862c46fb5f9da80f4167ed061960ea4b0 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 16 Sep 2024 15:28:38 +0100 Subject: [PATCH 6/9] Remove redunant selector call --- .../editor/src/components/inserter-sidebar/index.js | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/editor/src/components/inserter-sidebar/index.js b/packages/editor/src/components/inserter-sidebar/index.js index 40a6f6dcf0808c..cabeacc4b5e051 100644 --- a/packages/editor/src/components/inserter-sidebar/index.js +++ b/packages/editor/src/components/inserter-sidebar/index.js @@ -34,21 +34,17 @@ export default function InserterSidebar() { isPublishSidebarOpened, } = unlock( select( editorStore ) ); - const { getBlockRootClientId, getSectionRootClientId } = unlock( - select( blockEditorStore ) - ); + const { getSectionRootClientId } = unlock( select( blockEditorStore ) ); const { get } = select( preferencesStore ); const { getActiveComplementaryArea } = select( interfaceStore ); const getBlockSectionRootClientId = () => { const sectionRootClientId = getSectionRootClientId(); - if ( sectionRootClientId ) { - return sectionRootClientId; - } - - return getBlockRootClientId(); + // '' is equiavlent to calling getBlockRootClientId() with no arguments. + return sectionRootClientId ?? ''; }; + return { inserterSidebarToggleRef: getInserterSidebarToggleRef(), insertionPoint: getInsertionPoint(), From 837ab1d871a2ab10d37c689915a14630d90822ad Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 19 Sep 2024 09:38:55 +0100 Subject: [PATCH 7/9] Remove experiment conditional --- packages/editor/src/components/start-page-options/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index e9fe5933eeaba5..8873d46b91868c 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -199,11 +199,7 @@ export default function StartPageOptions() { __unstableSetEditorMode, ] ); - if ( - shouldEnableModal && - ! isClosed && - ! window.__experimentalEnableZoomOutExperiment - ) { + if ( shouldEnableModal && ! isClosed ) { return setIsClosed( true ) } />; } From 493071e91b7171e42d66e5285188dc54ca1d7325 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 19 Sep 2024 09:43:14 +0100 Subject: [PATCH 8/9] Remove unnecessary effect --- .../components/start-page-options/index.js | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index 8873d46b91868c..bd39cc7e389cdf 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -180,24 +180,15 @@ export default function StartPageOptions() { const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); const showInserterOnNewPage = - shouldEnableStartPage && - ! isClosed && - hasStarterPatterns && - window.__experimentalEnableZoomOutExperiment; + shouldEnableStartPage && ! isClosed && hasStarterPatterns; - useEffect( () => { - if ( showInserterOnNewPage ) { - setIsInserterOpened( { - tab: 'patterns', - category: 'core/content', - } ); - __unstableSetEditorMode( 'zoom-out' ); - } - }, [ - showInserterOnNewPage, - setIsInserterOpened, - __unstableSetEditorMode, - ] ); + if ( showInserterOnNewPage ) { + setIsInserterOpened( { + tab: 'patterns', + category: 'core/content', + } ); + __unstableSetEditorMode( 'zoom-out' ); + } if ( shouldEnableModal && ! isClosed ) { return setIsClosed( true ) } />; From a82a8885e2fc7f6b3131b8b92a46328f515ae4de Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 19 Sep 2024 09:46:17 +0100 Subject: [PATCH 9/9] Remove effect --- .../src/components/start-page-options/index.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index bd39cc7e389cdf..a8ec9020aec6cc 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -3,13 +3,13 @@ */ import { Modal } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useEffect, useMemo, useState } from '@wordpress/element'; +import { useMemo, useState } from '@wordpress/element'; import { store as blockEditorStore, __experimentalBlockPatternsList as BlockPatternsList, } from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; -import { useAsyncList } from '@wordpress/compose'; +import { useAsyncList, usePrevious } from '@wordpress/compose'; import { store as coreStore } from '@wordpress/core-data'; import { __unstableSerializeAndClean } from '@wordpress/blocks'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -161,10 +161,16 @@ export default function StartPageOptions() { [] ); - useEffect( () => { - // Should reset the start page state when navigating to a new page/post. + const previousPostType = usePrevious( postType ); + const previousPostId = usePrevious( postId ); + + // Reset the isClosed state when navigating to a new page/post. + if ( + ( previousPostType && previousPostType !== postType ) || + ( previousPostId && previousPostId !== postId ) + ) { setIsClosed( false ); - }, [ postType, postId ] ); + } // 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