@wordpress/editor 13.34.0 → 13.35.0

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

@@ -1,17 +1,10 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import {
 	Icon,
 	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
 	__experimentalText as Text,
-	PanelBody,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
@@ -25,89 +18,50 @@ import { store as editorStore } from '../../store';
 import {
 	TEMPLATE_POST_TYPE,
 	TEMPLATE_PART_POST_TYPE,
-	PATTERN_POST_TYPE,
 } from '../../store/constants';
-import { PrivatePostExcerptPanel } from '../post-excerpt/panel';
-import PostLastEditedPanel from '../post-last-edited-panel';
 import { unlock } from '../../lock-unlock';
-import TemplateAreas from '../template-areas';
 
-export default function PostCardPanel( { className, actions } ) {
-	const { title, showPostContentPanels, icon, postType } = useSelect(
-		( select ) => {
-			const {
-				getEditedPostAttribute,
-				getCurrentPostType,
-				getCurrentPostId,
-				__experimentalGetTemplateInfo,
-			} = select( editorStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const _type = getCurrentPostType();
-			const _id = getCurrentPostId();
-			const _record = getEditedEntityRecord( 'postType', _type, _id );
-			const _templateInfo =
-				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
-					_type
-				) && __experimentalGetTemplateInfo( _record );
-			return {
-				title:
-					_templateInfo?.title || getEditedPostAttribute( 'title' ),
-				id: _id,
-				postType: _type,
-				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
-					area: _record?.area,
-				} ),
-				// Post excerpt panel and Last Edited info are rendered in different place depending on the post type.
-				// So we cannot make this check inside the PostExcerpt or PostLastEditedPanel component based on the current edited entity.
-				showPostContentPanels: [
-					TEMPLATE_POST_TYPE,
-					TEMPLATE_PART_POST_TYPE,
-					PATTERN_POST_TYPE,
-				].includes( _type ),
-			};
-		},
-		[]
-	);
+export default function PostCardPanel( { actions } ) {
+	const { title, icon } = useSelect( ( select ) => {
+		const {
+			getEditedPostAttribute,
+			getCurrentPostType,
+			getCurrentPostId,
+			__experimentalGetTemplateInfo,
+		} = select( editorStore );
+		const { getEditedEntityRecord } = select( coreStore );
+		const _type = getCurrentPostType();
+		const _id = getCurrentPostId();
+		const _record = getEditedEntityRecord( 'postType', _type, _id );
+		const _templateInfo =
+			[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( _type ) &&
+			__experimentalGetTemplateInfo( _record );
+		return {
+			title: _templateInfo?.title || getEditedPostAttribute( 'title' ),
+			icon: unlock( select( editorStore ) ).getPostIcon( _type, {
+				area: _record?.area,
+			} ),
+		};
+	}, [] );
 	return (
-		<PanelBody>
-			<div
-				className={ classnames( 'editor-post-card-panel', className, {
-					'has-description': showPostContentPanels,
-				} ) }
+		<div className="editor-post-card-panel">
+			<HStack
+				spacing={ 2 }
+				className="editor-post-card-panel__header"
+				align="flex-start"
 			>
-				<HStack
-					spacing={ 2 }
-					className="editor-post-card-panel__header"
-					align="flex-start"
+				<Icon className="editor-post-card-panel__icon" icon={ icon } />
+				<Text
+					numberOfLines={ 2 }
+					truncate
+					className="editor-post-card-panel__title"
+					weight={ 500 }
+					as="h2"
 				>
-					<Icon
-						className="editor-post-card-panel__icon"
-						icon={ icon }
-					/>
-					<Text
-						numberOfLines={ 2 }
-						truncate
-						className="editor-post-card-panel__title"
-						weight={ 500 }
-						as="h2"
-					>
-						{ title ? decodeEntities( title ) : __( 'No Title' ) }
-					</Text>
-					{ actions }
-				</HStack>
-				<VStack className="editor-post-card-panel__content">
-					{ showPostContentPanels && (
-						<VStack
-							className="editor-post-card-panel__description"
-							spacing={ 2 }
-						>
-							<PrivatePostExcerptPanel />
-							<PostLastEditedPanel />
-						</VStack>
-					) }
-					{ postType === TEMPLATE_POST_TYPE && <TemplateAreas /> }
-				</VStack>
-			</div>
-		</PanelBody>
+					{ title ? decodeEntities( title ) : __( 'No Title' ) }
+				</Text>
+				{ actions }
+			</HStack>
+		</div>
 	);
 }

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

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { CheckboxControl } from '@wordpress/components';
+import {
+	RadioControl,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
@@ -10,6 +14,34 @@ import { useDispatch, useSelect } from '@wordpress/data';
  */
 import { store as editorStore } from '../../store';
 
+const COMMENT_OPTIONS = [
+	{
+		label: (
+			<>
+				{ __( 'Open' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visitors can add new comments and replies.' ) }
+				</Text>
+			</>
+		),
+		value: 'open',
+	},
+	{
+		label: (
+			<>
+				{ __( 'Closed' ) }
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Visitors cannot add new comments or replies.' ) }
+				</Text>
+				<Text variant="muted" size={ 12 }>
+					{ __( 'Existing comments remain visible.' ) }
+				</Text>
+			</>
+		),
+		value: 'closed',
+	},
+];
+
 function PostComments() {
 	const commentStatus = useSelect(
 		( select ) =>
@@ -18,18 +50,24 @@ function PostComments() {
 		[]
 	);
 	const { editPost } = useDispatch( editorStore );
-	const onToggleComments = () =>
+	const handleStatus = ( newCommentStatus ) =>
 		editPost( {
-			comment_status: commentStatus === 'open' ? 'closed' : 'open',
+			comment_status: newCommentStatus,
 		} );
 
 	return (
-		<CheckboxControl
-			__nextHasNoMarginBottom
-			label={ __( 'Allow comments' ) }
-			checked={ commentStatus === 'open' }
-			onChange={ onToggleComments }
-		/>
+		<form>
+			<VStack spacing={ 4 }>
+				<RadioControl
+					className="editor-change-status__options"
+					hideLabelFromVision
+					label={ __( 'Comment status' ) }
+					options={ COMMENT_OPTIONS }
+					onChange={ handleStatus }
+					selected={ commentStatus }
+				/>
+			</VStack>
+		</form>
 	);
 }
 

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

@@ -2,8 +2,16 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, PanelRow } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	Dropdown,
+	Button,
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+} 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 +20,119 @@ 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>
+			<Text>{ label }</Text>
+		</Button>
 	);
 }
 
 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,26 @@
+.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-button {
+		height: auto;
+	}
+	.components-text {
+		color: inherit;
+	}
+}
+
+.editor-post-discussion__panel-dialog .components-popover__content {
+	min-width: 320px;
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -194,7 +194,7 @@ function PrivateExcerpt() {
 			ref={ setPopoverAnchor }
 			renderToggle={ ( { onToggle } ) => (
 				<Button
-					className={ classnames(
+					className={ clsx(
 						'editor-post-excerpt__dropdown__trigger',
 						{ 'has-excerpt': !! excerpt }
 					) }

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

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

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

@@ -1,3 +1,9 @@
 [class].editor-post-format__suggestion {
 	margin: $grid-unit-05 0 0 0;
 }
+
+.editor-post-format__panel {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+}

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-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-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-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,9 +26,18 @@ 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>
+			}
 		/>
 	);
 }

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-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-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,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -53,15 +53,15 @@ function PostStatusLabel( { canEdit } ) {
 			statusLabel = __( 'Draft' );
 			break;
 		case 'pending':
-			statusLabel = __( 'Pending review' );
+			statusLabel = __( 'Pending' );
 			break;
 		case 'private':
-			statusLabel = __( 'Published privately' );
+			statusLabel = __( 'Private' );
 			break;
 	}
 	return (
 		<Text
-			className={ classnames( 'editor-post-status-label', {
+			className={ clsx( 'editor-post-status-label', {
 				[ ` has-status-${ status }` ]: !! status,
 				'has-icon': canEdit,
 			} ) }