Media & Text: Optimize block editor store subscriptions (#68290)

* Media & Text: Optimize block editor store subscriptions * Colocate media details store selectors * Set default value Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
WordPress · Dec 27, 2024 · 5c7f039 · 5c7f039 · github-actions · Dec 27, 2024
1 parent b4424d8
commit 5c7f039
Showing 1 changed file with 43 additions and 23 deletions.
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -134,6 +134,32 @@ 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 (
+		<ResolutionTool
+			value={ value }
+			defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
+			options={ imageSizeOptions }
+			onChange={ onChange }
+		/>
+	);
+}
+
 function MediaTextEdit( {
 	attributes,
 	isSelected,
@@ -154,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',
@@ -182,6 +208,20 @@ 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?.source_url
 		: '';
@@ -206,22 +246,6 @@ function MediaTextEdit( {
 		} );
 	};
 
-	const { imageSizes, image } = useSelect(
-		( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			return {
-				image:
-					mediaId && isSelected
-						? select( coreStore ).getMedia( mediaId, {
-								context: 'view',
-						  } )
-						: null,
-				imageSizes: getSettings()?.imageSizes,
-			};
-		},
-		[ isSelected, mediaId ]
-	);
-
 	const refMedia = useRef();
 	const imperativeFocalPointPreview = ( value ) => {
 		const { style } = refMedia.current;
@@ -269,10 +293,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 );
 
@@ -418,9 +438,9 @@ function MediaTextEdit( {
 				</ToolsPanelItem>
 			) }
 			{ mediaType === 'image' && ! useFeaturedImage && (
-				<ResolutionTool
+				<MediaTextResolutionTool
+					image={ image }
 					value={ mediaSizeSlug }
-					options={ imageSizeOptions }
 					onChange={ updateImage }
 				/>
 			) }