Gutenberg Changelog #10 – WordPress 5.3 Block Editor Improvements, Gutenberg 6.9 Experiments and Collaborative Editing

Mark Uraine and Birgit Pauli-Haack talk about the many improvements to the block editor with WordPress 5.3 and this week’s Gutenberg 6.9 release with yet more features, enhancements and experiments. Learn also more about the first discussions on collaborative editing and Gutenberg

• Music: Homer Gaines
• Editor: Sandy Reed
• Logo: Mark Uraine
• Production: Pauli Systems

Show Notes / Transcript

Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed 

Show Notes

Before update to WP to 5.3, make sure you update the Gutenberg plugin to 6.5 first

Mark Uraine: github issue

Gutenberg Changelog music: “More Free Time” off the album “Move Meant” by Homer Gaines

What’s New in WordPress 5.3 (New Blocks, New APIs, Improved Admin UI) by Brian Jackson at Kinsta

Gutenberg 5.9 Release Notes by Ella van Durpe

Blocks, Block Patterns, Block Layouts

Collaborative Editing

• We Built Collaborative Editing for Our Newsroom’s CMS. Here’s How.
• Collaborative editing using WebRTC
• Draft: p2p Real Time Collaborative Core Data Entity Editing by Enrico Piqueras

Transcript

Birgit Pauli-Haack:    Well, hello and welcome to our 10th episode of the Gutenberg Changelog. Today’s episode is, again, fully packed with the first thousand downloads giving cause to celebrate and ruminate. We’ll talk about the many changes that came to the block editor with WordPress 5.3 release earlier this week. Also this week, Gutenberg 6.9 was released with yet more features, enhancement and experiments. We also talk about the first discussion on collaborative editing. I’m Birgit Pauli-Haack Pauli-Haack, curator of Gutenberg Times, and I’m here with my co-host Mark Uraine, designer, Automattic and Core contributor to WordPress. Boy, it’s been a busy week. How are you today, Mark?

Mark Uraine:    Hey, Birgit. I am wonderful and tired. I’ve been spending some time in the wordpress.org forums this week trying to just help out where I can with anybody’s experiences upgrading to WordPress 5.3, and I’ve also spent some time in the Gutenberg reviews.

Birgit Pauli-Haack:    Oh, boy.

Mark Uraine:     Yeah. Yeah, it’s quite adventurous in there.

Birgit Pauli-Haack:     Well, you do God’s work there and support people there, and that’s actually also part of one question, Mark. I found this quote, I don’t know where it was, I think it was in an editor meeting or something like that. “Make sure that you update Gutenberg plugin to 6.5, first, before you update WordPress 5.3.” It was a little bit out of context. Do you have any more insights?

Mark Uraine:    So, from the personal experience, I had a site running an older version of Gutenberg, and the host updated my WordPress to 5.3 automatically for me, which is great, but WordPress 5.3, to run Gutenberg, you need to have 6.5 or later of that plugin version. I did not, and it brought down my site. So I ran into some trouble.

WordPress 5.3 Update

After some investigation, I realized there was an issue about it in Gutenberg already, and some things are being recorded on that and figured out. But luckily, like with WordPress 5.3, is this new admin email that goes out when your site crashes, and helped me out a lot because it provided me a link with the plugins deactivated. I was able to go in, remove the old version of Gutenberg and reinstall it, and it was perfect. With 5.3, it ran smoothly. So it was really a test of the software, and everything came through. I was thrilled to see it work so well.

Birgit Pauli-Haack:    Right. Right, and well, it’s awesome that you find that out and that you got help from the new features that came in earlier in WordPress. So earlier this week, we celebrated the first thousand downloads of the Gutenberg Changelog podcast episodes.

Mark Uraine:    Excellent.

Birgit Pauli-Haack:    A huge thank you to our listeners, and this is very encouraging. Thank you so much. I also want to introduce you to our team. If you listened to our zero episode, we mentioned Homer Gaines, who gave us permission to use his music and I want to give him another shout out, now that we have so many more listeners. Homer Gaines is a developer by day and maker of music by night. He has been producing music and scores for independent film projects since the early nineties. He finds inspiration in many genres, and his music is kinematic with an ambient low-fine mix of rhythmic undertones and driving beats, that flood the environment and become the backdrop for every mood. Gutenberg title music, it’s called “More Free Time”, and it’s off the album “Movement.” More free time, can’t we all have that?

Mark Uraine:    Yes. Thank you, Homer, for that music, and constantly reminding us that we need more free time.

Birgit Pauli-Haack:    And up until the episode number four, I did all the editing and publishing, but when the time between recording and publishing was almost two weeks, it was time to find an editor. So for episode number five, Sandy Reed, she is a former radio talk show producer, reviewed our episodes and sound quality, as well as content, and she gave us a ton of additional tips. She now edits and publishes our episodes, and there are weeks when the time from recording to publishing is one day now. We hope to make this a reality this week, again. Just a shout out to Homer Gaines and Sandy Reed.

Mark Uraine:    Thank you Sandy. Excellent work.

Birgit Pauli-Haack:    So, we got WordPress 5.3 released.

Mark Uraine:    That’s pretty exciting.

Birgit Pauli-Haack:    Yeah, I love it.

Mark Uraine:     This introduces so many improvements to Gutenberg, the editor, the block editor in WordPress now. And I’m so excited that people on 5.3, even without the plugin, are getting to experience the Gutenberg that was really meant to be, like this refined experience. But, yeah, Brian Jackson from Kinsta, who wrote an article regarding the new features brought into the editor. We have a link in the show notes, but I’d love to talk about a few of the things that are improved, and in there now, we have the group block, is one of them. That’s a big one. A lot of people appreciate this and love that you can group content, or other blocks, together now and throw in a background color to kind of separate it out from the front end visuals. So that’s been a popular block.

We also have the block appender, which is included in the group and the columns blocks. So this helps, basically gives you a hot point to click on to add a block to these other blocks. It makes it more usable, basically. Another block that’s been improved as the columns block. The first iteration was rudimentary, but now it’s a lot better. There’s a placeholder screen so you can select what sort of column layout you’d like, and that’s an improvement. Birgit, what else do we have?

Birgit Pauli-Haack:    My favorite block also got a lot of iterations, that’s the cover block, with a focal point for the background image. Also, solid background color, as an alternative to a background image. Now you can also add any block to the cover block. And so, most of the blocks that we just mentioned are all nested blocks, and then there was also the table block, which was very, very basic in the 5.0 version. And then 5.3 version, it supports now text alignments in columns, so you can have one column left aligned, one center aligned, and the other one right aligned. There are table headers and footers, and you can add background colors to your table blocks. It still needs a lot of work, but I think they’re moving forward quite dramatically.

What was also introduced since 5.2 came out, was the block navigation mode, which is a feature that allows you to use the keyboard to navigate from block to block. So the tab key or the arrow key gets you from block to block, and with enter and escape you can go in and out of block editing. Which is helpful for those that are not using a mouse or the screen tab to navigate. There was also an improvement that came out of the accessibility audit, to make that that better.

Mark Uraine:     That one is a lifesaver for keyboard users. That is fantastic, because before when you had to tab through every block control, it would take forever to get through the block just to get to the next block. Now, piece of cake.

Birgit Pauli-Haack:    Yeah. Yeah. I think to put an image in, previously, you had to, and only do it with keyboard, it was 47 taps necessary to actually successfully add an image to it. And yeah, so this definitely, major improvement. What else Mark?

Mark Uraine:     So we’ve got motion now, which is a cool little feature there. When you’re moving blocks around, there’s a little animation that happens and things kind of move out of the way when you drop another block into another area. And of course, there’s some CSS support for no motion, for people who have that turned off in their browsers.

Let’s see, we’ve got gallery block improvements. You can move and sort images within the gallery, right there in the editor. You can add captions to all the images. There is also the latest post block, it’s one of the early widgets that were converted to blocks. It’s experienced a few enhancements now, so it uses settings for categories and tags with content or without content, with the date or the author, or not. So some other improvements there. Well, it looks like we’re still missing the featured images, but I know that’s being worked on for that block specifically.

Birgit Pauli-Haack:    Oh, good to hear. Because I’m still missing that, personally, quite a bit. Because it would be visually more.

Mark Uraine:   It would, it would really be nice.

Birgit Pauli-Haack:    Yeah. And when you, kind of, be able to spread it out over the full width, then you can give them a little breathing room as well. Yeah, what’s also in 5.3, is the typewriter experience. That is something that Matt Mullenweg also demonstrated in his state of the word, at WordCamp US two weeks ago, and it keeps the cursor in the middle of the screen, or the line where you are and when you’re typing, so the content doesn’t shift with each new line. It’s kind of very set there, like a typewriter would be, where the paper goes through, but the line doesn’t change. But only for those who actually know how a typewriter works.

Mark Uraine:   I know. I know, I used a typewriter before.

Birgit Pauli-Haack:    Me, too. Yeah, I typed my resume on a typewriter after school. But then four years later, I had my first computer to do my thesis. So, really, that was the [inaudible 00:10:44].

Mark Uraine:      Can you believe that, Brigit. We are from an age where we remember a time when there were no computers.

Birgit Pauli-Haack:     Yeah. Barely, though.

Mark Uraine:      My children, they have no concept of that. They have had a computer in the house since they’ve been born.

Birgit Pauli-Haack:      Yeah. When we watch old movies, just a little pain there, that you’ll never see somebody using a rotator phone from the kitchen, and then there’s this long line into the closet. We always crack up, like don’t they have cell phones?

Yeah. So, what’s also in 5.3 is an enhancement on the separator block. And a separator, it sounds like something very basic, but it’s such a great tool to control the space between blocks and between the different sections of your post. And now you can also change the color of the separator, and there are two styles in there, where you can have a dotted line and you can have it full width, or only half the width. So it’s a great block for layout.

The list block also got some improvement, but there’s a lot of work to be done. You can do an in and out shortcuts, you can stop the value on a different number, and you can also reverse the order. And those things all kind of edge things, but they really help when you have a headline and then the numbers you want to kind of continue from the previous block. So it’s really interesting to use.

Mark Uraine:    Yeah, that list block, it’s getting some improvements, but I would love to be able to navigate that whole thing just with the keyboard. Very simply using tabs, to indent lists and stuff. I always struggle with that one. But we’re getting there.

Birgit Pauli-Haack:    We’re getting there, yeah. But it still only does text, so you can’t do media, and that’s why the change in the value of things might help with that.

Mark Uraine:     Right. So we’ve also got a few other improvements in 5.3, with the button block. The unit that supports our link target now, and various border radiuses, that can be adjusted on the buttons. Let’s see, the inserter help panel or the block library, is another name for this. We call it a help panel now. So when you hover over a block you’re able to read a little bit about it, and maybe even preview it, before you add it to your documents. You kind of learn a little bit prior to using it.

And we’ve also introduced snackbar notices. This is kind of a little notifications that happen in the bottom left hand corner of the editor upon saving the document, or publishing, or some of the other actions that a user might take.

Birgit Pauli-Haack:     Yeah, the old editor had the notification on top and the block editor has them on the bottom now. I think the snackbar notices are very helpful for plugin authors who want to inform their users about things. I also did some testing, I had in my brain back that the button now has gradients, but this one doesn’t. It came one good more plugin version after the one that was merged. If you want to have gradients on your button, and I know a lot of people want to have gradients, you need to install the Gutenberg plugin.

And speaking of which, so in 5.3, Gutenberg version 6.4 was the last one that was merged. And between the beta version and the release, there were five more releases of Gutenberg. And this week’s Gutenberg’s release had one feature that was requested since the beginning of time, and that is being able to change the image title attribute in the image block. It finally landed. So if you need that, get your Gutenberg 6.9.

And there’s also, we had about three enhancements of it. One is a list of default available gradients. So there are certain patterns and pallets that are available for gradients. And I think the gradients are also available for other blocks now, like the cover block. And I’m not sure about the media and text, but so it’s not only the button block that has gradients. But that was already in 6.8, I think they talked about it last week, on our show about it.

Gutenberg 6.9 Update

And then there’s an immediate inserter block. So there is a feature now, that if you have a pattern or a nested block and there’s only one block allowed, that block will be automatically added instead of having to go to the additional step to adding that particular property.

Mark Uraine:    Saves a step there. Yeah.

Birgit Pauli-Haack:     So, and then there was also nine bug fixes, of which I only going to point out three of them. And one is that the pull quote has been fixed with the color palettes and now those are working right. And then, also fixed the columns left and right, full with margins. So you actually could access the columns block when it was in a full width. That was a little buggy there, but that is fixed now. And they’ll also, default image sizes, used for the feature image displayed by the editor. All very helpful.

Mark Uraine:     Yeah. And then we had about four different experiments, kind of included here. One having to do with block content areas, which we know is a precursor to full site editing. So kind of loading in block templates from themes, that support was added now. Still very rough, very technical, right now.

We need to work on interfaces in the front, so people can use some of this stuff. But a lot of updates for the navigation block have been included, and this can be turned on, of course, in the experiments page in the plugin. And you get various things, like adding a block placeholder now, default front-end styles, rich text for navigation menu item. A block navigator is added to the blocks so you can kind of jump through the nested blocks within the navigation block, using the pop-over navigator. All sorts of things.

Let’s see, there was another experiment, the responsive block control component was added, which is a big one. Because this one kind of opens and paves the way for responsive controls, for all the blocks, essentially which is a big deal. And by the way, I see that pop up in the Gutenberg reviews all the time, now that I’m in there this week. Everybody wants more responsive controls, they say. So, we’re working on it, everybody. We’re working on it.

And API for block patterns, as well, has been introduced. So let’s see, four different API improvements. Several of them look like just kind of marking them as stable, and making sure that developers know they’re ready for use. Some of those include the custom gradient presets, AsyncMode, the media upload in this WP environment JSON file, as well. JSON config file support. So, yeah. Birgit, what else?

Birgit Pauli-Haack:    Yeah. It sounds like the navigation block might actually land, come out of experimental, and land in the 7.0. What do you think, another two weeks?

Mark Uraine:     Very possible. Very possible. It’s going to be fun to have that included. I mean, our goal is definitely to have that part of the plugin before the end of the year. So, as a valid, strong, good block that can be used.

Birgit Pauli-Haack:    Yeah. And then the theme support for the block templates. I think theme authors will be really jumping on that, because they have been waiting for it quite a bit. And as well as the theme support for the gradients, which is not in that version, as you mentioned.

There were a few various things, which is kind of the kitchen drawer of the release note, where everything that didn’t fit in other categories is listed.

Mark Uraine:    Various.

Birgit Pauli-Haack:    So the first one that I highlight there, is the refactor the way HTML was escaped in the rich text component. I think that helps quite a bit with special characters. The team also refactored and simplified the block margins, CSS for the editor, and then has updated some of the components like the external link, the base control and the font control field. They are now using the visually hidden component for screen reader text. That’s another accessibility feature, or refactoring them. Then quite a few more components have now storyboards, and we list them in the show notes. But that’s the Gutenberg testing ground, where you can test those components separately from your own development.

Mark Uraine:    Yeah, it’s a great place where you can visually see the component, and you can see what it’s actually doing. Look at the code. So as long as we keep adding those components to that storybook, people are able to see all the various ones, which is great.

Birgit Pauli-Haack:    Yeah. And the examples is really good. So block directory was something that was aimed for 5.3, but it didn’t really make it. And now they refactored the block directory search to insert blocks from the plugin repository wire, and insert a plugin. So it can be tested outside of a WordPress update.

So those were the various things. There was also some string concatenation fix for the verse and some translator strings, and then some end to end testing changes. Documentation, there were updates on the storybook feature, or the developers and also some typos and fixes. And yeah, speaking of documentation, we actually never talk Contributor Day, and WordCamp US, I volunteered to be the coordinator, the rep, for the end user documentation, to bring it up to 5.3. It’s still a few months out, but we started the Trello board, so we can identify what all needs to change so we can then ask other people to maybe take on some of the documentation updates.

Mark Uraine:     Who should people contact to get involved with that?

Birgit Pauli-Haack:     So it’s all in docs. That’s the channel where a lot of things are discussed. But if you want to ping me on Twitter at BPH, or on Slack at BPH in a private message, I can set you up with and kind of connect you with all the things that you could do. So, the processes are right, because I need to kind of think about standards, or we need to think about on standards on how to follow through, how do we do the screenshots? Right now it’s the ideas. Should I use the 2020 theme, or should I use a white background? That’s kind of the toss up.

I’m looking at some of the documentation other people wrote, because they used the 2020, and I like the 2020 very much, but for documentation, having that beige background on the white over, it’s kind of….

Mark Uraine:     For documentation, it makes sense to have that white background, because something like that is… Well, I was going to say it’s not going to go out of date, but documentation always goes out of date, eventually. So never mind. But I do like the white background, too. Just for documentation.

Birgit Pauli-Haack:    Yeah. I saw that alternative and I said hmm, yeah. But if you agree with me and you love the design.

Mark Uraine:    Yes, we made an executive decision for the podcast.

Birgit Pauli-Haack:    Mark Uraine said, then that’s what I’m going to do. It’s your fault, Mark.

Mark Uraine:    You know what, for our listeners, you’re not making a decision here, but I want to say documentation is a great place for first-time contributors to get involved. It’s an excellent way for you to learn more about the software, to help educate others on the software, and to contribute.

Birgit Pauli-Haack:     Well, thank you for that. So, and the last part of our… We have still a few things that are in active development that we want to want you to know about. Mark, what did you bring?

Mark Uraine:     Yeah, there’s a recent post from Mel Choyce-Dwan. She posted on the make design blog, about block patterns and block layouts. And she goes into a good… She organizes the terminology really well, which is something that we’ve kind of been tripping around in our Slack channels. And, so Mel does a good job to kind of just lay it out. This is kind of what a block is, this is what a pattern is, and this is what a layout is. And this is how they work together. And why this is important is because we’re trying to figure this out in Gutenberg, in the software, and trying to understand how themes might register block layouts or plugins, or whatever, and how these things really work together on the page.

Basically, what it comes down to, is the block is really the molecule, the basic essence of Gutenberg. And then when you get a few together, that creates a block pattern. So say maybe like a testimonial, or page, or has a pattern of how testimonials are shown. Or you have the pricing plan, page that gives you columns and stuff. So that’s a pattern, right? But then you might have a layout, which encompasses a whole page. So you have a layout of the section on top is like a little about section. Then you have your team members are another pattern that shows their faces or who they are, and that’s another section, right? Those are various block patterns that have been included into one big layout. So that’s as complicated as that sounds. Mel puts it much more cleaner than I did in her posts. So please check out that, we’ve got the link in the show notes. What else do we have, Birgit?

Birgit Pauli-Haack:    Yeah, and I stumbled upon the collaborative editing. Although it’s phase three, there seems to be some discussion flaring up. It’s been out there, and explorations were in full swing, but at the moment only one user can edit a post or a page at the same time. If another user wants to access that page, it’s either locked or the first one will be kicked out. And most of the time they are more than one person involved in producing a story, so it’s a multiple of reporters, photo editors, copy editors, producers. So, that’s kind of the problem, and that problem is not trivial to solve.

And Sophy Ciocca, and Jeff Sisson, they work for the New York Times. They wrote an article about how they built the collaborative editing feature for their CMS. That’s a proprietary CMS, but Greg Ziolkowski suggested to read that article to get up to speed on the issues and on the decisions that have to be made. And for the block editor. The earliest, I found there was an early issue in the Github, already started back in 2017.

Mark Uraine:    2017, whoa.

Birgit Pauli-Haack:    Yes. It was kind of right at the beginning. But, about three weeks ago, Enrique Piqueras picked it up again in his draft pull request, and he did the first kind of explanations on how he approaches it. He also created a video so you can see it in action, and in the video you see two browser windows, one is an incognito window, both are logged in, both load the edit post screen for the same post and you see the changes made. And one window is magically updated, in the other window. And it’s headings changes, image changes, text changes, it looks magical. And of course that’s just a proof of concept right now, but it’s definitely something you want to check out if that’s something that you are interested in, to make sure that your concerns and your ideas are actually addressed. So, that is the time to jump in and be a collaborator on that.

Mark Uraine:   Just to throw a wrench into the cogs, this is going to be really interesting to see how collaborative editing works in a full site editing experience. If you imagine that…I’ve been thinking of collaborative editing similarly to how Google docs does it, right? Where you’re in a document and you leave comments and suggestions, and there’s multiple people in there, but that’s one document. Imagine editing a site with a header and footer and sidebar and blocks all over the place, and allowing collaborative editing into that experience.

Birgit Pauli-Haack:    It’s a whole new level there, of complexity.

Mark Uraine:    Wow.

Birgit Pauli-Haack:    We don’t do things because it’s easy.

Mark Uraine:    Yeah. Yeah, after we nailed that, we’re going to be landing on Mars probably. That’s the next step, I think.

Birgit Pauli-Haack:     So, and we are at the end of our show for today, Friday, November 15th. And as always, the show notes will be published on Gutenbergtimes.com/podcast, and if you have any questions and suggestions, or news that you want us to include, send them to changelog@gutenbergtimes.com. Changelog@gutenbergtimes.com. Thank you all for listening. Goodbye, until the next time.

Mark Uraine:    Yes, thank you listeners. Birgit, it was wonderful talking with you today.

Birgit Pauli-Haack:    Same here, Mark. Same here. Have a good weekend.

Mark Uraine:    Bye bye.

Birgit Pauli-Haack:    Bye bye.