[Document Settings]: Add summary panel version 1 (#39973)

* [Document Settings]: Add summary panel version 1 * Polish featured image. * Tweak excerpt. * Fix focus styles for edit and trash. * Fix focus styles. * Improve thumbnail resolution and appearance. * update FeaturedImage in inspector controls + remove the previous panel. The preference for displaying the previous panel is still respected and will show/hide the featured image from `post summary` now. * add a `minimal` version of PostSummary editor component and remove the `excerpt panel` from inspector controls * remove obsolete export * fix postExcerpt callback * remove obsolete styles import * remove PostAuthor from status panel * make post title a `span` * Polish heading. * fix tests and add a new one * Spacing and focus styles. * add post-type support checks for title and author Co-authored-by: jasmussen <[email protected]>
WordPress · Apr 6, 2022 · ae657f3 · ae657f3
1 parent 6f204e3
commit ae657f3
Show file tree

Hide file tree

Showing 17 changed files with 385 additions and 243 deletions.
diff --git a/packages/e2e-tests/specs/editor/plugins/meta-boxes.test.js b/packages/e2e-tests/specs/editor/plugins/meta-boxes.test.js
@@ -103,19 +103,16 @@ describe( 'Meta boxes', () => {
 
 		// Open the excerpt panel.
 		await openDocumentSettingsSidebar();
-		const excerptButton = await findSidebarPanelToggleButtonWithTitle(
-			'Excerpt'
+		const summaryButton = await findSidebarPanelToggleButtonWithTitle(
+			'Summary'
 		);
-		if ( excerptButton ) {
-			await excerptButton.click( 'button' );
+		if ( summaryButton ) {
+			await summaryButton.click( 'button' );
 		}
 
-		await page.waitForSelector( '.editor-post-excerpt textarea' );
+		await page.waitForSelector( '.editor-post-excerpt p' );
 
-		await page.type(
-			'.editor-post-excerpt textarea',
-			'Explicitly set excerpt.'
-		);
+		await page.type( '.editor-post-excerpt p', 'Explicitly set excerpt.' );
 
 		await publishPost();
 

diff --git a/packages/e2e-tests/specs/editor/various/new-post-default-content.test.js b/packages/e2e-tests/specs/editor/various/new-post-default-content.test.js
@@ -33,14 +33,14 @@ describe( 'new editor filtered state', () => {
 
 		// open the sidebar, we want to see the excerpt.
 		await openDocumentSettingsSidebar();
-		const excerptButton = await findSidebarPanelToggleButtonWithTitle(
-			'Excerpt'
+		const summaryButton = await findSidebarPanelToggleButtonWithTitle(
+			'Summary'
 		);
-		if ( excerptButton ) {
-			await excerptButton.click( 'button' );
+		if ( summaryButton ) {
+			await summaryButton.click( 'button' );
 		}
 		const excerpt = await page.$eval(
-			'.editor-post-excerpt textarea',
+			'.editor-post-excerpt p',
 			( element ) => element.innerHTML
 		);
 

diff --git a/packages/e2e-tests/specs/editor/various/sidebar.test.js b/packages/e2e-tests/specs/editor/various/sidebar.test.js
@@ -16,6 +16,19 @@ const SIDEBAR_SELECTOR = '.edit-post-sidebar';
 const ACTIVE_SIDEBAR_TAB_SELECTOR = '.edit-post-sidebar__panel-tab.is-active';
 const ACTIVE_SIDEBAR_BUTTON_TEXT = 'Post';
 
+const openSidebarPanelWithTitle = async ( title ) => {
+	const panel = await page.waitForXPath(
+		`//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ title }")]`
+	);
+	const expanded = await page.evaluate(
+		( element ) => element.getAttribute( 'aria-expanded' ),
+		panel
+	);
+	if ( expanded === 'false' ) {
+		return panel.click();
+	}
+};
+
 describe( 'Sidebar', () => {
 	afterEach( () => {
 		disableFocusLossObservation();
@@ -123,25 +136,23 @@ describe( 'Sidebar', () => {
 		await createNewPost();
 		await enableFocusLossObservation();
 		await openDocumentSettingsSidebar();
-
-		expect( await findSidebarPanelWithTitle( 'Categories' ) ).toBeDefined();
-		expect( await findSidebarPanelWithTitle( 'Tags' ) ).toBeDefined();
-		expect(
-			await findSidebarPanelWithTitle( 'Featured image' )
-		).toBeDefined();
-		expect( await findSidebarPanelWithTitle( 'Excerpt' ) ).toBeDefined();
-		expect( await findSidebarPanelWithTitle( 'Discussion' ) ).toBeDefined();
-		expect(
-			await findSidebarPanelWithTitle( 'Status & visibility' )
-		).toBeDefined();
+		const panelNames = [
+			'Summary',
+			'Categories',
+			'Tags',
+			'Discussion',
+			'Status & visibility',
+		];
+		const panels = await Promise.all(
+			panelNames.map( findSidebarPanelWithTitle )
+		);
+		panels.forEach( ( panel ) => expect( panel ).toBeDefined() );
 
 		await page.evaluate( () => {
 			const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' );
 
 			removeEditorPanel( 'taxonomy-panel-category' );
 			removeEditorPanel( 'taxonomy-panel-post_tag' );
-			removeEditorPanel( 'featured-image' );
-			removeEditorPanel( 'post-excerpt' );
 			removeEditorPanel( 'discussion-panel' );
 			removeEditorPanel( 'post-status' );
 		} );
@@ -156,17 +167,36 @@ describe( 'Sidebar', () => {
 		expect( await page.$x( getPanelToggleSelector( 'Tags' ) ) ).toEqual(
 			[]
 		);
-		expect(
-			await page.$x( getPanelToggleSelector( 'Featured image' ) )
-		).toEqual( [] );
-		expect( await page.$x( getPanelToggleSelector( 'Excerpt' ) ) ).toEqual(
-			[]
-		);
 		expect(
 			await page.$x( getPanelToggleSelector( 'Discussion' ) )
 		).toEqual( [] );
 		expect(
 			await page.$x( getPanelToggleSelector( 'Status & visibility' ) )
 		).toEqual( [] );
 	} );
+	describe( 'Summary panel', () => {
+		beforeEach( async () => {
+			await createNewPost();
+			await enableFocusLossObservation();
+			await openDocumentSettingsSidebar();
+		} );
+		it( 'should show all elements', async () => {
+			await openSidebarPanelWithTitle( 'Summary' );
+			const getSelector = ( cssClass ) =>
+				`//div[contains(@class, "edit-post-sidebar")]//div[contains(@class, "edit-post-post-summary")]//*[contains(@class, "${ cssClass }")]`;
+			const panelElements = await Promise.all(
+				[
+					'editor-post-featured-image',
+					'edit-post-post-title',
+					'editor-post-excerpt',
+					'post-author-selector',
+				].map( ( target ) =>
+					page.waitForXPath( getSelector( target ) )
+				)
+			);
+			panelElements.forEach( ( element ) =>
+				expect( element ).toBeDefined()
+			);
+		} );
+	} );
 } );
diff --git a/packages/edit-post/src/components/sidebar/featured-image/index.js b/packages/edit-post/src/components/sidebar/featured-image/index.js
@@ -1,21 +1,8 @@
-/**
- * External dependencies
- */
-import { get, partial } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
-import {
-	PostFeaturedImage,
-	PostFeaturedImageCheck,
-	store as editorStore,
-} from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { PostFeaturedImage, PostFeaturedImageCheck } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -27,48 +14,18 @@ import { store as editPostStore } from '../../../store';
  */
 const PANEL_NAME = 'featured-image';
 
-function FeaturedImage( { isEnabled, isOpened, postType, onTogglePanel } ) {
+export default function FeaturedImage() {
+	const isEnabled = useSelect(
+		( select ) =>
+			select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
+		[]
+	);
 	if ( ! isEnabled ) {
 		return null;
 	}
-
 	return (
 		<PostFeaturedImageCheck>
-			<PanelBody
-				title={ get(
-					postType,
-					[ 'labels', 'featured_image' ],
-					__( 'Featured image' )
-				) }
-				opened={ isOpened }
-				onToggle={ onTogglePanel }
-			>
-				<PostFeaturedImage />
-			</PanelBody>
+			<PostFeaturedImage />
 		</PostFeaturedImageCheck>
 	);
 }
-
-const applyWithSelect = withSelect( ( select ) => {
-	const { getEditedPostAttribute } = select( editorStore );
-	const { getPostType } = select( coreStore );
-	const { isEditorPanelEnabled, isEditorPanelOpened } = select(
-		editPostStore
-	);
-
-	return {
-		postType: getPostType( getEditedPostAttribute( 'type' ) ),
-		isEnabled: isEditorPanelEnabled( PANEL_NAME ),
-		isOpened: isEditorPanelOpened( PANEL_NAME ),
-	};
-} );
-
-const applyWithDispatch = withDispatch( ( dispatch ) => {
-	const { toggleEditorPanelOpened } = dispatch( editPostStore );
-
-	return {
-		onTogglePanel: partial( toggleEditorPanelOpened, PANEL_NAME ),
-	};
-} );
-
-export default compose( applyWithSelect, applyWithDispatch )( FeaturedImage );
diff --git a/packages/edit-post/src/components/sidebar/post-excerpt/index.js b/packages/edit-post/src/components/sidebar/post-excerpt/index.js
@@ -1,14 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
 import {
 	PostExcerpt as PostExcerptForm,
 	PostExcerptCheck,
 } from '@wordpress/editor';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -20,38 +17,18 @@ import { store as editPostStore } from '../../../store';
  */
 const PANEL_NAME = 'post-excerpt';
 
-function PostExcerpt( { isEnabled, isOpened, onTogglePanel } ) {
+export default function PostExcerpt( { isMinimal } ) {
+	const isEnabled = useSelect(
+		( select ) =>
+			select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
+		[]
+	);
 	if ( ! isEnabled ) {
 		return null;
 	}
-
 	return (
 		<PostExcerptCheck>
-			<PanelBody
-				title={ __( 'Excerpt' ) }
-				opened={ isOpened }
-				onToggle={ onTogglePanel }
-			>
-				<PostExcerptForm />
-			</PanelBody>
+			<PostExcerptForm isMinimal={ isMinimal } />
 		</PostExcerptCheck>
 	);
 }
-
-export default compose( [
-	withSelect( ( select ) => {
-		return {
-			isEnabled: select( editPostStore ).isEditorPanelEnabled(
-				PANEL_NAME
-			),
-			isOpened: select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
-		};
-	} ),
-	withDispatch( ( dispatch ) => ( {
-		onTogglePanel() {
-			return dispatch( editPostStore ).toggleEditorPanelOpened(
-				PANEL_NAME
-			);
-		},
-	} ) ),
-] )( PostExcerpt );
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -13,7 +13,6 @@ import PostVisibility from '../post-visibility';
 import PostTrash from '../post-trash';
 import PostSchedule from '../post-schedule';
 import PostSticky from '../post-sticky';
-import PostAuthor from '../post-author';
 import PostSlug from '../post-slug';
 import PostFormat from '../post-format';
 import PostPendingStatus from '../post-pending-status';
@@ -42,7 +41,6 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 						<PostSticky />
 						<PostPendingStatus />
 						<PostSlug />
-						<PostAuthor />
 						{ fills }
 						<PostTrash />
 					</>

diff --git a/packages/edit-post/src/components/sidebar/post-summary/index.js b/packages/edit-post/src/components/sidebar/post-summary/index.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody, PanelRow } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { PostAuthor, PostTypeSupportCheck } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import PostTitle from '../post-title';
+import FeaturedImage from '../featured-image';
+import PostExcerpt from '../post-excerpt';
+import { store as editPostStore } from '../../../store';
+
+/**
+ * Module Constants
+ */
+const PANEL_NAME = 'post-summary';
+
+function PostSummary() {
+	const isOpened = useSelect(
+		( select ) => select( editPostStore ).isEditorPanelOpened( PANEL_NAME ),
+		[]
+	);
+	const { toggleEditorPanelOpened } = useDispatch( editPostStore );
+	return (
+		<PanelBody
+			className="edit-post-post-summary"
+			title={ __( 'Summary' ) }
+			opened={ isOpened }
+			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+		>
+			<FeaturedImage />
+			<PostTypeSupportCheck supportKeys="title">
+				<PanelRow>
+					<PostTitle />
+				</PanelRow>
+			</PostTypeSupportCheck>
+			<PostExcerpt isMinimal />
+			<PostTypeSupportCheck supportKeys="author">
+				<PanelRow>
+					<PostAuthor labelPosition="side" />
+				</PanelRow>
+			</PostTypeSupportCheck>
+		</PanelBody>
+	);
+}
+
+export default PostSummary;
diff --git a/packages/edit-post/src/components/sidebar/post-title/index.js b/packages/edit-post/src/components/sidebar/post-title/index.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { PlainText } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+function PostTitle() {
+	const { editPost } = useDispatch( editorStore );
+	const postTitle = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'title' ),
+		[]
+	);
+	return (
+		<PlainText
+			className="edit-post-post-title"
+			tagName="span"
+			placeholder={ __( 'Add title' ) }
+			value={ postTitle }
+			onChange={ ( title ) => editPost( { title } ) }
+			__experimentalVersion={ 2 }
+		/>
+	);
+}
+
+export default PostTitle;