Media Text Block: Image size option for featured image

packages/block-library/src/media-text/edit.js

@@ -63,7 +63,7 @@ function getImageSourceUrlBySizeSlug( image, slug ) {
 }
 
 function attributesFromMedia( {
-	attributes: { linkDestination, href },
+	attributes: { linkDestination, href, mediaSizeSlug },
 	setAttributes,
 } ) {
 	return ( media ) => {
@@ -102,11 +102,10 @@ function attributesFromMedia( {
 		}
 
 		if ( mediaType === 'image' ) {
-			// Try the "large" size URL, falling back to the "full" size URL below.
+			// Get the URL for the selected image size, falling back to the full size.
 			src =
-				media.sizes?.large?.url ||
-				// eslint-disable-next-line camelcase
-				media.media_details?.sizes?.large?.source_url;
+				media.sizes?.[ mediaSizeSlug ]?.url ||
+				media?.media_details?.sizes?.[ mediaSizeSlug ]?.source_url;
 		}
 
 		let newHref = href;
@@ -126,6 +125,8 @@ function attributesFromMedia( {
 			mediaId: media.id,
 			mediaType,
 			mediaUrl: src || media.url,
+			// Reset to default size if the selected size is not available in media.
+			mediaSizeSlug: src ? mediaSizeSlug : DEFAULT_MEDIA_SIZE_SLUG,
 			mediaLink: media.link || undefined,
 			href: newHref,
 			focalPoint: undefined,
@@ -179,8 +180,8 @@ function MediaTextEdit( {
 		mediaPosition,
 		mediaType,
 		mediaUrl,
-		mediaWidth,
 		mediaSizeSlug,
+		mediaWidth,
 		rel,
 		verticalAlignment,
 		allowedBlocks,
@@ -223,13 +224,27 @@ function MediaTextEdit( {
 	);
 
 	const featuredImageURL = useFeaturedImage
-		? featuredImageMedia?.source_url
+		? featuredImageMedia?.media_details?.sizes?.[ mediaSizeSlug ]
+				?.source_url ?? featuredImageMedia?.source_url
 		: '';
+
+	const featuredMediaSizeSlug =
+		useFeaturedImage &&
+		featuredImageMedia?.media_details?.sizes?.[ mediaSizeSlug ]?.source_url
+			? mediaSizeSlug
+			: DEFAULT_MEDIA_SIZE_SLUG;
+
 	const featuredImageAlt = useFeaturedImage
 		? featuredImageMedia?.alt_text
 		: '';
 
 	const toggleUseFeaturedImage = () => {
+		const updateMediaSize =
+			! useFeaturedImage &&
+			featuredImageMedia?.media_details?.sizes?.[ mediaSizeSlug ]
+				? mediaSizeSlug
+				: DEFAULT_MEDIA_SIZE_SLUG;
+
 		setAttributes( {
 			imageFill: false,
 			mediaType: 'image',
@@ -242,6 +257,7 @@ function MediaTextEdit( {
 			linkClass: undefined,
 			rel: undefined,
 			href: undefined,
+			mediaSizeSlug: updateMediaSize,
 			useFeaturedImage: ! useFeaturedImage,
 		} );
 	};
@@ -255,7 +271,10 @@ function MediaTextEdit( {
 
 	const [ temporaryMediaWidth, setTemporaryMediaWidth ] = useState( null );
 
-	const onSelectMedia = attributesFromMedia( { attributes, setAttributes } );
+	const onSelectMedia = attributesFromMedia( {
+		attributes: { ...attributes, mediaSizeSlug },
+		setAttributes,
+	} );
 
 	const onSetHref = ( props ) => {
 		setAttributes( props );
@@ -293,8 +312,14 @@ function MediaTextEdit( {
 	const onVerticalAlignmentChange = ( alignment ) => {
 		setAttributes( { verticalAlignment: alignment } );
 	};
+
+	const currentImageMedia = useFeaturedImage ? featuredImageMedia : image;
+
 	const updateImage = ( newMediaSizeSlug ) => {
-		const newUrl = getImageSourceUrlBySizeSlug( image, newMediaSizeSlug );
+		const newUrl = getImageSourceUrlBySizeSlug(
+			currentImageMedia,
+			newMediaSizeSlug
+		);
 
 		if ( ! newUrl ) {
 			return null;
@@ -437,10 +462,12 @@ function MediaTextEdit( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ mediaType === 'image' && ! useFeaturedImage && (
+			{ mediaType === 'image' && (
 				<MediaTextResolutionTool
-					image={ image }
-					value={ mediaSizeSlug }
+					image={ useFeaturedImage ? featuredImageMedia : image }
+					value={
+						useFeaturedImage ? featuredMediaSizeSlug : mediaSizeSlug
+					}
 					onChange={ updateImage }
 				/>
 			) }

packages/block-library/src/media-text/index.php

@@ -24,7 +24,7 @@ function render_block_core_media_text( $attributes, $content ) {
 		update_post_thumbnail_cache();
 	}
 
-	$current_featured_image = get_the_post_thumbnail_url();
+	$current_featured_image = get_the_post_thumbnail_url( null, $attributes['mediaSizeSlug'] ?? null );
 	if ( ! $current_featured_image ) {
 		return $content;
 	}

packages/block-library/src/media-text/media-container.js

@@ -200,6 +200,7 @@ function MediaContainer( props, ref ) {
 					}
 					mediaId={ mediaId }
 					toggleUseFeaturedImage={ toggleUseFeaturedImage }
+					useFeaturedImage={ useFeaturedImage }
 				/>
 				{ ( mediaTypeRenderers[ mediaType ] || noop )() }
 				{ isTemporaryMedia && <Spinner /> }

packages/block-library/src/media-text/save.js

@@ -33,6 +33,7 @@ export default function save( { attributes } ) {
 		href,
 		linkTarget,
 		rel,
+		useFeaturedImage,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 	const newRel = ! rel ? undefined : rel;
@@ -46,14 +47,15 @@ export default function save( { attributes } ) {
 		? imageFillStyles( mediaUrl, focalPoint )
 		: {};
 
-	let image = mediaUrl ? (
-		<img
-			src={ mediaUrl }
-			alt={ mediaAlt }
-			className={ imageClasses || null }
-			style={ positionStyles }
-		/>
-	) : null;
+	let image =
+		! useFeaturedImage && mediaUrl ? (
+			<img
+				src={ mediaUrl }
+				alt={ mediaAlt }
+				className={ imageClasses || null }
+				style={ positionStyles }
+			/>
+		) : null;
 
 	if ( href ) {
 		image = (