Implement image size option for featured image in cover block (#67273)

Co-authored-by: akasunil <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: carolinan <[email protected]>
WordPress · Dec 2, 2024 · c5b33b8 · c5b33b8
1 parent 4775e70
commit c5b33b8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/packages/block-library/src/cover/edit/index.js b/packages/block-library/src/cover/edit/index.js
@@ -120,7 +120,9 @@ function CoverEdit( {
 			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
 		[ featuredImage ]
 	);
-	const mediaUrl = media?.source_url;
+	const mediaUrl =
+		media?.media_details?.sizes?.[ sizeSlug ]?.source_url ??
+		media?.source_url;
 
 	// User can change the featured image outside of the block, but we still
 	// need to update the block when that happens. This effect should only
@@ -451,6 +453,7 @@ function CoverEdit( {
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			updateDimRatio={ onUpdateDimRatio }
 			onClearMedia={ onClearMedia }
+			featuredImage={ media }
 		/>
 	);
 

diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -96,6 +96,7 @@ export default function CoverInspectorControls( {
 	coverRef,
 	currentSettings,
 	updateDimRatio,
+	featuredImage,
 } ) {
 	const {
 		useFeaturedImage,
@@ -132,8 +133,12 @@ export default function CoverInspectorControls( {
 		[ id, isImageBackground ]
 	);
 
+	const currentBackgroundImage = useFeaturedImage ? featuredImage : image;
+
 	function updateImage( newSizeSlug ) {
-		const newUrl = image?.media_details?.sizes?.[ newSizeSlug ]?.source_url;
+		const newUrl =
+			currentBackgroundImage?.media_details?.sizes?.[ newSizeSlug ]
+				?.source_url;
 		if ( ! newUrl ) {
 			return null;
 		}
@@ -146,7 +151,9 @@ export default function CoverInspectorControls( {
 
 	const imageSizeOptions = imageSizes
 		?.filter(
-			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
+			( { slug } ) =>
+				currentBackgroundImage?.media_details?.sizes?.[ slug ]
+					?.source_url
 		)
 		?.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
@@ -321,7 +328,7 @@ export default function CoverInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
-						{ ! useFeaturedImage && !! imageSizeOptions?.length && (
+						{ !! imageSizeOptions?.length && (
 							<ResolutionTool
 								value={ sizeSlug }
 								onChange={ updateImage }

diff --git a/packages/block-library/src/cover/index.php b/packages/block-library/src/cover/index.php
@@ -35,12 +35,12 @@ function render_block_core_cover( $attributes, $content ) {
 			$attr['style']                = 'object-position:' . $object_position . ';';
 		}
 
-		$image = get_the_post_thumbnail( null, 'post-thumbnail', $attr );
+		$image = get_the_post_thumbnail( null, $attributes['sizeSlug'] ?? 'post-thumbnail', $attr );
 	} else {
 		if ( in_the_loop() ) {
 			update_post_thumbnail_cache();
 		}
-		$current_featured_image = get_the_post_thumbnail_url();
+		$current_featured_image = get_the_post_thumbnail_url( null, $attributes['sizeSlug'] ?? null );
 		if ( ! $current_featured_image ) {
 			return $content;
 		}