From 1991eef91f3b72b3c97e06c6d14be61629146fa2 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 7 Nov 2024 13:24:25 +0100 Subject: [PATCH 01/17] Inserter: Add 'Starter Content' category to the inserter --- .../inserter/block-patterns-tab/use-pattern-categories.js | 1 + 1 file changed, 1 insertion(+) 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 2adc6b48579dd..61d82e946daa0 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 @@ -68,6 +68,7 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) { label: _x( 'Uncategorized' ), } ); } + categories.unshift( starterPatternsCategory ); if ( filteredPatterns.some( ( pattern ) => pattern.blockTypes?.includes( 'core/post-content' ) From 45d6b8913baf52eee471bb7751f6efae2507db75 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 7 Nov 2024 13:35:30 +0100 Subject: [PATCH 02/17] Add cat condition --- .../inserter/block-patterns-tab/use-pattern-categories.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) 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 61d82e946daa0..73f6560cd1062 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 @@ -68,7 +68,13 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) { label: _x( 'Uncategorized' ), } ); } - categories.unshift( starterPatternsCategory ); + if ( + filteredPatterns.some( ( pattern ) => + pattern.blockTypes?.includes( 'core/post-content' ) + ) + ) { + categories.unshift( starterPatternsCategory ); + } if ( filteredPatterns.some( ( pattern ) => pattern.blockTypes?.includes( 'core/post-content' ) From 6ac1ca79dd41016acacec6a0e25eeffd7d840533 Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 7 Nov 2024 19:12:23 +0100 Subject: [PATCH 03/17] Replace Starter Content modal with inserter panel --- .../inserter/block-patterns-explorer/index.js | 5 +- .../inserter/block-patterns-tab/index.js | 4 +- .../pattern-category-previews.js | 28 ++-- .../inserter/category-tabs/index.js | 18 +-- .../components/start-page-options/index.js | 125 ++---------------- 5 files changed, 41 insertions(+), 139 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 93a03ee200497..2bc41a7176954 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 45db4732aa9c6..46e5bbf9c5936 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 c6ce9ba97d250..4dcb66fb08843 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 @@ -46,7 +46,7 @@ export function PatternCategoryPreviews( { const [ allPatterns, , onClickPattern ] = usePatternsState( onInsert, rootClientId, - category?.name + category ); const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' ); const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' ); @@ -69,25 +69,25 @@ export function PatternCategoryPreviews( { return false; } - if ( category.name === allPatternsCategory.name ) { + if ( category === allPatternsCategory.name ) { return true; } if ( - category.name === myPatternsCategory.name && + category === myPatternsCategory.name && pattern.type === INSERTER_PATTERN_TYPES.user ) { return true; } if ( - category.name === starterPatternsCategory.name && + category === starterPatternsCategory.name && pattern.blockTypes?.includes( 'core/post-content' ) ) { return true; } - if ( category.name === 'uncategorized' ) { + if ( category === 'uncategorized' ) { // The uncategorized category should show all the patterns without any category... if ( ! pattern.categories ) { return true; @@ -99,20 +99,24 @@ export function PatternCategoryPreviews( { ); } - return pattern.categories?.includes( category.name ); + return pattern.categories?.includes( category ); } ), [ allPatterns, availableCategories, - category.name, + category, patternSourceFilter, patternSyncFilter, ] ); + const categoryObject = availableCategories.find( + ( { name } ) => name === category + ); + const pagingProps = usePatternsPaging( currentCategoryPatterns, - category, + categoryObject, scrollContainerRef ); const { changePage } = pagingProps; @@ -149,7 +153,7 @@ export function PatternCategoryPreviews( { level={ 4 } as="div" > - { category.label } + { categoryObject.label } { ! currentCategoryPatterns.length && ( @@ -184,9 +188,9 @@ export function PatternCategoryPreviews( { blockPatterns={ pagingProps.categoryPatterns } onClickPattern={ onClickPattern } onHover={ onHover } - label={ category.label } + label={ categoryObject.label } orientation="vertical" - category={ category.name } + category={ categoryObject.name } isDraggable showTitlesAsTooltip={ showTitlesAsTooltip } patternFilter={ 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 ff0a130f1a827..18a480d6973d6 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -32,30 +32,22 @@ function CategoryTabs( { const previousSelectedCategory = usePrevious( selectedCategory ); - const selectedTabId = selectedCategory ? selectedCategory.name : null; const [ activeTabId, setActiveId ] = useState(); const firstTabId = categories?.[ 0 ]?.name; // If there is no active tab, make the first tab the active tab, so that // when focus is moved to the tablist, the first tab will be focused // despite not being selected - if ( selectedTabId === null && ! activeTabId && firstTabId ) { + if ( selectedCategory === null && ! activeTabId && firstTabId ) { setActiveId( firstTabId ); } return ( { - // Pass the full category object - onSelectCategory( - categories.find( - ( category ) => category.name === categoryId - ) - ); - } } + onSelect={ onSelectCategory } activeTabId={ activeTabId } onActiveTabIdChange={ setActiveId } > @@ -66,7 +58,9 @@ function CategoryTabs( { tabId={ category.name } aria-label={ category.label } aria-current={ - category === selectedCategory ? 'true' : undefined + category.name === selectedCategory + ? 'true' + : undefined } > { category.label } diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index 783a4a224fa37..abec9ef3fe0ed 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -1,16 +1,8 @@ /** * 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 { useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -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'; @@ -18,104 +10,9 @@ 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, - // 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 { 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 shouldEnable = useSelect( ( select ) => { const { isEditedPostDirty, isEditedPostEmpty, getCurrentPostType } = select( editorStore ); const preferencesModalActive = @@ -129,13 +26,19 @@ export default function StartPageOptions() { ! preferencesModalActive && ! isEditedPostDirty() && isEditedPostEmpty() && - TEMPLATE_POST_TYPE !== getCurrentPostType() + 'page' === getCurrentPostType() ); }, [] ); + const { setIsInserterOpened } = useDispatch( editorStore ); + + useEffect( () => { + if ( shouldEnable ) { + setIsInserterOpened( { + tab: 'patterns', + category: 'core/starter-content', + } ); + } + }, [ shouldEnable, setIsInserterOpened ] ); - if ( ! shouldEnableModal || isClosed ) { - return null; - } - - return setIsClosed( true ) } />; + return null; } From 9787d50b1015f55c2007caf22e24a602a5dd6083 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 11 Nov 2024 10:55:10 +0100 Subject: [PATCH 04/17] remove option condition --- .../src/components/preferences-modal/index.js | 21 +++++++------------ 1 file changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/editor/src/components/preferences-modal/index.js b/packages/editor/src/components/preferences-modal/index.js index 72042bca03b70..fba60405e7e4b 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 && ( - - ) } + Date: Tue, 26 Nov 2024 22:43:52 +0200 Subject: [PATCH 05/17] remove duplicated category --- .../inserter/block-patterns-tab/use-pattern-categories.js | 7 ------- 1 file changed, 7 deletions(-) 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 73f6560cd1062..2adc6b48579dd 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 @@ -75,13 +75,6 @@ export function usePatternCategories( rootClientId, sourceFilter = 'all' ) { ) { categories.unshift( starterPatternsCategory ); } - if ( - filteredPatterns.some( ( pattern ) => - pattern.blockTypes?.includes( 'core/post-content' ) - ) - ) { - categories.unshift( starterPatternsCategory ); - } if ( filteredPatterns.some( ( pattern ) => pattern.type === INSERTER_PATTERN_TYPES.user From 07c5db94a42579f0a103acb05ff1f8bfd245fb97 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Tue, 17 Dec 2024 19:58:53 +0000 Subject: [PATCH 06/17] Attempt to fix media panel test --- .../src/components/inserter/category-tabs/index.js | 14 +++++++++++--- test/e2e/specs/editor/blocks/image.spec.js | 3 --- 2 files changed, 11 insertions(+), 6 deletions(-) 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 18a480d6973d6..0933cf12879d5 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -32,22 +32,30 @@ function CategoryTabs( { const previousSelectedCategory = usePrevious( selectedCategory ); + const selectedTabId = selectedCategory ? selectedCategory.name : null; const [ activeTabId, setActiveId ] = useState(); const firstTabId = categories?.[ 0 ]?.name; // If there is no active tab, make the first tab the active tab, so that // when focus is moved to the tablist, the first tab will be focused // despite not being selected - if ( selectedCategory === null && ! activeTabId && firstTabId ) { + if ( selectedTabId === null && ! activeTabId && firstTabId ) { setActiveId( firstTabId ); } return ( { + // Pass the full category object + onSelectCategory( + categories.find( + ( category ) => category.name === categoryId + ) + ); + } } activeTabId={ activeTabId } onActiveTabIdChange={ setActiveId } > diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index d3cddd9c3a51c..79cb01038da23 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', From 881d7b1110e03d46210a7ed79c0c8d1a40358e96 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Tue, 17 Dec 2024 21:30:59 +0000 Subject: [PATCH 07/17] Attempt to fix style variations test --- .../block-patterns-tab/pattern-category-previews.js | 10 +++++----- .../inserter/block-patterns-tab/patterns-filter.js | 4 ++-- .../specs/site-editor/block-style-variations.spec.js | 4 +--- 3 files changed, 8 insertions(+), 10 deletions(-) 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 4dcb66fb08843..49f71baeef7ef 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 === allPatternsCategory.name ) { + if ( category === allPatternsCategory?.name ) { return true; } if ( - category === myPatternsCategory.name && + category === myPatternsCategory?.name && pattern.type === INSERTER_PATTERN_TYPES.user ) { return true; } if ( - category === starterPatternsCategory.name && + category === starterPatternsCategory?.name && pattern.blockTypes?.includes( 'core/post-content' ) ) { return true; @@ -111,7 +111,7 @@ export function PatternCategoryPreviews( { ); const categoryObject = availableCategories.find( - ( { name } ) => name === category + ( { name } ) => name === category.name ); const pagingProps = usePatternsPaging( @@ -153,7 +153,7 @@ export function PatternCategoryPreviews( { level={ 4 } as="div" > - { categoryObject.label } + { categoryObject?.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/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js index 03fc5398f4a0a..1fa8972d34d6c 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( From c6c423e86e156c41b4b8bc5792c54031d8f0dfe4 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Wed, 18 Dec 2024 10:50:52 +0000 Subject: [PATCH 08/17] Attempt to fix recursive pattern test --- .../pattern-category-previews.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 49f71baeef7ef..c9396092cd1a1 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 @@ -46,7 +46,7 @@ export function PatternCategoryPreviews( { const [ allPatterns, , onClickPattern ] = usePatternsState( onInsert, rootClientId, - category + category?.name ); const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' ); const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' ); @@ -69,25 +69,25 @@ export function PatternCategoryPreviews( { return false; } - if ( category === allPatternsCategory?.name ) { + if ( category.name === allPatternsCategory?.name ) { return true; } if ( - category === myPatternsCategory?.name && + category.name === myPatternsCategory?.name && pattern.type === INSERTER_PATTERN_TYPES.user ) { return true; } if ( - category === starterPatternsCategory?.name && + category.name === starterPatternsCategory?.name && pattern.blockTypes?.includes( 'core/post-content' ) ) { return true; } - if ( category === 'uncategorized' ) { + if ( category.name === 'uncategorized' ) { // The uncategorized category should show all the patterns without any category... if ( ! pattern.categories ) { return true; @@ -99,12 +99,12 @@ export function PatternCategoryPreviews( { ); } - return pattern.categories?.includes( category ); + return pattern.categories?.includes( category.name ); } ), [ allPatterns, availableCategories, - category, + category.name, patternSourceFilter, patternSyncFilter, ] From 2f958e0de80b2ff45b0ca6cdf861ab77a9de2c66 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Wed, 18 Dec 2024 11:14:30 +0000 Subject: [PATCH 09/17] Attempt to fix template resolution test --- test/e2e/specs/editor/various/template-resolution.spec.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/e2e/specs/editor/various/template-resolution.spec.js b/test/e2e/specs/editor/various/template-resolution.spec.js index 13503ddaf23d5..10aca76a174ef 100644 --- a/test/e2e/specs/editor/various/template-resolution.spec.js +++ b/test/e2e/specs/editor/various/template-resolution.spec.js @@ -55,12 +55,14 @@ 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 expect( page.getByRole( 'button', { name: 'Template options' } ) ).toHaveText( 'Index' ); @@ -81,6 +83,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' } ) From 4f9af6cc67f4006fdbc1115a8c6a1d2f677b52ad Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Wed, 18 Dec 2024 12:30:50 +0000 Subject: [PATCH 10/17] Attempt to fix new page test --- test/e2e/specs/site-editor/pages.spec.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js index 4817651bac8f9..37b164e85a597 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' } ) From 52b784961f81db3a1b7759fdcc0eb14c097d8f92 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Wed, 18 Dec 2024 12:33:13 +0000 Subject: [PATCH 11/17] Tweak template resolution test --- test/e2e/specs/editor/various/template-resolution.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/e2e/specs/editor/various/template-resolution.spec.js b/test/e2e/specs/editor/various/template-resolution.spec.js index 10aca76a174ef..82e336feff733 100644 --- a/test/e2e/specs/editor/various/template-resolution.spec.js +++ b/test/e2e/specs/editor/various/template-resolution.spec.js @@ -63,6 +63,7 @@ test.describe( 'Template resolution', () => { 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' ); From 45ec9af47e86dd42a14fbe21d09093c5bb15f554 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Wed, 18 Dec 2024 13:21:34 +0000 Subject: [PATCH 12/17] Remove categoryObject --- .../pattern-category-previews.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) 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 c9396092cd1a1..f9af2b6f8c42d 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 @@ -110,13 +110,9 @@ export function PatternCategoryPreviews( { ] ); - const categoryObject = availableCategories.find( - ( { name } ) => name === category.name - ); - const pagingProps = usePatternsPaging( currentCategoryPatterns, - categoryObject, + category, scrollContainerRef ); const { changePage } = pagingProps; @@ -153,7 +149,7 @@ export function PatternCategoryPreviews( { level={ 4 } as="div" > - { categoryObject?.label } + { category?.label } { ! currentCategoryPatterns.length && ( @@ -188,9 +184,9 @@ export function PatternCategoryPreviews( { blockPatterns={ pagingProps.categoryPatterns } onClickPattern={ onClickPattern } onHover={ onHover } - label={ categoryObject.label } + label={ category.label } orientation="vertical" - category={ categoryObject.name } + category={ category.name } isDraggable showTitlesAsTooltip={ showTitlesAsTooltip } patternFilter={ patternSourceFilter } From bfae8e39c2291bd16765f1feb31b3f7db4a268e1 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Wed, 18 Dec 2024 13:26:56 +0000 Subject: [PATCH 13/17] Fix aria-current on category tabs --- .../block-editor/src/components/inserter/category-tabs/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 0933cf12879d5..3b1b65a32a2a1 100644 --- a/packages/block-editor/src/components/inserter/category-tabs/index.js +++ b/packages/block-editor/src/components/inserter/category-tabs/index.js @@ -66,7 +66,7 @@ function CategoryTabs( { tabId={ category.name } aria-label={ category.label } aria-current={ - category.name === selectedCategory + category.name === selectedCategory?.name ? 'true' : undefined } From 2ca523465fda3ab82fe09ed0c880a08debce5784 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Wed, 18 Dec 2024 13:34:15 +0000 Subject: [PATCH 14/17] Fix selected cat in patterns explorer --- .../src/components/inserter/block-patterns-tab/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 46e5bbf9c5936..f250ed6f12eba 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 @@ -71,7 +71,7 @@ function BlockPatternsTab( { { showPatternsExplorer && ( setShowPatternsExplorer( false ) } From 8e8210f258221a69a40a2b76cb862d05ec56aabd Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 18 Dec 2024 16:32:26 +0000 Subject: [PATCH 15/17] pass postId so that the inserter gets reopened when a new page is created using the command palette --- .../components/start-page-options/index.js | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index abec9ef3fe0ed..5ab71bf1ea2bf 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -12,22 +12,28 @@ import { store as interfaceStore } from '@wordpress/interface'; import { store as editorStore } from '../../store'; export default function StartPageOptions() { - const shouldEnable = 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() && - 'page' === getCurrentPostType() - ); + return { + shouldEnable: + choosePatternModalEnabled && + ! preferencesModalActive && + ! isEditedPostDirty() && + isEditedPostEmpty() && + 'page' === getCurrentPostType(), + postId: getCurrentPostId(), + }; }, [] ); const { setIsInserterOpened } = useDispatch( editorStore ); @@ -38,7 +44,7 @@ export default function StartPageOptions() { category: 'core/starter-content', } ); } - }, [ shouldEnable, setIsInserterOpened ] ); + }, [ postId, shouldEnable, setIsInserterOpened ] ); return null; } From 0c888af03945585400220a9afd219473d13d8a96 Mon Sep 17 00:00:00 2001 From: Sarah Norris Date: Thu, 19 Dec 2024 15:27:40 +0000 Subject: [PATCH 16/17] Take control of zoom if a new page is created --- .../block-editor/src/hooks/use-zoom-out.js | 12 ++++++-- .../components/start-page-options/index.js | 28 ++++++++----------- 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index adcea8b605aeb..5c37822eba4b3 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/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index 5ab71bf1ea2bf..abec9ef3fe0ed 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -12,28 +12,22 @@ 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 shouldEnable = useSelect( ( select ) => { + const { isEditedPostDirty, isEditedPostEmpty, getCurrentPostType } = + select( editorStore ); const preferencesModalActive = select( interfaceStore ).isModalActive( 'editor/preferences' ); const choosePatternModalEnabled = select( preferencesStore ).get( 'core', 'enableChoosePatternModal' ); - return { - shouldEnable: - choosePatternModalEnabled && - ! preferencesModalActive && - ! isEditedPostDirty() && - isEditedPostEmpty() && - 'page' === getCurrentPostType(), - postId: getCurrentPostId(), - }; + return ( + choosePatternModalEnabled && + ! preferencesModalActive && + ! isEditedPostDirty() && + isEditedPostEmpty() && + 'page' === getCurrentPostType() + ); }, [] ); const { setIsInserterOpened } = useDispatch( editorStore ); @@ -44,7 +38,7 @@ export default function StartPageOptions() { category: 'core/starter-content', } ); } - }, [ postId, shouldEnable, setIsInserterOpened ] ); + }, [ shouldEnable, setIsInserterOpened ] ); return null; } From 36a302d9deece18796ffd57e0517255e32f3f0d0 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 20 Dec 2024 13:24:05 +0000 Subject: [PATCH 17/17] Add post Id back --- .../components/start-page-options/index.js | 28 +++++++++++-------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/editor/src/components/start-page-options/index.js b/packages/editor/src/components/start-page-options/index.js index abec9ef3fe0ed..d7874000ffc42 100644 --- a/packages/editor/src/components/start-page-options/index.js +++ b/packages/editor/src/components/start-page-options/index.js @@ -12,22 +12,28 @@ import { store as interfaceStore } from '@wordpress/interface'; import { store as editorStore } from '../../store'; export default function StartPageOptions() { - const shouldEnable = 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() && - 'page' === getCurrentPostType() - ); + return { + postId: getCurrentPostId(), + shouldEnable: + choosePatternModalEnabled && + ! preferencesModalActive && + ! isEditedPostDirty() && + isEditedPostEmpty() && + 'page' === getCurrentPostType(), + }; }, [] ); const { setIsInserterOpened } = useDispatch( editorStore ); @@ -38,7 +44,7 @@ export default function StartPageOptions() { category: 'core/starter-content', } ); } - }, [ shouldEnable, setIsInserterOpened ] ); + }, [ postId, shouldEnable, setIsInserterOpened ] ); return null; }