Do I need a Custom Block?

As we are getting started with block development it is important to be thoughtful about when a custom block is needed or if a simpler or alternative approach will suffice to meet the client’s needs. While building a new block can be useful and will be something that we become more and more comfortable with, it also brings with it technical debt.

The following series of questions can help guide you to a determination of what approach might be most appropriate for your project.

Is a shortcode a good option?

Though shortcodes are still available in WordPress 5.8 their appropriateness in the block editor varies with the type of content the shortcode works with, how many options are passed to it and what that editing UX would be for the administrators.

In a plugin, the answer is most likely no… a block is probably better. The exception might be if the plugin needs to work in areas or on sites that don’t support the block editor currently. In that case you may need to build a shortcode & a block that both do the same thing.

For a theme, for now the decision likely will depend on what the shortcode is doing and how many parameters are passed to it.

  • Does the administrator need to visually see what the content looks like in the editor?
  • Does the administrator need to enter content into the shortcode, versus a simpler shortcode where they just provide a Post ID for an existing post to display?

If the answer is yes to these questions a shortcode might not be the right approach.

Can it be a Block Pattern?

Block Patterns can often be used in place of creating custom blocks for components that utilize common content blocks such as images, text, etc.

A block pattern is a group of blocks that you combine to create reusable layout elements and page sections. Technically, patterns use the markup of individual blocks. This markup includes the HTML comment with the block attributes and the block content itself, such as text and links to images.

Block patterns help you select pre-made designs that you can customize using infinite color options and media. They help you speed up your template and page creation, and they can be as small as a single block or as large as a full-page layout. You can add patterns to your content using the block inserter. They can also be part of a template, template part, or even nested inside other patterns.

FullSiteEditing.com

Depending on the content needs of the component you need to build, instead of a custom block you should evaluate if a Block Pattern would be able to accomplish the same thing. Generally if the component is being created to display content the administrator is going to enter into the post that the component is displayed on a Block Pattern may work.

Conversely if the component needs to retrieve content from another post or post type (such as display a BU Profile post on a Page post) then a Block Pattern probably won’t work well as the administrator would have to duplicate content and manually enter it vs selecting an existing post from a custom post type.

One current limitation of Block Patterns in WordPress 5.8 is that they cannot be locked down into uneditable templates. If the Block Pattern is made up of multiple existing blocks when the administrator inserts your pattern into the page they can choose to rearrange the child blocks, delete them, etc. So for now there is an inherit fragility with Block Patterns. In WordPress 6.1 Block Patterns can be template locked so that editors can not delete or move blocks within a Block Pattern that is inserted into the page. This opens up more opportunities to use them as miniature templates that can ensure a consistent visual appearance in a site.

Can Variations to an existing block accomplish the goal?

The core embed block is a good example of Block Variations. The Youtube, Twitter, and many more block shown here are all registered Block Variations of the Embed block.

The Block Variations API allows for developers to create a variation of an existing block. A Block Variation is in some ways a faux block that appears in the inserter as if it is a separate custom block. However the block inherits all of it’s markup and features from the original block. The Block Variation however let’s the developer set many of the settings of the block to a specific value so that when inserted into the post the variant block is already configured for a specific setup, structure, or content.

We can’t add new features with the Block Variation yet, but we can make it appear as if there is a block in the block library without actually having to build a new block. We can get creative with this, it doesn’t have to be a single block just configured differently. You can register a Block Variation of a Group block or other parent block that allows for child blocks and your Block Variation can specify child blocks that pre-populate the InnerBlocks component of that block.

The Columns block shows variations available that let the editor select a common layout configuration.

Block Variations can also be shown in a picker during the initial setup of a block similar to how the core Columns block does to show different column layouts to choose from.

If your component could be created by using an existing block(s) and setting different default settings, consider a Block Variation approach vs creating a new custom block.

Lastly, you need a custom block

If these alternate options aren’t a good fit and the client needs a very visual method of entering or editing the content in your component then you likely need to build a custom block in your theme. Just keep in mind, each block we build we will have to support and fix issues in during WordPress upgrades and the Gutenberg project has released breaking changes in upgrades that have required us to refactor blocks in the past.