@wordpress/editor 13.35.0 → 14.0.0

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button, SelectControl } from '@wordpress/components';
+import { Button, RadioControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 import { store as coreStore } from '@wordpress/core-data';
@@ -38,6 +38,16 @@ export const POST_FORMATS = [
 	return 0;
 } );
 
+/**
+ * `PostFormat` a component that allows changing the post format while also providing a suggestion for the current post.
+ *
+ * @example
+ * ```jsx
+ * <PostFormat />
+ * ```
+ *
+ * @return {JSX.Element} The rendered PostFormat component.
+ */
 export default function PostFormat() {
 	const instanceId = useInstanceId( PostFormat );
 	const postFormatSelectorId = `post-format-selector-${ instanceId }`;
@@ -75,16 +85,17 @@ export default function PostFormat() {
 	return (
 		<PostFormatCheck>
 			<div className="editor-post-format">
-				<SelectControl
-					__nextHasNoMarginBottom
+				<RadioControl
+					className="editor-post-format__options"
 					label={ __( 'Post Format' ) }
-					value={ postFormat }
+					selected={ postFormat }
 					onChange={ ( format ) => onUpdatePostFormat( format ) }
 					id={ postFormatSelectorId }
 					options={ formats.map( ( format ) => ( {
 						label: format.caption,
 						value: format.id,
 					} ) ) }
+					hideLabelFromVision
 				/>
 				{ suggestion && suggestion.id !== postFormat && (
 					<p className="editor-post-format__suggestion">

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

@@ -1,20 +1,85 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
+import { Button, Dropdown } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import PostFormatForm from './';
+import { default as PostFormatForm, POST_FORMATS } from './';
 import PostFormatCheck from './check';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
 
-export function PostFormat() {
+/**
+ * Renders the Post Author Panel component.
+ *
+ * @return {Component} The component to be rendered.
+ */
+function PostFormat() {
+	const { postFormat } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const _postFormat = getEditedPostAttribute( 'format' );
+		return {
+			postFormat: _postFormat ?? 'standard',
+		};
+	}, [] );
+	const activeFormat = POST_FORMATS.find(
+		( format ) => format.id === postFormat
+	);
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
 	return (
 		<PostFormatCheck>
-			<PanelRow className="editor-post-format__panel">
-				<PostFormatForm />
-			</PanelRow>
+			<PostPanelRow label={ __( 'Format' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					contentClassName="editor-post-format__dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Button
+							size="compact"
+							variant="tertiary"
+							aria-expanded={ isOpen }
+							aria-label={ sprintf(
+								// translators: %s: Current post format.
+								__( 'Change format: %s' ),
+								activeFormat?.caption
+							) }
+							onClick={ onToggle }
+						>
+							{ activeFormat?.caption }
+						</Button>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<div className="editor-post-format__dialog-content">
+							<InspectorPopoverHeader
+								title={ __( 'Format' ) }
+								onClose={ onClose }
+							/>
+							<PostFormatForm />
+						</div>
+					) }
+				/>
+			</PostPanelRow>
 		</PostFormatCheck>
 	);
 }

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

@@ -2,8 +2,14 @@
 	margin: $grid-unit-05 0 0 0;
 }
 
-.editor-post-format__panel {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
+.editor-post-format__dialog .editor-post-format__dialog-content {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+}
+
+.editor-post-format__options {
+	.components-base-control__field > .components-v-stack {
+		gap: $grid-unit-15;
+	}
 }

package/src/components/post-last-revision/check.js

@@ -9,6 +9,14 @@ import { useSelect } from '@wordpress/data';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
+/**
+ * Wrapper component that renders its children if the post has more than one revision.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component|null} Rendered child components if post has more than one revision, otherwise null.
+ */
 function PostLastRevisionCheck( { children } ) {
 	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
 		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =

package/src/components/post-last-revision/index.js

@@ -13,7 +13,12 @@ import { addQueryArgs } from '@wordpress/url';
 import PostLastRevisionCheck from './check';
 import { store as editorStore } from '../../store';
 
-function LastRevision() {
+/**
+ * Renders the component for displaying the last revision of a post.
+ *
+ * @return {Component} The component to be rendered.
+ */
+function PostLastRevision() {
 	const { lastRevisionId, revisionsCount } = useSelect( ( select ) => {
 		const { getCurrentPostLastRevisionId, getCurrentPostRevisionsCount } =
 			select( editorStore );
@@ -42,4 +47,4 @@ function LastRevision() {
 	);
 }
 
-export default LastRevision;
+export default PostLastRevision;

package/src/components/post-last-revision/panel.js

@@ -9,6 +9,11 @@ import { PanelBody } from '@wordpress/components';
 import PostLastRevision from './';
 import PostLastRevisionCheck from './check';
 
+/**
+ * Renders the panel for displaying the last revision of a post.
+ *
+ * @return {Component} The component to be rendered.
+ */
 function PostLastRevisionPanel() {
 	return (
 		<PostLastRevisionCheck>

package/src/components/post-locked-modal/index.js

@@ -20,6 +20,12 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * A modal component that is displayed when a post is locked for editing by another user.
+ * The modal provides information about the lock status and options to take over or exit the editor.
+ *
+ * @return {JSX.Element|null} The rendered PostLockedModal component.
+ */
 export default function PostLockedModal() {
 	const instanceId = useInstanceId( PostLockedModal );
 	const hookName = 'core/editor/post-locked-modal-' + instanceId;

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

@@ -11,6 +11,9 @@
 	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
+	padding: 6px 0; // Matches button to ensure alignment
+	line-height: $grid-unit-05 * 5;
+	hyphens: auto;
 }
 
 .editor-post-panel__row-control {
@@ -18,4 +21,16 @@
 	min-height: $grid-unit-40;
 	display: flex;
 	align-items: center;
+
+	.components-button {
+		max-width: 100%;
+		text-align: left;
+		text-wrap: pretty;
+		height: auto;
+		min-height: $button-size-compact;
+	}
+
+	.components-dropdown {
+		max-width: 100%;
+	}
 }

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

@@ -42,4 +42,10 @@ function PostPingbacks() {
 	);
 }
 
+/**
+ * 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/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-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;
-}