Block Editor Essentials

It’s time to start learning how to build with the Block Editor

There’s a new editor on the block, codenamed Gutenberg – official name: Block Editor. This isn’t news anymore, it’s part of the WordPress core, and with each WordPress update, the Editor improves and grows. Among my WordPress friends, about 40% have completely leaned into the new editor and its paradigm and have begun to build with the Block Editor, and the rest are either skeptical, slightly nervous, or some combination of the two.

Allow me to make a practical argument for why you should start learning how to build with the Block Editor.

The Block Editor is here to stay. In fact, the Block Editor is going to keep increasing its reach within WordPress – there are plans for every area of the WordPress dashboard to be powered by some form or instance of the Block Editor (menus, widgets, dashboard, etc).

Yes, you can ignore the Block Editor, install the Classic Editor plugin, and continue to develop WordPress websites the way you always have.

For a while.

Eventually, your clients will hear about the new editor and ask you, “How come my site doesn’t use that? It has some pretty cool features.” The reasons you may give the client might be something like, “It would make it difficult to adhere to your brand guidelines correctly.” Or “The Block Editor is still maturing and needs more time to develop.” Or something else like that. All reasonable explanations that your client will likely accept.

But the Classic Editor plugin won’t be maintained forever.

Eventually support and updates to it will stop. Eventually the Block Editor will be the only native editor around and your only option will be to build with the Block Editor or rely on third party page builders with subpar performance.

By not engaging with the Block Editor right now, you are not only doing a disservice to your future self, you are kind of doing a disservice to your client. For a lot of projects, the Block Editor is a good fit – more intuitive and visual, all while producing clean code and a fast performing website.

When we create WordPress websites, our goal is not only for the front-end to look great and function well, our goal is also to curate an easy-to-use administrative experience that supports the administrators, writers, and managers of the website.

In a lot of cases, the Block Editor excels at providing that visual easy-to-figure-out interface. I’ve watched clients pick it up and figure out how to do things with a short 20 minute tutorial. It’s pretty cool to watch.

Eventually, you’ll have to incorporate the Block Editor into your workflow in some way. By using the Block Editor and learning how to develop with (and for) it, you can help shape the further development of the Block Editor and begin to see how you can incorporate it into your systems.

The best way to understand the value of a new tool is to learn how to use it.

You don’t have to jump in 100% right away, you can start out gently – maybe build a hobby website with it or use it in a small brochure website that isn’t super complicated. There are plenty of ways to dip your toes and ease into the water.

Introducing Block Editor Essentials

To that end, I’ve written a short series that is just that: a gentle (and guided) introduction to developing with the Block Editor. The email series doesn’t use any JavaScript or React; you are going to learn how to develop a small marketing website with the Block Editor natively, without the use of any helper plugins or libraries. We’ll be using a real website I’m building as our test project and learn the skills to build it over the course of 10 days.

The series is structured to help you understand the basics and then hone in on specific features, building your knowledge one lesson at a time.

Table of Contents

Here is what you’ll learn how to do (with code samples and even the occasional video):

  1. Bring your front-end styles to the Block Editor
  2. Match the Block Editor to your theme
  3. Add a custom colour palette
  4. Remove pesky custom settings
  5. Add a Block Style
  6. Remove a Block Style
  7. Curating the collection of available blocks
  8. Create a Block Pattern
  9. Remove a Block Pattern
  10. Bringing it all together in a real custom theme.

At the end of the series, you’ll not only know your way around using the Block Editor, you’ll be able to confidently introduce it into your workflow, should you want to.

Sign up below and start learning how to develop with the Block Editor.