Trying Out Gutenberg

WordPress is aiming for an intuitive yet rich content experience with the Gutenberg changes. Version 5.0 will bring block-based content natively into WordPress posts and pages. You’ll no longer need a page-builder plugin to do advanced formatting, and it will be easier to drop in an image, gallery, or optimize text positioning or headlines. In theory.

Where’s my image gone? (below).

Text over image overlay – Why can’t I change the text size?

I wonder if the text flows through when the post is put on social media? Integrating common social media image sizes might be smart.

Simplicity is the glory of expression.
– Walt Whitman

Playing With The Blocks

So far so good. Pretty intuitive. The Block Cap block failed and popped an error. I’m a little concerned about what happens to existing content, particularly buttons and other functions built into themes and overlay plugins.

I’m not seeing as much control of white space as I expected. Must be something I’m missing that will let me adjust spacing, padding, etc.

How Do I Change Button Text?

This Is A Preformatted Call To Action

Nice to see this kind of functionality, but formatting it isn’t intuitive at all. Where is the padding? Where do I change the button text? How do I control whether the button link opens in a new tab?

Where’s my button gone? In the draft, trust me, there’s a button…

Yes, It Does Columns

Ah, the much-hyped text-in-columns capacity. If it works well it will definitely improve the layout of some desktop sites, but will that translate into painfully unreadable text on mobile?

One of the things most of the page builder plugins have learned to do fairly well is optimize the mobile experience. I’m sure Gutenberg can learn it to, but I deeply question whether it’s ready yet.

Putting images side-by-side doesn’t seem so easy, however. Nor does embedding a combination of image and text. It obviously can be done, as there’s a block with an ad embedded. Feels very vertically-oriented, yet there’s some weird stuff going on with vertical scrolling at times.

Just Not There Yet

I don’t think this is nearly ready for primetime, nor do I think my web design clients are going to fall in love with it. Some will, but not the average person. Most of them will struggle and spend hours trying to make something that looks decent, then feel betrayed by the implied promise of this being as easy as Wix and Squarespace, which Gutenberg is apparently trying to “compete” with.

Seems strange to me, as WordPress is already demonstrably better if you’re running a business… but maybe that’s the SEO geek in me being oblivious to how much people care about looks over function, instead of understanding that it’s the synergy of both that delivers results.

Is Gutenberg conceptually “better” than the default WordPress editor? Yes, I think so. But it’s not ready to deliver on its promises yet – and the default editor is a pretty low bar to compete with. Also, because I do so much SEO, I wonder what the consequences there will be.

I just looked at the preview, and both my image and button failed to show up. Interesting. Maybe they only show when published, or maybe they’re broken. Neither is optimal. Since there was discussion of rolling out WordPress 5.0 as early as this month, that’s a bit frightening.

Here’s the Title

And what a story it was!

Wow what a great block

Whos woods these are
I think I know
His house is in    the village though

     My little house must think it queer
what is
     this     thing   ?

GitHub Gist

This is a block from Pantheon. It’s designed to show the content of a GitHub Gist. Fortunately, I have one to use as a test case.

It looks pretty weird in the editor because it displays the Gist content in a proportional font. On the front end, however, the Gist looks just fine.

Tiles

There’s a block from Sword Layouts called “Tiles.” It creates, or is supposed to create, a series of alternating image and text blocks—what I call a “checkerboard” layout. I’m not sure whether it’s meant to be used within a post or within a page, or it doesn’t matter, though it seems a bit strange to put in a post. Since a post is what I’m writing, though, here goes.

This is a photo of a re-creation of Gutenberg’s printing press, the first of its kind. Interestingly, as I type, the image changes size and shape. I think there may be a flexboxy thing happening here.

To put the image on the other side of the text, switch on the “Invert Layout” block setting. (That’s the only setting.) Images and text do not alternate automatically: you have to choose whether to do so. Also, each image/text row is a separate block.

All right, let’s publish this puppy and see what happens. It works–but it’s definitely not meant for use in such a narrow content column!

Tabbed Block Created with Advanced Content Blocks

You’d think maybe there would be (or that there soon will be) more than one kind of block available in a plugin called “Advanced Content Blocks,” but so far it’s only the one. But tabbed content is pretty popular, so I installed it to see how it works.

  • Tab 1
  • Tab 2
  • Tab 3

Tab content, which is WYSIWYG

More tab content. You can move tabs left or right once you create them.

Perhaps because the tab content is WYSIWYG, there are no settings for the block, though you can add a CSS class.

Atomic Blocks

There’s an Atomic Blocks theme as well as the plugin, but I wanted to test the plugin on its own.

Atomic Blocks Testimonial

Gutenberg changed everything. WordPress has always been about websites, but it’s not just about websites. It’s about freedom, about possibility, and about carving out your own livelihood, whether it’s by making a living through your site or by working in the WordPress ecosystem itself.

avatar

Matt Mullenweg

Co-Founder of WordPress

Atomic Blocks Profile Box

avatar

Sallie Goetsch

East Bay WordPress Meetup Organizer

Sallie has been online since 1985, built her first website in 1994, and discovered WordPress in 2005. She’s been the organizer of the East Bay WordPress Meetup in Oakland since 2009.

Atomic Blocks Notice Block

Atomic Blocks Notice

Notice! This is a notice box. You can select the color of the notice, title, and text, and choose font size.

Atomic Blocks Drop Cap

Do we need an atomic blocks drop cap? There’s a drop cap setting in WP’s default paragraph block, and when I try to insert the Atomic Blocks version, I get an error.

Atomic Blocks Accordion

Accordion Title: Click to Expand

If you were using this for a FAQ section, you’d put the question above and the answer here.

Atomic Blocks Spacer

This block adds a vertical spacer, with or without a dividing line. You can set the height of the spacer and the color, weight, and type of dividing line. It’s basically a slicker version of an <hr> tag.


Atomic Blocks Button

You can set the button size, button background and text colors, and shape (square, square with rounded corners, and “circular,” which doesn’t actually make a circle, but rather a capsule-shaped button.

And that’s it for the Atomic Blocks. Let’s see what this looks like on the front end.

Blocks from the Advanced Gutenberg Blocks Plugin

Warning

Some of these blocks appear unfinished (the Ad Banner and Ad + Text blocks don’t let you configure the ad), and some work in the editor but not on the front end (Posts, Google Maps).

Ad Banner Block

There doesn’t seem to be a way to actually edit the content of the ad. Not finished? Plugin conflict?

Alert Block

Advice

This is an alert block. You can add several kinds of these: Advice, Avoid, Warning, and Information.

Plugin Info

If you want to display info about a plugin in the WordPress Repo (say, one that you authored), this block will let you.

Advanced Gutenberg Blocks

Advanced Gutenberg Blocks

Advanced Gutenberg Blocks bring awesome blocks for the new WordPress editor, for a real WYSIWYG experience

By 

Ad with Text (or Text with Ad) Block

If you wanted to insert a square ad floated next to your content, you could use this Text+Ad block.

It keeps adding paragraphs until you run out of space…or maybe indefinitely.

It doesn’t seem that you can do the usual <enter> creates new block thing with this particular block.

Website Preview

Embeds a nice-looking preview of a web page, same as you’d see if you shared it on Facebook.

East Bay WordPress Meetup - Monthly gathering of WordPress junkies in the East San Francisco Bay

East Bay WordPress Meetup – Monthly gathering of WordPress junkies in the East San Francisco Bay

Monthly gathering of WordPress junkies in the East San Francisco Bay

https://eastbaywp.com

Post Block

This block shows you another post on your own site. Except when it doesn’t. (It looks fine in the editor.)

This is what the post block above should be showing.

Google Maps Block

Like anything else that uses Google Maps, it requires a Google Maps API Key. You need to enter that in the plugin settings.

And this is what the Google Maps block should be showing.

AGB Testimonial Block

Gutenberg changed everything. WordPress has always been about websites, but it’s not just about websites. It’s about freedom, about possibility, and about carving out your own livelihood, whether it’s by making a living through your site or by working in the WordPress ecosystem itself.

Testing

It’s okay to acknowledge that life can get complicated, but we mustn’t forget the beauty in its simplicity, too. From the multitude of stars above, to freshly mowed grass in the morning, life is simply wonderful.

Ultimate Gutenberg Blocks

I’ve added the Ultimate Gutenberg Blocks plugin from Stackable, which creates several new block types. (I’ve also added some other custom block plugins, but will test them in other posts.) Here are the different block types and the styles that the plugin provides.

Ultimate Blocks Blockquote


It’s okay to acknowledge that life can get complicated, but we mustn’t forget the beauty in its simplicity, too. From the multitude of stars above, to freshly mowed grass in the morning, life is simply wonderful.

Ultimate Blocks Testimonial

Ben Adams

Founder

Stackable: Ultimate Blocks from Gutenberg has all the blocks I need to make a great webpage.

Ultimate Blocks Team Member

Sallie Goetsch

Meetup Organizer

Sallie has been organizer of the East Bay WordPress Meetup since 2009.

Ultimate Blocks Number Blocks

01

Registration

Basically, this block has an editable number instead of a photo or icon, with a title and a text area. I don’t think it auto-increments or anything. Nope (I tried adding a second one and it still said “01.”

 Ultimate Blocks Image Box

What’s an image box? It’s an image that shows a title and subtitle on hover.

Espresso

For when you need extra pick-me-up

Ultimate Blocks Count-Up

Happy Customers

12,345

and counting

Give it the final number, and it will run through the count. Though when I go back to edit the post, the number field isn’t there. Ooops.

Ultimate Blocks Video Pop-up

People do like to have videos pop up and play in lightboxes. It’s not a feature I use very often myself, though.

If you use a video from YouTube or Vimeo, just enter its ID, not its URL.

Ultimate GB Blocks Pull Quote

You can set the text color and border color with this block, but really, it’s a styled blockquote, not a pullquote–the thing that makes a pullquote pull is that it sits at least partly outside the content area, to the left or right.

Ultimate GB Blocks Expand/Show More

This is “less text,” similar to an accordion title.

Show more

Ultimate Blocks Notification

Everyone and his brother has created a notification block, each a little different. This one has settings for type (success, error, warning, information) and for dismissability, as well as for background and text color.

Success! You did everything right.

Ultimate Blocks Call to Action Block

This block includes a headline, text, and a button with a link field. I tried to edit the button text, and couldn’t. The button isn’t showing up at all on the front end.

Get More Blocks Like This

Get Stackable: Ultimate Gutenberg Blocks today.  Apart from adding new blocks, it gives Gutenberg users more options and settings to tinker with, expanding Gutenberg’s functionality.

Ultimate Blocks Spacer Block

This is a vertical spacer. The only setting is for height. I added one because otherwise there was no distinction between the real CTA block and the screenshot showing what it should look like. Now there’s extra space on account of this heading and paragraph.

This is what the CTA block is supposed to look like.

Welcome to the Gutenberg Editor

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.

This is more stuff That you can add

This is my second paragraph

Of Mountains & Printing Presses

What you are reading now is a text block, the most basic block of all. The text block has its own controls to be moved freely around the post…

… like this one, which is right aligned.

Headings are separate blocks as well, which helps with the outline and organization of your content.

A Picture is worth a Thousand Words

Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you'll find aspects of adding captions or going full-width with your pictures much easier and robust than before.

Beautiful landscape
Give it a try. Press the "wide" button on the image toolbar.

Try selecting and removing or editing the caption, now you don't have to be careful about selecting the image or other text by mistake and ruining the presentation.

The Inserter Tool

Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need to figure out HTML tags, classes, or remember complicated shortcode syntax. That's the spirit behind the inserter—the (+) button you'll see around the editor—which allows you to browse all available content blocks and add them into your post. Plugins and themes are able to register their own, opening up all sort of possibilities for rich editing and publishing.

Go give it a try, you may discover things WordPress can already add into your posts that you didn't know about. Here's a short list of what you can currently find there:

  • Text & Headings
  • Images & Videos
  • Galleries
  • Embeds, like YouTube, Tweets, or other WordPress posts.
  • Layout blocks, like Buttons, Hero Images, Separators, etc.
  • And Lists like this one of course 🙂

Visual Editing

A huge benefit of blocks is that you can edit them in place and manipulate your content directly. Instead of having fields for editing things like the source of a quote, or the text of a button, you can directly change the content. Try editing the following quote:

The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.

Matt Mullenweg, 2017

The information corresponding to the source of the quote is a separate text field, similar to captions under images, so the structure of the quote is protected even if you select, modify, or remove the source. It's always easy to add it back.

Blocks can be anything you need. For instance, you may want to add a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.

You can change the amount of columns in your galleries by dragging a slider in the block inspector in the sidebar.

Media Rich

If you combine the new wide and full-wide alignments with galleries, you can create a very media rich layout, very quickly:

Accessibility is important don't forget image alt attribute

Sure, the full-wide image can be pretty big. But sometimes the image is worth it.

The above is a gallery with just two images. It's an easier way to create visually appealing layouts, without having to deal with floats. You can also easily convert the gallery back to individual images again, by using the block switcher.

Any block can opt into these alignments. The embed block has them also, and is responsive out of the box:

You can build any block you like, static or dynamic, decorative or plain. Here's a pullquote block:

Code is Poetry

The WordPress community

If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the GitHub repository.


Thanks for testing Gutenberg!

?