Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add block to extract embeds from post content in query loops #26

Open
wants to merge 9 commits into
base: trunk
Choose a base branch
from

Conversation

artemiomorales
Copy link
Collaborator

@artemiomorales artemiomorales commented Aug 12, 2024

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 artemiomorales changed the title Add block to support extracting embeds from post content in query loops Add block to extract embeds from post content in query loops Aug 13, 2024
@artemiomorales
Copy link
Collaborator Author

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:
Screenshot 2024-08-13 at 5 18 13 AM

@artemiomorales artemiomorales marked this pull request as ready for review August 20, 2024 04:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants