@wordpress/edit-post 6.8.0 → 6.11.0

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 template, e.g. "Post with sidebar". 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,143 @@
+/**
+ * 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 &&
+				editorSettings.supportsTemplateMode,
+			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,106 @@
+/**
+ * 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;
+		}
+
+		if ( ! settings.supportsTemplateMode ) {
+			return false;
+		}
+
+		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"
+				focusOnMount
+				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 ?? __( 'Default template' ) }
+		</Button>
+	);
+}

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

@@ -0,0 +1,36 @@
+.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-form {
+	@include break-medium() {
+		width: $grid-unit * 40;
+	}
+}

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

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { PanelRow, Dropdown, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	PostURLCheck,
+	PostURL as PostURLForm,
+	usePostURLLabel,
+} from '@wordpress/editor';
+
+export default function PostURL() {
+	const anchorRef = useRef();
+	return (
+		<PostURLCheck>
+			<PanelRow className="edit-post-post-url" ref={ anchorRef }>
+				<span>{ __( 'URL' ) }</span>
+				<Dropdown
+					popoverProps={ { anchorRef } }
+					position="bottom left"
+					className="edit-post-post-url__dropdown"
+					contentClassName="edit-post-post-url__dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostURLToggle isOpen={ isOpen } onClick={ onToggle } />
+					) }
+					renderContent={ ( { onClose } ) => (
+						<PostURLForm onClose={ onClose } />
+					) }
+				/>
+			</PanelRow>
+		</PostURLCheck>
+	);
+}
+
+function PostURLToggle( { isOpen, onClick } ) {
+	const label = usePostURLLabel();
+	return (
+		<Button
+			className="edit-post-post-url__toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post URL.
+			aria-label={ sprintf( __( 'Change URL: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}

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

@@ -0,0 +1,23 @@
+.edit-post-post-url {
+	width: 100%;
+	justify-content: flex-start;
+
+	span {
+		display: block;
+		width: 45%;
+		flex-shrink: 0;
+	}
+}
+
+.components-button.edit-post-post-url__toggle {
+	text-align: left;
+	white-space: normal;
+	height: auto;
+	word-break: break-word;
+}
+
+.edit-post-post-url__dialog .editor-post-url {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}

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

@@ -1,12 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
 import {
 	PostVisibility as PostVisibilityForm,
 	PostVisibilityLabel,
 	PostVisibilityCheck,
+	usePostVisibilityLabel,
 } from '@wordpress/editor';
 import { useRef } from '@wordpress/element';
 
@@ -32,15 +33,12 @@ export function PostVisibility() {
 								// when the label changes.
 								anchorRef: rowRef.current,
 							} }
+							focusOnMount
 							renderToggle={ ( { isOpen, onToggle } ) => (
-								<Button
-									aria-expanded={ isOpen }
-									className="edit-post-post-visibility__toggle"
+								<PostVisibilityToggle
+									isOpen={ isOpen }
 									onClick={ onToggle }
-									variant="tertiary"
-								>
-									<PostVisibilityLabel />
-								</Button>
+								/>
 							) }
 							renderContent={ ( { onClose } ) => (
 								<PostVisibilityForm onClose={ onClose } />
@@ -53,4 +51,20 @@ export function PostVisibility() {
 	);
 }
 
+function PostVisibilityToggle( { isOpen, onClick } ) {
+	const label = usePostVisibilityLabel();
+	return (
+		<Button
+			className="edit-post-post-visibility__toggle"
+			variant="tertiary"
+			aria-expanded={ isOpen }
+			// translators: %s: Current post visibility.
+			aria-label={ sprintf( __( 'Select visibility: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}
+
 export default PostVisibility;

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

@@ -19,13 +19,11 @@ import LastRevision from '../last-revision';
 import PostTaxonomies from '../post-taxonomies';
 import FeaturedImage from '../featured-image';
 import PostExcerpt from '../post-excerpt';
-import PostLink from '../post-link';
 import DiscussionPanel from '../discussion-panel';
 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';
@@ -42,7 +40,7 @@ const SettingsSidebar = () => {
 			// The settings sidebar is used by the edit-post/document and edit-post/block sidebars.
 			// sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed.
 			// If one of the two sidebars is active the component will contain the content of that sidebar.
-			// When neither of the the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
+			// When neither of the two sidebars is active we can not simply return null, because the PluginSidebarEditPost
 			// component, besides being used to render the sidebar, also renders the toggle button. In that case sidebarName
 			// should contain the sidebar that will be active when the toggle button is pressed. If a block
 			// is selected, that should be edit-post/block otherwise it's edit-post/document.
@@ -86,10 +84,8 @@ const SettingsSidebar = () => {
 			{ ! isTemplateMode && sidebarName === 'edit-post/document' && (
 				<>
 					<PostStatus />
-					<Template />
 					<PluginDocumentSettingPanel.Slot />
 					<LastRevision />
-					<PostLink />
 					<PostTaxonomies />
 					<FeaturedImage />
 					<PostExcerpt />

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

@@ -4,14 +4,6 @@
 			width: $grid-unit * 40;
 		}
 	}
-
-	.components-modal__header {
-		border-bottom: none;
-	}
-
-	.components-modal__content::before {
-		margin-bottom: $grid-unit-05;
-	}
 }
 
 .edit-post-template__modal-actions {