Week ending April 5th, 2019

I’ve been doing so much Gutenberg work over the last few weeks that I thought I would take this week to review a few of the things I’ve learned about WordPress Gutenberg so far. (I spent a bit of time working on other projects but Gutenberg related work was 67% of my week. )

It is always changing

When I first started working on Gutenberg blocks I kept looking at the Gutenberg code on GitHub until I realized that GitHub’s master branch is changing every few hours, and I was not using the very latest WordPress version on my site for development. I accidentally started trying to use code that was available in the latest Gutenberg but wasn’t yet added to the stable WordPress build I was on. I recommend cloning the Gutenberg repository to your local computer for whatever version of WordPress you are working on, that way you have a reliable codebase to work with.

The upside to Gutenberg always changing is that they are fixing bugs and making improvements every day, so something that doesn’t work right now could be fixed very soon.

Documentation is lacking

Gutenberg was released with WordPress 5.0 on December 6, 2018. It has been in development for over 2 years now and the basic documentation at https://wordpress.org/gutenberg/handbook/ is an acceptable start. I would love to see a lot more complex examples of code in the official documentation as well as tutorials and components developed by the community (yes, I know, I am part of that community). Over the next few years I expect to see a multiplication of new components, complicated examples, use cases, customizations, and tutorials that will make it much easier for new Gutenberg developers to find answers.

My best resources for finding answers have been looking at how Gutenberg core editor does things, asking around in slack channels, viewing issues on GitHub, and reading the few tutorials that covered the topics I cared about. If you have a question about Gutenberg development hit me up on twitter.

Components, components, components

As of right now there are almost 200 custom components in Gutenberg, and you can find documentation for a huge chunk of them at the official Gutenberg handbook. Anyone looking to create a new Gutenberg block or format type is going to want to utilize the existing modules that WordPress makes available.

Let’s take a quick peek at the code for the built in “Spacer” block found in Gutenberg.

 * External dependencies
import classnames from 'classnames';

 * WordPress dependencies
import { Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { InspectorControls } from '@wordpress/editor';
import { BaseControl, PanelBody, ResizableBox, G, SVG, Path } from '@wordpress/components';
import { withInstanceId } from '@wordpress/compose';

Check out all those WordPress dependencies! This very simple block is using 10 dependencies coming from WordPress itself: Fragment, __, InspectorControls, BaseControl, PanelBody, ResizableBox, G, SVG, Path, and withInstanceId. Understanding what pieces WordPress has available is a key factor in efficiently developing new Gutenberg functionality. WordPress has built in components for picking colors, link inputs, toggling things on and off, collapsible panels, icons, buttons, and so much more. Lubus has graciously set up the WordPress Storybook site where anyone can go and play around with components and easily read the related documentation. It is not an exhaustive demo of all components available, but it includes the most common ones.

During development of a new block we want to utilize core WordPress components, and whenever possible, create our own common components that can be reused across multiple custom blocks. This simplifies the development of new similar blocks and makes it easy to handle improvements that can affect all the blocks using that common functionality. If your new component feels very useful and you think it could be helpful to someone else then share it on GitHub or your blog to save other Gutenberg developers from having to develop the same thing.

Wrapping up

With around a month of Gutenberg and React development under my belt, I am still only scratching the surface, but at least I have functional blocks that work for my clients’ needs.

The complete Work Journal series:
1. Week ending January 25th, 2019
2. Week ending February 1st, 2019
3. Week ending February 8th, 2019
4. Week ending February 15th, 2019
5. Week ending February 22nd, 2019
6. Week ending March 1st, 2019
7. Week ending March 8th, 2019
8. Week ending March 15th, 2019
9. Week ending March 22nd, 2019
10. Week ending March 29nd, 2019
11. Week ending April 5th, 2019
12. Week ending April 12th, 2019
13. Week ending April 19th, 2019
14. Week ending August 9th, 2019
15. Week ending September 20th, 2019
16. Week ending September 27th, 2019
17. Week ending December 6th, 2019
18. Week ending October 2nd, 2020
19. Week ending April 2nd, 2021
20. Coding API integrations in Twilio Studio - Work Journal May 8, 2021
21. Trudging through a complex theme implementation - Work Journal October 29, 2021
22. Creating custom Duda widgets - Work Journal December 10, 2021
23. My first Laravel Nova project - Work Journal December 1, 2023
24. Let's talk about Statamic - Work Journal January 12, 2024