From 662eda2d61417145328c40b7c53a96c37c731901 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 1 Sep 2020 18:02:36 -0400
Subject: [PATCH 1/9] refactor reusable selection component

---
 .../src/template-part/edit/index.js           | 23 ++++++++++++++++
 .../template-part/edit/placeholder/index.js   | 19 +++----------
 .../src/template-part/edit/selection/index.js | 27 +++++++++++++++++++
 .../template-part-previews.js                 |  0
 4 files changed, 53 insertions(+), 16 deletions(-)
 create mode 100644 packages/block-library/src/template-part/edit/selection/index.js
 rename packages/block-library/src/template-part/edit/{placeholder => selection}/template-part-previews.js (100%)

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 64aaeaac2f9d1f..887a52326e7e49 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -7,6 +7,8 @@ import {
 	BlockControls,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
+import { Dropdown, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -15,6 +17,7 @@ import useTemplatePartPost from './use-template-part-post';
 import TemplatePartNamePanel from './name-panel';
 import TemplatePartInnerBlocks from './inner-blocks';
 import TemplatePartPlaceholder from './placeholder';
+import TemplatePartSelection from './selection';
 
 export default function TemplatePartEdit( {
 	attributes: { postId: _postId, slug, theme, tagName },
@@ -71,6 +74,26 @@ export default function TemplatePartEdit( {
 						postId={ postId }
 						setAttributes={ setAttributes }
 					/>
+					<Dropdown
+						contentClassName="wp-block-template-part__placeholder-preview-dropdown-content"
+						position="bottom right left"
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<>
+								<Button
+									isPrimary
+									onClick={ onToggle }
+									aria-expanded={ isOpen }
+								>
+									{ __( 'Choose existing' ) }
+								</Button>
+							</>
+						) }
+						renderContent={ () => (
+							<TemplatePartSelection
+								setAttributes={ setAttributes }
+							/>
+						) }
+					/>
 				</BlockControls>
 				<TemplatePartInnerBlocks
 					postId={ postId }
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 c5b0297f59df10..86af07f4c088dc 100644
--- a/packages/block-library/src/template-part/edit/placeholder/index.js
+++ b/packages/block-library/src/template-part/edit/placeholder/index.js
@@ -2,17 +2,16 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { cleanForSlug } from '@wordpress/url';
 import { Placeholder, Dropdown, Button } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
-import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import TemplatePartPreviews from './template-part-previews';
+import TemplatePartSelection from '../selection';
 
 export default function TemplatePartPlaceholder( { setAttributes } ) {
 	const { saveEntityRecord } = useDispatch( 'core' );
@@ -36,7 +35,6 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
 		} );
 	}, [ setAttributes ] );
 
-	const [ filterValue, setFilterValue ] = useState( '' );
 	return (
 		<Placeholder
 			icon={ blockDefault }
@@ -63,18 +61,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
 					</>
 				) }
 				renderContent={ () => (
-					<>
-						<SearchForm
-							onChange={ setFilterValue }
-							className="wp-block-template-part__placeholder-preview-search-form"
-						/>
-						<div className="wp-block-template-part__placeholder-preview-container">
-							<TemplatePartPreviews
-								setAttributes={ setAttributes }
-								filterValue={ filterValue }
-							/>
-						</div>
-					</>
+					<TemplatePartSelection setAttributes={ setAttributes } />
 				) }
 			/>
 		</Placeholder>
diff --git a/packages/block-library/src/template-part/edit/selection/index.js b/packages/block-library/src/template-part/edit/selection/index.js
new file mode 100644
index 00000000000000..ce2f86405d992f
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/selection/index.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalSearchForm as SearchForm } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import TemplatePartPreviews from './template-part-previews';
+
+export default function TemplatePartSelection( { setAttributes } ) {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	return (
+		<>
+			<SearchForm
+				onChange={ setFilterValue }
+				className="wp-block-template-part__placeholder-preview-search-form"
+			/>
+			<div className="wp-block-template-part__placeholder-preview-container">
+				<TemplatePartPreviews
+					setAttributes={ setAttributes }
+					filterValue={ filterValue }
+				/>
+			</div>
+		</>
+	);
+}
diff --git a/packages/block-library/src/template-part/edit/placeholder/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js
similarity index 100%
rename from packages/block-library/src/template-part/edit/placeholder/template-part-previews.js
rename to packages/block-library/src/template-part/edit/selection/template-part-previews.js

From 5c60f20fd5457cf0dbc6676e9aa3e77e58b40e2f Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 1 Sep 2020 18:10:11 -0400
Subject: [PATCH 2/9] update class names

---
 .../src/template-part/edit/selection/index.js      |  4 ++--
 .../edit/selection/template-part-previews.js       | 12 ++++++------
 .../block-library/src/template-part/editor.scss    | 14 +++++++-------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/selection/index.js b/packages/block-library/src/template-part/edit/selection/index.js
index ce2f86405d992f..fb64c1a812390c 100644
--- a/packages/block-library/src/template-part/edit/selection/index.js
+++ b/packages/block-library/src/template-part/edit/selection/index.js
@@ -14,9 +14,9 @@ export default function TemplatePartSelection( { setAttributes } ) {
 		<>
 			<SearchForm
 				onChange={ setFilterValue }
-				className="wp-block-template-part__placeholder-preview-search-form"
+				className="wp-block-template-part__selection-preview-search-form"
 			/>
-			<div className="wp-block-template-part__placeholder-preview-container">
+			<div className="wp-block-template-part__selection-preview-container">
 				<TemplatePartPreviews
 					setAttributes={ setAttributes }
 					filterValue={ filterValue }
diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js
index 1dd45289f5d18f..21dc67886d6887 100644
--- a/packages/block-library/src/template-part/edit/selection/template-part-previews.js
+++ b/packages/block-library/src/template-part/edit/selection/template-part-previews.js
@@ -17,7 +17,7 @@ import { groupBy, uniq, deburr } from 'lodash';
 
 function PreviewPlaceholder() {
 	return (
-		<div className="wp-block-template-part__placeholder-preview-item is-placeholder" />
+		<div className="wp-block-template-part__selection-preview-item is-placeholder" />
 	);
 }
 
@@ -49,7 +49,7 @@ function TemplatePartItem( { templatePart, setAttributes } ) {
 
 	return (
 		<div
-			className="wp-block-template-part__placeholder-preview-item"
+			className="wp-block-template-part__selection-preview-item"
 			role="button"
 			onClick={ onClick }
 			onKeyDown={ ( event ) => {
@@ -61,7 +61,7 @@ function TemplatePartItem( { templatePart, setAttributes } ) {
 			aria-label={ templatePart.slug }
 		>
 			<BlockPreview blocks={ blocks } />
-			<div className="wp-block-template-part__placeholder-preview-item-title">
+			<div className="wp-block-template-part__selection-preview-item-title">
 				{ templatePart.slug }
 			</div>
 		</div>
@@ -71,13 +71,13 @@ function TemplatePartItem( { templatePart, setAttributes } ) {
 function PanelGroup( { title, icon, children } ) {
 	return (
 		<>
-			<div className="wp-block-template-part__placeholder-panel-group-header">
-				<span className="wp-block-template-part__placeholder-panel-group-title">
+			<div className="wp-block-template-part__selection-panel-group-header">
+				<span className="wp-block-template-part__selection-panel-group-title">
 					{ title }
 				</span>
 				<Icon icon={ icon } />
 			</div>
-			<div className="wp-block-template-part__placeholder-panel-group-content">
+			<div className="wp-block-template-part__selection-panel-group-content">
 				{ children }
 			</div>
 		</>
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 87e9a5dbb4f584..1332b3aba6bb59 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -6,15 +6,15 @@
 	}
 }
 
-.wp-block-template-part__placeholder-preview-search-form {
+.wp-block-template-part__selection-preview-search-form {
 	border-bottom: $border-width solid $gray-200;
 }
 
-.wp-block-template-part__placeholder-preview-container {
+.wp-block-template-part__selection-preview-container {
 	background: $white;
 	padding-bottom: 16px;
 
-	.wp-block-template-part__placeholder-preview-item {
+	.wp-block-template-part__selection-preview-item {
 		border-radius: $radius-block-ui;
 		cursor: pointer;
 		margin-top: $grid-unit-20;
@@ -37,21 +37,21 @@
 		}
 	}
 
-	.wp-block-template-part__placeholder-preview-item-title {
+	.wp-block-template-part__selection-preview-item-title {
 		padding: $grid-unit-05;
 		font-size: 12px;
 		text-align: left;
 	}
 
-	.wp-block-template-part__placeholder-panel-group-header {
+	.wp-block-template-part__selection-panel-group-header {
 		padding: $grid-unit-20 $grid-unit-20 0;
 	}
 
-	.wp-block-template-part__placeholder-panel-group-content {
+	.wp-block-template-part__selection-panel-group-content {
 		padding: 0 $grid-unit-20;
 	}
 
-	.wp-block-template-part__placeholder-panel-group-title {
+	.wp-block-template-part__selection-panel-group-title {
 		color: var(--wp-admin-theme-color);
 		text-transform: uppercase;
 		font-size: 11px;

From 34f47e80af40be48a0ca92b437d6127ec11b2f90 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 1 Sep 2020 18:18:16 -0400
Subject: [PATCH 3/9] another classname

---
 packages/block-library/src/template-part/edit/index.js | 4 ++--
 packages/block-library/src/template-part/editor.scss   | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 887a52326e7e49..be289016e33b1f 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -75,7 +75,7 @@ export default function TemplatePartEdit( {
 						setAttributes={ setAttributes }
 					/>
 					<Dropdown
-						contentClassName="wp-block-template-part__placeholder-preview-dropdown-content"
+						contentClassName="wp-block-template-part__preview-dropdown-content"
 						position="bottom right left"
 						renderToggle={ ( { isOpen, onToggle } ) => (
 							<>
@@ -84,7 +84,7 @@ export default function TemplatePartEdit( {
 									onClick={ onToggle }
 									aria-expanded={ isOpen }
 								>
-									{ __( 'Choose existing' ) }
+									{ __( 'Choose another' ) }
 								</Button>
 							</>
 						) }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 1332b3aba6bb59..f41575969c5a49 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -1,5 +1,6 @@
 
-.wp-block-template-part__placeholder-preview-dropdown-content {
+.wp-block-template-part__placeholder-preview-dropdown-content,
+.wp-block-template-part__preview-dropdown-content {
 	.components-popover__content {
 		min-width: 320px;
 		padding: 0;

From 435000ce1ae12028f86f0eef2ee268684979e954 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 1 Sep 2020 18:53:41 -0400
Subject: [PATCH 4/9] use an icon

---
 .../src/template-part/edit/index.js            | 18 ++++++++----------
 .../src/template-part/editor.scss              |  4 ++++
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index be289016e33b1f..5640f6c72feda7 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -9,7 +9,7 @@ import {
 } from '@wordpress/block-editor';
 import { Dropdown, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
+import { update } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -75,18 +75,16 @@ export default function TemplatePartEdit( {
 						setAttributes={ setAttributes }
 					/>
 					<Dropdown
+						className="wp-block-template-part__preview-dropdown-button"
 						contentClassName="wp-block-template-part__preview-dropdown-content"
 						position="bottom right left"
 						renderToggle={ ( { isOpen, onToggle } ) => (
-							<>
-								<Button
-									isPrimary
-									onClick={ onToggle }
-									aria-expanded={ isOpen }
-								>
-									{ __( 'Choose another' ) }
-								</Button>
-							</>
+							<Button
+								label={ __( 'Choose another' ) }
+								onClick={ onToggle }
+								aria-expanded={ isOpen }
+								icon={ update }
+							/>
 						) }
 						renderContent={ () => (
 							<TemplatePartSelection
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index f41575969c5a49..673ba28111d3b6 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -7,6 +7,10 @@
 	}
 }
 
+.wp-block-template-part__preview-dropdown-button {
+	border-right: $border-width solid $gray-900;
+}
+
 .wp-block-template-part__selection-preview-search-form {
 	border-bottom: $border-width solid $gray-200;
 }

From 61288affb379490bc13247c31819c50ea07ebe9e Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 1 Sep 2020 19:04:48 -0400
Subject: [PATCH 5/9] add onClose

---
 .../src/template-part/edit/index.js              |  3 ++-
 .../src/template-part/edit/placeholder/index.js  |  7 +++++--
 .../src/template-part/edit/selection/index.js    |  3 ++-
 .../edit/selection/template-part-previews.js     | 16 +++++++++++++---
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 5640f6c72feda7..5fe21ac35f146d 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -86,9 +86,10 @@ export default function TemplatePartEdit( {
 								icon={ update }
 							/>
 						) }
-						renderContent={ () => (
+						renderContent={ ( { onClose } ) => (
 							<TemplatePartSelection
 								setAttributes={ setAttributes }
+								onClose={ onClose }
 							/>
 						) }
 					/>
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 86af07f4c088dc..7359538cd00f54 100644
--- a/packages/block-library/src/template-part/edit/placeholder/index.js
+++ b/packages/block-library/src/template-part/edit/placeholder/index.js
@@ -60,8 +60,11 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
 						</Button>
 					</>
 				) }
-				renderContent={ () => (
-					<TemplatePartSelection setAttributes={ setAttributes } />
+				renderContent={ ( { onClose } ) => (
+					<TemplatePartSelection
+						setAttributes={ setAttributes }
+						onClose={ onClose }
+					/>
 				) }
 			/>
 		</Placeholder>
diff --git a/packages/block-library/src/template-part/edit/selection/index.js b/packages/block-library/src/template-part/edit/selection/index.js
index fb64c1a812390c..786aac0f3f5914 100644
--- a/packages/block-library/src/template-part/edit/selection/index.js
+++ b/packages/block-library/src/template-part/edit/selection/index.js
@@ -8,7 +8,7 @@ import { useState } from '@wordpress/element';
  */
 import TemplatePartPreviews from './template-part-previews';
 
-export default function TemplatePartSelection( { setAttributes } ) {
+export default function TemplatePartSelection( { setAttributes, onClose } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	return (
 		<>
@@ -20,6 +20,7 @@ export default function TemplatePartSelection( { setAttributes } ) {
 				<TemplatePartPreviews
 					setAttributes={ setAttributes }
 					filterValue={ filterValue }
+					onClose={ onClose }
 				/>
 			</div>
 		</>
diff --git a/packages/block-library/src/template-part/edit/selection/template-part-previews.js b/packages/block-library/src/template-part/edit/selection/template-part-previews.js
index 21dc67886d6887..540e93c88daa0c 100644
--- a/packages/block-library/src/template-part/edit/selection/template-part-previews.js
+++ b/packages/block-library/src/template-part/edit/selection/template-part-previews.js
@@ -21,7 +21,7 @@ function PreviewPlaceholder() {
 	);
 }
 
-function TemplatePartItem( { templatePart, setAttributes } ) {
+function TemplatePartItem( { templatePart, setAttributes, onClose } ) {
 	const {
 		id,
 		slug,
@@ -45,6 +45,7 @@ function TemplatePartItem( { templatePart, setAttributes } ) {
 				type: 'snackbar',
 			}
 		);
+		onClose();
 	}, [ id, slug, theme ] );
 
 	return (
@@ -84,7 +85,7 @@ function PanelGroup( { title, icon, children } ) {
 	);
 }
 
-function TemplatePartsByTheme( { templateParts, setAttributes } ) {
+function TemplatePartsByTheme( { templateParts, setAttributes, onClose } ) {
 	const templatePartsByTheme = useMemo( () => {
 		return Object.values( groupBy( templateParts, 'meta.theme' ) );
 	}, [ templateParts ] );
@@ -101,6 +102,7 @@ function TemplatePartsByTheme( { templateParts, setAttributes } ) {
 						key={ templatePart.id }
 						templatePart={ templatePart }
 						setAttributes={ setAttributes }
+						onClose={ onClose }
 					/>
 				) : (
 					<PreviewPlaceholder key={ templatePart.id } />
@@ -114,6 +116,7 @@ function TemplatePartSearchResults( {
 	templateParts,
 	setAttributes,
 	filterValue,
+	onClose,
 } ) {
 	const filteredTPs = useMemo( () => {
 		// Filter based on value.
@@ -164,6 +167,7 @@ function TemplatePartSearchResults( {
 					key={ templatePart.id }
 					templatePart={ templatePart }
 					setAttributes={ setAttributes }
+					onClose={ onClose }
 				/>
 			) : (
 				<PreviewPlaceholder key={ templatePart.id } />
@@ -172,7 +176,11 @@ function TemplatePartSearchResults( {
 	) );
 }
 
-export default function TemplateParts( { setAttributes, filterValue } ) {
+export default function TemplateParts( {
+	setAttributes,
+	filterValue,
+	onClose,
+} ) {
 	const templateParts = useSelect( ( select ) => {
 		const publishedTemplateParts = select( 'core' ).getEntityRecords(
 			'postType',
@@ -212,6 +220,7 @@ export default function TemplateParts( { setAttributes, filterValue } ) {
 				templateParts={ templateParts }
 				setAttributes={ setAttributes }
 				filterValue={ filterValue }
+				onClose={ onClose }
 			/>
 		);
 	}
@@ -220,6 +229,7 @@ export default function TemplateParts( { setAttributes, filterValue } ) {
 		<TemplatePartsByTheme
 			templateParts={ templateParts }
 			setAttributes={ setAttributes }
+			onClose={ onClose }
 		/>
 	);
 }

From 539603da60440d3c8f1f439c2c3956473e71967d Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 1 Sep 2020 19:06:35 -0400
Subject: [PATCH 6/9] search form needs value...

---
 packages/block-library/src/template-part/edit/selection/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/template-part/edit/selection/index.js b/packages/block-library/src/template-part/edit/selection/index.js
index 786aac0f3f5914..678d4783ba3014 100644
--- a/packages/block-library/src/template-part/edit/selection/index.js
+++ b/packages/block-library/src/template-part/edit/selection/index.js
@@ -13,6 +13,7 @@ export default function TemplatePartSelection( { setAttributes, onClose } ) {
 	return (
 		<>
 			<SearchForm
+				value={ filterValue }
 				onChange={ setFilterValue }
 				className="wp-block-template-part__selection-preview-search-form"
 			/>

From 8a0c7b6b8fb606e473304fc0878cf4f43f3325e8 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 4 Sep 2020 13:17:28 -0400
Subject: [PATCH 7/9] updated styles to support dropdown from name panel

---
 .../src/template-part/edit/index.js           | 50 ++++++++++---------
 .../src/template-part/editor.scss             | 35 +++++++------
 2 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 5fe21ac35f146d..5ea84a299cd96b 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -9,7 +9,7 @@ import {
 } from '@wordpress/block-editor';
 import { Dropdown, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { update } from '@wordpress/icons';
+import { chevronUp, chevronDown } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -70,29 +70,31 @@ export default function TemplatePartEdit( {
 		return (
 			<BlockWrapper>
 				<BlockControls>
-					<TemplatePartNamePanel
-						postId={ postId }
-						setAttributes={ setAttributes }
-					/>
-					<Dropdown
-						className="wp-block-template-part__preview-dropdown-button"
-						contentClassName="wp-block-template-part__preview-dropdown-content"
-						position="bottom right left"
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<Button
-								label={ __( 'Choose another' ) }
-								onClick={ onToggle }
-								aria-expanded={ isOpen }
-								icon={ update }
-							/>
-						) }
-						renderContent={ ( { onClose } ) => (
-							<TemplatePartSelection
-								setAttributes={ setAttributes }
-								onClose={ onClose }
-							/>
-						) }
-					/>
+					<div className="wp-block-template-part__block-control-group">
+						<TemplatePartNamePanel
+							postId={ postId }
+							setAttributes={ setAttributes }
+						/>
+						<Dropdown
+							className="wp-block-template-part__preview-dropdown-button"
+							contentClassName="wp-block-template-part__preview-dropdown-content"
+							position="bottom right left"
+							renderToggle={ ( { isOpen, onToggle } ) => (
+								<Button
+									label={ __( 'Choose another' ) }
+									onClick={ onToggle }
+									aria-expanded={ isOpen }
+									icon={ isOpen ? chevronUp : chevronDown }
+								/>
+							) }
+							renderContent={ ( { onClose } ) => (
+								<TemplatePartSelection
+									setAttributes={ setAttributes }
+									onClose={ onClose }
+								/>
+							) }
+						/>
+					</div>
 				</BlockControls>
 				<TemplatePartInnerBlocks
 					postId={ postId }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 673ba28111d3b6..d379c7f655a4f8 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -7,10 +7,6 @@
 	}
 }
 
-.wp-block-template-part__preview-dropdown-button {
-	border-right: $border-width solid $gray-900;
-}
-
 .wp-block-template-part__selection-preview-search-form {
 	border-bottom: $border-width solid $gray-200;
 }
@@ -64,21 +60,28 @@
 	}
 }
 
-.wp-block-template-part__name-panel {
-	background-color: $white;
-	box-shadow: 0 0 0 $border-width $gray-900;
-	outline: 1px solid transparent;
-	padding: $grid-unit-10 $grid-unit-15;
+.wp-block-template-part__block-control-group {
+	display: flex;
+
+	.wp-block-template-part__name-panel {
+		background-color: $white;
+		outline: 1px solid transparent;
+		padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-15;
 
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-		margin-bottom: 0;
+		.components-base-control__field {
+			align-items: center;
+			display: flex;
+			margin-bottom: 0;
+		}
+
+		.components-base-control__label {
+			margin-bottom: 0;
+			margin-right: 8px;
+		}
 	}
 
-	.components-base-control__label {
-		margin-bottom: 0;
-		margin-right: 8px;
+	.wp-block-template-part__preview-dropdown-button {
+		border-right: $border-width solid $gray-900;
 	}
 }
 

From eb3ff1dc14ec824badc5fd685cd2f6e9612575ff Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Fri, 4 Sep 2020 13:27:26 -0400
Subject: [PATCH 8/9] missing newline, lol

---
 packages/block-library/src/template-part/edit/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 5ea84a299cd96b..e3401ceb9ffc71 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -10,6 +10,7 @@ import {
 import { Dropdown, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { chevronUp, chevronDown } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */

From e2d7e04abbb3fe678162f3b5b0fd7998dfaed947 Mon Sep 17 00:00:00 2001
From: Addison-Stavlo <stavz01@gmail.com>
Date: Tue, 8 Sep 2020 17:36:34 -0400
Subject: [PATCH 9/9] disable button when open

---
 .../block-library/src/template-part/edit/index.js     | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index e3401ceb9ffc71..c6936a83c5e56e 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -7,7 +7,7 @@ import {
 	BlockControls,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
-import { Dropdown, Button } from '@wordpress/components';
+import { Dropdown, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { chevronUp, chevronDown } from '@wordpress/icons';
 
@@ -81,11 +81,14 @@ export default function TemplatePartEdit( {
 							contentClassName="wp-block-template-part__preview-dropdown-content"
 							position="bottom right left"
 							renderToggle={ ( { isOpen, onToggle } ) => (
-								<Button
-									label={ __( 'Choose another' ) }
-									onClick={ onToggle }
+								<ToolbarButton
 									aria-expanded={ isOpen }
 									icon={ isOpen ? chevronUp : chevronDown }
+									label={ __( 'Choose another' ) }
+									onClick={ onToggle }
+									// Disable when open to prevent odd FireFox bug causing reopening.
+									// As noted in https://github.com/WordPress/gutenberg/pull/24990#issuecomment-689094119 .
+									disabled={ isOpen }
 								/>
 							) }
 							renderContent={ ( { onClose } ) => (