oEmbeds don't work if text is formatted

[siobhan]

I was teaching a class on WordPress a few weeks ago and I showed the students how to use oEmbeds. A number of the students were frustrated because they couldn't get their oEmbeds to work. When I went to help them out we realised it was because they were pasting it into the text in a place where formatting what applied. IF an oEmbed link is wrapped in a <strong> tag, for example, it doesn't parse. This can be very confusing to users.

Example:

Back end

Front end

[danielbachhuber]

oEmbed is tough because the links essentially have to be perfectly formatted for it to work.

Idea: When TinyMCE thinks it could be an embed, but isn't sure, we could have a little tooltip that says "did you mean to embed this?"

[siobhan]

Replying to danielbachhuber:

oEmbed is tough because the links essentially have to be perfectly formatted for it to work.

The problem is that users don't know that they have to be perfectly formatted, so they think that there's something wrong with WordPress.

Idea: When TinyMCE thinks it could be an embed, but isn't sure, we could have a little tooltip that says "did you mean to embed this?"

Something like that could work - at least a way to alert the user that they're doing something wrong and that they should correct it.

[helen]

Sometimes I think we'd be better off being more liberal about oEmbeds, letting them display if they're within other formatting and then providing a way to not show that embed if desired (which would wrap it in a span with a special class or something).

[SergeyBiryukov]

Related: #30847

[danielbachhuber]

If we want to make some changes, I'd be happy to test against our users and see where / when they complain.

@siobhan have something specific to suggest ?

[siobhan]

Replying to danielbachhuber:

If we want to make some changes, I'd be happy to test against our users and see where / when they complain.

@siobhan have something specific to suggest ?

As Helen said, I think it would be good to be more liberal with oEmbeds. Users don't know about any coding issues related to displaying embeds within formatted text. They just want to dump a video in the middle of a paragraph that's edited bold.

@danielbachhuber - it'd be interesting to see how users react to such a change. I'm not sure if they would even notice - it's more of a measure to prevent frustration rather than being an enhancement.

[helen]

Related: #25387

I could see this potentially working: if all you're left with is a URL after stripping all tags from the paste, strip those tags and turn it into an oEmbed. Provide some kind of button or other UI for "don't embed this URL" (I think this might be the tricky part), which would then wrap in an element or perhaps restore the original paste.

[DrewAPicture]

If we're still planning to try and fix this issue in 4.2, we're going to need a patch in the next few days. Otherwise, please mark it for future release.

[azaozz]

In 31817:

TinyMCE: strip tags from pasted URLs before testing if they are embeddable.
Props siobhan, iseulde. Fixes #31158.

[azaozz]

In 31819:

TinyMCE: small cleanup for stripping of tags from pasted URLs. See #31158.

[azaozz]

@wonderboymusic not sure what is broken, embeds seem to work here.

Just in case going to revert the changes and add cleanup for the pasted URL only. Will look again after beta2.

[azaozz]

In 31832:

TinyMCE: revert stripping of tags from pasted URLs on beforeSetContent [31817] and [31819]. Clean up URLs on pastePreProcess.
See #31158.

[wonderboymusic]

[31832] fixed everything

[iseulde]

@siobhan: Is the problem pasting a url that already has some formatting from somewhere else, or pasting the url in an empty paragraph but already bold/... Or both? In other words is the pasted link bold, or is the paragraph before you paste bold?

[azaozz]

In 31158.4.patch:

• Improve the test if the paragraph doesn't contain text.
• Strip all inline tags before adding the URL (that is eventually converted to wpView).

Seems to work well in all major browsers. Will catch cases where the users have made a new paragraph, then clicked on the B or I buttons, etc.

One "side effect": when pasting an URL that is not embeddable and was copied from another web page, and was bold or italic, it is converted to plain text, the bold/italic is removed. As that is very rare, thinking it shouldn't prevent this fix.

[azaozz]

In 31856:

TinyMCE: when pasting an URL, check if the node it is pasted at is empty and remove any empty inline child elements.
Fixes #31158.