Gutenberg is the new content editor that was released with WordPress 5.0 in late 2018. While I was apprehensive about it at first, after learning more about the new editor and playing around with it in the WordPress back-end, I am excited by what I see. In today’s post, I will share with you what I’ve learned so far about the new editor.
About Gutenberg
The Gutenberg block editor is drastically different from the old WordPress editor. Unlike the classic editor which was a WYSISYG text editor, Gutenberg uses blocks to create content. You can add blocks for each paragraph, images, videos, galleries, and much more. Each block comes with its own toolbar which appears on top of the block. The blocks can be moved around by drag and drop or by clicking the up and down buttons next to each block and they can be modified with settings unique to each block. You can find the settings for the block you are editing along with the document settings in the inspection panel on the right sidebar.
Gutenberg comes with default blocks such as paragraph, image, gallery, etc., which are elements that were part of the old editor. But in the new block editor, these elements are much more dynamic and easier to work with. Over time as more blocks are being added in WordPress Core and through plugins, the new editor will become even more powerful. A major advantage Gutenberg has over the classic editor is the fact that it provides an almost exact preview of your post as you are building it in the back-end, which is a step in the right direction in bridging the gap between the front-end and the back-end of WordPress. Moreover, it is not enough to get visitors to your site, you want your visitors to consume the content. To that end, you want content that is attention grabbing, easy to scan, and blocks will help you achieve that.
Building with blocks significantly reduces development time because it allows you to have rich, attractive content with a couple of clicks, that would otherwise have taken a lot of time to create using custom HTML and CSS, or even a bulky page builder. Also, blocks are reusable. You can make a block reusable by selecting the ‘Add to reusable blocks’ option after clicking the menu button located at the right corner of each block’s toolbar. To use a reusable block, click on the add block button and look for your saved block under the ‘Reusable’ tab. All reusable blocks are stored in your WordPress database, and you can manage them by clicking on the ‘manage all reusable blocks’ link in the add new block section. On the managed reusable block page, you can add, edit, or delete reusable blocks; you can even export reusable blocks and use them on other WordPress website.
There are a lot of wonderful resources on the web on the new Gutenberg editor. Check out Go Gutenberg for example for detailed information on each of the default blocks that are currently part of the WordPress Core.
Adding Gutenberg Support to your theme
While all themes work with Gutenberg, there are some new features that you can take advantage of by making some minor changes to your theme. You can learn more about these changes by reading a post by Bill Erickson on this topic.
Atomic Blocks plugin
Gutenberg provides developers the flexibility to create more advanced blocks that are currently not available in WordPress Core. The Atomic blocks plugin for example provides additional page-building blocks not offered by the new editor and it’s free. To use the atomic blocks, you will need to download and activate the plugin. Once activated, you can click the + icon for adding a new block and search for “atomic” to bring up the available Atomic Blocks. Select the block you want to add to the editor.
The Atomic Blocks plugin was built by Array Theme, which was recently acquired by WPEngine. Similarly, StudioPress, the creator of the Genesis Framework, was also acquired by WPEngine. So you can expect a lot of integration between Genesis and Atomic Blocks plugin. Since I tend to use the Genesis Framework in my development work, I am excited by that prospect.
For a list of other recommended plugins with Gutenberg blocks, check out Bill Erickson’s article on the topic.
