[UPDATED: APR 2022]
Your website platform of choice has been WordPress for some time now, and you’ve been hearing all about WordPress launching Gutenberg in next year. But what does it mean for you, and ultimately your website? Simply put, the developers of WordPress are constantly making improvements to their software which makes it more stable and easy to use. One of the biggest recent improvements for WordPress is Gutenberg. It is a complete overhaul of the WYSIWYG editor in WordPress. Worry not, I’ve got you covered with The WordPress Gutenberg Guide (WordPress 5.0) below.
Gutenberg will completely change how you create and edit pages using WordPress, which makes it easier to create complex pages with rich content. In this article, I’ll explain to you why WordPress is changing the editor and showcase a few of Gutenberg’s best features. I’ll also explain how Gutenberg might change the way your brand/business uses WordPress.
What is Gutenberg?
The current WordPress visual editor hasn’t changed much in the past few years. It is a What You See Is What You Get (WYSIWYG) editor that allows users to add text, images and videos in just a few clicks. While this type of editor is powerful and relatively easy to use, the developers at WordPress had some ideas for making it even better.
The WordPress team has designed Gutenberg to make creating and editing media-rich pages easier. Adding images, animated gifs, videos, galleries, and other forms of media is much faster when using Gutenberg. It is also much easier to arrange components on pages, allowing users to create advanced pages very quickly.
Feel free to check out all available feature of Gutenberg here.
Arranging media on a page is made easier thanks to Blocks. Blocks are chunks of content and design elements that can be inserted into the page. The benefit of using blocks is that once created, they can be moved around the page very easily using Gutenberg’s drag-and-drop interface.
Some common types of blocks include:
Paragraph, Image, Gallery, Heading, Quote, List, Cover image, Video, Audio
There are also blocks with features that were traditionally only fully usable if you knew some HTML. They include fully-featured tables, pre-formatted text, text columns, and buttons. It is even possible to create your own custom block types, which will become available as a drag-and-drop item on each page.
The developers have added an API system for the blocks which allows third-party developers to create and share their custom blocks. This means you will be able to install blocks from companies like Facebook, Instagram, and Twitter, then drag that functionality onto pages.
In addition to dragging blocks onto a page, you can even drop widgets onto a page. This is a huge change for WordPress, which traditionally relegated widgets to static positions on each page.
After you have created a page, the layout can be saved for future use. This makes it easy to save complex page templates for future use. The settings on individual blocks can also be saved.
The Gutenberg editor is much cleaner than the traditional editor, as the concept of blocks replaces many of the buttons used in the old editor. However, there are still post settings that can be edited in a column on the right-hand side of the post (clicking on the “Post Settings” button shows and hides this column). The text editor (code) model is still available in Gutenberg and is accessed using a drop-down box on the top left of the editor.
Installing Gutenberg
Gutenberg is currently available for WordPress 4.8 and up using a plugin. This plugin is installed using the traditional methods. Gutenberg will become the standard text editor starting from the release of WordPress 5.0 with scheduled for January 2019, however, the current WYSIWYG editor will remain available as a plugin.
Using Gutenberg
Most people find Gutenberg very intuitive to use. But try it out for yourself: testgutenberg.com.
Your WordPress Gutenberg Guide:
On testgutenberg.com, you’ll see a rich media blog post layout that has already been created. Slowly scroll down the page, hovering your mouse over the content. You will notice that the individual blocks on the page become highlighted as you move your mouse cursor over them. A word will also appear on the top right of the box you are highlighting, to tell you what kind of block it is. There are many types of blocks on this page including Paragraphs, Titles, Lists, Images, and Galleries.
To edit a block, simply click it. You will see a small options menu appear on top of the block you are currently editing. This options menu will change according to the type of block you are working on. On a Paragraph block, you will have options for text alignment, bold, italic, hyperlinks, and so on.
On the left hand side of the menu, you will have the option to convert the block to another type of block. If you are in a Paragraph block, the options will including Heading, Verse, List, Quote, and Pre-formatted blocks (because these default blocks are compatible with text).
On the right side of the Paragraph menu, you will notice three dots. Click on these dots gives you more menu items including Duplicate Block, Insert New Block Before, Insert New Block After, Edit as HTML, Add to reusable blocks, and Show/Hide Block Settings. The Block Settings menu will have additional settings for the block you are currently editing along with some Document settings.
You will also notice an up arrow and down arrow on the left hand side of the active block. These arrows allow you to move the block up and down on the page.
As you hover your mouse down the page, you may have noticed a plus sign (+) appear between blocks. This is another way to add a new block to the page. Simply click on the plus sign to insert your block. You can start typing to immediately create a Paragraph block. There are also buttons on the right to turn the block into a Heading, Gallery, or List.
You will also notice that a plus sign (+) appears to the left of a newly created block. Clicking this plus sign will bring up a complete list of the blocks that are available. There are several categories:
- Most used
These are the blocks that you have used most often on your recently created pages - Inline Elements
This includes inline content blocks that sit inside other blocks. - Common blocks
Commonly used blocks like Paragraph, Heading, Gallery, List, and Image. - Formatting
Specially formatted text and tables. - Layout elements
Buttons, Columns, Separators, Spacers, Page Breaks and other layout elements. - Widgets
This allows you to add widgets directly into your page. - Embeds
These are blocks that allow you to embed content from sites like YouTube, Spotify, Flickr, Instagram, and Twitter.
As you can see, it is fairly easy to add, edit, remove or rearrange blocks.
What will Gutenberg mean for your business?
For brands/businesses who use WordPress, this new editor has many potential benefits, including:
» Less experienced people can create posts
Gutenberg’s interface is very clean and simple to use. Tech-shy people will find it easier to understand and use WordPress. With that in mind, even outsourcing post creation will be an option.
» Creating complex page layouts will be faster
The main advantage of using Gutenberg is that it allows you to create sophisticated rich media posts using a drag-and-drop interface — and immediately see the results. You won’t have preview your page or switch between layout and code view.
» Better template system and block settings
Once a page layout is created, it can be saved as a template. This makes it simple to create more of the same type of layout, which can save you a significant amount of time if you often use posts with complex formatting.
» Incorporate third party tools more easily
“Embed” blocks make it very easy to add advanced functionally to specific posts. Want to display a related Tweet in a blog post? Simply add a Twitter block. Third-party companies are developing more blocks, so you will be able to access them once Gutenberg officially launches next year.
Final Thoughts on WordPress Gutenberg
While learning something new may be at first always bit daunting, in my professional opinion, Gutenberg will make the use of WordPress way easier for many people, even the tech-shy folks around. It’s my hope this WordPress Gutenberg Guide has given you an overview of what to expect once the new WordPress rolls out Gutenberg with WordPress 5.0.
Certainly, it may take a while to re-train the way we’re used to working with WordPress. But as they say, it takes about 21 days to develop a new habit, so with that in mind, you can master Gutenberg in less than a month or signup for Website in Week online course to learn it all in one place.
Free Mini Course for DIY WEBSITE
Learn how to create a professional, client-winning website – without tech skills.
Editor’s Note: This post was originally published in October 2018 and has been completely revamped and updated for accuracy and comprehensiveness.
