diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 646299bb7e0892..0f5d75d02df3af 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -552,6 +552,22 @@ export default function Image( {
const showBlockControls = showUrlInput || allowCrop || showCoverControls;
+ const ReplaceMediaToolbarItem = () => (
+
+
+
+ );
+
const controls = (
<>
{ showBlockControls && (
@@ -588,23 +604,14 @@ export default function Image( {
) }
) }
- { isSingleSelected && ! isEditingImage && ! lockUrlControls && (
-
-
-
-
-
- ) }
+ { isSingleSelected &&
+ ! isEditingImage &&
+ ! lockUrlControls &&
+ ! isContentOnlyMode && (
+
+
+
+ ) }
{ isSingleSelected && externalBlob && (
@@ -620,108 +627,129 @@ export default function Image( {
// Add some extra controls for content attributes when content only mode is active.
// With content only mode active, the inspector is hidden, so users need another way
// to edit these attributes.
-
- (
- {
- if ( ! isOpen && event.keyCode === DOWN ) {
- event.preventDefault();
- onToggle();
- }
- } }
- >
- { _x(
- 'Alt',
- 'Alternative text for an image. Block toolbar label, a low character count is preferred.'
- ) }
-
+ <>
+ { isSingleSelected &&
+ ! isEditingImage &&
+ ! lockUrlControls && (
+ // Put Replace in its own area so it has borders around it.
+
+
+
) }
- renderContent={ () => (
- { lockAltControlsMessage }>
- ) : (
- <>
-
- { __(
- 'Describe the purpose of the image.'
- ) }
-
-
- { __(
- 'Leave empty if decorative.'
- ) }
- >
- )
- }
- __nextHasNoMarginBottom
+
+
+
+ (
+ {
+ if (
+ ! isOpen &&
+ event.keyCode === DOWN
+ ) {
+ event.preventDefault();
+ onToggle();
+ }
+ } }
+ >
+ { _x(
+ 'Alt',
+ 'Alternative text for an image. Block toolbar label, a low character count is preferred.'
+ ) }
+
+ ) }
+ renderContent={ () => (
+ { lockAltControlsMessage }>
+ ) : (
+ <>
+
+ { __(
+ 'Describe the purpose of the image.'
+ ) }
+
+
+ { __(
+ 'Leave empty if decorative.'
+ ) }
+ >
+ )
+ }
+ __nextHasNoMarginBottom
+ />
+ ) }
/>
- ) }
- />
- (
- {
- if ( ! isOpen && event.keyCode === DOWN ) {
- event.preventDefault();
- onToggle();
- }
- } }
- >
- { __( 'Title' ) }
-
- ) }
- renderContent={ () => (
- { lockTitleControlsMessage }>
- ) : (
- <>
- { __(
- 'Describe the role of this image on the page.'
- ) }
-
- { __(
- '(Note: many devices and browsers do not display this text.)'
- ) }
-
- >
- )
- }
+ (
+ {
+ if (
+ ! isOpen &&
+ event.keyCode === DOWN
+ ) {
+ event.preventDefault();
+ onToggle();
+ }
+ } }
+ >
+ { __( 'Title' ) }
+
+ ) }
+ renderContent={ () => (
+
+ { lockTitleControlsMessage }
+ >
+ ) : (
+ <>
+ { __(
+ 'Describe the role of this image on the page.'
+ ) }
+
+ { __(
+ '(Note: many devices and browsers do not display this text.)'
+ ) }
+
+ >
+ )
+ }
+ />
+ ) }
/>
- ) }
- />
-
+
+
+ >
) }