From e44ba473daa2821d5ae38fc83e1023282d404661 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20K=C3=A4gy?= <mail@fabian-kaegy.de>
Date: Wed, 17 Apr 2024 12:40:21 +0200
Subject: [PATCH] Enable template preview in post editor for non administrators
 (#60447)

Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
---
 .../src/template-part/edit/index.js           | 35 +++++++-----
 packages/edit-post/src/editor.js              |  4 +-
 .../edit-template-blocks-notification.js      | 16 +++++-
 .../components/post-template/block-theme.js   | 53 +++++++++++--------
 4 files changed, 69 insertions(+), 39 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index 5af3ede02b677e..52d740735eaf61 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -128,6 +128,7 @@ export default function TemplatePartEdit( {
 		area,
 		onNavigateToEntityRecord,
 		title,
+		canEditTemplate,
 	} = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
@@ -150,6 +151,9 @@ export default function TemplatePartEdit( {
 				  )
 				: false;
 
+			const _canEditTemplate =
+				select( coreStore ).canUser( 'create', 'templates' ) ?? false;
+
 			return {
 				hasInnerBlocks: getBlockCount( clientId ) > 0,
 				isResolved: hasResolvedEntity,
@@ -161,6 +165,7 @@ export default function TemplatePartEdit( {
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
 				title: entityRecord?.title,
+				canEditTemplate: _canEditTemplate,
 			};
 		},
 		[ templatePartId, attributes.area, clientId ]
@@ -228,20 +233,22 @@ export default function TemplatePartEdit( {
 	return (
 		<>
 			<RecursionProvider uniqueId={ templatePartId }>
-				{ isEntityAvailable && onNavigateToEntityRecord && (
-					<BlockControls group="other">
-						<ToolbarButton
-							onClick={ () =>
-								onNavigateToEntityRecord( {
-									postId: templatePartId,
-									postType: 'wp_template_part',
-								} )
-							}
-						>
-							{ __( 'Edit' ) }
-						</ToolbarButton>
-					</BlockControls>
-				) }
+				{ isEntityAvailable &&
+					onNavigateToEntityRecord &&
+					canEditTemplate && (
+						<BlockControls group="other">
+							<ToolbarButton
+								onClick={ () =>
+									onNavigateToEntityRecord( {
+										postId: templatePartId,
+										postType: 'wp_template_part',
+									} )
+								}
+							>
+								{ __( 'Edit' ) }
+							</ToolbarButton>
+						</BlockControls>
+					) }
 				<InspectorControls group="advanced">
 					<TemplatePartAdvancedControls
 						tagName={ tagName }
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
index 9d6dfefa7ec6a3..378265c1927788 100644
--- a/packages/edit-post/src/editor.js
+++ b/packages/edit-post/src/editor.js
@@ -58,12 +58,12 @@ function Editor( {
 				getEditorSettings().supportsTemplateMode;
 			const isViewable =
 				getPostType( currentPost.postType )?.viewable ?? false;
-			const canEditTemplate = canUser( 'create', 'templates' );
+			const canViewTemplate = canUser( 'read', 'templates' );
 			return {
 				template:
 					supportsTemplateMode &&
 					isViewable &&
-					canEditTemplate &&
+					canViewTemplate &&
 					currentPost.postType !== 'wp_template'
 						? getEditedPostTemplate()
 						: null,
diff --git a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js b/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js
index 9bb4ab667e45b1..98b67216bf5038 100644
--- a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js
+++ b/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
@@ -37,10 +38,19 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 		};
 	}, [] );
 
+	const canEditTemplate = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'create', 'templates' ) ?? false
+	);
+
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
 
 	useEffect( () => {
 		const handleDblClick = ( event ) => {
+			if ( ! canEditTemplate ) {
+				return;
+			}
+
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
 				return;
 			}
@@ -52,7 +62,11 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 		return () => {
 			canvas?.removeEventListener( 'dblclick', handleDblClick );
 		};
-	}, [ contentRef ] );
+	}, [ contentRef, canEditTemplate ] );
+
+	if ( ! canEditTemplate ) {
+		return null;
+	}
 
 	return (
 		<ConfirmDialog
diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js
index 3ad4966a44ecce..023dd895ba5ec6 100644
--- a/packages/editor/src/components/post-template/block-theme.js
+++ b/packages/editor/src/components/post-template/block-theme.js
@@ -5,7 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEntityRecord } from '@wordpress/core-data';
+import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -51,6 +51,11 @@ export default function BlockThemeControl( { id } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { setRenderingMode } = useDispatch( editorStore );
 
+	const canCreateTemplate = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'create', 'templates' ) ?? false
+	);
+
 	if ( ! hasResolved ) {
 		return null;
 	}
@@ -81,30 +86,34 @@ export default function BlockThemeControl( { id } ) {
 			{ ( { onClose } ) => (
 				<>
 					<MenuGroup>
-						<MenuItem
-							onClick={ () => {
-								onNavigateToEntityRecord( {
-									postId: template.id,
-									postType: 'wp_template',
-								} );
-								onClose();
-								createSuccessNotice(
-									__(
-										'Editing template. Changes made here affect all posts and pages that use the template.'
-									),
-									{
-										type: 'snackbar',
-										actions: notificationAction,
-									}
-								);
-							} }
-						>
-							{ __( 'Edit template' ) }
-						</MenuItem>
+						{ canCreateTemplate && (
+							<MenuItem
+								onClick={ () => {
+									onNavigateToEntityRecord( {
+										postId: template.id,
+										postType: 'wp_template',
+									} );
+									onClose();
+									createSuccessNotice(
+										__(
+											'Editing template. Changes made here affect all posts and pages that use the template.'
+										),
+										{
+											type: 'snackbar',
+											actions: notificationAction,
+										}
+									);
+								} }
+							>
+								{ __( 'Edit template' ) }
+							</MenuItem>
+						) }
 
 						<SwapTemplateButton onClick={ onClose } />
 						<ResetDefaultTemplate onClick={ onClose } />
-						<CreateNewTemplate onClick={ onClose } />
+						{ canCreateTemplate && (
+							<CreateNewTemplate onClick={ onClose } />
+						) }
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem