Quick Edit: add Template field

packages/base-styles/_z-index.scss

@@ -132,6 +132,7 @@ $z-layers: (
 	".editor-action-modal": 1000001,
 	".editor-post-template__swap-template-modal": 1000001,
 	".edit-site-template-panel__replace-template-modal": 1000001,
+	".fields-controls__template-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/edit-site/src/components/post-edit/index.js

@@ -19,6 +19,8 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
  */
 import Page from '../page';
 import { unlock } from '../../lock-unlock';
+import usePatternSettings from '../page-patterns/use-pattern-settings';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 const { PostCardPanel, usePostFields } = unlock( editorPrivateApis );
 
@@ -85,6 +87,12 @@ function PostEditForm( { postType, postId } ) {
 				'slug',
 				'parent',
 				'comment_status',
+				{
+					label: __( 'Template' ),
+					labelPosition: 'side',
+					id: 'template',
+					layout: 'regular',
+				},
 			].filter(
 				( field ) =>
 					ids.length === 1 ||
@@ -139,17 +147,26 @@ function PostEditForm( { postType, postId } ) {
 }
 
 export function PostEdit( { postType, postId } ) {
+	const { ExperimentalBlockEditorProvider } = unlock(
+		blockEditorPrivateApis
+	);
+	const settings = usePatternSettings();
+	// Wrap everything in a block editor provider.
+	// This ensures 'styles' that are needed for the previews are synced
+	// from the site editor store to the block editor store.
 	return (
-		<Page
-			className={ clsx( 'edit-site-post-edit', {
-				'is-empty': ! postId,
-			} ) }
-			label={ __( 'Post Edit' ) }
-		>
-			{ postId && (
-				<PostEditForm postType={ postType } postId={ postId } />
-			) }
-			{ ! postId && <p>{ __( 'Select a page to edit' ) }</p> }
-		</Page>
+		<ExperimentalBlockEditorProvider settings={ settings }>
+			<Page
+				className={ clsx( 'edit-site-post-edit', {
+					'is-empty': ! postId,
+				} ) }
+				label={ __( 'Post Edit' ) }
+			>
+				{ postId && (
+					<PostEditForm postType={ postType } postId={ postId } />
+				) }
+				{ ! postId && <p>{ __( 'Select a page to edit' ) }</p> }
+			</Page>
+		</ExperimentalBlockEditorProvider>
 	);
 }

packages/editor/src/dataviews/store/private-actions.ts

@@ -33,6 +33,7 @@ import {
 	statusField,
 	authorField,
 	titleField,
+	templateField,
 } from '@wordpress/fields';
 import duplicateTemplatePart from '../actions/duplicate-template-part';
 
@@ -169,6 +170,7 @@ export const registerPostTypeSchema =
 			parentField,
 			commentStatusField,
 			passwordField,
+			templateField,
 		];
 
 		registry.batch( () => {

packages/fields/README.md

@@ -98,6 +98,10 @@ Undocumented declaration.
 
 Status field for BasePost.
 
+### templateField
+
+Undocumented declaration.
+
 ### titleField
 
 Undocumented declaration.

packages/fields/package.json

@@ -35,6 +35,7 @@
 		"@babel/runtime": "7.25.7",
 		"@wordpress/api-fetch": "*",
 		"@wordpress/blob": "*",
+		"@wordpress/block-editor": "*",
 		"@wordpress/blocks": "*",
 		"@wordpress/components": "*",
 		"@wordpress/compose": "*",

packages/fields/src/actions/utils.ts

@@ -30,7 +30,9 @@ export function isTemplateOrTemplatePart(
 	return p.type === TEMPLATE_POST_TYPE || p.type === TEMPLATE_PART_POST_TYPE;
 }
 
-export function getItemTitle( item: Post ) {
+export function getItemTitle( item: {
+	title: string | { rendered: string } | { raw: string };
+} ) {
 	if ( typeof item.title === 'string' ) {
 		return decodeEntities( item.title );
 	}

packages/fields/src/fields/index.ts

@@ -2,6 +2,7 @@ export { default as slugField } from './slug';
 export { default as titleField } from './title';
 export { default as orderField } from './order';
 export { default as featuredImageField } from './featured-image';
+export { default as templateField } from './template';
 export { default as parentField } from './parent';
 export { default as passwordField } from './password';
 export { default as statusField } from './status';

packages/fields/src/fields/template/index.ts

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+
+/**
+ * Internal dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import type { BasePost } from '../../types';
+import { TemplateEdit } from './template-edit';
+
+const templateField: Field< BasePost > = {
+	id: 'template',
+	type: 'text',
+	label: __( 'Template' ),
+	getValue: ( { item } ) => item.template,
+	Edit: TemplateEdit,
+	enableSorting: false,
+};
+
+export default templateField;

packages/fields/src/fields/template/style.scss

@@ -0,0 +1,23 @@
+.fields-controls__template-modal {
+	z-index: z-index(".fields-controls__template-modal");
+}
+
+.fields-controls__template-content .block-editor-block-patterns-list {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	// Small top padding required to avoid cutting off the visible outline when hovering items
+	padding-top: $border-width-focus-fallback;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+
+	.block-editor-block-patterns-list__list-item {
+		break-inside: avoid-column;
+	}
+}