Add ability to preview template in post editor for non administrators

lib/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php

@@ -0,0 +1,66 @@
+<?php
+/**
+ * REST API: Gutenberg_REST_Templates_Controller_6_6 class
+ *
+ * @package    gutenberg
+ */
+
+/**
+ * Gutenberg_REST_Templates_Controller_6_6 class
+ *
+ * Templates and template parts currently only allow access to administrators with the
+ * `edit_theme_options` capability. In order to allow other roles to also view the templates,
+ * we need to override the permissions check for the REST API endpoints.
+ */
+class Gutenberg_REST_Templates_Controller_6_6 extends Gutenberg_REST_Templates_Controller_6_4 {
+
+	/**
+	 * Checks if a given request has access to read templates.
+	 *
+	 * @since 6.6
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
+	 */
+	public function get_items_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		/*
+		 * Allow access to anyone who can edit posts.
+		 */
+		if ( ! current_user_can( 'edit_posts' ) ) {
+			return new WP_Error(
+				'rest_cannot_manage_templates',
+				__( 'Sorry, you are not allowed to access the templates on this site.', 'default' ),
+				array(
+					'status' => rest_authorization_required_code(),
+				)
+			);
+		}
+
+		return true;
+	}
+
+	/**
+	 * Checks if a given request has access to read templates.
+	 *
+	 * @since 6.6
+	 *
+	 * @param WP_REST_Request $request Full details about the request.
+	 * @return true|WP_Error True if the request has read access, WP_Error object otherwise.
+	 */
+	public function get_item_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+		/*
+		 * Allow access to anyone who can edit posts.
+		 */
+		if ( ! current_user_can( 'edit_posts' ) ) {
+			return new WP_Error(
+				'rest_cannot_manage_templates',
+				__( 'Sorry, you are not allowed to access the templates on this site.', 'default' ),
+				array(
+					'status' => rest_authorization_required_code(),
+				)
+			);
+		}
+
+		return true;
+	}
+}

lib/compat/wordpress-6.6/rest-api.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * PHP and WordPress configuration compatibility functions for the Gutenberg
+ * editor plugin changes related to REST API.
+ *
+ * @package gutenberg
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	die( 'Silence is golden.' );
+}
+
+if ( ! function_exists( 'wp_api_template_access_controller' ) ) {
+	/**
+	 * Hook in to the template and template part post types and modify the
+	 * access control for the rest endpoint to allow lower user roles to access
+	 * the templates and template parts.
+	 *
+	 * @param array  $args Current registered post type args.
+	 * @param string $post_type Name of post type.
+	 *
+	 * @return array
+	 */
+	function wp_api_template_access_controller( $args, $post_type ) {
+		if ( 'wp_template' === $post_type || 'wp_template_part' === $post_type ) {
+			$args['rest_controller_class'] = 'Gutenberg_REST_Templates_Controller_6_6';
+		}
+		return $args;
+	}
+}
+add_filter( 'register_post_type_args', 'wp_api_template_access_controller', 10, 2 );

lib/load.php

@@ -46,6 +46,10 @@ function gutenberg_is_experiment_enabled( $name ) {
 	require_once __DIR__ . '/compat/wordpress-6.5/class-gutenberg-rest-global-styles-revisions-controller-6-5.php';
 	require_once __DIR__ . '/compat/wordpress-6.5/rest-api.php';
 
+	// WordPress 6.6 compat.
+	require_once __DIR__ . '/compat/wordpress-6.6/class-gutenberg-rest-templates-controller-6-6.php';
+	require_once __DIR__ . '/compat/wordpress-6.6/rest-api.php';
+
 	// Plugin specific code.
 	require_once __DIR__ . '/class-wp-rest-global-styles-controller-gutenberg.php';
 	require_once __DIR__ . '/rest-api.php';

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

@@ -7,6 +7,8 @@ import {
 	useBlockProps,
 	Warning,
 	store as blockEditorStore,
+	useInnerBlocksProps,
+	useSettings,
 	RecursionProvider,
 	useHasRecursion,
 	InspectorControls,
@@ -15,7 +17,7 @@ import {
 import { PanelBody, Spinner, Modal, MenuItem } from '@wordpress/components';
 import { useAsyncList } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -88,12 +90,53 @@ function TemplatesList( { availableTemplates, onSelect } ) {
 	);
 }
 
+function NonEditableTemplatePartPreview( {
+	postId: id,
+	layout,
+	tagName: TagName,
+	blockProps,
+} ) {
+	const themeSupportsLayout = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings()?.supportsLayout;
+	}, [] );
+	const [ defaultLayout ] = useSettings( 'layout' );
+	const usedLayout = layout?.inherit ? defaultLayout || {} : layout;
+
+	const [ blocks ] = useEntityBlockEditor( 'postType', 'wp_template_part', {
+		id,
+		context: 'view',
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		onChange: () => {},
+		onInput: () => {},
+		renderAppender: undefined,
+		layout: themeSupportsLayout ? usedLayout : undefined,
+	} );
+
+	return <TagName { ...innerBlocksProps } />;
+}
+
 export default function TemplatePartEdit( {
 	attributes,
 	setAttributes,
 	clientId,
 } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { canEditTemplatePart, canViewTemplatePart } = useSelect(
+		( select ) => ( {
+			canEditTemplatePart:
+				select( coreStore ).canUser( 'create', 'template-parts' ) ??
+				false,
+			canViewTemplatePart:
+				select( coreStore ).canUser( 'read', 'template-parts' ) ??
+				false,
+		} ),
+		[]
+	);
+
 	const currentTheme = useSelect(
 		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
 		[]
@@ -161,6 +204,23 @@ export default function TemplatePartEdit( {
 		setAttributes
 	);
 
+	if ( ! canEditTemplatePart && canViewTemplatePart ) {
+		return (
+			<RecursionProvider uniqueId={ templatePartId }>
+				<NonEditableTemplatePartPreview
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+					tagName={ TagName }
+					blockProps={ blockProps }
+					postId={ templatePartId }
+					hasInnerBlocks={ hasInnerBlocks }
+					layout={ layout }
+				/>
+			</RecursionProvider>
+		);
+	}
+
 	// 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 (

packages/core-data/src/entity-provider.js

@@ -145,14 +145,19 @@ const parsedBlocksCache = new WeakMap();
  * `BlockEditorProvider` and are intended to be used with it,
  * or similar components or hooks.
  *
- * @param {string} kind         The entity kind.
- * @param {string} name         The entity name.
+ * @param {string} kind              The entity kind.
+ * @param {string} name              The entity name.
  * @param {Object} options
- * @param {string} [options.id] An entity ID to use instead of the context-provided one.
+ * @param {string} [options.id]      An entity ID to use instead of the context-provided one.
+ * @param {string} [options.context] The context param to be passed to the REST API.
  *
  * @return {[WPBlock[], Function, Function]} The block array and setters.
  */
-export function useEntityBlockEditor( kind, name, { id: _id } = {} ) {
+export function useEntityBlockEditor(
+	kind,
+	name,
+	{ id: _id, context = 'edit' } = {}
+) {
 	const providerId = useEntityId( kind, name );
 	const id = _id ?? providerId;
 	const { getEntityRecord, getEntityRecordEdits } = useSelect( STORE_NAME );
@@ -162,7 +167,9 @@ export function useEntityBlockEditor( kind, name, { id: _id } = {} ) {
 				return {};
 			}
 			const { getEditedEntityRecord } = select( STORE_NAME );
-			const editedRecord = getEditedEntityRecord( kind, name, id );
+			const editedRecord = getEditedEntityRecord( kind, name, id, {
+				context,
+			} );
 			return {
 				editedBlocks: editedRecord.blocks,
 				content: editedRecord.content,

packages/edit-post/src/editor.js

@@ -55,12 +55,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,

packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useEffect, useState, useRef } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { __ } from '@wordpress/i18n';
@@ -42,12 +43,20 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 
 	const { createInfoNotice, removeNotice } = useDispatch( noticesStore );
 
+	const canEditTemplate = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'create', 'templates' ) ?? false
+	);
+
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
 
 	const lastNoticeId = useRef( 0 );
 
 	useEffect( () => {
 		const handleClick = async ( event ) => {
+			if ( ! canEditTemplate ) {
+				return;
+			}
 			if ( ! event.target.classList.contains( 'is-root-container' ) ) {
 				return;
 			}
@@ -104,8 +113,13 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 		onNavigateToEntityRecord,
 		templateId,
 		removeNotice,
+		canEditTemplate,
 	] );
 
+	if ( ! canEditTemplate ) {
+		return null;
+	}
+
 	return (
 		<ConfirmDialog
 			isOpen={ isDialogOpen }

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';
 
@@ -48,6 +48,12 @@ export default function BlockThemeControl( { id } ) {
 		'wp_template',
 		id
 	);
+
+	const canCreateTemplate = useSelect(
+		( select ) =>
+			select( coreStore ).canUser( 'create', 'templates' ) ?? false
+	);
+
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const { setRenderingMode } = useDispatch( editorStore );
 
@@ -81,30 +87,33 @@ 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