diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index a946a499b26f21..6fc96e5a4359d0 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/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;
@@ -174,7 +174,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
@@ -261,11 +262,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 +415,7 @@ function MediaTextEdit( {
/>
) }
- { mediaType === 'image' && ! useFeaturedImage && (
+ { mediaType === 'image' && (
{ ( mediaTypeRenderers[ mediaType ] || noop )() }
{ isTemporaryMedia && }
diff --git a/packages/block-library/src/media-text/save.js b/packages/block-library/src/media-text/save.js
index 3e660d94e789ee..9d469b783e0c60 100644
--- a/packages/block-library/src/media-text/save.js
+++ b/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 ? (
-
- ) : null;
+ let image =
+ ! useFeaturedImage && mediaUrl ? (
+
+ ) : null;
if ( href ) {
image = (