@wordpress/edit-post 6.8.0 → 6.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.8.0",
+	"version": "6.11.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.14.0",
+		"@wordpress/api-fetch": "^6.11.0",
+		"@wordpress/block-editor": "^9.6.0",
+		"@wordpress/block-library": "^7.11.0",
+		"@wordpress/blocks": "^11.13.0",
+		"@wordpress/components": "^19.16.0",
+		"@wordpress/compose": "^5.12.0",
+		"@wordpress/core-data": "^4.12.0",
+		"@wordpress/data": "^6.14.0",
+		"@wordpress/deprecated": "^3.14.0",
+		"@wordpress/editor": "^12.13.0",
+		"@wordpress/element": "^4.12.0",
+		"@wordpress/hooks": "^3.14.0",
+		"@wordpress/i18n": "^4.14.0",
+		"@wordpress/icons": "^9.5.0",
+		"@wordpress/interface": "^4.13.0",
+		"@wordpress/keyboard-shortcuts": "^3.12.0",
+		"@wordpress/keycodes": "^3.14.0",
+		"@wordpress/media-utils": "^4.5.0",
+		"@wordpress/notices": "^3.14.0",
+		"@wordpress/plugins": "^4.12.0",
+		"@wordpress/preferences": "^2.6.0",
+		"@wordpress/url": "^3.15.0",
+		"@wordpress/viewport": "^4.12.0",
+		"@wordpress/warning": "^2.14.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "0315dbc240cb2aa146d7c1bafd251f004b88300e"
 }

package/src/components/header/header-toolbar/index.js

@@ -106,6 +106,14 @@ function HeaderToolbar() {
 			setIsInserterOpened( true );
 		}
 	}, [ isInserterOpened, setIsInserterOpened ] );
+
+	/* translators: button label text should, if possible, be under 16 characters. */
+	const longLabel = _x(
+		'Toggle block inserter',
+		'Generic label for block inserter button'
+	);
+	const shortLabel = ! isInserterOpened ? __( 'Add' ) : __( 'Close' );
+
 	return (
 		<NavigableToolbar
 			className="edit-post-header-toolbar"
@@ -122,17 +130,9 @@ function HeaderToolbar() {
 					onClick={ openInserter }
 					disabled={ ! isInserterEnabled }
 					icon={ plus }
-					/* translators: button label text should, if possible, be under 16
-			characters. */
-					label={ _x(
-						'Toggle block inserter',
-						'Generic label for block inserter button'
-					) }
+					label={ showIconLabels ? shortLabel : longLabel }
 					showTooltip={ ! showIconLabels }
-				>
-					{ showIconLabels &&
-						( ! isInserterOpened ? __( 'Add' ) : __( 'Close' ) ) }
-				</ToolbarItem>
+				/>
 				{ ( isWideViewport || ! showIconLabels ) && (
 					<>
 						{ isLargeViewport && (

package/src/components/header/header-toolbar/style.scss

@@ -101,15 +101,12 @@
 	padding: 0;
 
 	.show-icon-labels & {
+		width: auto;
 		height: 36px;
+		padding: 0 $grid-unit-10;
 	}
 }
 
-.edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-text.has-icon {
-	width: auto;
-	padding: 0 $grid-unit-10;
-}
-
 .show-icon-labels .edit-post-header-toolbar__left > * + * {
 	margin-left: $grid-unit-10;
 }

package/src/components/header/style.scss

@@ -146,12 +146,6 @@
 		}
 	}
 
-	// The inserter has a custom label, different from its aria-label, so we don't want to display both.
-	.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle {
-		&::after {
-			content: none;
-		}
-	}
 	// The post saved state button has a custom label only on small breakpoint
 	.editor-post-save-draft.editor-post-save-draft {
 		&::after {

package/src/components/header/template-title/edit-template-title.js

@@ -9,6 +9,7 @@ import { mapValues } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -18,6 +19,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../../store';
 
 export default function EditTemplateTitle() {
+	const [ forceEmpty, setForceEmpty ] = useState( false );
 	const { template } = useSelect( ( select ) => {
 		const { getEditedPostTemplate } = select( editPostStore );
 		return {
@@ -45,11 +47,18 @@ export default function EditTemplateTitle() {
 		<div className="edit-site-template-details__group">
 			<TextControl
 				label={ __( 'Title' ) }
-				value={ templateTitle }
+				value={ forceEmpty ? '' : templateTitle }
 				help={ __(
 					'Give the template a title that indicates its purpose, e.g. "Full Width".'
 				) }
 				onChange={ ( newTitle ) => {
+					// Allow having the field temporarily empty while typing.
+					if ( ! newTitle && ! forceEmpty ) {
+						setForceEmpty( true );
+						return;
+					}
+					setForceEmpty( false );
+
 					const settings = getEditorSettings();
 					const newAvailableTemplates = mapValues(
 						settings.availableTemplates,
@@ -68,6 +77,7 @@ export default function EditTemplateTitle() {
 						title: newTitle,
 					} );
 				} }
+				onBlur={ () => setForceEmpty( false ) }
 			/>
 		</div>
 	);

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/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -41,7 +40,7 @@ const ShortcutList = ( { shortcuts } ) => (
 				className="edit-post-keyboard-shortcut-help-modal__shortcut"
 				key={ index }
 			>
-				{ isString( shortcut ) ? (
+				{ typeof shortcut === 'string' ? (
 					<DynamicShortcut name={ shortcut } />
 				) : (
 					<Shortcut { ...shortcut } />

package/src/components/keyboard-shortcut-help-modal/style.scss

@@ -3,11 +3,6 @@
 		margin: 0 0 2rem 0;
 	}
 
-	&__main-shortcuts .edit-post-keyboard-shortcut-help-modal__shortcut-list {
-		// Push the shortcut to be flush with top modal header.
-		margin-top: -$grid-unit-30 -$border-width;
-	}
-
 	&__section-title {
 		font-size: 0.9rem;
 		font-weight: 600;

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/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/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/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-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,18 +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 function PostSchedule() {
+export default function PostSchedule() {
 	const anchorRef = useRef();
-
 	return (
 		<PostScheduleCheck>
 			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
@@ -21,17 +20,12 @@ export 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"
-							>
-								<PostScheduleLabel />
-							</Button>
-						</>
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostScheduleToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
 					) }
 					renderContent={ ( { onClose } ) => (
 						<PostScheduleForm onClose={ onClose } />
@@ -42,4 +36,21 @@ export function PostSchedule() {
 	);
 }
 
-export default PostSchedule;
+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

@@ -6,13 +6,26 @@
 	span {
 		display: block;
 		width: 45%;
+		flex-shrink: 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-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

@@ -19,6 +19,8 @@ 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';
+import PostURL from '../post-url';
 
 /**
  * Module Constants
@@ -29,7 +31,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 	return (
 		<PanelBody
 			className="edit-post-post-status"
-			title={ __( 'Status & visibility' ) }
+			title={ __( 'Summary' ) }
 			opened={ isOpened }
 			onToggle={ onTogglePanel }
 		>
@@ -38,9 +40,11 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 					<>
 						<PostVisibility />
 						<PostSchedule />
-						<PostFormat />
+						<PostURL />
+						<PostTemplate />
 						<PostSticky />
 						<PostPendingStatus />
+						<PostFormat />
 						<PostSlug />
 						<PostAuthor />
 						{ fills }