Gutenberg Changelog #4 – Release Schedule WordPress, #a11y accessibility in Gutenberg 6.3, Block Directory, Component Review and more
In this episode, Mark and Birgit start with community contributions around Gutenberg and discuss how Gutenberg fits into the WordPress 5.3 release schedule. The release of Gutenberg 6.3 brought some major enhancements for keyboard navigation, and nested blocks as well as pushing experiments with Widgets forward and more bug fixes. You learn more about the Component Audit and off a new site browsing through Gutenberg Components for larger usage. Block Directory will be the topic of a YouTube Live Q & A on August 29th, 7pm EDT (23:00 UTC) with Alex Shiels, Mel Choyce and CK Lee.
Music: Home Gaines, Logo Design by Mark Uraine. Transcript available in a bit.
Show Notes
Standing desk: Tresanti from Costco
Listener Questions
Announcements
Next Gutenberg Live Q & A August 29th 7:00 pm EDT (23:00 UTC )
Community Contributions
What’s in active development?
Discussion on new Block Directory for Plugins
Design Team
Component Review
Docs by Q
Design Updates
Transcript
Birgit Pauli-Haack Hello, and welcome to our fourth episode of the Gutenberg Changelog. I’m Birgit Pauli-Haack, curator at the Gutenberg Times, and I’m here with cohost, Mark Uraine, designer at Automatic and core contributor to WordPress. How are you today, Mark?
Mark Uraine I’m doing really well today. Just this week, my 12 year-old daughter got the hang of surfing, and so that’s been an amazing moment lately. It’s just watching her stand up on that surfboard, it’s so cool, but how have you been?
Birgit Pauli-Haack ^p [crosstalk 00:01:08].
Mark Uraine I know. Isn’t it? I’m so excited. [crosstalk 00:01:12].
Birgit Pauli-Haack I’m sorry we can’t share your footage on the podcast.
Mark Uraine How have you been, Birgit?
Birgit Pauli-Haack Oh, I’m doing well. I’m glad it’s Friday though, but this week, I actually got close to finishing my office with a new standing desk, and I was rearranging furniture, but the current state is still unorganized chaos, and I hope I get it over the weekend to an organized chaos.
Mark Uraine Nice. Nice. Yeah. Please share your link to that desk because I for one have been wanting one.
Birgit Pauli-Haack Yeah. It’s amazing. I will share this in the show notes for everybody.
Release schedule and scope for WordPress 5.3
Mark Uraine Perfect. So Birgit, let’s jump in. Last episode, Jimmy had a question about the release schedule for WordPress 5.3, and there’s been an update recently posted on the Make Core Blog, so for all our listeners, Beta 1, this is a proposed release schedule right now, but Beta 1 is the 23rd of September. A release candidate will be on the 15th of October, and the general release will be on the 12th of November of 2019 for WordPress 5.3.
Birgit Pauli-Haack I like that. It’s way before Thanksgiving, and I hope that this plan is actually going to stay.
Mark Uraine Yeah. This falls just a little bit after WordCamp US now, and-
Birgit Pauli-Haack Yeah. Yeah. We’ve also seen on Slack and on Twitter, the questions where we mentioned that some things would come to the WordPress site near you about Gutenberg, and they were asking, “Okay, when does it come?” You don’t have to wait that long, and that seems to be a confusion in some parts. When you go and install the Gutenberg plugin, it will override the version that comes with WordPress Core, and you can have the improvements right away. You don’t have to wait till the next release of WordPress comes out to get the new features of Gutenberg that we talk about. I know a few people are actually hesitant about installing yet another plugin, but this is good if you really want to test it, do it, and the more you test it and share with us, then the Core version is then so much better afterwards.
Mark Uraine Yeah. I think that’s important to note, because the plugin does get you the latest improvements to Gutenberg, which is fantastic, and right now, those latest improvements just don’t get merged into WordPress itself fast enough. As we wait for a new version of WordPress to come out, there’s only three major release cycles throughout the year, so to get those improvements right away, get that plugin.
Birgit Pauli-Haack From the announcement from Dev Core, we also learned that there will be a 2020 theme from the design team, and Peter Miller asked us on Twitter if we would want to tell more about it, and I’ll just bounce it off to Mark. Mark, what’s going to be happening with 2020?
Mark Uraine Yeah. The 2020 theme is a go for WordPress 5.3. The idea behind it right now, there was a note in the dev chat notes that I would be championing this, so it’s a perfect opportunity to say I’m not leading the 2020 theme, but I will help wherever I can behind the scenes. I believe the leads for that are still being determined, and the idea there is that maybe we can pull from and build from the base of an existing theme that uses Gutenberg really, really good, and maybe in creative ways. I know I’ve heard people talk about maybe something that really focuses on beautiful typography, so this is kind of all in flux right now, and I think as this continues forward, announcements will be made, but I know it’s something I’m looking forward to, something beautiful with wonderful typography. That’s going to be great.
Birgit Pauli-Haack I’m looking forward to it, too, and I’m looking forward to the design chats that will cover it later on. That’s from our listener questions that we got within the last two weeks. Let’s continue with our announcement. I only have one, and we just finalized it, the next Gutenberg Live Q&A that’s going to be livestreamed on YouTube is coming up, and we needed to change to Thursday instead of Friday, and to a later time, 7:00 p.m., because for our panelists in Australia and New Zealand. We will have the team working on the block directory on the show, and to talk about it and answer your questions, and it will be Mel Choyce. She’s from Boston, and then Alex Shields, and CK Lee. They’re both … Alex contributes from Australia, and CK Lee is in New Zealand.
So it’s going to be a great conversation, and there are a lot of things to talk about because it’s a fairly complex new feature that will be coming to WordPress, to a WordPress instance near you, very soon.
Mark Uraine How cool. It is one of the focus areas for 2019 that Matt had mentioned in the State of the Word, so the work that they’re doing has been looking really good, and I’m excited that they’re going to be on your program coming up here, Birgit.
Birgit Pauli-Haack Yeah.
Mark Uraine Ask them all the hard questions.
Birgit Pauli-Haack Of course. That’s what I’m known for, right? No, but seriously, they’re doing awesome work, and I’m glad we can get all three of them to get a conversation going about that with you and the listeners and those who watch. We have a few things that are in the community that are not necessarily from the team, from the Gutenberg team. Do you want to start with that?
EditorsKit by Jeffrey Carandang
Mark Uraine Yeah. I love this section of our episode because it really just shows the ways in which other people are engaged with Gutenberg and what they’re doing outside of the immediate team, and so seeing what the community makes has just been always one of my favorite things. Recently, there was a tweet from Jeffrey Carandang, who built a plugin called Editor’s Kit, and this enhances the content creation with Gutenberg. It provides a set of page-building block options for the editor, and so he tweeted about this. I’ve worked with him actually on a few Core blocks and things that he’s contributed to in GitHub there. Great guy. Some of the plugin’s features though include mark down conversion while writing, so if you put a few asterisks on either side of a word, it’ll convert it to bold, things like this right there. He’s got inline text formatting and colors. This is something I’ve been working him with to get into Core. I’d love to see that get in there.
This plugin also has block visibility based on device, so you can hide or show blocks. It has various styling for images. You can take an image and make it a circle image, or a polygon image, and then among others, one of my other favorite things he includes here is toggling the title visibility of the page. I’ve always wanted something that did that, so really good plugin, Jeffrey. Thank you for your work on that. On his site for the plugin, Editor’s Kit, he is using Frontenberg to show off some of the things he’s building with this. Great work.
Birgit Pauli-Haack Yeah. It’s fascinating how … It’s actually what happens with open source. If it’s not in Core, you can try to build it and see what happens with it. It’s a good testing ground, but it’s also something that if it’s an edge case or something that the Core team doesn’t feel that’s part of the 80%, so to speak, 80% of the usage, but I definitely like the toggling the title visibility because it’s important for people that want to use the cover block as a hero image on a page or on a post, and if the title is too visible, it comes across a little bit clunky, so toggling that is really helpful, and of course quite a few people want to have the text colors change, not on a paragraph level, but on a word level, and that’s really cool to make that available.
Mark Uraine Yeah. Those inline controls, I can’t wait to get those in Core.
Contributing to WordPress by Nadir Seghir
Birgit Pauli-Haack Yeah. Well, check out his website with the Frontenberg, and you can use the blocks right there in the front end editing kind of experience. Another great contribution came from Nadir Seghir, who wrote about his experience with contributing to Gutenberg. As a freelancer, to work for free is a big no-no, but how can you learn and hone your skills? Nadir advocates for contributing small to big projects, and he elaborates on his reasons. He finds big projects make it easier to contribute because there is a contribution guide. It provides a better testing environment, and also strict coding standards. Nadir actually contributed to the first prototype with a snap-to-grid feature Mark mentioned in the last episode. It’s one of his first contributions to Gutenberg. If you are on the fence on contributing to Gutenberg, I think it would be a good blog post for you to read.
Mark Uraine Yeah. It was a good read-through for me. That contribution that he did, that first one about that snap-to-grid really just got moving something I’ve always wanted to include in Gutenberg, which is that grid system, so before we committed ourselves to snapping to a grid, we had to take a step back and Nadir’s been helping me out with trying to figure out the right way to implement a grid system within the editor.
CSS Grid comes to WordPress
Next on that community list here is CSS grid block, which about a week ago on csstricks.com, was a post titled Bringing CSS Grid to WordPress Layouts, and it provided a brief history about the editor, about CSS layouts, then jumped into CSS grid, and how it can be achieved in WordPress. The authors touched on the grid’s layout builder for WordPress plugin, which is really a cool block. It allows the user to build overlapping grid systems with really complex layouts, so the link is in the show notes to the article, and we can include on to the plugin as well that they reference, but really cool idea about a block that you can insert in Gutenberg, and then select a grid pattern that you want to add your block to, and these grid patterns can overlap each other, they can be as complex as you want them to. I really enjoyed messing around with this.
Birgit Pauli-Haack Yeah. I tried it, too, but I’m more of a simple person, and these complex things are kind of … I get so fast down the rabbit-hole that I say, “I cannot do two hours on this.” It’s really interesting how the layout and template space develops around Gutenberg. I have only one announcement, so the last one is the announcement that for Drupal 8, the Gutenberg instance that the library for Drupal is stable now and it has been since the end of July. I just wanted to put it out there to know everybody that Gutenberg is not only used in WordPress. Drupal uses it and they have embraced it since last year, DrupalCon in Europe, and yeah, check it out. We have that link in the show notes for the Drupal library.
What’s in Gutenberg release 6.3?
But now, we come to the big section of our podcast today, is that Gutenberg 6.3 was released this week, and it contains 87 line items. Most of them are bug fixes and issues, but having said that, there are a few cool new features and enhancements we want to point out to you. Do you want to start, Mark?
Keyboard only navigation
Mark Uraine Yeah. Some of the features we’ll go over in the changelog here. There’s an accessibility big one that got merged in. It’s the navigation mode for easy navigating between blocks. This is big because the accessibility team has communicated it to the Gutenberg team that navigating and tabbing around through the blocks to jump from one block to another block is difficult with the keyboard because the blocks have so much going on within the tool bars and the content that it normally takes you like 20 tabs to get to the next block, and so now introduced in Gutenberg is a way to hit, you just his escape, and it pops you out of the content, and into a navigation mode, so when you hit tab, you immediately jump to the next block, and then when you want to go in to edit that block, you can hit enter and you’re in the edit mode again where you’re editing the content, cycling through the tool bars. I’ve tried it out several times and it’s been fantastic, even for me, who I’m not a huge keyboard navigator, keyboard user for navigating things, and I found it very friendly for that.
There is a call for testing on the Make Accessibility Blog as well, so please test this out. A couple other things real quick, supporting text alignments in the table block is a big one, so now you can align the text within the cells, which is really cool. The tables, you couldn’t do that before, so now it’s possible. Another one is support for changing the separator block, the color of the separator block. That has only been allowed to be done through the theme level, but now you as a user can go in there and change the color. What’s next, Birgit?
Birgit Pauli-Haack Yeah. These are great features, and I’m actually a keyboard person, and it took me, I think when I first tried it out, it took me about 20 steps to just get an image block loaded with an image, and it was really hard, so I’m really happy that this is now in Gutenberg. There were some other enhancements, not new features but enhancements that are … The block preview component has been improved to support previewing multiple blocks in a template, for instance, or expose the component to the block editor module, so when you want to grab a block and you can see, or in an insert, you see it previews how it’s going to look. I think this also works with reusable blocks, we saw there, too, and those needed a few improvements. They were a little bit buggy, so I’m glad that this now landed in 6.3.
The modal component has been improved with a little bit of a padding, and have a correct position of the close button, which is helpful when you have a model popping up, and then there were a few additional class names instead of inline styles for text alignments for the verse block, the quote block, and the paragraph block. That was one of the few real complaints that there was so much inline styling in Gutenberg when it first came out, so I’m glad that that is now switched over to class names, and then you can target them through your cascading style sheets better.
Speaking of color, there is now the color purple as an option for all the backgrounds and text color choices in the picker, and I learned from Mark today that that’s actually one of the most important colors because it’s so accessible, and that brings also the last enhancement to talk about that I want to point out, is the visible focus and active styles for Windows in a high contrast mode. That’s also an accessibility enhancement people were waiting for.
Mark Uraine Yeah. I’m actually wearing purple just for that one point that you had to bring. We have now got purple in the color palette.
Birgit Pauli-Haack Yes. It’s a nice purple.
Experiments in nested Blocks, Widgets and more
Mark Uraine Yeah. All right. Next up is some of the experiments that were merged into 6.3. Let’s see. We’ve got adding a settings page, which we’ve I believe talked about that before, to the plugin. This kind of allows people to enable or disable specific features within Gutenberg that are more experimental right now and not quite fully fleshed out. There still might be a work in progress. Let’s see. Add padding when interacting with nested blocks. This also eases while you’re mousing around, that you can click the parent block easier this way, rather than getting stuck in the nested blocks. Finally, the widget screen is receiving a lot of improvements lately. We’re really pushing for this to be a part of WordPress 5.3. So a lot of work is being put in here to fine tune all the widget blocks, I guess, in the WP admin.
Birgit Pauli-Haack Awesome. Awesome. Yeah. This morning, I finished a website with Gutenberg 6.3 on it, and I felt the considerable differences now with the padding to interact with nested blocks, it was a much smoother handling of the different blocks inside a group block. You said that the widget feature will hopefully land in 5.3. Is it also a target for the navigation block?
Mark Uraine That’s the plan, Birgit. We want to get these big items that were announced late last year, we want to get them in for 5.3, so a lot of focus is being put there right now.
Bug Fixes galore
Birgit Pauli-Haack We also expressed a sigh of relief for some of the bug fixes that we found that landed in 6.3. There’s one that was a little annoying that when you focused a rich text, it would show duplicate content when you were pasting, and that’s a little awkward, and then link to the full-size image of the gallery block, there was one question for a listener two or three episodes ago about the gallery block and when you link to the media file, it said, the documentation said it will link to the full-sized image, but it actually only sized to the large image. And then there’s two accessibility bug fixes. One is focusing new post title when switching between code and visual editor, so you can still put the post title in there, and then add the confirmation step to enable the custom fields option, and keep the image block out and caption attributes even if you upload a new image.
I think that could have gone either way. Do we keep the image description and caption attributes when we change out the image or not? But I think most of the time, you’re uploading a new-sized image, or a better image for an existing place, than switching it out completely. And that ends our 6.3 release recap. I want to point out, as I said, it’s going to be 87 line items more, not more, but maybe 60 line items more. Check out the release notes from Riad Benguella. That is on the Core blog.
Block Directory, a subsection of plugins
All right. Speaking of the block directory, there’s a section what’s in active development and it’s still going to maybe come in, hopefully in 5.3, but the team is working really hard about it, and one of them is the block directory, and I’m not seeing a whole lot of comments that somebody in the community picks it up for a larger review, so we are going to do this on our Gutenberg Times Live Q&A, but Alex Shields from the meta team, and Mel Joyce from the design team have published since May quite a few updates on the particular blogs about this feature, and there is some community discussion going on the blogs, but Alex wrote for an update, just this week, and he shared the status of the various parts that will make the feature.
You see a nice animation of the block inserter, where you can search for new blocks, and it’s still being worked on, but it should land soon in Gutenberg Master. Then the next hurdle would be according to Alex, is the working and testing … Actually, the developing and testing of the plugin install process, which will experience some refactoring, and then he also shares the link to a temporary search point for the plugin directory where you’re unable to search for some blocks, and discover them. The plugin developers can definitely reach out to Alex via the WordPress Slack and test their block JSON file. There are some links in there for the documentation of the block API that Greg Ziolkowski published on the GitHub repository.
So there’s a few things that plugin developers will need to consider to get this all in, and of course I will not only share Alex’s last update, I will also share the prototypes that Mel published earlier on the design blog so you can get a good 360 of that new feature, and you get really prepared … That’s your homework, to prepare for the mentioned Gutenberg Times Live Q&A, which is going to be happening in two weeks, so you’ve got two weeks’ time, right?
Mark Uraine That’ll be fun. That’ll be a good episode, because you’ve got key players there working on that block directory. That’s going to transform how some people use the directories within WordPress. I love that they’re actually starting out with single block plugins. That actually keeps it simple and that way people are installing exactly the thing they need right on their WordPress installation.
Component Review
We’ve got component review happening right now in Gutenberg. There’s been recent work by Dave Whitley, who’s going through all the components within Gutenberg, and trying to document them, establish the guidelines and principles behind them, and really just bring them all together so that we can all agree on the consistency for these components, and a component really is just a design pattern, really, and that’s connected to a certain section of code, right? So we’re going through this, and this will enable us to use these components elsewhere throughout, hopefully some day we’re going to be documenting this stuff so thoroughly that we’ll be able to extend these components out into the rest of WordPress and get an adoption for the rest of this throughout the software to really bring a cohesive interface to everything.
Dave has been working a lot and needs some feedback from people about these components and the documentation. We’ve got a link in the show notes, but any little bit of feedback will help him continue with this, and any others involved with this. These are also intricately related to a lot of the Figma files that we have on the design team. And then finally, that brings me to a really cool documentation site that what this site does is it goes through all the existing documentation for the Gutenberg components, and it just pulls them into this site and creates a visual of each of the components, and it shows you the code used for each of those components, and it organizes them and lays them out very nicely. We’ve got a link in the show note. This is an unofficial site, but someone by the name of Q has begun working on this, because he thought this is a great opportunity with these components and he wanted to make more sense of them and bring them together visually for everybody.
So he put this together. I’m in love with this thing, and I’ve been talking with him. There is a GitHub issue about this that he’s posted on Gutenberg, if anybody wants to read more or contribute to it. He’s also talking about working in a sandbox onto this site, so that way you can edit the code right there and watch it update the design pattern in real time.
Birgit Pauli-Haack That’s a fantastic tool, yeah. I’m just browsing through this and see the notice component, and every variation of it is in there, example codes, and then development guidelines and design guidelines that accompany that. If you want to develop blocks for Gutenberg, this is definitely a good place to start out. I hope some of it makes it somewhere in the official documentation, but this is really great, a great site.
Mark Uraine Yeah, and I think I’ve also shared this link in today’s Gutenberg design update post, so if anybody is curious, they can find it there, as well.
Birgit Pauli-Haack Right. I think that’s a wrap for today. What do you think?
Mark Uraine Yeah. We’ve covered quite a bit.
Birgit Pauli-Haack Before we end the show, though, another reminder for those who came in later, the next Gutenberg Times Live Q&A will be on August 29th at 7:00 p.m. Eastern Daylight, and 2300 UTC, and about the upcoming block directory feature with Mel Joyce, Alex Shields, and CK Lee, who worked on this together for the last, I don’t know, six or seven months. Any last [inaudible 00:31:43] from you, Mark?
Mark Uraine As I mentioned, I posted the latest Gutenberg design updates. It’s been a couple weeks since we recorded an episode, so two of them are up there, 29 and 30. Go check them out, see what’s happening in Gutenberg, and leave some comments for us.
Birgit Pauli-Haack Awesome. Yeah. That’s where I will go next. As always, the show notes will be published on gutenbergtimes.com/podcast, and if you have questions or suggestions or news that you want us to include, especially for the community section, we might not catch everything, send them to changelog@gutenbergtimes.com, changelog@gutenbergtimes.com, or just ping the @gutenbergtimes on Twitter. The direct messages are open, so if you don’t want to talk publicly about it, that’s absolutely fine. That’s it. Thank you so much for listening. I say goodbye. Have a wonderful weekend or week, depending on when this comes out, and I hear you the next time. Thank you so much.
Mark Uraine Birgit, thank you for hosting this episode with me again. It’s always a pleasure, and to the listeners, thank you, everybody, for listening.
Birgit Pauli-Haack It’s an honor, Mark. Goodbye.
Mark Uraine Bye-bye.
