The new WordPress block-based “Gutenberg” editor is coming to WordPress soon. I’ve given a few talks about developing for Gutenberg. In this post I round up three talks, in three categories, that I think can give you a good overview of developing for Gutenberg.
If you’ve never created a Gutenberg block before, or just need to make a quick block, wp-cli — the official command line tool for WordPress — can help. The wp scaffold command can create a plugin and add a block to it. Here is an example:
# create a plugin called books
wp scaffold plugin books
# create a block with the name "book" and the title "Book" in the plugin books
wp scaffold block book --title="Book" --plugin=books
This gives you a plugin with one block. Brian Richards’ section of the WordCamp Miami workshop we gave this year is about creating similar blocks, with or without wp-cli and then adding capabilities to them. The example code from that talk and the slides are likely good next steps if you’re just learning Gutenberg block development.
This Is Super Basic
I’m a big fan of using ES6 and webpack and yarn and JSX…
In preparation for our Gutenberg-powered future, now that the API is pretty stable, now is a great time to build your first block. If this helped, @ me on Twitter with the Github link to what you built 🙂
In this case, Zac and I honestly didn’t know enough about Gutenberg when we came up with the topic to know exactly what it would be about. We had some theories when we discussed it in this video a few months ago:
Because this talk will be streaming, some people may have issues viewing the code. Also, I used Carbon.sh to generate screenshots of example code to ensure they looked good. That means you can’t cut and paste from the examples, or read them with a screen reader, which is sub-optimal.
So, here is an image gallery of the code samples with links to the actual code it is based on. Now you can see the practical, real world application of these concepts.