We are very grateful to Rich Tabor of ThemeBeans for joining us last week to speak about WordPress theme development and how it is likely to change with the release of Gutenberg.
Below is Rich’s slide deck as well as a partial recording of his presentation (there were a few technical difficulties with the recording equipment).
“Gutenberg” is the codename for the 2017 WordPress editor focus. The goal of this focus is to create a new post and page editing experience that makes it easy for anyone to create rich post layoutsGutenberg Handbook Gutenberg is, in simplest terms, a replacement for the TinyMCE editor (aka the “default” WordPress editor). If you’ve ever used WordPress, you’ve almost certainly used TinyMCE.
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.
If you are interested in how to create your own Gutenberg block, take a look at these helpful resources:
var => keywords let and const to help prevent unnecessary errors
Function Scoping => Function Scoping + Block Scoping
Template Literals
Default Values
Anonymous functions => Arrow Functions
Destructuring
pass individual parameters to a function => rest parameters
concat => spread operator
forEach => for..of
constructors => classes
To learn more, see our resource list for JavaScript for WordPress developers
