diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index 57f51f004d8b6..6da25dd483a59 100644
--- 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 (
+
+ );
+}
+
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',
@@ -175,6 +201,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
: '';
@@ -199,22 +239,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;
@@ -262,10 +286,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 +431,9 @@ function MediaTextEdit( {
) }
{ mediaType === 'image' && ! useFeaturedImage && (
-
) }