Show PostFeaturedImage in editor (#25412)

* show PostFeaturedImage in editor

* change wording

* add placeholder chip

packages/block-library/src/editor.scss

@@ -51,6 +51,7 @@
 @import "./video/editor.scss";
 @import "./query-loop/editor.scss";
 @import "./query/editor.scss";
+@import "./post-featured-image/editor.scss";
 
 /**
  * Import styles from internal editor components used by the blocks.

packages/block-library/src/post-featured-image/block.json

@@ -2,7 +2,8 @@
 	"name": "core/post-featured-image",
 	"category": "design",
 	"usesContext": [
-		"postId"
+		"postId",
+		"postType"
 	],
 	"supports": {
 		"html": false

packages/block-library/src/post-featured-image/edit.js

@@ -1,35 +1,46 @@
 /**
  * WordPress dependencies
  */
-import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import { useEntityProp } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { ResponsiveWrapper } from '@wordpress/components';
+import { ResponsiveWrapper, Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { postFeaturedImage as icon } from '@wordpress/icons';
 
-function PostFeaturedImageDisplay() {
+function PostFeaturedImageDisplay( { context: { postId, postType } } ) {
 	const [ featuredImage ] = useEntityProp(
 		'postType',
-		'post',
-		'featured_media'
+		postType,
+		'featured_media',
+		postId
 	);
 	const media = useSelect(
 		( select ) =>
 			featuredImage && select( 'core' ).getMedia( featuredImage ),
 		[ featuredImage ]
 	);
-	return media ? (
+	if ( ! media ) {
+		return (
+			<div className="post-featured-image_placeholder">
+				<Icon icon={ icon } />
+				<p> { __( 'Featured Image' ) }</p>
+			</div>
+		);
+	}
+	const alt = media.alt_text || __( 'No alternative text set' );
+	return (
 		<ResponsiveWrapper
 			naturalWidth={ media.media_details.width }
 			naturalHeight={ media.media_details.height }
 		>
-			<img src={ media.source_url } alt="Post Featured Media" />
+			<img src={ media.source_url } alt={ alt } />
 		</ResponsiveWrapper>
-	) : null;
+	);
 }
 
-export default function PostFeaturedImageEdit() {
-	if ( ! useEntityId( 'postType', 'post' ) ) {
-		return __( 'Post Featured Image' );
+export default function PostFeaturedImageEdit( props ) {
+	if ( ! props.context?.postId ) {
+		return __( 'Featured Image' );
 	}
-	return <PostFeaturedImageDisplay />;
+	return <PostFeaturedImageDisplay { ...props } />;
 }

packages/block-library/src/post-featured-image/editor.scss

@@ -0,0 +1,19 @@
+div[data-type="core/post-featured-image"] {
+	.post-featured-image_placeholder {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		border-radius: $radius-block-ui;
+		background-color: $white;
+		box-shadow: inset 0 0 0 $border-width $gray-900;
+		padding: $grid-unit-15;
+		svg {
+			margin-right: $grid-unit-15;
+		}
+		p {
+			font-family: $default-font;
+			font-size: $default-font-size;
+			margin: 0;
+		}
+	}
+}

packages/components/src/responsive-wrapper/style.scss

@@ -5,6 +5,10 @@
 	& > span {
 		display: block;
 	}
+	&,
+	& > img {
+		width: auto;
+	}
 }
 
 .components-responsive-wrapper__content {