A List Of Developer-Facing Talks About The New WordPress Gutenberg Block Editor

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.

Don’t forget to read the Gutenberg Handbook, which has a ton of documentation about working with and extending the new WordPress editor. These are talks for developers, I published a list of talks for site-builders and WordPress users yesterday.

This list is part of the resources for my React Boston 2018 talk. You can see those slides here.

Design For Gutenberg

Building Blocks

Advanced Topics In Gutenberg

A List Of Site-Builder Facing Resources For The New WordPress Gutenberg Block Editor

Last week I gave a talk called “Introduction To Gutenberg Block Development” at WordCamp Pittsburgh. It was a developer-facing talk about how to build a custom block type for the new WordPress block-based “Gutenberg” editor, coming very soon to WordPress.

You do not need to create your own blocks to use Gutenberg. I had one slide of links in my talk for those who are looking to learn how to use Gutenberg.

For the developer-facing version of this list, please see this post.

The List

Josh Pollock – WordCamp Pittsburgh 2018 Slides

Creating Gutenberg Blocks With WP-CLI

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.

wp scaffold

This Is Super Basic

I’m a big fan of using ES6 and webpack and yarn and JSX…

If you do not know how to use all of those things and you also do not know how to build a Gutenberg block, I recommend picking one concept to learn at a time. Gutenberg can be your way to level up your JavaScript. But start simple.

Make Something!

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 🙂

Redux(-like) State Management In And Around WordPress

This post is a companion to my talk for the JavaScript for WordPress conference. The talk is supposed to be titled “State Management with Redux in WP” but I always end up changing the title last minute.

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:

Watch The Talk

Josh Pollock – Redux with WordPress – 2018 JavaScript for WordPress Conference
Screen cap from the talk!

Slides

Here are the slides for my talk:

Helpful Links

Example Code

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.

This example code is based on the Caldera Forms Processor UI library, which is what I’m currently working on andand Caldera Forms’ Gutenberg block.

A Dumb App Component

Presentational Component

See full source code

Component PropTypes

A Dumb Component Nested In App

See full source code

Tests For A Dumb Component

See full source code

Higher Order Components

Example From Gutenberg: With API Data

The Provider Higher Order Component

See full source code

Container Component – withSelect

See full source code

Container Component – withDispatch

See full source code (same as above)

Container Component Wrapped With State

See full source code (same as above)

Actions

Action Function

See full source code

Testing Action Functions

See full source code

Selectors

Selector Functions

See full source code

Testing Selector Functions

See full source code

Reducers

Reducer Functions

See full source code

Testing Reducer Functions

See full source code

Resolvers

Resolver Functions

See full source code

Testing Resolver Functions

See full source code

Registering A Store

Pattern

See full source code

Complete Example

See full source coe

Using @wordpress/data Store In A Gutenberg Block

See full source code

Using @wordpress/data Store In A React App

See full source code (same as above)