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.
WordPress · ntsekouras · Apr 6, 2022 · Apr 1, 2022 · Apr 1, 2022 · Apr 1, 2022
commit 2302eb67ff09a832d9f54c29d53bf39f2e20da03
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-summary/index.js b/packages/edit-post/src/components/sidebar/post-summary/index.js
@@ -5,8 +5,6 @@ import { __ } from '@wordpress/i18n';
 import { PanelBody, PanelRow } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	PostFeaturedImageCheck,
-	PostFeaturedImage2 as PostFeaturedImage,
 	PostExcerptCheck,
 	PostExcerpt2 as PostExcerpt,
 	PostAuthor,
@@ -16,6 +14,7 @@ import {
  * Internal dependencies
  */
 import PostTitle from '../post-title';
+import FeaturedImage from '../featured-image';
 import { store as editPostStore } from '../../../store';
 
 /**
@@ -49,9 +48,7 @@ function PostSummary() {
 			opened={ isOpened }
 			onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
 		>
-			<PostFeaturedImageCheck>
-				<PostFeaturedImage />
-			</PostFeaturedImageCheck>
+			<FeaturedImage />
 			<PanelRow>
 				<PostTitle />
 			</PanelRow>

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -18,7 +18,6 @@ import PostSummary from '../post-summary';
 import PostStatus from '../post-status';
 import LastRevision from '../last-revision';
 import PostTaxonomies from '../post-taxonomies';
-import FeaturedImage from '../featured-image';
 import PostExcerpt from '../post-excerpt';
 import PostLink from '../post-link';
 import DiscussionPanel from '../discussion-panel';
@@ -93,7 +92,6 @@ const SettingsSidebar = () => {
 					<LastRevision />
 					<PostLink />
 					<PostTaxonomies />
-					<FeaturedImage />
 					<PostExcerpt />
 					<DiscussionPanel />
 					<PageAttributes />

diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
@@ -23,11 +23,10 @@ export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';
 export { default as PostComments } from './post-comments';
 export { default as PostExcerpt } from './post-excerpt';
+// TODO: of course rename :) and check possible deprecations..
 export { default as PostExcerpt2 } from './post-excerpt2';
 export { default as PostExcerptCheck } from './post-excerpt/check';
 export { default as PostFeaturedImage } from './post-featured-image';
-// TODO: of course rename :) and check possible deprecations..
-export { default as PostFeaturedImage2 } from './post-featured-image2';
 export { default as PostFeaturedImageCheck } from './post-featured-image/check';
 export { default as PostFormat } from './post-format';
 export { default as PostFormatCheck } from './post-format/check';

diff --git a/packages/editor/src/components/post-featured-image/index.js b/packages/editor/src/components/post-featured-image/index.js
@@ -24,6 +24,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as coreStore } from '@wordpress/core-data';
+import { edit, trash } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -61,7 +62,7 @@ function PostFeaturedImage( {
 	if ( media ) {
 		const mediaSize = applyFilters(
 			'editor.PostFeaturedImage.imageSize',
-			'post-thumbnail',
+			'large',
 			media.id,
 			currentPostId
 		);
@@ -123,63 +124,8 @@ function PostFeaturedImage( {
 							) }
 					</div>
 				) }
-				<MediaUploadCheck fallback={ instructions }>
-					<MediaUpload
-						title={
-							postLabel.featured_image ||
-							DEFAULT_FEATURE_IMAGE_LABEL
-						}
-						onSelect={ onUpdateImage }
-						unstableFeaturedImageFlow
-						allowedTypes={ ALLOWED_MEDIA_TYPES }
-						modalClass="editor-post-featured-image__media-modal"
-						render={ ( { open } ) => (
-							<div className="editor-post-featured-image__container">
-								<Button
-									className={
-										! featuredImageId
-											? 'editor-post-featured-image__toggle'
-											: 'editor-post-featured-image__preview'
-									}
-									onClick={ open }
-									aria-label={
-										! featuredImageId
-											? null
-											: __( 'Edit or update the image' )
-									}
-									aria-describedby={
-										! featuredImageId
-											? null
-											: `editor-post-featured-image-${ featuredImageId }-describedby`
-									}
-								>
-									{ !! featuredImageId && media && (
-										<ResponsiveWrapper
-											naturalWidth={ mediaWidth }
-											naturalHeight={ mediaHeight }
-											isInline
-										>
-											<img
-												src={ mediaSourceUrl }
-												alt=""
-											/>
-										</ResponsiveWrapper>
-									) }
-									{ !! featuredImageId && ! media && (
-										<Spinner />
-									) }
-									{ ! featuredImageId &&
-										( postLabel.set_featured_image ||
-											DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
-								</Button>
-								<DropZone onFilesDrop={ onDropImage } />
-							</div>
-						) }
-						value={ featuredImageId }
-					/>
-				</MediaUploadCheck>
-				{ !! featuredImageId && media && ! media.isLoading && (
-					<MediaUploadCheck>
+				<div className="editor-post-featured-image__container">
+					<MediaUploadCheck fallback={ instructions }>
 						<MediaUpload
 							title={
 								postLabel.featured_image ||
@@ -190,25 +136,88 @@ function PostFeaturedImage( {
 							allowedTypes={ ALLOWED_MEDIA_TYPES }
 							modalClass="editor-post-featured-image__media-modal"
 							render={ ( { open } ) => (
-								<Button onClick={ open } variant="secondary">
-									{ __( 'Replace Image' ) }
-								</Button>
+								<>
+									<Button
+										className={
+											! featuredImageId
+												? 'editor-post-featured-image__toggle'
+												: 'editor-post-featured-image__preview'
+										}
+										onClick={ open }
+										aria-label={
+											! featuredImageId
+												? null
+												: __(
+														'Edit or update the image'
+												  )
+										}
+										aria-describedby={
+											! featuredImageId
+												? null
+												: `editor-post-featured-image-${ featuredImageId }-describedby`
+										}
+									>
+										{ !! featuredImageId && media && (
+											<ResponsiveWrapper
+												naturalWidth={ mediaWidth }
+												naturalHeight={ mediaHeight }
+												isInline
+											>
+												<img
+													src={ mediaSourceUrl }
+													alt=""
+												/>
+											</ResponsiveWrapper>
+										) }
+										{ !! featuredImageId && ! media && (
+											<Spinner />
+										) }
+										{ ! featuredImageId &&
+											( postLabel.set_featured_image ||
+												DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
+									</Button>
+									<DropZone onFilesDrop={ onDropImage } />
+								</>
 							) }
+							value={ featuredImageId }
 						/>
 					</MediaUploadCheck>
-				) }
-				{ !! featuredImageId && (
-					<MediaUploadCheck>
-						<Button
-							onClick={ onRemoveImage }
-							variant="link"
-							isDestructive
-						>
-							{ postLabel.remove_featured_image ||
-								DEFAULT_REMOVE_FEATURE_IMAGE_LABEL }
-						</Button>
-					</MediaUploadCheck>
-				) }
+					<div className="editor-post-featured-image__actions">
+						{ !! featuredImageId && media && ! media.isLoading && (
+							<MediaUploadCheck>
+								<MediaUpload
+									title={
+										postLabel.featured_image ||
+										DEFAULT_FEATURE_IMAGE_LABEL
+									}
+									onSelect={ onUpdateImage }
+									unstableFeaturedImageFlow
+									allowedTypes={ ALLOWED_MEDIA_TYPES }
+									modalClass="editor-post-featured-image__media-modal"
+									render={ ( { open } ) => (
+										<Button
+											label={ __( 'Replace Image' ) }
+											icon={ edit }
+											onClick={ open }
+										/>
+									) }
+								/>
+							</MediaUploadCheck>
+						) }
+						{ !! featuredImageId && (
+							<MediaUploadCheck>
+								<Button
+									label={
+										postLabel.remove_featured_image ||
+										DEFAULT_REMOVE_FEATURE_IMAGE_LABEL
+									}
+									icon={ trash }
+									onClick={ onRemoveImage }
+								/>
+							</MediaUploadCheck>
+						) }
+					</div>
+				</div>
 			</div>
 		</PostFeaturedImageCheck>
 	);