[Embed block] Detect when an embeddable URL is pasted into an empty paragraph

[ceyhun]

Description

• Detect when an embeddable URL is pasted into an empty paragraph (including a paragraph inside a Media & Text block)
• Trigger a bottom sheet to open when a paste is detected (bottom sheet functions will be implemented in another issue)
• Should not to trigger when pasting in the middle of a text

Screenshot

[jd-alexander]

Hi @fluiddot So I started working on this task. I haven't created a PR as yet but so far this is where my exploration has led me.

Web

On the web, it seems that embeddable URLs are detected within the Paragraph blocks via the RichText component and then converted to an Embed block. The mechanisms for this detection are as follows:

1. The RichText component is passed a prop of __unstableEmbedURLOnPaste .

2. Internally, the RichText component utilizes a PasteHandler
   that sanitizes the input and decides how the handler should go about transforming the content. In this case, the content should be transformed into an Embed block.

3. I can see where onReplace is called with content generated from the PasteHandler. However, I wasn't able to replicate the functionality from a debugging standpoint because when I spun up a test instance of Gutenberg, I was getting a version of the script that was minified so I wasn't able to step through with the debugger to follow the path to block creation.

SCRIPT_DEBUG is set to true within the instance but I still was getting minified content. Let me know if you have been able to successfully traverse the Gutenberg sources when deployed via wp-env start.

Mobile

1. The Paragraph and RichText blocks behave similarly to the web. The main caveat here is the RichText component on mobile, went on a different path after being separated from the web version so the usage of the PasteHandler differs. What I noticed was when a URL was pasted the content was just being set within the paragraph block but no Embed block was being created even though __unstableEmbedURLOnPaste was being added as a prop below this prop.

2. Is it that I need to utilize some form of transforms mechanism to get this working as expected?

3. Also from an implementation standpoint, I am realizing that our implementation differs from the web because we show a bottomsheet when we detect a URL. Therefore, I was wondering if we would need to create some form of interceptor logic within the onPaste function that would provide a mechanism for us to create the bottom sheet. From a responsibility standpoint, should the RichText component displays such a bottom sheet here? I was wondering if it would be best to pass in a prop that can be implemented in the Paragraph block to encapsulate the functionality there.

4. To expound more on the bottom sheet, I was thinking to replicate the bottom sheet functionality utilized in the EmbedPlaceholder and utilize methods from the utils for the Create embed and Create link.

5. Create embed would work via some transforms.js mechanism or an Embed block could be created and passed to the onReplace function.

6. Create link could leverage the fallback function that is within the utils file.

---

Let me know if you have any thoughts here. I will be thinking through these ideas more to come up with a solution. Thanks for the help!

[fluiddot]

Let me know if you have been able to successfully traverse the Gutenberg sources when deployed via wp-env start.

I couldn't follow the trace once the execution reaches this point and calls pasteHandler 😞 .

What I noticed was when a URL was pasted the content was just being set within the paragraph block but no Embed block was being created even though __unstableEmbedURLOnPaste was being added as a prop below this prop.

From what I see in the pasteHandler logic, I think the magic happens in the shortcodeConverter that relies on the block transformations, so most likely transformations are somehow related to the issue.

I recall that we disabled some transformation in the native version of the embed block (PR reference), I'd investigate what changes were made because it's probably related.

[jd-alexander]

Let me know if you have been able to successfully traverse the Gutenberg sources when deployed via wp-env start.

I couldn't follow the trace once the execution reaches this point and calls pasteHandler 😞 .

What I noticed was when a URL was pasted the content was just being set within the paragraph block but no Embed block was being created even though __unstableEmbedURLOnPaste was being added as a prop below this prop.

From what I see in the pasteHandler logic, I think the magic happens in the shortcodeConverter that relies on the block transformations, so most likely transformations are somehow related to the issue.

I recall that we disabled some transformation in the native version of the embed block (PR reference), I'd investigate what changes were made because it's probably related.

Thanks for these thoughts @fluiddot they were very helpful in filling the gaps in what I had encountered during my exploration. I have a WIP PR here WordPress/gutenberg#35204 I will be cross-referencing this comment for behavior verification and alignment.