@wordpress/editor 13.34.0 → 14.0.0

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

@@ -2,8 +2,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, PanelRow } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	Dropdown,
+	Button,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -12,50 +19,127 @@ import { store as editorStore } from '../../store';
 import PostTypeSupportCheck from '../post-type-support-check';
 import PostComments from '../post-comments';
 import PostPingbacks from '../post-pingbacks';
+import PostPanelRow from '../post-panel-row';
 
 const PANEL_NAME = 'discussion-panel';
 
-function DiscussionPanel() {
-	const { isEnabled, isOpened } = useSelect( ( select ) => {
-		const { isEditorPanelEnabled, isEditorPanelOpened } =
-			select( editorStore );
+function ModalContents( { onClose } ) {
+	return (
+		<div className="editor-post-discussion">
+			<InspectorPopoverHeader
+				title={ __( 'Discussion' ) }
+				onClose={ onClose }
+			/>
+			<VStack spacing={ 4 }>
+				<PostTypeSupportCheck supportKeys="comments">
+					<PostComments />
+				</PostTypeSupportCheck>
+				<PostTypeSupportCheck supportKeys="trackbacks">
+					<PostPingbacks />
+				</PostTypeSupportCheck>
+			</VStack>
+		</div>
+	);
+}
+
+function PostDiscussionToggle( { isOpen, onClick } ) {
+	const {
+		commentStatus,
+		pingStatus,
+		commentsSupported,
+		trackbacksSupported,
+	} = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		const postType = getPostType( getEditedPostAttribute( 'type' ) );
 		return {
-			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			commentStatus: getEditedPostAttribute( 'comment_status' ) ?? 'open',
+			pingStatus: getEditedPostAttribute( 'ping_status' ) ?? 'open',
+			commentsSupported: !! postType.supports.comments,
+			trackbacksSupported: !! postType.supports.trackbacks,
 		};
 	}, [] );
-
-	const { toggleEditorPanelOpened } = useDispatch( editorStore );
-
-	if ( ! isEnabled ) {
-		return null;
+	let label;
+	if ( commentStatus === 'open' ) {
+		if ( pingStatus === 'open' ) {
+			label = __( 'Open' );
+		} else {
+			label = trackbacksSupported ? __( 'Comments only' ) : __( 'Open' );
+		}
+	} else if ( pingStatus === 'open' ) {
+		label = commentsSupported ? __( 'Pings only' ) : __( 'Pings enabled' );
+	} else {
+		label = __( 'Closed' );
 	}
-
 	return (
-		<PanelBody
-			title={ __( 'Discussion' ) }
-			opened={ isOpened }
-			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+		<Button
+			size="compact"
+			className="editor-post-discussion__panel-toggle"
+			variant="tertiary"
+			aria-label={ __( 'Change discussion options' ) }
+			aria-expanded={ isOpen }
+			onClick={ onClick }
 		>
-			<PostTypeSupportCheck supportKeys="comments">
-				<PanelRow>
-					<PostComments />
-				</PanelRow>
-			</PostTypeSupportCheck>
-
-			<PostTypeSupportCheck supportKeys="trackbacks">
-				<PanelRow>
-					<PostPingbacks />
-				</PanelRow>
-			</PostTypeSupportCheck>
-		</PanelBody>
+			{ label }
+		</Button>
 	);
 }
 
+/**
+ * This component allows to update comment and pingback
+ * settings for the current post. Internally there are
+ * checks whether the current post has support for the
+ * above and if the `discussion-panel` panel is enabled.
+ *
+ * @return {JSX.Element|null} The rendered PostDiscussionPanel component.
+ */
 export default function PostDiscussionPanel() {
+	const { isEnabled } = useSelect( ( select ) => {
+		const { isEditorPanelEnabled } = select( editorStore );
+		return {
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+		};
+	}, [] );
+
+	// 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 ]
+	);
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
 	return (
 		<PostTypeSupportCheck supportKeys={ [ 'comments', 'trackbacks' ] }>
-			<DiscussionPanel />
+			<PostPanelRow label={ __( 'Discussion' ) } ref={ setPopoverAnchor }>
+				<Dropdown
+					popoverProps={ popoverProps }
+					className="editor-post-discussion__panel-dropdown"
+					contentClassName="editor-post-discussion__panel-dialog"
+					focusOnMount
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<PostDiscussionToggle
+							isOpen={ isOpen }
+							onClick={ onToggle }
+						/>
+					) }
+					renderContent={ ( { onClose } ) => (
+						<ModalContents onClose={ onClose } />
+					) }
+				/>
+			</PostPanelRow>
 		</PostTypeSupportCheck>
 	);
 }

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

@@ -0,0 +1,24 @@
+.editor-post-discussion__panel-dialog .editor-post-discussion {
+	// sidebar width - popover padding - form margin
+	min-width: $sidebar-width - $grid-unit-20 - $grid-unit-20;
+	margin: $grid-unit-10;
+
+	.components-radio-control__option {
+		align-items: flex-start;
+	}
+
+	.components-radio-control__label .components-text {
+		display: block;
+		margin-top: $grid-unit-05;
+	}
+}
+.editor-post-discussion__panel-toggle {
+
+	.components-text {
+		color: inherit;
+	}
+}
+
+.editor-post-discussion__panel-dialog .components-popover__content {
+	min-width: 320px;
+}

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -84,6 +79,11 @@ function ExcerptPanel() {
 	);
 }
 
+/**
+ * Is rendered if the post type supports excerpts and allows editing the excerpt.
+ *
+ * @return {JSX.Element} The rendered PostExcerptPanel component.
+ */
 export default function PostExcerptPanel() {
 	return (
 		<PostExcerptCheck>
@@ -186,49 +186,46 @@ function PrivateExcerpt() {
 		? __( 'Edit description' )
 		: __( 'Edit excerpt' );
 	return (
-		<Dropdown
-			className="editor-post-excerpt__dropdown"
-			contentClassName="editor-post-excerpt__dropdown__content"
-			popoverProps={ popoverProps }
-			focusOnMount
-			ref={ setPopoverAnchor }
-			renderToggle={ ( { onToggle } ) => (
-				<Button
-					className={ classnames(
-						'editor-post-excerpt__dropdown__trigger',
-						{ 'has-excerpt': !! excerpt }
-					) }
-					onClick={ onToggle }
-					label={
-						!! excerptText ? triggerEditLabel : excerptPlaceholder
-					}
-					showTooltip={ !! excerptText }
-				>
-					{ excerptText || excerptPlaceholder }
-				</Button>
-			) }
-			renderContent={ ( { onClose } ) => (
-				<>
-					<InspectorPopoverHeader
-						title={ label }
-						onClose={ onClose }
-					/>
+		<VStack>
+			{ excerptText }
+			<Dropdown
+				className="editor-post-excerpt__dropdown"
+				contentClassName="editor-post-excerpt__dropdown__content"
+				popoverProps={ popoverProps }
+				focusOnMount
+				ref={ setPopoverAnchor }
+				renderToggle={ ( { onToggle } ) => (
+					<Button
+						className="editor-post-excerpt__dropdown__trigger"
+						onClick={ onToggle }
+						variant="link"
+					>
+						{ excerptText ? triggerEditLabel : excerptPlaceholder }
+					</Button>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<>
+						<InspectorPopoverHeader
+							title={ label }
+							onClose={ onClose }
+						/>
 
-					<VStack spacing={ 4 }>
-						<PluginPostExcerpt.Slot>
-							{ ( fills ) => (
-								<>
-									<PostExcerptForm
-										hideLabelFromVision
-										updateOnBlur
-									/>
-									{ fills }
-								</>
-							) }
-						</PluginPostExcerpt.Slot>
-					</VStack>
-				</>
-			) }
-		/>
+						<VStack spacing={ 4 }>
+							<PluginPostExcerpt.Slot>
+								{ ( fills ) => (
+									<>
+										<PostExcerptForm
+											hideLabelFromVision
+											updateOnBlur
+										/>
+										{ fills }
+									</>
+								) }
+							</PluginPostExcerpt.Slot>
+						</VStack>
+					</>
+				) }
+			/>
+		</VStack>
 	);
 }

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

@@ -3,23 +3,6 @@
 	margin-bottom: 10px;
 }
 
-.editor-post-excerpt__dropdown__trigger {
-	height: auto;
-	padding: 0;
-
-	&:not(.has-excerpt) {
-		color: $gray-700;
-	}
-
-	&:hover {
-		color: $gray-900;
-	}
-}
-
-.editor-post-excerpt__dropdown {
-	display: block;
-}
-
 .editor-post-excerpt__dropdown__content {
 	.components-popover__content {
 		min-width: 320px;

package/src/components/post-featured-image/check.js

@@ -4,6 +4,15 @@
 import PostTypeSupportCheck from '../post-type-support-check';
 import ThemeSupportCheck from '../theme-support-check';
 
+/**
+ * Wrapper component that renders its children only if the post type supports a featured image
+ * and the theme supports post thumbnails.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component} The component to be rendered.
+ */
 function PostFeaturedImageCheck( { children } ) {
 	return (
 		<ThemeSupportCheck supportKeys="post-thumbnails">

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

@@ -266,6 +266,21 @@ const applyWithDispatch = withDispatch(
 	}
 );
 
+/**
+ * Renders the component for managing the featured image of a post.
+ *
+ * @param {Object}   props                  Props.
+ * @param {number}   props.currentPostId    ID of the current post.
+ * @param {number}   props.featuredImageId  ID of the featured image.
+ * @param {Function} props.onUpdateImage    Function to call when the image is updated.
+ * @param {Function} props.onRemoveImage    Function to call when the image is removed.
+ * @param {Object}   props.media            The media object representing the featured image.
+ * @param {string}   props.postType         Post type.
+ * @param {Element}  props.noticeUI         UI for displaying notices.
+ * @param {Object}   props.noticeOperations Operations for managing notices.
+ *
+ * @return {Element} Component to be rendered .
+ */
 export default compose(
 	withNotices,
 	applyWithSelect,

package/src/components/post-featured-image/panel.js

@@ -15,6 +15,15 @@ import PostFeaturedImageCheck from './check';
 
 const PANEL_NAME = 'featured-image';
 
+/**
+ * Renders the panel for the post featured image.
+ *
+ * @param {Object}  props               Props.
+ * @param {boolean} props.withPanelBody Whether to include the panel body. Default true.
+ *
+ * @return {Component|null} The component to be rendered.
+ * Return Null if the editor panel is disabled for featured image.
+ */
 export default function PostFeaturedImagePanel( { withPanelBody = true } ) {
 	const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
 		const {

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

@@ -27,4 +27,12 @@ function PostFormatCheck( { children } ) {
 	);
 }
 
+/**
+ * Component check if there are any post formats.
+ *
+ * @param {Object}  props          The component props.
+ * @param {Element} props.children The child elements to render.
+ *
+ * @return {Component|null} The rendered component or null if post formats are disabled.
+ */
 export default PostFormatCheck;

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

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+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 { default as PostFormatForm, POST_FORMATS } from './';
+import PostFormatCheck from './check';
+import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
+
+/**
+ * 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>
+			<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>
+	);
+}
+
+export default PostFormat;

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

@@ -1,3 +1,15 @@
 [class].editor-post-format__suggestion {
 	margin: $grid-unit-05 0 0 0;
 }
+
+.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-last-revision/test/check.js

@@ -21,7 +21,11 @@ function setupDataMock( id, count ) {
 			getCurrentPostLastRevisionId: () => id,
 			getCurrentPostRevisionsCount: () => count,
 			getEditedPostAttribute: () => null,
-			getPostType: () => null,
+			getPostType: () => ( {
+				supports: {
+					revisions: true,
+				},
+			} ),
 		} ) )
 	);
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -12,7 +12,7 @@ import { forwardRef } from '@wordpress/element';
 const PostPanelRow = forwardRef( ( { className, label, children }, ref ) => {
 	return (
 		<HStack
-			className={ classnames( 'editor-post-panel__row', className ) }
+			className={ clsx( 'editor-post-panel__row', className ) }
 			ref={ ref }
 		>
 			{ label && (

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%;
+	}
 }