Skip to content

Commit 3301b81

Browse files
ellatrixmegane9988ramonjdkarthikeya-ioMamaduka
authored
Rich text: Select an inline image by clicking it, and show the edit UI of the object clicked (#83370)
Co-authored-by: ellatrix <ellatrix@git.wordpress.org> Co-authored-by: megane9988 <megane9988@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: karthikeya-io <karthikeya01@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org>
1 parent 8c91b42 commit 3301b81

5 files changed

Lines changed: 50 additions & 10 deletions

File tree

‎packages/block-editor/CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323

2424
### Bug Fixes
2525

26+
- 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)).
27+
- `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)).
2628
- `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)).
2729
- `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)).
2830
- 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))

‎packages/block-editor/src/components/block-draggable/content.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,3 @@
1818
content: none !important;
1919
}
2020
}
21-
22-
// Images are draggable by default, so disable drag for them if not explicitly
23-
// set. This is done so that the block can capture the drag event instead.
24-
.wp-block img:not([draggable]),
25-
.wp-block svg:not([draggable]) {
26-
pointer-events: none;
27-
}

‎packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,19 @@ export function useEventHandlers( { clientId, isSelected } ) {
8383
* @param {DragEvent} event Drag event.
8484
*/
8585
function onDragStart( event ) {
86+
const { target } = event;
87+
// The drag may start on an image, which is draggable by
88+
// default: it is the block's drag as long as no nested
89+
// draggable, such as an inner block, is closer to the source.
90+
// The data and the drag image set below replace the image's.
91+
// A selection drag, whose source Firefox reports as the text
92+
// node, is not the block's.
8693
if (
87-
node !== event.target ||
8894
node.isContentEditable ||
8995
node.ownerDocument.activeElement !== node ||
90-
hasMultiSelection()
96+
hasMultiSelection() ||
97+
target.nodeType !== target.ELEMENT_NODE ||
98+
target.closest( '[draggable="true"]' ) !== node
9199
) {
92100
event.preventDefault();
93101
return;

‎packages/block-editor/src/components/rich-text/format-edit.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,10 @@ function Edit( {
4545

4646
return (
4747
<EditFunction
48-
key={ name }
48+
// A different active object is a different edit: the UI of an
49+
// object starts from its attributes and its position, and the
50+
// selection can move from one object straight to another.
51+
key={ isObjectActive ? `${ name }-${ value.start }` : name }
4952
isActive={ isActive }
5053
isVisible={ isVisible }
5154
activeAttributes={ isActive ? activeFormat.attributes || {} : {} }

‎test/e2e/specs/editor/various/adding-inline-tokens.spec.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,4 +73,38 @@ test.describe( 'adding inline tokens', () => {
7373
},
7474
] );
7575
} );
76+
77+
test( 'should select an inline image by clicking it @webkit @firefox', async ( {
78+
page,
79+
editor,
80+
requestUtils,
81+
} ) => {
82+
const { source_url: src } = await requestUtils.uploadMedia(
83+
'./assets/10x10_e2e_test_image_z9T8jK.png'
84+
);
85+
// Two images of different widths, so the popover shows which one is
86+
// selected.
87+
const image = ( width ) =>
88+
`<img class="wp-image-1" style="width: ${ width }px;" src="${ src }" alt="">`;
89+
await editor.insertBlock( {
90+
name: 'core/paragraph',
91+
attributes: { content: `a ${ image( 10 ) } b ${ image( 20 ) } c` },
92+
} );
93+
94+
const images = editor.canvas.locator( 'img' );
95+
const width = page.getByRole( 'spinbutton', { name: 'Width' } );
96+
97+
// A click on the image selects it and opens its popover.
98+
await images.first().click();
99+
await expect( width ).toHaveValue( '10' );
100+
101+
// A click on another image moves the selection and the popover to
102+
// it, without going through the text in between.
103+
await images.last().click();
104+
await expect( width ).toHaveValue( '20' );
105+
await expect( width ).toBeInViewport();
106+
107+
await images.first().click();
108+
await expect( width ).toHaveValue( '10' );
109+
} );
76110
} );

0 commit comments

Comments
 (0)