ellatrix · Sep 22, 2026 · Sep 22, 2026 · Sep 22, 2026 · Sep 22, 2026 · Sep 22, 2026
@@ -22,6 +22,8 @@
 
 ### Bug Fixes
 
+-   Inline images in rich text are selected by clicking them again. A block captures a drag that starts on its own image through the `dragstart` target instead of the `pointer-events: none` rule that also kept the image from any click ([#83370](https://github.com/WordPress/gutenberg/pull/83370)).
+-   `RichText`: The edit UI of a format follows the active object when the selection moves from one object straight to another, for example from one inline image to the next, so the popover shows the attributes of that object at its position ([#83370](https://github.com/WordPress/gutenberg/pull/83370)).
 -   `LinkControl`: Only label pages as the front page or blog home. Posts, terms and media are separate tables and can share an id, so an unscoped search could label a term "Front page" ([#83082](https://github.com/WordPress/gutenberg/pull/83082)).
 -   `InnerBlocks`: Resolve a container's legacy layout markup (`inherit: true`, or a bare `contentSize` / `wideSize` with no `type`) to a constrained layout for its inner blocks, so they are offered the wide and full alignments. Previously only the container's styles honoured the legacy form, and the inner blocks resolved to the flow layout ([#82637](https://github.com/WordPress/gutenberg/pull/82637)).
 -   Block Patterns, Block Visibility, and Block Lock: Preserve the intended colors of icons converted to strokes. ([#82540](https://github.com/WordPress/gutenberg/pull/82540), [#82754](https://github.com/WordPress/gutenberg/pull/82754))

@@ -18,10 +18,3 @@
 		content: none !important;
 	}
 }
-
-// Images are draggable by default, so disable drag for them if not explicitly
-// set. This is done so that the block can capture the drag event instead.
-.wp-block img:not([draggable]),
-.wp-block svg:not([draggable]) {
-	pointer-events: none;
-}
@@ -83,11 +83,19 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			 * @param {DragEvent} event Drag event.
 			 */
 			function onDragStart( event ) {
+				const { target } = event;
+				// The drag may start on an image, which is draggable by
+				// default: it is the block's drag as long as no nested
+				// draggable, such as an inner block, is closer to the source.
+				// The data and the drag image set below replace the image's.
+				// A selection drag, whose source Firefox reports as the text
+				// node, is not the block's.
 				if (
-					node !== event.target ||
 					node.isContentEditable ||
 					node.ownerDocument.activeElement !== node ||
-					hasMultiSelection()
+					hasMultiSelection() ||
+					target.nodeType !== target.ELEMENT_NODE ||
+					target.closest( '[draggable="true"]' ) !== node
 				) {
 					event.preventDefault();
 					return;

@@ -45,7 +45,10 @@ function Edit( {
 
 	return (
 		<EditFunction
-			key={ name }
+			// A different active object is a different edit: the UI of an
+			// object starts from its attributes and its position, and the
+			// selection can move from one object straight to another.
+			key={ isObjectActive ? `${ name }-${ value.start }` : name }
 			isActive={ isActive }
 			isVisible={ isVisible }
 			activeAttributes={ isActive ? activeFormat.attributes || {} : {} }

diff --git a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js
@@ -73,4 +73,38 @@ test.describe( 'adding inline tokens', () => {
 			},
 		] );
 	} );
+
+	test( 'should select an inline image by clicking it @webkit @firefox', async ( {
+		page,
+		editor,
+		requestUtils,
+	} ) => {
+		const { source_url: src } = await requestUtils.uploadMedia(
+			'./assets/10x10_e2e_test_image_z9T8jK.png'
+		);
+		// Two images of different widths, so the popover shows which one is
+		// selected.
+		const image = ( width ) =>
+			`<img class="wp-image-1" style="width: ${ width }px;" src="${ src }" alt="">`;
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: `a ${ image( 10 ) } b ${ image( 20 ) } c` },
+		} );
+
+		const images = editor.canvas.locator( 'img' );
+		const width = page.getByRole( 'spinbutton', { name: 'Width' } );
+
+		// A click on the image selects it and opens its popover.
+		await images.first().click();
+		await expect( width ).toHaveValue( '10' );
+
+		// A click on another image moves the selection and the popover to
+		// it, without going through the text in between.
+		await images.last().click();
+		await expect( width ).toHaveValue( '20' );
+		await expect( width ).toBeInViewport();
+
+		await images.first().click();
+		await expect( width ).toHaveValue( '10' );
+	} );
 } );