@wordpress/editor 13.34.0 → 14.0.0

package/src/components/post-panel-section/index.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+function PostPanelSection( { className, children } ) {
+	return (
+		<VStack className={ clsx( 'editor-post-panel__section', className ) }>
+			{ children }
+		</VStack>
+	);
+}
+
+export default PostPanelSection;

package/src/components/post-panel-section/style.scss

@@ -0,0 +1,3 @@
+.editor-post-panel__section {
+	padding: $grid-unit-20;
+}

package/src/components/post-pending-status/check.js

@@ -8,6 +8,16 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * This component checks the publishing status of the current post.
+ * If the post is already published or the user doesn't have the
+ * capability to publish, it returns null.
+ *
+ * @param {Object}  props          Component properties.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {JSX.Element|null} The rendered child elements or null if the post is already published or the user doesn't have the capability to publish.
+ */
 export function PostPendingStatusCheck( { children } ) {
 	const { hasPublishAction, isPublished } = useSelect( ( select ) => {
 		const { isCurrentPostPublished, getCurrentPost } =

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

@@ -11,6 +11,11 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import PostPendingStatusCheck from './check';
 import { store as editorStore } from '../../store';
 
+/**
+ * A component for displaying and toggling the pending status of a post.
+ *
+ * @return {JSX.Element} The rendered component.
+ */
 export function PostPendingStatus() {
 	const status = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'status' ),

package/src/components/post-pingbacks/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { CheckboxControl, ExternalLink } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -26,11 +26,26 @@ function PostPingbacks() {
 	return (
 		<CheckboxControl
 			__nextHasNoMarginBottom
-			label={ __( 'Allow pingbacks & trackbacks' ) }
+			label={ __( 'Enable pingbacks & trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }
+			help={
+				<ExternalLink
+					href={ __(
+						'https://wordpress.org/documentation/article/trackbacks-and-pingbacks/'
+					) }
+				>
+					{ __( 'Learn more about pingbacks & trackbacks' ) }
+				</ExternalLink>
+			}
 		/>
 	);
 }
 
+/**
+ * Renders a control for enabling or disabling pingbacks and trackbacks
+ * in a WordPress post.
+ *
+ * @module PostPingbacks
+ */
 export default PostPingbacks;

package/src/components/post-preview-button/index.js

@@ -99,6 +99,21 @@ function writeInterstitialMessage( targetDocument ) {
 	targetDocument.close();
 }
 
+/**
+ * Renders a button that opens a new window or tab for the preview,
+ * writes the interstitial message to this window, and then navigates
+ * to the actual preview link. The button is not rendered if the post
+ * is not viewable and disabled if the post is not saveable.
+ *
+ * @param {Object}   props                     The component props.
+ * @param {string}   props.className           The class name for the button.
+ * @param {string}   props.textContent         The text content for the button.
+ * @param {boolean}  props.forceIsAutosaveable Whether to force autosave.
+ * @param {string}   props.role                The role attribute for the button.
+ * @param {Function} props.onPreview           The callback function for preview event.
+ *
+ * @return {JSX.Element|null} The rendered button component.
+ */
 export default function PostPreviewButton( {
 	className,
 	textContent,

package/src/components/post-publish-button/index.js

@@ -11,6 +11,7 @@ import { compose } from '@wordpress/compose';
  */
 import PublishButtonLabel from './label';
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const noop = () => {};
 
@@ -45,14 +46,24 @@ export class PostPublishButton extends Component {
 
 	createOnClick( callback ) {
 		return ( ...args ) => {
-			const { hasNonPostEntityChanges, setEntitiesSavedStatesCallback } =
-				this.props;
+			const {
+				hasNonPostEntityChanges,
+				hasPostMetaChanges,
+				setEntitiesSavedStatesCallback,
+				isPublished,
+			} = this.props;
 			// If a post with non-post entities is published, but the user
 			// elects to not save changes to the non-post entities, those
 			// entities will still be dirty when the Publish button is clicked.
 			// We also need to check that the `setEntitiesSavedStatesCallback`
 			// prop was passed. See https://github.com/WordPress/gutenberg/pull/37383
-			if ( hasNonPostEntityChanges && setEntitiesSavedStatesCallback ) {
+			//
+			// TODO: Explore how to manage `hasPostMetaChanges` and pre-publish workflow properly.
+			if (
+				( hasNonPostEntityChanges ||
+					( hasPostMetaChanges && isPublished ) ) &&
+				setEntitiesSavedStatesCallback
+			) {
 				// The modal for multiple entity saving will open,
 				// hold the callback for saving/publishing the post
 				// so that we can call it if the post entity is checked.
@@ -212,7 +223,8 @@ export default compose( [
 			isSavingNonPostEntityChanges,
 			getEditedPostAttribute,
 			getPostEdits,
-		} = select( editorStore );
+			hasPostMetaChanges,
+		} = unlock( select( editorStore ) );
 		return {
 			isSaving: isSavingPost(),
 			isAutoSaving: isAutosavingPost(),
@@ -229,6 +241,7 @@ export default compose( [
 			postStatus: getEditedPostAttribute( 'status' ),
 			postStatusHasChanged: getPostEdits()?.status,
 			hasNonPostEntityChanges: hasNonPostEntityChanges(),
+			hasPostMetaChanges: hasPostMetaChanges(),
 			isSavingNonPostEntityChanges: isSavingNonPostEntityChanges(),
 		};
 	} ),

package/src/components/post-publish-panel/index.js

@@ -96,6 +96,7 @@ export class PostPublishPanel extends Component {
 									disabled={ isSavingNonPostEntityChanges }
 									onClick={ onClose }
 									variant="secondary"
+									size="compact"
 								>
 									{ __( 'Cancel' ) }
 								</Button>

package/src/components/post-publish-panel/maybe-tags-panel.js

@@ -28,7 +28,7 @@ const TagsPanel = () => {
 					'Tags help users and search engines navigate your site and find your content. Add a few keywords to describe your post.'
 				) }
 			</p>
-			<FlatTermSelector slug={ 'post_tag' } />
+			<FlatTermSelector slug="post_tag" />
 		</PanelBody>
 	);
 };

package/src/components/post-publish-panel/style.scss

@@ -119,6 +119,11 @@
 	.editor-post-visibility__dialog-legend {
 		display: none;
 	}
+
+	.components-panel__body-title .components-button {
+		align-items: flex-start;
+		text-wrap: pretty;
+	}
 }
 
 .post-publish-panel__postpublish .components-panel__body {

package/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -447,7 +447,7 @@ exports[`PostPublishPanel should render the pre-publish panel if post status is
         class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          class="components-button is-secondary"
+          class="components-button is-secondary is-compact"
           type="button"
         >
           Cancel
@@ -600,7 +600,7 @@ exports[`PostPublishPanel should render the pre-publish panel if the post is not
         class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          class="components-button is-secondary"
+          class="components-button is-secondary is-compact"
           type="button"
         >
           Cancel
@@ -797,7 +797,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
         class="editor-post-publish-panel__header-cancel-button"
       >
         <button
-          class="components-button is-secondary"
+          class="components-button is-secondary is-compact"
           type="button"
         >
           Cancel

package/src/components/post-saved-state/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -141,7 +141,7 @@ export default function PostSavedState( { forceIsDirty } ) {
 		<Button
 			className={
 				isSaveable || isSaving
-					? classnames( {
+					? clsx( {
 							'editor-post-save-draft': ! isSavedState,
 							'editor-post-saved-state': isSavedState,
 							'is-saving': isSaving,

package/src/components/post-schedule/check.js

@@ -8,6 +8,14 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Wrapper component that renders its children only if post has a publish action.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component} - The component to be rendered or null if there is no publish action.
+ */
 export default function PostScheduleCheck( { children } ) {
 	const hasPublishAction = useSelect( ( select ) => {
 		return (

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

@@ -8,7 +8,7 @@ import { parseISO, endOfMonth, startOfMonth } from 'date-fns';
  */
 import { getSettings } from '@wordpress/date';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { __experimentalPublishDateTimePicker as PublishDateTimePicker } from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -16,8 +16,33 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
-export default function PostSchedule( { onClose } ) {
+const { PrivatePublishDateTimePicker } = unlock( blockEditorPrivateApis );
+
+/**
+ * Renders the PostSchedule component. It allows the user to schedule a post.
+ *
+ * @param {Object}   props         Props.
+ * @param {Function} props.onClose Function to close the component.
+ *
+ * @return {Component} The component to be rendered.
+ */
+export default function PostSchedule( props ) {
+	return (
+		<PrivatePostSchedule
+			{ ...props }
+			showPopoverHeaderActions
+			isCompact={ false }
+		/>
+	);
+}
+
+export function PrivatePostSchedule( {
+	onClose,
+	showPopoverHeaderActions,
+	isCompact,
+} ) {
 	const { postDate, postType } = useSelect(
 		( select ) => ( {
 			postDate: select( editorStore ).getEditedPostAttribute( 'date' ),
@@ -69,7 +94,7 @@ export default function PostSchedule( { onClose } ) {
 	);
 
 	return (
-		<PublishDateTimePicker
+		<PrivatePublishDateTimePicker
 			currentDate={ postDate }
 			onChange={ onUpdateDate }
 			is12Hour={ is12HourTime }
@@ -78,6 +103,8 @@ export default function PostSchedule( { onClose } ) {
 				setPreviewedMonth( parseISO( date ) )
 			}
 			onClose={ onClose }
+			isCompact={ isCompact }
+			showPopoverHeaderActions={ showPopoverHeaderActions }
 		/>
 	);
 }

package/src/components/post-schedule/label.js

@@ -10,10 +10,25 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the PostScheduleLabel component.
+ *
+ * @param {Object} props Props.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function PostScheduleLabel( props ) {
 	return usePostScheduleLabel( props );
 }
 
+/**
+ * Custom hook to get the label for post schedule.
+ *
+ * @param {Object}  options      Options for the hook.
+ * @param {boolean} options.full Whether to get the full label or not. Default is false.
+ *
+ * @return {string} The label for post schedule.
+ */
 export function usePostScheduleLabel( { full = false } = {} ) {
 	const { date, isFloating } = useSelect(
 		( select ) => ( {

package/src/components/post-schedule/panel.js

@@ -28,6 +28,11 @@ const DESIGN_POST_TYPES = [
 	NAVIGATION_POST_TYPE,
 ];
 
+/**
+ * Renders the Post Schedule Panel component.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function PostSchedulePanel() {
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	const postType = useSelect(
@@ -41,7 +46,9 @@ export default function PostSchedulePanel() {
 			// move around when the label changes.
 			anchor: popoverAnchor,
 			'aria-label': __( 'Change publish date' ),
-			placement: 'bottom-end',
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
 		} ),
 		[ popoverAnchor ]
 	);
@@ -65,6 +72,7 @@ export default function PostSchedulePanel() {
 							size="compact"
 							className="editor-post-schedule__dialog-toggle"
 							variant="tertiary"
+							tooltipPosition="middle left"
 							onClick={ onToggle }
 							aria-label={ sprintf(
 								// translators: %s: Current post date.

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

@@ -8,14 +8,3 @@
 		padding: $grid-unit-20;
 	}
 }
-
-.editor-post-schedule__dialog-toggle.components-button {
-	overflow: hidden;
-	text-align: left;
-	white-space: unset;
-	height: auto;
-	min-height: $button-size-compact;
-
-	// The line height + the padding should be the same as the button size.
-	line-height: inherit;
-}

package/src/components/post-slug/panel.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelRow } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PostSlugForm from './';
+import PostSlugCheck from './check';
+
+export function PostSlug() {
+	return (
+		<PostSlugCheck>
+			<PanelRow className="editor-post-slug">
+				<PostSlugForm />
+			</PanelRow>
+		</PostSlugCheck>
+	);
+}
+
+export default PostSlug;

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

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

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

@@ -26,7 +26,11 @@ describe( 'PostSlug', () => {
 
 		useSelect.mockImplementation( ( mapSelect ) =>
 			mapSelect( () => ( {
-				getPostType: () => null,
+				getPostType: () => ( {
+					supports: {
+						slug: true,
+					},
+				} ),
 				getEditedPostAttribute: () => 'post',
 				getEditedPostSlug: () => '1',
 			} ) )

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -15,13 +10,12 @@ import {
 	TextControl,
 	RadioControl,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
-import { Icon, chevronDownSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -33,44 +27,17 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../store/constants';
 import PostPanelRow from '../post-panel-row';
+import { PrivatePostSchedule } from '../post-schedule';
 import { store as editorStore } from '../../store';
 
-function PostStatusLabel( { canEdit } ) {
-	const status = useSelect(
-		( select ) => select( editorStore ).getEditedPostAttribute( 'status' ),
-		[]
-	);
-	let statusLabel;
-	switch ( status ) {
-		case 'publish':
-			statusLabel = __( 'Published' );
-			break;
-		case 'future':
-			statusLabel = __( 'Scheduled' );
-			break;
-		case 'draft':
-		case 'auto-draft':
-			statusLabel = __( 'Draft' );
-			break;
-		case 'pending':
-			statusLabel = __( 'Pending review' );
-			break;
-		case 'private':
-			statusLabel = __( 'Published privately' );
-			break;
-	}
-	return (
-		<Text
-			className={ classnames( 'editor-post-status-label', {
-				[ ` has-status-${ status }` ]: !! status,
-				'has-icon': canEdit,
-			} ) }
-		>
-			{ statusLabel }
-			{ canEdit && <Icon icon={ chevronDownSmall } /> }
-		</Text>
-	);
-}
+const labels = {
+	'auto-draft': __( 'Draft' ),
+	draft: __( 'Draft' ),
+	pending: __( 'Pending' ),
+	private: __( 'Private' ),
+	future: __( 'Scheduled' ),
+	publish: __( 'Published' ),
+};
 
 const STATUS_OPTIONS = [
 	{
@@ -208,11 +175,6 @@ export default function PostStatus() {
 		let newPassword = password;
 		if ( status === 'future' && new Date( date ) > new Date() ) {
 			newDate = null;
-		} else if ( value === 'future' ) {
-			if ( ! date || new Date( date ) < new Date() ) {
-				newDate = new Date();
-				newDate.setDate( newDate.getDate() + 7 );
-			}
 		}
 		if ( value === 'private' && password ) {
 			newPassword = '';
@@ -234,10 +196,16 @@ export default function PostStatus() {
 					focusOnMount
 					renderToggle={ ( { onToggle } ) => (
 						<Button
-							className="editor-post-status-trigger"
+							variant="tertiary"
+							size="compact"
 							onClick={ onToggle }
+							aria-label={ sprintf(
+								// translators: %s: Current post status.
+								__( 'Change post status: %s' ),
+								labels[ status ]
+							) }
 						>
-							<PostStatusLabel canEdit={ canEdit } />
+							{ labels[ status ] }
 						</Button>
 					) }
 					renderContent={ ( { onClose } ) => (
@@ -260,6 +228,16 @@ export default function PostStatus() {
 												: status
 										}
 									/>
+									{ status === 'future' && (
+										<div className="editor-change-status__publish-date-wrapper">
+											<PrivatePostSchedule
+												showPopoverHeaderActions={
+													false
+												}
+												isCompact
+											/>
+										</div>
+									) }
 									{ status !== 'private' && (
 										<VStack
 											as="fieldset"
@@ -309,8 +287,8 @@ export default function PostStatus() {
 					) }
 				/>
 			) : (
-				<div className="editor-post-status">
-					<PostStatusLabel />
+				<div className="editor-post-status is-read-only">
+					{ labels[ status ] }
 				</div>
 			) }
 		</PostPanelRow>

package/src/components/post-status/style.scss

@@ -1,43 +1,13 @@
 .editor-post-status {
 	max-width: 100%;
 
-	.editor-post-status-trigger {
-		padding: 1px;
-		height: auto;
-		border-radius: $grid-unit-20;
-	}
-
-	.editor-post-status-label {
-		border-radius: $grid-unit-20;
-		display: inline-flex;
-		padding: 0 $grid-unit-15 0 $grid-unit-15;
-		background: rgba($gray-900, 0.04);
-		height: $button-size-compact;
-		align-items: center;
-		color: $gray-900;
-
-		&.has-icon {
-			padding: 0 $grid-unit-10 0 $grid-unit-15;
-
-			&:hover {
-				background: rgba($gray-900, 0.08);
-			}
-		}
-
-		&.has-status-publish,
-		&.has-status-private,
-		&.has-status-future {
-			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-			color: var(--wp-admin-theme-color);
-
-			&:hover {
-				background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
-			}
-		}
+	&.is-read-only {
+		padding: 6px 12px;
 	}
 }
 
-.editor-change-status__password-fieldset {
+.editor-change-status__password-fieldset,
+.editor-change-status__publish-date-wrapper {
 	border-top: $border-width solid $gray-200;
 	padding-top: $grid-unit-20;
 }

package/src/components/post-sticky/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import { ToggleControl, VisuallyHidden } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -10,6 +10,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import PostStickyCheck from './check';
 import { store as editorStore } from '../../store';
+import PostPanelRow from '../post-panel-row';
 
 export default function PostSticky() {
 	const postSticky = useSelect( ( select ) => {
@@ -21,12 +22,16 @@ export default function PostSticky() {
 
 	return (
 		<PostStickyCheck>
-			<CheckboxControl
-				__nextHasNoMarginBottom
-				label={ __( 'Stick to the top of the blog' ) }
-				checked={ postSticky }
-				onChange={ () => editPost( { sticky: ! postSticky } ) }
-			/>
+			<PostPanelRow label={ __( 'Sticky' ) }>
+				<ToggleControl
+					className="editor-post-sticky__toggle-control"
+					label={
+						<VisuallyHidden>{ __( 'Sticky' ) }</VisuallyHidden>
+					}
+					checked={ postSticky }
+					onChange={ () => editPost( { sticky: ! postSticky } ) }
+				/>
+			</PostPanelRow>
 		</PostStickyCheck>
 	);
 }