Issue #117 Loop WP

Block Bindings to the Rescue!

Author

Simon Harper
July 17, 2024

Hi, friend. 👋

Welcome to Issue #117 of Loop WP!

🚨 Technically, this is Issue #1 of “Loop WP” (my rebranding of WP Wednesdays), and this is the first time I’m sending an entire campaign from Beehiiv.

Last time, we had a quick edition of “WordPress Wednesdays” (now Loop WP), where we discussed what was happening in the WordPress world.

This week, this newsletter starts to get back on track with its usual format as we look at a use case for the Block Bindings API (introduced in WordPress 6.5).

Let’s go! 👇

A vibrant cyberpunk manga scene set in a futuristic city inspired by the 80s. The image features bright neon colors with dominant yellows and purple shades. The cityscape is composed of interconnected cubes, resembling building blocks or Tetris pieces, linked by faint, dotted lines, symbolizing the interconnectedness of the digital world. The sky is a mix of purples and blues, enhancing the otherworldly atmosphere. The overall scene is rendered in a manga style, bustling with energy and reflecting a dynamic cyberpunk environment.

Block Bindings

The Problem

Last week, I was working on a client project and wanted to use the Featured Image block to “Expand on click” (in other words, open in a Lightbox), just like the Image Block.

Except you can’t do this currently (and the pull request didn’t make it into WordPress 6.6)

My Attempted Solution

After looking at what happens to the Image block when “Expand on click” is applied, I noticed that many attributes are added.

So, I replicated these attributes by testing the following plugins:

🤷‍♂️ I got some of the way there, but the problem was getting the dynamic value for the image URL.

Brian Coords to the Rescue!

🛟 So I took to Twitter/X and asked for help.

Some initial ideas were offered, from creating a custom block to using “block supports”, but then Brian Coords came to the rescue with “Block Bindings API”.

🎉 Brian kindly created a custom Featured Image block for me and used the Block Bindings API to add the “Expand on click” functionality.

👨‍💻 It worked an absolute treat, and you can grab the code for Brian’s custom plugin on GitHub.

If you’re interested in learning more practical examples about the Blocks Binding API, there are two excellent guides on the WordPress Developer blog:

🙌 Massive thanks again to Brian, and make sure you connect with him on a channel below:

That’s it for this week 👋

Normally, friend, this is the bit I tell you about next week’s topic, but as I’m finding my way back into writing this newsletter regularly again, I’ve not decided yet. **

🎁 So next week will be a surprise!

** Read this if you’re new to this newsletter or can’t remember what I’m talking about.

WordPress News & Tips

This week's excellent and insightful WordPress News & Tips:

  • It’s alive! - WordPress 6.6 has dropped, and there are issues with links and styles. (WordPress)

  • Deep Dive - What’s new in WordPress 6.6: Pattern overrides, Block Bindings API, Data Views, new design tools, and much more! (Kinsta)

  • Cloud - GeneratePress launches Generate Cloud as a standalone and part of GeneratePress One. (GeneratePress)

  • Stricter Versions - Developer Advisory: Minimum version requirements on Woo developed extensions (WooCommerce)

  • OS MU plugins - Felix Arntz has kindly open-sourced his MU plugins on GitHub. (Felix Arntz)

  • Free Bricks Course - The brilliant Paul Charlton of WP Tuts has released his free Bricks mini-course, “Streamline Your Bricks Builder Workflow“. (WP Tuts)

  • Editor Improvements - 15 ways to curate the WordPress editing experience. (Nick Diego)

If you have a question about this email or WordPress, reply, and I will answer you as soon as possible.

👋 Until next time,

Simon