Add edit template part menu button (#34679)

* Add edit template part menu button

* Fix isTemplatePart

* Use template part name and move it above detach button

* Use getSelectedBlock

* Remove quotation marks

* Directly get from template part id

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

@@ -27,6 +27,7 @@ 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';
 
 const LAYOUT = {
 	type: 'default',
@@ -70,6 +71,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
+			<EditTemplatePartMenuButton />
 			<TemplatePartConverter />
 			<__experimentalLinkControl.ViewerFill>
 				{ useCallback(

packages/edit-site/src/components/edit-template-part-menu-button/index.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	BlockSettingsMenuControls,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { MenuItem } from '@wordpress/components';
+import { isTemplatePart } from '@wordpress/blocks';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+
+export default function EditTemplatePartMenuButton() {
+	const selectedTemplatePart = useSelect( ( select ) => {
+		const block = select( blockEditorStore ).getSelectedBlock();
+
+		if ( block && isTemplatePart( block ) ) {
+			const { theme, slug } = block.attributes;
+
+			return select( coreStore ).getEntityRecord(
+				'postType',
+				'wp_template_part',
+				// Ideally this should be an official public API.
+				`${ theme }//${ slug }`
+			);
+		}
+	}, [] );
+	const { setTemplatePart } = useDispatch( editSiteStore );
+
+	if ( ! selectedTemplatePart ) {
+		return null;
+	}
+
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { onClose } ) => (
+				<MenuItem
+					onClick={ () => {
+						setTemplatePart( selectedTemplatePart.id );
+						onClose();
+					} }
+				>
+					{
+						/* translators: %s: template part title */
+						sprintf( __( 'Edit %s' ), selectedTemplatePart.slug )
+					}
+				</MenuItem>
+			) }
+		</BlockSettingsMenuControls>
+	);
+}