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

This reverts commit ae657f3.

packages/e2e-tests/specs/editor/plugins/meta-boxes.test.js

@@ -103,16 +103,19 @@ describe( 'Meta boxes', () => {
 
 		// Open the excerpt panel.
 		await openDocumentSettingsSidebar();
-		const summaryButton = await findSidebarPanelToggleButtonWithTitle(
-			'Summary'
+		const excerptButton = await findSidebarPanelToggleButtonWithTitle(
+			'Excerpt'
 		);
-		if ( summaryButton ) {
-			await summaryButton.click( 'button' );
+		if ( excerptButton ) {
+			await excerptButton.click( 'button' );
 		}
 
-		await page.waitForSelector( '.editor-post-excerpt p' );
+		await page.waitForSelector( '.editor-post-excerpt textarea' );
 
-		await page.type( '.editor-post-excerpt p', 'Explicitly set excerpt.' );
+		await page.type(
+			'.editor-post-excerpt textarea',
+			'Explicitly set excerpt.'
+		);
 
 		await publishPost();
 

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 summaryButton = await findSidebarPanelToggleButtonWithTitle(
-			'Summary'
+		const excerptButton = await findSidebarPanelToggleButtonWithTitle(
+			'Excerpt'
 		);
-		if ( summaryButton ) {
-			await summaryButton.click( 'button' );
+		if ( excerptButton ) {
+			await excerptButton.click( 'button' );
 		}
 		const excerpt = await page.$eval(
-			'.editor-post-excerpt p',
+			'.editor-post-excerpt textarea',
 			( element ) => element.innerHTML
 		);
 

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

@@ -16,19 +16,6 @@ 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();
@@ -136,23 +123,25 @@ describe( 'Sidebar', () => {
 		await createNewPost();
 		await enableFocusLossObservation();
 		await openDocumentSettingsSidebar();
-		const panelNames = [
-			'Summary',
-			'Categories',
-			'Tags',
-			'Discussion',
-			'Status & visibility',
-		];
-		const panels = await Promise.all(
-			panelNames.map( findSidebarPanelWithTitle )
-		);
-		panels.forEach( ( panel ) => expect( panel ).toBeDefined() );
+
+		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();
 
 		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' );
 		} );
@@ -167,36 +156,17 @@ 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()
-			);
-		} );
-	} );
 } );

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

@@ -1,8 +1,21 @@
+/**
+ * External dependencies
+ */
+import { get, partial } from 'lodash';
+
 /**
  * WordPress dependencies
  */
-import { PostFeaturedImage, PostFeaturedImageCheck } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
+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';
 
 /**
  * Internal dependencies
@@ -14,18 +27,48 @@ import { store as editPostStore } from '../../../store';
  */
 const PANEL_NAME = 'featured-image';
 
-export default function FeaturedImage() {
-	const isEnabled = useSelect(
-		( select ) =>
-			select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
-		[]
-	);
+function FeaturedImage( { isEnabled, isOpened, postType, onTogglePanel } ) {
 	if ( ! isEnabled ) {
 		return null;
 	}
+
 	return (
 		<PostFeaturedImageCheck>
-			<PostFeaturedImage />
+			<PanelBody
+				title={ get(
+					postType,
+					[ 'labels', 'featured_image' ],
+					__( 'Featured image' )
+				) }
+				opened={ isOpened }
+				onToggle={ onTogglePanel }
+			>
+				<PostFeaturedImage />
+			</PanelBody>
 		</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 );

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

@@ -1,11 +1,14 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
+import { PanelBody } from '@wordpress/components';
 import {
 	PostExcerpt as PostExcerptForm,
 	PostExcerptCheck,
 } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -17,18 +20,38 @@ import { store as editPostStore } from '../../../store';
  */
 const PANEL_NAME = 'post-excerpt';
 
-export default function PostExcerpt( { isMinimal } ) {
-	const isEnabled = useSelect(
-		( select ) =>
-			select( editPostStore ).isEditorPanelEnabled( PANEL_NAME ),
-		[]
-	);
+function PostExcerpt( { isEnabled, isOpened, onTogglePanel } ) {
 	if ( ! isEnabled ) {
 		return null;
 	}
+
 	return (
 		<PostExcerptCheck>
-			<PostExcerptForm isMinimal={ isMinimal } />
+			<PanelBody
+				title={ __( 'Excerpt' ) }
+				opened={ isOpened }
+				onToggle={ onTogglePanel }
+			>
+				<PostExcerptForm />
+			</PanelBody>
 		</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 );

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

@@ -13,6 +13,7 @@ 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';
@@ -41,6 +42,7 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 						<PostSticky />
 						<PostPendingStatus />
 						<PostSlug />
+						<PostAuthor />
 						{ fills }
 						<PostTrash />
 					</>