Block Rocking WordPress

WordPress 5.0 introduces a new editor based around blocks. The editor is the first phase of a larger project developed under the Gutenberg name.

This post is part three in my unplanned series:

• Part I - Creating a Gutenberg Block from October 2017 covers how to extend Gutenberg with a basic block. I wrote a follow up Gutenberg blocks without the build step which simplifies block creation.
• Part II - Gutenberg can do that! from April 2018 covers a few of the new features and power the editor brings.

In this post I want to highlight the power of blocks, and hopefully stimulate your mind to see how you might use blocks as the primary extension of WordPress editing.

Background

First up, if you haven't used the Block Editor, you can try it live at https://wordpress.org/gutenberg/.

Template Blocks

One of the most useful cases for blocks is custom placeholder blocks. There are countless needs for a simplified interface to enter info and create structured content.

A great example of a placeholder block is this WordCamp Speaker Block created by Mel Choyce.

You can imagine just about every site has a custom piece of content they want displayed the same way, it could be recipe cards, captioning photos, or if you use P2 maybe bug reports, or requests.

Unifying Interfaces

Another powerful feature of Gutenberg is its ability to simplify and unify what used to be different user experiences into a common interface. One obvious example is blocks replacing shortcodes, however there is even more. Blocks can be used to replace different post types, or other confusing taxonomy things.

Here's an example from 10up creating a Podcasting Block, so instead of trying to remember what tag, post type, or category you're supposed to use, you simply drop in a block.

Cool Ideas

Here are a few other cool ideas to see what people are creating with Gutenberg.

• Block Gallery is an advanced gallery block that allows you to create multiple different photo galleries from a masonry layout to carousel.
• Drop It a plugin which allows you to embed Giphy or Unsplash images straight from a block.
• Gradient Blocks an advanced interface showing what you can do using the sidebar space for controls.
• Saving the best for last, check out Shape & Patten Backgrounds via Blocks. It is a demo video showing using a custom block to create, style, and insert background shapes into a page.

Summary

In summary, just a few of the cool things people are starting to make with the new WordPress Block Editor. I'm excited for the launch and to see in the years to come all the great new content tools the amazing and creative community will build.

The future is definitely bright.