Planning on updating your WordPress with the latest Gutenberg block editor? Before you go about doing that the best course of action would be for you to know everything about the Gutenberg editor. Now the good news is our Gutenberg WordPress guide will not just tell the difference between the old & new version, but also how to use the block editor.
The Gutenberg block editor brings with it fully styled method content creation in the form of blocks. And we are going to tell you exactly how you’re going to use blocks along with some of the new editor’s other features, to curate content at your WordPress site.
What makes the Gutenberg block editor better than the classic version?
The latest block editor offers an easy way to add a variety of content to the posts and pages of your website. For instance, previously if you wished to add a table in your content, then it required a separate table plugin.
With the Gutenberg block editor, you can simply add a table block, select the columns and rows, and start adding your content in the webpage. You can even shuffle content elements and edit them as individual blocks easily to create media-rich content.
And most importantly, the new block editor is very easy to use and learn. This gives a huge advantage to all WordPress newbies who have just started working on their first blog or building a DIY website.
What are the “Blocks” in Block editor?
The Gutenberg block editor is all set to replace the single edit field mode of the classic WordPress TinyMCE editor using a variety of “blocks”. These blocks will enable you to build more complex and creative designs than those allowed in the old classic WordPress editor.
And the great news is that you will be able to create your very own third-party blocks that can be accessed via plugins for extra flexibility. Each block on its own is a separate entity that you can modify an individual basis.
Not only that, the Gutenberg block editor is geared up to eliminate the need for page builders for most of the “standard” content, and create a singular unified method for creating more-complex layouts in WordPress.
Let’s have a look at the interface
We have highlighted some of the key aspects of the editor. So let’s Jump down below the image for more details on each individual section.
The Gutenberg interface is comprised of three main areas:
1.EDITING TOOLBAR: TOPMOST OF SCREEN
2.CONTENT AREA: LARGE SECTION ON THE LEFT SIDE
3.ADVANCED SETTINGS SECTION: RIGHT SIDEBAR
These sections of the Guttenberg block editor allows you to do the following:
- Add a new block within the content area
- Undo/Redo changes
- Review the content’s structure (no. of words, blocks, paragraphs, headings, and tables)
- Save your changes that have been auto-saved with confirmation
- Preview pages & posts
- Modify settings, such as post visibility & publish time & date
- Additional settings include:
- Switching between & code & visual editors
- Copying all content
How to add new blocks?
As discussed above, you’ll have to combine multiple individual “blocks” to build your layouts with the editor.
To add a new block, all you need to do is simply click the +Plus icon and select the content type you want to add:
Gutenberg block editor actually includes a ton of different blocks, divided into many sections as per the use such as Common Blocks, Formatting, Layout Elements, Widgets, and Embeds:
You will also see sections for
- Inline Elements – only contains a single block for the inline-image.
- Common Blocks – Basic building blocks like images, paragraphs (regular text), quotes, etc.
- Formatting – Used for adding formatted content like pull tables, quotes, or even the classic WordPress text editor
- Layout Elements– Enables splitting of text into two columns, including buttons, separators, or tags
- Widgets – Used for adding shortcodes, latest posts, or categories.
- Reusable- Use the templates that you have applied previously again (this option only becomes active once you have used a couple of templates)
Customizing individual blocks
Since the Gutenberg block editor includes tons of different blocks, we can’t demonstrate how to use each and every individual block. But we can show you the general framework that is applicable to all blocks.
Basically, you can control your content in the actual body of the Gutenberg block editor:
For styling and alignment of basic text, you can use the menu bar that appears while hovering over a block:
You’ll have to style the block in the Block settings tab, for more advanced styling.
In order to access that tab, select the block you need to edit and browse over to the Block tab:
Is Gutenberg block editor the future of WordPress?
While the Gutenberg has its limitation as of now. It has become an official component of the WordPress core team thanks to the release of WordPress 5.0.
For many casual users, it will bring a tremendously flexible content creation experience. After some growing pains at its initial stage.
Although it’s limited to content creation. For now, it is expected to enable the developers to build entire webpages with ease.
We hope to find our guide on the Gutenberg block editor useful and in case you have any queries regarding the editor. Simply drop us a line in the comment section and our experts will get in touch with you in no time.
