Add ellipsis menu to Summary panel

- Makes the Summary panel non-collapsible.
- Adds an ellipsis toolbar button that opens a menu.
- Moves 'Stick to the top', 'Mark as pending', 'Revision history' and
  'Trash post' buttons into the ellipsis menu.

Author: noisysocks

packages/block-editor/src/components/inspector-popover-header/index.js

@@ -41,13 +41,14 @@ export default function InspectorPopoverHeader( {
 					{ title }
 				</Heading>
 				<Spacer />
-				{ actions.map( ( { label, icon, onClick } ) => (
+				{ actions.map( ( { label, icon, isPressed, onClick } ) => (
 					<Button
 						key={ label }
 						className="block-editor-inspector-popover-header__action"
 						label={ label }
 						icon={ icon }
 						variant={ ! icon && 'tertiary' }
+						isPressed={ isPressed }
 						onClick={ onClick }
 					>
 						{ ! icon && label }

packages/e2e-tests/specs/editor/various/change-detection.test.js

@@ -99,10 +99,12 @@ describe( 'Change detection', () => {
 		// Toggle post as needing review (not persisted for autosave).
 		await ensureSidebarOpened();
 
-		const postPendingReviewButton = (
-			await page.$x( "//label[contains(text(), 'Pending review')]" )
-		 )[ 0 ];
-		await postPendingReviewButton.click( 'button' );
+		await page.click( '*[aria-label="Post options"]' );
+		await page.waitForXPath( "//*[text()='Mark as pending']" );
+		const [ postMarkAsPendingButton ] = await page.$x(
+			"//*[text()='Mark as pending']"
+		);
+		await postMarkAsPendingButton.click();
 
 		// Force autosave to occur immediately.
 		await Promise.all( [
@@ -347,7 +349,12 @@ describe( 'Change detection', () => {
 
 		// Trash post.
 		await openDocumentSettingsSidebar();
-		await page.click( '.editor-post-trash.components-button' );
+		await page.click( '*[aria-label="Post options"]' );
+		await page.waitForXPath( "//*[text()='Move to trash']" );
+		const [ postMoveToTrashButton ] = await page.$x(
+			"//*[text()='Move to trash']"
+		);
+		await postMoveToTrashButton.click();
 
 		await Promise.all( [
 			// Wait for "Saved" to confirm save complete.

packages/e2e-tests/specs/editor/various/sidebar.test.js

@@ -127,7 +127,11 @@ describe( 'Sidebar', () => {
 		expect( await findSidebarPanelWithTitle( 'Categories' ) ).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Tags' ) ).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Discussion' ) ).toBeDefined();
-		expect( await findSidebarPanelWithTitle( 'Summary' ) ).toBeDefined();
+		expect(
+			await page.$x(
+				"//*[contains(@class, 'edit-post-sidebar')]//h2[text()='Summary']"
+			)
+		).toHaveLength( 1 );
 
 		await page.evaluate( () => {
 			const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' );
@@ -151,8 +155,10 @@ describe( 'Sidebar', () => {
 		expect(
 			await page.$x( getPanelToggleSelector( 'Discussion' ) )
 		).toEqual( [] );
-		expect( await page.$x( getPanelToggleSelector( 'Summary' ) ) ).toEqual(
-			[]
-		);
+		expect(
+			await page.$x(
+				"//*[contains(@class, 'edit-post-sidebar')]//h2[text()='Summary']"
+			)
+		).toHaveLength( 0 );
 	} );
 } );

packages/edit-post/src/components/sidebar/last-revision/index.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	DropdownMenu,
+	MenuGroup,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { moreVertical } from '@wordpress/icons';
+import {
+	store as editorStore,
+	usePostPendingStatusCheck,
+	usePostLastRevisionCheck,
+	usePostTrashCheck,
+} from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import PostPendingStatus from './post-pending-status';
+import PostLastRevision from './post-last-revision';
+import PostTrash from './post-trash';
+
+export default function PostStatusHeader() {
+	const hasPostPendingStatus = usePostPendingStatusCheck();
+	const hasPostLastRevision = usePostLastRevisionCheck();
+	const hasPostTrash = usePostTrashCheck();
+
+	const postTypeName = useSelect( ( select ) => {
+		const postTypeSlug = select( editorStore ).getCurrentPostType();
+		const postType = select( coreStore ).getPostType( postTypeSlug );
+		return postType?.labels?.singular_name;
+	}, [] );
+
+	return (
+		<HStack className="edit-post-post-status__header">
+			<Heading className="edit-post-post-status__heading" level={ 2 }>
+				{ __( 'Summary' ) }
+			</Heading>
+			{ ( hasPostPendingStatus ||
+				hasPostLastRevision ||
+				hasPostTrash ) && (
+				<DropdownMenu
+					icon={ moreVertical }
+					label={
+						postTypeName
+							? // translators: %s: Post type, e.g. "Post" or "Page".
+							  sprintf( __( '%s options' ), postTypeName )
+							: __( 'Post options' )
+					}
+					toggleProps={ { isSmall: true } }
+				>
+					{ () => (
+						<>
+							{ ( hasPostPendingStatus ||
+								hasPostLastRevision ) && (
+								<MenuGroup>
+									{ hasPostPendingStatus && (
+										<PostPendingStatus />
+									) }
+									{ hasPostLastRevision && (
+										<PostLastRevision />
+									) }
+								</MenuGroup>
+							) }
+							{ hasPostTrash && (
+								<MenuGroup>
+									<PostTrash />
+								</MenuGroup>
+							) }
+						</>
+					) }
+				</DropdownMenu>
+			) }
+		</HStack>
+	);
+}

packages/edit-post/src/components/sidebar/last-revision/style.scss

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { MenuItem } from '@wordpress/components';
+import { addQueryArgs } from '@wordpress/url';
+import { __ } from '@wordpress/i18n';
+
+export default function PostLastRevision() {
+	const { revisionsCount, lastRevisionId } = useSelect(
+		( select ) => ( {
+			revisionsCount:
+				select( editorStore ).getCurrentPostRevisionsCount(),
+			lastRevisionId:
+				select( editorStore ).getCurrentPostLastRevisionId(),
+		} ),
+		[]
+	);
+
+	return (
+		<MenuItem
+			icon={
+				<RevisionsCountBadge>{ revisionsCount }</RevisionsCountBadge>
+			}
+			href={ addQueryArgs( 'revision.php', {
+				revision: lastRevisionId,
+				gutenberg: true,
+			} ) }
+		>
+			{ __( 'Revision history' ) }
+		</MenuItem>
+	);
+}
+
+function RevisionsCountBadge( { className, children } ) {
+	return (
+		<span
+			className={ classnames(
+				className,
+				'edit-post-post-status__revisions-count-badge'
+			) }
+		>
+			{ children }
+		</span>
+	);
+}

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

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { MenuItem } from '@wordpress/components';
+import { check } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+export default function PostPendingStatus() {
+	const status = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'status' ),
+		[]
+	);
+
+	const { editPost } = useDispatch( editorStore );
+
+	return (
+		<MenuItem
+			icon={ status === 'pending' ? check : null }
+			isSelected={ status === 'pending' }
+			role="menuitemcheckbox"
+			onClick={ () => {
+				editPost( {
+					status: status === 'pending' ? 'draft' : 'pending',
+				} );
+			} }
+		>
+			{ __( 'Mark as pending' ) }
+		</MenuItem>
+	);
+}

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

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { MenuItem } from '@wordpress/components';
+import { trash } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+export default function PostTrash() {
+	const { trashPost } = useDispatch( editorStore );
+	return (
+		<MenuItem
+			className="edit-post-post-status__post-trash"
+			icon={ trash }
+			isDestructive
+			onClick={ () => trashPost() }
+		>
+			{ __( 'Move to trash' ) }
+		</MenuItem>
+	);
+}