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