diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 64aaeaac2f9d1..c6936a83c5e56 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -7,6 +7,9 @@ import {
 	BlockControls,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
+import { Dropdown, ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { chevronUp, chevronDown } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -15,6 +18,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 },
@@ -67,10 +71,34 @@ export default function TemplatePartEdit( {
 		return (
 			<BlockWrapper>
 				<BlockControls>
-					<TemplatePartNamePanel
-						postId={ postId }
-						setAttributes={ setAttributes }
-					/>
+					<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 } ) => (
+								<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 } ) => (
+								<TemplatePartSelection
+									setAttributes={ setAttributes }
+									onClose={ onClose }
+								/>
+							) }
+						/>
+					</div>
 				</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 c5b0297f59df1..7359538cd00f5 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 }
@@ -62,19 +60,11 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
 						</Button>
 					</>
 				) }
-				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>
-					</>
+				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
new file mode 100644
index 0000000000000..678d4783ba301
--- /dev/null
+++ b/packages/block-library/src/template-part/edit/selection/index.js
@@ -0,0 +1,29 @@
+/**
+ * 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, onClose } ) {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	return (
+		<>
+			<SearchForm
+				value={ filterValue }
+				onChange={ setFilterValue }
+				className="wp-block-template-part__selection-preview-search-form"
+			/>
+			<div className="wp-block-template-part__selection-preview-container">
+				<TemplatePartPreviews
+					setAttributes={ setAttributes }
+					filterValue={ filterValue }
+					onClose={ onClose }
+				/>
+			</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 87%
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
index 1dd45289f5d18..540e93c88daa0 100644
--- 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
@@ -17,11 +17,11 @@ 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" />
 	);
 }
 
-function TemplatePartItem( { templatePart, setAttributes } ) {
+function TemplatePartItem( { templatePart, setAttributes, onClose } ) {
 	const {
 		id,
 		slug,
@@ -45,11 +45,12 @@ function TemplatePartItem( { templatePart, setAttributes } ) {
 				type: 'snackbar',
 			}
 		);
+		onClose();
 	}, [ id, slug, theme ] );
 
 	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 +62,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,20 +72,20 @@ 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>
 		</>
 	);
 }
 
-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 }
 		/>
 	);
 }
diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
index 87e9a5dbb4f58..d379c7f655a4f 100644
--- a/packages/block-library/src/template-part/editor.scss
+++ b/packages/block-library/src/template-part/editor.scss
@@ -1,20 +1,21 @@
 
-.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;
 	}
 }
 
-.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 +38,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;
@@ -59,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;
 
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-		margin-bottom: 0;
+	.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__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;
 	}
 }