Uncategorized

Planning a WordPress Gutenberg Boilerplate / Starter Kit

From time to time I get to work on projects that really excite me, and this week has been no exception. Our agency Make Do have asked me to lead on a public facing project to build a WordPress Block Editor (Gutenberg) Boilerplate / Starter Kit.

Get Code from GitHub

This boilerplate will be firmly aimed at developers and WordPress agencies, allowing the rapid creation of blocks that fulfil both common and advanced needs, and we hope that those developers will contribute back to the boilerplate.

Announcing Plans for the Boilerplate

As this boilerplate will be the main tool that we use internally at Make Do, it will have the benefit of being extended every-time we find a new use-case. IE every-time one of our clients needs some new functionality.

Learning Gutenberg (Deeply)

The boilerplate is aimed at people that already have knowledge of how to write WordPress Editor (Gutenberg) Blocks.

For those people who are wishing to get up to speed with writing blocks, I cannot recommend Zac Gordon’s courses enough, and if you are new to writing blocks I would certainly take a look at his Gutenberg Block Development course , and the upcoming Advanced Gutenberg Block Development course.

The Boilerplate Plan

Here are the key deliverables of the Boilerplate / Starter Kit.

  • Create a heavily commented boilerplate WordPress plugin that contains everything you need for both block development and ‘classic’ PHP based development.
  • Use npm and webpack to enable the use of SCSS, ESNext JavaScript and JSX.
  • Create a library of example ‘starter’ blocks. These will contain just enough code to do the job, and contain the minimum amount of styling (style enqueues can be either be commented out by developers, or the styles overridden).
  • Create several extensions that can extend existing blocks to do common things, without the need to build a block just to do it.
  • Mimic the core Gutenberg Block controls and styles as closely as possible, so the starter blocks feel as natural as possible to the end user.
  • Include some common minimal helper styles, mixin’s and JavaScript functions to help with block creation.
  • Blocks will contain semantic markup, micro-formats, schema.org and aria attributes.

Block/Extension Roadmap

The initial blocks / extensions that will be developed will look a little like this:

  • Card
  • Call To Action
  • Extension to insert an SVG / Font Icon
  • Alert
  • Slider (with different types of Slide sub-blocks)
  • Basic Form
  • Review Block
  • Extension to add a visible credit to images
  • Tweet-able Paragraph
  • Related articles list
  • Map

One Block at a Time

We will release the blocks one at a time. I will write in detail about each block / code snippet (and likely write a blog post either here or on the Make Do site), meaning that we can get feedback and make adjustments as we go.

More about Gutenberg

As well as working for Make Do, and leading on the Boilerplate / Starter Kit, I also write about the WordPress Block Editor (Gutenberg) development, and projects that I have built.

You can also follow my tweets to learn more, as I often post questions (and solutions) on there.

Matt Watson loves to talk about Health, Wealth and Code (mainly WordPress). Get in touch with Matt or follow Matt on Twitter to get notified about his latest posts.