Gutenberg is here (WordPress 5.0)

After all this time you are finally ready to design your website with WordPress but all you’ve been hearing is WordPress launching Gutenberg before the year is over. 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 make 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.  

Below I’ll explain to you why WordPress is changing the editor and showcase a few of Gutenberg’s best features. I’ll also highlight how Gutenberg might change the way you will use WordPress moving forward.

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.

AnitaM-WordpressGutenbergGuide-Screenshot.png

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, preformatted 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) mode 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 end of 2018, 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

AnitaM-WordpressGutenbergGuide-Website-NObg.gif

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

Final Thoughts on 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.




We are now ready to design your WordPress website, so click on complete and continue to get started with the fun.

https://wordpress.org/gutenberg/