How to extend a WordPress block

[bph]

Discussed in #278

^{Originally posted by ndiego June 20, 2024}
Custom block development is powerful, but often you don’t need to go through the hassle of building a custom block to achieve your goals.

This article will explore 4-5 scenarios where alternatives to custom blocks might be more effective. Often, this will be in the form of block patterns. These non-block alternatives will feature one or more of the following tools:

• Content-only editing
• Block naming
• Block locking
• allowedBlocks
• Block bindings
• Block variations
• Patterns
• And more

The goal is to showcase the flexibility and power of the pattern "toolset" and other non-block alternatives in WordPress. Each example will link to further resources, both on the Dev Blog and in the documentation, where readers can learn more about each tool.

Additionally, the Block Editor Handbook will be updated to ensure that each tool covered in this post is thoroughly documented.

---

Edit: I (@ndiego) have updated the title to reflect the change of direction noted below.

While working on this article, it's become clear that this topic is too big for one article and instead should be two. One dedicated article focused on extending blocks using Block Filters, and another covering the remaining topics in the description.

The first, more technical, article would be "How to extend Core WordPress blocks" and the second would be "Do you really need a custom block? Exploring alternatives to block development in WordPress". The second article would heavily reference the code techniques demonstrated in the first article and focus more on examples.

[ndiego]

While working on this article, it's become clear that this topic is too big for one article and instead should be two. One dedicated article focused on extending blocks using Block Filters, and another covering the remaining topics in the description.

The first, more technical, article would be "How to extend Core WordPress blocks" and the second would be "Do you really need a custom block? Exploring alternatives to block development in WordPress". The second article would heavily reference the code techniques demonstrated in the first article and focus more on examples.

What do you think @bph and @juanmaguitar?

[bph]

Having two part tutorial, should work, indeed. Go for it.

I could also see a few more granular scenarios where the filter is only applied when a block is an InnerBlock, but not when it's used stand alone.

[juanmaguitar]

Sounds good @ndiego 👍

[ndiego]

This article is ready for an initial review: https://docs.google.com/document/d/1LcFuIbbmynZwItnCHPRMmAvtD0KfjgAbv346Omi8cb0/edit

[justintadlock]

Good job, @ndiego! Just a few suggestions in the doc.

[juanmaguitar]

I did a second review and left some minor suggestions, but the article is rock solid and ready to be shipped! ✅

[ndiego]

Pre-publishing checklist:

• Post Title and subheaders in sentence case
• Are Category or Categories selected?
• Are Tags identifies?
• Is there an explicit Excerpt?
• Are all images files uploaded to the media library
• Do all images have an alt-text?
• For TOC us the Pattern under Developer Blog > Table of contents
• Assign or upload a featured image
• Props added? (See Guidelines)
• add copy for a social post as comment to this issue (Beyond Block Styles: Part 2 #152 (comment))

Post-publishing checklist

• add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
• Add the label "post to social" to the issue
• close the issue with a comment to link to the published post
• close the accompanying discussion with the link to the published post.

[ndiego]

Social copy:

Building custom blocks is a key part of WordPress development, but it's not always the best approach. Discover how to customize and extend existing WordPress blocks to meet your needs in this latest Developer Blog article.

https://developer.wordpress.org/news/2024/08/15/how-to-extend-a-wordpress-block/

[ndiego]

This article has been published: https://developer.wordpress.org/news/2024/08/15/how-to-extend-a-wordpress-block/

[ndiego]

Social scheduled for 8/21/2024