Editor: Update post excerpt panel with new designs

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

@@ -28,24 +28,39 @@ import PostSlug from '../post-slug';
 import PostFormat from '../post-format';
 import { unlock } from '../../../lock-unlock';
 
-const { PostStatus: PostStatusPanel } = unlock( editorPrivateApis );
+const { PostStatus: PostStatusPanel, PrivatePostExcerptPanel } =
+	unlock( editorPrivateApis );
 
 /**
  * Module Constants
  */
 const PANEL_NAME = 'post-status';
 
 export default function PostStatus() {
-	const { isOpened, isRemoved } = useSelect( ( 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( editorStore );
-		return {
-			isRemoved: isEditorPanelRemoved( PANEL_NAME ),
-			isOpened: isEditorPanelOpened( PANEL_NAME ),
-		};
-	}, [] );
+	const { isOpened, isRemoved, showPostExcerptPanel } = useSelect(
+		( 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,
+				getCurrentPostType,
+			} = select( editorStore );
+			const postType = getCurrentPostType();
+			return {
+				isRemoved: isEditorPanelRemoved( PANEL_NAME ),
+				isOpened: isEditorPanelOpened( PANEL_NAME ),
+				// Post excerpt panel is rendered in different place depending on the post type.
+				// So we cannot make this check inside the PostExcerpt component based on the current edited entity.
+				showPostExcerptPanel: ! [
+					'wp_template',
+					'wp_template_part',
+					'wp_block',
+				].includes( postType ),
+			};
+		},
+		[]
+	);
 	const { toggleEditorPanelOpened } = useDispatch( editorStore );
 
 	if ( isRemoved ) {
@@ -64,6 +79,7 @@ export default function PostStatus() {
 					<>
 						<PostStatusPanel />
 						<PostFeaturedImagePanel withPanelBody={ false } />
+						{ showPostExcerptPanel && <PrivatePostExcerptPanel /> }
 						<PostSchedulePanel />
 						<PostTemplatePanel />
 						<PostURLPanel />

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

@@ -22,7 +22,6 @@ import {
 	PluginDocumentSettingPanel,
 	PluginSidebar,
 	PostDiscussionPanel,
-	PostExcerptPanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	privateApis as editorPrivateApis,
@@ -132,7 +131,6 @@ const SidebarContent = ( { tabName, keyboardShortcut, isEditingTemplate } ) => {
 							<PluginDocumentSettingPanel.Slot />
 							<PostLastRevisionPanel />
 							<PostTaxonomiesPanel />
-							<PostExcerptPanel />
 							<PostDiscussionPanel />
 							<PageAttributesPanel />
 							<PatternOverridesPanel />

packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js

@@ -9,7 +9,6 @@ import {
 	PageAttributesPanel,
 	PluginDocumentSettingPanel,
 	PostDiscussionPanel,
-	PostExcerptPanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	store as editorStore,
@@ -97,7 +96,6 @@ export default function PagePanels() {
 			) }
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
-			<PostExcerptPanel />
 			<PostDiscussionPanel />
 			<PageAttributesPanel />
 		</>

packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-summary.js

@@ -9,12 +9,16 @@ import {
 	PostSchedulePanel,
 	PostTemplatePanel,
 	PostFeaturedImagePanel,
+	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import PageStatus from './page-status';
+import { unlock } from '../../../lock-unlock';
+
+const { PrivatePostExcerptPanel } = unlock( editorPrivateApis );
 
 export default function PageSummary( {
 	status,
@@ -29,6 +33,7 @@ export default function PageSummary( {
 				{ ( fills ) => (
 					<>
 						<PostFeaturedImagePanel withPanelBody={ false } />
+						<PrivatePostExcerptPanel />
 						<PageStatus
 							status={ status }
 							date={ date }

packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js

@@ -6,7 +6,6 @@ import { PanelBody, PanelRow } from '@wordpress/components';
 import {
 	PageAttributesPanel,
 	PostDiscussionPanel,
-	PostExcerptPanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	privateApis as editorPrivateApis,
@@ -135,7 +134,6 @@ export default function TemplatePanel() {
 			) }
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
-			<PostExcerptPanel />
 			<PostDiscussionPanel />
 			<PageAttributesPanel />
 			<PatternOverridesPanel />

packages/edit-site/src/components/template-actions/index.js

@@ -9,11 +9,16 @@ import {
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
+	Modal,
 	__experimentalConfirmDialog as ConfirmDialog,
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
+import {
+	PostExcerpt,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -23,6 +28,9 @@ import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
 import RenamePostMenuItem from '../rename-post-menu-item';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import { unlock } from '../../lock-unlock';
+
+const { PluginPostExcerpt } = unlock( editorPrivateApis );
 
 export default function TemplateActions( {
 	postType,
@@ -40,10 +48,6 @@ export default function TemplateActions( {
 	const isRemovable = isTemplateRemovable( template );
 	const isRevertable = isTemplateRevertable( template );
 
-	if ( ! isRemovable && ! isRevertable ) {
-		return null;
-	}
-
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
@@ -69,6 +73,7 @@ export default function TemplateActions( {
 							/>
 						</>
 					) }
+					<EditDescriptionMenuItem />
 					{ isRevertable && (
 						<ResetMenuItem
 							template={ template }
@@ -163,3 +168,32 @@ function DeleteMenuItem( { onRemove, title } ) {
 		</>
 	);
 }
+
+function EditDescriptionMenuItem() {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	return (
+		<>
+			<MenuItem onClick={ () => setIsModalOpen( true ) }>
+				{ __( 'Edit description' ) }
+			</MenuItem>
+			{ isModalOpen && (
+				<Modal
+					title={ __( 'Edit description' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="editor-action-modal"
+				>
+					<PluginPostExcerpt.Slot>
+						{ ( fills ) => (
+							<>
+								<PostExcerpt hideLabelFromVision />
+								{ fills }
+							</>
+						) }
+					</PluginPostExcerpt.Slot>
+				</Modal>
+			) }
+		</>
+	);
+}

packages/editor/src/components/post-actions/actions.js

@@ -25,6 +25,7 @@ import { TEMPLATE_ORIGINS, TEMPLATE_POST_TYPE } from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import isTemplateRevertable from '../../store/utils/is-template-revertable';
+import { useEditExcerptAction } from './private-actions';
 
 function getItemTitle( item ) {
 	if ( typeof item.title === 'string' ) {
@@ -771,6 +772,7 @@ const renameTemplateAction = {
 export function usePostActions( onActionPerformed, actionIds = null ) {
 	const permanentlyDeletePostAction = usePermanentlyDeletePostAction();
 	const restorePostAction = useRestorePostAction();
+	const editPostExcerptAction = useEditExcerptAction();
 	return useMemo(
 		() => {
 			// By default, return all actions...
@@ -784,6 +786,7 @@ export function usePostActions( onActionPerformed, actionIds = null ) {
 				postRevisionsAction,
 				renamePostAction,
 				renameTemplateAction,
+				editPostExcerptAction,
 				trashPostAction,
 			];
 
@@ -856,6 +859,7 @@ export function usePostActions( onActionPerformed, actionIds = null ) {
 			...( actionIds || [] ),
 			permanentlyDeletePostAction,
 			restorePostAction,
+			editPostExcerptAction,
 			onActionPerformed,
 		]
 	);

packages/editor/src/components/post-actions/index.js

@@ -35,6 +35,7 @@ const POST_ACTIONS_WHILE_EDITING = [
 	'view-post',
 	'view-post-revisions',
 	'rename-post',
+	'edit-post-excerpt',
 	'move-to-trash',
 ];
 

packages/editor/src/components/post-actions/private-actions.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PostExcerpt from '../post-excerpt';
+import PluginPostExcerpt from '../post-excerpt/plugin';
+import { store as editorStore } from '../../store';
+
+export function useEditExcerptAction() {
+	const { canEditExcerpt, shouldUseDescriptionLabel } = useSelect(
+		( select ) => {
+			const { getCurrentPostType, isEditorPanelEnabled } =
+				select( editorStore );
+			const { getPostType } = select( coreStore );
+			const postType = getPostType( getCurrentPostType() );
+			// TODO: When we are rendering the excerpt/description for templates,
+			// template parts and patterns do not abide by the `isEnabled` panel flag.
+			// It's not implemented here right now because the actions are to be consolidated
+			// and this is rendered only for the rest post types.
+			return {
+				canEditExcerpt:
+					isEditorPanelEnabled( 'post-excerpt' ) &&
+					postType?.supports?.excerpt,
+				shouldUseDescriptionLabel: [
+					'wp_template',
+					'wp_template_part',
+					'wp_block',
+				].includes( postType ),
+			};
+		},
+		[]
+	);
+	const label = shouldUseDescriptionLabel
+		? __( 'Edit description' )
+		: __( 'Edit excerpt' );
+	return useMemo(
+		() => ( {
+			id: 'edit-post-excerpt',
+			label,
+			isEligible() {
+				return canEditExcerpt;
+			},
+			RenderModal: () => {
+				return (
+					<PluginPostExcerpt.Slot>
+						{ ( fills ) => (
+							<>
+								<PostExcerpt hideLabelFromVision />
+								{ fills }
+							</>
+						) }
+					</PluginPostExcerpt.Slot>
+				);
+			},
+		} ),
+		[ canEditExcerpt, label ]
+	);
+}