The WordPress block editor (previously titled Gutenberg) includes a new way to add content to your WordPress posts, pages and soon all content on your WordPress site. It marks WordPress’ move into the page builder space.

The base set of default blocks is pretty robust, but what if you wanted to create your own custom block for laying out content? In the past you would use something like Advanced Custom Fields (ACF) or shortcodes. These days, custom blocks are where it’s at.

I’ve been working with React full-time for the past year, rebuilding WP Migrate DB Pro’s frontend. React is on my mind, and given that the WordPress editor is also written in React, I thought it would be a good idea to see what it would take to create a custom block. So let’s get into it!

Getting started

We’re going to go over what it takes to go from nothing to a relatively basic, custom Gutenberg block. The documentation for the block editor is still kind of all over the place but there is some decent information in the “Block Editor Handbook”. Unfortunately I didn’t find it all that easy to parse, so we’ll go over some of the steps I went through to get set up.

One thing I would recommend before diving head first into creating a Gutenberg block, for now at least, is to get a solid understanding of React and modern JavaScript. If you’re not familiar with things like JSX you could use the ES5 syntax, but you’d be best suited to use the modern syntax in the long run.

It’s fairly straightforward these days to get set up with the WP CLI ‘scaffold’ command. This command will set up a WordPress theme or plugin with a ‘blocks’ folder that contains the PHP and base CSS and JavaScript required to create a custom block. The only drawback that I noticed is that the JavaScript uses the old ES5 syntax rather than modern ESNext. Modern JavaScript allows us to write more concise code and use JSX in our custom block code.

#article #link #gutenberg #wordpress blocks #wordpress