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.
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.