Make WordPress Core

Opened 7 years ago

Closed 6 years ago

Last modified 6 years ago

#39289 closed defect (bug) (maybelater)

TinyMCE wpview: make inserting oEmbed previews smoother

Reported by: azaozz's profile azaozz Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords: needs-patch ux-feedback
Focuses: Cc:


Currently when an "embeddable" URL is pasted in the editor, we make a request to the server asking if the URL is embeddable, then the server makes a request to the oEmbed provider to get the actual HTML, catches it and sends it as reply to the initial request.

This usually takes several seconds, sometimes even more than 10. During that time in the editor we display the URL that was originally pasted.

When the response arrives we insert a new wpview. In many cases that wpview contains an iframe that only then starts to load, extending the whole process even more. While the iframe document is loading we keep resizing the iframe to match the height.

All of this is pretty "jumpy", with one "big jump" when the URL is replaced with the wpview, and possibly several smaller jumps while the iframe is loading.

All that "jumpiness" is not a good UX. We can try to detect when an URL is "embeddable" right after it is pasted, then insert some sort of a placeholder with similar dimensions while waiting for the embed HTML, so the users can continue typing.

Change History (7)

#1 @iseulde
7 years ago

  • Keywords ux-feedback needs-patch added

We talked a bit before about this and it seems the best way to do it is by adding JS regex, types, and maybe ratios/dimensions to the settings array, so we know immediately whether a URL is is embeddable or not (we don't want to show a placeholder for a URL if not) and we know what kind of placeholder to display. I think working with types could be interesting. With that information we could show a different type of placeholder for each type which can each have a default dimension. Maybe we can add the ratios/dimensions setting for more fine grained control.

Another benefit of adding types is that it might be useful for UI to list the embed options. For this is, and maybe for better error messages as well, it could be useful to add the name of the service to the settings array as well. Cc @joen.

Having both PHP and JS regex in the settings array is a bit weird, so I wonder if there's any way we can merge these two, especially since the regex are meant to be simple.

#2 @Travel_girl
7 years ago

I think it is a good idea, to show a placeholder, while the Media get embedded. I´m not quite sure if we should offer more settings, because it could become quite complex and complicated for the users.

This ticket was mentioned in Slack in #core by obenland. View the logs.

6 years ago

#4 @obenland
6 years ago

  • Milestone changed from 4.8 to Future Release

This ticket was mentioned in Slack in #design by karmatosed. View the logs.

6 years ago

#6 @mizejewski
6 years ago

  • Keywords changed from ux-feedback needs-patch to needs-patch ux-feedback
  • Resolution set to maybelater
  • Status changed from new to closed

Looks like this is currently being handled better in Gutenberg.

#7 @ocean90
6 years ago

  • Milestone Future Release deleted
Note: See TracTickets for help on using tickets.