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.
WordPress · noisysocks · Jul 13, 2022 · Jul 13, 2022 · Jul 13, 2022 · Jul 13, 2022
commit 4dbafb2e9794aaae3d159242e45eb66358e1eff2
diff --git a/package-lock.json b/package-lock.json
@@ -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"

@@ -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 {

diff --git a/packages/edit-post/package.json b/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",

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/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' ] }
 							>

diff --git a/packages/edit-post/src/components/sidebar/featured-image/index.js b/packages/edit-post/src/components/sidebar/featured-image/index.js
diff --git a/packages/edit-post/src/components/sidebar/post-excerpt/index.js b/packages/edit-post/src/components/sidebar/post-excerpt/index.js
diff --git a/packages/edit-post/src/components/sidebar/post-featured-image/index.js b/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>
+	);
+}
diff --git a/packages/edit-post/src/components/sidebar/post-featured-image/style.scss b/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;
+	}
+}
diff --git a/packages/edit-post/src/components/sidebar/post-status/index.js b/packages/edit-post/src/components/sidebar/post-status/index.js
@@ -9,6 +9,8 @@ import { compose, ifCondition } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import PostFeaturedImage from '../post-featured-image';
+import PostSummary from '../post-summary';
 import PostVisibility from '../post-visibility';
 import PostTrash from '../post-trash';
 import PostSchedule from '../post-schedule';
@@ -38,6 +40,8 @@ function PostStatus( { isOpened, onTogglePanel } ) {
 			<PluginPostStatusInfo.Slot>
 				{ ( fills ) => (
 					<>
+						<PostFeaturedImage />
+						<PostSummary />
 						<PostVisibility />
 						<PostSchedule />
 						<PostURL />

diff --git a/packages/edit-post/src/components/sidebar/post-status/style.scss b/packages/edit-post/src/components/sidebar/post-status/style.scss
@@ -1,5 +1,5 @@
-.edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {
-	margin-top: 15px;
-	width: 100%;
-	text-align: center;
+.edit-post-post-status {
+	[class].components-panel__body-title {
+		margin-bottom: 0;
+	}
 }
diff --git a/packages/edit-post/src/components/sidebar/post-summary/excerpt.js b/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 } ) }
+		/>
+	);
+}
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,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>
+	);
+}
diff --git a/packages/edit-post/src/components/sidebar/post-summary/style.scss b/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;
+}