Turn Template settings panel into a Template popover

packages/base-styles/_z-index.scss

@@ -162,6 +162,9 @@ $z-layers: (
 	// Show tooltips above NUX tips, wp-admin menus, submenus, and sidebar:
 	".components-tooltip": 1000002,
 
+	// Keep template popover underneath 'Create custom template' modal overlay.
+	".edit-post-post-template__dialog": 99999,
+
 	// Make sure corner handles are above side handles for ResizableBox component
 	".components-resizable-box__handle": 2,
 	".components-resizable-box__side-handle": 2,

packages/edit-post/src/components/sidebar/post-status/index.js

@@ -19,6 +19,7 @@ import PostFormat from '../post-format';
 import PostPendingStatus from '../post-pending-status';
 import PluginPostStatusInfo from '../plugin-post-status-info';
 import { store as editPostStore } from '../../../store';
+import PostTemplate from '../post-template';
 
 /**
  * Module Constants
@@ -29,7 +30,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 	return (
 		<PanelBody
 			className="edit-post-post-status"
-			title={ __( 'Status & visibility' ) }
+			title={ __( 'Summary' ) }
 			opened={ isOpened }
 			onToggle={ onTogglePanel }
 		>
@@ -38,6 +39,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 					<>
 						<PostVisibility />
 						<PostSchedule />
+						<PostTemplate />
 						<PostFormat />
 						<PostSticky />
 						<PostPendingStatus />

packages/edit-post/src/components/sidebar/post-template/create-modal.js

@@ -0,0 +1,150 @@
+/**
+ * External dependencies
+ */
+import { kebabCase } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { useState } from '@wordpress/element';
+import { serialize, createBlock } from '@wordpress/blocks';
+import {
+	Modal,
+	Flex,
+	FlexItem,
+	TextControl,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+
+const DEFAULT_TITLE = __( 'Custom Template' );
+
+export default function PostTemplateCreateModal( { onClose } ) {
+	const settings = useSelect(
+		( select ) => select( editorStore ).getEditorSettings(),
+		[]
+	);
+
+	const { __unstableCreateTemplate, __unstableSwitchToTemplateMode } =
+		useDispatch( editPostStore );
+
+	const [ title, setTitle ] = useState( '' );
+
+	const [ isBusy, setIsBusy ] = useState( false );
+
+	const cancel = () => {
+		setTitle( '' );
+		onClose();
+	};
+
+	const submit = async ( event ) => {
+		event.preventDefault();
+
+		if ( isBusy ) {
+			return;
+		}
+
+		setIsBusy( true );
+
+		const newTemplateContent =
+			settings.defaultBlockTemplate ??
+			serialize( [
+				createBlock(
+					'core/group',
+					{
+						tagName: 'header',
+						layout: { inherit: true },
+					},
+					[
+						createBlock( 'core/site-title' ),
+						createBlock( 'core/site-tagline' ),
+					]
+				),
+				createBlock( 'core/separator' ),
+				createBlock(
+					'core/group',
+					{
+						tagName: 'main',
+					},
+					[
+						createBlock(
+							'core/group',
+							{
+								layout: { inherit: true },
+							},
+							[ createBlock( 'core/post-title' ) ]
+						),
+						createBlock( 'core/post-content', {
+							layout: { inherit: true },
+						} ),
+					]
+				),
+			] );
+
+		await __unstableCreateTemplate( {
+			slug: 'wp-custom-template-' + kebabCase( title || DEFAULT_TITLE ),
+			content: newTemplateContent,
+			title: title || DEFAULT_TITLE,
+		} );
+
+		setIsBusy( false );
+		cancel();
+
+		__unstableSwitchToTemplateMode( true );
+	};
+
+	return (
+		<Modal
+			title={ __( 'Create custom template' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ cancel }
+			overlayClassName="edit-post-post-template__modal"
+		>
+			<form onSubmit={ submit }>
+				<Flex align="flex-start" gap={ 8 }>
+					<FlexItem>
+						<TextControl
+							label={ __( 'Name' ) }
+							value={ title }
+							onChange={ setTitle }
+							placeholder={ DEFAULT_TITLE }
+							disabled={ isBusy }
+							help={ __(
+								'Describe the purpose of the template, e.g. "Full Width". Custom templates can be applied to any post or page.'
+							) }
+						/>
+					</FlexItem>
+				</Flex>
+
+				<Flex
+					className="edit-post-template__modal-actions"
+					justify="flex-end"
+					expanded={ false }
+				>
+					<FlexItem>
+						<Button variant="tertiary" onClick={ cancel }>
+							{ __( 'Cancel' ) }
+						</Button>
+					</FlexItem>
+					<FlexItem>
+						<Button
+							variant="primary"
+							type="submit"
+							isBusy={ isBusy }
+							aria-disabled={ isBusy }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}

packages/edit-post/src/components/sidebar/post-template/form.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { addCard } from '@wordpress/icons';
+import { Notice, SelectControl, Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PostTemplateCreateModal from './create-modal';
+
+export default function PostTemplateForm( {
+	isPostsPage,
+	selectedOption,
+	options,
+	canCreate,
+	canEdit,
+	onChange,
+	onEdit,
+	onClose,
+} ) {
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+
+	return (
+		<>
+			<InspectorPopoverHeader
+				title={ __( 'Template' ) }
+				help={ __(
+					'Templates define the way your content is displayed when viewing your site.'
+				) }
+				actions={
+					canCreate
+						? [
+								{
+									icon: addCard,
+									label: __( 'Add template' ),
+									onClick: () => setIsCreateModalOpen( true ),
+								},
+						  ]
+						: []
+				}
+				onClose={ onClose }
+			/>
+			{ isPostsPage ? (
+				<Notice
+					className="edit-post-post-template__notice"
+					status="warning"
+					isDismissible={ false }
+				>
+					{ __( 'The posts page template cannot be changed.' ) }
+				</Notice>
+			) : (
+				<SelectControl
+					hideLabelFromVision
+					label={ __( 'Template' ) }
+					value={ selectedOption?.value ?? '' }
+					options={ options }
+					onChange={ onChange }
+				/>
+			) }
+			{ canEdit && (
+				<p>
+					<Button variant="link" onClick={ onEdit }>
+						{ __( 'Edit template' ) }
+					</Button>
+				</p>
+			) }
+			{ isCreateModalOpen && (
+				<PostTemplateCreateModal
+					onClose={ () => setIsCreateModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}

packages/edit-post/src/components/sidebar/post-template/hook.js

@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+
+export default function usePostTemplateForm() {
+	const isViewable = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		return getPostType( getCurrentPostType() )?.viewable ?? false;
+	}, [] );
+
+	const settings = useSelect(
+		( select ) => select( editorStore ).getEditorSettings(),
+		[]
+	);
+
+	const canUserCreateTemplate = useSelect(
+		( select ) => select( coreStore ).canUser( 'create', 'templates' ),
+		[]
+	);
+
+	const currentPostId = useSelect(
+		( select ) => select( editorStore ).getCurrentPostId(),
+		[]
+	);
+
+	const templates = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( editorStore );
+		const { getEntityRecords } = select( coreStore );
+		return getEntityRecords( 'postType', 'wp_template', {
+			post_type: getCurrentPostType(),
+			per_page: -1,
+		} );
+	}, [] );
+
+	const templateAttribute = useSelect(
+		( select ) =>
+			select( editorStore ).getEditedPostAttribute( 'template' ),
+		[]
+	);
+
+	const template = useSelect(
+		( select ) => select( editPostStore ).getEditedPostTemplate(),
+		[]
+	);
+
+	const { editPost } = useDispatch( editorStore );
+
+	const { __unstableSwitchToTemplateMode } = useDispatch( editPostStore );
+
+	const isVisible =
+		isViewable &&
+		( settings.availableTemplates?.length ||
+			( settings.supportsTemplateMode && canUserCreateTemplate ) );
+
+	const isPostsPage = currentPostId === settings?.page_for_posts;
+
+	const options = useMemo(
+		() =>
+			Object.entries( {
+				...settings.availableTemplates,
+				...Object.fromEntries(
+					( templates ?? [] ).map( ( { slug, title } ) => [
+						slug,
+						title.rendered,
+					] )
+				),
+			} ).map( ( [ slug, title ] ) => ( { value: slug, label: title } ) ),
+		[ settings.availableTemplates, templates ]
+	);
+
+	const selectedOption =
+		options.find( ( option ) => option.value === templateAttribute ) ??
+		options.find( ( option ) => ! option.value ); // The default option has '' value.
+
+	const canCreate = canUserCreateTemplate && ! isPostsPage;
+
+	const canEdit =
+		canUserCreateTemplate && settings.supportsTemplateMode && !! template;
+
+	const onChange = useCallback( ( slug ) => {
+		editPost( {
+			template: slug || '',
+		} );
+	}, [] );
+
+	const onEdit = useCallback( () => {
+		__unstableSwitchToTemplateMode();
+	}, [] );
+
+	return {
+		isVisible,
+		isPostsPage,
+		selectedOption,
+		options,
+		canCreate,
+		canEdit,
+		onChange,
+		onEdit,
+	};
+}