Template Part placeholder - Add title step to creation flow. (#33703)

* initial idea * reset placeholder for cancelation of modal * contextual modal label * add styles * update classnames and rid anon functions * add a placeholder to StartBlankComponent, disable create button when title blank * update e2e tests for new step in creation flow
WordPress · Jul 30, 2021 · a980a6c · a980a6c
1 parent cda28ba
commit a980a6c
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 19 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
@@ -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
@@ -154,8 +156,13 @@ export default function TemplatePartPlaceholder( {
 			{ step === PLACEHOLDER_STEPS.patterns && (
 				<PatternsSetup
 					area={ area }
+					areaLabel={ areaLabel }
+					areaIcon={ areaIcon }
 					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
@@ -2,32 +2,122 @@
  * WordPress dependencies
  */
 import { __experimentalBlockPatternSetup as BlockPatternSetup } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	TextControl,
+	Flex,
+	FlexItem,
+	Button,
+	Modal,
+	Placeholder,
+} from '@wordpress/components';
 
-export default function PatternsSetup( { area, clientId, onCreate } ) {
+export default function PatternsSetup( {
+	area,
+	areaLabel,
+	areaIcon,
+	clientId,
+	onCreate,
+	resetPlaceholder,
+} ) {
 	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 );
+	};
+
+	const submitForCreation = ( event ) => {
+		event.preventDefault();
+		onCreate( startingBlocks, title );
+	};
+
 	return (
-		<BlockPatternSetup
-			clientId={ clientId }
-			startBlankComponent={
-				<StartBlankComponent onCreate={ onCreate } />
-			}
-			onBlockPatternSelect={ onCreate }
-			filterPatternsFn={ ( pattern ) =>
-				pattern?.blockTypes?.some?.(
-					( blockType ) => blockType === blockNameWithArea
-				)
-			}
-		/>
+		<>
+			<BlockPatternSetup
+				clientId={ clientId }
+				startBlankComponent={
+					<StartBlankComponent
+						setTitleStep={ setIsTitleStep }
+						areaLabel={ areaLabel }
+						areaIcon={ areaIcon }
+					/>
+				}
+				onBlockPatternSelect={ selectPattern }
+				filterPatternsFn={ ( pattern ) =>
+					pattern?.blockTypes?.some?.(
+						( blockType ) => blockType === blockNameWithArea
+					)
+				}
+			/>
+			{ isTitleStep && (
+				<Modal
+					title={ sprintf(
+						'Name and create your new %s',
+						areaLabel.toLowerCase()
+					) }
+					closeLabel={ __( 'Cancel' ) }
+					onRequestClose={ resetPlaceholder }
+					overlayClassName="wp-block-template-part__placeholder-create-new__title-form"
+				>
+					<form onSubmit={ submitForCreation }>
+						<TextControl
+							label={ __( 'Name' ) }
+							value={ title }
+							onChange={ setTitle }
+						/>
+						<Flex
+							className="wp-block-template-part__placeholder-create-new__title-form-actions"
+							justify="flex-end"
+						>
+							<FlexItem>
+								<Button
+									variant="secondary"
+									onClick={ resetPlaceholder }
+								>
+									{ __( 'Cancel' ) }
+								</Button>
+							</FlexItem>
+							<FlexItem>
+								<Button
+									variant="primary"
+									type="submit"
+									disabled={ ! title.length }
+									aria-disabled={ ! title.length }
+								>
+									{ __( 'Create' ) }
+								</Button>
+							</FlexItem>
+						</Flex>
+					</form>
+				</Modal>
+			) }
+		</>
 	);
 }
 
-function StartBlankComponent( { onCreate } ) {
+function StartBlankComponent( { setTitleStep, areaLabel, areaIcon } ) {
 	useEffect( () => {
-		onCreate();
+		setTitleStep( true );
 	}, [] );
-	return null;
+	return (
+		<Placeholder
+			label={ areaLabel }
+			icon={ areaIcon }
+			instructions={ sprintf(
+				// Translators: %s as template part area title ("Header", "Footer", "Template Part", etc.).
+				'Creating your new %s...',
+				areaLabel.toLowerCase()
+			) }
+		/>
+	);
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
@@ -81,3 +81,18 @@
 		}
 	}
 }
+
+.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.  Created issue https://github.com/WordPress/gutenberg/issues/33735 to
+		// attempt document this issue.
+		display: flex;
+		justify-content: flex-end;
+
+		.components-flex-item {
+			margin-left: $grid-unit-15;
+		}
+	}
+}
diff --git 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
@@ -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