From f5a83925d620f5fc9e5d46dbea2cc176e7b9ed1b Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Tue, 21 May 2024 20:14:29 +0300 Subject: [PATCH] [Site Editor]: Add create pattern button in patterns page (#60302) Co-authored-by: ntsekouras Co-authored-by: youknowriad Co-authored-by: jameskoster Co-authored-by: annezazu Co-authored-by: richtabor Co-authored-by: t-hamano Co-authored-by: jasmussen Co-authored-by: Mamaduka Co-authored-by: alexstine Co-authored-by: afercia Co-authored-by: joedolson Co-authored-by: pablohoneyhoney Co-authored-by: SaxonF --- .../src/components/add-new-pattern/index.js | 51 ++++++++------- .../create-template-part-modal/index.js | 12 +++- .../src/components/page-pages/index.js | 31 +++++----- .../src/components/page-patterns/header.js | 62 ++++++++++--------- .../index.js | 2 - .../src/components/create-pattern-modal.js | 21 +++++-- .../block-editor-keyboard-shortcuts.spec.js | 2 +- .../editor/various/inserting-blocks.spec.js | 4 +- .../editor/various/pattern-overrides.spec.js | 12 ++-- .../e2e/specs/editor/various/patterns.spec.js | 18 +++--- test/e2e/specs/site-editor/patterns.spec.js | 24 ++++--- .../site-editor-url-navigation.spec.js | 6 +- 12 files changed, 135 insertions(+), 110 deletions(-) diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js index 00cc086183e57..7ecbf640790a8 100644 --- a/packages/edit-site/src/components/add-new-pattern/index.js +++ b/packages/edit-site/src/components/add-new-pattern/index.js @@ -4,7 +4,7 @@ import { DropdownMenu } from '@wordpress/components'; import { useState, useRef } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; -import { plus, symbol, symbolFilled, upload } from '@wordpress/icons'; +import { symbol, symbolFilled, upload } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { @@ -18,7 +18,6 @@ import { store as coreStore } from '@wordpress/core-data'; * Internal dependencies */ import CreateTemplatePartModal from '../create-template-part-modal'; -import SidebarButton from '../sidebar-button'; import { unlock } from '../../lock-unlock'; import { PATTERN_TYPES, @@ -41,10 +40,17 @@ export default function AddNewPattern() { const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); const patternUploadInputRef = useRef(); - const isBlockBasedTheme = useSelect( - ( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme, - [] - ); + const { isBlockBasedTheme, addNewPatternLabel, addNewTemplatePartLabel } = + useSelect( ( select ) => { + const { getCurrentTheme, getPostType } = select( coreStore ); + return { + isBlockBasedTheme: getCurrentTheme()?.is_block_theme, + addNewPatternLabel: getPostType( PATTERN_TYPES.user )?.labels + ?.add_new_item, + addNewTemplatePartLabel: getPostType( TEMPLATE_PART_POST_TYPE ) + ?.labels?.add_new_item, + }; + }, [] ); function handleCreatePattern( { pattern } ) { setShowPatternModal( false ); @@ -72,19 +78,19 @@ export default function AddNewPattern() { setShowTemplatePartModal( false ); } - const controls = []; - - controls.push( { - icon: symbol, - onClick: () => setShowPatternModal( true ), - title: __( 'Create pattern' ), - } ); + const controls = [ + { + icon: symbol, + onClick: () => setShowPatternModal( true ), + title: addNewPatternLabel, + }, + ]; if ( isBlockBasedTheme ) { controls.push( { icon: symbolFilled, onClick: () => setShowTemplatePartModal( true ), - title: __( 'Create template part' ), + title: addNewTemplatePartLabel, } ); } @@ -99,14 +105,15 @@ export default function AddNewPattern() { const { categoryMap, findOrCreateTerm } = useAddPatternCategory(); return ( <> - + { addNewPatternLabel && ( + + ) } { showPatternModal && ( setShowPatternModal( false ) } diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/edit-site/src/components/create-template-part-modal/index.js index 376deae9d7321..a74225dd81404 100644 --- a/packages/edit-site/src/components/create-template-part-modal/index.js +++ b/packages/edit-site/src/components/create-template-part-modal/index.js @@ -39,12 +39,18 @@ import { } from '../../utils/template-part-create'; export default function CreateTemplatePartModal( { - modalTitle = __( 'Create template part' ), + modalTitle, ...restProps } ) { + const defaultModalTitle = useSelect( + ( select ) => + select( coreStore ).getPostType( TEMPLATE_PART_POST_TYPE )?.labels + ?.add_new_item, + [] + ); return ( @@ -56,7 +62,7 @@ export default function CreateTemplatePartModal( { export function CreateTemplatePartModalContents( { defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY, blocks = [], - confirmLabel = __( 'Create' ), + confirmLabel = __( 'Add' ), closeModal, onCreate, onError, diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 00d86ea942a37..81f34e9ba59a8 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -273,13 +273,13 @@ export default function PagePages() { [ totalItems, totalPages ] ); - const { frontPageId, postsPageId } = useSelect( ( select ) => { - const { getEntityRecord } = select( coreStore ); + const { frontPageId, postsPageId, addNewLabel } = useSelect( ( select ) => { + const { getEntityRecord, getPostType } = select( coreStore ); const siteSettings = getEntityRecord( 'root', 'site' ); - return { frontPageId: siteSettings?.page_on_front, postsPageId: siteSettings?.page_for_posts, + addNewLabel: getPostType( 'page' )?.labels?.add_new_item, }; } ); @@ -488,22 +488,23 @@ export default function PagePages() { closeModal(); }; - // TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`. return ( - - { showAddPageModal && ( - - ) } - + addNewLabel && ( + <> + + { showAddPageModal && ( + + ) } + + ) } > + { title } - { !! patternCategory?.id && ( - - { ( { onClose } ) => ( - - - - - ) } - - ) } + + + { !! patternCategory?.id && ( + + { ( { onClose } ) => ( + + + + + ) } + + ) } + { description ? ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js index a5f559f185064..e0d085812ba53 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js @@ -15,7 +15,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies */ -import AddNewPattern from '../add-new-pattern'; import SidebarNavigationScreen from '../sidebar-navigation-screen'; import CategoryItem from './category-item'; import { @@ -126,7 +125,6 @@ export default function SidebarNavigationScreenPatterns( { backPath } ) { 'Manage what patterns are available when editing the site.' ) } backPath={ backPath } - actions={ } content={ <> { isLoading && __( 'Loading items…' ) } diff --git a/packages/patterns/src/components/create-pattern-modal.js b/packages/patterns/src/components/create-pattern-modal.js index 9576e50309e23..16ae706bf18f1 100644 --- a/packages/patterns/src/components/create-pattern-modal.js +++ b/packages/patterns/src/components/create-pattern-modal.js @@ -11,13 +11,18 @@ import { } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { store as noticesStore } from '@wordpress/notices'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies */ -import { PATTERN_DEFAULT_CATEGORY, PATTERN_SYNC_TYPES } from '../constants'; +import { + PATTERN_DEFAULT_CATEGORY, + PATTERN_SYNC_TYPES, + PATTERN_TYPES, +} from '../constants'; import { store as patternsStore } from '../store'; import CategorySelector from './category-selector'; import { useAddPatternCategory } from '../private-hooks'; @@ -25,12 +30,18 @@ import { unlock } from '../lock-unlock'; export default function CreatePatternModal( { className = 'patterns-menu-items__convert-modal', - modalTitle = __( 'Create pattern' ), + modalTitle, ...restProps } ) { + const defaultModalTitle = useSelect( + ( select ) => + select( coreStore ).getPostType( PATTERN_TYPES.user )?.labels + ?.add_new_item, + [] + ); return ( @@ -40,7 +51,7 @@ export default function CreatePatternModal( { } export function CreatePatternModalContents( { - confirmLabel = __( 'Create' ), + confirmLabel = __( 'Add' ), defaultCategories = [], content, onClose, diff --git a/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js b/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js index 1962e2bc4202a..967baccfcbe4e 100644 --- a/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js +++ b/test/e2e/specs/editor/various/block-editor-keyboard-shortcuts.spec.js @@ -192,7 +192,7 @@ test.describe( 'Block editor keyboard shortcuts', () => { .getByRole( 'menuitem', { name: 'Create pattern' } ) .click(); await page - .getByRole( 'dialog', { name: 'Create pattern' } ) + .getByRole( 'dialog', { name: 'add new pattern' } ) .getByRole( 'textbox', { name: 'Name' } ) .fill( 'hi' ); diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js index b3ff3ae1b72e5..1a443152800de 100644 --- a/test/e2e/specs/editor/various/inserting-blocks.spec.js +++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js @@ -265,7 +265,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { .click(); await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click(); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -274,7 +274,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => { .getByRole( 'checkbox', { name: 'Synced' } ) .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); const patternBlock = page.getByRole( 'document', { name: 'Block: Pattern', diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js index f9a4505cd2252..706ddabd5a35d 100644 --- a/test/e2e/specs/editor/various/pattern-overrides.spec.js +++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js @@ -38,17 +38,17 @@ test.describe( 'Pattern Overrides', () => { await admin.visitSiteEditor( { postType: 'wp_block' } ); await page - .getByRole( 'region', { name: 'Navigation' } ) - .getByRole( 'button', { name: 'Create pattern' } ) + .getByRole( 'region', { name: 'Patterns content' } ) + .getByRole( 'button', { name: 'add new pattern' } ) .click(); await page - .getByRole( 'menu', { name: 'Create pattern' } ) - .getByRole( 'menuitem', { name: 'Create pattern' } ) + .getByRole( 'menu', { name: 'add new pattern' } ) + .getByRole( 'menuitem', { name: 'add new pattern' } ) .click(); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -57,7 +57,7 @@ test.describe( 'Pattern Overrides', () => { .getByRole( 'checkbox', { name: 'Synced' } ) .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); await editor.canvas diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js index 48eaf9e08c9b9..77f97ee3004a9 100644 --- a/test/e2e/specs/editor/various/patterns.spec.js +++ b/test/e2e/specs/editor/various/patterns.spec.js @@ -37,7 +37,7 @@ test.describe( 'Unsynced pattern', () => { await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click(); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -136,7 +136,7 @@ test.describe( 'Synced pattern', () => { await page.getByRole( 'menuitem', { name: 'Create pattern' } ).click(); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -150,7 +150,7 @@ test.describe( 'Synced pattern', () => { .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); // Check the pattern is focused. @@ -376,7 +376,7 @@ test.describe( 'Synced pattern', () => { await editor.clickBlockOptionsMenuItem( 'Create pattern' ); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -385,7 +385,7 @@ test.describe( 'Synced pattern', () => { .getByRole( 'checkbox', { name: 'Synced' } ) .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); await admin.createNewPost(); @@ -419,7 +419,7 @@ test.describe( 'Synced pattern', () => { await editor.clickBlockOptionsMenuItem( 'Create pattern' ); const createPatternDialog = editor.page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -428,7 +428,7 @@ test.describe( 'Synced pattern', () => { .getByRole( 'checkbox', { name: 'Synced' } ) .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); // Wait until the pattern is created. @@ -603,7 +603,7 @@ test.describe( 'Synced pattern', () => { await editor.clickBlockOptionsMenuItem( 'Create pattern' ); const createPatternDialog = editor.page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) @@ -612,7 +612,7 @@ test.describe( 'Synced pattern', () => { .getByRole( 'checkbox', { name: 'Synced' } ) .setChecked( true ); await createPatternDialog - .getByRole( 'button', { name: 'Create' } ) + .getByRole( 'button', { name: 'Add' } ) .click(); await expect( diff --git a/test/e2e/specs/site-editor/patterns.spec.js b/test/e2e/specs/site-editor/patterns.spec.js index fecca28b1f390..0b0fada39c262 100644 --- a/test/e2e/specs/site-editor/patterns.spec.js +++ b/test/e2e/specs/site-editor/patterns.spec.js @@ -42,24 +42,22 @@ test.describe( 'Patterns', () => { ).toBeVisible(); await expect( patterns.content ).toContainText( 'No results' ); - await patterns.navigation - .getByRole( 'button', { name: 'Create pattern' } ) + await patterns.content + .getByRole( 'button', { name: 'add new pattern' } ) .click(); - const createPatternMenu = page.getByRole( 'menu', { - name: 'Create pattern', - } ); - await expect( - createPatternMenu.getByRole( 'menuitem', { - name: 'Create pattern', + const addNewMenuItem = page + .getByRole( 'menu', { + name: 'add new pattern', } ) - ).toBeFocused(); - await createPatternMenu - .getByRole( 'menuitem', { name: 'Create pattern' } ) - .click(); + .getByRole( 'menuitem', { + name: 'add new pattern', + } ); + await expect( addNewMenuItem ).toBeFocused(); + await addNewMenuItem.click(); const createPatternDialog = page.getByRole( 'dialog', { - name: 'Create pattern', + name: 'add new pattern', } ); await createPatternDialog .getByRole( 'textbox', { name: 'Name' } ) diff --git a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js index 7f55359547d6e..337c26315c8a3 100644 --- a/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js +++ b/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js @@ -54,10 +54,10 @@ test.describe( 'Site editor url navigation', () => { } ) => { await admin.visitSiteEditor(); await page.click( 'role=button[name="Patterns"i]' ); - await page.click( 'role=button[name="Create pattern"i]' ); + await page.click( 'role=button[name="add new pattern"i]' ); await page - .getByRole( 'menu', { name: 'Create pattern' } ) - .getByRole( 'menuitem', { name: 'Create template part' } ) + .getByRole( 'menu', { name: 'add new pattern' } ) + .getByRole( 'menuitem', { name: 'add new template part' } ) .click(); // Fill in a name in the dialog that pops up. await page.type( 'role=dialog >> role=textbox[name="Name"i]', 'Demo' );