@wordpress/edit-post 6.7.0 → 6.10.0

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import { shallow } from 'enzyme';
 
 /**
@@ -9,6 +8,8 @@ import { shallow } from 'enzyme';
  */
 import { KeyboardShortcutHelpModal } from '../index';
 
+const noop = () => {};
+
 describe( 'KeyboardShortcutHelpModal', () => {
 	it( 'should match snapshot when the modal is active', () => {
 		const wrapper = shallow(

package/src/components/keyboard-shortcuts/index.js

@@ -18,15 +18,11 @@ import { store as editPostStore } from '../../store';
 
 function KeyboardShortcuts() {
 	const { getBlockSelectionStart } = useSelect( blockEditorStore );
-	const {
-		getEditorMode,
-		isEditorSidebarOpened,
-		isListViewOpened,
-	} = useSelect( editPostStore );
+	const { getEditorMode, isEditorSidebarOpened, isListViewOpened } =
+		useSelect( editPostStore );
 	const isModeToggleDisabled = useSelect( ( select ) => {
-		const { richEditingEnabled, codeEditingEnabled } = select(
-			editorStore
-		).getEditorSettings();
+		const { richEditingEnabled, codeEditingEnabled } =
+			select( editorStore ).getEditorSettings();
 		return ! richEditingEnabled || ! codeEditingEnabled;
 	}, [] );
 

package/src/components/layout/actions-panel.js

@@ -26,9 +26,8 @@ export default function ActionsPanel( {
 	closeEntitiesSavedStates,
 	isEntitiesSavedStatesOpen,
 } ) {
-	const { closePublishSidebar, togglePublishSidebar } = useDispatch(
-		editPostStore
-	);
+	const { closePublishSidebar, togglePublishSidebar } =
+		useDispatch( editPostStore );
 	const {
 		publishSidebarOpened,
 		hasActiveMetaboxes,
@@ -36,14 +35,12 @@ export default function ActionsPanel( {
 		hasNonPostEntityChanges,
 	} = useSelect( ( select ) => {
 		return {
-			publishSidebarOpened: select(
-				editPostStore
-			).isPublishSidebarOpened(),
+			publishSidebarOpened:
+				select( editPostStore ).isPublishSidebarOpened(),
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			isSavingMetaBoxes: select( editPostStore ).isSavingMetaBoxes(),
-			hasNonPostEntityChanges: select(
-				editorStore
-			).hasNonPostEntityChanges(),
+			hasNonPostEntityChanges:
+				select( editorStore ).hasNonPostEntityChanges(),
 		};
 	}, [] );
 

package/src/components/layout/index.js

@@ -66,11 +66,8 @@ const interfaceLabels = {
 function Layout( { styles } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
-	const {
-		openGeneralSidebar,
-		closeGeneralSidebar,
-		setIsInserterOpened,
-	} = useDispatch( editPostStore );
+	const { openGeneralSidebar, closeGeneralSidebar, setIsInserterOpened } =
+		useDispatch( editPostStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const {
 		mode,
@@ -96,17 +93,15 @@ function Layout( { styles } ) {
 
 		return {
 			isTemplateMode: select( editPostStore ).isEditingTemplate(),
-			hasFixedToolbar: select( editPostStore ).isFeatureActive(
-				'fixedToolbar'
-			),
+			hasFixedToolbar:
+				select( editPostStore ).isFeatureActive( 'fixedToolbar' ),
 			sidebarIsOpened: !! (
 				select( interfaceStore ).getActiveComplementaryArea(
 					editPostStore.name
 				) || select( editPostStore ).isPublishSidebarOpened()
 			),
-			isFullscreenActive: select( editPostStore ).isFeatureActive(
-				'fullscreenMode'
-			),
+			isFullscreenActive:
+				select( editPostStore ).isFeatureActive( 'fullscreenMode' ),
 			isInserterOpened: select( editPostStore ).isInserterOpened(),
 			isListViewOpened: select( editPostStore ).isListViewOpened(),
 			mode: select( editPostStore ).getEditorMode(),
@@ -118,12 +113,10 @@ function Layout( { styles } ) {
 			nextShortcut: select(
 				keyboardShortcutsStore
 			).getAllShortcutKeyCombinations( 'core/edit-post/next-region' ),
-			showIconLabels: select( editPostStore ).isFeatureActive(
-				'showIconLabels'
-			),
-			hasReducedUI: select( editPostStore ).isFeatureActive(
-				'reducedUI'
-			),
+			showIconLabels:
+				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			hasReducedUI:
+				select( editPostStore ).isFeatureActive( 'reducedUI' ),
 			showBlockBreadcrumbs: select( editPostStore ).isFeatureActive(
 				'showBlockBreadcrumbs'
 			),
@@ -156,10 +149,8 @@ function Layout( { styles } ) {
 
 	// Local state for save panel.
 	// Note 'truthy' callback implies an open panel.
-	const [
-		entitiesSavedStatesCallback,
-		setEntitiesSavedStatesCallback,
-	] = useState( false );
+	const [ entitiesSavedStatesCallback, setEntitiesSavedStatesCallback ] =
+		useState( false );
 	const closeEntitiesSavedStates = useCallback(
 		( arg ) => {
 			if ( typeof entitiesSavedStatesCallback === 'function' ) {

package/src/components/layout/index.native.js

@@ -187,13 +187,12 @@ class Layout extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { __unstableIsEditorReady: isEditorReady } = select(
-			editorStore
-		);
+		const { __unstableIsEditorReady: isEditorReady } =
+			select( editorStore );
 		const { getEditorMode } = select( editPostStore );
 		const { getSettings } = select( blockEditorStore );
-		const globalStyles = getSettings()?.__experimentalGlobalStylesBaseStyles
-			?.color;
+		const globalStyles =
+			getSettings()?.__experimentalGlobalStylesBaseStyles?.color;
 
 		return {
 			isReady: isEditorReady(),

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/enable-custom-fields.js

@@ -55,6 +55,6 @@ export function EnableCustomFieldsOption( { label, areCustomFieldsEnabled } ) {
 }
 
 export default withSelect( ( select ) => ( {
-	areCustomFieldsEnabled: !! select( editorStore ).getEditorSettings()
-		.enableCustomFields,
+	areCustomFieldsEnabled:
+		!! select( editorStore ).getEditorSettings().enableCustomFields,
 } ) )( EnableCustomFieldsOption );

package/src/components/preferences-modal/options/enable-panel.js

@@ -12,9 +12,8 @@ import { store as editPostStore } from '../../../store';
 
 export default compose(
 	withSelect( ( select, { panelName } ) => {
-		const { isEditorPanelEnabled, isEditorPanelRemoved } = select(
-			editPostStore
-		);
+		const { isEditorPanelEnabled, isEditorPanelRemoved } =
+			select( editPostStore );
 		return {
 			isRemoved: isEditorPanelRemoved( panelName ),
 			isChecked: isEditorPanelEnabled( panelName ),

package/src/components/preferences-modal/options/enable-publish-sidebar.js

@@ -12,9 +12,8 @@ export default compose(
 		isChecked: select( editorStore ).isPublishSidebarEnabled(),
 	} ) ),
 	withDispatch( ( dispatch ) => {
-		const { enablePublishSidebar, disablePublishSidebar } = dispatch(
-			editorStore
-		);
+		const { enablePublishSidebar, disablePublishSidebar } =
+			dispatch( editorStore );
 		return {
 			onChange: ( isEnabled ) =>
 				isEnabled ? enablePublishSidebar() : disablePublishSidebar(),

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/secondary-sidebar/inserter-sidebar.js

@@ -19,9 +19,8 @@ import { store as editPostStore } from '../../store';
 
 export default function InserterSidebar() {
 	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
-		const { isFeatureActive, __experimentalGetInsertionPoint } = select(
-			editPostStore
-		);
+		const { isFeatureActive, __experimentalGetInsertionPoint } =
+			select( editPostStore );
 		return {
 			insertionPoint: __experimentalGetInsertionPoint(),
 			showMostUsedBlocks: isFeatureActive( 'mostUsedBlocks' ),

package/src/components/sidebar/discussion-panel/index.js

@@ -52,9 +52,8 @@ function DiscussionPanel( { isEnabled, isOpened, onTogglePanel } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			isEnabled: select( editPostStore ).isEditorPanelEnabled(
-				PANEL_NAME
-			),
+			isEnabled:
+				select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
 			isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
 		};
 	} ),

package/src/components/sidebar/featured-image/index.js

@@ -52,9 +52,8 @@ function FeaturedImage( { isEnabled, isOpened, postType, onTogglePanel } ) {
 const applyWithSelect = withSelect( ( select ) => {
 	const { getEditedPostAttribute } = select( editorStore );
 	const { getPostType } = select( coreStore );
-	const { isEditorPanelEnabled, isEditorPanelOpened } = select(
-		editPostStore
-	);
+	const { isEditorPanelEnabled, isEditorPanelOpened } =
+		select( editPostStore );
 
 	return {
 		postType: getPostType( getEditedPostAttribute( 'type' ) ),

package/src/components/sidebar/page-attributes/index.js

@@ -30,9 +30,8 @@ const PANEL_NAME = 'page-attributes';
 export function PageAttributes() {
 	const { isEnabled, isOpened, postType } = useSelect( ( select ) => {
 		const { getEditedPostAttribute } = select( editorStore );
-		const { isEditorPanelEnabled, isEditorPanelOpened } = select(
-			editPostStore
-		);
+		const { isEditorPanelEnabled, isEditorPanelOpened } =
+			select( editPostStore );
 		const { getPostType } = select( coreStore );
 		return {
 			isEnabled: isEditorPanelEnabled( PANEL_NAME ),

package/src/components/sidebar/plugin-document-setting-panel/index.js

@@ -114,9 +114,8 @@ const PluginDocumentSettingPanel = compose(
 	withSelect( ( select, { panelName } ) => {
 		return {
 			opened: select( editPostStore ).isEditorPanelOpened( panelName ),
-			isEnabled: select( editPostStore ).isEditorPanelEnabled(
-				panelName
-			),
+			isEnabled:
+				select( editPostStore ).isEditorPanelEnabled( panelName ),
 		};
 	} ),
 	withDispatch( ( dispatch, { panelName } ) => ( {

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

@@ -84,9 +84,8 @@ export default function PluginSidebarEditPost( { className, ...props } ) {
 			shortcut: select(
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ),
-			showIconLabels: select( editPostStore ).isFeatureActive(
-				'showIconLabels'
-			),
+			showIconLabels:
+				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 		};
 	}, [] );
 	return (

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

@@ -41,9 +41,8 @@ function PostExcerpt( { isEnabled, isOpened, onTogglePanel } ) {
 export default compose( [
 	withSelect( ( select ) => {
 		return {
-			isEnabled: select( editPostStore ).isEditorPanelEnabled(
-				PANEL_NAME
-			),
+			isEnabled:
+				select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
 			isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
 		};
 	} ),

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

@@ -1,18 +1,31 @@
 .edit-post-post-schedule {
 	width: 100%;
 	position: relative;
-	justify-content: left;
+	justify-content: flex-start;
 
 	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 }
@@ -56,9 +60,8 @@ export default compose( [
 	withSelect( ( select ) => {
 		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
 		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, isEditorPanelOpened } = select(
-			editPostStore
-		);
+		const { isEditorPanelRemoved, isEditorPanelOpened } =
+			select( editPostStore );
 		return {
 			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
 			isOpened: isEditorPanelOpened( PANEL_NAME ),