Add block to extract embeds from post content in query loops

[artemiomorales]

What

When using region-based client side navigation in query loops, we are prohibited from using the post content block in post templates (see video below).

However, this block allows us to partly circumvent that limitation. One of the designs on the Mike Flanagan site requires displaying an embed from the post content inside of the query loop on an archive page — and this PR allows us to do that without rendering the post content directly.

Why

Video archive pages should have a way to render videos in a query loop while using client side navigation.

How

This dynamic block reads the embed information from post content while generating the markup for an embed block in the render_callback method, both on the frontend and in the editor. To do this, it borrows heavily from the core/embed block.

How to Test

1. Post Setup

a. Create a post. b. Add a YouTube embed. c. Add some additional content. d. Save the post.

2. Extract Embed from Post

a. In the Site Editor, add or use a query loop that will query the post from step 1. Make sure the post template does not contain a content block. b. Inside of the query loop's post template, add the Client Side Extract Embed block. c. See that the YouTube embed from the post content renders. d. Save and view the template — ensure that only the YouTube embed shows and not the rest of the post's content.

Walkthrough video

https://cldup.com/AzVIYLnhzH.mp4

[artemiomorales]

What's Missing

The major to dos on this block include:

• Adding support for more embeds. Right now, it only covers our use case on the Mike Flanagan website, namely embedding YouTube videos. For this block to be complete, it should support generating embed markup of of all kinds.
• The editor experience also needs to be improved. Right now the iframe for YouTube videos renders with some overflow and scrollbars, which doesn't reflect how it appears when the frontend when the post is viewed: