Post Featured Image: Add size selector (#38044)

* Post Featured Image: Add size selector * PHPCS * Make size panel non-default control and move it below scales * Add help text * Update help text * Update label and hasValue check
WordPress · Jan 20, 2022 · e218703 · e218703
1 parent 8cd3c47
commit e218703
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 6 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -528,7 +528,7 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber
 -	**Name:** core/post-featured-image
 -	**Category:** theme
 -	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~
--	**Attributes:** height, isLink, scale, width
+-	**Attributes:** height, isLink, scale, sizeSlug, width
 
 ## Post Navigation Link
 

diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
@@ -20,6 +20,9 @@
 		"scale": {
 			"type": "string",
 			"default": "cover"
+		},
+		"sizeSlug": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -3,6 +3,7 @@
  */
 import { __, _x } from '@wordpress/i18n';
 import {
+	SelectControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -32,6 +33,7 @@ const SCALE_OPTIONS = (
 );
 
 const DEFAULT_SCALE = 'cover';
+const DEFAULT_SIZE = 'full';
 
 const scaleHelp = {
 	cover: __(
@@ -47,8 +49,9 @@ const scaleHelp = {
 
 const DimensionControls = ( {
 	clientId,
-	attributes: { width, height, scale },
+	attributes: { width, height, scale, sizeSlug },
 	setAttributes,
+	imageSizeOptions = [],
 } ) => {
 	const defaultUnits = [ 'px', '%', 'vw', 'em', 'rem' ];
 	const units = useCustomUnits( {
@@ -143,6 +146,30 @@ const DimensionControls = ( {
 					</ToggleGroupControl>
 				</ToolsPanelItem>
 			) }
+			{ !! imageSizeOptions.length && (
+				<ToolsPanelItem
+					hasValue={ () => !! sizeSlug }
+					label={ __( 'Image size' ) }
+					onDeselect={ () =>
+						setAttributes( { sizeSlug: undefined } )
+					}
+					resetAllFilter={ () => ( {
+						sizeSlug: undefined,
+					} ) }
+					isShownByDefault={ false }
+					panelId={ clientId }
+				>
+					<SelectControl
+						label={ __( 'Image size' ) }
+						value={ sizeSlug || DEFAULT_SIZE }
+						options={ imageSizeOptions }
+						onChange={ ( nextSizeSlug ) =>
+							setAttributes( { sizeSlug: nextSizeSlug } )
+						}
+						help={ __( 'Select the size of the source image.' ) }
+					/>
+				</ToolsPanelItem>
+			) }
 		</InspectorControls>
 	);
 };

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -16,6 +16,7 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
@@ -46,14 +47,20 @@ const placeholderChip = (
 	</div>
 );
 
+function getMediaSourceUrlBySizeSlug( media, slug ) {
+	return (
+		media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
+	);
+}
+
 function PostFeaturedImageDisplay( {
 	clientId,
 	attributes,
 	setAttributes,
 	context: { postId, postType, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { isLink, height, width, scale } = attributes;
+	const { isLink, height, width, scale, sizeSlug } = attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postType,
@@ -67,6 +74,20 @@ function PostFeaturedImageDisplay( {
 			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
 		[ featuredImage ]
 	);
+	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
+
+	const imageSizes = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().imageSizes,
+		[]
+	);
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => {
+			return media?.media_details?.sizes?.[ slug ]?.source_url;
+		} )
+		.map( ( { name, slug } ) => ( {
+			value: slug,
+			label: name,
+		} ) );
 
 	const blockProps = useBlockProps( {
 		style: { width, height },
@@ -98,6 +119,7 @@ function PostFeaturedImageDisplay( {
 				clientId={ clientId }
 				attributes={ attributes }
 				setAttributes={ setAttributes }
+				imageSizeOptions={ imageSizeOptions }
 			/>
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
@@ -156,7 +178,7 @@ function PostFeaturedImageDisplay( {
 			placeholderChip
 		) : (
 			<img
-				src={ media.source_url }
+				src={ mediaUrl }
 				alt={ media.alt_text || __( 'Featured image' ) }
 				style={ { height, objectFit: height && scale } }
 			/>
@@ -170,7 +192,7 @@ function PostFeaturedImageDisplay( {
 				<BlockControls group="other">
 					<MediaReplaceFlow
 						mediaId={ featuredImage }
-						mediaURL={ media.source_url }
+						mediaURL={ mediaUrl }
 						allowedTypes={ ALLOWED_MEDIA_TYPES }
 						accept="image/*"
 						onSelect={ onSelectImage }

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
@@ -19,7 +19,8 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
-	$featured_image = get_the_post_thumbnail( $post_ID );
+	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
+	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug );
 	if ( ! $featured_image ) {
 		return '';
 	}