WordPress.org

Make WordPress Core

Opened 5 weeks ago

Last modified 4 weeks ago

#54109 new defect (bug)

Classic Editor - Image edit popup toolbar no longer appears when image has link

Reported by: ahortin Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.8
Component: TinyMCE Keywords: needs-patch has-testing-info
Focuses: Cc:

Description

After inserting an image into the Classic Editor, you can click on it and a small popup toolbar will appear with several alignment buttons and an Edit button.

Image without link, showing popup toolbar after being clicked:

https://p377.p0.n0.cdn.getcloudapp.com/items/o0uPJNdL/c547caaf-3ab0-4d26-9f4a-f413da275bbf.png

After you add a link to the image, or if you add a link while inserting the image, this popup toolbar no longer displays when clicking on the image. The popup will flash and then disappear.

Vid: https://share.getcloudapp.com/8Lu5YGzD

macOS Big Sur 11.5.2
Firefox 92.0
WP 5.8.1
TwentyTwenty
Classic Editor (No other plugins)

Change History (3)

#1 @sabernhardt
5 weeks ago

  • Component changed from Editor to TinyMCE
  • Keywords needs-patch added

Thanks for the report!

I see the same in the Classic Editor with Twenty Twenty, but not with Twenty Seventeen, Twenty Nineteen or Twenty Twenty-One. Setting the (linked) images to display:inline-block seems to help in Twenty Twenty.

With the block editor's Classic block, captioned images seem to have the same problem in any theme. Images without a caption seem to be fine.

block-library/editor.css:

.wp-block-freeform.block-library-rich-text__tinymce dl.wp-caption img {
    display: block;
}

This apparently relates to the data-mce-selected="inline-boundary" attribute. Removing a[href] from that selector list makes the image toolbar display again with both the Classic blocks and Classic Editor with Twenty Twenty. However, I am not sure we should remove the MCE attribute from all links in the editor.

\src\js\_enqueues\vendor\tinymce\tinymce.js:

return editor.getParam('inline_boundaries_selector', 'a[href],code,.mce-annotation', 'string');

This ticket was mentioned in Slack in #core-test by hellofromtonya. View the logs.


4 weeks ago

#3 @hellofromTonya
4 weeks ago

  • Keywords has-testing-info added
Note: See TracTickets for help on using tickets.