Add Image Size dropdown for Media & Text block (#24795)

We can change the size of the image for the Image block, but we didn't have the option to do the same for Media & Text block. Which caused the Media & Text block to always render the full-size image.

packages/block-library/src/media-text/block.json

@@ -63,6 +63,9 @@
 			"type": "number",
 			"default": 50
 		},
+		"mediaSizeSlug": {
+			"type": "string"
+		},
 		"isStackedOnMobile": {
 			"type": "boolean",
 			"default": true
@@ -79,10 +82,7 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": [
-			"wide",
-			"full"
-		],
+		"align": [ "wide", "full" ],
 		"html": false,
 		"lightBlockWrapper": true,
 		"__experimentalColor": {

packages/block-library/src/media-text/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_MEDIA_SIZE_SLUG = 'full';

packages/block-library/src/media-text/edit.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { map, filter } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +17,7 @@ import {
 	InspectorControls,
 	__experimentalBlock as Block,
 	__experimentalImageURLInputUI as ImageURLInputUI,
+	__experimentalImageSizeControl as ImageSizeControl,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -31,6 +33,7 @@ import { pullLeft, pullRight } from '@wordpress/icons';
  * Internal dependencies
  */
 import MediaContainer from './media-container';
+import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 /**
  * Constants
@@ -55,6 +58,11 @@ const applyWidthConstraints = ( width ) =>
 const LINK_DESTINATION_MEDIA = 'media';
 const LINK_DESTINATION_ATTACHMENT = 'attachment';
 
+function getImageSourceUrlBySizeSlug( image, slug ) {
+	// eslint-disable-next-line camelcase
+	return image?.media_details?.sizes?.[ slug ]?.source_url;
+}
+
 function attributesFromMedia( {
 	attributes: { linkDestination, href },
 	setAttributes,
@@ -126,6 +134,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 		rel,
 		verticalAlignment,
 	} = attributes;
+	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
 	const image = useSelect(
 		( select ) =>
@@ -187,6 +196,30 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	const onVerticalAlignmentChange = ( alignment ) => {
 		setAttributes( { verticalAlignment: alignment } );
 	};
+
+	const imageSizes = useSelect( ( select ) => {
+		const settings = select( 'core/block-editor' ).getSettings();
+		return settings?.imageSizes;
+	} );
+	const imageSizeOptions = map(
+		filter( imageSizes, ( { slug } ) =>
+			getImageSourceUrlBySizeSlug( image, slug )
+		),
+		( { name, slug } ) => ( { value: slug, label: name } )
+	);
+	const updateImage = ( newMediaSizeSlug ) => {
+		const newUrl = getImageSourceUrlBySizeSlug( image, newMediaSizeSlug );
+
+		if ( ! newUrl ) {
+			return null;
+		}
+
+		setAttributes( {
+			mediaUrl: newUrl,
+			mediaSizeSlug: newMediaSizeSlug,
+		} );
+	};
+
 	const mediaTextGeneralSettings = (
 		<PanelBody title={ __( 'Media & Text settings' ) }>
 			<ToggleControl
@@ -236,6 +269,14 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 					}
 				/>
 			) }
+			{ mediaType === 'image' && (
+				<ImageSizeControl
+					onChangeImage={ updateImage }
+					slug={ mediaSizeSlug }
+					imageSizeOptions={ imageSizeOptions }
+					isResizable={ false }
+				/>
+			) }
 		</PanelBody>
 	);
 

packages/block-library/src/media-text/save.js

@@ -13,6 +13,7 @@ import { InnerBlocks } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { imageFillStyles } from './media-container';
+import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
 
@@ -33,17 +34,19 @@ export default function save( { attributes } ) {
 		linkTarget,
 		rel,
 	} = attributes;
+	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 	const newRel = isEmpty( rel ) ? undefined : rel;
 
+	const imageClasses = classnames( {
+		[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
+		[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
+	} );
+
 	let image = (
 		<img
 			src={ mediaUrl }
 			alt={ mediaAlt }
-			className={
-				mediaId && mediaType === 'image'
-					? `wp-image-${ mediaId }`
-					: null
-			}
+			className={ imageClasses || null }
 		/>
 	);