Add UI for toggling Summary fields

packages/edit-post/README.md

@@ -306,6 +306,7 @@ _Parameters_
 
 -   _props_ `Object`: Component properties.
 -   _props.className_ `[string]`: An optional class name added to the row.
+-   _props.label_ `[string]`: Optional label text. If specified, the row can be toggled by the user.
 -   _props.children_ `WPElement`: Children to be rendered.
 
 _Returns_

packages/edit-post/src/components/sidebar/plugin-post-status-info/index.js

@@ -5,7 +5,15 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill, PanelRow } from '@wordpress/components';
+import {
+	createSlotFill,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PostStatusRow from '../post-status-row';
 
 export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
 
@@ -16,6 +24,8 @@ export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
  *
  * @param {Object}    props             Component properties.
  * @param {string}    [props.className] An optional class name added to the row.
+ * @param {string}    [props.label]     Optional label text. If specified, the row
+ *                                      can be toggled by the user.
  * @param {WPElement} props.children    Children to be rendered.
  *
  * @example
@@ -52,9 +62,15 @@ export const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
  *
  * @return {WPComponent} The component to be rendered.
  */
-const PluginPostStatusInfo = ( { children, className } ) => (
+const PluginPostStatusInfo = ( { children, className, label } ) => (
 	<Fill>
-		<PanelRow className={ className }>{ children }</PanelRow>
+		{ label ? (
+			<ToolsPanelItem className={ className } label={ label }>
+				{ children }
+			</ToolsPanelItem>
+		) : (
+			<PostStatusRow className={ className }>{ children }</PostStatusRow>
+		) }
 	</Fill>
 );
 

packages/edit-post/src/components/sidebar/post-author/index.js

@@ -1,18 +1,23 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import {
 	PostAuthor as PostAuthorForm,
 	PostAuthorCheck,
 } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
 
 export function PostAuthor() {
 	return (
 		<PostAuthorCheck>
-			<PanelRow className="edit-post-post-author">
+			<ToolsPanelItem
+				className="edit-post-post-author"
+				label={ __( 'Author' ) }
+				hasValue={ () => true }
+			>
 				<PostAuthorForm />
-			</PanelRow>
+			</ToolsPanelItem>
 		</PostAuthorCheck>
 	);
 }

packages/edit-post/src/components/sidebar/post-summary/excerpt.js → packages/edit-post/src/components/sidebar/post-excerpt/field.js

@@ -6,7 +6,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { PlainText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
-export default function PostSummaryExcerpt() {
+export default function PostExcerptField() {
 	const excerpt = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'excerpt' ),
 		[]
@@ -17,7 +17,7 @@ export default function PostSummaryExcerpt() {
 	return (
 		<PlainText
 			__experimentalVersion={ 2 }
-			className="edit-post-post-summary__excerpt"
+			className="edit-post-post-excerpt__field"
 			placeholder={ __( 'Add excerpt' ) }
 			value={ excerpt }
 			onChange={ ( value ) => editPost( { excerpt: value } ) }

packages/edit-post/src/components/sidebar/post-excerpt/index.js

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { PostTypeSupportCheck } from '@wordpress/editor';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PostExcerptField from './field';
+
+export default function PostExcerpt() {
+	return (
+		<PostTypeSupportCheck supportKeys="excerpt">
+			<ToolsPanelItem
+				className="edit-post-post-excerpt"
+				label={ __( 'Excerpt' ) }
+				hasValue={ () => true }
+			>
+				<PostExcerptField />
+			</ToolsPanelItem>
+		</PostTypeSupportCheck>
+	);
+}

packages/edit-post/src/components/sidebar/post-featured-image/index.js

@@ -6,12 +6,20 @@ import {
 	PostFeaturedImage as PostFeaturedImageForm,
 } from '@wordpress/editor';
 import { MediaUploadCheck } from '@wordpress/block-editor';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 export default function PostFeaturedImage() {
 	return (
 		<PostFeaturedImageCheck>
 			<MediaUploadCheck>
-				<PostFeaturedImageForm className="edit-post-post-featured-image" />
+				<ToolsPanelItem
+					className="edit-post-post-featured-image"
+					label={ __( 'Featured image' ) }
+					hasValue={ () => true }
+				>
+					<PostFeaturedImageForm />
+				</ToolsPanelItem>
 			</MediaUploadCheck>
 		</PostFeaturedImageCheck>
 	);

packages/edit-post/src/components/sidebar/post-format/index.js

@@ -1,18 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import {
 	PostFormat as PostFormatForm,
 	PostFormatCheck,
 } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
 
 export function PostFormat() {
 	return (
 		<PostFormatCheck>
-			<PanelRow className="edit-post-post-format">
+			<ToolsPanelItem
+				className="edit-post-post-format"
+				label={ __( 'Post format' ) }
+			>
 				<PostFormatForm />
-			</PanelRow>
+			</ToolsPanelItem>
 		</PostFormatCheck>
 	);
 }

packages/edit-post/src/components/sidebar/post-pending-status/index.js

@@ -1,18 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
+import { __experimentalToolsPanel as ToolsPanelItem } from '@wordpress/components';
 import {
 	PostPendingStatus as PostPendingStatusForm,
 	PostPendingStatusCheck,
 } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
 
 export function PostPendingStatus() {
 	return (
 		<PostPendingStatusCheck>
-			<PanelRow>
+			<ToolsPanelItem
+				label={ __( 'Pending review' ) }
+				hasValue={ () => true }
+			>
 				<PostPendingStatusForm />
-			</PanelRow>
+			</ToolsPanelItem>
 		</PostPendingStatusCheck>
 	);
 }

packages/edit-post/src/components/sidebar/post-schedule/index.js

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { PanelRow, Dropdown, Button } from '@wordpress/components';
+import {
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	Dropdown,
+	Button,
+} from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 import {
 	PostSchedule as PostScheduleForm,
@@ -14,7 +18,12 @@ export default function PostSchedule() {
 	const anchorRef = useRef();
 	return (
 		<PostScheduleCheck>
-			<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>
+			<ToolsPanelItem
+				ref={ anchorRef }
+				className="edit-post-post-schedule"
+				label={ __( 'Publish' ) }
+				hasValue={ () => true }
+			>
 				<span>{ __( 'Publish' ) }</span>
 				<Dropdown
 					popoverProps={ { anchorRef } }
@@ -30,7 +39,7 @@ export default function PostSchedule() {
 						<PostScheduleForm onClose={ onClose } />
 					) }
 				/>
-			</PanelRow>
+			</ToolsPanelItem>
 		</PostScheduleCheck>
 	);
 }

packages/edit-post/src/components/sidebar/post-schedule/style.scss

@@ -1,7 +1,9 @@
 .edit-post-post-schedule {
-	width: 100%;
-	position: relative;
+	align-items: center;
+	display: flex;
 	justify-content: flex-start;
+	position: relative;
+	width: 100%;
 
 	span {
 		display: block;

packages/edit-post/src/components/sidebar/post-slug/index.js

@@ -1,15 +1,20 @@
 /**
  * WordPress dependencies
  */
-import { PanelRow } from '@wordpress/components';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { PostSlug as PostSlugForm, PostSlugCheck } from '@wordpress/editor';
+import { __ } from '@wordpress/i18n';
 
 export function PostSlug() {
 	return (
 		<PostSlugCheck>
-			<PanelRow className="edit-post-post-slug">
+			<ToolsPanelItem
+				className="edit-post-post-slug"
+				label={ __( 'Slug' ) }
+				hasValue={ () => true }
+			>
 				<PostSlugForm />
-			</PanelRow>
+			</ToolsPanelItem>
 		</PostSlugCheck>
 	);
 }

packages/edit-post/src/components/sidebar/post-status-row/index.js

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Used inside of <PostStatus> as an alternative to <ToolsPanelItem> for when
+ * you want something to appear full width but don't want to give it a label
+ * that appears in the <ToolsPanel> dropdown.
+ *
+ * @param {Object}      params
+ * @param {string}      params.className
+ * @param {JSX.Element} params.children
+ */
+export default function PostStatusRow( { className, children } ) {
+	return (
+		<div className={ classnames( 'edit-post-post-status-row', className ) }>
+			{ children }
+		</div>
+	);
+}

packages/edit-post/src/components/sidebar/post-status-row/style.scss

@@ -0,0 +1,3 @@
+.edit-post-post-status-row {
+	grid-column: 1 / -1;
+}

packages/edit-post/src/components/sidebar/post-status/index.js

@@ -2,15 +2,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { compose, ifCondition } from '@wordpress/compose';
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import PostFeaturedImage from '../post-featured-image';
-import PostSummary from '../post-summary';
+import PostTitle from '../post-title';
+import PostExcerpt from '../post-excerpt';
 import PostVisibility from '../post-visibility';
 import PostTrash from '../post-trash';
 import PostSchedule from '../post-schedule';
@@ -29,19 +29,28 @@ import PostURL from '../post-url';
  */
 const PANEL_NAME = 'post-status';
 
-function PostStatus( { isOpened, onTogglePanel } ) {
+export default function PostStatus() {
+	// We use isEditorPanelRemoved to hide the panel if it was programatically
+	// removed. We do not use isEditorPanelEnabled since this panel should not
+	// be disabled through the UI.
+	const isRemoved = useSelect(
+		( select ) =>
+			select( editPostStore ).isEditorPanelRemoved( PANEL_NAME ),
+		[]
+	);
+
+	if ( isRemoved ) {
+		return null;
+	}
+
 	return (
-		<PanelBody
-			className="edit-post-post-status"
-			title={ __( 'Summary' ) }
-			opened={ isOpened }
-			onToggle={ onTogglePanel }
-		>
+		<ToolsPanel className="edit-post-post-status" label={ __( 'Summary' ) }>
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
 					<>
 						<PostFeaturedImage />
-						<PostSummary />
+						<PostTitle />
+						<PostExcerpt />
 						<PostVisibility />
 						<PostSchedule />
 						<PostURL />
@@ -56,27 +65,6 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 					</>
 				) }
 			</PluginPostStatusInfo.Slot>
-		</PanelBody>
+		</ToolsPanel>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		// We use isEditorPanelRemoved to hide the panel if it was programatically removed. We do
-		// not use isEditorPanelEnabled since this panel should not be disabled through the UI.
-		const { isEditorPanelRemoved, isEditorPanelOpened } =
-			select( editPostStore );
-		return {
-			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
-		};
-	} ),
-	ifCondition( ( { isRemoved } ) => ! isRemoved ),
-	withDispatch( ( dispatch ) => ( {
-		onTogglePanel() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				PANEL_NAME
-			);
-		},
-	} ) ),
-] )( PostStatus );