Getting to know Gutenberg

The Gutenberg WordPress editor, also called the WordPress block editor, is a new page builder included in WordPress 5.0+. The Gutenberg editor adds content blocks and page builder-like functionality to every up-to-date WordPress website.

Essentially, Gutenberg allows you to take a post or page, and break up the content into various “blocks.” For example, WordPress blocks include an image block, paragraph block, quote block, headline block, even a button block. Read more in the WordPress Blocks: The Ultimate Guide to Gutenberg Blocks.

Getting Started

Check out the screenshot below. The first thing you will do is add a Title which is automatically styled the page heading (H1). Next click the (+) sign and start to add blocks or add your cursor and start typing.

There are all kids of blocks for different types content. Some popular blocks are Paragraph, Heading, List, Image, Video, Shortcode (You Tube, Vimeo), Columns. Some themes and plugins create custom blocks for all different types of content.

Here are some things that you can do with Gutenberg:

Drag images directly from your desktop and drop them into WordPress

You can drag and drop images and videos directly into the editor from the desktop. This saves the time of uploading separately. Once it appears in the editor you can adjust the settings as needed.

Copy and paste from anywhere into WordPress

Copy and paste from Microsoft Word, Google docs is a breeze . This saves you the time of saving text and images to your computer and pasting them from there.

Use Block Patterns to create reusable complex layouts

Block patterns make it simple to create complex, beautiful page and post layouts, using combinations of blocks that you can mix and match. You will also find block patterns in a wide variety of plugins and themes, with more added all the time. Block patterns can be found by clicking the (+) symbol at the top left side of the page.

What about my Shortcodes?

What about shortcodes? Blocks have replaced the single content window so there is less need for shortcodes. Many of the developers have replaced them with blocks. If there is a need there still is a shortcode block or custom html block that can be utilized but the block editor is signaling the end of short codes.

Columns are a great way of displaying your content

Unless your theme is using a different system, Columns are a great way to layout your content in 2-3 columns.Add the blocks you want into the columns such as headings, images, buttons and paragraphs. The column will automatically respond to different screen sizes.

Groups help to hold things together

Groups hold things together. They also area quick way to add background colors and gradients, text colors and add classes to style using CSS.

Reusable Blocks are a great way to add common elements across your website

Reusable Blocks help add common elements site wide. For example, if you create a contact us banner. You might create a couple of columns, add a image with a great call to action, and a button, wrap it all in a group. Turn that group into a reusable block and it allows you to drop that Contact Us Banner throughout your website. The thing to remember about reusable blocks is that if you make a change it updates all of them throughout the website.

Blocks are now available in widgets

Those of you that are familiar with WordPress will know about widget areas. These are designated areas that you can add widgets to (which are pieces of content very similar to blocks). Starting in WordPress 5.8 you can now add widgets to blocks! This is an amazing feature because you can add the consistent content to all areas of the site without a work around.

These are some tips to jumpstart your use of the Gutenberg Editor. The block editor is way to use and powerful. Also, WordPress and independent developers from around the world are constantly making improvements and creating new blocks and patterns. The hardest thing is getting your head around designing in pieces instead of dumping all the content in one text body. However, once you have that down things get faster and easier from there.

The Gutenberg editor has revolutionized the way that WordPress works. Hopefully, these tips will help make the transition easier for you!