Update: Implement the new discussion panel design.

WordPress · May 3, 2024 · 2a60d9a · 2a60d9a
1 parent d185a1b
commit 2a60d9a
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 44 deletions.
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -14,6 +14,7 @@ import {
 	PostSchedulePanel,
 	PostSyncStatus,
 	PostURLPanel,
+	PostDiscussionPanel,
 	PostTemplatePanel,
 	PostFeaturedImagePanel,
 	store as editorStore,
@@ -106,6 +107,7 @@ export default function PostStatus() {
 							<PostSchedulePanel />
 							<PostTemplatePanel />
 							<PostURLPanel />
+							<PostDiscussionPanel />
 							<PostSyncStatus />
 						</VStack>
 						<PostSticky />

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -171,7 +171,6 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
 					<PluginDocumentSettingPanel.Slot />
 					<PostLastRevisionPanel />
 					<PostTaxonomiesPanel />
-					<PostDiscussionPanel />
 					<PageAttributesPanel />
 					<PatternOverridesPanel />
 					{ ! isEditingTemplate && <MetaBoxes location="side" /> }

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js
@@ -13,7 +13,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	PageAttributesPanel,
-	PostDiscussionPanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	privateApis as editorPrivateApis,
@@ -99,7 +98,6 @@ const FillContents = ( { tabName, isEditingPage, supportsGlobalStyles } ) => {
 						{ isEditingPage ? <PagePanels /> : <TemplatePanel /> }
 						<PostLastRevisionPanel />
 						<PostTaxonomiesPanel />
-						<PostDiscussionPanel />
 						<PageAttributesPanel />
 						<PatternOverridesPanel />
 					</Tabs.TabPanel>

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js
@@ -6,6 +6,7 @@ import {
 	PluginPostStatusInfo,
 	PostAuthorPanel,
 	PostURLPanel,
+	PostDiscussionPanel,
 	PostSchedulePanel,
 	PostTemplatePanel,
 	PostFeaturedImagePanel,
@@ -50,6 +51,7 @@ export default function PageSummary() {
 							<PostSchedulePanel />
 							<PostTemplatePanel />
 							<PostURLPanel />
+							<PostDiscussionPanel />
 						</VStack>
 						<PostAuthorPanel />
 						{ fills }

diff --git a/packages/editor/src/components/post-comments/index.js b/packages/editor/src/components/post-comments/index.js
@@ -2,14 +2,46 @@
  * 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';
 
 /**
  * Internal dependencies
  */
 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>
 	);
 }
 

diff --git a/packages/editor/src/components/post-discussion/panel.js b/packages/editor/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,
+	ExternalLink,
+} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useState, useMemo } from '@wordpress/element';
+import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -12,50 +20,116 @@ 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={ 3 }>
+				<PostTypeSupportCheck supportKeys="comments">
+					<PostComments />
+				</PostTypeSupportCheck>
+				<PostTypeSupportCheck supportKeys="trackbacks">
+					<PostPingbacks />
+					<ExternalLink
+						href={ __(
+							'https://wordpress.org/documentation/article/trackbacks-and-pingbacks/'
+						) }
+					>
+						{ __( 'Learn more about pingbacks & trackbacks' ) }
+					</ExternalLink>
+				</PostTypeSupportCheck>
+			</VStack>
+		</div>
+	);
+}
+
+function PostDiscussionToggle( { isOpen, onClick } ) {
+	const { commentStatus, pingStatus } = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
 		return {
-			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
+			commentStatus: getEditedPostAttribute( 'comment_status' ) ?? 'open',
+			pingStatus: getEditedPostAttribute( 'ping_status' ) ?? 'open',
 		};
 	}, [] );
-
-	const { toggleEditorPanelOpened } = useDispatch( editorStore );
-
-	if ( ! isEnabled ) {
-		return null;
+	let label;
+	if ( commentStatus === 'open' ) {
+		label =
+			pingStatus === 'open'
+				? __( 'Open, Pingbacks & Trackbacks enabled' )
+				: __( 'Open, Pingbacks & Trackbacks disabled' );
+	} else {
+		label =
+			pingStatus === 'open'
+				? __( 'Closed, Pingbacks & Trackbacks enabled' )
+				: __( 'Closed, Pingbacks & Trackbacks disabled' );
 	}
-
 	return (
-		<PanelBody
-			title={ __( 'Discussion' ) }
-			opened={ isOpened }
-			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+		<Button
+			size="compact"
+			className="editor-post-discussion__panel-toggle"
+			variant="tertiary"
+			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>
 	);
 }
diff --git a/packages/editor/src/components/post-discussion/style.scss b/packages/editor/src/components/post-discussion/style.scss
@@ -0,0 +1,22 @@
+.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;
+    }
+}
diff --git a/packages/editor/src/components/post-pingbacks/index.js b/packages/editor/src/components/post-pingbacks/index.js
@@ -26,7 +26,7 @@ function PostPingbacks() {
 	return (
 		<CheckboxControl
 			__nextHasNoMarginBottom
-			label={ __( 'Allow pingbacks & trackbacks' ) }
+			label={ __( 'Enable pingbacks & trackbacks' ) }
 			checked={ pingStatus === 'open' }
 			onChange={ onTogglePingback }
 		/>

diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss
@@ -16,6 +16,7 @@
 @import "./components/post-actions/style.scss";
 @import "./components/post-card-panel/style.scss";
 @import "./components/post-content-information/style.scss";
+@import "./components/post-discussion/style.scss";
 @import "./components/post-excerpt/style.scss";
 @import "./components/post-featured-image/style.scss";
 @import "./components/post-format/style.scss";