Introduce 'editor.PostFeaturedImage.imageSize' filter for Featured Im…

…age (#8196)

* Introduce 'editor.PostFeaturedImage.imageSize' filter for Featured Image

* Include variables passed through for reference

* Better English

* Consolidate statement

* Move variable definitions to one line

docs/extensibility/extending-blocks.md

@@ -163,6 +163,20 @@ var withDataAlign = wp.compose.createHigherOrderComponent( function( BlockListBl
 wp.hooks.addFilter( 'editor.BlockListBlock', 'my-plugin/with-data-align', withDataAlign );
 ```
 
+### `editor.PostFeaturedImage.imageSize`
+
+Used to modify the image size displayed in the Post Featured Image component. It defaults to `'post-thumbnail'`, and will fail back to the `full` image size when the specified image size doesn't exist in the media object. It's modeled after the `admin_post_thumbnail_size` filter in the Classic Editor.
+
+_Example:_
+
+```
+var withImageSize = function( size, mediaId, postId ) {
+	return 'large';
+};
+
+wp.hooks.addFilter( 'editor.PostFeaturedImage.imageSize', 'my-plugin/with-image-size', withImageSize );
+```
+
 ## Removing Blocks
 
 ### Using a blacklist

editor/components/post-featured-image/index.js

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
+import { has, get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { applyFilters } from '@wordpress/hooks';
 import { Button, Spinner, ResponsiveWrapper, withFilters } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -22,9 +23,23 @@ import MediaUpload from '../media-upload';
 const DEFAULT_SET_FEATURE_IMAGE_LABEL = __( 'Set featured image' );
 const DEFAULT_REMOVE_FEATURE_IMAGE_LABEL = __( 'Remove image' );
 
-function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, media, postType } ) {
+function PostFeaturedImage( { currentPostId, featuredImageId, onUpdateImage, onRemoveImage, media, postType } ) {
 	const postLabel = get( postType, [ 'labels' ], {} );
 
+	let mediaWidth, mediaHeight, mediaSourceUrl;
+	if ( media ) {
+		const mediaSize = applyFilters( 'editor.PostFeaturedImage.imageSize', 'post-thumbnail', media.id, currentPostId );
+		if ( has( media, [ 'media_details', 'sizes', mediaSize ] ) ) {
+			mediaWidth = media.media_details.sizes[ mediaSize ].width;
+			mediaHeight = media.media_details.sizes[ mediaSize ].height;
+			mediaSourceUrl = media.media_details.sizes[ mediaSize ].source_url;
+		} else {
+			mediaWidth = media.media_details.width;
+			mediaHeight = media.media_details.height;
+			mediaSourceUrl = media.source_url;
+		}
+	}
+
 	return (
 		<PostFeaturedImageCheck>
 			<div className="editor-post-featured-image">
@@ -38,10 +53,10 @@ function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, med
 							<Button className="editor-post-featured-image__preview" onClick={ open }>
 								{ media &&
 									<ResponsiveWrapper
-										naturalWidth={ media.media_details.width }
-										naturalHeight={ media.media_details.height }
+										naturalWidth={ mediaWidth }
+										naturalHeight={ mediaHeight }
 									>
-										<img src={ media.source_url } alt={ __( 'Featured image' ) } />
+										<img src={ mediaSourceUrl } alt={ __( 'Featured image' ) } />
 									</ResponsiveWrapper>
 								}
 								{ ! media && <Spinner /> }
@@ -89,11 +104,12 @@ function PostFeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, med
 
 const applyWithSelect = withSelect( ( select ) => {
 	const { getMedia, getPostType } = select( 'core' );
-	const { getEditedPostAttribute } = select( 'core/editor' );
+	const { getCurrentPostId, getEditedPostAttribute } = select( 'core/editor' );
 	const featuredImageId = getEditedPostAttribute( 'featured_media' );
 
 	return {
 		media: featuredImageId ? getMedia( featuredImageId ) : null,
+		currentPostId: getCurrentPostId(),
 		postType: getPostType( getEditedPostAttribute( 'type' ) ),
 		featuredImageId,
 	};