In this episode, Birgit Pauli-Haack and Mark Uraine discuss Taming the Blocks, Block Patterns, and Gutenberg 8.8, an All-Women Release Squad for WordPress 5.6, and the new Learn WordPress Workshops. Also, Updates on Experiments – Full-Site Editing, Widgets and Navigation, Global Styles and more.
Recording: Voice Search and creating your voice brand w/ Chip Edwards (WordPress SWFL Meetup) – Presentation start at 4:33.
Learn WordPress Workshops
- Intro to Block Patterns
- Intro to the Block Directory
- Intro to Gutenberg Block Development
- Introduction to Contributing to WordPress
- Introduction to Open-Source
- Intro to Publishing with the Block Editor
Discussion Groups schedule is available on Meetup Learn WordPress site
- Exploring the First Block Patterns to Land in the WordPress Theme Directory
- The Taming of the Blocks Part II by Thomas Kräftner
WordPress 5.5 was released
- What’s new in Gutenberg (August 19) by Jon Q.
What’s in active development or discussed
Update on August’s focus projects:
- Editor chat summary: 19th August 2020
- Project: Navigation screen and
- Project: Widgets
- Project: Full-Site Editing
- Add global styles sidebar at edit site screen
- Milestones by Matias Ventura (GitHub)
- Jon Q: G2 Component and his experimental UI project for Gutenberg. Jon held two Zoom sessions and wrote a couple blog post about this work.
- Robert Anderson and Andrei Draganescu demonstrated the block-based Widgets and Navigation screens which are in active development for the upcoming WordPress 5.6 release.
- Joen Asmussen and Noah Shrader from the design team discussed in their Hallway Hangout new WordPress Design Library, and some colors refresh work being done to the block editor.
Sponsored by Pauli Systems, LC
Birgit Pauli-Haack: Hello, and welcome to our 27th episode of the Gutenberg Changelog. In today’s episode, we will talk about taming the blocks, block patterns, WordPress 5.5 release, Gutenberg 8.8 updates on the experiments and many, many more things. I’m Birgit Pauli-Haack, curator at the Gutenberg Times. And I’m here with my co-host, Mark Uraine, designer at Automattic and core contributor to WordPress. How are you doing Mark?
Mark Uraine: Hey, Birgit. I’m feeling accomplished this week. I’ve been working on the new widgets editor and got some solid direction on the UX flows there. So it’s looking positive to get this completed in time for WordPress 5.6. And I’m pretty excited about that right now. How have you been this week?
Birgit Pauli-Haack: That sounds awesome. So I was extremely productive with quiet time to work on some client projects and for the documentation team like processors and guiding new contributors, and what do we don’t want to do with the Trello board and how that all flows.
Mark Uraine: Oh, goodness. Trello boards.
Birgit Pauli-Haack: Yes, I’m getting to, it’s warming up to me. So I’m really excited about that. And yesterday there was a meeting where all day there were meetings, but in the evening I had a local meet-up meeting with my local meet-up. And we had Chip Edwards there talking about voice search and Alexa skills and local business searches via voice. And what he does with some of the WordPress speakers is kind of hook him up to RSS feeds so Alexa can read their blog and people can let them read while they’re cooking or something like that. So it’s really interesting. I think that’s a new thing.
Mark Uraine: I have seen some of that, yeah. Really creative. I think I tested one out one time, a plugin that kind of, or an Alexa, what do they call them?
Birgit Pauli-Haack: Skills.
Mark Uraine: Skills. That’s right. Okay. Yeah, they’re very interesting.
Birgit Pauli-Haack: Yeah. And I just uploaded the video of the talk. So it gets a wide audience because not a lot of people were in there. I think it’s the fatigue of the virtual meeting kind of thing hitting us now.
Mark Uraine: Oh, yeah. I hear you.
Birgit Pauli-Haack: So I might even start learning, creating Alexa skills for a nonprofit projects that I’ve been maintaining for the last five years.
Mark Uraine: How fun.
Birgit Pauli-Haack: In addition to all the other projects that I’m going to run. But glad you got to work with the widget at the time, very much looking forward to hear about your tales later in the show.
Mark Uraine: Yeah. I’ll jump into that a little later on.
Birgit Pauli-Haack: Yeah. So we have one announcement. We talked a little bit about it last episode about learn.wordpress.org. And they have now published the workshops, and it’s a growing site and there are six already published and four of those deal with the block editor. So it’s on learn.wordpress.org/workshops, and also check out the meet-up space for scheduled discussion groups.
So the idea is that people want to self pace in learning part, so that’s the workshops, but then they appreciate, and I do, definitely, appreciate the live discussion with the workshop leader and the cohort that kind of tries to do the same thing in their life interaction. So what they do now is they publish those workshops learn.wordpress.org and then starting a week later to schedule the discussion groups around the time zones of the globe. So you might see him multiple times, but with more convenient time zones.
So the workshops right now published on learn.wordpress.org are Intro to Block Patterns, Intro to the Block Directory, and Intro to Gutenberg Block Development. They’re all intros. So intro to contributing to WordPress and then intro also to open source and then also the intro to publishing with the block editor. So yeah, it’s really good stuff there very, very well done. And follow some of the lesson plans that the training team put together. The community team teamed up with the training team to put this all together. Yeah. And I’m really excited about this new initiative and try to spread the word about the block editor. And it also gives us official guidance and tutorials for all the end users. And I think for the block editor, that is a critical piece that seems to have been missing in the rollout to the end user. So I’m glad we’re kind of covering that now, also on the WordPress project.
Mark Uraine: Yeah. Even on that learn WordPress project there, they’ve got a button for users to submit workshop ideas. So if people are looking for workshop ideas, they’re taking requests
Birgit Pauli-Haack: Absolutely. And there also, you can also volunteer as a reviewer of those workshops submissions. And you could also volunteer as a discussion group facilitator. Not all the discussion groups are held by the workshop leader because it’s just a matter of time. Yeah. Not everybody’s available to all the time zones. And so, yeah, it’s almost like you’re interested to put a workshop together, it’s almost like submitting to a WordCamp speaker submission, but it’s longer. And it also gives us the ability to a pre-record, so it’s no live audience, but also to go deeper on a subject is probably better than just stay on the more covering everybody at the WordCamp from user to publish it, to develop it, to designer. You kind of can make it focus to a certain topic and go really deep on it.
Mark Uraine: Good point, good point.
Birgit Pauli-Haack: I think that’s what they’re looking for, how you use WordPress and all this good stuff.
Mark Uraine: Things and stuff that brings us to community contributions, right? Or, yeah.
Birgit Pauli-Haack: Yeah.
Mark Uraine: There was an article on WPTavern not long ago on exploring the first block patterns to land in WordPress theme directory. And Justin Tadlock wrote the article, talking about how these block patterns are really revolutionizing WordPress theme development. And he goes into giving some examples there. Pulling together patterns so far about what the theme directory is offering, other people who are adding block patterns to this directory and their themes, and really well written, I would say.
Birgit Pauli-Haack: Yeah. And it gives a really good overview of the thing.
Taming of the Blocks – Part II
Speaking of well-written, Thomas Kraftner wrote a series of articles parts one and two, but I wanted to highlight part two of it called, Taming of the Blocks. And he has collected all the different pieces about the block editor and how to switch them off.
I think that’s overview is really helping a lot of developers that have the need to disable blocks with a plugin or disable blocks with a code and all the different ways to do that. And to limit the colors, reducing the block configurability, like how to switch off the drop caps because some editor or some company doesn’t want them. Or disable custom colors and just have a very strong editor palette, but don’t let them select any other colors, how to do that.
So it’s really getting colors, font sizes, style variations, and other settings like the global content for reusable block and all this post processing and render fill. So it can get really deep, but it’s really a well curated information for any developer that wants to work with blocks and themes.
Mark Uraine: Thomas does a good job there at addressing those concerns, right? For the site builders out there. Well, we’re just opening up too many options for the clients to come in and mess everything up. Well, Thomas addresses that and really gives those developers or site builders a way to kind of minimize those options.
Birgit Pauli-Haack: Exactly. Yeah. Big shout out to Thomas Kraftner because that took a while to put together. Which brings us to, well, what was released in the last two weeks, WordPress 5.5 was released.
WordPress 5.5 Release
Mark Uraine: 5.5, all right.
Birgit Pauli-Haack: Yeah. And it’s quite a remarkable release. I think it’s the best WordPress version ever.
Mark Uraine: Wow, that’s great.
Birgit Pauli-Haack: And 805 contributors worked on it and over 300 of those who are first time contributors to this release. So the number of people involved in making software and for the web is really remarkable.
Of course, when you have such a big release, there are a few glitches and some difficulties for a site owners and one tripped a few up that was the jQuery migrate script removal. And although announced way ahead of the first beta, and there were efforts to actually reach every plugin team that’s in the repository, and there were still a few, there are still a few plugin developers that weren’t watching or updating the code and some site owners had trouble with that. But the WordPress team reacted fast. The publisher plugin solved those problems quickly. It’s the enable jQuery migrate plugin. You’ll find it in a repository when you look for enable jQuery migrate and we of course will have a link in the show notes.
The second item was kind of related to the block editor UI changes. Users thought the team had actually removed the drag and drop functionality because they moved the handles, but not the functionality. It’s very hard to discover it. And if you point your mouse to the up end arrows in the block toolbar and hold down the left mouse button, then a blue line appears and then you can drag the blocks that you have just have selected there to a different place.
Mark Uraine: Yeah. We hid that really well, didn’t we?
Birgit Pauli-Haack: It’s pure discoverability, I would say. And I know that the team is already looking into it and the documentation team jumped up and said, “Well, we can create a page where we can explain all the different ways, how you can move blocks around.” And that was published just this week. And again, it will be in the show notes and Annimesh who wrote it also created some short demo videos. So you can see how that actually works.
Mark Uraine: Yeah. Working in these block movers and the drag and drop ability, like this is going through a lot of iterations, and I know there’s 30 or 40 iterations in a figma file somewhere about kind of how we can surface the drag handle, all sorts of things. So it’s really being examined from a few designers, really trying to look at this and figure out how to make it easier.
Birgit Pauli-Haack: Yeah. Good news is that it seems many people like to drag and drop blocks around. So improving and enabling that feature would definitely get many, many fans.
Mark Uraine: Yes, let’s get back those fans. That’s what I say.
Gutenberg 8.8 Release
And in addition to 5.5 being released, Gutenberg plugin 8.8 was also released this week on Wednesday. Contributors have continued to squash bugs, refine experiences and make progress on several big projects.
Full site editing has progressed with updates to global styles, the post blocks suite and template management. And if you’re familiar with the post blocks, they’re the blocks that are required for every little thing you might find in a post, whether that be the post author, the post meta stuff, you name it. Let’s see. Yes.
Birgit Pauli-Haack: Thank you for that clarification because I would not have known what a post block suite is.
Mark Uraine: Yeah. So all sorts of say, you know, or I’ve been knee deep in icons designed for those blocks and created a PR recently and that got merged. So yeah, a lot of work is being done just to bring those up to par.
The backward compatibility of the widget screen was improved. The widget screen is a project that’s part of a wider effort to add more block-enabled sections to the WordPress experience. I am working on that currently. And I’ll dig into that a little bit later for everybody, but this release also saw important accessibility and mobile improvements to user interfaces like the toolbar navigation menus and popovers. These were all notes from Jon Q in his post and that jumps us into the Changelog, everybody. We’ve got about, oh, do you want to say something, Birgit?
Birgit Pauli-Haack: I just wanted to say congratulations to John Q. It was his first Gutenberg release.
Mark Uraine: Yes, that’s right.
Birgit Pauli-Haack: That he managed to get through the paces.
Mark Uraine: Excellent. Thank you, Q.
So there were about 12 enhancements altogether. Touching on a few of them, the block toolbar we talked about. They’ve split out the movers that were right next to the block icon. The movers are now separated with a divider and have their own area in the block toolbar. Let’s see, the block movers themselves. Again, I keep talking about these iterations that are going on with them. They use a bigger mobile touch target now, and they have a bigger, visible focus rectangle around them. A lot of feedback was given that those movers are just too small to interact with. So that’s been improved.
There’s an update in the top toolbar button colors. So if you remember with this new UI design, kind of all the links and the top bar there went black, and there was some concern about them not really looking interactive. So they’re in blue again, or your theme, your WordPress profile, admin theme color.
And let’s see we removed the editor styles from the front-facing style sheets, which should make a lot of people happy.
Birgit Pauli-Haack: Oh, yeah. Yeah. That’s a big, yeah. That was quite some duplication going on there.
Mark Uraine: So that feels a lot better.
There were five new APIs supporting the default block class names in dynamic blocks. Supporting the custom class name hooks in dynamic blocks, there was also an add store icon to the icons package. And I’m telling you with all these post block icons coming right now, you’re going to see more icons coming into the pack icons package as well. So we’ll be seeing API updates in the future on this as well.
Birgit Pauli-Haack: So I have a feature request.
Mark Uraine: Yes?
Birgit Pauli-Haack: I want the icons to be colorful so I can sort them by color and….
Mark Uraine: Nice. So be able to yeah, select and change colors.
Birgit Pauli-Haack: You so I can say, okay, these are my favorite and I want those yellow ones on top. I want the blue ones on top or something. Yeah. Right.
Mark Uraine: What if we give them gradients, Birgit?
Birgit Pauli-Haack: Yeah, gradients! I was about to say things, but yeah.
So we also, this release also had 27 bug fixes and I’m only pointing out a few. There were quite some touch-ups done for blocks, like the image block on Safari. Image block caption doesn’t jump anymore in Safari. The media textbook always shows now the image on top on mobile. And the cover block, you can now set the minimum height again. And the post preview is now also showing up on those.
Sorry, we have a little thunder storm here. I don’t know if it came through.
Mark Uraine: That did, that was thunder?
Birgit Pauli-Haack: Yeah.
Mark Uraine: Oh, my goodness.
Birgit Pauli-Haack: It’s right here.
Mark Uraine: I thought someone dropped something in the back room there.
Birgit Pauli-Haack: No. So the post preview got some fixes and then the image editing had some alignment fixed on the aspect ratio, but, and there were some, actually some good accessibility fixes with adding arrow navigation to the preview menu, as well as to the navigation warning dropdown menu, and also examples for the buttons block so it doesn’t lose focus anymore. So that was really helpful.
The block directory got some bug fixes and there is a fire block now that can handle PDFs, but also will display the PDF.
Mark Uraine: Yeah, embed them.
Birgit Pauli-Haack: Embed them and that’s a really nice feature. A lot of people, especially in nonprofit world or academia, they asked for that. So I’m really glad that it’s actually in Core. There were quite a few plugins out there that had a PDF block, but if it’s in Core yeah, you don’t have to deal with other plugins.
Mark Uraine: Yeah.
Birgit Pauli-Haack: And then the documentation had some updates, nine updates. One is to document the global styles blocks and their properties. Instructions on how to disable the block directory, that’s something for Thomas posted. And I think he has it in there already. And also the block directory submission guidelines landed in the documentation. So if you want to read up about that. The team also created and updated the creative block tutorial for the scaffolding tool and also has a getting started with map stack on contributing that stuff. Macintosh, Apache, my SQL PHP stack on how to get that running on your machine.
Mark Uraine: That’s cool. I use that all the time, actually.
Birgit Pauli-Haack: Cool.
Mark Uraine: It’s good. And I see that they’ve got some documentation for that supporting it.
Birgit Pauli-Haack: Yeah. I still need to test out the environment, the development environment or scripts. I’m still using local WP.
Mark Uraine: Oh you are?
Birgit Pauli-Haack: Yeah.
Mark Uraine: I use the Docker, the WP and B one as well, you know, especially for when we’re working in the development and contributing back to Gutenberg. But otherwise I tend to use the MAMP for when I’m doing other stuff, other sites and other WordPress things.
Birgit Pauli-Haack: Yeah. I think I have, I don’t know, 20 or 25 sites that are somehow connected with local, so….
Mark Uraine: Wow. So that leads us to experiments. There were about 13 changes recorded in the Changelog for experiments.
There were some for InnerBlocks. Introduce prop to specify, render callback for each block. The navigation block had some updates, displaying children of inner block controllers in the block navigator. That’s in the block navigator actually. Okay. And then add font size support to the navigation block itself.
Birgit Pauli-Haack: Oh, good.
Mark Uraine: That’s really cool. Yeah. Template parts and saving flow had some changes like moving the title to the block toolbar. So that’s bringing in the title there to the block toolbar and then there’s even progress on editing that title right there. Post blocks saw some changes, full site editing, like load PHP files only if the experiment is enabled. Global styles are seeing a lot of changes or updates I should say. And the widget screen, of course, was being refactored and relying on dedicated end points and list of widgets excluded from the legacy widget block extensible via the filter.
So, code quality section received about nine changes. Refactor the embed block to single block with block variations. That’s an interesting one.
Birgit Pauli-Haack: Yeah. That’s very interesting. I didn’t read through the PR yet, but when we were on the documentation team writing all the pages for each block, it was kind of….
Mark Uraine: Right. Does this save you on that, so you don’t….
Birgit Pauli-Haack: No, not really, but because part of our documentation also talks about how to actually get the URL at the service that you’re using. So you know how to, because they, yeah, every site does it differently and those things are also hidden. Some, most of the time said that we covered that in the documentation as well.
But yeah, if you want to take something out like we did with what we had to with the Hulu block and the photo bucket and with all the discontinued services, it’s probably easier to get them out of the code when you have only block variations instead of having a whole block that you need to delete there.
Mark Uraine: Okay. There were also several upgrades, updates to like React, Lodash and a few others.
The build tooling had about four changes. This release varying from the wp-env environment, the package scripts upgrading the es-lint-plug-JSdoc to the latest version and a couple others. And that was a pretty significant release. So it was nice. It was good to see. And I’m glad that Q had an opportunity to pull that together.Birgit Pauli-Haack: Yeah. It’s kind of tightening up everything and it’s not, there’s not no new feature in there. And I really liked some of the, yeah. It kind of takes away the pressure to kind of keep up with Gutenberg.
Mark Uraine: Yeah. It’s the second release now in a row that has not had a new feature and included.
Birgit Pauli-Haack: Yeah. Although I think the build out of the experiments. Yeah. It’s kind of hidden.
Mark Uraine: Yeah, that’s true.
Birgit Pauli-Haack: That is moving forward quite a bit. And we’re going to talk a little bit in the next section.
Active Development – WordPress 5.6
So what’s an active development or what’s discussed – WordPress 5.6 planning started. Francesca published a post about the all-women 5.6 release squad and announced it also with the scope of the release and other planning details.
I created on my Twitter profile, you find a list of the 5.6 release squad women, about 40 I found on Twitter. So if you want to kind of keep tabs on them and what they’re doing with WordPress and other technology fields. Yeah.
Mark Uraine: I’m looking forward to this. There seems to be a lot of encouragement for this release squad right now. And it’s really like, what is the word? Like reinvigorating some really good interest from people and to really dedicate some time and contribute, and opening this release up to, to a very, very talented women that are going to contribute and let’s see this all come together. It’s a big one too.
Birgit Pauli-Haack: It’s a big one.
Mark Uraine: Yeah, love it. Love it.
Birgit Pauli-Haack: So I can’t go through the whole post yet, but the release lead will be Josepha Haden. She will come back from her sabbatical in September and then just in time for that. And then there’s a release coordinator, Dee Teal. Triage leader is Tonya Mork. Core tech lead is Helen Hou-Sandì from TenUp. She has been a long time contributor and release lead.
Mark Uraine: She has been.
Birgit Pauli-Haack: And the editor tech lead is Isabel Brison. Design lead is Ellen Bauer and Tammie Lister. They share that. Tammie is still in sabbatical, but will come back also, I think in September.
Mark Uraine: Yes. By the end of this month.
Birgit Pauli-Haack: And then Shital Marakana is the design tech lead. Accessibility lead is Sarah Ricker. Marketing lead is Yvette Sonneveld. She was also, I think one of the core co-organizers of WorkCamp Europe one year. I get the years wrong, so I’m not selling it. But the documentation wrangler is still looking for someone, and the documentation review lead is Michele Butcher. Theme design, there will be a default theme design and Mel Choyce is leading that effort. And the development lead for the theme will be Carolina Nymark, who is kind of on the forefront of the full site editing or block-based themes.
Mark Uraine: Yeah, she really is. Yeah. She’s been really contributing really well there.
Birgit Pauli-Haack: Yeah. And she actually has a free course on her website, Inside Editing and she keeps building it out. It’s really cool. Default theme wrangler is Jessica Lyschik. She’s German and she wrote the Gutenberg Bible, a whole tutorial about Gutenberg in German. Very, very good work. It’s a lot of work because keeping it up.
Mark Uraine: Very thorough.
Birgit Pauli-Haack: Test lead is Monika Rao and support lead is Bet Hannon. So I covered all of them.
Mark Uraine: All I know is I heard there’s some documentation openings, but I didn’t hear your name in the list, Brigit.
Birgit Pauli-Haack: Yeah. Yeah. There are certain things I not always have to raise my hand.
Mark Uraine: That’s fair. That is fair.
Birgit Pauli-Haack: And leave the spotlight to those who want to do it. I would do it reluctantly as I do the documentation lead.
Mark Uraine: You do such a good job though.
Birgit Pauli-Haack: Yeah, I know. I know. But it’s only, you can only do so much now.
Mark Uraine: Sure. I hear you. Yeah, I completely get it.
Birgit Pauli-Haack: Yeah. And if I do too many things, none of them is actually getting the attention that it deserves. I need to pace myself, but I’m supporting them with the Twitter list and talking about them.
And so the Gutenberg editor, what’s going to be in Gutenberg for 5.6. And that is all the things that we talked about. It’s the widget editing area to be complete. The navigation menu in block to be in Core. New features for the block editor from versions 8.6 to probably 9.3. Then widget editing and customizing support for the block editor. And of course the default theme will include full site editing compatibility and full site editing will be in public beta in 5.6, at least that’s the goal.
Mark Uraine: Yeah. We’re pushing for it. Yeah.
Birgit Pauli-Haack: And we are pushing hard. And we have a channel on the WordPress Slack, that’s the full site editing outreach project where testers are standing by, and Anne McCarthy is leading that effort. And she has, she says, they are almost there that we can test things.
So if you want to follow up on that, it’s the full site editing. The channel is fse-outreach-experiment. Yeah. So if you want to follow along with the schedule, the links of course will be in the show notes to that post from Francesca.
Just to highlight, Beta 1 is scheduled for October 20, 2020. And the final release will come on December 8, 2020. There were some preliminary reservations in there, kind of for WordCamp US. But WordCamp US is canceled. So the schedule might change for Beta 2 and Beta 3. But those, the first Beta is where all the features need to be in there. There’s no new feature after Beta 1 and that’s October 20th. And then the release is December 8th.
Mark Uraine: Let’s do it. We got this. All right.
Gutenberg Updates – August’s Focus Projects
And so let’s talk about the Gutenberg updates on the August’s focus projects. Boy, that was, it felt like a mouthful. I don’t know if I said that right. But what I’m getting at is what we’re focusing on, what we’ve been focusing on in Gutenberg for the month of August.
This last Core editor meeting, the facilitator, Dave Smith, gave the meeting a different format and asked the various sub teams to report on the state of their work according to this month’s focus items.
Birgit Pauli-Haack: I like that very much.
Mark Uraine: Yeah.
Birgit Pauli-Haack: Sorry. I’m just going to chime in here.
Mark Uraine: You do?
Birgit Pauli-Haack: Yeah.
Mark Uraine: Why do you like it?
Birgit Pauli-Haack: Well, because it gives you, it’s not so much I’m working on this and that’s kind of a very detailed item of something that is in a bigger context, but out of context and having that, yeah, what’s the current stage? It gives it a little bit more context around things and not just covering that one or two PRs at all, kind of in the forefront of things. Yeah. But talk about the different areas there.
Mark Uraine: Yeah. And if I remember right, you were saying that it was nice to be able to really follow along and use those notes to provide our information for the episode. So Dave, if you’re listening, we love it when you format the Core editor meetings to align with making our podcast easier. Thank you.
One of those focus areas is the navigation in widgets. And we’ve been talking about them all this whole episode, going over a few of the things that were kind of mentioned in the meeting, that for the navigation editor themes can try the new opt in mechanism for displaying blocks in menus. For the widget editor, the recent merge of the refactoring for the data layer to use the current option API system to store blocks and widgets. But that I guess, introduced some new issues and testing’s needed there. Themes and plugins now contest registering their own block, alternative to widgets.
Birgit Pauli-Haack: That’s pretty cool.
Mark Uraine: Yeah. And that’s really, so the two projects right there, the navigation screen and the widgets being very, they’re being collaborated on right now really well between designers and developers to really make sure these things get into 5.6 and are really well handled.
So one of the current things I know that I’ve been working on is the widget screen side. I’ll mention a little bit about that. I’m looking at completely changing the UX flow a little bit of the widget editor. So it aligns better with the block editor or your post editor and really showing kind of one widget or one widget area at a time, rather than utilizing the legacy widget block, which is kind of the way it’s used right now. In order, if you wanted to get a third-party widget onto your document or into the area, you’d have to kind of add a legacy widget block. And then from there in a dropdown, select which widget you wanted to add.
Well, there was an idea that I kicked around with a couple of other designers and we thought, “Why don’t we just show the third-party widgets in the inserter, as if they were a block and then you just click on it to add it to your area or to the editor? And it automatically gets wrapped with the legacy widget block.”
Birgit Pauli-Haack: That’s pretty cool. Yeah, because the legend widget block, it’s hard if you don’t know that it exists to actually use it.
Mark Uraine: It’s intuitive, huh? Yeah. You don’t even know.
So I think that’s a really like a really strong way to go. And then that legacy widget block kind of adopts the widgets icon, you know, some of the widget information and it provides you with an edit in preview state. So you can still edit the widget like you would in the widget screen and then preview it on the document itself or in the area.
And then the other big change there that I’m looking at is only showing a single widget area in the editor at a time. Currently you see multiple widget areas and it is nice, we’re talking about dragging and dropping like widgets from one to the other. So I’m kind of experimenting with a different flow because I’m wondering how close align, how closely aligned to the editor, Gutenberg editor, that I can really get. And I’m getting really good feedback from community members and other people out there. So we’ll see how this goes.
Birgit Pauli-Haack: Yeah. It brings me to a question that I actually had, do we know how many people are actually having the experiment switched on?
Mark Uraine: I don’t have any data on that. And so one thing we’ve been talking about is, in fact, there’s a couple of issues on GitHub about how soon do we push this? Do we surface these screens? Right. We have the navigation screen, menu screen and the widget screen. Right now they’re hidden under the experiment flag in Gutenberg, but as I’m hoping that once we get a, like a direction settled on and we kind of make some necessary changes, we can then just push them, surface them as a beta option in the Gutenberg plugin. And possibly even still, if the theme ops into it, just completely replace those screens in the WP admin with, through the plugin itself.
Birgit Pauli-Haack: Yeah. But I think a lot of people use the Gutenberg plugin actually in production. So backwards compatibility actually should be solved.
Mark Uraine: I think you’re right. And we definitely don’t want to mess with anybody’s, really with their flows and production.
Birgit Pauli-Haack: Gutenberg, I’ve always said on the plugin, yeah, this is all beta and it could change all that. But I have the feeling that, because it’s so stable and everything was kind of locked away as an experiment, then quite a few people use it in production.
Mark Uraine: Yeah. Yeah.
Global Styles and Editor-Focused APIs
Birgit Pauli-Haack: Another focus area is actually a global styles and the editor-focused APIs for that. And Andres is reported that there are two focuses at this month. One, is to land the initial user facing tool to set the styles globally and is extracting smaller PR’s to make that happening incrementally.
And the other one is controlling the block editor and the idea to enable themes to control the editor. Why are the themes start, JSON file. If you’re interested in the area here, we have the tracking issue linked in the show notes for the tracking issue list, where you can kind of certainly chime in on that. So the one thing is also the getting people started to migrate core blocks to use the implicit style attributes for the colors and font sizes. And so theme support for customizing active editor can actually happen with adding the global style sidebar. Cool. I need to test this out. Experiment, I come.
Full Site Editing
Mark Uraine: Experiment with the experiments. And, of course everybody, the other big project focus for this month is full site editing. And there is a project board on GitHub for that. Michael Arestad has given us an update with some bullet points. One of them mentioned was that an iteration on the multi-entity saving flow is in the works. I believe it’s actually in development now. It’s gotten some movement and it’s going to be great to see that come into play.
Several of the post blocks as I mentioned earlier, now have icons and descriptions. A mock-up for the document level grid has been proposed. And this is something I think many of us have kind of been hoping for. I know I’ve been having conversations about this since January of 2019. And to see this get some traction is really cool. I’d love to see like some grid in the background while you’re laying out your templates, your posts or whatever.
Birgit Pauli-Haack: I know there’s also an experiment plugin from Automattic when they try to use it on wordpress.com. So you definitely can get an insight into using that grid. Yeah.
Mark Uraine: Yeah. Automattic does have a plugin of the layout grid, I believe it’s called. And that’s an actual block that you would put on the page and then it’s like a columns block, but it shows the grid within the block. But this one on another level is like the actual document getting grid and that’s going to be great too.
And then Michael says he’s starting in on everything related to the block directory and we’ve seen some of his mock-ups and prototypes coming into GitHub there as well. So block directory is getting a lot of tweaking and finessing with the flows.
And finally, there was a post or a thread shared on GitHub by Matias showing the milestones to some of these bigger projects. We’ve got some dates I believe there and kind of given us some order by which these things are going to be worked on and put together. Actually no dates, just in progress. A lot of things in progress with links to better project boards or issues, but defining them by milestone kind of gives us a chronology.
Birgit Pauli-Haack: Yeah, you’ll see those that have real progress, they have issues attached to it. And some that are in the works or in progress, no initial like the query block or the gradual adoption of some of the full site editing. Those milestones have not yet issues attached to it, but certainly they are explained, and I like those overview issues on GitHub very much. And there’s actually a label for it. It’s called type overview. So if you are thinking about something and want to learn about getting into deeper, so how far is something. Try to search for the overview item with the keywords. So you can get a good layout or table of content or something like that there, where you can jump off into the deeper end of those features.
Mark Uraine: For sure. That’s where even if some of those issues about when and how to introduce these new screens, some of those conversations are happening under that label as well.
Birgit Pauli-Haack: Yeah, and speaking about conversations last episode, we talked a little bit about the new virtual events. They were called hallway chats. And now they have happened, three of them. Three of them, one was Jon Q continued his experimentation with the research about the editor interface on component layer. So this experiment is supporting the design tools and the efforts of refreshing the editor experience.
He built a component or he’s building component library with a focus of designer developer experience, that’s one. And then he’s also aiming for having a core system or system level accessibility support using a React library for that, that has been tested quite a bit including the visual consideration for dark mode, high contrast, colorblindness and reduced notion. So check out his GitHub issue, where he talks a little bit about it, and we also will have the video link in the show notes.
The second hallway chat that happened the last week was about the WordPress design library with Joen and Noah. They both worked also on the block UI. I have the link to their posts, where they share the video of that. And they saw the chance that just kind of a conversation between two people that are working on that and talk through some of the challenges as well as see what cool thing I found.
The last one was Robert Anderson and Andrei Draganescu and they’re talking about what? Widget and navigation.
Mark Uraine: Of course.
Birgit Pauli-Haack: Of course. So, also Robert Anderson posted it on his blog. So we will have the show notes for you, so you can kind of follow along.
Next week is the theme team. And I think, yeah, it’s William Patton and Carolina Nymark, and they’re going to talk about the block based theme and the state of it or whatever they want to talk about. I have not yet found an announcement of that except for it’s scheduled for next week. But then the four weeks experimentation kind of tune in. And then the team is kind of looking at what worked, what didn’t work and what can be improved for the next iterations in September and October of the hallway chats.
Easing Path for Theme Authors – Switch to FSE
Mark Uraine: Nice speaking of theme discussions and the hallway chat coming up, there was a great discussion in the recent themes team meeting in Slack about easing the path for theme authors to make the switch to full site editing by allowing block templates to work with the existing PHP templates. Specifically, the group discussed how template resolution could work and the challenges that will arise around how the site editor will handle pages that use existing PHP templates. So that discussion has been moved to a GitHub Issue 24313, and that way all everybody can contribute asynchronously and provide their thoughts and their opinions. It’s been really, really wonderful to see that effort there and the involvement.
Birgit Pauli-Haack: Yeah. And it definitely needs the community of theme developers that is out there to make sure that their needs are met in that transition period between the old way and the new way or the current way. And then, so parallel existence between the two should actually work quite nicely because sometimes you still need some dynamic content in your theme template, and then it’s going to be a PHP file to bring that in. So how does it work with a block?
Mark Uraine: Right.
Birgit Pauli-Haack: Sections and all that.
Mark Uraine: Great questions.
Birgit Pauli-Haack: So go there and let people know what you think about things.
Mark Uraine: Yeah.
Birgit Pauli-Haack: It’s a lot of reading, though.
Mark Uraine: It is.
Birgit Pauli-Haack: Getting through all the good things. You kind of need to do a weekend and read through it and have a quiet time for that. Yeah, definitely.
Mark Uraine: Again, it’s Issue 24313 on GitHub, the Gutenberg repo.
Birgit Pauli-Haack: Yeah. You don’t have to wait for the show notes to….
Mark Uraine: Yeah. Cool.
Birgit Pauli-Haack: Just go.
So Mark, I think that brings us to the end of our show.
Mark Uraine: It does.
Birgit Pauli-Haack: Yeah. I have one link that you want to go to make.wordpress.org/design because Mark has published his Gutenberg phase two update No. 59 just came in, and it talks has some nice videos and some links that you can follow up on the various projects.
And if you have questions, suggestions, or news you want us to include, send them to firstname.lastname@example.org. That’s email@example.com. Yeah, that’s it. Thank you all for listening. And thank you, Mark, for being on the show again.
Mark Uraine: Oh, well. Thank you. Of course. I wouldn’t miss it.
Birgit Pauli-Haack: It’s such fun to talk through these Gutenberg Changelog and the other things that are happening around the block editor. It’s still exciting. I’m doing this now for not the Changelog is over a year old, but on the Gutenberg Times celebrating almost a yeah, it’s over three years. And it’s still always new and always exciting.
Mark Uraine: That’s so good to hear. I’m glad that you’re having fun doing it because I’m having fun with you. And listeners, thank you so much for stopping in.
Birgit Pauli-Haack: Last appeal, we could use some more reviews. So if you want to go to iTunes and drop a review for us, that would be really good. And we’ll talk about it in the show. So, thank you all for listening and have a good next two weeks. Goodbye.
Mark Uraine: Bye-bye.