In this episode, Birgit Pauli-Haack and Mark Uraine discuss Online Virtual Event Formats for the Block Editor and Community Teams, Gutenberg 8.7 Release, and What’s New for the Block Editor in WordPress 5.5.
- Music: Homer Gaines
- Editor: Sandy Reed
- Logo: Mark Uraine
- Production: Pauli Systems
Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed
Show Notes
New Online Events Format Community and Gutenberg
Learn.WordPress.org Workshops
- Learn WordPress: Project Details and Roadmap
- Workshop presenter application
- Workshop reviewer application
- Discussion leader application
Hallway Hangout
- Advancing the Editor Interface with Jon Q
Gutenberg 8.7
- Gutenberg 8.7 was released on August 5
- Gutenberg 8.7 Adds Minor Changes, Updates Block Pattern Designs, and Continues Full-Site Editing Work
Updates to Block Editor in WordPress 5.5
- Field Guide: Block Editor Section
- WordPress 5.5 Core Editor Accessibility Improvements
- New editor preview options
- Register theme feature API
- New Block Tools
Block Directory
- You can now add your plugins to the Block Directory
- Block Directory slated for WordPress 5.5
- Proposed BD Guidelines
- Block Plugin Checker
Block Patterns
- Block Patterns in WordPress 5.5
- Creating a simple block pattern plugin for the Gutenberg editor by Mel Choyce
- Block Pattern by Rich Tabor
Developer focuses
Keeping up with Gutenberg – Index
Did you like this episode? Please write us a reviewhttps://lovethepodcast.com/gutenbergchangelog
If you have questions or suggestions, or news you want us to include, send them to changelog@gutenbergtimes.com.
Please write us a review on iTunes! (Click here to learn how)
Transcript
Birgit Pauli-Haack: Hello, and welcome to our 26th episode of the Gutenberg Changelog. In today’s episode, we talk about upcoming new online virtual event formats for the block editor and the community team, the Gutenberg 8.7 plugin release, and we will have a special segment on what’s new for the block editor in WordPress 5.5.
My name is Birgit Pauli-Haack, I’m the curator of the Gutenberg Times, and I’m here with my co-host Mark Uraine, designer at Automattic and core contributor to WordPress. Hi Mark, how are you today?
Mark Uraine: Hey, Birgit, I am a little under the weather today I’ll tell you, but we’ve got so much to talk about today. These are some big, big items here. So once we get through this episode, I’m going to go for a little walk in the sun and I think that’s going to re-energize me a little bit to continue on into the weekend, but how are things going on your end?
Birgit Pauli-Haack: Yeah, but it’s good to hear that you had a productive week. Today I feel a bit physically exhausted, maybe running around in the park during lunch break wasn’t such a good idea after all. The heat index was 100 Fahrenheit. That’s 38 degrees Celsius. And so I’m looking forward to a restful weekend with no work beyond the newsletter that comes out on Saturday, but mentally I’m still on cloud nine.
Live Q&A
We had a great live Q and A show last night with Kelly Dwan, Alex Shiels and Otto Wood from the meta and plugin team. And we discussed the new Block Directory that is coming to WordPress 5.5. And yeah, big news. And it was a discussion among friends, very informative, but also relaxed. And there were some interesting audience questions and some of them gave the team quite a few more ideas to iterate on after the first version is out with the release of WordPress 5.5. The recording of the show is already available on YouTube channel and I added some resource links to the video description.
Mark Uraine: Right. That’s great. Especially when they can walk away with some new avenues and new ideas to work on from the listeners and the viewers.
Birgit Pauli-Haack: Yeah.
Mark Uraine: True open source.
Birgit Pauli-Haack: Yeah. I love open source as well, because of that. And just as a side note, there is the wishlist out for 5.6. It will be open until August 20th and there are already 110 new suggestions in there. New and old suggestions. Some suggestions are about 10 years old, but somebody has….
Mark Uraine: Somebody wants it done.
Birgit Pauli-Haack: Yeah, and redone obviously.
Mark Uraine: 110 you say though?
Birgit Pauli-Haack: Yeah.
Mark Uraine: Wow.
Birgit Pauli-Haack: I actually went through them and put them in an Excel spreadsheet to kind of see, okay. To also figure out, is there a probability that it actually gets into 5.6 and then see what happens in December. Yeah, where was I wrong? And some of it is definitely plugin territory. It has been for a long time.
Announcement
So, we have a few announcements, no, only one announcement. It’s that with the lessons learned from the online events, the virtual WordCamps, the community team is revamping virtual events and we want them to be not so long. So the lessons learned were that most people don’t want to sit through six-hour talks all day at home and the community has brainstormed quite a few ideas for better online events. And the first iteration is a format that they are recorded workshops that can be watched asynchronously.
Mark Uraine: You got it.
Birgit Pauli-Haack: I got it. And then after they’re published, a week later they start scheduling live discussion groups about that topic. So there is this live interaction where people can kind of talk about this, but it’s to that topic in the workshop. So it’s a question from the workshop, it’s where they got wrong, what they’re missing and all those kinds of things. And these discussion groups will be happening multiple times over as many time zones as possible. So everybody in the community can actually participate in those. So the community team opened up vacations for three volunteer positions. One is the workshop presenter. Of course, they pitch sessions like they would do for a WordCamp. Then workshop application reviewers that is kind of the equivalent of a speaker wrangler from a WordCamp. Kind of going through and then working with presenters and then discussion facilitators for the workshops.
Workshop
And so the application forms will be in the show notes and through the grapevine, I found out that on August 12th, this will be launched softly. So not with a big brouhaha, but just kind of make sure that everything works and everything is out there. learn.wordpress.org is the URL for it. And that’s actually the site of the training team and community team and training team are working on this quite closely together. And two of the workshops that will be released, I think they’re going to release about six of them. Two of them will be about the Block Editor. One, an intro to Gutenberg development presented by Jonathan Bossenger, and the other one is intro to publishing with the Block Editor presented by Erica Varlese. And by the time our next episode we record, we’ll have the dates for the discussion groups, but what’s the website, learn.wordpress.org for the new workshop kind of thing.
Mark Uraine: Yeah. I’m glad they’ve got a few Gutenberg things, Block Editor stuff already lined up ready to go.
Birgit Pauli-Haack: Yeah. And I talked with a few of the developers that presented at the JavaScript for WordPress conference that that’s going to come and that they have to kind of think about if they want to submit some of their developer talks because they didn’t have that much time in the conference. There, they would have more time and it’s prerecorded, so they can actually tighten that up a bit if they wanted to. And tell everybody out there, dear listeners, if you want to present, this is a great chance to do that.
Mark Uraine: Where would they go to present?
Birgit Pauli-Haack: We will have in the show notes, we will have the application forms. So there will be application forms like for any WordCamp as well. And I think Hugh Lashbrooke published some of, or hasn’t published yet, the framework for the workshops, how long they are and what needs to be delivered in these applications. But I put the links in there so you can all go forward and submit.
Mark Uraine: Excellent.
Birgit Pauli-Haack: And I think that will be quite nice because they will put every week new workshops into the feeder, so to speak, on the site so they can do multiple topics along and multiple times.
Hallway Hangouts
Mark Uraine: Perfect. So also another announcement here is the Block Editor team has started an experiment with informal hallway hangouts. Live demos basically, that are announced in the core editor channel in Slack.
Q has actually done two of them already. He showed us about his exploration of the design system for WordPress components that are accessible, cohesive and comprehensive. And we talked about Q storybook implementation before on this channel and this is really like next level iterations on the work that he’s doing. It’s a fascinating project and would help plugin developers to quickly prototype blocks and plugin screens and provide almost production ready code. So it’s a lofty goal and Q takes us along his journey with those hallway hangouts there. If you want to see some next generation screens that are being worked through, check it out. As always links are in the show notes, and he’s doing a lot of work and submitting a lot of stuff on his repo on GitHub as well.
So there are more hallway hangouts that are planned for the future. Let’s see, next week, the week of August 10th, Andrei Draganescu and Robert Anderson will be getting together. They’ll be talking about some development stuff.
During the week of August 17th we have Joen Asmussen and Noah Shrader getting together to talk about some design-related stuff.
And the week of August 24th, that hallway hangout will be with Carolina Nymark and William Patton, and there’ll be talking about theme related topics. So these are all informal and depend on the contributors schedule, but chime in and listen along. And there are great ways to reach out and see each other again, and talk through the things that we’re experimenting with.
Birgit Pauli-Haack: Yeah, and as far as I know, these events are recorded and have also a kind of an educational writeup afterwards, like Q is modeling that. So there can always be a reference as well for the work that’s done. Yeah.
Mark Uraine: I was just going to chime in, we’ve done a few of these in the design channel on Slack as well. I know once a month, we try to get together through video and talk about some design related problems with community members. So, very helpful I think.
Birgit Pauli-Haack: Yeah. And it’s a great alternative to all the WordCamps that are not happening and where in happenstance just kind of people stand together and look at something on somebody’s laptop. Yeah. Giving serendipity another chance here for good communication there.
Gutenberg 8.7 Release
So that brings us in our segments here to what’s released. And we are in the post-WordPress 5.5 already with Gutenberg. Gutenberg 8.7 was released on August 5th. And as I said, it’s the first plugin after the features that went into WordPress 5.5. Twenty-six of these hundreds of change items that are in 8.7, will be back ported to, or have been back ported to WordPress 5.5 Release candidate two. So they will be in there. And if you want to know more about it, ping me and I’ll give you the pull request numbers for that.
Enhancements
We’re starting out with 21 enhancements, and I point out that, so one is that the attempt to block recovery is now the default option for the block invalidation.
That is still a little, I would say awkward sometimes when you remove a plugin and the content is not showing any more, you get some notes there, and the Block Editor is now catching those and tries to convert them to blocks. So that’s in there. And it also will have a block example now for the buttons block, which was kind of, you put the block buttons block in, and you don’t know what to do with it, now you know. So, very great enhancement. For the reusable of a block that converts to regular blocks, that’s still in the options menu, is now in the toolbar. So you don’t have to search for it when you want to use a reusable block as a template and convert it to regular blocks and then change it. So that’s definitely a good enhancement.
Also, the auto save consistently, or the edits sometimes when you change meta information in the sidebar, it would not be in the autosave and there was some inconsistency and that’s taken care of now. And one change is in the sidebar in the documents tab. Now you see which block with post type, you are actually editing or you’re editing a page or you’re editing a post or you’re editing a custom post type with the title of it. So now you see it in the settings header.
Mark Uraine: Yeah, so instead of saying document, right?
Birgit Pauli-Haack: Yeah. It says post settings.
And then there were some updates to the core block patterns, quite a few of them, they added the heading and paragraph pattern. All the others just got some updates there. In the last enhancement in that list is that the block directory new in WordPress 5.5, uses now the local assets to auto detect them or auto detects the local assets of the plugins when it shows up in the directory.
New APIs
Gutenberg 8.7 also comes with four new APIs. Three of them I understood, the other one I didn’t. So I’m not going to talk about the last one. So the lead, you can save data into the core data component there, well, a script there, and now they also have the delete operations, which helps, right? It’s that you can also fix mistakes by deleting something, but also now has a server side handling of the block align flags. So it’s now supported also with your PHP display or rendering. And the scaffolding tool grade block is now enabled to load translations for the creative blocks. So they were kind of added to the JavaScript. The JavaScript translation scripts are now added to the create block scaffolding tools. So, you get those with your plugin when you use that tool.
Mark Uraine: And that last one that is a destructive style tool button that is destructive style kind of renders the button in a red color, like a border or something. So you know it’s a button that’s going to destroy something. So if you’re moving a post to the trash or something, yeah, that’s what that does.
Birgit Pauli-Haack: Oh, okay. Well, thank you for helping me out there.
Mark Uraine: The only reason I know that is in the Figma files for the design, that’s labeled destructive as that state or that button.
Birgit Pauli-Haack: Good. Red is destructive. Okay, got it.
Bug Fixes
Mark Uraine: And then we had 32 bug fixes in this release, 10 of those fixed accessibility issues that were flagged by the team. Which is really great to hear, right? It’s great to see that so many of these bugs that are getting fixed or have to do with accessibility and helping in that aspect, many of those included things like announcing the block selection changes manually on windows. Fixed the arrow navigation in the link control suggestions. Many all throughout there. There were some other bug fixes that were around block patterns, like fixing translatable strings. There was one also about fixing the block insertion place after clicking browse, all in the inserter, in the inline inserter. So when you put the inserter in the document, you get a little pop over, there’s a browse all button if you want to go see all the other blocks, well if you click that, it would forget where you’re at, and where you wanted to add the block to, because it kind of takes you over to a side panel, but now it remembers that placement. So when you do add the block, it adds it to the appropriate place.
Birgit Pauli-Haack: Good.
Mark Uraine: So, many bug fixes. Fixing the button block colors in the editor, the save shortcut in the code editor, block directory icons.
Experiments
So, that leads us to the experiments. 24 experiments in this release, many of which are all around the full site editing or the site editor experience in Gutenberg and a whole bunch of these had to do with the post blocks. So you have post comments block, you have the post excerpt block, the post date block. And just anything that you would imagine kind of that makes up a post, needs to be a block. And while those blocks mostly exist, I believe for the most part, they need to be revised and iterated. And so there’s all sorts of enhancements or experiments, things that are going on with them.
There are a couple of global styles in our experiments that were touched upon. Navigation block and screen is seeing a lot of development time right now and a lot of design iteration. And then of course, some of the APIs that were experimented as well.
Documentation
Birgit Pauli-Haack: Yeah, which brings us to documentation. And there were nine documentation changes in Gutenberg 8.7. One is that the three-year-old Gutenberg FAQ was updated.
Mark Uraine: Ooh.
Birgit Pauli-Haack: And also we now have documents to the new block tools, theme support and core block patterns. Very good. And then there’s also some link changes and some formatting over there going on on the documentation site or pages, but there was also a new convert block registration RFC to the block metadata document. So there were two years ago, Greg actually started the block registration RFC, which means, RFC means request for comment. And that has now been finalized. And in the block, metadata is the new name for it in the documentation.
Mark Uraine: It’s good to see all these typos that are getting fixed in the documentation.
Birgit Pauli-Haack: Well, these are actually very nice first issues if you ever want to start contributing to Gutenberg. Yeah. Contributing to the documentation is always appreciated very much and also very easy to do.
Mark Uraine: Yeah. There’s always work there that could be done, right?
Birgit Pauli-Haack: Yeah. Just as a side note, we now have a new team rep for the developer documentation for Gutenberg, and it’s Justin Ahinon. He’s the new team rep for the developer documentation for Gutenberg. Yay – stepping up to the plate. And he is definitely a good person to do that because he just finished the WordPress 5.5 field guide with a lot of different changes because not only the blog editor had received a lot of changes, but the whole ecosystem kind of got a revamp on a few things. Which brings us to our special segment on what’s new for WordPress 5.5 for the block editor.
WordPress 5.5
Mark Uraine: Wow. All right. 5.5, everyone. We do have some great links in the show notes. So make sure you check those out because there’s a lot here. The first one I wanted to talk about today is revamping of the block UI, right? This is finally, this whole redesign is getting merged into core now and is going to be released in 5.5.
And this redesign of the editor does a few things really well. It reduces complexity. There’s a simplified iconography and a higher contrast color palette. Meaningful focus indicators, and all-around general interface enhancements. And the interface can scale more gracefully now. And as plugin authors use this UI to help enforce their plugins in the editor and how it expands as we add more blocks to the editor, this just helps really clean things up and I’m so excited this is getting in.
Some of the examples of some of these improvements include the single toolbar to have fewer tab stops now. Let’s see there, the primary tool bar is bigger for each block and the tappable area is larger and less UI overall to lighten the cognitive load when you’re editing your document. Some of these changes though, Birgit, they’ve been a little contentious, is that the right word or debatable? Debatable, I think is the word.
Birgit Pauli-Haack: Debatable. Yeah.
Mark Uraine: Yeah. One of them, one of the big ones is removing borders around blocks and there’s been a lot of back and forth on this and really good discussions, spirited debates. And it’s always great to see these people getting involved and raising their opinions about some of the direction forward. And what’s even more beautiful is when people are really encouraging the solutions around these things and really trying to stand together to promote a good direction forward that’s both good design and very accessible for everybody. So both of those together are important.
Birgit Pauli-Haack: Yeah. And I think in one of the bug fixes, accessibility bug fixes was actually to announce the block selections again, or the border around it in certain windows to offset some of the problems that happened with removing the borders around blocks. There is some back and forth on that to kind of make that more accessible again.
Mark Uraine: Oh, all good. And so the effort is continuing, right. There’s always changes coming through. And as long as everybody’s being mindful and helpful at the core of the project, we can get through everything.
Keyboard Navigation Improvements
So along with those UI changes, Birgit, there were a lot of keyboard navigation improvements. And without going through them all, we’ve got links, but enabling block movement, add keyboard shortcuts for moving blocks, improved keyboard navigation on gallery blocks and so forth. There were screen reader improvements announcing all notices and let’s see, add heading to the block, inserter tips to make it more visible, removing titles from button blocks, all sorts of screen reader improvements. And focus improvements, like creating consistent focus styles in the UI, or let’s see, fixing extra tab stops, fixing the focus loss issue in the link control component and onward.
Birgit Pauli-Haack: Yeah. And going through that list, and that list is in an article by Anne McCarthy, just the other day that did not make it yet in the field guide. It brings us back to what was it? May, March when 5.4 was released, those block UI changes happened right after that. It was experimental until then. Wanted to get it another release cycle into them to make it better before it gets actually into core. But for us, dear listeners, on the Changelog, that’s what, 10, 12 versions ago or 8 versions ago, and reading through the list, it has come quite forward there. Yeah. Even though they are just a keyboard navigation, a list of that. What some of us already have a kind of muscle memory that’s new for the big user base of WordPress now with 5.5, so go through it.
And I was reminiscing on some of that stuff. Oh yeah. I understand. Yeah. Like the shortcut to toggle the fullscreen is really helpful because the shutting it off doesn’t really survive the setting, your browser changes. If you enter the cache, that setting is gone and you see it. And then now you have a keyboard shortcut. That’s actually pretty new. So it’s really interesting.
What also comes with WordPress 5.5 is that the preview has changed. When you click the preview in 5.4 is a new tab opened and you see the front end. Now you can switch between the mobile and the tablet and desktop and see it right in the editor and then have also the feature to go out and do it in a second tab. But that helps you fix some of the display issues for tablets and for mobile, when you are editing on the desktop sometimes you kind of lose the focus on that. And these preview options are only working right now on the medium to large screens, because it’s the first iteration. And so they’re always improved over the course of the next releases. And there’s also in the blog post by Isabelle Bison, she also has the code in there, how you can address that from the plugin or theme. Also in WordPress 5.5 or theme related or theme development related things, things and stuff.
Mark Uraine: Things and stuff.
Birgit Pauli-Haack: So the ad underscore theme underscore support API is now can declare support for particular feature. And then the rest API was introduced that for WordPress 5.0. But in WordPress 5.4 it was expanded to the core theme features. And now with 5.5, you can also declare custom theme features. You, as in plugin developer or theme developers, can declare custom theme features just to make them available. So as a plugin, also, you could make a feature that can be addressed through the theme. And that’s the API that you would use when you want to make some of your plugin styling or layout, how the feature shows up on the front end targetable for the theme developers.
Mark Uraine: If I want all my texts to be three degrees to the left, angled to the left, I can do that. I can do that.
Birgit Pauli-Haack: You can do that. Yeah. Yes. You can expose that API to everybody else in the developer area. And speaking of theme support, there are also new block tools, and it’s the custom line heights for headings and paragraphs that are now available for the block editor, for the content creator, but also for theme support and for custom units on how to define the height of the cover block. So that’s also in WordPress 5.5.
Mark Uraine: I’m excited to see these themes start supporting these things. That line height one is so much fun to get right and to make adjustments, get your layouts just beautiful. Yeah.
Block Patterns
That brings us to block patterns. So block patterns are coming in WordPress 5.5. We’ve been talking about these for a long while, and they’re really just simplified patterns of blocks that get added to your layout, your document that you’re working on, and I think they’re going to save people a lot of time.
There’s a post on block patterns on the make core blog. We know that Mel Choyce, she has also posted a simple block pattern plugin posted about simple block pattern plugin for the Gutenberg editor. And Rich Tabor also has a post about building out block patterns. And so with all this great information, I’m excited to see where this goes as it’s merged into core.
Birgit Pauli-Haack: Yeah, me too. And block parents are so much easier to develop and to put in a plugin, then you don’t have to do JavaScript and all that. You could even, I think Rich has that in there that you actually could copy paste it into your PHP code and you just need to escape some of the quotes that you have, and then you’re golden.
Block Directory
Mark Uraine: And the block directory as well. The block directory is right there. You can now add your plugins to the block directory. They need to be single block plugins, but go for it. There’s posts on the make plugins, a blog about this. And in the gutenbergtimes.com blog, there’s a post about block directory slated for WordPress 5.5 version. Thanks, Birgit, again for that.
Birgit Pauli-Haack: You’re welcome.
Mark Uraine: And proposed block directory guidelines on the make plugins blog as well. And there’s also been a recent block plugin checker that was from Alex, right, Birgit?
Birgit Pauli-Haack: Yeah, both of them worked on it. Kelly Dwan and Alex, they both worked on it. Yeah. It actually, it’s not only checking the block that’s already in the repository. You could actually use a GitHub URL to have a plugin in a work in progress check for the plugin checkup before you uploaded it to the plugin directory. So that’s really cool. And we talked about it yesterday on the live Q and A quite a bit about it. So I will certainly put that video link also in the show notes for that.
Mark Uraine: Really good stuff. Some of the developer focuses included with this will be there’s various changes to the WordPress react components in WordPress 5.5. And the post there is in the show notes. Ella van Durpe also posted about the block API updates in 5.5, which include new block category names, block type metadata, and in block context information, and kind of how the parent and child relationship or inheritance happens through the blocks. So that kind of closes out our 5.5 list.
Birgit Pauli-Haack: Yeah. What we didn’t talk about is actually the image editing that is happening also with WordPress 5.5, but we’ve talked here before, but there’s also a great post about it in the field guide, in the development notes. WordPress 5.5 is a huge release.
Mark Uraine: Right.
Birgit Pauli-Haack: Yeah. It’s just marvelous. I loe this.
Mark Uraine: The funny thing is, is we’re not getting in some of the stuff that we were trying to get in and it’s still a huge release.
Birgit Pauli-Haack: Yeah. And I think it’s one of the first releases that is not so heavy on the Block Editor, it’s everything but. Although there’s huge stuff from the Block Editor, but there’s also the XML site maps, the image editing, the media lab, media library updates. It’s just on and on and on, I guess.
Well, for today, this is the end of our show. Before we end it, I wanted to tell you, however, about a new reference page that is called Keeping up with Gutenberg Index. And it lists all the posts from various team discussions and from various teams the discussions and what they’re working on in the Gutenberg-related area, and it’s chronological. And for every week you get the thing to the theme review team, the design team, the CSS score CSS team, the core JS, if they do some Gutenberg and nowadays it’s all about Gutenberg and JavaScript or jQuery and the Meta team, if it’s connected with the Block Directory. So you can just go through, okay, what did every team do? And it’s just a list of links, but you don’t have to chase them down on the various blocks.
Mark Uraine: Yeah, because those links, sometimes those posts, if people keep posting things, they fall back and they get lost in the back scroll. So this is a nice list that’s right there. Keeps them highlighted.
Birgit Pauli-Haack: So, and as always, the show notes will be published on the Gutenberg Times, gutenbergtimes.com/podcast. This is episode 26. And if you have questions or suggestions or news you want us to include, send them to changelog@gutenbergtimes.com, that’s changelog@gutenbergtimes.com. That’s it for me. Thanks for listening. You have a wonderful Gutenberg 5.5 release. We don’t hear each other until two weeks from now and by then, the release is out. Time flies, you know.
Mark Uraine: It does. Thank you so much everybody for listening and we wish you the best update with WordPress 5.5.
Birgit Pauli-Haack: Yeah. And thank you, Mark, for another great show and have a great weekend.
Mark Uraine: All right, you, too, Birgit. Take care everyone.
Birgit Pauli-Haack: Take care.