WordPress 5.0 Beta 1

I’m writing this post using the new block-based editor that comes packaged with the first WordPress 5.0 beta, known previously and externally as Gutenberg.

For just general writing, so far it ain’t so bad, but one thing that bugs me straight away is that the auto-save causes the UI in the upper right corner to jiggle around every few seconds. I keep thinking it’s a notification in macOS, so I stop writing to look up at it, because it’s all just outside my periphery.

I type. I pause to think. Autosave triggers. I look up and right. I forget my original thought.

In this post, I haven’t needed to add any blocks or format any text, and I haven’t needed to move any text or paragraphs around. I have a feeling this is how most people will interact with this editor most of the time, and for that, it generally gets the job done no different than the classic editor did.

I suppose it’s about time I try to insert some kind of image, so here’s a shot I took today of some concrete that got poured behind the building my office is in.

Fresh Concrete on Union Street

I think it’s a little weird that the default new-block buttons are: image, header, and gallery. (I think think it’s even weirder these change over time to be my most-used blocks. Consistency is gone.)

It’s weird when I hover over the “P” for paragraph button, that it changes to 2 arrows creating a circle. No other buttons change their contents on hover; what makes that one special? And it changing makes me afraid to interact with it, because I’m afraid of what it does now.

The vertical elipsis icon reminds me of Pokey the cactus from Super Mario Bros. It’s literal usage is to indicate an intentional omission of a word, so… it’s a stretch to use it here, but it’s not totally semantically inaccurate, I guess?

I also don’t like that new empty blocks don’t have the hover-bar UI thing above them. I think it would feel more natural if the new default block were just a paragraph always. This new rogue block has a “+” next to it, but clicking it doesn’t actually add anything – it reveals a menu to pick the block type from a huge accordion picker.

The more that I move the mouse to pick blocks and click on things, I’m noticing a lot of hidden UI reveal itself and then disappear in ways that don’t feel natural to me. I’m not digging this part of the experience at all. There are grey and blue hover/focus outlines on blocks, toolbars pop-up, the buttons in them have tooltips that pop-up, and there’s a grabber UI for relocating blocks that comes and goes – it’s just… a lot going on.

I’m going to try the drop cap feature on this block. It’s turned on (blue) now, but I don’t actually see a drop cap. If I save and preview the post, it’s there, but it’s not in the editor. Oddly, it’s targeting both the “I” and the apostrophe from “I’m” which doesn’t seem correct. Why wouldn’t it just target the first letter by itself?

Oh. So the drop cap is only visible when I’m not typing in the box. When I hit enter and created a new block, the drop cap became visible in the editor. That feels super weird, but it’s hard to know if that’s a bug or a feature. That’s kinda how I feel with most of this so far – it all feels like everything is very intentional, while also feeling like nothing I want it to do.

This paragraph has a green background with white text. I’m not sure why this is even an option yet. This is the kind of feature I would wait to build after the rest of the editor is working correctly.

A warning appeared that this color combination might be hard to read, but I can’t imagine that white-on-green is actually that horrible.

It’a a running joke amongst some close friends that I’m going color blind, specifically around oranges and reds. Naturally, I don’t see that as a problem. 🙄

It was nice of the editor to add some padding around it automatically, but unfortunately I found another bug with this feature. If you insert a new line without creating a new block, it looks perfect in the editor, but that new line is interpreted as a new paragraph when previewing it theme-side.

These side-by-side images went in pretty normally, but I think the gradient effect is not the greatest.

It’s odd that the “Settings” sidebar thing, under “Block”, doesn’t actually let you change the block type there. It shows what kind of block it is, but clicking it does nothing. Why isn’t that a block-picker? It has the same icon in it as the hover-bar thing, but it’s not interactive.

Why aren’t these the same height?

I also noticed in writing this that I’m not sure what the many, many UI dinguses are actually named. Inspector? Toolbar? Is a meta-box still what we call these inspector sections? Is there a glossary of terms somewhere?

And why is it when I’m focused on a block, I can’t insert a new block because the hover-bar thing is in the way? The “+” is gone, and I need to click out of the block and hover over it to make the “+” come back so I can insert something new.

I just floated that button over there, which worked OK, but now I lost it because I inserted a block ahead of it. No idea how that happened. Let me try that again. OK I think it’s back. Color picker is nice. Why no hover color or effect?

The button block had a button with an “enter” looking arrow in it that, when hovered over, popped up a tooltip that said “Apply.” I clicked it, and it didn’t do anything. I assume it applied, but what did it apply? Why is it an “enter” arrow looking thing? I’m feeling a bit overwhelmed with iconography at this point.

  • Let’s try a list
  • How’s it work?
  • What formatting options does it have
  • In the “Settings” inspector bar thing, it looks like it has no settings
  • The hover-bar is back. What’s it got there?
  • Oh, all the typical list settings are there, but they disappear when I type
  • Hovering over the list icon brings back the double arrows again. No like.
    • I can indentPressing tab does not indentI can’t get multiple indented list items to work
  • When I click enter, it doesn’t retain the indentation
  • Nested lists are totally broken and not working

This is a quote block. This theme of mine supports them. Hopefully it works!

–JJJ

Clicking enter has me locked into the citation block



I can’t get out


Looks like I need to use the arrow-down key to get out.

Phew. That was close.

This is a heading. The “Settings” inspector thing has options here. I can pick H1-6, plus text alignment. I’m gonna center it, because why the heck not.

I'm gonna write some 1337 code in this box.

Hitting enter in here also does not break me out of the block.



No matter what I do.

I guess it's arrow-down time again.

Yep. That did it. But now that I’m in this paragraph block, arrow-down doesn’t do anything. So weird.

Hitting enter got me here.

^— That’s a spacer. Why is that even a block option when basic things like lists don’t work correctly?

Let’s try columns

Hitting enter kept me in this one

Hitting tab kinda focused on this one, but I still couldn’t type in it.

Finding the parent block to adjust the number of columns is really hard.

There’s only a 1px target to click to target the parent block to make this 3rd column

Hitting enter makes a new block in this column

I needed to hit the down arrow to get out of the column block.

Mr. Paul!

Here’s me testing the “Media & Text” block. This one seems to work like I expect it to, except there is no parent-block hover-bar picker thing, and clicking the image doesn’t do anything. I expect that to pull the media library back up. How do I change that image?

Oh. I need to click the parent block for a hover-bar to appear. So, now it’s a click-bar? Huh.

I couldn’t enter out of the above block, so arrow-down again!

Hitting enter brings me to a new line in this same block.

Now, hitting enter a third time brought me here. That felt like a bug, but I’m honestly not sure how I’d duplicate it.

THIS IS A PULL QUOTE

Benjamin Franklin

Had to arrow-down out of that one, too. I guess it’s just paragraphs that need entering out of, and maybe other random ones?

That button should take you to a post about bbPress 2.6 caching. Having buttons like that is a nice touch, but theme-side, it’s not even a button – it’s an anchor. 🤦‍♂️

On that 🎵 I think I’ve done all the testing I can do for 1 hour. ✌️

Oh wait… Category search doesn’t work. UGH.


Comments

13 responses to “WordPress 5.0 Beta 1”

  1. Based exclusively on your writing, how can that be a “Beta 1”. It sounds to me like an alpha version.

    I really don’t get what is happening… why don’t we wait for Gutenberg to be completed, tested and functional as a plugin before moving it to the core.

    My summary of this story his: “WordPress 5.0: Moving an incomplete untested beta plugin into a stable software”.

    By the way, this was a great read. At first, I was wondering why you waited so long to make such review and then I was like “oh wait… because Beta 1 was just released”. According to the timeline, even if you were quick to test, it feels to me like it’s too late.

    Will the community be able to change the Titanic’s trajectory? I truly wish…

    1. Realworld Dev Avatar
      Realworld Dev

      It’s not even alpha, it’s appers to be a design study, more like a wireframe demo.

      The only possible explaination for the rush, lots of money is involved, or lots of stupidity, or why not both.

  2. Gutenbog Avatar
    Gutenbog

    O.M.G.

  3. Great post. So many of the reactions you had matched mine.

    re: the green box

    A) Completely agree that it’s weird that background color for paragraphs was an early feature added to the editor, and it’s simultaneously frustrating you can’t use it across multiple paragraphs. (Once you give people a new feature, they often find all the things they can’t do with it first.)

    B) Regarding contrast, it’s easy to test for color contrast! Here’s those exact colors: https://contrast-ratio.com/#%23eee-on-%2308a300. The formula is used so those of us with good vision don’t let ourselves eyeball a combo and think it’ll be easy for everyone to read. I agree sometimes that certain contrasts seem low _to me_, but I’m just one data point and so I trust the formulas.

  4. kill it with fire

  5. Good read. I totally share your thoughts. I have initially added to almost 10 websites, but after a month or so, I removed and I have installed Classic Editor everywhere. Also, I will definitely not update in 2018.

    I’m keeping a close eye on ClassicPress and I intend to contribute and give it a shot.

  6. …it’s hard to know if that’s a bug or a feature.

    This should be Gutenberg’s slogan.

  7. This article speaks to me. It is exactly how I felt testing it out a few days ago. I really don’t understand why Matt keeps touting the install numbers. Nobody cares that it’s on 50 million sites (or whatever it is). It is still broken and far from being ready to go into core or replace the classic editor.

  8. Hashim Warren Avatar
    Hashim Warren

    You must hate change 🙂

    1. You must not know me very well. <3

  9. Thanks for this John, apologies for the length of this but wanted to make sure I responded.

    The default new blocks and their adaption to most-used has been a point that has gone back and forth through iteration. In feedback they are being seen as useful but that use is variable depending on the person. It’s a valid point about consistency, you can change something if it becomes more worthwhile on the change, in this case for you that wasn’t the case. I totally think this area is something to iterate on going forward. What for you would make that useful?

    The block changing interface again is one that’s had some of the most iterations of any. I don’t think honestly it’s there yet but this is the best one in testing so far. Personally, I think this is a prime area of iteration going forward as a needed interaction and one that is a part of a lot of workflows. Any ideas what for you would have made you less afraid?

    I wanted to pause a little as there is a lot of in this post personal preferences. I wanted to thank you for that. Whilst as you know a product can’t fit everyone’s personal ‘just right’ needs, seeing flows like this and being able to follow along with these stories is incredibly useful. It also as a result shows where in super personal flows plugins could come in for some (it shouldn’t of course need a plugin).

    Regarding the drop cap reveal/hiding. That is an issue and something ideally to get resolved for 5.0. The issue is: https://github.com/WordPress/gutenberg/issues/10832 to follow along.

    > A warning appeared that this color combination might be hard to read, but I can’t imagine that white-on-green is actually that horrible.

    It’s really interesting what does pass contrast check. Actually those colors are very close to passing but just a few notes away.

    You rightly point out a difference between theme and the editor. Does your theme have any Gutenberg styles? I ask as there’s a delicate balancing act going on between the editor being too forceful with theme styles, or not forceful enough. I am not totally sure the balance has been reached yet, but it’s something worth exploring more.

    It’s interesting you want to change the block under the settings. I totally see that worth making into an enhancement going forward but we’d need to observe a little to see how many do want this. I made an issue just to explore: https://github.com/WordPress/gutenberg/issues/11292.

    Naming is hard as you point out. The documentation effort going on for Gutenberg is going to solve a lot of this. You are right though, coming up with agreed definitions is crucial.

    Regarding your button block being added then reappearing, I would love to get some steps there as that sounds like it could be a bug. I did try to get it to recreate but couldn’t.

    What has a color picker added to it or not is a point that absolutely needs iteration. If it gets added to everything then rapidly the interface becomes overwhelming. If it doesn’t get added to enough, then frustration happens. I absolutely can see this as an area to iterate. What the theme does again impacts here and this came up in the block audit of the button: https://github.com/WordPress/gutenberg/issues/8971.

    The link within the button is something there’s an issue for that hopefully will get into 5.0: https://github.com/WordPress/gutenberg/issues/6392. Unifying what happens when you apply a link is important.

    I would love to find out more about what was broken for you with nested lists. Whilst there is the option to add via indent, could I get your steps there please?

    Ah the spacer! This actually was a surprisingly popular block. It was created just to see and it certainly proved to be incredibly popular. It’s a common part of a lot of workflows. Likely, this is a foreteller of the need for layout control, but it was interesting to see.

    With the media and image block I was able to change the image by clicking the existing image and pencil icon. Could I dig a little more if this was a case of discoverability or that not being available for you? I would love to reach into that flow a bit. Also hello Mr Paul!

    What about category search didn’t work for you? That should be close to parity so good to find out and get an issue reported.

    If you can duplicate your hitting enter bugs that would be great as it seems something worth digging into. Feel free to reach out and happy to go through anything here as I know it’s a lot but I really wanted to try and work through your experience. Thanks again for doing this.

  10. John Teague Avatar
    John Teague

    Thanks for the test write up, John. It flags some issues to keep an eye on, and I learned some things. Kudos.

  11. Astalavista Avatar
    Astalavista

    Last minute blog about “Meta Box Compatibility Flags” by pento is a clear “F*ck you all, we don’t care about you”.

    Let’s hope that finally everybody starts to understand this.

    Gutenberg in the end wants to replace any third party plugins like ACF or Pods or Toolset etc. with their own templates and Gutenberg Custom Fields (see plugin directory, it’s already there, waiting for merge) and Gutenberg wants to replace all third party page builders in its phase 3 and 4, no matter how hard the current builders work on “integration” now.

    As soon as you update to 5.x you have let the trojan horse in, no turning back possible.