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

Experiment: Auto-inserting block patterns on the frontend #51294

Closed
wants to merge 31 commits into from

Conversation

ockham
Copy link
Contributor

@ockham ockham commented Jun 7, 2023

What?

Spun off from #50103, this PR explores auto-inserting block patterns (rather than just blocks).

Why?

For the rationale of why block patterns might be better suited for auto-insertion, see #50103 (comment). For general auto-inserting concepts, see #39439.

How?

Much like #50103, we use:

  • the render_block hook to auto-insert a block pattern before or after a given "anchor" block, and
  • the render_block_data hook (which -- unlike the render_block hook -- conveniently gives us access to a given block's children) to auto-insert a block pattern as an anchor block's first or last child.

In both filters, we iterate over all registered block patterns to find any that specify the current block as their "anchor" block.

To illustrate both concepts, we add:

  • one block pattern featuring the Social Icon block that we insert after the Post Content block, and
  • one block pattern featuring the Avatar block that we insert as the Comment Template block's last child.

The latter example is chosen to also demonstrate that block context is successfully passed to auto-inserted blocks (as evidenced by the auto-inserted Avatar blocks showing each comment author's avatar).

Testing Instructions

  • Make sure to rebuild blocks (npm run build).
  • Use the Twenty Twenty-Three theme.
  • On a single post page, you should see the Social Icon block (showing the WordPress logo) below the post (as sort of a stand-in for a Like button 😅)
  • Have a look at comments below a given post. You should see an Avatar block showing the comment author's avatar (as a stand-in for a Comment Like button)

image

@ockham ockham self-assigned this Jun 7, 2023
@ockham ockham added [Feature] Block API API that allows to express the block paradigm. [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible labels Jun 7, 2023
@github-actions
Copy link

github-actions bot commented Jun 7, 2023

Flaky tests detected in 0a07027.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5200288551
📝 Reported issues:

@ockham
Copy link
Contributor Author

ockham commented Jun 28, 2023

Closing this, per these comments 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant