In this episode, we finish the year 2019 talking about: Gutenberg 7.0 and 7.1 releases their enhancements, features and bug fixes, a columns layout experiment, a new scaffolding script, a new service “ShareABlock” a new testing tool for Pull Requests Gutenberg.run and more.
- Listener Question: Luke Curbis via Twitter
- Live Q & A: Rethinking Themes in WordPress (video)
- Mel Choyce: Four Gutenberg column layouts for the Twenty Twenty theme
- ShareABlock by EditorsKit (Jefferey Carandang)
- Greg’s Ziolkowski – NPM package of the WP Cli scaffolding for blocks.
- Matias Ventura: “Advancing the Block Interface“ (GitHub Issue #18667)
- Layout Grid plugin
- Riad Benguella: December Focus for Gutenberg development
Gutenberg 7.0 and 7.1
- Riad Benguella: What’s new in Gutenberg? (27 November)
- WPTavern: Gutenberg 7.0 Launches Stable Navigation Block, Post Blocks, and Template Parts
- Jorge Costa: What’s new in Gutenberg? (11 December)
- WPTavern: Gutenberg 7.1 Includes Welcome Modal, Improves Multi-Block Selection, and Adds Drag-and-Drop Featured Images
Please send comments, suggestions, news to firstname.lastname@example.org
Birgit Pauli-Haack: Well, hello, and welcome to our 11th episode of Gutenberg Changelog. In today’s episode we have a lot to talk about. Gutenberg 7.0 and 7.1 was released with the navigation feature and other enhancements. We also talk about a lot of community contributions like, Share a Block and Gutenberg 1.
My name is Birgit Pauli-Haack, and I’m the curator of Gutenberg Times and owner of Pauli Systems, a boutique web agency. I’m here with my co-host Mark Uraine, designer at Automatic and core contributor to WordPress. Thanks for being here again, Mark. How are you today?
Mark Uraine: Hey, there Birgit, it’s been a while. I’m doing good, although today was quite stressful. I had internet outages in my area, a significant region was out of internet. I think I jumped from coffee shop to coffee shop today, visiting about four or five, hoping for some free wifi. Finally, found one 10 miles away. Luckily I’ve made it back today and I’m home now, Internet is back up. We’re doing a podcast together and all is well in the world.
Birgit Pauli-Haack: Yes. And after we had to move the first date because of internet outages in Florida. So we’re glad we’re all both back and can update you, or the listener, on the Gutenberg things that have been happening in the last two, maybe even three weeks.
Though, our first section is our listener questions and I just put [inaudible 00:02:06] last night, or yesterday, about our recording and if somebody has a question, we would do it and answer it here on the show. So Luke Carbis, from Brisbane, Australia, posted on Twitter, “Is GitHub the right place to facilitate discussion on new Gutenberg features? Why is something as important as the future of the themes in WordPress only discussed using a developer tool?”
I’m not so sure that that’s actually accurate. There’s not a single place to discuss a single thing because the future of theme, there are many, many different parts of it. But that’s a great question. Mark, you left a comment for Luke on Twitter?
Mark Uraine: Yeah, I think it’s a good question. If you’re perusing GitHub, you’ll see a lot of work being done and discussions happening. That could lead one to think that that’s the only place discussions are happening. However, there’ve been a lot of great discussions in making a WordPress Slack group recently. In various channels too. Regarding themes. Regarding the future of Gutenberg.
I’ve seen these discussions happening in four or five different team meetings recently within the last two weeks. I’m also seeing a lot of great posts coming up on the make a WordPress blocks. So whether it’s the design team, or the core team, there’s a lot of posts coming where people are encouraged to leave comments, to share their opinions and their thoughts, to really help influence and have a say in the decisions that are happening and the future of Gutenberg.
I encourage anybody to just come on, ask us, Birgit and myself, ask us questions in Twitter and we’re happy to share these out to really try to facilitate more conversation, asynchronous conversation, so that everybody around the globe has an opportunity to give input.
Birgit Pauli-Haack: Yeah, very well said. I saw them also even in the theme review were a lot of discussions about that, but it can really be overwhelming. If you start just starting out and trying to follow up, I think it’s a good idea to subscribe to the make block of the design team. It’s make.wordpress.org/design.
Mark Uraine posts, “Great updates on the Gutenberg phase two with the relevant links to the GitHub NPRs, issues, and other teams’ make block.” You do a fantastic job.
Mark Uraine: Thank you.
Birgit Pauli-Haack: When he gets to it, and I think it’s a scheduled either every other Friday or every Friday, that definitely catches you up on things that happened before.
Mark Uraine: I try to get it out every Friday. The holiday season has proven to be a little more difficult with that though. But I am looking to get one up this week as well.
Birgit Pauli-Haack: Yesterday, we had a very lively live Q&A about the future of themes and how to rethink theme development for the Gutenberg phase two, like full side editing. We talked with Ellen Bauer, a theme shop owner from New Zealand, and a very early adopter of Gutenberg. William Patton, who’s the lead of the theme review team. And Rich Tabor, the creator of Coblocks, and he’s now with GoDaddy.
We had plenty of audience questions. The link to the video will be in the show notes and as soon as we have a transcript published, we will also publish it, or a transcript back from our editors, we will publish that on gutenbergtimes.com.
Mark Uraine: That link to that discussion that you all had would be a great place for Luke, who asked us earlier in Twitter about where these discussions are happening. Luke, check that link out for sure.
Birgit Pauli-Haack: We also tend to definitely scheduled some theme demo live coding session. It was Enrique Piqueras who’s on the development team because yesterday we had a question we couldn’t really answer in this just talking heads format about the HTML templates and how they would work as well as the template parts. We will show how those are working in real life and how you can get started from a very simple example to some more complicated things. It will be on January 23, at 2:00 PM and 1900 UTC. Just that’s a save the date. It’s not yet published. Exclusive announcement for the good Gutenberg Changelog right now.
Mark Uraine: Excellent. We also have some community contributions that have been going on. I’ll start off with some column or some experiments with column layouts that Mel Choyce has been doing. She’s written a post and shared it on her website, where she really has put together some great column patterns for common reusable blocks that people might use on their website and has been sharing them out.
One of the places that these are being shared on is a place called shareablock.com by Jeffrey Carandang. He’s the developer behind Editor’s Kit plugin and he’s built this website that shares common block patterns for people. One of the things you can do with his plugin, and we think Gutenberg 2, is you can save out a block and export a JSON file. You can upload it to his site, shareablock.com, and other people can come and see these patterns, pick one they like, download the JSON file, upload it to their install and their WordPress website, and be able to utilize these block patterns, which is fantastic for those of you designing layouts and designing pages for yourself or for others in the industry. Really great work by everyone involved there.
Birgit Pauli-Haack: I’m really amazed how the creativity kind really spawns up a lot of initiatives, and I’m really happy that Jeffrey took this on because he has been so trailblazer in his Editors Kit plug in providing additional features for the default blocks. I also want to point out Greg Ziolkowski has taken the WP… WPC line has a simple support for block scaffolding that generates code that runs on the browser without the need for any build steps. It’s documented on the WPCLI side.
Mark Uraine: That introduction to his work, Birgit, is just shy of a button that should say launch rocket into space. That is so technical and so much great work there. I will have to read that post for sure.
Go over there and read those draft guidelines. They need your feedback. Especially when you want to publish blocks on the block directory. It’s probably going to be really helpful for you to figure out what’s allowed and what’s not allowed. Plugin repository always has some more restrictive guidelines.
Mark Uraine: If you are a block plugin developer, go read that and leave some feedback, because that is how you get your plugin, single block plugin, into the block directory. So, when a user is searching the block library in Gutenberg for a particular need, if there are no core blocks or none of their current plugins are providing this solution, but there is a solution that matches the keywords in the block directory that shows up right in the block library, right inside a Gutenberg and they can add it and seamlessly install the block right into Gutenberg. That’s fantastic.
Mark Uraine: So, yeah, we’ve had two Gutenberg releases since we’ve last recorded a show. We had Gutenberg 7 which was released on November 27, I believe, and then Gutenberg 7.1 on December 11.
Let’s jump into the features. Well 7.1 actually was pretty gigantic. It had 161 poll requests that were merged in. That’s quite a chunk. Birgit and I are going to go through, the features and the sections, the enhancements, the bugs, but we’re not going to separate them out necessarily by version. But we’re just going to talk about some of the quick ones that we, that really caught our eye, and we’re excited about and seeing happen.
Some of the recent features within these two versions included the navigation block. It was listed as a stable feature and it is a part of Gutenberg now, you can add the navigation block to your content.
This is going to make such a huge difference when full site editing becomes more solid. Right now people don’t necessarily have the necessity to add a navigation into their content, but once you’re able to edit your header or your footer all from within Gutenberg, adding a navigation block and moving it around is huge.
Creating this navigation block has really pushed some boundaries within Gutenberg. It’s forced us to re-iterate upon the block interface. We had to figure out whole new ways to move blocks within blocks around horizontal movers rather than just moving blocks up and down. We had to figure out how to move them left and right. Lot of great work by a Yolen and Tammy, just contributors just spending some time and figuring all this out.
These things range from… Well, there’s a whole list of stuff, highlighting menu items, removing background colors, renaming navigation menu item block to link instead. Just really user complexities around the block that we really had to simplify and refine. That’s the navigation block. There’s a whole lot more.
Let’s see, there’s adding a menu to visually switch between edit and navigation modes and announce the mode changes to the screen reader users. Really nice visual and accessible changes there for screen readers.
There’s support adding a caption to the table block now. I love that table block, Birgit. I say that every time there’s an enhancement to the table block. I get so excited.
We’ve got implementing a welcome guide modal. This is a big one. I will tell you how many times the little pop over tips that happened for new Gutenberg users was blocking content. People weren’t sure how to interact with it. Now, we have a modal that just dims Gutenberg editor out into the background and really highlights what Gutenberg is, helps the user understand blocks a little bit, and if the user wants to skip that little welcome guide, they can.
Birgit Pauli-Haack: They can [inaudible 00:14:52] all at once and not have to click three times to dismiss it. I really like the navigation block together with the table block because I was, over Thanksgiving weekend, I was at a cricket tournament and I was updating the scores on the fly, so to speak. The page needed a navigation so people can jump to, who are the teams, where is the schedule, and what are the photos?
So I used the navigation block to have an on-page navigation and then the table block to put the results in. It was very easy to handle and I really liked it. It was very fast and had only one stop to go. One thing to go to.
And then enhancements. If the features are not enough, the team also puts on enhancements in existing features. The big one is definitely a fixed block toolbar for the mobile version where it was really hard to edit things and so there is on top, the toolbar is always fixed on by design or by default.
Mark Uraine: That one took a lot of thought to try to figure out how to get it to work cross browser. That was the trick. I think it was Safari that really caused some problems for us. For Yolan specifically. I got to give the credit there. I just tested a few things out. He spent some good amount of time trying to figure that out and props to him.
Birgit Pauli-Haack: Yeah. Another enhancement is that the Gutenberg now on the cover block uses gradient class names instead of inland styles. That’s all theme developers having a sigh of relief there finally.
Mark Uraine: Believe it or not, there’s actually some kickback on that, too. There’s good discussions. Some people are for it and I agree, some of those theme developers really appreciate that. But then there’s others who are really against maybe some of that stuff. They have their reasons. So I wanted to highlight that one because there’s good discussion that really goes into these things.
Birgit Pauli-Haack: Yeah, gradient gets a lot of interest on there.
Mark Uraine: Yeah, it does.
Birgit Pauli-Haack: It’s the beginning. On the cover block, we also now have you can use a video and you always could, but now you also have a preview on the cover block of that video. We also changes to the block wide, the hover styles and how a child and a parent blocks work together.
Mark Uraine: Oh my goodness. Has that changed your experience with Gutenberg? Have you noticed that?
Birgit Pauli-Haack: I have not noticed it, no.
Mark Uraine: You haven’t noticed it. For me those outlines when they would appear everywhere, it was just so much UI when I was trying to mess around. Just removing some of this stuff helps so much. Just lightens it up and makes it feel like I’m just in the editor. I’m not in this app where I’m moving blind, I’m just in an editor editing content and it’s refreshing. I’m glad we made that change.
Birgit Pauli-Haack: I know that a lot of people that are content creators that have these overwhelmed of there’s always something popping up and it’s a distraction pretty much from the word. And then there’s an enhancement on the block multi-selections. You could always multi-select blocks, but you couldn’t edit things or multi-select something over two paragraphs. You needed to do it separately. Now that seems to be working, and then also paste on a multi-selection, so you could copy and paste it in. There were some good enhancements there for the power users.
They improve the image block’s replacement flow. It was a little cumbersome to kind of figure out, I don’t want that image anymore, what do I do? And then there was on left, there was you needed to put the new link in all this would [crosstalk 00:19:01].
Mark Uraine: That one’s a longstanding PR that has been going for, I want to say a couple months. I’ve been contributing to it with Andre and really just that flow needed to be improved. It’s a lot clearer now, the flow feels right, but I will tell you, we’re also seeing, we have four or five different link interfaces. Creating a link in Gutenberg, there’s four or five different ways that this is done in different blocks. Our next thing now is to really improve the consistency between all those.
Birgit Pauli-Haack: I think previously we had a list of input from Dave Whiteley where he has some blocks on the design make block and his proposal is to unify some of the interfaces and some of the standards, like textiles and spaces and these things.
Now and another good enhancement is now, you could always do drag and drop into an image block, but you never could do it for the feature image. Now you can also do this for the feature. Because that’s mostly what I do is put in feature image and then having a drag and drop it is really helpful.
Mark Uraine: Just to touch on this, if you look at the Gutenberg design principles, drag and drop is listed as a secondary action, because I believe it’s more you need to use a mouse, you need to use some other tools to really be able to perform a drag and drop action. Primary actions we want you to be able to just do from within the block itself, but drag and dropping is such a common interaction, too. So while it’s secondary, I really like that we’re making efforts to improve some of the drag and drop capabilities within the Gutenberg. I just wanted to highlight that because I think it’s a value for Gutenberg.
Birgit Pauli-Haack: Absolutely. Yeah. Considering that other apps that we are commonly using are very good at drag and drop, like Google docs or Google sheets.
And then there was a whole if you combine the two release notes from 7.0 and 7.1 you probably have about a just list of bug fixes. Our selection is very, very short.
Mark Uraine: You mean our users don’t have to weed through an hour of bug fix right now? We’re going to go over it. Our listeners. Did I say users? I meant listeners.
Birgit Pauli-Haack: Definitely one of the highlights is that multiple paste issues is fixed that created unnecessary empty spaces, especially from Google docs and others. So, yay.
Mark Uraine: That was a problem. I don’t know how many times I was deleting spaces that were being dropped in there. It drove me nuts, but it’s beautiful now.
Birgit Pauli-Haack: Then also prevent the resizing of the image block when you resize the image block it all of a sudden would cover the boundaries of the block so you’ll have some overlaps there. That is fixed. Also, the snackbar notification, that’s something that’s on the bottom of your screen when you save a post, or save a page, and then it says you can view page. Those are called snackbar, for whatever reasons, and the position has been fixed because it was overlapping with the breadcrumbs that came in 6.8, I think it was.
Mark Uraine: Right. That snackbar name just is completely inherited from Google.
Birgit Pauli-Haack: From the library I would think that is in use there. And also one of the fixes is that the CSS styles for the color picker component were fixed. There’s a lot of usage out of that, so fixing that really helps. And then a really big Google was that when you had a private post and that was dated scheduled for the future, it would become public as an update and not a whole lot of people use that. But those that use were very surprised.
Mark Uraine: As you noted, Birgit, that there was a lot of bug fixes that have happened in these two versions. I just want to point out that we realize there are a lot of difficulties, there are a lot of bugs, there are a lot of areas that need improvement, and to note these bug fixes, there’s a lot of time spent improving the interface, really trying to bring it to something that benefits all users of WordPress.
So those of you who had second thoughts or who were questioning Gutenberg, giving it another try now could be a completely different experience for you. If you tried it early on and weren’t impressed by 5.0, you gave up on it and went to the classic editor, give it another try. I really recommend this because it’s improved a lot since in that year’s time.
Birgit Pauli-Haack: I don’t know. Thirty different updates on Gutenberg. And then the new APIs are just highlighting the two of them. One is a card component that can now can be used for plugin developers and block developers, and then our favorite thing is the gradient picker has also is a new custom gradient picker component is now available for those who want to use them.
Mark Uraine: Which is everybody. Everybody wants gradients.
Birgit Pauli-Haack: Everybody uses them and everybody has an opinion about them. They are really good. I like them.
Mark Uraine: That brings us to experiments. There’s always improvements to experiments happening in Gutenberg. If you have the plugin, you could go down to the plugins admin menu and you can see a listing called experiments. Click on that. You get an option of various things that you could turn on or turn off at Gutenberg itself.
Some of these include block content areas which really are leading into the full site editing experience. These include adding a post title and post content blocks, separating these out so now the title becomes a block itself. There are template parts for custom post types and theme resolution logic. They’re adding a demo templates directory, adding a template part block, and some other documentation.
The widget screen, which we had dabbled in earlier this year, has seen some more action lately. Some development time has been spent into this. It’s we’re really trying to improve this and get it… We really want to get it to a point, this widget screen, so that I can start doing some usability testing on it. Right now, it just wasn’t quite there and I really had been holding off on doing any testing there because it would fail. It just wasn’t there yet.
We’re improving it right now and it’s getting to a point where I might start testing maybe January. We want to see, is this a good route to take, or do people feel better about the widget screen and just staying in the widget screen? That concludes our experiments here. What else do we have?
Birgit Pauli-Haack: They’re are improvements on the documentation, like a backwards compatibility policy document is now available and also of course the get it started documentation has been improved, not only because of the model.
Mark Uraine: I like that someone spent some on the getting started documentation because that’s really how new contributors get involved and so adding those little bit of details that were added are going to be beneficial. If you’re looking to contribute, the getting started document was just revised so please check it out. That’ll help you.
Birgit Pauli-Haack: Yeah, that’s really awesome. We have later on we also talk about another tool that will help with that. And then there were some under the various heading of various stuff it is mentioned but it was also a very long list and I only cut it down to four items.
It’s important to know that the plugin menu minimum requirement has changed from 5.0 to 5.2. So if you want to use the Gutenberg plugin, you need to have WordPress on 5.2 version, or later of course. And then there were two things removed. One is the maximum width style in the image block so that it could be larger and also the CollegeHumor embed block was removed.
Mark Uraine: Bye bye.
Birgit Pauli-Haack: Yeah. It was only removed not because of the embed block but because the site discontinued. Then also to improve and simplify reusable block styles, that was part of it that sometimes looked a little bit different than [crosstalk 00:28:00].
Mark Uraine: A contributor who’s been around for a while, Zebulun, has made those changes, I wanted to call those out because Zebulun took this user was contributing quite a bit to phase one of Gutenberg, would leave a lot of comments and get involved in the discussions and this contributor is back again and really doing some really nice things. I wanted to call some attention to that.
Birgit Pauli-Haack: Welcome back, Zeb. I remember who from the early days of Gutenberg.
Mark Uraine: It’s great to see these people come back and really give more. It always makes me excited. That leads us into recent active development better that’s happening with Gutenberg. Some of that we saw in a post recently from Matias Ventura about the block UI redesign work that’s happening, I believe the post was titled Advancing the Block Interface, but it really focused a lot on the toolbar for the block and how the block is thought about.
I really appreciate this, Birgit, because as people know, when you start building a software, you tend to go down rabbit holes and it’s hard to look back like, okay, looking at everything that we know, with everything that we know now, if we were to redesign this, what would we do different?
This post is an adventure into that thinking. Like, OK, everything that we know about Gutenberg now, how would we design a block today? How would we change things in the interface? It’s so good. We’re only in phase two and it’s so good to see a refresh of, how would we design this, already. I’m excited.
Look at that post. It’s in the show notes. Leave some comments. There’s some really good things there, and these things are including a higher level of contrast in the UI. It includes a floating toolbar that isn’t necessarily attached to the block itself and it removes some of these borders, again, we were talking about removing these borders. I like that because it’s a lighter UI, it’s a lighter interface, and good work for those people who have been doing that.
Birgit Pauli-Haack: I can see that. Even just watching people using it gives a lot of ideas in terms of how this could be made easier or better. There were a lot of things that are tacked onto the block toolbar that you say, OK, maybe I didn’t need that at that moment, so going back and revisiting that, that’s really, really a good place to start before we go into full site editing.
We also wanted to highlight a plugin that was created by Automattic and it’s the layout grid plugin. It provides you a nice grid within the Gutenberg to align your content and play a little bit around with it, but also have a good grid system. I will definitely try that out in some of our sites and see how that works.
Mark Uraine: Yes, I’m excited about that plugin right there. I’ve been watching a lot of work, being an employee of Automattic as well, I’ve been seeing the work that they’ve been doing and the challenges that they’ve had creating this, and so to see it out there and as something they’re sharing with everyone else now, really good work.
That brings us to another recent post from Riad. He recently posted about the December focus areas for Gutenberg. Lot of these, Birgit, get we’ve already covered, but it’s a great refresher if anybody’s interested to see, I want to get involved with Gutenberg. What are some of the things that are happening? This is where we’re spending a lot of our time. If you’re looking into block content areas which are leading into full site editing block patterns, common patterns of blocks that people can add to Gutenberg, this is something we’re spending a lot of time in.
We’d love to eventually open this up for third-party developers for themes so that themes can register block patterns using core blocks. This is going to be fantastic for people who are building layouts within their website, within their posts.
And then we have a lot of tightening up things that we’re going through such as really polishing the navigation block. There’s a lot of design work that needs to happen there. The custom gradient picker. Improvements to the media flows that has emerged. That one’s off the list now. But of course we talked about all the interfaces.
There’s toolbar accessibility improvements, and iterations on the block interface, as we discussed. I think it’s one of my favorites. So please [crosstalk 00:33:04].
Birgit Pauli-Haack: It’s Gutenberg.run. So Andrew Duthie, butchering his last name, I’m sorry, created a simple way to test PRs of Gutenberg. So if a developer has a pull request sending to GitHub, it’s always hard to which branch and where is it and how do you test this. You don’t need to have a development site or locally. You can now go to Gutenberg.run, take the PR number, ID number, and it will spin up a temporary WordPress install for that particular branch. So you can test it in isolation and then have comments for that developer. Figure out if it runs, or if there are some error messages, or something like that.
Mark Uraine: So much of the work that we do in Gutenberg and the PRs that we create, so much of that sometimes sits around because it’s hard to get someone to test it. The developers and the designers, the contributors, we need to take time to put aside and really go through and actually test people’s PRs so that we can help those PRs move and get merged.
This has made that experience so much better. You don’t need a local install of WordPress. You don’t need a development environment. Just spin up Gutenberg.run/ the PR ID, and you’re going to get an install where you can test exactly what needs to be tested. And then, as you said, Birgit, drop in some comments and move that PR forward.
Birgit Pauli-Haack: It’s so much easier than to help and contribute to development even if you’re not a developer, but you can test things. You know if it working or it’s not working. Most developers have their own tests steps in there that they needed you to look at that. So yeah, if you want to contribute and another developer, but technically inclined to do so.
But that also brings us to the end of the show. I have one last question. Do we have any announcements or anything that you wanted to [crosstalk 00:00:35:14]?
Mark Uraine: I do. I’ve been doing a lot of usability tests on the navigation block.
Birgit Pauli-Haack: I wanted to ask you about that.
Mark Uraine: I have not reviewed them all, but once I’m done, I’m going to be posting up something, probably towards the end of this month, and I’ll share all the different videos of the navigation block testing and maybe call out some things that I found interesting, how people were using it.
This feedback and these usability tests will feed directly into the improvements that are happening on it as well. Everybody keep an eye out for that post on make.wordpress.org/test and leave some comments when you see it, please.
Birgit Pauli-Haack: But this is the end of our show. As always, the show notes will be published on gutenbergtimes.com/podcast. If you have any questions, suggestions, or news for us that you want us to include, send them via email to email@example.com. But you, of course, you can always ping me on Twitter, which a lot of people do.
So, that’s it. Thank you for listening and goodbye. We don’t have another show before the end of the year, I guess.
Mark Uraine: I don’t think we will because the release of Gutenberg is still up in the air right now. Whether we’re going to release in the holiday season or not, or wait until January. That’s still up in the air. If there’s a release, maybe you’ll see me and Birgit back again. But if not, you can expect to see us in the new year. Or listen to us in the new year. Thank you everybody.
Birgit Pauli-Haack: Thank you. Goodbye, until the next time.
Mark Uraine: Bye bye.