From cf812e995ecb84128437a4f2e2252632d0ceb903 Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Thu, 18 Jun 2020 19:20:42 -0700
Subject: [PATCH 1/6] Template Part: Improve insertion flow.

---
 lib/template-loader.php                       |   2 +-
 .../src/template-part/edit/index.js           |  38 +++-
 .../src/template-part/edit/inner-blocks.js    |  13 +-
 .../src/template-part/edit/name-panel.js      |  35 +++
 .../template-part/edit/placeholder/index.js   | 206 ++++++------------
 .../src/template-part/editor.scss             |  46 +---
 .../block-library/src/template-part/index.js  |   2 +-
 .../block-library/src/template-part/index.php |   2 +-
 8 files changed, 141 insertions(+), 203 deletions(-)
 create mode 100644 packages/block-library/src/template-part/edit/name-panel.js

diff --git a/lib/template-loader.php b/lib/template-loader.php
index 9718b22313093d..3d92da499586ab 100644
--- a/lib/template-loader.php
+++ b/lib/template-loader.php
@@ -135,7 +135,7 @@ function gutenberg_override_query_template( $template, $type, array $templates =
 function create_auto_draft_for_template_part_block( $block ) {
 	$template_part_ids = array();
 
-	if ( 'core/template-part' === $block['blockName'] ) {
+	if ( 'core/template-part' === $block['blockName'] && isset( $block['attrs']['slug'] ) ) {
 		if ( isset( $block['attrs']['postId'] ) ) {
 			// Template part is customized.
 			$template_part_id = $block['attrs']['postId'];
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 63f44c3c5755ff..ac93f221b37e06 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -3,12 +3,12 @@
  */
 import { useRef, useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { EntityProvider } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import useTemplatePartPost from './use-template-part-post';
+import TemplatePartNamePanel from './name-panel';
 import TemplatePartInnerBlocks from './inner-blocks';
 import TemplatePartPlaceholder from './placeholder';
 
@@ -16,6 +16,7 @@ export default function TemplatePartEdit( {
 	attributes: { postId: _postId, slug, theme },
 	setAttributes,
 	clientId,
+	isSelected,
 } ) {
 	const initialPostId = useRef( _postId );
 	const initialSlug = useRef( slug );
@@ -28,8 +29,20 @@ export default function TemplatePartEdit( {
 	// but wait until the third inner blocks change,
 	// because the first 2 are just the template part
 	// content loading.
-	const innerBlocks = useSelect(
-		( select ) => select( 'core/block-editor' ).getBlocks( clientId ),
+	const { innerBlocks, hasSelectedInnerBlock } = useSelect(
+		( select ) => {
+			const {
+				getBlocks,
+				hasSelectedInnerBlock: getHasSelectedInnerBlock,
+			} = select( 'core/block-editor' );
+			return {
+				innerBlocks: getBlocks( clientId ),
+				hasSelectedInnerBlock: getHasSelectedInnerBlock(
+					clientId,
+					true
+				),
+			};
+		},
 		[ clientId ]
 	);
 	const { editEntityRecord } = useDispatch( 'core' );
@@ -54,13 +67,18 @@ export default function TemplatePartEdit( {
 	if ( postId ) {
 		// Part of a template file, post ID already resolved.
 		return (
-			<EntityProvider
-				kind="postType"
-				type="wp_template_part"
-				id={ postId }
-			>
-				<TemplatePartInnerBlocks />
-			</EntityProvider>
+			<>
+				{ ( isSelected || hasSelectedInnerBlock ) && (
+					<TemplatePartNamePanel
+						postId={ postId }
+						setAttributes={ setAttributes }
+					/>
+				) }
+				<TemplatePartInnerBlocks
+					postId={ postId }
+					hasInnerBlocks={ innerBlocks.length > 0 }
+				/>
+			</>
 		);
 	}
 	if ( ! initialSlug.current && ! initialTheme.current ) {
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index c0624c933ab174..26e53f2b351e31 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -4,16 +4,25 @@
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function TemplatePartInnerBlocks() {
+export default function TemplatePartInnerBlocks( {
+	postId: id,
+	hasInnerBlocks,
+} ) {
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
-		'wp_template_part'
+		'wp_template_part',
+		{ id }
 	);
 	return (
 		<InnerBlocks
 			value={ blocks }
 			onInput={ onInput }
 			onChange={ onChange }
+			renderAppender={
+				hasInnerBlocks
+					? undefined
+					: () => <InnerBlocks.ButtonBlockAppender />
+			}
 		/>
 	);
 }
diff --git a/packages/block-library/src/template-part/edit/name-panel.js b/packages/block-library/src/template-part/edit/name-panel.js
new file mode 100644
index 00000000000000..def2c93364243a
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/name-panel.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+import { TextControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cleanForSlug } from '@wordpress/url';
+
+export default function TemplatePartNamePanel( { postId, setAttributes } ) {
+	const [ title, setTitle ] = useEntityProp(
+		'postType',
+		'wp_template_part',
+		'title',
+		postId
+	);
+	const [ , setSlug ] = useEntityProp(
+		'postType',
+		'wp_template_part',
+		'slug',
+		postId
+	);
+	return (
+		<TextControl
+			hideLabelFromVision
+			label={ __( 'Name' ) }
+			value={ title }
+			onChange={ ( value ) => {
+				setTitle( value );
+				const slug = cleanForSlug( value );
+				setSlug( slug );
+				setAttributes( { slug } );
+			} }
+		/>
+	);
+}
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 1da611ae523378..91375a0a95836a 100644
--- a/packages/block-library/src/template-part/edit/placeholder/index.js
+++ b/packages/block-library/src/template-part/edit/placeholder/index.js
@@ -8,164 +8,82 @@ import { cleanForSlug } from '@wordpress/url';
 import {
 	Placeholder,
 	TextControl,
+	Dropdown,
+	ButtonGroup,
 	Button,
-	TabPanel,
 } from '@wordpress/components';
-import { layout } from '@wordpress/icons';
+import { blockDefault } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import useTemplatePartPost from '../use-template-part-post';
 import TemplatePartPreviews from './template-part-previews';
 
-const HELP_PHRASES = {
-	initial: __( 'Please add a name and theme for your new Template Part.' ),
-	unavailable: __(
-		'Name and theme combination already in use, please try another.'
-	),
-	available: __( 'This name is available!' ),
-	error: __( 'Error adding template.' ),
-};
-
 export default function TemplatePartPlaceholder( { setAttributes } ) {
-	const [ slug, _setSlug ] = useState( '' );
-	const [ theme, _setTheme ] = useState( '' );
-	const [ help, setHelp ] = useState( '' );
-
-	// Try to find an existing template part.
-	const postId = useTemplatePartPost( null, slug, theme );
-
-	const setSlug = useCallback(
-		( nextSlug ) => {
-			_setSlug( nextSlug );
-			if ( help ) {
-				setHelp( '' );
-			}
-		},
-		[ help ]
-	);
-
-	const setTheme = useCallback(
-		( nextTheme ) => {
-			_setTheme( nextTheme );
-			if ( help ) {
-				setHelp( '' );
-			}
-		},
-		[ help ]
-	);
-
-	const getHelpPhrase = () => {
-		if ( ! slug || ! theme ) {
-			return HELP_PHRASES.initial;
-		} else if ( postId ) {
-			return HELP_PHRASES.unavailable;
-		}
-
-		return HELP_PHRASES.available;
-	};
-
 	const { saveEntityRecord } = useDispatch( 'core' );
 	const onCreate = useCallback( async () => {
-		const nextAttributes = { slug, theme };
-		// Create a new template part.
-		try {
-			const cleanSlug = cleanForSlug( slug );
-			const templatePart = await saveEntityRecord(
-				'postType',
-				'wp_template_part',
-				{
-					title: cleanSlug,
-					status: 'publish',
-					slug: cleanSlug,
-					meta: { theme },
-				}
-			);
-			nextAttributes.postId = templatePart.id;
-		} catch ( err ) {
-			setHelp( HELP_PHRASES.error );
-		}
-		setAttributes( nextAttributes );
-	}, [ postId, slug, theme ] );
+		const title = 'Untitled Section';
+		const slug = cleanForSlug( title );
+		const templatePart = await saveEntityRecord(
+			'postType',
+			'wp_template_part',
+			{
+				title,
+				status: 'publish',
+				slug,
+				meta: { theme: 'custom' },
+			}
+		);
+		setAttributes( {
+			postId: templatePart.id,
+			slug: templatePart.slug,
+			theme: templatePart.meta.theme,
+		} );
+	}, [ setAttributes ] );
 
 	const [ filterValue, setFilterValue ] = useState( '' );
-
-	const createTab = (
-		<>
-			<div className="wp-block-template-part__placeholder-input-container">
-				<TextControl
-					label={ __( 'Name' ) }
-					placeholder={ __( 'header' ) }
-					value={ slug }
-					onChange={ setSlug }
-					className="wp-block-template-part__placeholder-input"
-				/>
-				<TextControl
-					label={ __( 'Theme' ) }
-					placeholder={ __( 'twentytwenty' ) }
-					value={ theme }
-					onChange={ setTheme }
-					className="wp-block-template-part__placeholder-input"
-				/>
-			</div>
-			<div className="wp-block-template-part__placeholder-help-phrase">
-				{ help || getHelpPhrase() }
-			</div>
-			<Button
-				isPrimary
-				disabled={ ! slug || ! theme || postId }
-				onClick={ onCreate }
-				className="wp-block-template-part__placeholder-create-button"
-			>
-				{ __( 'Create' ) }
-			</Button>
-		</>
-	);
-
-	const selectTab = (
-		<>
-			<TextControl
-				label={ __( 'Search' ) }
-				placeholder={ __( 'header' ) }
-				value={ filterValue }
-				onChange={ setFilterValue }
-				className="wp-block-template-part__placeholder-preview-filter-input"
-			/>
-
-			<div className="wp-block-template-part__placeholder-preview-container">
-				<TemplatePartPreviews
-					setAttributes={ setAttributes }
-					filterValue={ filterValue }
-				/>
-			</div>
-		</>
-	);
-
 	return (
-		<Placeholder icon={ layout } label={ __( 'Template Part' ) }>
-			<TabPanel
-				className="wp-block-template-part__placeholder-tabs"
-				tabs={ [
-					{
-						name: 'select',
-						/* translators: Select tab of template part creation placeholder. */
-						title: __( 'Select from existing' ),
-					},
-					{
-						name: 'create',
-						/* translators: Create tab of template part placeholder.  */
-						title: __( 'Create new' ),
-					},
-				] }
-			>
-				{ ( tab ) => {
-					if ( tab.name === 'create' ) {
-						return createTab;
-					}
-					return selectTab;
-				} }
-			</TabPanel>
+		<Placeholder
+			icon={ blockDefault }
+			label={ __( 'Section' ) }
+			instructions={ __(
+				'Create a new section or pick one from a list of available sections.'
+			) }
+		>
+			<Dropdown
+				position="bottom left right"
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<ButtonGroup>
+						<Button
+							isPrimary
+							onClick={ onToggle }
+							aria-expanded={ isOpen }
+						>
+							{ __( 'Choose existing' ) }
+						</Button>
+						<Button onClick={ onCreate }>
+							{ __( 'New section' ) }
+						</Button>
+					</ButtonGroup>
+				) }
+				renderContent={ () => (
+					<>
+						<TextControl
+							label={ __( 'Search' ) }
+							placeholder={ __( 'header' ) }
+							value={ filterValue }
+							onChange={ setFilterValue }
+							className="wp-block-template-part__placeholder-preview-filter-input"
+						/>
+						<div className="wp-block-template-part__placeholder-preview-container">
+							<TemplatePartPreviews
+								setAttributes={ setAttributes }
+								filterValue={ filterValue }
+							/>
+						</div>
+					</>
+				) }
+			/>
 		</Placeholder>
 	);
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 64fed43e2eec91..1920bcbe36b38f 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -1,50 +1,8 @@
 
-.wp-block-template-part__placeholder-tabs {
-	display: flex;
-	flex-grow: 1;
-	flex-direction: column;
-
-	.components-tab-panel__tabs {
-		border-bottom: $border-width solid $light-gray-500;
-
-		.components-tab-panel__tabs-item {
-			flex-grow: 1;
-			margin-bottom: -$border-width;
-		}
-	}
-
-	.components-tab-panel__tab-content {
-		margin-top: $grid-unit-20;
-		display: flex;
-		flex-grow: 1;
-		flex-direction: column;
-		position: relative;
-	}
-
-	.wp-block-template-part__placeholder-input-container {
-		display: flex;
-		flex-wrap: wrap;
-		width: 100%;
-
-		.wp-block-template-part__placeholder-input {
-			margin: 5px;
-		}
-	}
-
-	.wp-block-template-part__placeholder-help-phrase {
-		padding: 0 $grid-unit-15 $grid-unit-15;
-	}
-
-	.wp-block-template-part__placeholder-create-button {
-		align-self: flex-start;
-	}
-
-	.wp-block-template-part__placeholder-preview-filter-input {
-		width: inherit;
-	}
+.wp-block-template-part__placeholder-preview-filter-input {
+	width: inherit;
 }
 
-
 .wp-block-template-part__placeholder-preview-container {
 	width: inherit;
 	max-height: 600px;
diff --git a/packages/block-library/src/template-part/index.js b/packages/block-library/src/template-part/index.js
index af507228b2afa3..7dffabe66e18b6 100644
--- a/packages/block-library/src/template-part/index.js
+++ b/packages/block-library/src/template-part/index.js
@@ -18,7 +18,7 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	title: __( 'Template Part' ),
+	title: __( 'Section' ),
 	__experimentalLabel: ( { slug } ) => startCase( slug ),
 	edit,
 };
diff --git a/packages/block-library/src/template-part/index.php b/packages/block-library/src/template-part/index.php
index bf40670885f9d1..de8de1212ca1fe 100644
--- a/packages/block-library/src/template-part/index.php
+++ b/packages/block-library/src/template-part/index.php
@@ -19,7 +19,7 @@ function render_block_core_template_part( $attributes ) {
 		// If we have a post ID, which means this template part
 		// is user-customized, render the corresponding post content.
 		$content = get_post( $attributes['postId'] )->post_content;
-	} elseif ( wp_get_theme()->get( 'TextDomain' ) === $attributes['theme'] ) {
+	} elseif ( isset( $attributes['theme'] ) && wp_get_theme()->get( 'TextDomain' ) === $attributes['theme'] ) {
 		$template_part_query = new WP_Query(
 			array(
 				'post_type'      => 'wp_template_part',

From 1da80b6058dffb408584088d030f019643ca71f4 Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Fri, 19 Jun 2020 12:07:40 -0700
Subject: [PATCH 2/6] Template Part: Fix styles and remove unnecessary
 properties.

---
 packages/base-styles/_z-index.scss            |  1 +
 .../src/template-part/edit/inner-blocks.js    |  7 ++---
 .../template-part/edit/placeholder/index.js   |  3 ++-
 .../src/template-part/editor.scss             | 26 ++++++++++++-------
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index e272890ea49997..f1fe6a82f7f0c7 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -33,6 +33,7 @@ $z-layers: (
 	".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
 	".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
+	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
 	// Active pill button
 	".components-button {:focus or .is-primary}": 1,
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
index 26e53f2b351e31..789efb2e24689b 100644
--- a/packages/block-library/src/template-part/edit/inner-blocks.js
+++ b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -4,6 +4,7 @@
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import { InnerBlocks } from '@wordpress/block-editor';
 
+const renderAppender = () => <InnerBlocks.ButtonBlockAppender />;
 export default function TemplatePartInnerBlocks( {
 	postId: id,
 	hasInnerBlocks,
@@ -18,11 +19,7 @@ export default function TemplatePartInnerBlocks( {
 			value={ blocks }
 			onInput={ onInput }
 			onChange={ onChange }
-			renderAppender={
-				hasInnerBlocks
-					? undefined
-					: () => <InnerBlocks.ButtonBlockAppender />
-			}
+			renderAppender={ hasInnerBlocks ? undefined : renderAppender }
 		/>
 	);
 }
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 91375a0a95836a..2471ad1bf3f602 100644
--- a/packages/block-library/src/template-part/edit/placeholder/index.js
+++ b/packages/block-library/src/template-part/edit/placeholder/index.js
@@ -51,7 +51,8 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
 			) }
 		>
 			<Dropdown
-				position="bottom left right"
+				contentClassName="wp-block-template-part__placeholder-preview-dropdown-content"
+				position="bottom right left"
 				renderToggle={ ( { isOpen, onToggle } ) => (
 					<ButtonGroup>
 						<Button
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 1920bcbe36b38f..765356bfd02317 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -1,24 +1,33 @@
 
+.wp-block-template-part__placeholder-preview-dropdown-content {
+	.components-popover__content {
+		min-width: 320px;
+		padding-top: 0;
+	}
+}
+
 .wp-block-template-part__placeholder-preview-filter-input {
-	width: inherit;
+	background: $white;
+	border-bottom: $border-width solid $light-gray-500;
+	left: 0;
+	margin: 0 ( -$grid-unit-15 ) $grid-unit-15;
+	padding: $grid-unit-15;
+	position: sticky;
+	top: 0;
+	z-index: z-index(".wp-block-template-part__placeholder-preview-filter-input");
 }
 
 .wp-block-template-part__placeholder-preview-container {
-	width: inherit;
-	max-height: 600px;
-	overflow-y: scroll;
 	background: $white;
 	border-radius: $radius-block-ui;
 	border: $border-width solid $light-gray-500;
-	top: $grid-unit-20;
-	left: calc(100% + #{$grid-unit-20});
+	padding-bottom: 16px;
 
 	.wp-block-template-part__placeholder-preview-item {
 		border-radius: $radius-block-ui;
 		cursor: pointer;
 		margin-top: $grid-unit-20;
 		transition: all 0.05s ease-in-out;
-		position: relative;
 		border: $border-width solid transparent;
 
 		&:hover {
@@ -44,8 +53,6 @@
 	}
 
 	.wp-block-template-part__placeholder-panel-group-header {
-		display: inline-flex;
-		align-items: center;
 		padding: $grid-unit-20 $grid-unit-20 0;
 	}
 
@@ -58,6 +65,5 @@
 		text-transform: uppercase;
 		font-size: 11px;
 		font-weight: 500;
-		margin-right: $grid-unit-10;
 	}
 }

From 3feb06c34c8d7b1b0f3416294b71096d2e9141a4 Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Fri, 19 Jun 2020 17:01:39 -0700
Subject: [PATCH 3/6] Template Part: Update tests.

---
 .../experiments/multi-entity-editing.test.js  | 24 +++++-----
 .../experiments/multi-entity-saving.test.js   | 17 +++----
 .../specs/experiments/template-part.test.js   | 44 +++++--------------
 3 files changed, 29 insertions(+), 56 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 11de0b508a7611..427b4ee9c9955f 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js
@@ -49,34 +49,32 @@ const getTemplateDropdownElement = async ( itemName ) => {
 
 const createTemplatePart = async (
 	templatePartName = 'test-template-part',
-	themeName = 'test-theme',
 	isNested = false
 ) => {
 	// Create new template part.
-	await insertBlock( 'Template Part' );
+	await insertBlock( 'Section' );
 	const [ createNewButton ] = await page.$x(
-		'//button[contains(text(), "Create new")]'
+		'//button[contains(text(), "New section")]'
 	);
 	await createNewButton.click();
-	await page.keyboard.press( 'Tab' );
-	await page.keyboard.type( templatePartName );
-	await page.keyboard.press( 'Tab' );
-	await page.keyboard.type( themeName );
-	await page.keyboard.press( 'Tab' );
-	await page.keyboard.press( 'Enter' );
 	await page.waitForSelector(
 		isNested
 			? '.wp-block[data-type="core/template-part"] .wp-block[data-type="core/template-part"] .block-editor-inner-blocks'
 			: '.wp-block[data-type="core/template-part"] .block-editor-inner-blocks'
 	);
+	await page.keyboard.press( 'Tab' );
+	await page.keyboard.type( templatePartName );
 };
 
 const editTemplatePart = async ( textToAdd, isNested = false ) => {
 	await page.click(
-		isNested
-			? '.wp-block[data-type="core/template-part"] .wp-block[data-type="core/template-part"]'
-			: '.wp-block[data-type="core/template-part"]'
+		`${
+			isNested
+				? '.wp-block[data-type="core/template-part"] .wp-block[data-type="core/template-part"]'
+				: '.wp-block[data-type="core/template-part"]'
+		} .block-editor-button-block-appender`
 	);
+	await page.click( '.editor-block-list-item-paragraph' );
 	for ( const text of textToAdd ) {
 		await page.keyboard.type( text );
 		await page.keyboard.press( 'Enter' );
@@ -208,7 +206,7 @@ describe( 'Multi-entity editor states', () => {
 				'Default template part test text.',
 				'Second paragraph test.',
 			] );
-			await createTemplatePart( nestedTPName, 'test-theme', true );
+			await createTemplatePart( nestedTPName, true );
 			await editTemplatePart(
 				[ 'Nested Template Part Text.', 'Second Nested test.' ],
 				true
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 5dd1c1f14d83c8..7b7ea0e63be53c 100644
--- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
+++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js
@@ -24,7 +24,7 @@ describe( 'Multi-entity save flow', () => {
 	const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-inner-blocks`;
 	const savePanelSelector = '.entities-saved-states__panel';
 	const closePanelButtonSelector = 'button[aria-label="Close panel"]';
-	const createNewButtonSelector = '//button[contains(text(), "Create new")]';
+	const createNewButtonSelector = '//button[contains(text(), "New section")]';
 
 	// Reusable assertions across Post/Site editors.
 	const assertAllBoxesChecked = async () => {
@@ -108,21 +108,18 @@ describe( 'Multi-entity save flow', () => {
 
 			it( 'Should trigger multi-entity save button once template part edited', async () => {
 				// Create new template part.
-				await insertBlock( 'Template Part' );
+				await insertBlock( 'Section' );
 				const [ createNewButton ] = await page.$x(
 					createNewButtonSelector
 				);
 				await createNewButton.click();
+				await page.waitForSelector( activatedTemplatePartSelector );
 				await page.keyboard.press( 'Tab' );
 				await page.keyboard.type( 'test-template-part' );
-				await page.keyboard.press( 'Tab' );
-				await page.keyboard.type( 'test-theme' );
-				await page.keyboard.press( 'Tab' );
-				await page.keyboard.press( 'Enter' );
 
 				// Make some changes in new Template Part.
-				await page.waitForSelector( activatedTemplatePartSelector );
-				await page.click( templatePartSelector );
+				await page.click( '.block-editor-button-block-appender' );
+				await page.click( '.editor-block-list-item-paragraph' );
 				await page.keyboard.type( 'some words...' );
 
 				await assertMultiSaveEnabled();
@@ -231,13 +228,13 @@ describe( 'Multi-entity save flow', () => {
 
 			// Ensure we are on 'front-page' demo template.
 			await page.click( templateDropdownSelector );
-			const [ demoTemplateButton ] = await page.$x(
+			const demoTemplateButton = await page.waitForXPath(
 				demoTemplateSelector
 			);
 			await demoTemplateButton.click();
 
 			// Insert a new template part placeholder.
-			await insertBlock( 'Template Part' );
+			await insertBlock( 'Section' );
 
 			const enabledButton = await page.waitForSelector(
 				activeSaveSiteSelector
diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js
index de9e15cbc8dc85..5a5de4d202e0b5 100644
--- a/packages/e2e-tests/specs/experiments/template-part.test.js
+++ b/packages/e2e-tests/specs/experiments/template-part.test.js
@@ -80,8 +80,6 @@ describe( 'Template Part', () => {
 
 	describe( 'Template part placeholder', () => {
 		// Test constants for template part.
-		const testSlug = 'test-template-part';
-		const testTheme = 'test-theme';
 		const testContent = 'some words...';
 
 		// Selectors
@@ -92,25 +90,19 @@ describe( 'Template Part', () => {
 		const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-inner-blocks`;
 		const testContentSelector = `//p[contains(., "${ testContent }")]`;
 		const createNewButtonSelector =
-			'//button[contains(text(), "Create new")]';
-		const disabledButtonSelector =
-			'.wp-block-template-part__placeholder-create-button[disabled]';
+			'//button[contains(text(), "New section")]';
+		const chooseExistingButtonSelector =
+			'//button[contains(text(), "Choose existing")]';
 
 		it( 'Should insert new template part on creation', async () => {
 			await createNewPost();
 			await disablePrePublishChecks();
 			// Create new template part.
-			await insertBlock( 'Template Part' );
+			await insertBlock( 'Section' );
 			const [ createNewButton ] = await page.$x(
 				createNewButtonSelector
 			);
 			await createNewButton.click();
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.type( testSlug );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.type( testTheme );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Enter' );
 
 			const newTemplatePart = await page.waitForSelector(
 				activatedTemplatePartSelector
@@ -118,7 +110,8 @@ describe( 'Template Part', () => {
 			expect( newTemplatePart ).toBeTruthy();
 
 			// Finish creating template part, insert some text, and save.
-			await page.click( templatePartSelector );
+			await page.click( '.block-editor-button-block-appender' );
+			await page.click( '.editor-block-list-item-paragraph' );
 			await page.keyboard.type( testContent );
 			await page.click( savePostSelector );
 			await page.click( entitiesSaveSelector );
@@ -127,7 +120,11 @@ describe( 'Template Part', () => {
 		it( 'Should preview newly added template part', async () => {
 			await createNewPost();
 			// Try to insert the template part we created.
-			await insertBlock( 'Template Part' );
+			await insertBlock( 'Section' );
+			const [ chooseExistingButton ] = await page.$x(
+				chooseExistingButtonSelector
+			);
+			await chooseExistingButton.click();
 			const preview = await page.waitForXPath( testContentSelector );
 			expect( preview ).toBeTruthy();
 		} );
@@ -141,24 +138,5 @@ describe( 'Template Part', () => {
 			);
 			expect( templatePartContent ).toBeTruthy();
 		} );
-
-		it( 'Should disable create button for slug/theme combo', async () => {
-			await createNewPost();
-			// Create new template part.
-			await insertBlock( 'Template Part' );
-			const [ createNewButton ] = await page.$x(
-				createNewButtonSelector
-			);
-			await createNewButton.click();
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.type( testSlug );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.type( testTheme );
-
-			const disabledButton = await page.waitForSelector(
-				disabledButtonSelector
-			);
-			expect( disabledButton ).toBeTruthy();
-		} );
 	} );
 } );

From 989260832909bca516c90f6df2b47bb6a45b1dd2 Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Thu, 25 Jun 2020 15:08:58 -0700
Subject: [PATCH 4/6] Template Part: Improve popover design.

---
 packages/block-editor/src/components/index.js     |  1 +
 .../src/components/inserter/search-form.js        | 14 ++++++++++++--
 .../src/template-part/edit/placeholder/index.js   |  9 +++------
 .../block-library/src/template-part/editor.scss   | 15 +++------------
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index e810619fd25323..10bd953ecc1d80 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -81,6 +81,7 @@ export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';
+export { default as __experimentalSearchForm } from './inserter/search-form';
 export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
 export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into-view';
 export { default as NavigableToolbar } from './navigable-toolbar';
diff --git a/packages/block-editor/src/components/inserter/search-form.js b/packages/block-editor/src/components/inserter/search-form.js
index bae5092d95ecac..6fbe56fc28c044 100644
--- a/packages/block-editor/src/components/inserter/search-form.js
+++ b/packages/block-editor/src/components/inserter/search-form.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -7,7 +12,7 @@ import { VisuallyHidden, Button } from '@wordpress/components';
 import { Icon, search, closeSmall } from '@wordpress/icons';
 import { useRef } from '@wordpress/element';
 
-function InserterSearchForm( { onChange, value } ) {
+function InserterSearchForm( { className, onChange, value } ) {
 	const instanceId = useInstanceId( InserterSearchForm );
 	const searchInput = useRef();
 
@@ -16,7 +21,12 @@ function InserterSearchForm( { onChange, value } ) {
 	// Popover's focusOnMount.
 	/* eslint-disable jsx-a11y/no-autofocus */
 	return (
-		<div className="block-editor-inserter__search">
+		<div
+			className={ classnames(
+				'block-editor-inserter__search',
+				className
+			) }
+		>
 			<VisuallyHidden
 				as="label"
 				htmlFor={ `block-editor-inserter__search-${ instanceId }` }
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 2471ad1bf3f602..d63c7d82cf40a2 100644
--- a/packages/block-library/src/template-part/edit/placeholder/index.js
+++ b/packages/block-library/src/template-part/edit/placeholder/index.js
@@ -7,12 +7,12 @@ import { useDispatch } from '@wordpress/data';
 import { cleanForSlug } from '@wordpress/url';
 import {
 	Placeholder,
-	TextControl,
 	Dropdown,
 	ButtonGroup,
 	Button,
 } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
+import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -69,12 +69,9 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
 				) }
 				renderContent={ () => (
 					<>
-						<TextControl
-							label={ __( 'Search' ) }
-							placeholder={ __( 'header' ) }
-							value={ filterValue }
+						<SearchForm
 							onChange={ setFilterValue }
-							className="wp-block-template-part__placeholder-preview-filter-input"
+							className="wp-block-template-part__placeholder-preview-search-form"
 						/>
 						<div className="wp-block-template-part__placeholder-preview-container">
 							<TemplatePartPreviews
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 765356bfd02317..7bd248633e2129 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -2,25 +2,16 @@
 .wp-block-template-part__placeholder-preview-dropdown-content {
 	.components-popover__content {
 		min-width: 320px;
-		padding-top: 0;
+		padding: 0;
 	}
 }
 
-.wp-block-template-part__placeholder-preview-filter-input {
-	background: $white;
+.wp-block-template-part__placeholder-preview-search-form {
 	border-bottom: $border-width solid $light-gray-500;
-	left: 0;
-	margin: 0 ( -$grid-unit-15 ) $grid-unit-15;
-	padding: $grid-unit-15;
-	position: sticky;
-	top: 0;
-	z-index: z-index(".wp-block-template-part__placeholder-preview-filter-input");
 }
 
 .wp-block-template-part__placeholder-preview-container {
 	background: $white;
-	border-radius: $radius-block-ui;
-	border: $border-width solid $light-gray-500;
 	padding-bottom: 16px;
 
 	.wp-block-template-part__placeholder-preview-item {
@@ -49,7 +40,7 @@
 	.wp-block-template-part__placeholder-preview-item-title {
 		padding: $grid-unit-05;
 		font-size: 12px;
-		text-align: center;
+		text-align: left;
 	}
 
 	.wp-block-template-part__placeholder-panel-group-header {

From e816f681bfeddff4a8d536eef9c0957e6b916357 Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Thu, 25 Jun 2020 15:50:47 -0700
Subject: [PATCH 5/6] Template Part: Improve name panel style.

---
 .../src/template-part/edit/name-panel.js      | 23 ++++++++--------
 .../src/template-part/editor.scss             | 27 +++++++++++++++++++
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/name-panel.js b/packages/block-library/src/template-part/edit/name-panel.js
index def2c93364243a..6af90ec5020ca9 100644
--- a/packages/block-library/src/template-part/edit/name-panel.js
+++ b/packages/block-library/src/template-part/edit/name-panel.js
@@ -20,16 +20,17 @@ export default function TemplatePartNamePanel( { postId, setAttributes } ) {
 		postId
 	);
 	return (
-		<TextControl
-			hideLabelFromVision
-			label={ __( 'Name' ) }
-			value={ title }
-			onChange={ ( value ) => {
-				setTitle( value );
-				const slug = cleanForSlug( value );
-				setSlug( slug );
-				setAttributes( { slug } );
-			} }
-		/>
+		<div className="wp-block-template-part__name-panel">
+			<TextControl
+				label={ __( 'Name' ) }
+				value={ title }
+				onChange={ ( value ) => {
+					setTitle( value );
+					const slug = cleanForSlug( value );
+					setSlug( slug );
+					setAttributes( { slug } );
+				} }
+			/>
+		</div>
 	);
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 7bd248633e2129..faa68de64dd0a2 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -58,3 +58,30 @@
 		font-weight: 500;
 	}
 }
+
+.wp-block-template-part__name-panel {
+	background-color: $white;
+	border-radius: $radius-block-ui;
+	box-shadow: 0 0 0 $border-width $dark-gray-primary;
+	outline: 1px solid transparent;
+	padding: ($grid-unit-10 - $border-width - $border-width) $grid-unit-15;
+
+	.components-base-control__field {
+		align-items: center;
+		display: flex;
+		margin-bottom: 0;
+	}
+
+	.components-base-control__label {
+		margin-bottom: 0;
+		margin-right: 8px;
+	}
+}
+
+.is-navigate-mode .is-selected .wp-block-template-part__name-panel {
+	box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+
+	.is-dark-theme & {
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+	}
+}

From 7b8de4fc8218d8990d7378fa83f5dd35fbf324dd Mon Sep 17 00:00:00 2001
From: epiqueras <epiquerass@gmail.com>
Date: Mon, 29 Jun 2020 14:26:15 -0700
Subject: [PATCH 6/6] Fix property handling.

---
 .../block-library/src/template-part/edit/name-panel.js | 10 +++++-----
 .../edit/placeholder/template-part-previews.js         |  6 +++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/name-panel.js b/packages/block-library/src/template-part/edit/name-panel.js
index 6af90ec5020ca9..96a881207aa833 100644
--- a/packages/block-library/src/template-part/edit/name-panel.js
+++ b/packages/block-library/src/template-part/edit/name-panel.js
@@ -13,7 +13,7 @@ export default function TemplatePartNamePanel( { postId, setAttributes } ) {
 		'title',
 		postId
 	);
-	const [ , setSlug ] = useEntityProp(
+	const [ slug, setSlug ] = useEntityProp(
 		'postType',
 		'wp_template_part',
 		'slug',
@@ -23,12 +23,12 @@ export default function TemplatePartNamePanel( { postId, setAttributes } ) {
 		<div className="wp-block-template-part__name-panel">
 			<TextControl
 				label={ __( 'Name' ) }
-				value={ title }
+				value={ title || slug }
 				onChange={ ( value ) => {
 					setTitle( value );
-					const slug = cleanForSlug( value );
-					setSlug( slug );
-					setAttributes( { slug } );
+					const newSlug = cleanForSlug( value );
+					setSlug( newSlug );
+					setAttributes( { slug: newSlug } );
 				} }
 			/>
 		</div>
diff --git a/packages/block-library/src/template-part/edit/placeholder/template-part-previews.js b/packages/block-library/src/template-part/edit/placeholder/template-part-previews.js
index 7cbe4312cf9a2b..1dd45289f5d18f 100644
--- a/packages/block-library/src/template-part/edit/placeholder/template-part-previews.js
+++ b/packages/block-library/src/template-part/edit/placeholder/template-part-previews.js
@@ -22,7 +22,11 @@ function PreviewPlaceholder() {
 }
 
 function TemplatePartItem( { templatePart, setAttributes } ) {
-	const { id, slug, theme } = templatePart;
+	const {
+		id,
+		slug,
+		meta: { theme },
+	} = templatePart;
 	// The 'raw' property is not defined for a brief period in the save cycle.
 	// The fallback prevents an error in the parse function while saving.
 	const content = templatePart.content.raw || '';