Template Part: Swap block action places

packages/base-styles/_z-index.scss

@@ -139,6 +139,7 @@ $z-layers: (
 	".reusable-blocks-menu-items__convert-modal": 1000001,
 	".edit-site-create-template-part-modal": 1000001,
 	".block-editor-block-lock-modal": 1000001,
+	".block-editor-template-part__selection-modal": 1000001,
 
 	// Note: The ConfirmDialog component's z-index is being set to 1000001 in packages/components/src/confirm-dialog/styles.ts
 	// because it uses emotion and not sass. We need it to render on top its parent popover.

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

@@ -8,22 +8,18 @@ import { isEmpty } from 'lodash';
  */
 import { useSelect } from '@wordpress/data';
 import {
-	BlockControls,
+	BlockSettingsMenuControls,
+	BlockTitle,
 	useBlockProps,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 	Warning,
 	store as blockEditorStore,
+	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 } from '@wordpress/block-editor';
-import {
-	ToolbarGroup,
-	ToolbarButton,
-	Spinner,
-	Modal,
-} from '@wordpress/components';
+import { Spinner, Modal, MenuItem } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState } from '@wordpress/element';
+import { useState, createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -43,6 +39,7 @@ export default function TemplatePartEdit( {
 	attributes,
 	setAttributes,
 	clientId,
+	isSelected,
 } ) {
 	const { slug, theme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
@@ -105,6 +102,14 @@ export default function TemplatePartEdit( {
 	const isEntityAvailable = ! isPlaceholder && ! isMissing && isResolved;
 	const TagName = tagName || areaObject.tagName;
 
+	// The `isSelected` check ensures the `BlockSettingsMenuControls` fill
+	// doesn't render multiple times. The block controls has similar internal check.
+	const canReplace =
+		isSelected &&
+		isEntityAvailable &&
+		hasReplacements &&
+		( area === 'header' || area === 'footer' );
+
 	// We don't want to render a missing state if we have any inner blocks.
 	// A new template part is automatically created if we have any inner blocks but no entity.
 	if (
@@ -158,21 +163,29 @@ export default function TemplatePartEdit( {
 					/>
 				</TagName>
 			) }
-			{ isEntityAvailable &&
-				hasReplacements &&
-				( area === 'header' || area === 'footer' ) && (
-					<BlockControls>
-						<ToolbarGroup className="wp-block-template-part__block-control-group">
-							<ToolbarButton
-								onClick={ () =>
-									setIsTemplatePartSelectionOpen( true )
+			{ canReplace && (
+				<BlockSettingsMenuControls>
+					{ () => (
+						<MenuItem
+							onClick={ () => {
+								setIsTemplatePartSelectionOpen( true );
+							} }
+						>
+							{ createInterpolateElement(
+								__( 'Replace <BlockTitle />' ),
+								{
+									BlockTitle: (
+										<BlockTitle
+											clientId={ clientId }
+											maximumLength={ 25 }
+										/>
+									),
 								}
-							>
-								{ __( 'Replace' ) }
-							</ToolbarButton>
-						</ToolbarGroup>
-					</BlockControls>
-				) }
+							) }
+						</MenuItem>
+					) }
+				</BlockSettingsMenuControls>
+			) }
 			{ isEntityAvailable && (
 				<TemplatePartInnerBlocks
 					tagName={ TagName }
@@ -189,7 +202,7 @@ export default function TemplatePartEdit( {
 			) }
 			{ isTemplatePartSelectionOpen && (
 				<Modal
-					className="block-editor-template-part__selection-modal"
+					overlayClassName="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/editor.scss

@@ -1,14 +1,18 @@
 .block-editor-template-part__selection-modal {
+	z-index: z-index(".block-editor-template-part__selection-modal");
+
 	// To keep modal dimensions consistent as subsections are navigated, width
 	// and height are used instead of max-(width/height).
-	@include break-small() {
-		width: calc(100% - #{ $grid-unit-20 * 2 });
-		height: calc(100% - #{ $header-height * 2 });
-	}
-	@include break-medium() {
-		width: $break-medium - $grid-unit-20 * 2;
-	}
-	@include break-large() {
-		height: 70%;
+	.components-modal__frame {
+		@include break-small() {
+			width: calc(100% - #{ $grid-unit-20 * 2 });
+			height: calc(100% - #{ $header-height * 2 });
+		}
+		@include break-medium() {
+			width: $break-medium - $grid-unit-20 * 2;
+		}
+		@include break-large() {
+			height: 70%;
+		}
 	}
 }

packages/edit-site/src/components/block-editor/index.js

@@ -38,7 +38,6 @@ import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar';
 import { store as editSiteStore } from '../../store';
 import BlockInspectorButton from './block-inspector-button';
-import EditTemplatePartMenuButton from '../edit-template-part-menu-button';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 
@@ -155,7 +154,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
-			<EditTemplatePartMenuButton />
 			<TemplatePartConverter />
 			<__experimentalLinkControl.ViewerFill>
 				{ useCallback(

packages/edit-site/src/hooks/index.js

@@ -2,3 +2,4 @@
  * Internal dependencies
  */
 import './components';
+import './template-part-edit';

packages/edit-site/src/hooks/template-part-edit.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { BlockControls } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { ToolbarButton } from '@wordpress/components';
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { useLocation } from '../components/routes';
+import { useLink } from '../components/routes/link';
+
+function EditTemplatePartMenuItem( { attributes } ) {
+	const { theme, slug } = attributes;
+	const { params } = useLocation();
+	const templatePart = useSelect(
+		( select ) => {
+			return select( coreStore ).getEntityRecord(
+				'postType',
+				'wp_template_part',
+				// Ideally this should be an official public API.
+				`${ theme }//${ slug }`
+			);
+		},
+		[ theme, slug ]
+	);
+
+	const linkProps = useLink(
+		{
+			postId: templatePart?.id,
+			postType: templatePart?.type,
+		},
+		{
+			fromTemplateId: params.postId,
+		}
+	);
+
+	if ( ! templatePart ) {
+		return null;
+	}
+
+	return (
+		<BlockControls group="other">
+			<ToolbarButton
+				{ ...linkProps }
+				onClick={ ( event ) => {
+					linkProps.onClick( event );
+				} }
+			>
+				{ __( 'Edit' ) }
+			</ToolbarButton>
+		</BlockControls>
+	);
+}
+
+export const withEditBlockControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { attributes, name } = props;
+		const isDisplayed = name === 'core/template-part' && attributes.slug;
+
+		return (
+			<>
+				<BlockEdit { ...props } />
+				{ isDisplayed && (
+					<EditTemplatePartMenuItem attributes={ attributes } />
+				) }
+			</>
+		);
+	},
+	'withEditBlockControls'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/edit-site/template-part-edit-button',
+	withEditBlockControls
+);