Welcome to the Gutenberg Editor

Of Mountains & Printing Presses

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.

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
If your theme supports it, you’ll see the “wide” button on the image toolbar. Give it a try.

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 endeavor 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!

👋

Atomic Blocks, August 2018 Version

I tested Atomic Blocks on this site before. New blocks have been added since, and I presume the earlier blocks have been updated, so I’m making a new post about them. (Also, last time I tested them was with the Twenty Seventeen theme. I’m now using the Atomic Blocks theme.)

Atomic Blocks Post Grid, Grid View

Welcome to the Gutenberg Editor

Of Mountains & Printing Presses 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…

Continue Reading

Atomic Blocks Post Grid, List View

Welcome to the Gutenberg Editor

Of Mountains & Printing Presses 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…

Continue Reading

Atomic Blocks Button

This is a button created with Atomic Blocks. It takes you to the Atomic Blocks website. You can modify shape, size, and text and background color.

Atomic Blocks Testimonial

I’m writing this testimonial because I think the Atomic Blocks plugin and theme are awesome! Except I really think testimonials should be a post type and not a block. I really do.

avatar

Sallie Goetsch

East Bay WordPress Meetup Organizer

Atomic Blocks Profile Box

Profiles also seem to be popular as custom blocks, but they seem like another thing that really ought to be a post type, at least if you have more than a few.

avatar

Sallie Goetsch

WP Fangirl

Sallie Goetsch (rhymes with ‘sketch’) started working with WordPress in 2005. We’ve come a long way, baby.

Atomic Blocks Notice

Notice! You can’t dismiss me.

I think I like the basic style better than the alert from CoBlocks. Would I use a notice block? Not often, except for things like “Hey, this post is old!” notices, and those are inserted programmatically.

Your choices are for dismissable and non-dismissable notices. I made this one non-dismissable, even though that’s terrible practice.

Atomic Blocks Drop Cap

I’m not at all sure why we need a custom drop cap box when drop caps are an option in the default paragraph blocks. It’s interesting to see how it handles the contraction. You can switch styles for your drop cap: just the letter, a dark square background, or a border.

Atomic Blocks Spacer

This is the sort of thing people seem to want, especially if they’re not handy with CSS: blocks to add horizontal or vertical space. This spacer block lets you determine height and whether there’s a divider. It’s like a customizable horizontal rule tag.


Atomic Blocks Accordion

Click Me to Open

Interestingly, the Atomic Blocks accordion has fewer style options than the CoBlocks accordion. Your choices are font size and whether the block is open by default.

Atomic Blocks Call to Action

This is pretty customizable: background color or image, title size, text size, text color, button color/size. Pretty much all you need in most CTAs.

Call to Action

Take some action, dang it!

Atomic Blocks Sharing Block

I like this better than the CoBlocks version, though I still think sharing buttons are not something you should have to manually insert. Of course, if we’re talking about building templates made from blocks, this would be a block you’d include in a template.

Atomic Blocks Container

Container blocks are an important concept if you want to be able to put blocks next to each other. The core team is working on doing this with column wrappers, but I’m not sure it’s working. (I’ll do a core blocks test after lunch.)

Container Heading

This is a full-width paragraph inside a container. You won’t know it’s full-width until I add some more words, though.

This is a paragraph inside a column. The old text column block seems to have gone away. So we now have a column container inside an Atomic Blocks container. We’re going to reach Inception pretty soon.

The columns block basically lets you create a single row with the number of columns you want, whereas the container block lets you include multiple rows for one block and move it around.

Ever expanding fibonacci spiral made from a daisy.

Here’s a nice little GIF to illustrate the recursion happening here.

Cover Image Inside Container

These are the CoBlocks blocks

CoBlocks is one of the custom block plugins I’ve installed on this site. The problem with installing a lot of custom block plugins is that it gets difficult to figure out which blocks come from where when adding a block–not to mention the fact that there are more blocks to hunt through, an issue I’ve also noticed with page-builders.

CoBlocks Author Block

avatar

This is a CoBlocks author block

Sallie Goetsch

Sallie Goetsch (rhymes with ‘sketch’) has been organizer of the East Bay WordPress Meetup since 2009.

Follow

CoBlocks Dynamic Separator


You get your choice of heights and between line and dot styles, with different colors for the lines.

CoBlocks Accordion Block

Accordion Title

Accordion Text. Note that it appears you have to add a new block for each accordion item, but it’s a fairly slick experience to create.

CoBlocks Alert Block

Warning!

This is a CoBlocks alert block. You can set float/width and background and heading colors. And a border. But not, apparently, text sizes or icons, which I’ve seen in some alert blocks. Also, the block title isn’t an actual heading.

CoBlocks Click-to-tweet Block

It’s astonishing how many people confuse “Without knowing code” and “Without knowing anything.”

CoBlocks Gif Block

Grumpy Cat licking her chops

I’m not really a GIF person, but I am a Grumpy Cat fan. (The block lets you insert Gifs from Giphy.)

CoBlocks Gist Block

I’ve already tested the separate Gist block from Pantheon. CoBlocks also has a Gist block, and it works just fine.

CoBlocks Highlight Block

Assuming I wanted to highlight something, I could use a highlight block. You can adjust the text color and highlight color.

CoBlocks Pricing Table

Plan A

$
99
  • 1 site

Plan B

$
199
  • 5 sites

I’m trying to remember where I last used a pricing table, and it’s possible that I actually haven’t. However, they seem to be popular thing with people who are selling packages, either software or services. There are some quirks with this one: only two columns, and some CSS issues with the .alignwide class.

CoBlocks Social Block

I’m not sure whether social sharing links should really be a block. They seem like something that it’s better to add in site-wide instead of inserting in each post. Also, it would appear you can set one size for all icons, but not per-icon colors.

Conclusion

The CoBlocks blocks appear to play well with the Atomic Blocks theme and not to mess up the default WP blocks.

Trying Out Gutenberg

Where’s my image gone? (below).

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.

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.

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.