Have you heard about Gutenberg, the all-new, drastically different publishing experience that will be released in the next version of WordPress?

This change impacts everyone using WordPress, from general users to those working with clients and developing solutions on top of WordPress.

If you haven’t tried out Gutenberg for yourself, I’d highly recommend you give it a try.  It is important to familiarize yourself with the user experience in order to be able to make sense of all the ways you can integrate with it.

Ultimately, many things that are currently managed by custom meta boxes in WordPress can likely be replaced with custom blocks in Gutenberg. A block is essentially a stand-alone editing component.  Examples of existing blocks are an image block for inserting and managing images, a text block for standard text content and a gallery component for managing collections of images. At the meetup, we covered how to create a custom block, which we called ‘Gutenbook’; a block that allows you to insert a book title, description, and author in a card view format. View the code on GitHub.

The Gutenberg editor has a few layers to it. First, the primary technology behind it is React; Facebook’s JavaScript view library. Second, there is a new WordPress JavaScript API that layers on top of React that you will use to create Gutenberg blocks. Finally, there is the code you will write to leverage all the tools that Gutenberg provides to create your own blocks.

Suggested Resources

If you are interested in how to create your own Gutenberg block, take a look at these helpful resources:

• The Official Gutenberg Handbook
• The Gutenberg Source Code
• Examples of Gutenberg Blocks Provided by WordPress
• A Guide by Daniel Bachhuber on Converting a Shortcode to A Gutenberg Block
• The Guten-Block Toolkit
• A Slew of Great Gutenberg Resources – WP Tavern