@wordpress/edit-post 6.9.0 → 6.12.0

package/src/components/preferences-modal/index.js

@@ -19,7 +19,6 @@ import {
 	PostTypeSupportCheck,
 	store as editorStore,
 } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
 import {
 	PreferencesModal,
 	PreferencesModalTabs,
@@ -45,15 +44,10 @@ const MODAL_NAME = 'edit-post/preferences';
 export default function EditPostPreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( editPostStore );
-	const { isModalActive, isViewable } = useSelect( ( select ) => {
-		const { getEditedPostAttribute } = select( editorStore );
-		const { getPostType } = select( coreStore );
-		const postType = getPostType( getEditedPostAttribute( 'type' ) );
-		return {
-			isModalActive: select( editPostStore ).isModalActive( MODAL_NAME ),
-			isViewable: get( postType, [ 'viewable' ], false ),
-		};
-	}, [] );
+	const isModalActive = useSelect(
+		( select ) => select( editPostStore ).isModalActive( MODAL_NAME ),
+		[]
+	);
 	const showBlockBreadcrumbsOption = useSelect(
 		( select ) => {
 			const { getEditorSettings } = select( editorStore );
@@ -200,18 +194,6 @@ export default function EditPostPreferencesModal() {
 							) }
 						>
 							<EnablePluginDocumentSettingPanelOption.Slot />
-							{ isViewable && (
-								<EnablePanelOption
-									label={ __( 'Permalink' ) }
-									panelName="post-link"
-								/>
-							) }
-							{ isViewable && (
-								<EnablePanelOption
-									label={ __( 'Template' ) }
-									panelName="template"
-								/>
-							) }
 							<PostTaxonomies
 								taxonomyWrapper={ ( content, taxonomy ) => (
 									<EnablePanelOption
@@ -260,7 +242,7 @@ export default function EditPostPreferencesModal() {
 				),
 			},
 		],
-		[ isViewable, isLargeViewport, showBlockBreadcrumbsOption ]
+		[ isLargeViewport, showBlockBreadcrumbsOption ]
 	);
 
 	if ( ! isModalActive ) {

package/src/components/preferences-modal/options/test/__snapshots__/enable-custom-fields.js.snap

@@ -4,6 +4,13 @@ exports[`EnableCustomFieldsOption renders a checked checkbox and a confirmation
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -67,6 +74,13 @@ exports[`EnableCustomFieldsOption renders a checked checkbox when custom fields
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -116,6 +130,13 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox and a confirmati
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {
@@ -179,6 +200,13 @@ exports[`EnableCustomFieldsOption renders an unchecked checkbox when custom fiel
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
 }
 
 .emotion-2 {

package/src/components/preferences-modal/test/index.js

@@ -21,13 +21,13 @@ jest.mock( '@wordpress/compose/src/hooks/use-viewport-match', () => jest.fn() );
 describe( 'EditPostPreferencesModal', () => {
 	describe( 'should match snapshot when the modal is active', () => {
 		it( 'large viewports', () => {
-			useSelect.mockImplementation( () => ( { isModalActive: true } ) );
+			useSelect.mockImplementation( () => true );
 			useViewportMatch.mockImplementation( () => true );
 			const wrapper = shallow( <EditPostPreferencesModal /> );
 			expect( wrapper ).toMatchSnapshot();
 		} );
 		it( 'small viewports', () => {
-			useSelect.mockImplementation( () => ( { isModalActive: true } ) );
+			useSelect.mockImplementation( () => true );
 			useViewportMatch.mockImplementation( () => false );
 			const wrapper = shallow( <EditPostPreferencesModal /> );
 			expect( wrapper ).toMatchSnapshot();
@@ -35,7 +35,7 @@ describe( 'EditPostPreferencesModal', () => {
 	} );
 
 	it( 'should not render when the modal is not active', () => {
-		useSelect.mockImplementation( () => ( { isModalActive: false } ) );
+		useSelect.mockImplementation( () => false );
 		const wrapper = shallow( <EditPostPreferencesModal /> );
 		expect( wrapper.isEmptyRender() ).toBe( true );
 	} );

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

@@ -1,11 +1,5 @@
-.editor-post-author__select {
-	margin: -5px 0;
-
-	// Set the width of the author select box in IE11 to prevent it overflowing
-	// outside of the container because of IE11 flexbox bugs.
-	// We reset it to `width: auto;` for non-IE11 browsers.
-	width: 100%;
-	@supports (position: sticky) {
-		width: auto;
-	}
+.edit-post-post-author {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 }

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

@@ -10,7 +10,7 @@ import {
 export function PostFormat() {
 	return (
 		<PostFormatCheck>
-			<PanelRow>
+			<PanelRow className="edit-post-post-format">
 				<PostFormatForm />
 			</PanelRow>
 		</PostFormatCheck>

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

@@ -0,0 +1,5 @@
+.edit-post-post-format {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}

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

@@ -1,21 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { PanelRow, Dropdown, Button } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 import {
 	PostSchedule as PostScheduleForm,
-	PostScheduleLabel,
 	PostScheduleCheck,
 	usePostScheduleLabel,
 } from '@wordpress/editor';
 
 export default function PostSchedule() {
 	const anchorRef = useRef();
-
-	const fullLabel = usePostScheduleLabel( { full: true } );
-
 	return (
 		<PostScheduleCheck>
 			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
@@ -24,18 +20,12 @@ export default function PostSchedule() {
 					popoverProps={ { anchorRef } }
 					position="bottom left"
 					contentClassName="edit-post-post-schedule__dialog"
-					renderToggle={ ( { onToggle, isOpen } ) => (
-						<>
-							<Button
-								className="edit-post-post-schedule__toggle"
-								onClick={ onToggle }
-								aria-expanded={ isOpen }
-								variant="tertiary"
-								label={ fullLabel }
-							>
-								<PostScheduleLabel />
-							</Button>
-						</>
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostScheduleToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
 					) }
 					renderContent={ ( { onClose } ) => (
 						<PostScheduleForm onClose={ onClose } />
@@ -45,3 +35,22 @@ export default function PostSchedule() {
 		</PostScheduleCheck>
 	);
 }
+
+function PostScheduleToggle( { isOpen, onClick } ) {
+	const label = usePostScheduleLabel();
+	const fullLabel = usePostScheduleLabel( { full: true } );
+	return (
+		<Button
+			className="edit-post-post-schedule__toggle"
+			variant="tertiary"
+			label={ fullLabel }
+			showTooltip
+			aria-expanded={ isOpen }
+			// translators: %s: Current post date.
+			aria-label={ sprintf( __( 'Change date: %s' ), label ) }
+			onClick={ onClick }
+		>
+			{ label }
+		</Button>
+	);
+}

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

@@ -2,13 +2,11 @@
 	width: 100%;
 	position: relative;
 	justify-content: flex-start;
-	align-items: flex-start;
 
 	span {
 		display: block;
 		width: 45%;
 		flex-shrink: 0;
-		padding: 6px 0;
 	}
 }
 

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

@@ -7,7 +7,7 @@ import { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor';
 export function PostSlug() {
 	return (
 		<PostSlugCheck>
-			<PanelRow>
+			<PanelRow className="edit-post-post-slug">
 				<PostSlugForm />
 			</PanelRow>
 		</PostSlugCheck>

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

@@ -1,4 +1,5 @@
-.editor-post-slug__input {
-	margin: -5px 0;
-	padding: 2px;
+.edit-post-post-slug {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
 }

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

@@ -20,6 +20,7 @@ import PostPendingStatus from '../post-pending-status';
 import PluginPostStatusInfo from '../plugin-post-status-info';
 import { store as editPostStore } from '../../../store';
 import PostTemplate from '../post-template';
+import PostURL from '../post-url';
 
 /**
  * Module Constants
@@ -39,10 +40,11 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 					<>
 						<PostVisibility />
 						<PostSchedule />
+						<PostURL />
 						<PostTemplate />
-						<PostFormat />
 						<PostSticky />
 						<PostPendingStatus />
+						<PostFormat />
 						<PostSlug />
 						<PostAuthor />
 						{ fills }

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

@@ -117,7 +117,7 @@ export default function PostTemplateCreateModal( { onClose } ) {
 							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.'
+								'Describe the template, e.g. "Post with sidebar". Custom templates can be applied to any post or page.'
 							) }
 						/>
 					</FlexItem>

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

@@ -50,7 +50,10 @@ export default function PostTemplateForm( { onClose } ) {
 			),
 			selectedTemplateSlug:
 				select( editorStore ).getEditedPostAttribute( 'template' ),
-			canCreate: canCreateTemplates && ! _isPostsPage,
+			canCreate:
+				canCreateTemplates &&
+				! _isPostsPage &&
+				editorSettings.supportsTemplateMode,
 			canEdit:
 				canCreateTemplates &&
 				editorSettings.supportsTemplateMode &&

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

@@ -12,6 +12,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import PostTemplateForm from './form';
+import { store as editPostStore } from '../../../store';
 
 export default function PostTemplate() {
 	const anchorRef = useRef();
@@ -31,6 +32,10 @@ export default function PostTemplate() {
 			return true;
 		}
 
+		if ( ! settings.supportsTemplateMode ) {
+			return false;
+		}
+
 		const canCreateTemplates =
 			select( coreStore ).canUser( 'create', 'templates' ) ?? false;
 		return canCreateTemplates;
@@ -48,6 +53,7 @@ export default function PostTemplate() {
 				position="bottom left"
 				className="edit-post-post-template__dropdown"
 				contentClassName="edit-post-post-template__dialog"
+				focusOnMount
 				renderToggle={ ( { isOpen, onToggle } ) => (
 					<PostTemplateToggle
 						isOpen={ isOpen }
@@ -67,16 +73,14 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 		const templateSlug =
 			select( editorStore ).getEditedPostAttribute( 'template' );
 
-		const settings = select( editorStore ).getEditorSettings();
-		if ( settings.availableTemplates[ templateSlug ] ) {
-			return settings.availableTemplates[ templateSlug ];
+		const { supportsTemplateMode, availableTemplates } =
+			select( editorStore ).getEditorSettings();
+		if ( ! supportsTemplateMode && availableTemplates[ templateSlug ] ) {
+			return availableTemplates[ templateSlug ];
 		}
 
-		const template = select( coreStore )
-			.getEntityRecords( 'postType', 'wp_template', { per_page: -1 } )
-			?.find( ( { slug } ) => slug === templateSlug );
-
-		return template?.title.rendered;
+		const template = select( editPostStore ).getEditedPostTemplate();
+		return template?.title ?? template?.slug;
 	}, [] );
 
 	return (
@@ -95,7 +99,7 @@ function PostTemplateToggle( { isOpen, onClick } ) {
 			}
 			onClick={ onClick }
 		>
-			{ templateTitle ?? __( '(none)' ) }
+			{ templateTitle ?? __( 'Default template' ) }
 		</Button>
 	);
 }

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

@@ -29,16 +29,6 @@
 	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-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/settings-sidebar/index.js

@@ -19,7 +19,6 @@ 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';
@@ -41,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.
@@ -87,7 +86,6 @@ const SettingsSidebar = () => {
 					<PostStatus />
 					<PluginDocumentSettingPanel.Slot />
 					<LastRevision />
-					<PostLink />
 					<PostTaxonomies />
 					<FeaturedImage />
 					<PostExcerpt />

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

@@ -0,0 +1,35 @@
+.edit-post-template__modal {
+	.components-base-control {
+		@include break-medium() {
+			width: $grid-unit * 40;
+		}
+	}
+}
+
+.edit-post-template__modal-actions {
+	margin-top: $grid-unit-15;
+}
+
+.edit-post-template-modal__tip {
+	padding: $grid-unit-20 $grid-unit-30;
+	background: $gray-100;
+	border-radius: $radius-block-ui;
+
+	@include break-medium() {
+		width: $grid-unit * 30;
+	}
+}
+
+.edit-post-template__notice {
+	margin: 0 0 $grid-unit-10 0;
+
+	.components-notice__content {
+		margin: 0;
+	}
+}
+
+.edit-post-template__actions {
+	button:not(:last-child) {
+		margin-right: $grid-unit-10;
+	}
+}

package/src/components/start-page-options/style.scss

@@ -11,15 +11,6 @@
 	@include break-large() {
 		height: 70%;
 	}
-
-	// @todo: Consider this for a minimal modal prop.
-	.components-modal__header {
-		border-bottom: none;
-	}
-
-	.components-modal__content::before {
-		content: none;
-	}
 }
 
 // 2 column masonry layout.