Add Featured Image, Title and Excerpt to top of the settings sidebar

- Moves the Featured Image panel to the top of the sidebar.
    - Uses a new dropdown-based flow for selecting a featured image.
    - Adds the ability to upload a featured image using the native file picker.
- Adds a new Summary component to top of the sidebar containing fields
  for modifying the post's title and excerpt.
- Removes the Excerpt panel in favour of excerpt field in Summary
  component.

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

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -13,13 +18,20 @@ import { closeSmall } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 export default function InspectorPopoverHeader( {
+	className,
 	title,
 	help,
 	actions = [],
 	onClose,
 } ) {
 	return (
-		<VStack className="block-editor-inspector-popover-header" spacing={ 4 }>
+		<VStack
+			className={ classnames(
+				'block-editor-inspector-popover-header',
+				className
+			) }
+			spacing={ 4 }
+		>
 			<HStack alignment="center">
 				<Heading
 					className="block-editor-inspector-popover-header__heading"

packages/components/src/menu-item/style.scss

@@ -48,6 +48,11 @@
 			opacity: 0.3;
 		}
 	}
+
+	// Don't show red outline on destructive menu items.
+	&.is-destructive {
+		box-shadow: none;
+	}
 }
 
 .components-menu-item__info-wrapper {

packages/edit-post/package.json

@@ -40,6 +40,7 @@
 		"@wordpress/editor": "file:../editor",
 		"@wordpress/element": "file:../element",
 		"@wordpress/hooks": "file:../hooks",
+		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/interface": "file:../interface",

packages/edit-post/src/components/preferences-modal/index.js

@@ -13,9 +13,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import {
 	PostTaxonomies,
-	PostExcerptCheck,
 	PageAttributesCheck,
-	PostFeaturedImageCheck,
 	PostTypeSupportCheck,
 	store as editorStore,
 } from '@wordpress/editor';
@@ -205,18 +203,6 @@ export default function EditPostPreferencesModal() {
 									/>
 								) }
 							/>
-							<PostFeaturedImageCheck>
-								<EnablePanelOption
-									label={ __( 'Featured image' ) }
-									panelName="featured-image"
-								/>
-							</PostFeaturedImageCheck>
-							<PostExcerptCheck>
-								<EnablePanelOption
-									label={ __( 'Excerpt' ) }
-									panelName="post-excerpt"
-								/>
-							</PostExcerptCheck>
 							<PostTypeSupportCheck
 								supportKeys={ [ 'comments', 'trackbacks' ] }
 							>

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

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PostFeaturedImageCheck,
+	PostFeaturedImage as PostFeaturedImageForm,
+} from '@wordpress/editor';
+import { MediaUploadCheck } from '@wordpress/block-editor';
+
+export default function PostFeaturedImage() {
+	return (
+		<PostFeaturedImageCheck>
+			<MediaUploadCheck>
+				<PostFeaturedImageForm className="edit-post-post-featured-image" />
+			</MediaUploadCheck>
+		</PostFeaturedImageCheck>
+	);
+}

packages/edit-post/src/components/sidebar/post-featured-image/style.scss

@@ -0,0 +1,11 @@
+.edit-post-post-featured-image {
+	.editor-post-featured-image__container {
+		margin-left: -$grid-unit-20;
+		margin-right: -$grid-unit-20;
+	}
+
+	.editor-post-featured-image__toggle {
+		border-bottom: $border-width solid $gray-200;
+		border-top: $border-width solid $gray-200;
+	}
+}

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

@@ -8,6 +8,8 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import PostStatusHeader from './header';
+import PostFeaturedImage from '../post-featured-image';
+import PostSummary from '../post-summary';
 import PostVisibility from '../post-visibility';
 import PostSchedule from '../post-schedule';
 import PostAuthor from '../post-author';
@@ -43,6 +45,8 @@ export default function PostStatus() {
 				{ ( fills ) => (
 					<>
 						<PostStatusHeader />
+						<PostFeaturedImage />
+						<PostSummary />
 						<PostVisibility />
 						<PostSchedule />
 						<PostURL />

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

@@ -1,4 +1,7 @@
 .edit-post-post-status__header {
+	margin: (-$grid-unit-20) (-$grid-unit-20) 0 (-$grid-unit-20);
+	padding: $grid-unit-20;
+
 	.components-dropdown-menu {
 		line-height: 0;
 		margin: -$grid-unit-05 0;
@@ -8,6 +11,14 @@
 		min-width: $grid-unit-30;
 		padding: 0;
 	}
+
+	& + .components-panel__row {
+		margin-top: 5px;
+	}
+}
+
+[class].edit-post-post-status__header {
+	box-sizing: content-box;
 }
 
 [class].edit-post-post-status__heading {
@@ -25,7 +36,3 @@
 	min-height: $icon-size;
 	min-width: $icon-size;
 }
-
-[class].edit-post-post-status__post-trash {
-	box-shadow: none;
-}

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

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { PlainText } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function PostSummaryExcerpt() {
+	const excerpt = useSelect(
+		( select ) => select( editorStore ).getEditedPostAttribute( 'excerpt' ),
+		[]
+	);
+
+	const { editPost } = useDispatch( editorStore );
+
+	return (
+		<PlainText
+			__experimentalVersion={ 2 }
+			className="edit-post-post-summary__excerpt"
+			placeholder={ __( 'Add excerpt' ) }
+			value={ excerpt }
+			onChange={ ( value ) => editPost( { excerpt: value } ) }
+		/>
+	);
+}

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { PostTypeSupportCheck, PostExcerptCheck } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import PostSummaryTitle from './title';
+import PostSummaryExcerpt from './excerpt';
+
+export default function PostSummary() {
+	return (
+		<div className="edit-post-post-summary">
+			<PostTypeSupportCheck supportKeys="title">
+				<PostSummaryTitle />
+			</PostTypeSupportCheck>
+			<PostExcerptCheck>
+				<PostSummaryExcerpt />
+			</PostExcerptCheck>
+		</div>
+	);
+}

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

@@ -0,0 +1,21 @@
+.edit-post-post-summary {
+	border-bottom: $border-width solid $gray-200;
+	border-top: $border-width solid $gray-200;
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+	padding: $grid-unit-10 $grid-unit-20 $grid-unit-20;
+
+	.edit-post-post-featured-image + & {
+		margin-top: -1px;
+	}
+}
+
+.edit-post-post-summary__title,
+.edit-post-post-summary__excerpt {
+	margin-top: $grid-unit-10;
+}
+
+.edit-post-post-summary__title {
+	font-size: 16px;
+	font-weight: 600;
+}