diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 34f65d690d3d7..35b05a063c299 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -159,6 +159,10 @@ figure.wp-block-image:not(.wp-block) {
}
}
+.wp-block-image__toolbar_content_textarea__container {
+ padding: $grid-unit;
+}
+
.wp-block-image__toolbar_content_textarea {
// Corresponds to the size of the textarea in the block inspector.
width: 250px;
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 89bf31f92664b..a8d6595163552 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -10,11 +10,14 @@ import {
TextControl,
ToolbarButton,
ToolbarGroup,
- Dropdown,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
__experimentalUseCustomUnits as useCustomUnits,
Placeholder,
+ MenuItem,
+ ToolbarItem,
+ DropdownMenu,
+ Popover,
} from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { useSelect, useDispatch } from '@wordpress/data';
@@ -32,10 +35,9 @@ import {
} from '@wordpress/block-editor';
import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
-import { DOWN } from '@wordpress/keycodes';
import { getFilename } from '@wordpress/url';
import { getBlockBindingsSource, switchToBlockType } from '@wordpress/blocks';
-import { crop, overlayText, upload } from '@wordpress/icons';
+import { crop, overlayText, upload, chevronDown } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
import { store as coreStore } from '@wordpress/core-data';
@@ -69,6 +71,10 @@ const scaleOptions = [
},
];
+const WRITEMODE_POPOVER_PROPS = {
+ placement: 'bottom-start',
+};
+
// If the image has a href, wrap in an tag to trigger any inherited link element styles.
const ImageWrapper = ( { href, children } ) => {
if ( ! href ) {
@@ -94,6 +100,148 @@ const ImageWrapper = ( { href, children } ) => {
);
};
+function ContentOnlyControls( {
+ attributes,
+ setAttributes,
+ lockAltControls,
+ lockAltControlsMessage,
+ lockTitleControls,
+ lockTitleControlsMessage,
+} ) {
+ // Use internal state instead of a ref to make sure that the component
+ // re-renders when the popover's anchor updates.
+ const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+ const [ isAltDialogOpen, setIsAltDialogOpen ] = useState( false );
+ const [ isTitleDialogOpen, setIsTitleDialogOpen ] = useState( false );
+ return (
+ <>
+
+ { ( toggleProps ) => (
+
+ { ( { onClose } ) => (
+ <>
+
+
+
+ ) }
+
+ ) }
+
+ { isAltDialogOpen && (
+ setIsAltDialogOpen( false ) }
+ offset={ 13 }
+ variant="toolbar"
+ >
+
+
+ setAttributes( { alt: value } )
+ }
+ disabled={ lockAltControls }
+ help={
+ lockAltControls ? (
+ <>{ lockAltControlsMessage }
+ ) : (
+ <>
+
+ { __(
+ 'Describe the purpose of the image.'
+ ) }
+
+
+ { __( 'Leave empty if decorative.' ) }
+
+ )
+ }
+ __nextHasNoMarginBottom
+ />
+
+
+ ) }
+ { isTitleDialogOpen && (
+ setIsTitleDialogOpen( false ) }
+ offset={ 13 }
+ variant="toolbar"
+ >
+
+
+ setAttributes( {
+ title: value,
+ } )
+ }
+ disabled={ lockTitleControls }
+ help={
+ lockTitleControls ? (
+ <>{ lockTitleControlsMessage }
+ ) : (
+ <>
+ { __(
+ 'Describe the role of this image on the page.'
+ ) }
+
+ { __(
+ '(Note: many devices and browsers do not display this text.)'
+ ) }
+
+
+ )
+ }
+ />
+
+
+ ) }
+
+ );
+}
+
export default function Image( {
temporaryURL,
attributes,
@@ -625,112 +773,15 @@ 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(
- 'Alternative text',
- '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
- />
- ) }
+
+
- { title && (
- (
- {
- 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.)'
- ) }
-
-
- )
- }
- />
- ) }
- />
- ) }
) }
diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
index 5fbd0e66b5fd0..6f4a592930052 100644
--- a/test/e2e/specs/editor/various/pattern-overrides.spec.js
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -1131,7 +1131,10 @@ test.describe( 'Pattern Overrides', () => {
/\/wp-content\/uploads\//
);
await editor.showBlockToolbar();
- await editor.clickBlockToolbarButton( 'Alternative text' );
+ await editor.clickBlockToolbarButton( 'More' );
+ await page
+ .getByRole( 'menuitem', { name: 'Alternative text' } )
+ .click();
await page
.getByRole( 'textbox', { name: 'alternative text' } )
.fill( 'Test Image' );