From 2cb8526791da837d6e17fb2c93bf3d8ba7801e39 Mon Sep 17 00:00:00 2001 From: Ella <4710635+ellatrix@users.noreply.github.com> Date: Sun, 28 Jan 2024 20:54:28 +0200 Subject: [PATCH] Image block: remove a block editor store sub (#57232) --- packages/block-library/src/image/edit.js | 27 ++--- packages/block-library/src/image/image.js | 138 +++++++++------------- 2 files changed, 68 insertions(+), 97 deletions(-) diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 3fed0819251e6..75db08a9ed48f 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -94,7 +94,7 @@ function hasSize( image, size ) { export function ImageEdit( { attributes, setAttributes, - isSelected, + isSelected: isSingleSelected, className, insertBlocksAfter, onReplace, @@ -142,14 +142,7 @@ export function ImageEdit( { }, [ align ] ); const ref = useRef(); - const { imageDefaultSize, mediaUpload } = useSelect( ( select ) => { - const { getSettings } = select( blockEditorStore ); - const settings = getSettings(); - return { - imageDefaultSize: settings.imageDefaultSize, - mediaUpload: settings.mediaUpload, - }; - }, [] ); + const { getSettings } = useSelect( blockEditorStore ); const blockEditingMode = useBlockEditingMode(); const { createErrorNotice } = useDispatch( noticesStore ); @@ -183,6 +176,8 @@ export function ImageEdit( { setTemporaryURL(); + const { imageDefaultSize } = getSettings(); + // Try to use the previous selected image size if its available // otherwise try the default image size or fallback to "full" let newSize = 'full'; @@ -265,7 +260,7 @@ export function ImageEdit( { setAttributes( { url: newURL, id: undefined, - sizeSlug: imageDefaultSize, + sizeSlug: getSettings().imageDefaultSize, } ); } } @@ -281,6 +276,10 @@ export function ImageEdit( { const file = getBlobByURL( url ); if ( file ) { + const { mediaUpload } = getSettings(); + if ( ! mediaUpload ) { + return; + } mediaUpload( { filesList: [ file ], onFileChange: ( [ img ] ) => { @@ -336,7 +335,7 @@ export function ImageEdit( { // Much of this description is duplicated from MediaPlaceholder. const { lockUrlControls = false } = useSelect( ( select ) => { - if ( ! isSelected ) { + if ( ! isSingleSelected ) { return {}; } @@ -352,14 +351,14 @@ export function ImageEdit( { )?.lockAttributesEditing === true, }; }, - [ isSelected ] + [ isSingleSelected ] ); const placeholder = ( content ) => { return ( { - const { getMedia } = select( coreStore ); - return { - image: - id && isSelected - ? getMedia( id, { context: 'view' } ) - : null, - }; - }, - [ id, isSelected ] + const { getBlock, getSettings } = useSelect( blockEditorStore ); + + const image = useSelect( + ( select ) => + id && isSingleSelected + ? select( coreStore ).getMedia( id, { context: 'view' } ) + : null, + [ id, isSingleSelected ] ); - const { - canInsertCover, - imageEditing, - imageSizes, - maxWidth, - mediaUpload, - multiImageSelection, - } = useSelect( + const { canInsertCover, imageEditing, imageSizes, maxWidth } = useSelect( ( select ) => { - const { - getBlockRootClientId, - getMultiSelectedBlockClientIds, - getBlockName, - getSettings, - canInsertBlockType, - } = select( blockEditorStore ); + const { getBlockRootClientId, canInsertBlockType } = + select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); const settings = getSettings(); - const multiSelectedClientIds = getMultiSelectedBlockClientIds(); return { imageEditing: settings.imageEditing, imageSizes: settings.imageSizes, maxWidth: settings.maxWidth, - mediaUpload: settings.mediaUpload, canInsertCover: canInsertBlockType( 'core/cover', rootClientId ), - multiImageSelection: - multiSelectedClientIds.length && - multiSelectedClientIds.every( - ( _clientId ) => - getBlockName( _clientId ) === 'core/image' - ), }; }, [ clientId ] @@ -212,7 +187,6 @@ export default function Image( { ( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url ) .map( ( { name, slug } ) => ( { value: slug, label: name } ) ); - const canUploadMedia = !! mediaUpload; // If an image is externally hosted, try to fetch the image data. This may // fail if the image host doesn't allow CORS with the domain. If it works, @@ -220,8 +194,8 @@ export default function Image( { useEffect( () => { if ( ! isExternalImage( id, url ) || - ! isSelected || - ! canUploadMedia + ! isSingleSelected || + ! getSettings().mediaUpload ) { setExternalBlob(); return; @@ -236,7 +210,7 @@ export default function Image( { .then( ( blob ) => setExternalBlob( blob ) ) // Do nothing, cannot upload. .catch( () => {} ); - }, [ id, url, isSelected, externalBlob, canUploadMedia ] ); + }, [ id, url, isSingleSelected, externalBlob ] ); // Get naturalWidth and naturalHeight from image ref, and fall back to loaded natural // width and height. This resolves an issue in Safari where the loaded natural @@ -304,6 +278,10 @@ export default function Image( { } function uploadExternal() { + const { mediaUpload } = getSettings(); + if ( ! mediaUpload ) { + return; + } mediaUpload( { filesList: [ externalBlob ], onFileChange( [ img ] ) { @@ -326,13 +304,13 @@ export default function Image( { } useEffect( () => { - if ( ! isSelected ) { + if ( ! isSingleSelected ) { setIsEditingImage( false ); } - }, [ isSelected ] ); + }, [ isSingleSelected ] ); const canEditImage = id && naturalWidth && naturalHeight && imageEditing; - const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage; + const allowCrop = isSingleSelected && canEditImage && ! isEditingImage; function switchToCover() { replaceBlocks( @@ -418,7 +396,7 @@ export default function Image( { lockTitleControls = false, } = useSelect( ( select ) => { - if ( ! isSelected ) { + if ( ! isSingleSelected ) { return {}; } @@ -445,26 +423,24 @@ export default function Image( { ?.lockAttributesEditing === true, }; }, - [ isSelected ] + [ isSingleSelected ] ); const controls = ( <> - { ! multiImageSelection && - ! isEditingImage && - ! lockUrlControls && ( - - ) } + { isSingleSelected && ! isEditingImage && ! lockUrlControls && ( + + ) } { allowCrop && ( setIsEditingImage( true ) } @@ -472,7 +448,7 @@ export default function Image( { label={ __( 'Crop' ) } /> ) } - { ! multiImageSelection && canInsertCover && ( + { isSingleSelected && canInsertCover && ( ) } - { ! multiImageSelection && - ! isEditingImage && - ! lockUrlControls && ( - - - - ) } - { ! multiImageSelection && externalBlob && ( + { isSingleSelected && ! isEditingImage && ! lockUrlControls && ( + + + + ) } + { isSingleSelected && externalBlob && ( - { ! multiImageSelection && ( + { isSingleSelected && ( );