Playing With the Gutenberg Block Editor

Johannes Gutenberg and page from Gutenberg Bible

Dear writers and bloggers, WordPress is evolving. The future “Gutenberg” block editor will allow WordPress users to fancy-up their blog or website with ease. Meanwhile, “Gutenberg” is available as a plugin for WordPress.org users to play with and learn.

Not being able to resist a fun experiment, I installed the “Gutenberg” plugin — as well as the “Atomic Blocks” plugin and the “Atomic Blocks” theme, both of which are specialized and styled to enhance “Gutenberg” blocks.

So far, so good.
Nice, clean editing interface.
You can add background colors to paragraphs!

Building Blocks in the Editor

In case you’re wondering, “blocks” are sections of text or media that build your post or page, like building blocks. The paragraph block is the default mode, and continues with every strike of the enter key, unless you choose to insert a different kind of block.

For instance, you could insert a quote block…

Blocks are a great new tool for building engaging content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge.

~ WordPress

As a helpful touch, the quote block reminded me to include a citation. Nice.

Image Block Variety

The image block deals with images just as you’d expect. You can set a left, right or center alignment, and a custom link. But its simple to add more pizzazz. Let’s see what can happen…

Chester the Alpha Bichon
This image is set to wide-width.

The wide-width setting is exactly what I wanted. The image expands beyond the text margins on both sides.

(Shortly, however, I will need to remove the Atomic Blocks theme, as it doesn’t provide the array of features I need for my website. But you will still be able to see how the wide and full images look, if you follow the link to the Atomic Block theme demo.)

Now if you’d rather create a division, transition, or a special focal point, you can set an image to full-width…

Dog playing with stick in water
This image is set to full-width.

You can use the cover image block to create a hero header, which is a title laid over a background image. A cover image is especially useful for branded promotions that are meant to be placed on the homepage or a landing page. In fact, it’s clear that “Gutenberg” will greatly facilitate the creation of a stunning static homepage.

Exploring Embed Blocks

What other blocks can we play with? How about embedding a Twitter Tweet? I’m partial to center-aligned social media embeds. Can “Gutenberg” do that?

No, “Gutenberg” cannot center a Tweet. Sigh. For that, you’d need to use a regular paragraph block and follow the instructions from ThemeSkills: How to Embed a Tweet and Center Align It in WordPress.

Maybe “Gutenberg” will allow embed alignment options in the future. I’m sure there will be many refinements. (However, if “Gutenberg” is a complete turn-off for you, the tweet tells you how to outmaneuver the upcoming change.)

How does a WordPress embed appear? See for yourself…

“Gutenberg” has done a crackerjack job with the WordPress embed. (Although, not centered.) It’s an elegant solution for sharing a fellow blogger’s post, with the featured image and a perfect attribution included.

Testing “Gutenberg” With Other Themes

I’ve fooled with “Gutenberg” blocks long enough. Now I want to see how well the editor works with other themes — themes that have not been specifically designed for “Gutenberg.” Bye…

…OK, I’m back. I quickly tested “Gutenberg” with several other themes, which made me realize something. The page attribution option in “Gutenberg” is missing. There is no way to select a full-width (no sidebar) page. Therefore, the beautiful wide-width and full-width images in this post are not revealed to full effect on pages with a sidebar. In addition, a theme must be designed to accommodate wide-width and full-width images, in the first place.

No worries. Before long, there will be an army of “Gutenberg-Ready” themes from which to choose.

My “Gutenberg” Take-Away

“Gutenberg” incorporates page-builder properties right into the native WordPress editor. It enables users to create sophisticated and appealing websites — easily. No exaggeration.

I have tried almost every page-builder theme or plugin known to man, free and premium. Each boasts how user-friendly it is. In reality, they are all clunky, royal pains-in-the-neck with long learning curves.  

But I think “Gutenberg” is pure elegant simplicity… that works… as intended… easy-peasy. Dear Reader, have you explored “Gutenberg” yet? What are your impressions? (See comment section below.) 

And, thank you, WordPress. You’re the best. And thanks to Johannes Gutenberg…

This is the “Gutenberg” Youtube embed block with caption, by the way.

The Joy of Writing

Published by JoAnn Chateau

Website owner and administrator of โ€œProgressive Graffiti.โ€

9 thoughts on “Playing With the Gutenberg Block Editor

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: