Gutenberg block editor, released in late 2018, is the new content editor for WordPress. While I was apprehensive about it at first, I am excited by it after learning more about it. In today’s post, I will share with you what I know about the new WordPress editor.
Gutenberg block editor vs. classic editor
The Gutenberg block editor is drastically different from the the classic editor. While the old WordPress editor is a WYSISYG text editor, Gutenberg uses blocks to create content. Specifically, Gutenberg comes with default blocks such as paragraph, image, gallery, etc., which are also elements that were part of the classic editor. But in the new block editor, these elements are much more dynamic and easier to work with. As more blocks are added in WordPress Core and through plugins, the new editor will become even more powerful. 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. In addition, they can be modified with settings unique to each block. The settings for the block are visible in the inspection panel on the right sidebar when you are editing.
Advantages of using Gutenberg block editor
Gutenberg has several advantages over the classic editor. First of all, it provides an almost exact preview of your post as you are building it in the back-end. 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 Gutenberg blocks will help you achieve that. Building with blocks also significantly reduces development time because it allows you to create rich, attractive content with a couple of clicks. To create the same content using custom HTML and CSS, or even a bulky page builder would have been significantly more time consuming. Furthermore, blocks are reusable if you select the ‘Add to reusable blocks’ option. To use a reusable block, simply click on the add block button and look for your saved block under the ‘Reusable’ tab. You can manage reusable blocks by clicking on the ‘manage all reusable blocks’ link in the add new block section.
Gutenberg block editor resources
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. While all themes work with Gutenberg, you can take advantage of certain new features by making minor changes to your theme. Bill Erickson has summarized these changes in “Adding Gutenberg support to WordPress theme” blog post.
Atomic Blocks plugin
Gutenberg provides developers the flexibility to create more advanced blocks that are currently not available in WordPress Core. For example, the free Atomic blocks plugin provides additional page-building blocks not offered by the new editor. To use the atomic blocks, you will need to download and activate the plugin. Once activated, you can click the + icon to add a new block and search for “atomic” to bring up the available Atomic Blocks.
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.
