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 ) => {
@@ -76,6 +76,7 @@ function attributesFromMedia( {
 				mediaLink: undefined,
 				href: undefined,
 				focalPoint: undefined,
+				useFeaturedImage: false,
 			} );
 			return;
 		}
@@ -101,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;
@@ -125,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,
@@ -157,7 +159,10 @@ function MediaTextEdit( {
 		allowedBlocks,
 		useFeaturedImage,
 	} = attributes;
-	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
+	const { getSettings } = useSelect( blockEditorStore );
+	const { imageDefaultSize } = getSettings();
+	const mediaSizeSlug =
+		attributes.mediaSizeSlug || imageDefaultSize || DEFAULT_MEDIA_SIZE_SLUG;
 
 	const [ featuredImage ] = useEntityProp(
 		'postType',
@@ -174,7 +179,8 @@ function MediaTextEdit( {
 	);
 
 	const featuredImageURL = useFeaturedImage
-		? featuredImageMedia?.source_url
+		? featuredImageMedia?.media_details?.sizes?.[ mediaSizeSlug ]
+				?.source_url ?? featuredImageMedia?.source_url
 		: '';
 	const featuredImageAlt = useFeaturedImage
 		? featuredImageMedia?.alt_text
@@ -199,7 +205,6 @@ function MediaTextEdit( {
 
 	const { imageSizes, image } = useSelect(
 		( select ) => {
-			const { getSettings } = select( blockEditorStore );
 			return {
 				image:
 					mediaId && isSelected
@@ -222,7 +227,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 );
@@ -261,11 +269,17 @@ function MediaTextEdit( {
 		setAttributes( { verticalAlignment: alignment } );
 	};
 
+	const currentImageMedia = useFeaturedImage ? featuredImageMedia : image;
 	const imageSizeOptions = imageSizes
-		.filter( ( { slug } ) => getImageSourceUrlBySizeSlug( image, slug ) )
+		.filter( ( { slug } ) =>
+			getImageSourceUrlBySizeSlug( currentImageMedia, slug )
+		)
 		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 	const updateImage = ( newMediaSizeSlug ) => {
-		const newUrl = getImageSourceUrlBySizeSlug( image, newMediaSizeSlug );
+		const newUrl = getImageSourceUrlBySizeSlug(
+			currentImageMedia,
+			newMediaSizeSlug
+		);
 
 		if ( ! newUrl ) {
 			return null;
@@ -408,7 +422,7 @@ function MediaTextEdit( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ mediaType === 'image' && ! useFeaturedImage && (
+			{ mediaType === 'image' && (
 				<ResolutionTool
 					value={ mediaSizeSlug }
 					options={ imageSizeOptions }

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 = (