From b95ced36eb4f3e884b9308c9b47e100dd22b92bd Mon Sep 17 00:00:00 2001 From: akasunil Date: Mon, 2 Dec 2024 15:39:53 +0530 Subject: [PATCH 01/11] 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 02/11] 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 03/11] 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 04/11] 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 05/11] 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 06/11] 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 07/11] 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 08/11] 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, } ); }; From f1d149a250f76137c31a7746cb96357df1aa127b Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 18 Feb 2025 17:15:50 +0530 Subject: [PATCH 09/11] Fix mediaSizeSlug variable error --- packages/block-library/src/media-text/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 381d90f09134fc..dcd31c8f184122 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -181,7 +181,6 @@ function MediaTextEdit( { mediaType, mediaUrl, mediaWidth, - mediaSizeSlug, rel, verticalAlignment, allowedBlocks, From 99b555e918d6fa234fe694560f5a7f241ef72be5 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 18 Feb 2025 17:43:42 +0530 Subject: [PATCH 10/11] Fix duplicate image variable error --- packages/block-library/src/media-text/edit.js | 25 +++---------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index dcd31c8f184122..93d1efe721b1d4 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -212,20 +212,6 @@ function MediaTextEdit( { [ featuredImage, useFeaturedImage ] ); - const { image } = useSelect( - ( select ) => { - return { - image: - mediaId && isSelected - ? select( coreStore ).getMedia( mediaId, { - context: 'view', - } ) - : null, - }; - }, - [ isSelected, mediaId ] - ); - const featuredImageURL = useFeaturedImage ? featuredImageMedia?.media_details?.sizes?.[ mediaSizeSlug ] ?.source_url ?? featuredImageMedia?.source_url @@ -258,7 +244,7 @@ function MediaTextEdit( { } ); }; - const { imageSizes, image } = useSelect( + const { image } = useSelect( ( select ) => { return { image: @@ -267,7 +253,6 @@ function MediaTextEdit( { context: 'view', } ) : null, - imageSizes: getSettings()?.imageSizes, }; }, [ isSelected, mediaId ] @@ -325,11 +310,7 @@ function MediaTextEdit( { }; const currentImageMedia = useFeaturedImage ? featuredImageMedia : image; - const imageSizeOptions = imageSizes - .filter( ( { slug } ) => - getImageSourceUrlBySizeSlug( currentImageMedia, slug ) - ) - .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); + const updateImage = ( newMediaSizeSlug ) => { const newUrl = getImageSourceUrlBySizeSlug( currentImageMedia, @@ -479,7 +460,7 @@ function MediaTextEdit( { ) } { mediaType === 'image' && ( From cac6d0bd29615de0a489e231b93cb6855ab7b054 Mon Sep 17 00:00:00 2001 From: akasunil Date: Tue, 18 Feb 2025 18:21:43 +0530 Subject: [PATCH 11/11] Fix featured image default size issue --- packages/block-library/src/media-text/edit.js | 44 +++++++++++-------- 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 93d1efe721b1d4..853f930ff9a74a 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -180,16 +180,13 @@ function MediaTextEdit( { mediaPosition, mediaType, mediaUrl, + mediaSizeSlug, mediaWidth, rel, verticalAlignment, allowedBlocks, useFeaturedImage, } = attributes; - const { getSettings } = useSelect( blockEditorStore ); - const { imageDefaultSize } = getSettings(); - const mediaSizeSlug = - attributes.mediaSizeSlug || imageDefaultSize || DEFAULT_MEDIA_SIZE_SLUG; const [ featuredImage ] = useEntityProp( 'postType', @@ -212,10 +209,31 @@ function MediaTextEdit( { [ featuredImage, useFeaturedImage ] ); + const { image } = useSelect( + ( select ) => { + return { + image: + mediaId && isSelected + ? select( coreStore ).getMedia( mediaId, { + context: 'view', + } ) + : null, + }; + }, + [ isSelected, mediaId ] + ); + const featuredImageURL = useFeaturedImage ? 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 : ''; @@ -244,20 +262,6 @@ function MediaTextEdit( { } ); }; - const { image } = useSelect( - ( select ) => { - return { - image: - mediaId && isSelected - ? select( coreStore ).getMedia( mediaId, { - context: 'view', - } ) - : null, - }; - }, - [ isSelected, mediaId ] - ); - const refMedia = useRef(); const imperativeFocalPointPreview = ( value ) => { const { style } = refMedia.current; @@ -461,7 +465,9 @@ function MediaTextEdit( { { mediaType === 'image' && ( ) }