From b95ced36eb4f3e884b9308c9b47e100dd22b92bd Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 2 Dec 2024 15:39:53 +0530 Subject: [PATCH 1/8] Add resolution size support for featured image in media text block --- packages/block-library/src/media-text/edit.js | 15 +++++++++++---- .../block-library/src/media-text/index.php | 2 +- .../src/media-text/media-container.js | 1 + packages/block-library/src/media-text/save.js | 18 ++++++++++-------- 4 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index a946a499b26f21..c8928d9fb29f10 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -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 = ( From e4d5dc841076ccc7bb814f748e1171c6189a9fbe Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 2 Dec 2024 17:19:45 +0530 Subject: [PATCH 2/8] Set selected size media url on media change --- packages/block-library/src/media-text/edit.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index c8928d9fb29f10..2aa82e60529117 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 ) => { @@ -103,9 +103,8 @@ function attributesFromMedia( { if ( mediaType === 'image' ) { // Try the "large" size URL, falling back to the "full" size URL below. 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; From 04d2a405a62c884a8651562d63a900a431926644 Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 2 Dec 2024 17:21:01 +0530 Subject: [PATCH 3/8] Unset useFeaturedImage on reset click --- packages/block-library/src/media-text/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 2aa82e60529117..403ed8aa9601df 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -76,6 +76,7 @@ function attributesFromMedia( { mediaLink: undefined, href: undefined, focalPoint: undefined, + useFeaturedImage: false, } ); return; } From d32454f502aadd7e4fa97627ef087cbd44d47a6d Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 2 Dec 2024 17:36:48 +0530 Subject: [PATCH 4/8] Fix liniting errors --- packages/block-library/src/media-text/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/index.php b/packages/block-library/src/media-text/index.php index dfa7873799e0bc..078c432f5c8a05 100644 --- a/packages/block-library/src/media-text/index.php +++ b/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( null, $attributes['mediaSizeSlug'] ?? null); + $current_featured_image = get_the_post_thumbnail_url( null, $attributes['mediaSizeSlug'] ?? null ); if ( ! $current_featured_image ) { return $content; } From 3e9bc8c92af357773eabb500a86cb3e5b68ff6ae Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 3 Dec 2024 11:51:20 +0530 Subject: [PATCH 5/8] Update comment text --- packages/block-library/src/media-text/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 403ed8aa9601df..6fc96e5a4359d0 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -102,7 +102,7 @@ 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?.[ mediaSizeSlug ]?.url || media?.media_details?.sizes?.[ mediaSizeSlug ]?.source_url; From 2cc9a63962d17512e7e487a0057c4daa066ea1e5 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 6 Dec 2024 11:55:02 +0530 Subject: [PATCH 6/8] Use selected media size from setting --- packages/block-library/src/media-text/edit.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 6fc96e5a4359d0..dd44590b330ef3 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -157,7 +157,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', @@ -200,7 +203,6 @@ function MediaTextEdit( { const { imageSizes, image } = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); return { image: mediaId && isSelected @@ -223,7 +225,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 ); From 2f09ae930a9a2e6349857e17082e1bf7ca294644 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 6 Dec 2024 13:13:30 +0530 Subject: [PATCH 7/8] Fall back to default when selected size media not available --- packages/block-library/src/media-text/edit.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index dd44590b330ef3..2c29d60a0074f4 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -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, From fe9d482ea4b9d7a34bfaacccdfd7255f714a1002 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 10 Dec 2024 12:54:57 +0530 Subject: [PATCH 8/8] Fix featured image default size issue --- packages/block-library/src/media-text/edit.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 2c29d60a0074f4..b6ec9af3721f96 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -187,6 +187,12 @@ function MediaTextEdit( { : ''; const toggleUseFeaturedImage = () => { + const updateMediaSize = + ! useFeaturedImage && + featuredImageMedia?.media_details?.sizes?.[ mediaSizeSlug ] + ? mediaSizeSlug + : DEFAULT_MEDIA_SIZE_SLUG; + setAttributes( { imageFill: false, mediaType: 'image', @@ -199,6 +205,7 @@ function MediaTextEdit( { linkClass: undefined, rel: undefined, href: undefined, + mediaSizeSlug: updateMediaSize, useFeaturedImage: ! useFeaturedImage, } ); };