From 2c85d55c7191ee8adc2500da5fb3905f62adbd6a Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 11 May 2021 15:09:14 -0400 Subject: [PATCH 1/6] use names and icons for the variation --- .../template-part/edit/placeholder/index.js | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index 8de0d6e731fa6..db1e7e3535124 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -3,11 +3,11 @@ */ import { __ } from '@wordpress/i18n'; import { useCallback, useState } from '@wordpress/element'; -import { useDispatch } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { Placeholder, Dropdown, Button } from '@wordpress/components'; -import { blockDefault } from '@wordpress/icons'; import { serialize } from '@wordpress/blocks'; import { store as coreStore } from '@wordpress/core-data'; +import { store as editorStore } from '@wordpress/editor'; /** * Internal dependencies @@ -28,6 +28,19 @@ export default function TemplatePartPlaceholder( { const { saveEntityRecord } = useDispatch( coreStore ); const [ step, setStep ] = useState( PLACEHOLDER_STEPS.initial ); + const { areasByName } = useSelect( ( select ) => { + const definedAreas = select( + editorStore + ).__experimentalGetDefaultTemplatePartAreas(); + const _areasByName = {}; + definedAreas.forEach( ( item ) => { + _areasByName[ item.area ] = item; + } ); + return { + areasByName: _areasByName, + }; + } ); + const onCreate = useCallback( async ( startingBlocks = [] ) => { const title = __( 'Untitled Template Part' ); @@ -61,8 +74,15 @@ export default function TemplatePartPlaceholder( { <> { step === PLACEHOLDER_STEPS.initial && ( Date: Thu, 13 May 2021 10:59:24 -0400 Subject: [PATCH 2/6] update copy and button labels --- .../template-part/edit/placeholder/index.js | 45 ++++++++++--------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index db1e7e3535124..fda0c3c4dbc61 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { useCallback, useState } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { Placeholder, Dropdown, Button } from '@wordpress/components'; @@ -15,6 +15,11 @@ import { store as editorStore } from '@wordpress/editor'; import TemplatePartSelection from '../selection'; import PatternsSetup from './patterns-setup'; +/** + * External dependencies + */ +import { find } from 'lodash'; + const PLACEHOLDER_STEPS = { initial: 1, patterns: 2, @@ -28,18 +33,19 @@ export default function TemplatePartPlaceholder( { const { saveEntityRecord } = useDispatch( coreStore ); const [ step, setStep ] = useState( PLACEHOLDER_STEPS.initial ); - const { areasByName } = useSelect( ( select ) => { + const { areaIcon, areaLabel } = useSelect( ( select ) => { const definedAreas = select( editorStore ).__experimentalGetDefaultTemplatePartAreas(); - const _areasByName = {}; - definedAreas.forEach( ( item ) => { - _areasByName[ item.area ] = item; - } ); + + const selectedArea = find( definedAreas, { area } ); + const defaultArea = find( definedAreas, { area: 'uncategorized' } ); + return { - areasByName: _areasByName, + areaIcon: selectedArea?.icon || defaultArea?.icon, + areaLabel: selectedArea?.label || __( 'Template Part' ), }; - } ); + }, [] ); const onCreate = useCallback( async ( startingBlocks = [] ) => { @@ -74,17 +80,12 @@ export default function TemplatePartPlaceholder( { <> { step === PLACEHOLDER_STEPS.initial && ( - { __( 'New template part' ) } + { sprintf( + // Translators: %s as template part area title ("Header", "Footer", etc.). + 'New %s', + areaLabel + ) } ) } From d78182fa6a1c84a96aacd86bf8470320e270e7a9 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 13 May 2021 13:50:21 -0400 Subject: [PATCH 3/6] add area to dep array --- .../template-part/edit/placeholder/index.js | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index fda0c3c4dbc61..8a688ad815abd 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import { find } from 'lodash'; + /** * WordPress dependencies */ @@ -15,11 +20,6 @@ import { store as editorStore } from '@wordpress/editor'; import TemplatePartSelection from '../selection'; import PatternsSetup from './patterns-setup'; -/** - * External dependencies - */ -import { find } from 'lodash'; - const PLACEHOLDER_STEPS = { initial: 1, patterns: 2, @@ -33,19 +33,22 @@ export default function TemplatePartPlaceholder( { const { saveEntityRecord } = useDispatch( coreStore ); const [ step, setStep ] = useState( PLACEHOLDER_STEPS.initial ); - const { areaIcon, areaLabel } = useSelect( ( select ) => { - const definedAreas = select( - editorStore - ).__experimentalGetDefaultTemplatePartAreas(); + const { areaIcon, areaLabel } = useSelect( + ( select ) => { + const definedAreas = select( + editorStore + ).__experimentalGetDefaultTemplatePartAreas(); - const selectedArea = find( definedAreas, { area } ); - const defaultArea = find( definedAreas, { area: 'uncategorized' } ); + const selectedArea = find( definedAreas, { area } ); + const defaultArea = find( definedAreas, { area: 'uncategorized' } ); - return { - areaIcon: selectedArea?.icon || defaultArea?.icon, - areaLabel: selectedArea?.label || __( 'Template Part' ), - }; - }, [] ); + return { + areaIcon: selectedArea?.icon || defaultArea?.icon, + areaLabel: selectedArea?.label || __( 'Template Part' ), + }; + }, + [ area ] + ); const onCreate = useCallback( async ( startingBlocks = [] ) => { From d9038ad74c24448f0dc80a4482fabd2b00afd2da Mon Sep 17 00:00:00 2001 From: James Koster Date: Fri, 14 May 2021 09:32:31 +0100 Subject: [PATCH 4/6] Copy --- .../block-library/src/template-part/edit/placeholder/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index 8a688ad815abd..560479772cb71 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -87,7 +87,7 @@ export default function TemplatePartPlaceholder( { label={ areaLabel } instructions={ sprintf( // Translators: %s as template part area title ("Header", "Footer", etc.). - 'Create a new %s or pick an existing one from the list.', + 'Choose an existing %s or create a new one.', areaLabel ) } > From 8b84fcdd5ea81ff0828815e9dedb9ad794c820d7 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 14 May 2021 08:37:30 -0400 Subject: [PATCH 5/6] update casing in e2e test selectors --- .../e2e-tests/specs/experiments/multi-entity-editing.test.js | 2 +- .../e2e-tests/specs/experiments/multi-entity-saving.test.js | 2 +- packages/e2e-tests/specs/experiments/template-part.test.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js index 0538e5e4b54a5..a84cc5a4f53df 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js @@ -31,7 +31,7 @@ const createTemplatePart = async ( // Create new template part. await insertBlock( 'Template Part' ); const [ createNewButton ] = await page.$x( - '//button[contains(text(), "New template part")]' + '//button[contains(text(), "New Template Part")]' ); await createNewButton.click(); await page.waitForSelector( diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js index dad2b6de1b124..c2a6ba1aa0787 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -27,7 +27,7 @@ describe( 'Multi-entity save flow', () => { const closePanelButtonSelector = '.editor-post-publish-panel__header-cancel-button button'; const createNewButtonSelector = - '//button[contains(text(), "New template part")]'; + '//button[contains(text(), "New Template Part")]'; // Reusable assertions across Post/Site editors. const assertAllBoxesChecked = async () => { diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index ea6a3fa74caf3..7d80049359f0f 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -268,7 +268,7 @@ describe( 'Template Part', () => { const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`; const testContentSelector = `//p[contains(., "${ testContent }")]`; const createNewButtonSelector = - '//button[contains(text(), "New template part")]'; + '//button[contains(text(), "New Template Part")]'; const chooseExistingButtonSelector = '//button[contains(text(), "Choose existing")]'; From 822c13dcc3f410016bd95fc5c099c83bcdcbff49 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 14 May 2021 09:53:53 -0400 Subject: [PATCH 6/6] update casing --- .../block-library/src/template-part/edit/placeholder/index.js | 4 ++-- .../e2e-tests/specs/experiments/multi-entity-editing.test.js | 2 +- .../e2e-tests/specs/experiments/multi-entity-saving.test.js | 2 +- packages/e2e-tests/specs/experiments/template-part.test.js | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index 560479772cb71..b19fe0f74ea32 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -88,7 +88,7 @@ export default function TemplatePartPlaceholder( { instructions={ sprintf( // Translators: %s as template part area title ("Header", "Footer", etc.). 'Choose an existing %s or create a new one.', - areaLabel + areaLabel.toLowerCase() ) } > diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js index a84cc5a4f53df..0538e5e4b54a5 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js @@ -31,7 +31,7 @@ const createTemplatePart = async ( // Create new template part. await insertBlock( 'Template Part' ); const [ createNewButton ] = await page.$x( - '//button[contains(text(), "New Template Part")]' + '//button[contains(text(), "New template part")]' ); await createNewButton.click(); await page.waitForSelector( diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js index c2a6ba1aa0787..dad2b6de1b124 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -27,7 +27,7 @@ describe( 'Multi-entity save flow', () => { const closePanelButtonSelector = '.editor-post-publish-panel__header-cancel-button button'; const createNewButtonSelector = - '//button[contains(text(), "New Template Part")]'; + '//button[contains(text(), "New template part")]'; // Reusable assertions across Post/Site editors. const assertAllBoxesChecked = async () => { diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index 7d80049359f0f..ea6a3fa74caf3 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -268,7 +268,7 @@ describe( 'Template Part', () => { const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`; const testContentSelector = `//p[contains(., "${ testContent }")]`; const createNewButtonSelector = - '//button[contains(text(), "New Template Part")]'; + '//button[contains(text(), "New template part")]'; const chooseExistingButtonSelector = '//button[contains(text(), "Choose existing")]';