From 79476e10df9a17cad689be8c8fbc9d8d1c21d948 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 26 Jul 2021 11:51:25 -0400 Subject: [PATCH 1/7] initial idea --- .../template-part/edit/placeholder/index.js | 6 +- .../edit/placeholder/patterns-setup.js | 100 +++++++++++++++--- 2 files changed, 89 insertions(+), 17 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 2ea37ac11fdac..3c53a093f334f 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -55,8 +55,10 @@ export default function TemplatePartPlaceholder( { ); const onCreate = useCallback( - async ( startingBlocks = [] ) => { - const title = __( 'Untitled Template Part' ); + async ( + startingBlocks = [], + title = __( 'Untitled Template Part' ) + ) => { // If we have `area` set from block attributes, means an exposed // block variation was inserted. So add this prop to the template // part entity on creation. Afterwards remove `area` value from diff --git a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js index 6add051c04040..3a28853457ba9 100644 --- a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js +++ b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js @@ -2,32 +2,102 @@ * WordPress dependencies */ import { __experimentalBlockPatternSetup as BlockPatternSetup } from '@wordpress/block-editor'; -import { useEffect } from '@wordpress/element'; +import { useEffect, useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { + TextControl, + Flex, + FlexItem, + Button, + Modal, +} from '@wordpress/components'; export default function PatternsSetup( { area, clientId, onCreate } ) { const blockNameWithArea = area ? `core/template-part/${ area }` : 'core/template-part'; + // Restructure onCreate to set the blocks on local state. + // Add modal to confirm title and trigger onCreate. + const [ title, setTitle ] = useState( __( 'Untitled Template Part' ) ); + const [ startingBlocks, setStartingBlocks ] = useState( [] ); + const [ isTitleStep, setIsTitleStep ] = useState( false ); + + const selectPattern = ( selectedPattern ) => { + setStartingBlocks( selectedPattern ); + setIsTitleStep( true ); + }; + return ( - - } - onBlockPatternSelect={ onCreate } - filterPatternsFn={ ( pattern ) => - pattern?.blockTypes?.some?.( - ( blockType ) => blockType === blockNameWithArea - ) - } - /> + <> + + } + onBlockPatternSelect={ selectPattern } + filterPatternsFn={ ( pattern ) => + pattern?.blockTypes?.some?.( + ( blockType ) => blockType === blockNameWithArea + ) + } + /> + { isTitleStep && ( + { + setIsTitleStep( false ); + setTitle( __( 'Untitled Template Part' ) ); + } } + overlayClassName="edit-site-template-part-converter__modal" + > +
{ + event.preventDefault(); + onCreate( startingBlocks, title ); + // setIsTitleStep( false ); + // setTitle( __( 'Untitled Template Part' ) ); + } } + > + + + + + + + + + + +
+ ) } + ); } -function StartBlankComponent( { onCreate } ) { +function StartBlankComponent( { setTitleStep } ) { useEffect( () => { - onCreate(); + setTitleStep( true ); }, [] ); return null; } From cf47008edaf6210aa559d58a0fa95d80dd302ef9 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 26 Jul 2021 13:15:38 -0400 Subject: [PATCH 2/7] reset placeholder for cancelation of modal --- .../src/template-part/edit/placeholder/index.js | 3 +++ .../edit/placeholder/patterns-setup.js | 17 ++++++++--------- 2 files changed, 11 insertions(+), 9 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 3c53a093f334f..30645c5b9afe3 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -158,6 +158,9 @@ export default function TemplatePartPlaceholder( { area={ area } onCreate={ onCreate } clientId={ clientId } + resetPlaceholder={ () => + setStep( PLACEHOLDER_STEPS.initial ) + } /> ) } diff --git a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js index 3a28853457ba9..b4c9a14984d5d 100644 --- a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js +++ b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js @@ -12,7 +12,12 @@ import { Modal, } from '@wordpress/components'; -export default function PatternsSetup( { area, clientId, onCreate } ) { +export default function PatternsSetup( { + area, + clientId, + onCreate, + resetPlaceholder, +} ) { const blockNameWithArea = area ? `core/template-part/${ area }` : 'core/template-part'; @@ -47,8 +52,7 @@ export default function PatternsSetup( { area, clientId, onCreate } ) { title={ __( 'Create a template part' ) } closeLabel={ __( 'Close' ) } onRequestClose={ () => { - setIsTitleStep( false ); - setTitle( __( 'Untitled Template Part' ) ); + resetPlaceholder(); } } overlayClassName="edit-site-template-part-converter__modal" > @@ -56,8 +60,6 @@ export default function PatternsSetup( { area, clientId, onCreate } ) { onSubmit={ ( event ) => { event.preventDefault(); onCreate( startingBlocks, title ); - // setIsTitleStep( false ); - // setTitle( __( 'Untitled Template Part' ) ); } } > { - setIsTitleStep( false ); - setTitle( - __( 'Untitled Template Part' ) - ); + resetPlaceholder(); } } > { __( 'Cancel' ) } From 1ecef1de45879ebd14340728d04547247ff608c2 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 26 Jul 2021 13:29:19 -0400 Subject: [PATCH 3/7] contextual modal label --- .../src/template-part/edit/placeholder/index.js | 1 + .../template-part/edit/placeholder/patterns-setup.js | 10 +++++++--- 2 files changed, 8 insertions(+), 3 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 30645c5b9afe3..d35af3ffa7189 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -156,6 +156,7 @@ export default function TemplatePartPlaceholder( { { step === PLACEHOLDER_STEPS.patterns && ( diff --git a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js index b4c9a14984d5d..466d845ec20b6 100644 --- a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js +++ b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js @@ -3,7 +3,7 @@ */ import { __experimentalBlockPatternSetup as BlockPatternSetup } from '@wordpress/block-editor'; import { useEffect, useState } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { TextControl, Flex, @@ -14,6 +14,7 @@ import { export default function PatternsSetup( { area, + areaLabel, clientId, onCreate, resetPlaceholder, @@ -49,8 +50,11 @@ export default function PatternsSetup( { /> { isTitleStep && ( { resetPlaceholder(); } } From f4a8b0bbaf2a6ac1a644f3549f4e634609edf2f4 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 26 Jul 2021 14:50:47 -0400 Subject: [PATCH 4/7] add styles --- .../edit/placeholder/patterns-setup.js | 4 ++-- .../block-library/src/template-part/editor.scss | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js index 466d845ec20b6..e88dd7ea46ef7 100644 --- a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js +++ b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js @@ -58,7 +58,7 @@ export default function PatternsSetup( { onRequestClose={ () => { resetPlaceholder(); } } - overlayClassName="edit-site-template-part-converter__modal" + overlayClassName="wp-block-template-part__placeholder-title-form" >
{ @@ -72,7 +72,7 @@ export default function PatternsSetup( { onChange={ setTitle } /> diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 44690f049b634..ddec55fc93e68 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -77,3 +77,17 @@ } } } + +.wp-block-template-part__placeholder-title-form { + .wp-block-template-part__placeholder-title-form-actions { + padding-top: $grid-unit-15; + // Unsure why these styles need to be added since we are using the Flex component with + // flex-end setting. + display: flex; + justify-content: flex-end; + + .components-flex-item { + margin-left: $grid-unit-15; + } + } +} From 7908deff3ec40bb6e6e5471c28bce31a916eca4c Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 28 Jul 2021 09:54:01 -0400 Subject: [PATCH 5/7] update classnames and rid anon functions --- .../edit/placeholder/patterns-setup.js | 24 ++++++++----------- .../src/template-part/editor.scss | 4 ++-- 2 files changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js index e88dd7ea46ef7..b13da4537b8a7 100644 --- a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js +++ b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js @@ -34,6 +34,11 @@ export default function PatternsSetup( { setIsTitleStep( true ); }; + const submitForCreation = ( event ) => { + event.preventDefault(); + onCreate( startingBlocks, title ); + }; + return ( <> { - resetPlaceholder(); - } } - overlayClassName="wp-block-template-part__placeholder-title-form" + onRequestClose={ resetPlaceholder } + overlayClassName="wp-block-template-part__placeholder-create-new__title-form" > - { - event.preventDefault(); - onCreate( startingBlocks, title ); - } } - > + diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index ddec55fc93e68..1a5dc4cc6204b 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -78,8 +78,8 @@ } } -.wp-block-template-part__placeholder-title-form { - .wp-block-template-part__placeholder-title-form-actions { +.wp-block-template-part__placeholder-create-new__title-form { + .wp-block-template-part__placeholder-create-new__title-form-actions { padding-top: $grid-unit-15; // Unsure why these styles need to be added since we are using the Flex component with // flex-end setting. From fd689694751a0d111de14b9d9cb7391d4ce41c84 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 30 Jul 2021 08:14:37 -0400 Subject: [PATCH 6/7] add a placeholder to StartBlankComponent, disable create button when title blank --- .../template-part/edit/placeholder/index.js | 1 + .../edit/placeholder/patterns-setup.js | 29 ++++++++++++++++--- .../src/template-part/editor.scss | 3 +- 3 files changed, 28 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 d35af3ffa7189..a32d425129ed6 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -157,6 +157,7 @@ export default function TemplatePartPlaceholder( { diff --git a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js index b13da4537b8a7..fc4f95e89756b 100644 --- a/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js +++ b/packages/block-library/src/template-part/edit/placeholder/patterns-setup.js @@ -10,11 +10,13 @@ import { FlexItem, Button, Modal, + Placeholder, } from '@wordpress/components'; export default function PatternsSetup( { area, areaLabel, + areaIcon, clientId, onCreate, resetPlaceholder, @@ -44,7 +46,11 @@ export default function PatternsSetup( { + } onBlockPatternSelect={ selectPattern } filterPatternsFn={ ( pattern ) => @@ -82,7 +88,12 @@ export default function PatternsSetup( { - @@ -94,9 +105,19 @@ export default function PatternsSetup( { ); } -function StartBlankComponent( { setTitleStep } ) { +function StartBlankComponent( { setTitleStep, areaLabel, areaIcon } ) { useEffect( () => { setTitleStep( true ); }, [] ); - return null; + return ( + + ); } diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 1a5dc4cc6204b..56b155e3436e6 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -82,7 +82,8 @@ .wp-block-template-part__placeholder-create-new__title-form-actions { padding-top: $grid-unit-15; // Unsure why these styles need to be added since we are using the Flex component with - // flex-end setting. + // flex-end setting. Created issue https://github.com/WordPress/gutenberg/issues/33735 to + // attempt document this issue. display: flex; justify-content: flex-end; From 47b4e4995e50f59c3bb3e1b49dfa0ec6f8023b17 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 30 Jul 2021 09:04:07 -0400 Subject: [PATCH 7/7] update e2e tests for new step in creation flow --- .../specs/experiments/multi-entity-saving.test.js | 7 +++++++ packages/e2e-tests/specs/experiments/template-part.test.js | 6 ++++++ 2 files changed, 13 insertions(+) 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 02ebed0e50d22..e2b9d135d3149 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -66,6 +66,8 @@ describe( 'Multi-entity save flow', () => { const saveA11ySelector = '.edit-post-layout__toggle-entities-saved-states-panel-button'; const publishPanelSelector = '.editor-post-publish-panel'; + const confirmTitleButtonSelector = + '.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary'; // Reusable assertions inside Post editor. const assertMultiSaveEnabled = async () => { @@ -104,6 +106,11 @@ describe( 'Multi-entity save flow', () => { createNewButtonSelector ); await createNewButton.click(); + const confirmTitleButton = await page.waitForSelector( + confirmTitleButtonSelector + ); + await confirmTitleButton.click(); + await page.waitForSelector( activatedTemplatePartSelector ); await page.click( '.block-editor-button-block-appender' ); await page.click( '.editor-block-list-item-paragraph' ); diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index 4e16c07c4e88c..7cc2c8fefdfa1 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -276,6 +276,8 @@ describe( 'Template Part', () => { '//button[contains(text(), "New template part")]'; const chooseExistingButtonSelector = '//button[contains(text(), "Choose existing")]'; + const confirmTitleButtonSelector = + '.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary'; it( 'Should insert new template part on creation', async () => { await createNewPost(); @@ -287,6 +289,10 @@ describe( 'Template Part', () => { createNewButtonSelector ); await createNewButton.click(); + const confirmTitleButton = await page.waitForSelector( + confirmTitleButtonSelector + ); + await confirmTitleButton.click(); const newTemplatePart = await page.waitForSelector( activatedTemplatePartSelector