How to Use Gutenberg on the Eve of WordPress 5.0

Get ready, folks, the long-waited Gutenberg editor is coming soon to your WordPress core.

Last week WordPress updated to version 4.9.5 and I don’t know how many minor versions they will release before hitting the big 5.0, but it’s obviously right around the corner.

At this precipitous moment in WordPress history, I decided to take another tour of this famous, dreaded, and famously dreaded update known as Gutenberg.

If you are unfamiliar with Gutenberg, here’s how WordPress introduces it:

“The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you’ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.”

If you’ve ever used a page builder – like Elementor, Beaver, Thrive, or Visual Composer – you will be comfortable, if not unsatisfied, using Gutenberg. It creates the same sorts of content blocks but without the intuitive customizing.

If you are unfamiliar with other pages builders, you will like the ease in which you can manipulate elements on the page with Gutenberg. And once its part of the core, you’ll appreciate not paying for or installing it as a plugin.

I discussed Gutenberg back in September of 2017 in WILL GUTENBERG REVOLUTIONIZE WORDPRESS OR DRIVE USERS TO MEDIUM? as I played with version 1.1.1. Some things I like, some I didn’t. When I tried out a later version, I hated it, finding it too unintuitive.

For my current revisitation of Gutenberg, I installed the version 2.6 plugin and set about to create a page using all the various Blocks and Embeds, and make it look good without resorting to CSS customizations.

When you start a new page or post in Gutenberg, you’re given two blocks to begin: Add Title and Write Your Story. Hovering over or hitting Return from either of these brings up a new block or the + sign to add one manually.

Blocks

When you click the + sign you get a menu of Blocks and Embeds to add. The ones you use get bumped up to Suggested, which is a handy time saver.

Image

I added an Image block and added an image from my Media Library. But instead of choosing a size in the Library, the image gets placed and the size chosen from the Gutenberg dashboard under Block.

Heading

Adding a Heading with a H2 tag was simple.

Paragraph

Add a Block for Paragraph, and if you paste a page worth of text, Gutenberg will break each paragraph into its own block, which is good for modifying. There are also settings for text size, drop cap, background and text color, and alignment.

Columns

Probably the most welcome part of Gutenberg is Text Columns and the Columns (Experimental), which presumably won’t always be experimental. Columns are a highly desired aspect of web design and often require their own plugin outside of page builders. These were super easy to create and look quite nice.

Image Galleries

Normally, you need to be connected to Jetpack, or use an outside plugin, to get media galleries more interesting than the basic grid style. With this gallery maker, you upload the images in the order you like and play with the number of columns to get the desired result. Matching the number of columns to images gives you a basic grid. But setting one less column and the last image gets enlarged, etcetera.

Tables

Another highly desired feature is one of Tables. People like seeing charts of information, set in neat orderly boxes.  The Gutenberg tables look nice and the size of each boxes can be easily modified, with options to add rows and columns before and after.

Audio

An Mp4 audio clip can be added to a block, from a URL or the Media Library, and the display looks nice but kinda boring.

Buttons

Whoo-hoo, we have Buttons! Now your viewers will have no doubt of being called to action.

The Button accepts text for itself as well a url to link to and it has options for background and text color.

Lists

Not much to see here but a bulleted list. Easier to paste line by line, but can be finessed when pasting the whole list.

Pull Quotes

Then, there’s the Pull Quote, which looks quite elegant on the Edit Page…

 …but in the Preview, ick! It seems there is no alternative to the dark blue background and the bad alignment.

Hopefully, this will change.

Widgets – Latest Posts

Let’s say you want to insert a grid of your posts. Place the widget in a block, click the grid icon (not the list icon) and then in the block settings on the right, you set the order, category, number of items and columns.

Well, guess what. No matter what you do, you get the list format, not the grid. Set it any way you like and you’re stuck with a list.

Hopefully, this too will change.

Shortcodes

The Shortcode widget allows you to add shortcodes from anywhere on your site. In this case, I place the same PR Newswire Sidebar Widget Code I have in my sidebars, and it works! It even pulls in thumbnails that my sidebar Text widget seems to ignore. Nice!

Video

Using the Video Widget in a Block perplexingly results in what looks like the audio display. I’m not sure why this is, but it sucks.

By contrast, using the Video Embed works much better.

Still, you can place a YouTube URL in a Paragraph block, which displays the video classically.

Embeds

Ok, getting fancy now, if you want to display your Twitter, Facebook, or a number of online platforms, this is an easy way to do it. The only trouble with Embeds is its lack of settings, short of customizing with CSS or HTML. And, no way to adjust the size of the display.

To solve the latter issue, I experimented with Columns (Experimental). Unlike the Text Columns, these allowed me to insert Embed Blocks and it worked!

I tried Embed with a number of services, but only Twitter and Meetup worked. Facebook, Instagram, and Flickr all said, “Sorry, we could not embed that content.”

Well, harrumpph! Hopefully, that bug will be fixed soon.

The Age of Gutenberg Dawns

So, those are almost all the things you can do with Gutenberg without customizations.

To see the final outcome of my demo go to this page.

I expect that once Gutenberg becomes part of the WordPress version 5.0 core, it will be used more by designers who just want to add some columns or incorporate a list of posts. And hopefully the customizing will get easier, like with Elementor.

But for now, this is what Gutenberg can do.

Have you tried Gutenberg? What do you think of it? More importantly, how is it making your life on WordPress easier?

Learn WordPress now!