@wordpress/editor 14.12.0 → 14.13.0

package/src/components/entities-saved-states/entity-record-item.js

@@ -12,6 +12,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { getTemplateInfo } from '../../utils/get-template-info';
 
 export default function EntityRecordItem( { record, checked, onChange } ) {
 	const { name, kind, title, key } = record;
@@ -33,11 +34,18 @@ export default function EntityRecordItem( { record, checked, onChange } ) {
 				name,
 				key
 			);
+
+			const { default_template_types: templateTypes = [] } =
+				select( coreStore ).getEntityRecord(
+					'root',
+					'__unstableBase'
+				) ?? {};
+
 			return {
-				entityRecordTitle:
-					select( editorStore ).__experimentalGetTemplateInfo(
-						template
-					).title,
+				entityRecordTitle: getTemplateInfo( {
+					template,
+					templateTypes,
+				} ).title,
 				hasPostMetaChanges: unlock(
 					select( editorStore )
 				).hasPostMetaChanges( name, key ),

package/src/components/entities-saved-states/index.js

@@ -33,7 +33,7 @@ function identity( values ) {
  * @param {Function} props.close        The function to close the dialog.
  * @param {Function} props.renderDialog The function to render the dialog.
  *
- * @return {JSX.Element} The rendered component.
+ * @return {React.ReactNode} The rendered component.
  */
 export default function EntitiesSavedStates( {
 	close,
@@ -64,7 +64,7 @@ export default function EntitiesSavedStates( {
  * @param {Function} props.setUnselectedEntities Function to set unselected entities.
  * @param {Array}    props.unselectedEntities    Array of unselected entities.
  *
- * @return {JSX.Element} The rendered component.
+ * @return {React.ReactNode} The rendered component.
  */
 export function EntitiesSavedStatesExtensible( {
 	additionalPrompt = undefined,

package/src/components/header/style.scss

@@ -256,7 +256,8 @@
 
 		& > .editor-header__toolbar .editor-document-tools__document-overview-toggle,
 		& > .editor-header__settings > .editor-preview-dropdown,
-		& > .editor-header__settings > .interface-pinned-items {
+		& > .editor-header__settings > .interface-pinned-items,
+		& > .editor-header__settings > .editor-zoom-out-toggle {
 			display: none;
 		}
 

package/src/components/page-attributes/check.js

@@ -12,10 +12,10 @@ import { store as editorStore } from '../../store';
 /**
  * Wrapper component that renders its children only if the post type supports page attributes.
  *
- * @param {Object}  props          - The component props.
- * @param {Element} props.children - The child components to render.
+ * @param {Object}             props          - The component props.
+ * @param {React.ReactElement} props.children - The child components to render.
  *
- * @return {Component|null} The rendered child components or null if page attributes are not supported.
+ * @return {React.ReactElement} The rendered child components or null if page attributes are not supported.
  */
 export function PageAttributesCheck( { children } ) {
 	const supportsPageAttributes = useSelect( ( select ) => {

package/src/components/page-attributes/order.js

@@ -59,7 +59,7 @@ function PageAttributesOrder() {
  * for setting the order of a given page.
  * The component is now not used in core but was kept for backward compatibility.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 export default function PageAttributesOrderWithChecks() {
 	return (

package/src/components/page-attributes/panel.js

@@ -33,7 +33,7 @@ function AttributesPanel() {
 /**
  * Renders the Page Attributes Panel component.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 export default function PageAttributesPanel() {
 	return (

package/src/components/page-attributes/parent.js

@@ -56,7 +56,7 @@ export const getItemPriority = ( name, searchValue ) => {
  * Renders the Page Attributes Parent component. A dropdown menu in an editor interface
  * for selecting the parent page of a given page.
  *
- * @return {Component|null} The component to be rendered. Return null if post type is not hierarchical.
+ * @return {React.ReactNode} The component to be rendered. Return null if post type is not hierarchical.
  */
 export function PageAttributesParent() {
 	const { editPost } = useDispatch( editorStore );

package/src/components/plugin-document-setting-panel/index.js

@@ -22,7 +22,7 @@ const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
  * @param {string}                [props.className]                     An optional class name added to the row.
  * @param {string}                [props.title]                         The title of the panel
  * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
- * @param {Element}               props.children                        Children to be rendered
+ * @param {React.ReactNode}       props.children                        Children to be rendered
  *
  * @example
  * ```js
@@ -64,7 +64,7 @@ const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
  *  registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
  * ```
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The component to be rendered.
  */
 const PluginDocumentSettingPanel = ( {
 	name,

package/src/components/plugin-more-menu-item/index.js

@@ -10,6 +10,7 @@ import { ActionItem } from '@wordpress/interface';
  * The text within the component appears as the menu item label.
  *
  * @param {Object}                props                                 Component properties.
+ * @param {React.ReactNode}       [props.children]                      Children to be rendered.
  * @param {string}                [props.href]                          When `href` is provided then the menu item is represented as an anchor rather than button. It corresponds to the `href` attribute of the anchor.
  * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
  * @param {Function}              [props.onClick=noop]                  The callback function to be executed when the user clicks the menu item.
@@ -59,7 +60,7 @@ import { ActionItem } from '@wordpress/interface';
  * );
  * ```
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 export default function PluginMoreMenuItem( props ) {
 	const context = usePluginContext();

package/src/components/plugin-post-publish-panel/index.js

@@ -15,7 +15,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
  * @param {string}                [props.title]                         Title displayed at the top of the panel.
  * @param {boolean}               [props.initialOpen=false]             Whether to have the panel initially opened. When no title is provided it is always opened.
  * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
- * @param {Element}               props.children                        Children to be rendered
+ * @param {React.ReactNode}       props.children                        Children to be rendered
  *
  * @example
  * ```jsx
@@ -34,7 +34,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
  * );
  * ```
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 const PluginPostPublishPanel = ( {
 	children,

package/src/components/plugin-post-status-info/index.js

@@ -14,9 +14,9 @@ const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
  * It should be noted that this is named and implemented around the function it serves
  * and not its location, which may change in future iterations.
  *
- * @param {Object}  props             Component properties.
- * @param {string}  [props.className] An optional class name added to the row.
- * @param {Element} props.children    Children to be rendered.
+ * @param {Object}          props             Component properties.
+ * @param {string}          [props.className] An optional class name added to the row.
+ * @param {React.ReactNode} props.children    Children to be rendered.
  *
  * @example
  * ```js
@@ -50,7 +50,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostStatusInfo' );
  * );
  * ```
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 const PluginPostStatusInfo = ( { children, className } ) => (
 	<Fill>

package/src/components/plugin-pre-publish-panel/index.js

@@ -18,7 +18,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
  * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/)
  *                                                                      icon slug string, or an SVG WP element, to be rendered when
  *                                                                      the sidebar is pinned to toolbar.
- * @param {Element}               props.children                        Children to be rendered
+ * @param {React.ReactNode}       props.children                        Children to be rendered
  *
  * @example
  * ```jsx
@@ -37,7 +37,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
  * );
  * ```
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 const PluginPrePublishPanel = ( {
 	children,

package/src/components/plugin-preview-menu-item/index.js

@@ -10,6 +10,7 @@ import { ActionItem } from '@wordpress/interface';
  * The text within the component appears as the menu item label.
  *
  * @param {Object}                props                                 Component properties.
+ * @param {React.ReactNode}       [props.children]                      Children to be rendered.
  * @param {string}                [props.href]                          When `href` is provided, the menu item is rendered as an anchor instead of a button. It corresponds to the `href` attribute of the anchor.
  * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The icon to be rendered to the left of the menu item label. Can be a Dashicon slug or an SVG WP element.
  * @param {Function}              [props.onClick]                       The callback function to be executed when the user clicks the menu item.
@@ -38,7 +39,7 @@ import { ActionItem } from '@wordpress/interface';
  * } );
  * ```
  *
- * @return {Component} The rendered menu item component.
+ * @return {React.ReactNode} The rendered menu item component.
  */
 export default function PluginPreviewMenuItem( props ) {
 	const context = usePluginContext();

package/src/components/plugin-sidebar/index.js

@@ -16,6 +16,7 @@ import { ComplementaryArea } from '@wordpress/interface';
  *
  * @param {Object}                props                                 Element props.
  * @param {string}                props.name                            A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
+ * @param {React.ReactNode}       [props.children]                      Children to be rendered.
  * @param {string}                [props.className]                     An optional class name added to the sidebar body.
  * @param {string}                props.title                           Title displayed at the top of the sidebar.
  * @param {boolean}               [props.isPinnable=true]               Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.

package/src/components/plugin-sidebar-more-menu-item/index.js

@@ -10,6 +10,7 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
  *
  * @param {Object}                props                                 Component props.
  * @param {string}                props.target                          A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar.
+ * @param {React.ReactNode}       [props.children]                      Children to be rendered.
  * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label.
  *
  * @example
@@ -48,9 +49,8 @@ import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface';
  * );
  * ```
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
-
 export default function PluginSidebarMoreMenuItem( props ) {
 	return (
 		<ComplementaryAreaMoreMenuItem

package/src/components/post-actions/actions.js

@@ -21,10 +21,10 @@ export function usePostActions( { postType, onActionPerformed, context } ) {
 		[ postType ]
 	);
 
-	const { registerPostTypeActions } = unlock( useDispatch( editorStore ) );
+	const { registerPostTypeSchema } = unlock( useDispatch( editorStore ) );
 	useEffect( () => {
-		registerPostTypeActions( postType );
-	}, [ registerPostTypeActions, postType ] );
+		registerPostTypeSchema( postType );
+	}, [ registerPostTypeSchema, postType ] );
 
 	return useMemo( () => {
 		// Filter actions based on provided context. If not provided

package/src/components/post-author/check.js

@@ -14,10 +14,10 @@ import { AUTHORS_QUERY } from './constants';
 /**
  * Wrapper component that renders its children only if the post type supports the author.
  *
- * @param {Object}  props          The component props.
- * @param {Element} props.children Children to be rendered.
+ * @param {Object}          props          The component props.
+ * @param {React.ReactNode} props.children Children to be rendered.
  *
- * @return {Component|null} The component to be rendered. Return `null` if the post type doesn't
+ * @return {React.ReactNode} The component to be rendered. Return `null` if the post type doesn't
  * supports the author or if there are no authors available.
  */
 export default function PostAuthorCheck( { children } ) {

package/src/components/post-author/index.js

@@ -16,7 +16,7 @@ const minimumUsersForCombobox = 25;
 /**
  * Renders the component for selecting the post author.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 function PostAuthor() {
 	const showCombobox = useSelect( ( select ) => {

package/src/components/post-author/panel.js

@@ -39,7 +39,7 @@ function PostAuthorToggle( { isOpen, onClick } ) {
 /**
  * Renders the Post Author Panel component.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 export function PostAuthor() {
 	// Use internal state instead of a ref to make sure that the component

package/src/components/post-card-panel/index.js

@@ -22,6 +22,7 @@ import {
 import { unlock } from '../../lock-unlock';
 import PostActions from '../post-actions';
 import usePageTypeBadge from '../../utils/pageTypeBadge';
+import { getTemplateInfo } from '../../utils/get-template-info';
 
 export default function PostCardPanel( {
 	postType,
@@ -30,17 +31,29 @@ export default function PostCardPanel( {
 } ) {
 	const { title, icon } = useSelect(
 		( select ) => {
-			const { __experimentalGetTemplateInfo } = select( editorStore );
 			const { getEditedEntityRecord } = select( coreStore );
 			const _record = getEditedEntityRecord(
 				'postType',
 				postType,
 				postId
 			);
-			const _templateInfo =
-				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
-					postType
-				) && __experimentalGetTemplateInfo( _record );
+
+			const { default_template_types: templateTypes = [] } =
+				select( coreStore ).getEntityRecord(
+					'root',
+					'__unstableBase'
+				) ?? {};
+
+			const _templateInfo = [
+				TEMPLATE_POST_TYPE,
+				TEMPLATE_PART_POST_TYPE,
+			].includes( postType )
+				? getTemplateInfo( {
+						template: _record,
+						templateTypes,
+				  } )
+				: {};
+
 			return {
 				title: _templateInfo?.title || _record?.title,
 				icon: unlock( select( editorStore ) ).getPostIcon( postType, {

package/src/components/post-comments/index.js

@@ -61,6 +61,6 @@ function PostComments() {
 /**
  * A form for managing comment status.
  *
- * @return {JSX.Element} The rendered PostComments component.
+ * @return {React.ReactNode} The rendered PostComments component.
  */
 export default PostComments;

package/src/components/post-discussion/panel.js

@@ -93,7 +93,7 @@ function PostDiscussionToggle( { isOpen, onClick } ) {
  * checks whether the current post has support for the
  * above and if the `discussion-panel` panel is enabled.
  *
- * @return {JSX.Element|null} The rendered PostDiscussionPanel component.
+ * @return {React.ReactNode} The rendered PostDiscussionPanel component.
  */
 export default function PostDiscussionPanel() {
 	const { isEnabled } = useSelect( ( select ) => {

package/src/components/post-excerpt/check.js

@@ -6,10 +6,10 @@ import PostTypeSupportCheck from '../post-type-support-check';
 /**
  * Component for checking if the post type supports the excerpt field.
  *
- * @param {Object}  props          Props.
- * @param {Element} props.children Children to be rendered.
+ * @param {Object}          props          Props.
+ * @param {React.ReactNode} props.children Children to be rendered.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 function PostExcerptCheck( { children } ) {
 	return (

package/src/components/post-excerpt/panel.js

@@ -83,7 +83,7 @@ function ExcerptPanel() {
 /**
  * Is rendered if the post type supports excerpts and allows editing the excerpt.
  *
- * @return {JSX.Element} The rendered PostExcerptPanel component.
+ * @return {React.ReactNode} The rendered PostExcerptPanel component.
  */
 export default function PostExcerptPanel() {
 	return (

package/src/components/post-excerpt/plugin.js

@@ -12,9 +12,9 @@ const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' );
 /**
  * Renders a post excerpt panel in the post sidebar.
  *
- * @param {Object}  props             Component properties.
- * @param {string}  [props.className] An optional class name added to the row.
- * @param {Element} props.children    Children to be rendered.
+ * @param {Object}          props             Component properties.
+ * @param {string}          [props.className] An optional class name added to the row.
+ * @param {React.ReactNode} props.children    Children to be rendered.
  *
  * @example
  * ```js
@@ -46,7 +46,7 @@ const { Fill, Slot } = createSlotFill( 'PluginPostExcerpt' );
  * );
  * ```
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 const PluginPostExcerpt = ( { children, className } ) => {
 	return (

package/src/components/post-featured-image/check.js

@@ -8,10 +8,10 @@ import ThemeSupportCheck from '../theme-support-check';
  * Wrapper component that renders its children only if the post type supports a featured image
  * and the theme supports post thumbnails.
  *
- * @param {Object}  props          Props.
- * @param {Element} props.children Children to be rendered.
+ * @param {Object}          props          Props.
+ * @param {React.ReactNode} props.children Children to be rendered.
  *
- * @return {Component} The component to be rendered.
+ * @return {React.ReactNode} The rendered component.
  */
 function PostFeaturedImageCheck( { children } ) {
 	return (

package/src/components/post-featured-image/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
@@ -10,6 +15,7 @@ import {
 	withNotices,
 	withFilters,
 	__experimentalHStack as HStack,
+	Notice,
 } from '@wordpress/components';
 import { isBlobURL } from '@wordpress/blob';
 import { useState, useRef } from '@wordpress/element';
@@ -94,8 +100,9 @@ function PostFeaturedImage( {
 	postType,
 	noticeUI,
 	noticeOperations,
+	isRequestingFeaturedImageMedia,
 } ) {
-	const toggleRef = useRef();
+	const returnsFocusRef = useRef( false );
 	const [ isLoading, setIsLoading ] = useState( false );
 	const { getSettings } = useSelect( blockEditorStore );
 	const { mediaSourceUrl } = getMediaDetails( media, currentPostId );
@@ -150,6 +157,16 @@ function PostFeaturedImage( {
 		);
 	}
 
+	function returnFocus( node ) {
+		if ( returnsFocusRef.current && node ) {
+			node.focus();
+			returnsFocusRef.current = false;
+		}
+	}
+
+	const isMissingMedia =
+		! isRequestingFeaturedImageMedia && !! featuredImageId && ! media;
+
 	return (
 		<PostFeaturedImageCheck>
 			{ noticeUI }
@@ -174,52 +191,83 @@ function PostFeaturedImage( {
 						modalClass="editor-post-featured-image__media-modal"
 						render={ ( { open } ) => (
 							<div className="editor-post-featured-image__container">
-								<Button
-									__next40pxDefaultSize
-									ref={ toggleRef }
-									className={
-										! featuredImageId
-											? 'editor-post-featured-image__toggle'
-											: 'editor-post-featured-image__preview'
-									}
-									onClick={ open }
-									aria-label={
-										! featuredImageId
-											? null
-											: __(
-													'Edit or replace the featured image'
-											  )
-									}
-									aria-describedby={
-										! featuredImageId
-											? null
-											: `editor-post-featured-image-${ featuredImageId }-describedby`
-									}
-									aria-haspopup="dialog"
-									disabled={ isLoading }
-									accessibleWhenDisabled
-								>
-									{ !! featuredImageId && media && (
-										<img
-											className="editor-post-featured-image__preview-image"
-											src={ mediaSourceUrl }
-											alt={ getImageDescription( media ) }
-										/>
-									) }
-									{ isLoading && <Spinner /> }
-									{ ! featuredImageId &&
-										! isLoading &&
-										( postType?.labels
-											?.set_featured_image ||
-											DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
-								</Button>
+								{ isMissingMedia ? (
+									<Notice
+										status="warning"
+										isDismissible={ false }
+									>
+										{ __(
+											'Could not retrieve the featured image data.'
+										) }
+									</Notice>
+								) : (
+									<Button
+										__next40pxDefaultSize
+										ref={ returnFocus }
+										className={
+											! featuredImageId
+												? 'editor-post-featured-image__toggle'
+												: 'editor-post-featured-image__preview'
+										}
+										onClick={ open }
+										aria-label={
+											! featuredImageId
+												? null
+												: __(
+														'Edit or replace the featured image'
+												  )
+										}
+										aria-describedby={
+											! featuredImageId
+												? null
+												: `editor-post-featured-image-${ featuredImageId }-describedby`
+										}
+										aria-haspopup="dialog"
+										disabled={ isLoading }
+										accessibleWhenDisabled
+									>
+										{ !! featuredImageId && media && (
+											<img
+												className="editor-post-featured-image__preview-image"
+												src={ mediaSourceUrl }
+												alt={ getImageDescription(
+													media
+												) }
+											/>
+										) }
+										{ ( isLoading ||
+											isRequestingFeaturedImageMedia ) && (
+											<Spinner />
+										) }
+										{ ! featuredImageId &&
+											! isLoading &&
+											( postType?.labels
+												?.set_featured_image ||
+												DEFAULT_SET_FEATURE_IMAGE_LABEL ) }
+									</Button>
+								) }
 								{ !! featuredImageId && (
-									<HStack className="editor-post-featured-image__actions">
+									<HStack
+										className={ clsx(
+											'editor-post-featured-image__actions',
+											{
+												'editor-post-featured-image__actions-missing-image':
+													isMissingMedia,
+												'editor-post-featured-image__actions-is-requesting-image':
+													isRequestingFeaturedImageMedia,
+											}
+										) }
+									>
 										<Button
 											__next40pxDefaultSize
 											className="editor-post-featured-image__action"
 											onClick={ open }
 											aria-haspopup="dialog"
+											variant={
+												isMissingMedia
+													? 'secondary'
+													: undefined
+											}
 										>
 											{ __( 'Replace' ) }
 										</Button>
@@ -228,8 +276,17 @@ function PostFeaturedImage( {
 											className="editor-post-featured-image__action"
 											onClick={ () => {
 												onRemoveImage();
-												toggleRef.current.focus();
+												// Signal that the toggle button should be focused,
+												// when it is rendered. Can't focus it directly here
+												// because it's rendered conditionally.
+												returnsFocusRef.current = true;
 											} }
+											variant={
+												isMissingMedia
+													? 'secondary'
+													: undefined
+											}
+											isDestructive={ isMissingMedia }
 										>
 											{ __( 'Remove' ) }
 										</Button>
@@ -247,7 +304,8 @@ function PostFeaturedImage( {
 }
 
 const applyWithSelect = withSelect( ( select ) => {
-	const { getMedia, getPostType } = select( coreStore );
+	const { getMedia, getPostType, hasFinishedResolution } =
+		select( coreStore );
 	const { getCurrentPostId, getEditedPostAttribute } = select( editorStore );
 	const featuredImageId = getEditedPostAttribute( 'featured_media' );
 
@@ -258,6 +316,12 @@ const applyWithSelect = withSelect( ( select ) => {
 		currentPostId: getCurrentPostId(),
 		postType: getPostType( getEditedPostAttribute( 'type' ) ),
 		featuredImageId,
+		isRequestingFeaturedImageMedia:
+			!! featuredImageId &&
+			! hasFinishedResolution( 'getMedia', [
+				featuredImageId,
+				{ context: 'view' },
+			] ),
 	};
 } );
 

package/src/components/post-featured-image/panel.js

@@ -21,7 +21,7 @@ const PANEL_NAME = 'featured-image';
  * @param {Object}  props               Props.
  * @param {boolean} props.withPanelBody Whether to include the panel body. Default true.
  *
- * @return {Component|null} The component to be rendered.
+ * @return {React.ReactNode} The component to be rendered.
  * Return Null if the editor panel is disabled for featured image.
  */
 export default function PostFeaturedImagePanel( { withPanelBody = true } ) {