Site Editor: Add the featured image panel (#57053)

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

@@ -13,6 +13,7 @@ import { store as interfaceStore } from '@wordpress/interface';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	store as editorStore,
+	PostFeaturedImagePanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 } from '@wordpress/editor';
@@ -22,7 +23,6 @@ import {
  */
 import SettingsHeader from '../settings-header';
 import PostStatus from '../post-status';
-import FeaturedImage from '../featured-image';
 import PostExcerpt from '../post-excerpt';
 import DiscussionPanel from '../discussion-panel';
 import PageAttributes from '../page-attributes';
@@ -83,7 +83,7 @@ const SidebarContent = ( {
 							<PluginDocumentSettingPanel.Slot />
 							<PostLastRevisionPanel />
 							<PostTaxonomiesPanel />
-							<FeaturedImage />
+							<PostFeaturedImagePanel />
 							<PostExcerpt />
 							<DiscussionPanel />
 							<PageAttributes />

packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js

@@ -13,6 +13,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import {
+	PostFeaturedImagePanel,
 	PostLastRevisionPanel,
 	PostTaxonomiesPanel,
 	store as editorStore,
@@ -100,6 +101,7 @@ export default function PagePanels() {
 			) }
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
+			<PostFeaturedImagePanel />
 		</>
 	);
 }

packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js

@@ -4,8 +4,9 @@
 import { useSelect } from '@wordpress/data';
 import { PanelBody } from '@wordpress/components';
 import {
-	PostTaxonomiesPanel,
+	PostFeaturedImagePanel,
 	PostLastRevisionPanel,
+	PostTaxonomiesPanel,
 	store as editorStore,
 } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
@@ -64,6 +65,7 @@ export default function TemplatePanel() {
 			</PanelBody>
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
+			<PostFeaturedImagePanel />
 		</>
 	);
 }

packages/editor/src/components/index.js

@@ -34,6 +34,7 @@ export { default as PostExcerpt } from './post-excerpt';
 export { default as PostExcerptCheck } from './post-excerpt/check';
 export { default as PostFeaturedImage } from './post-featured-image';
 export { default as PostFeaturedImageCheck } from './post-featured-image/check';
+export { default as PostFeaturedImagePanel } from './post-featured-image/panel';
 export { default as PostFormat } from './post-format';
 export { default as PostFormatCheck } from './post-format/check';
 export { default as PostLastRevision } from './post-last-revision';

packages/editor/src/components/post-featured-image/panel.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import PostFeaturedImage from './index';
+import PostFeaturedImageCheck from './check';
+
+const PANEL_NAME = 'featured-image';
+
+function FeaturedImage() {
+	const { postType, isEnabled, isOpened } = useSelect( ( select ) => {
+		const {
+			getEditedPostAttribute,
+			isEditorPanelEnabled,
+			isEditorPanelOpened,
+		} = select( editorStore );
+		const { getPostType } = select( coreStore );
+
+		return {
+			postType: getPostType( getEditedPostAttribute( 'type' ) ),
+			isEnabled: isEditorPanelEnabled( PANEL_NAME ),
+			isOpened: isEditorPanelOpened( PANEL_NAME ),
+		};
+	}, [] );
+
+	const { toggleEditorPanelOpened } = useDispatch( editorStore );
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	return (
+		<PostFeaturedImageCheck>
+			<PanelBody
+				title={
+					postType?.labels?.featured_image ?? __( 'Featured image' )
+				}
+				opened={ isOpened }
+				onToggle={ () => toggleEditorPanelOpened( PANEL_NAME ) }
+			>
+				<PostFeaturedImage />
+			</PanelBody>
+		</PostFeaturedImageCheck>
+	);
+}
+
+export default FeaturedImage;