@wordpress/edit-post 6.8.0 → 6.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.8.0",
+	"version": "6.9.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,31 +27,31 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.11.0",
-		"@wordpress/api-fetch": "^6.8.0",
-		"@wordpress/block-editor": "^9.3.0",
-		"@wordpress/block-library": "^7.8.0",
-		"@wordpress/blocks": "^11.10.0",
-		"@wordpress/components": "^19.13.0",
-		"@wordpress/compose": "^5.9.0",
-		"@wordpress/core-data": "^4.9.0",
-		"@wordpress/data": "^6.11.0",
-		"@wordpress/deprecated": "^3.11.0",
-		"@wordpress/editor": "^12.10.0",
-		"@wordpress/element": "^4.9.0",
-		"@wordpress/hooks": "^3.11.0",
-		"@wordpress/i18n": "^4.11.0",
-		"@wordpress/icons": "^9.2.0",
-		"@wordpress/interface": "^4.10.0",
-		"@wordpress/keyboard-shortcuts": "^3.9.0",
-		"@wordpress/keycodes": "^3.11.0",
-		"@wordpress/media-utils": "^4.2.0",
-		"@wordpress/notices": "^3.11.0",
-		"@wordpress/plugins": "^4.9.0",
-		"@wordpress/preferences": "^2.3.0",
-		"@wordpress/url": "^3.12.0",
-		"@wordpress/viewport": "^4.9.0",
-		"@wordpress/warning": "^2.11.0",
+		"@wordpress/a11y": "^3.12.0",
+		"@wordpress/api-fetch": "^6.9.0",
+		"@wordpress/block-editor": "^9.4.0",
+		"@wordpress/block-library": "^7.9.0",
+		"@wordpress/blocks": "^11.11.0",
+		"@wordpress/components": "^19.14.0",
+		"@wordpress/compose": "^5.10.0",
+		"@wordpress/core-data": "^4.10.0",
+		"@wordpress/data": "^6.12.0",
+		"@wordpress/deprecated": "^3.12.0",
+		"@wordpress/editor": "^12.11.0",
+		"@wordpress/element": "^4.10.0",
+		"@wordpress/hooks": "^3.12.0",
+		"@wordpress/i18n": "^4.12.0",
+		"@wordpress/icons": "^9.3.0",
+		"@wordpress/interface": "^4.11.0",
+		"@wordpress/keyboard-shortcuts": "^3.10.0",
+		"@wordpress/keycodes": "^3.12.0",
+		"@wordpress/media-utils": "^4.3.0",
+		"@wordpress/notices": "^3.12.0",
+		"@wordpress/plugins": "^4.10.0",
+		"@wordpress/preferences": "^2.4.0",
+		"@wordpress/url": "^3.13.0",
+		"@wordpress/viewport": "^4.10.0",
+		"@wordpress/warning": "^2.12.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
 }

package/src/components/keyboard-shortcut-help-modal/config.js

@@ -28,4 +28,12 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'primary', character: 'u' },
 		description: __( 'Underline the selected text.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: 'd' },
+		description: __( 'Strikethrough the selected text.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
 ];

package/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -82,6 +82,20 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             "modifier": "primary",
           },
         },
+        Object {
+          "description": "Strikethrough the selected text.",
+          "keyCombination": Object {
+            "character": "d",
+            "modifier": "access",
+          },
+        },
+        Object {
+          "description": "Make the selected text inline code.",
+          "keyCombination": Object {
+            "character": "x",
+            "modifier": "access",
+          },
+        },
       ]
     }
     title="Text formatting"

package/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.
  *

package/src/components/sidebar/post-schedule/index.js

@@ -8,11 +8,14 @@ import {
 	PostSchedule as PostScheduleForm,
 	PostScheduleLabel,
 	PostScheduleCheck,
+	usePostScheduleLabel,
 } from '@wordpress/editor';
 
-export function PostSchedule() {
+export default function PostSchedule() {
 	const anchorRef = useRef();
 
+	const fullLabel = usePostScheduleLabel( { full: true } );
+
 	return (
 		<PostScheduleCheck>
 			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
@@ -28,6 +31,7 @@ export function PostSchedule() {
 								onClick={ onToggle }
 								aria-expanded={ isOpen }
 								variant="tertiary"
+								label={ fullLabel }
 							>
 								<PostScheduleLabel />
 							</Button>
@@ -41,5 +45,3 @@ export function PostSchedule() {
 		</PostScheduleCheck>
 	);
 }
-
-export default PostSchedule;

package/src/components/sidebar/post-schedule/style.scss

@@ -2,17 +2,32 @@
 	width: 100%;
 	position: relative;
 	justify-content: flex-start;
+	align-items: flex-start;
 
 	span {
 		display: block;
 		width: 45%;
+		flex-shrink: 0;
+		padding: 6px 0;
 	}
 }
 
 .components-button.edit-post-post-schedule__toggle {
-	text-align: right;
+	text-align: left;
+	white-space: normal;
+	height: auto;
+
+	// This span is added by the Popover in Tooltip when no anchorRef is
+	// provided. We set its width to 0 so that it does not cause the button text
+	// to wrap to a new line when displaying the tooltip. A better fix would be
+	// to pass anchorRef and avoid the need for a span alltogether, which is
+	// what this PR allows us to do:
+	// https://github.com/WordPress/gutenberg/pull/41268.
+	span {
+		width: 0;
+	}
 }
 
-.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;
 }

package/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 />

package/src/components/sidebar/post-template/create-modal.js

@@ -0,0 +1,146 @@
+/**
+ * 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 defaultBlockTemplate = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().defaultBlockTemplate,
+		[]
+	);
+
+	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 =
+			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>
+	);
+}

package/src/components/sidebar/post-template/form.js

@@ -0,0 +1,140 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { addTemplate } from '@wordpress/icons';
+import { Notice, SelectControl, Button } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editPostStore } from '../../../store';
+import PostTemplateCreateModal from './create-modal';
+
+export default function PostTemplateForm( { onClose } ) {
+	const {
+		isPostsPage,
+		availableTemplates,
+		fetchedTemplates,
+		selectedTemplateSlug,
+		canCreate,
+		canEdit,
+	} = useSelect( ( select ) => {
+		const editorSettings = select( editorStore ).getEditorSettings();
+		const siteSettings = select( coreStore ).getEntityRecord(
+			'root',
+			'site'
+		);
+		const _isPostsPage =
+			select( editorStore ).getCurrentPostId() ===
+			siteSettings?.page_for_posts;
+		const canCreateTemplates = select( coreStore ).canUser(
+			'create',
+			'templates'
+		);
+		return {
+			isPostsPage: _isPostsPage,
+			availableTemplates: editorSettings.availableTemplates,
+			fetchedTemplates: select( coreStore ).getEntityRecords(
+				'postType',
+				'wp_template',
+				{
+					post_type: select( editorStore ).getCurrentPostType(),
+					per_page: -1,
+				}
+			),
+			selectedTemplateSlug:
+				select( editorStore ).getEditedPostAttribute( 'template' ),
+			canCreate: canCreateTemplates && ! _isPostsPage,
+			canEdit:
+				canCreateTemplates &&
+				editorSettings.supportsTemplateMode &&
+				!! select( editPostStore ).getEditedPostTemplate(),
+		};
+	}, [] );
+
+	const options = useMemo(
+		() =>
+			Object.entries( {
+				...availableTemplates,
+				...Object.fromEntries(
+					( fetchedTemplates ?? [] ).map( ( { slug, title } ) => [
+						slug,
+						title.rendered,
+					] )
+				),
+			} ).map( ( [ slug, title ] ) => ( { value: slug, label: title } ) ),
+		[ availableTemplates, fetchedTemplates ]
+	);
+
+	const selectedOption =
+		options.find( ( option ) => option.value === selectedTemplateSlug ) ??
+		options.find( ( option ) => ! option.value ); // The default option has '' value.
+
+	const { editPost } = useDispatch( editorStore );
+	const { __unstableSwitchToTemplateMode } = useDispatch( editPostStore );
+
+	const [ isCreateModalOpen, setIsCreateModalOpen ] = useState( false );
+
+	return (
+		<div className="edit-post-post-template__form">
+			<InspectorPopoverHeader
+				title={ __( 'Template' ) }
+				help={ __(
+					'Templates define the way content is displayed when viewing your site.'
+				) }
+				actions={
+					canCreate
+						? [
+								{
+									icon: addTemplate,
+									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={ ( slug ) =>
+						editPost( { template: slug || '' } )
+					}
+				/>
+			) }
+			{ canEdit && (
+				<p>
+					<Button
+						variant="link"
+						onClick={ () => __unstableSwitchToTemplateMode() }
+					>
+						{ __( 'Edit template' ) }
+					</Button>
+				</p>
+			) }
+			{ isCreateModalOpen && (
+				<PostTemplateCreateModal
+					onClose={ () => setIsCreateModalOpen( false ) }
+				/>
+			) }
+		</div>
+	);
+}

package/src/components/sidebar/post-template/index.js

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { PanelRow, Dropdown, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import PostTemplateForm from './form';
+
+export default function PostTemplate() {
+	const anchorRef = useRef();
+
+	const isVisible = useSelect( ( select ) => {
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+		if ( ! postType?.viewable ) {
+			return false;
+		}
+
+		const settings = select( editorStore ).getEditorSettings();
+		const hasTemplates =
+			!! settings.availableTemplates &&
+			Object.keys( settings.availableTemplates ).length > 0;
+		if ( hasTemplates ) {
+			return true;
+		}
+
+		const canCreateTemplates =
+			select( coreStore ).canUser( 'create', 'templates' ) ?? false;
+		return canCreateTemplates;
+	}, [] );
+
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	return (
+		<PanelRow className="edit-post-post-template" ref={ anchorRef }>
+			<span>{ __( 'Template' ) }</span>
+			<Dropdown
+				popoverProps={ { anchorRef } }
+				position="bottom left"
+				className="edit-post-post-template__dropdown"
+				contentClassName="edit-post-post-template__dialog"
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostTemplateToggle
+						isOpen={ isOpen }
+						onClick={ onToggle }
+					/>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<PostTemplateForm onClose={ onClose } />
+				) }
+			/>
+		</PanelRow>
+	);
+}
+
+function PostTemplateToggle( { isOpen, onClick } ) {
+	const templateTitle = useSelect( ( select ) => {
+		const templateSlug =
+			select( editorStore ).getEditedPostAttribute( 'template' );
+
+		const settings = select( editorStore ).getEditorSettings();
+		if ( settings.availableTemplates[ templateSlug ] ) {
+			return settings.availableTemplates[ templateSlug ];
+		}
+
+		const template = select( coreStore )
+			.getEntityRecords( 'postType', 'wp_template', { per_page: -1 } )
+			?.find( ( { slug } ) => slug === templateSlug );
+
+		return template?.title.rendered;
+	}, [] );
+
+	return (
+		<Button
+			className="edit-post-post-template__toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			aria-label={
+				templateTitle
+					? sprintf(
+							// translators: %s: Name of the currently selected template.
+							__( 'Select template: %s' ),
+							templateTitle
+					  )
+					: __( 'Select template' )
+			}
+			onClick={ onClick }
+		>
+			{ templateTitle ?? __( '(none)' ) }
+		</Button>
+	);
+}

package/src/components/sidebar/post-template/style.scss

@@ -0,0 +1,46 @@
+.edit-post-post-template {
+	width: 100%;
+	justify-content: flex-start;
+
+	span {
+		display: block;
+		width: 45%;
+	}
+}
+
+.edit-post-post-template__dropdown {
+	max-width: 55%;
+}
+
+.components-button.edit-post-post-template__toggle {
+	display: inline-block;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.edit-post-post-template__dialog {
+	z-index: z-index(".edit-post-post-template__dialog");
+}
+
+.edit-post-post-template__form {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}
+
+.edit-post-post-template__create-modal {
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content::before {
+		margin-bottom: $grid-unit-05;
+	}
+}
+
+.edit-post-post-template__create-form {
+	@include break-medium() {
+		width: $grid-unit * 40;
+	}
+}

package/src/components/sidebar/post-visibility/style.scss

@@ -8,8 +8,8 @@
 	}
 }
 
-.edit-post-post-visibility__dialog .components-popover__content {
-	// sidebar width - padding - horizontal borders
-	width: $sidebar-width - $grid-unit-20 - $border-width * 2;
-	padding: $grid-unit-20;
+.edit-post-post-visibility__dialog .editor-post-visibility {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
 }

package/src/components/sidebar/settings-sidebar/index.js

@@ -25,7 +25,6 @@ import PageAttributes from '../page-attributes';
 import MetaBoxes from '../../meta-boxes';
 import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebarEditPost from '../plugin-sidebar';
-import Template from '../template';
 import TemplateSummary from '../template-summary';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -86,7 +85,6 @@ const SettingsSidebar = () => {
 			{ ! isTemplateMode && sidebarName === 'edit-post/document' && (
 				<>
 					<PostStatus />
-					<Template />
 					<PluginDocumentSettingPanel.Slot />
 					<LastRevision />
 					<PostLink />