G 19th November 2017
WordPress

Gutenberg 1.7.0

WordPress 5.0 will soon be a thing and it might feature a brand new content editor, that will take place of the good old TinyMCE—Gutenberg. It's still in development and the first digit in the version number doesn't mean it actually left the beta stage.

I got curious, so I've installed the beta plugin from WordPress repository to check it here. Let's see!

This is the development plugin for the new block editor in core. Meant for development, do not run on real sites.

Rebel, right? But even if something breaks, I'll be able to fix it, so it's cool. I'm aware what I'm doing.

After installing the Gutenberg, you've got a new draft in your posts. It show some of the features, like the block with fixed image and text on it, quotes with citation, wide pictures, etc.

Features

Focus on your content

Have you seen the non-distraction editor in WordPress a few years ago? If so, you might remember that it was a white background and your text in the middle. About a year ago there was an update to it. They changed the non-distraction mode to something absolutely not useful. The screen was twitching every time you moved the cursor. Instead of white background, you just got bigger TinyMCE window. Awful.

Now, you still have the left column visible (you can collapse it, you know?), but you can hide the right one by clicking the "settings" icon.

Autosaving

An actual autosave. Not sure if proper is the right word, because it's a little bit too aggressive, but it works and that's the most important part. Yes, okay, you're now curious why too aggressive. Writing a post that contained 515 words "spawned" 79 revisions, that's a lot. The content is saved now every time you stop typing, even for a few seconds. I know, I'm making a lot of pauses, to think about the next sentence or things I want to point in the paragraphs below.

Yes, of course, I could use Typora, and I usually will, but writing in WordPress is still something I'll do, especially if I want something more than just text.

Content Blocks

Have you ever seen Squarespace on the inside? Or at least Medium? Let's say it's similar now.

You have blocks. Your whole post is made with these little pieces, like headings, paragraphs, quotes, etc. Formatting is there when you need it, meaning: you have a tooltip after selecting part of the text on when you move your cursor over. Cool, really cool.

Another cool thing, you can easily rearrange the order of your blocks by simply clicking arrow up or down on the left side of the block you want to move.

Blocks can be edited as HTML, so you can still embed things or write the code you need there. But, a lot of blocks is already there, which reminds me more of Squarespace than Medium—you can embed latest posts or comments, shortcodes (obviously), the read more mark, content in two columns, buttons, single images, galleries and even pull quotes (and regular quotes too, as the one right on the beginning).

Let's try some, okay?

Columns

Let's try some really cool visual features. Like columns!

Ta-da!
It works, as you can see.

Text inside columns is just text, no paragraphs, so enter is still an enter, just breaks the line without adding new content block.

By default, it looks like this on mobile devices too and you can't have a different number of columns. They're made in HTML, not CSS (meaning: each column is in a separate block while parent's display is set to flex. It's not bad, definitely could've been worse, but I'm not sure if real CSS columns would not be a better idea. Here it's up to us, what content goes where, while CSS splits text to make columns even.

Cover Image

Oops. That's actually something that I can't do. The editor breaks and I can't choose an image from library or upload one. The block says that I can drop the image, but that just inserts the picture in a new block, as you can see below.

Yet, that block seems really nice (when it works), judging from the default post made by Gutenberg. It will definitely make lives easier, especially for those who like Twitter Bootstrap style.

(Okay, I won't be lazy, I'll try to copy/paste the code from preview post to show you how that looks). Aaaand. There you go.

Split. Original Motion Picture Soundtrack.

The caption is centred with the image in the background. The size of the block is… a mystery, at least for now. It looks like it's set to the maximum width it can take and fixed 430 px in height. Cool? Not cool?

When the block works properly, you can choose the opacity of the black overlay.

Just paragraph with "extra something"

This is just a regular paragraph. But, if you click the "settings" icon I was talking about earlier, then you can change the style of it. You can choose the colour of background and text and decide if you want a drop cap (that kinda breaks the editor inside the block, so, fun, again).

Cool? As far as you know what you're doing. It can be used for good and bad reasons, and I can already imagine those few people who will definitely overuse it.

Pull quote

if we all should die tonight,
we will have no regrets

"Die tonight live forever" by Innerpartysystem

Ouch. That hurts, badly. I understand a lot, I really do, but forcing the colour of the text? I know, I know, most of the websites have a whitish background, like normal people, but… Damn. Why did you even…? Ugh. (There are no settings with pull quotes!)

So, yes, the pull quote is a nightmare, for now. Overwriting font colour? First strike. Overwriting my beautiful font? Second strike. The size of this thing is actually also not acceptable. So, bye. We won't be friends.

Widgets?

Cool. And now I wonder if it'll change to always show the last 6 posts, or that'll stay exactly that way forever. Okay, I believe it's "absolute" latest posts, meaning, after publishing this post, you'll see it in first position.

But, it would be good to have an option, relative "latest posts" sounds way more useful.

General opinion

It looks really good if you can overlook that "something" on the left bottom of your editor. (Looks like TinyMCE buttons, stacked vertically with "flying" box where you input link's URL.

Image pulled to the left.
(good movie by the way)

Yoast SEO somehow works! But fields from Advanced Custom Fields not. I can't even see the default Custom Fields. It sucks. Media Library doesn't work as well. In theory, I can upload a pic, but it won't show and even if (I tried to upload it via Media page) I can't select the image, either to place it in the block or set as a featured image. Dropping the image inside the editor works, but that's all.

It'll be good. One day. It looks and feels really cool. Writing is easy and as an experience, a lot nicer than small box with TinyMCE. But. Without ACF, meta boxes in general, it's just a writing tool, which WordPress is not. Also, it's bugged, like OMFG level of bugged. While I'm not that much surprised it doesn't want to work perfectly with Grammarly, it's strange, that it breaks even with basic blocks, that we're getting with the editor. Either way, I'm excited and as a masochist I'll use it (and move to Classic Editor to set up the things that I'm unable to do here).

Bugs. Bugs. Bugs… Bunny.

P.S. I can't understand how Gutenberg, filled with so many bugs, made it to the beta stage.

| | |
11