From 436c66997b6de50479ef4b9a44ccbb4ed2bccfbd Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 25 Dec 2024 13:51:07 +0400 Subject: [PATCH 1/3] Media & Text: Optimize block editor store subscriptions --- packages/block-library/src/media-text/edit.js | 37 ++++++++++++++----- 1 file changed, 28 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 57f51f004d8b69..920aa30710a7d4 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -134,6 +134,31 @@ function attributesFromMedia( { }; } +function MediaTextResolutionTool( { image, value, onChange } ) { + const { imageSizes } = useSelect( ( select ) => { + const { getSettings } = select( blockEditorStore ); + return { + imageSizes: getSettings().imageSizes, + }; + }, [] ); + + if ( ! imageSizes?.length ) { + return null; + } + + const imageSizeOptions = imageSizes + .filter( ( { slug } ) => getImageSourceUrlBySizeSlug( image, slug ) ) + .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); + + return ( + + ); +} + function MediaTextEdit( { attributes, isSelected, @@ -199,9 +224,8 @@ function MediaTextEdit( { } ); }; - const { imageSizes, image } = useSelect( + const { image } = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); return { image: mediaId && isSelected @@ -209,7 +233,6 @@ function MediaTextEdit( { context: 'view', } ) : null, - imageSizes: getSettings()?.imageSizes, }; }, [ isSelected, mediaId ] @@ -262,10 +285,6 @@ function MediaTextEdit( { const onVerticalAlignmentChange = ( alignment ) => { setAttributes( { verticalAlignment: alignment } ); }; - - const imageSizeOptions = imageSizes - .filter( ( { slug } ) => getImageSourceUrlBySizeSlug( image, slug ) ) - .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); const updateImage = ( newMediaSizeSlug ) => { const newUrl = getImageSourceUrlBySizeSlug( image, newMediaSizeSlug ); @@ -411,9 +430,9 @@ function MediaTextEdit( { ) } { mediaType === 'image' && ! useFeaturedImage && ( - ) } From f2776216be999f4d0b79312ec8b97f0520212113 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 25 Dec 2024 14:10:09 +0400 Subject: [PATCH 2/3] Colocate media details store selectors --- packages/block-library/src/media-text/edit.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index 920aa30710a7d4..e8a6cef74b4aa4 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -200,6 +200,20 @@ function MediaTextEdit( { [ featuredImage ] ); + const { image } = useSelect( + ( select ) => { + return { + image: + mediaId && isSelected + ? select( coreStore ).getMedia( mediaId, { + context: 'view', + } ) + : null, + }; + }, + [ isSelected, mediaId ] + ); + const featuredImageURL = useFeaturedImage ? featuredImageMedia?.source_url : ''; @@ -224,20 +238,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; From 6f3cc526302d19af134e61f3e1a446cbca99bd54 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 25 Dec 2024 17:25:38 +0400 Subject: [PATCH 3/3] Set default value --- packages/block-library/src/media-text/edit.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js index e8a6cef74b4aa4..6da25dd483a596 100644 --- a/packages/block-library/src/media-text/edit.js +++ b/packages/block-library/src/media-text/edit.js @@ -153,6 +153,7 @@ function MediaTextResolutionTool( { image, value, onChange } ) { return ( @@ -179,12 +180,12 @@ function MediaTextEdit( { mediaType, mediaUrl, mediaWidth, + mediaSizeSlug, rel, verticalAlignment, allowedBlocks, useFeaturedImage, } = attributes; - const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG; const [ featuredImage ] = useEntityProp( 'postType',