Skip to content

Commit

Permalink
Image block: remove a block editor store sub (#57232)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix authored Jan 28, 2024
1 parent 9c030aa commit 2cb8526
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 97 deletions.
27 changes: 13 additions & 14 deletions packages/block-library/src/image/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ function hasSize( image, size ) {
export function ImageEdit( {
attributes,
setAttributes,
isSelected,
isSelected: isSingleSelected,
className,
insertBlocksAfter,
onReplace,
Expand Down Expand Up @@ -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 );
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -265,7 +260,7 @@ export function ImageEdit( {
setAttributes( {
url: newURL,
id: undefined,
sizeSlug: imageDefaultSize,
sizeSlug: getSettings().imageDefaultSize,
} );
}
}
Expand All @@ -281,6 +276,10 @@ export function ImageEdit( {
const file = getBlobByURL( url );

if ( file ) {
const { mediaUpload } = getSettings();
if ( ! mediaUpload ) {
return;
}
mediaUpload( {
filesList: [ file ],
onFileChange: ( [ img ] ) => {
Expand Down Expand Up @@ -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 {};
}

Expand All @@ -352,14 +351,14 @@ export function ImageEdit( {
)?.lockAttributesEditing === true,
};
},
[ isSelected ]
[ isSingleSelected ]
);
const placeholder = ( content ) => {
return (
<Placeholder
className={ classnames( 'block-editor-media-placeholder', {
[ borderProps.className ]:
!! borderProps.className && ! isSelected,
!! borderProps.className && ! isSingleSelected,
} ) }
withIllustration={ true }
icon={ lockUrlControls ? pluginsIcon : icon }
Expand Down Expand Up @@ -400,7 +399,7 @@ export function ImageEdit( {
temporaryURL={ temporaryURL }
attributes={ attributes }
setAttributes={ setAttributes }
isSelected={ isSelected }
isSingleSelected={ isSingleSelected }
insertBlocksAfter={ insertBlocksAfter }
onReplace={ onReplace }
onSelectImage={ onSelectImage }
Expand Down
138 changes: 55 additions & 83 deletions packages/block-library/src/image/image.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export default function Image( {
temporaryURL,
attributes,
setAttributes,
isSelected,
isSingleSelected,
insertBlocksAfter,
onReplace,
onSelectImage,
Expand Down Expand Up @@ -133,57 +133,32 @@ export default function Image( {

const imageRef = useRef();
const { allowResize = true } = context;
const { getBlock } = useSelect( blockEditorStore );

const { image } = useSelect(
( select ) => {
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 ]
Expand Down Expand Up @@ -212,16 +187,15 @@ 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,
// we can enable a button in the toolbar to upload the image.
useEffect( () => {
if (
! isExternalImage( id, url ) ||
! isSelected ||
! canUploadMedia
! isSingleSelected ||
! getSettings().mediaUpload
) {
setExternalBlob();
return;
Expand All @@ -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
Expand Down Expand Up @@ -304,6 +278,10 @@ export default function Image( {
}

function uploadExternal() {
const { mediaUpload } = getSettings();
if ( ! mediaUpload ) {
return;
}
mediaUpload( {
filesList: [ externalBlob ],
onFileChange( [ img ] ) {
Expand All @@ -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(
Expand Down Expand Up @@ -418,7 +396,7 @@ export default function Image( {
lockTitleControls = false,
} = useSelect(
( select ) => {
if ( ! isSelected ) {
if ( ! isSingleSelected ) {
return {};
}

Expand All @@ -445,57 +423,53 @@ export default function Image( {
?.lockAttributesEditing === true,
};
},
[ isSelected ]
[ isSingleSelected ]
);

const controls = (
<>
<BlockControls group="block">
{ ! multiImageSelection &&
! isEditingImage &&
! lockUrlControls && (
<ImageURLInputUI
url={ href || '' }
onChangeUrl={ onSetHref }
linkDestination={ linkDestination }
mediaUrl={ ( image && image.source_url ) || url }
mediaLink={ image && image.link }
linkTarget={ linkTarget }
linkClass={ linkClass }
rel={ rel }
/>
) }
{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
<ImageURLInputUI
url={ href || '' }
onChangeUrl={ onSetHref }
linkDestination={ linkDestination }
mediaUrl={ ( image && image.source_url ) || url }
mediaLink={ image && image.link }
linkTarget={ linkTarget }
linkClass={ linkClass }
rel={ rel }
/>
) }
{ allowCrop && (
<ToolbarButton
onClick={ () => setIsEditingImage( true ) }
icon={ crop }
label={ __( 'Crop' ) }
/>
) }
{ ! multiImageSelection && canInsertCover && (
{ isSingleSelected && canInsertCover && (
<ToolbarButton
icon={ overlayText }
label={ __( 'Add text over image' ) }
onClick={ switchToCover }
/>
) }
</BlockControls>
{ ! multiImageSelection &&
! isEditingImage &&
! lockUrlControls && (
<BlockControls group="other">
<MediaReplaceFlow
mediaId={ id }
mediaURL={ url }
allowedTypes={ ALLOWED_MEDIA_TYPES }
accept="image/*"
onSelect={ onSelectImage }
onSelectURL={ onSelectURL }
onError={ onUploadError }
/>
</BlockControls>
) }
{ ! multiImageSelection && externalBlob && (
{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
<BlockControls group="other">
<MediaReplaceFlow
mediaId={ id }
mediaURL={ url }
allowedTypes={ ALLOWED_MEDIA_TYPES }
accept="image/*"
onSelect={ onSelectImage }
onSelectURL={ onSelectURL }
onError={ onUploadError }
/>
</BlockControls>
) }
{ isSingleSelected && externalBlob && (
<BlockControls>
<ToolbarGroup>
<ToolbarButton
Expand All @@ -512,7 +486,7 @@ export default function Image( {
resetAll={ resetAll }
dropdownMenuProps={ TOOLSPANEL_DROPDOWNMENU_PROPS }
>
{ ! multiImageSelection && (
{ isSingleSelected && (
<ToolsPanelItem
label={ __( 'Alternative text' ) }
isShownByDefault={ true }
Expand Down Expand Up @@ -769,7 +743,7 @@ export default function Image( {
width: currentWidth ?? 'auto',
height: currentHeight ?? 'auto',
} }
showHandle={ isSelected }
showHandle={ isSingleSelected }
minWidth={ minWidth }
maxWidth={ maxWidthBuffer }
minHeight={ minHeight }
Expand Down Expand Up @@ -818,12 +792,10 @@ export default function Image( {
<Caption
attributes={ attributes }
setAttributes={ setAttributes }
isSelected={ isSelected }
isSelected={ isSingleSelected }
insertBlocksAfter={ insertBlocksAfter }
label={ __( 'Image caption text' ) }
showToolbarButton={
! multiImageSelection && hasNonContentControls
}
showToolbarButton={ isSingleSelected && hasNonContentControls }
/>
</>
);
Expand Down

0 comments on commit 2cb8526

Please sign in to comment.