From 11850051e973eb98f774ce86d9170867ca1bab02 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Fri, 20 Dec 2024 23:25:13 +0900 Subject: [PATCH] Replace Starter Content modal with inserter panel (#66836) * Inserter: Add 'Starter Content' category to the inserter * Add cat condition * Replace Starter Content modal with inserter panel * remove option condition * remove duplicated category * Attempt to fix media panel test * Attempt to fix style variations test * Attempt to fix recursive pattern test * Attempt to fix template resolution test * Attempt to fix new page test * Tweak template resolution test * Remove categoryObject * Fix aria-current on category tabs * Fix selected cat in patterns explorer * pass postId so that the inserter gets reopened when a new page is created using the command palette * Take control of zoom if a new page is created * Add post Id back --------- Co-authored-by: Andrei Draganescu Co-authored-by: Sarah Norris Co-authored-by: Ben Dwyer --- .../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 | 147 ++++-------------- test/e2e/specs/editor/blocks/image.spec.js | 3 - .../various/template-resolution.spec.js | 4 + .../block-style-variations.spec.js | 4 +- test/e2e/specs/site-editor/pages.spec.js | 3 + 12 files changed, 68 insertions(+), 151 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 93a03ee200497e..2bc41a7176954c 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,9 +14,8 @@ import { usePatternCategories } from '../block-patterns-tab/use-pattern-categori function PatternsExplorer( { initialCategory, rootClientId } ) { const [ searchValue, setSearchValue ] = useState( '' ); - const [ selectedCategory, setSelectedCategory ] = useState( - initialCategory?.name - ); + const [ selectedCategory, setSelectedCategory ] = + useState( initialCategory ); 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 45db4732aa9c6a..f250ed6f12ebad 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,7 +70,9 @@ 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 c6ce9ba97d2501..f9af2b6f8c42d2 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 explicity 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 2f70ea58f2532a..7f5f9ba3f65ad6 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -65,7 +65,9 @@ function CategoryTabs( { key={ category.name } tabId={ category.name } aria-current={ - category === selectedCategory ? 'true' : undefined + category.name === selectedCategory?.name + ? '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 adcea8b605aeb7..5c37822eba4b38 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -2,13 +2,14 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { useEffect, useRef } from '@wordpress/element'; +import { useEffect, useRef, useContext } 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. @@ -19,6 +20,7 @@ import { unlock } from '../lock-unlock'; * @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 ) ); @@ -37,6 +39,7 @@ 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 @@ -55,6 +58,11 @@ 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; @@ -71,5 +79,5 @@ export function useZoomOut( enabled = true ) { resetZoomLevel(); } }; - }, [ enabled, isZoomOut, resetZoomLevel, setZoomLevel ] ); + }, [ enabled, isZoomOut, postId, resetZoomLevel, setZoomLevel ] ); } diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index 72042bca03b70c..fba60405e7e4b5 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 && ( - - ) } + { - 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 [ isClosed, setIsClosed ] = useState( false ); - const shouldEnableModal = useSelect( ( select ) => { - const { isEditedPostDirty, isEditedPostEmpty, getCurrentPostType } = - select( editorStore ); + const { postId, shouldEnable } = useSelect( ( select ) => { + const { + isEditedPostDirty, + isEditedPostEmpty, + getCurrentPostId, + 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() - ); + return { + postId: getCurrentPostId(), + shouldEnable: + choosePatternModalEnabled && + ! preferencesModalActive && + ! isEditedPostDirty() && + isEditedPostEmpty() && + 'page' === getCurrentPostType(), + }; }, [] ); + const { setIsInserterOpened } = useDispatch( editorStore ); + + useEffect( () => { + if ( shouldEnable ) { + setIsInserterOpened( { + tab: 'patterns', + category: 'core/starter-content', + } ); + } + }, [ postId, shouldEnable, setIsInserterOpened ] ); - if ( ! shouldEnableModal || isClosed ) { - return null; - } - - return setIsClosed( true ) } />; + return null; } diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index d3cddd9c3a51cd..79cb01038da23c 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -424,9 +424,6 @@ test.describe( 'Image', () => { page, editor, } ) => { - // This is a temp workaround for dragging and dropping images from the inserter. - // This should be removed when we have the zoom out view for media categories. - await page.setViewportSize( { width: 1400, height: 800 } ); await editor.insertBlock( { name: 'core/image' } ); const imageBlock = editor.canvas.getByRole( 'document', { name: 'Block: Image', diff --git a/test/e2e/specs/editor/various/template-resolution.spec.js b/test/e2e/specs/editor/various/template-resolution.spec.js index 13503ddaf23d5b..82e336feff7334 100644 --- a/test/e2e/specs/editor/various/template-resolution.spec.js +++ b/test/e2e/specs/editor/various/template-resolution.spec.js @@ -55,12 +55,15 @@ 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' ); @@ -81,6 +84,7 @@ 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 03fc5398f4a0a5..1fa8972d34d6c8 100644 --- a/test/e2e/specs/site-editor/block-style-variations.spec.js +++ b/test/e2e/specs/site-editor/block-style-variations.spec.js @@ -317,9 +317,7 @@ async function draftNewPage( page ) { // Create a Group block with 2 nested Group blocks. async function addPageContent( editor, page ) { - const inserterButton = page.locator( - 'role=button[name="Block Inserter"i]' - ); + const inserterButton = page.locator( 'role=tab[name="Blocks"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 4817651bac8f9d..37b164e85a5973 100644 --- a/test/e2e/specs/site-editor/pages.spec.js +++ b/test/e2e/specs/site-editor/pages.spec.js @@ -272,6 +272,7 @@ 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' } ) @@ -294,6 +295,7 @@ 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' } ) @@ -308,6 +310,7 @@ 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' } )