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 && ( - ) }