WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 3 years ago

#35434 closed defect (bug) (fixed)

Copy-paste image with srcset makes replace-image features break

Reported by: programmin Owned by: joemcgill
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.4.1
Component: Editor Keywords:
Focuses: ui, javascript Cc:
PR Number:

Description

1) Go to a page with some large responsive image, select around it and copy

2) Paste into TinyMCE editor, image looks fine (but has srcset!).

3) Click the image edit button, click replace button and choose another image.

For this, and other cases where a plugin or feature changes the src of an image tag, it doesn't actually visibly change it because of the leftover srcset most browsers look at. I thought srcset was disallowed in editor and database since the theme and plugin should be able to filter the final behavior when the_content is rendered. Seems this should be enforced on paste at least.

Change History (8)

#1 @samuelsidler
4 years ago

When I follow your steps, I get to step 3 and I don't have a replace button. Is that from a plugin or am I following the steps wrong? (I definitely see srcset in the Text editor after Step 2 though.)

#2 follow-up: @joemcgill
4 years ago

  • Owner set to joemcgill
  • Status changed from new to reviewing

Hi @programmin,

We generally respect user added content as long as it's not insecure. So if a user adds HTML for an image in the editor that includes a srcset, we chose to leave it alone and make sure the internal srcset functions don't overwrite what the user added.

However, that doesn't address your concern, which is that replacing the image in the editor should also update (or remove) any previous srcset and sizes attributes. Is that correct?

#3 @programmin
4 years ago

Yes, it should be noted that even pasting from your own page on your blog (view mode, with wp generated srcset) will break the editor's replace functionality. There are other applications other than this replacer that expect image to change when you modify it with src=.

#4 in reply to: ↑ 2 @azaozz
4 years ago

  • Milestone changed from Awaiting Review to 4.5

Replying to joemcgill:

...replacing the image in the editor should also update (or remove) any previous srcset and sizes attributes.

Right. The problem is that after replacing the image, the srcset still points to the old image and the browsers use it over the src.

The correct fix is to remove both srcset and sizes for now. If the next step is to insert images in the editor with these attributes, this should work right.

#5 @azaozz
4 years ago

In 36376:

TinyMCE: remove the srcset and sizes attributes (if any) after replacing or editing an image.

See #35434.

#6 @azaozz
4 years ago

An alternative to [36376] would be to always remove srcset and sizes on editing an image in the media modal. Leaving this open to decide if that is better.

#7 @joemcgill
4 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

Thanks @azaozz,

Generally, I would lean toward scrubbing srcset and sizes from the editor any time the image is edited, but I don't see much harm in leaving them if someone is simply changing sizes. We may need to revisit this if we want to show responsive images in the editor.

This ticket was mentioned in Slack in #core-images by joemcgill. View the logs.


3 years ago

Note: See TracTickets for help on using tickets.