Add start blank

packages/block-library/src/template-part/edit/index.js

@@ -185,7 +185,7 @@ export default function TemplatePartEdit( {
 			) }
 			{ isTemplatePartSelectionOpen && (
 				<Modal
-					className="block-editor-template-part-placeholder__modal"
+					className="block-editor-template-part__selection-modal"
 					title={ sprintf(
 						// Translators: %s as template part area title ("Header", "Footer", etc.).
 						__( 'Choose a %s' ),

packages/block-library/src/template-part/edit/selection-modal/index.js

@@ -6,18 +6,20 @@ import { kebabCase } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
+import { useCallback, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { serialize } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import TemplatePartList from './template-part-list';
 import PatternsList from './patterns-list';
+import TitleModal from './title-modal';
 
 export default function TemplatePartSelectionModal( {
 	setAttributes,
@@ -29,6 +31,7 @@ export default function TemplatePartSelectionModal( {
 } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const [ showTitleModal, setShowTitleModal ] = useState( false );
 
 	const onTemplatePartSelect = useCallback( ( templatePart ) => {
 		setAttributes( {
@@ -49,8 +52,8 @@ export default function TemplatePartSelectionModal( {
 		onClose();
 	}, [] );
 
-	const onBlockPatternSelect = async (
-		startingBlocks = [],
+	const createFromBlocks = async (
+		blocks = [],
 		title = __( 'Untitled Template Part' )
 	) => {
 		// If we have `area` set from block attributes, means an exposed
@@ -60,7 +63,7 @@ export default function TemplatePartSelectionModal( {
 		const record = {
 			title,
 			slug: kebabCase( title ),
-			content: serialize( startingBlocks ),
+			content: serialize( blocks ),
 			// `area` is filterable on the server and defaults to `UNCATEGORIZED`
 			// if provided value is not allowed.
 			area,
@@ -75,28 +78,45 @@ export default function TemplatePartSelectionModal( {
 			theme: templatePart.theme,
 			area: undefined,
 		} );
+		onClose();
 	};
 
 	return (
-		<div className="block-library-template-part__selection">
-			<div>
-				<h2>{ __( 'Pick from the existing template parts' ) }</h2>
-				<TemplatePartList
-					area={ area }
-					templatePartId={ templatePartId }
-					onSelect={ onTemplatePartSelect }
-				/>
+		<>
+			<div className="block-library-template-part__selection-content">
+				<div>
+					<h2>{ __( 'Pick from the existing template parts' ) }</h2>
+					<TemplatePartList
+						area={ area }
+						templatePartId={ templatePartId }
+						onSelect={ onTemplatePartSelect }
+					/>
+				</div>
+
+				<div>
+					<h2>{ __( 'Pick from the existing patterns' ) }</h2>
+					<PatternsList
+						area={ area }
+						areaLabel={ areaLabel }
+						onSelect={ createFromBlocks }
+						clientId={ clientId }
+					/>
+				</div>
 			</div>
 
-			<div>
-				<h2>{ __( 'Pick from the existing patterns' ) }</h2>
-				<PatternsList
-					area={ area }
+			<div className="block-library-template-part__selection-footer">
+				<Button isSecondary onClick={ () => setShowTitleModal( true ) }>
+					{ __( 'Start blank' ) }
+				</Button>
+			</div>
+
+			{ showTitleModal && (
+				<TitleModal
 					areaLabel={ areaLabel }
-					onSelect={ onBlockPatternSelect }
-					clientId={ clientId }
+					onClose={ () => setShowTitleModal( false ) }
+					onSubmit={ ( title ) => createFromBlocks( [], title ) }
 				/>
-			</div>
-		</div>
+			) }
+		</>
 	);
 }

packages/block-library/src/template-part/edit/selection-modal/patterns-list.js

@@ -6,17 +6,14 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useState, useMemo } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import {
-	TextControl,
-	Flex,
-	FlexItem,
-	Button,
-	Modal,
-} from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import TitleModal from './title-modal';
+
 export default function PatternsList( {
 	area,
 	areaLabel,
@@ -47,13 +44,11 @@ export default function PatternsList( {
 
 	// 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 shownPatterns = useAsyncList( filteredBlockPatterns );
 
-	const submitForCreation = ( event ) => {
-		event.preventDefault();
+	const onSubmitTitle = ( title ) => {
 		onSelect( startingBlocks, title );
 	};
 
@@ -69,39 +64,11 @@ export default function PatternsList( {
 			/>
 
 			{ isTitleStep && (
-				<Modal
-					title={ sprintf(
-						// Translators: %s as template part area title ("Header", "Footer", etc.).
-						__( 'Name and create your new %s' ),
-						areaLabel.toLowerCase()
-					) }
-					closeLabel={ __( 'Cancel' ) }
-					overlayClassName="wp-block-template-part__placeholder-create-new__title-form"
-					onRequestClose={ () => setIsTitleStep( false ) }
-				>
-					<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="primary"
-									type="submit"
-									disabled={ ! title.length }
-									aria-disabled={ ! title.length }
-								>
-									{ __( 'Create' ) }
-								</Button>
-							</FlexItem>
-						</Flex>
-					</form>
-				</Modal>
+				<TitleModal
+					areaLabel={ areaLabel }
+					onClose={ () => setIsTitleStep( false ) }
+					onSubmit={ onSubmitTitle }
+				/>
 			) }
 		</>
 	);

packages/block-library/src/template-part/edit/selection-modal/title-modal.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	TextControl,
+	Flex,
+	FlexItem,
+	Button,
+	Modal,
+} from '@wordpress/components';
+
+export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
+	// 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 submitForCreation = ( event ) => {
+		event.preventDefault();
+		onSubmit( title );
+	};
+
+	return (
+		<Modal
+			title={ sprintf(
+				// Translators: %s as template part area title ("Header", "Footer", etc.).
+				__( 'Name and create your new %s' ),
+				areaLabel.toLowerCase()
+			) }
+			closeLabel={ __( 'Cancel' ) }
+			overlayClassName="wp-block-template-part__placeholder-create-new__title-form"
+			onRequestClose={ onClose }
+		>
+			<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="primary"
+							type="submit"
+							disabled={ ! title.length }
+							aria-disabled={ ! title.length }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}

packages/block-library/src/template-part/editor.scss

@@ -1,10 +1,14 @@
-.block-editor-template-part-placeholder__modal {
+.block-editor-template-part__selection-modal {
 	@include break-medium() {
 		width: $break-medium - $grid-unit-20 * 2;
 	}
+
+	.components-modal__content {
+		padding: 0;
+	}
 }
 
-.block-library-template-part__selection .block-editor-block-patterns-list {
+.block-library-template-part__selection-content .block-editor-block-patterns-list {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	grid-gap: $grid-unit-10;
@@ -13,3 +17,20 @@
 		margin-bottom: 0;
 	}
 }
+
+.block-library-template-part__selection-content {
+	padding: 0 $grid-unit-40 $grid-unit-20;
+}
+
+.block-library-template-part__selection-footer {
+	position: sticky;
+	bottom: 0;
+	background: $white;
+	border-top: $border-width solid $gray-300;
+	padding: $grid-unit-20 $grid-unit-40;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	width: 100%;
+	z-index: z-index(".components-modal__header");
+}