Page editor: double-click to edit template part (#65024)

Adds a doubleclick handler to template part block if the content has `contentOnly` editing mode. Also tighten up the doubleclick handler that triggers the edit template modal. It should not trigger when clicking on template parts now that there's a second double click handler. Co-authored-by: ramonjd <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: noisysocks <[email protected]>
WordPress · Sep 5, 2024 · 9c45985 · 9c45985
1 parent f7fd368
commit 9c45985
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -100,6 +100,12 @@ function EditableTemplatePartInnerBlocks( {
 	tagName: TagName,
 	blockProps,
 } ) {
+	const onNavigateToEntityRecord = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().onNavigateToEntityRecord,
+		[]
+	);
+
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'wp_template_part',
@@ -114,7 +120,20 @@ function EditableTemplatePartInnerBlocks( {
 		layout: useLayout( layout ),
 	} );
 
-	return <TagName { ...innerBlocksProps } />;
+	const blockEditingMode = useBlockEditingMode();
+
+	const customProps =
+		blockEditingMode === 'contentOnly' && onNavigateToEntityRecord
+			? {
+					onDoubleClick: () =>
+						onNavigateToEntityRecord( {
+							postId: id,
+							postType: 'wp_template_part',
+						} ),
+			  }
+			: {};
+
+	return <TagName { ...innerBlocksProps } { ...customProps } />;
 }
 
 export default function TemplatePartInnerBlocks( {

diff --git a/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js b/packages/editor/src/components/visual-editor/edit-template-blocks-notification.js
@@ -55,7 +55,10 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 				return;
 			}
 
-			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
+			if (
+				! event.target.classList.contains( 'is-root-container' ) ||
+				event.target.dataset?.type === 'core/template-part'
+			) {
 				return;
 			}
 			setIsDialogOpen( true );