diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 6e8cb32daff44e..39a3fe4d93a0e6 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -300,9 +300,20 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => { // Do not add new properties here, use `useDispatch` instead to avoid // leaking new props to the public API (editor.BlockListBlock filter). return { - setAttributes( newAttributes ) { + setAttributes( newAttributes, options = {} ) { const { clientId } = ownProps; - updateBlockAttributes( clientId, newAttributes ); + + if ( options.silent ) { + const attributes = window.wp.data + .select( 'core/block-editor' ) + .getBlockAttributes( clientId ); + + for ( const name in newAttributes ) { + attributes[ name ] = newAttributes[ name ]; + } + } else { + updateBlockAttributes( clientId, newAttributes ); + } }, onInsertBlocks( blocks, index ) { const { rootClientId } = ownProps; diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 621d3233100276..320002267331e2 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -12,7 +12,6 @@ import { ExternalLink, PanelBody, ResizableBox, - Spinner, TextareaControl, TextControl, ToolbarGroup, @@ -166,6 +165,9 @@ export function ImageEdit( { return; } + onSelectImage.count++; + + const options = {}; let mediaAttributes = pickRelevantMediaFiles( media ); // If the current image is temporary but an alt text was meanwhile @@ -208,12 +210,21 @@ export function ImageEdit( { mediaAttributes.href = media.link; } - setAttributes( { - ...mediaAttributes, - ...additionalAttributes, - } ); + if ( onSelectImage.count > 1 ) { + options.silent = true; + } + + setAttributes( + { + ...mediaAttributes, + ...additionalAttributes, + }, + options + ); } + onSelectImage.count = 0; + function onSelectURL( newURL ) { if ( newURL !== url ) { setAttributes( { @@ -414,7 +425,6 @@ export function ImageEdit( { } const classes = classnames( className, { - 'is-transient': isBlobURL( url ), 'is-resized': !! width || !! height, 'is-focused': isSelected, [ `size-${ sizeSlug }` ]: sizeSlug, @@ -506,7 +516,6 @@ export function ImageEdit( { onClick={ onImageClick } onError={ () => onImageError() } /> - { isBlobURL( url ) && } /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ ); diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index e06a4a62eb2d46..c04963606fd3fe 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -5,22 +5,9 @@ figure.wp-block-image:not(.wp-block) { .wp-block-image { position: relative; - &.is-transient img { - opacity: 0.3; - } - figcaption img { display: inline; } - - // Shown while image is being uploaded - .components-spinner { - position: absolute; - top: 50%; - left: 50%; - margin-top: -9px; - margin-left: -9px; - } } // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.