What You Need To Know About Gutenberg: The New WordPress Editor – Part 2

In Part 1 on Gutenberg, we covered what a WYSIWYG editor is and that a new one is coming to WordPress at some point in 2018.

Recently, I took a course to learn more about this new editor and how to develop for it. I strongly recommend looking at Zac Gordon’s Gutenberg Development Course. Zac explains in clear detail how to develop your own blocks, his thoughts on developing blocks in a plugin vs theme, and how to explore Gutenberg itself to find how the core authors wrote some of their blocks. Great course, thanks Zac.

A shift in editing experience

For the past several years, when we build WordPress sites, we have been using Advanced Custom Fields “Repeatable Fields” as a way to create dynamically rich pages. For example, you could have a 3-column section followed by a gallery and a big CTA at the bottom of the page. If you want to have the gallery above the 3-column section, you can drag-and-drop it to shift order. That functionality will persist but in a more “in-line” manner. Meaning, instead of a giant form to fill out with no visual representation of how it will appear on the frontend, the editor looks more like the page! There are so many advantages to this editor that I’m sure we will circle back and write about the best ones after we get some real-world experience with it and how our clients use it.

A shift in development

We will be developing our blocks as a custom plugin for each client’s website we build in the future. As for stylizing, I think I will keep the basic styles (alignment, padding) for both the editor and frontend in the plugin, but leave the more complex styles (fonts, pseudo elements) up to the theme. The advantage to this is that you could switch themes and still use the plugin to create the rich content.

Both the editing experience and templating are written in javascript in a rather seamless way. This is a radical shift away from templating in PHP. The immediate advantage I see in it is that there is a consistent way to build these “blocks.” Sites we inherit in the future will make a bit more sense because of this.

We’ve created some rather complex components with Advanced Custom Fields in the past and it’ll be interesting to push the limits of Gutenberg. I’m excited about the future of WordPress! If I cannot find a way to do what I need within the confines of what a block can do, I can always call a PHP function to accomplish what I need and pass the HTML back to the rendered version of the block.

Lars Miller

Lars is a front-end and WordPress developer.