Gutenberg Changelog #31 - Tools for CSS and Theme.json, Twenty-Twenty-One Theme, a long Changelog for Gutenberg 9.2

Gutenberg Changelog

00:00 / 50:54

In this episode, Mark Uraine and Birgit Pauli-Haack discuss WordPress 5.6, Tools for CSS and Theme.json, Twenty Twenty-One, and a mile long Changelog for Gutenberg 9.2. – Now with the right audio file.

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

Show Notes / Transcript

Show Notes

Need a Zip from Master?
“Billable Hours” – new podcast with Peter Suhm Founder & CEO of Branch

Phases of Gutenberg

“Customization of Sites with blocks” State of the Word 2017
Phases of Gutenberg – State of the Word 2018-Slidedeck (starts Slide 74)
State of the Word 2019 – Gutenberg Done at 20% & 4 Phases of Gutenberg ( Matt Mullenweg 11/3/2019)

Widget Screen pulled from WordPress 5.6 scope

Tools for CSS and Theme.json

Theme.json Creator by Jon Quach
CSS Audit tool by Kelly Dwan

WordPress 5.6 Beta 1

Gutenberg 9.2

What’s new in Gutenberg? (21 October) – Gutenberg plugin 9.2
Sarah Gooding has the skinny for you at the Tavern
Block API v2: Add a document explaining the different block API versions

About Themes

Twenty Twenty-One: Dark Mode Discussion Mel Choyce-Dwan
First full block-based theme “Q” by Ari Stathopoulos
Q: First FSE WordPress Theme Now Live interview with Ari Stathopolus by Justin Tadlock.
Developing the Full Site Editing version of Twenty Twenty-One by Carolina Nymark

Block Editor: Confusion around the [ + ] button a discussion by Shaun Andrews

Call for Testing the Widgets Screen in Gutenberg 9.1

Transcript

Conversations

So we had a not really a listener question, but I had good conversations with consultants and developers and latest with Peter Suhm, founder and CEO of Branch for the new podcast called the Billable hours. And the question was, “What is the end vision of Gutenberg? Where does it go?” And that question really surprised me after three years of state of the word and a lot of writings. So, but it might be just that it’s not in all the corners of the WordPress community.

Mark Uraine: We’re so deep into this, right? Like it’s good to remind ourselves that not everybody knows everything about Gutenberg and we really need to communicate that.

Birgit Pauli-Haack: Yeah. And what, I’ve seen is that people just took it away into the … in the back of the head for two years, and now I’ll come back to it. And of course jumping in at this moment is really confusing.

Four Phases

So there are four phases to Gutenberg. And the first phase is the post editor. So we went through that, the blocks, the infrastructure for blocks and create great content with the block editor for your posts and pages. That phase was until 2019, a year after releasing 5.01, well it started in 2017, but, and then in 2019, the team started working on the phase two, which is the full-site editing experience where not only, and that’s the place where the mystery meet, talked about, and other people talked about the mystery meet that people need to learn about like widgets, gadgets and short codes, and here’s a menu and all that, that is all going to become blocks and have a full site editing experience.

Mark Uraine: Yeah. I had not only just a full site editing, but really kind of, I remember Matt saying, in the state of the word, like there’s a whole tightening up process for what was done in phase one as well. So there are those … 2019 we spent a lot of time just kind of polishing and bringing like really refining the experience. And then we started pulling blocks into other areas, right. Started experimenting with the widget screen, the navigation screen, and then full site editing is really the way that it’s just going to bring it all together.

Birgit Pauli-Haack: Yeah. But there’s also the component of global styles.

Mark Uraine: Yeah.

Birgit Pauli-Haack: That whole system is part of the full site … seems to be part of the full site editing.

Mark Uraine: Totally.

Birgit Pauli-Haack: Yeah. And so there are so many moving parts right now, but that’s what everybody is working on. And because when you build something new, you need to have the fitting components. And if you work on the components, you get to a point. I said, well, let’s see if we want to, if it works. And then where it doesn’t work, it’s like-

Mark Uraine: Wait, I was building you’re square and you built a circle….

Birgit Pauli-Haack: You borrow a tunnel, right? From both sides.

Mark Uraine: They meet in the middle.

Birgit Pauli-Haack: Yeah. And so that’s phase two, and it will definitely be in 2021 that there is one, at least some releases from that some pieces will be released. And in phase three is collaboration tools like Google Docs collaboration, possibilities for editing content on WordPress site. And well, Riad did a proof of concept.

Mark Uraine: We did.

Birgit Pauli-Haack: ASblocks.com, where I had a fully encrypted collaboration tool there, and he has a whole website where he explains it. So that is at least in the works, and phase four is multi-language websites coming to core. And that’s something that has been on the back mind of core team for a long time.

Mark Uraine: Yeah. I will say like, we’re so deep into phase two right now that every once in a while I peek my head up and I look at phase three off in the distance and I get very excited. I’m super excited to see collaboration happen. I mean, imagining multiple people editing one post together at one time like that inside of WordPress, it’s going to be really cool.

Birgit Pauli-Haack: Yeah. And comments for each paragraph, all the different yeah so it would be really cool. So that’s kind of a good reason to have. So maybe that clarifies it, not only for our listeners, but also yeah. Take the word further, and Matt Mullenweg was asked, I think how far in, in the process are we? And he said at the end of 2019 or 2018, he said about 10%, 2019, he said about 20%. If you kind of think about a 10-year process to come to a 100, maybe in between something speeds up because who knows what is in 10 years or in 18?

Mark Uraine: This is true. And I’m sure like we’re going to hit certain parts of the process that tend to go faster and quicker. Right now when conceptual phases are happening, it’s like, “OK, how do these work together?” So all really good phases. I’m glad you brought those back up, Brigit so that everybody listening can kind of get a catch up on the vision of Gutenberg, where it’s all going. So that brings us to announcements.

Announcements

And we have a pretty big announcement today, Brigit, don’t we? That was shared earlier this week in Slack by Robert Anderson and some other people that the widget screen is not going to make it into the 5.6 release. And there was a discussion among many that led to that decision. And I think it was a good decision. It looks like the last three weeks have been a big push to try to get this screen ready in time for beta. And we’ve encountered a few issues that are bigger than just quick fixes. What’d you think about that announcement?

Birgit Pauli-Haack: Yeah. Well, I think it’s a good decision. I spent all Thursday testing it and I know a lot of people also got into the testing sprint that Francesca was running on the core channel on Friday. And I liked what Helen HouSandi wrote in her comment on the track ticket for that. She wrote, and I quote her now, “My question for features that affect the front end is can I try out this new thing without the penalty of messing up my site?” And so it’s a question about the user trust.

“At this current moment, given that the widget areas,” and I’m still quoting, “Are not displayed anything like what you see on your site without themes, really putting effort into it, that you have to save your changes live without revisions to get an actual contextual view, widget area blogs do not allow you to try this new feature without penalizing you for experimenting.”

Mark Uraine: End quote.

Birgit Pauli-Haack: End quote. Yes. So, and I liked that kind of a user centric view on this. And when you force a user to change, it’s a lot of work for the user. So at the end of it, there needs to be something that is not incrementally better, but so much better than before. And I don’t think that the widget screen is there yet.

Mark Uraine: Yeah. I think to add to that, one of the things that I know Matias has brought up before is that are we doing enough to show what can be done now with blocks in the widgets areas? That’s a really big deal. You can now put blocks and other things into these widget areas that you weren’t able to before and to kind of provide examples of that to people out there so that they can kind of see,” Oh yeah, I can use these blocks and make different things.” Even you, Brigit, have mentioned, like having patterns that can really lay out the blocks specifically to a widget area would be very beneficial and we haven’t really communicated that as well as we should’ve probably.

Birgit Pauli-Haack: Yeah. That’s definitely one thing, but we’ve talked about it before.

Mark Uraine: Definitely one thing.

Birgit Pauli-Haack: Yeah. We talked about it before. It’s kind of seeing the forest through the trees or not seeing it. Because when you change something at the user interface changes first, you are kind of focused on, “Well, how do I learn these things? And how does it actually work before you can add more creativity to it and said, “Oh, if I can do that, can I do that?” And I always liked that when that happens with users. I think it was Ari, had a few things. So drag and drop from the inserter does not work. And that’s definitely a learned feature from the old widget screen.

Mark Uraine: Behavior.

Birgit Pauli-Haack: And then expecting a fixed sidebar, the sidebar that where the blocks are in right now, that kind of goes away when you added a block and then you have to click on it again. So these are the smaller things that can certainly happen. And then not supporting JavaScript, pallet widgets, what is still missing for the experience?

So it’s a good decision and I’m glad that there were voices there, but I also am so happy that there was a three-week push to make sure that there’s actually not going to get in. It might have gotten in, or we get it further then but you never know how long things last, or how long things take when you create something new. So having a focus team working on it definitely brought out all the things that a lot’s happening. So it was a good thing.

Mark Uraine: Yeah. Everybody involved really wanted to see this get in. We were really pushing for, really trying and sometimes, things just don’t go as quickly or as easily as you might have assumed. And so those points that were already brought up about the drag and drop and the fixed sidebar these behaviors that are very familiar to the classic, like widget screen, we do want to try to explore those and improve them to make that experience better. But when it came into the customizer, that was something that just kind of knocked a few of us around a bit once we’ve realized that we were really trying to put a WYSIWYG editor inside of a WYSIWYG customizer. And that just didn’t compute quite as well as we thought it should.

Birgit Pauli-Haack: And when there was three weeks ago there was a decision that the widget screen only comes in from the WP admin menu and not through the customizer. A lot of people use the customizer and all of a sudden they have to change things. They expect a good behavior there as well and that wasn’t really, yeah.

Mark Uraine: Because the customizer really gives you a good idea on how that widget is going to look in context to your site, right? Whereas the widget screen doesn’t provide that for you. So using the customizer there is a big thing and I can totally see how, if we can’t get the blocks to render correctly and be updatable in the customizer through the process we were going, then we need to rethink that.

Birgit Pauli-Haack: Well, now you have time.

Mark Uraine: Yeah. Now we have time. The widget screen is on a good path and that one’s definitely getting dialed in.

Birgit Pauli-Haack: Yeah. I’ve never kind of taken to the customizer so I was focused on the widget screen. But once I went over to the customizer, it’s a nice interface.

Mark Uraine: It was quite obvious that it’s not working out.

Birgit Pauli-Haack: Not working and it looks funny on this small screen. And it is kind of, yeah.

Mark Uraine: It does.

Birgit Pauli-Haack: Good luck. And yeah.

Mark Uraine: Thank you.

Birgit Pauli-Haack: All right. But there are still great enhancements coming for the block editor in WordPress release. And we’ll talk about them in our next show. This time we have a mile long change log so we’re going to kind of not touch on that.

Community Contributions

And so I only wanted to point out two community contributions. One is from Don Quach. I would not pronounce his name, Hwa. He’s principal designer at Automattic, and he has been busy creating a tool for theme authors to transition to block-based themes. He built a UI-based project called the Theme.JSON Creator that builds out the JSON code for theme authors plus it is also up to date with the most recent changes in the Gutenberg plugin.

We have in the show notes, we’ll have a link to it and to the blog post or to the site where he publish that. It’s definitely something for theme developers for the future full site editing experience.

Mark Uraine: Right.

Birgit Pauli-Haack: And a second tool that goes into the same direction is a CSS Audit tool by Kelly Dwan. She’s a JavaScript developer at Automattic and also worked on the block directory, started on a tool called CSS Audit. We have the GitHub link in our show notes, and it’s an experiment using CSS Parsers to parse out the information about set of style sheets. When it’s run, it will generate information about the CSS, about the number of distinct colors used, most specific selectors, how many properties are used important, etc.

So I think it’s really good to a user to review your CSS for the theme to be able to migrate it into a full site editing theme later on. It would also help with the global styles that will come into your style sheets sooner or later.

Mark Uraine: Because I know the CSS peeps over there in Slack, they’ve been really having some great meetings about refining the CSS for WP admin or in all of WordPress and dialing that in better. Was this a product of that, of what the work that they’ve been doing there?

Birgit Pauli-Haack: Yes.

Mark Uraine: I know Kelly’s been very involved and so this was built to really run WordPress through and try to see all the various colors and everything. Oh, cool.

Birgit Pauli-Haack: Yeah. Kelly was also the person who created a colorless admin screen.

Mark Uraine: Oh, yeah. I really liked that too. It was so cool.

Birgit Pauli-Haack: Yeah, it was very cool. Yeah. She does some great work.

WordPress 5.6 Beta 1/Gutenberg 9.2

Mark Uraine: Well, let’s talk about what’s been released, Birgit. We know that 5.6 beta 1 was released as scheduled. As you mentioned, we’ll talk about that in another show. But because we have Gutenberg 9.2 has been released, and this is the final release that will be making it into WordPress 5.6.

We counted 227 change log items. Oh, my goodness. Just stop and think about that for a second. Oh, and we’re going to make our way through them, maybe not all 227 in this episode, but we will touch on the highlights that we liked.

Birgit Pauli-Haack: Yeah, of course.

Features

Mark Uraine: So out of those 227 change log items, three of them were new features. The first one is adding video tracks functionality. This was an interesting one I saw, and I even partook in some of the early designs for it by trying to be able to upload and see which tracks you have uploaded for your videos.

Birgit Pauli-Haack: Subtitles, yeah.

Mark Uraine: Subtitles, yeah, there you go. Thank you.

Feature number two was about transforming multiple selected blocks to a columns block. So there’s always been kind of like you can select multiple blocks and group them, right? But now you can select multiple blocks and drop them into a columns block, which is cool.

Birgit Pauli-Haack: On the release article or post, the GIFY or the animated gif shows how to put three image blocks into columns. But I also like this feature for some text paragraphs and other combinations, because sometimes I start writing and I said, “Oh, maybe I want this to have this on the same level. These are three things that need to be looked at at the same time.” So I liked that you now can do it. Because I have been moving things around and then, “Oh, I wrote it and now I have to one at a time drag and drop it into columns.” So this is really speeding up the thing.

Mark Uraine: I know. The dragging and dropping through columns and stuff. Yeah. That was very tedious, right? But now it’s like, quick, here’s the dropdown. Make it happen. The other feature released was that the cover block now introduces repeated background options. So tiling the background image rather than just having it fill the background with one image, right?

Birgit Pauli-Haack: Yeah. It’s like background panels that we have in the early days of internet of nineties.

Mark Uraine: Remember that? Yes.

Birgit Pauli-Haack: And I’m longing to get MySpace back.

Mark Uraine: It’s really cool to see it, to mess around with it. I like this feature, you turn it off and you turn it on with a quick toggle and see the background patterns.

Birgit Pauli-Haack: There are so many background patterns that you want to use. Yeah.

Enhancements

And this brings us to the enhancements that we had 24 enhancements in this 9.2 release–13 alone were for the widget screen. So that was….

Mark Uraine: You really tried hard.

Birgit Pauli-Haack: We really tried hard to get this over the finish line. So regarding blocks enhancements, there’s a single column functionality now for the columns block, meaning you can have a columns block with one column to offset some of the design choices that you’re going to make.

Mark Uraine: Yes, this is so good. So important, I think. So many times I want to make that happen because the way the paragraph block works within the columns block, you’re able to blow it out of the set, a width of that the theme provides, right? Otherwise, you couldn’t make the paragraph boxed out of that fixed width of the theme. So this is a way to do that.

Birgit Pauli-Haack: Then another change is in a gallery block. The image capture is now used as a fallback for the alt text. I was really hoping for that feature sooner or later, because you have put it once in and then if it’s for the reader, then it also should be for the screen reader, right?

Mark Uraine: Is that a toggle or is that just naturally happens now?

Birgit Pauli-Haack: I think that it just automatically happen and if you want to override it, you can override it.

The table block got a revision. That’s the first time we talk about API version 2, but we’ve come up with that later. Then the post featured image now has a link when it’s in our list of posts.

Then for the full site editing, about a few enhancements with basic template information and a drop down view of the templates and sidebar. Then there is an info panel for layout improvement. It fixes the widow of the character count being in a new line by itself. The overall design of this feature, it’s however still discussed, but that was fixed now. There are three in the top line and two in the bottom line. That was your design that you came up with, I don’t know, two weeks ago, something like that. I said, “Well, we should have done that.” So yay.

Mark Uraine: Yay.

Birgit Pauli-Haack: But there’s also an effort to change the options modal. It’s now called preferences. There was a second step, the two-step publishing process is in that preferences section. There are other things in there and they are trying to do a redesign as well on that, but that’s not yet done. Then there are more writing flow options with reduced UI theme size and spotlight that made it into the release.

Mark Uraine: Yeah, those are kind of cool. You can actually now check a box to remove the theme styles from the editor.

Birgit Pauli-Haack: Whoa!

Mark Uraine: Yeah, so checking that box, actually if the theme is like implementing their, their styles and the editor the way they should be, then it basically removes them from the editor. If you didn’t want them in the editor or the reduced UI, kind of hides a couple icons or a couple things and just slims it down a little bit. So, these different modes are, they’re really, really fun to play with.

Birgit Pauli-Haack: Yeah. I need to kind of explore them a little bit more. Yeah. And then never, as you said, a lot of enhancements for the widget screen. Now you get a warning when you have unsaved changes in the widget screen, which is so essential.

Mark Uraine: Right.

Birgit Pauli-Haack: Especially because in the old screen, you didn’t have to save things because what automatically saved you, you were still working on the widget screen and you already busted up your live site.

Mark Uraine: Yeah. If you’re basically working live. Yeah, now you have the same things.

Birgit Pauli-Haack: And I highlighted this because I probably don’t know what it is. This allow multiple instances of reference widgets is that multiple instances of the post or categories.

Mark Uraine: I saw this one too, and I wasn’t too clear about it. So duplicating multiple removes duplicates from submitted API requests. So, something’s happening there that I’m not too familiar with, but it has been resolved and it is fixed. Whatever it was, it’s not happened before.

APIs

Birgit Pauli-Haack: And that brings us to the new API setup in a good move, 9.2 and the block supports is now also explicit available for server-side rendering. So on an in PHP, you now know what, which block supports what, that’s really cool because now you have a little bit better control, especially when you have dynamic blocks and all that.

And then there are two block APIs that are called light block edit and save symmetry and a stabilized block hook. And that is called the API version two, which pretty much has also the idea that you don’t want to, that the block had additional automatic styles in there and now it doesn’t do this anymore. The developer needs to actually explicitly opt in for those. And that is definitely making it easier to control in terms of third party blocks.

Mark Uraine: And a lot of that is outlined further down, huh? In that, in the change log.

Birgit Pauli-Haack: Yeah.

Mark Uraine: As we’ll get to it.

Experiments

So, we’re looking at experiments now. Correct?

Birgit Pauli-Haack: Right, right we are.

Mark Uraine: And there were 12 of those. OK, 12 of those split up between the query block and the site editor. So, I’ll speak the query block a little bit. I’ve been working on that myself and let’s see, so there’s several things that have been going – on adding custom post types to the query block, which is really cool setting a focus on the query block on insertion. So, the problem there was that we were, when you’d throw in a query block into your poster page, it was setting the focus on the first block, the first inner block within the query block. So, if that was like your post title, that’s where the focus went, not on the block, the query block itself. So, that was changed to reflect.

Birgit Pauli-Haack: Oh, I see. So, you wouldn’t see the sidebar here.

Mark Uraine: Yeah. To keep the focus on the query block, because that’s really what you kind of added to the page. So, let’s see, there’s adding a loading message to the query block when it’s grabbing the results. And for those of you who don’t aren’t like quite following the query block, because it is kind of a technical term, it’s the block that basically renders a list of feed items. So, like if you have a latest posts block or something like this is kind of what that does except on a grander scale and really using the WordPress API for the WP query, similar to that sort of thing. And there’s a lot of work going into it right now, we are working on redesigning the initial placeholder and kind of the steps involved in creating the query. So, for you theme builders out there, this is going to be really essential kind of, for you to get through and create your own query on your template pages and things like this for your users.

Birgit Pauli-Haack: Yeah. I think the idea is then to, for the same developers to more users rather than the end user.

Mark Uraine: Exactly. Thank you, Brigit. This is not necessarily an end user block for use, but there will be blocked variations of it. So, I mentioned before, like the latest post block, so, an end user will see that hopefully and desire to use that on their page rather than having to go through, add the query block and edit their query themselves. Like that block has already set up to provide you with the latest posts and you can make a few settings.

Birgit Pauli-Haack: Yeah. And a custom post type would be a set of reviews or a set of….

Mark Uraine: Event, a set of events.

Birgit Pauli-Haack: Or locations or something like that. So, the developer either the plugin developer or the theme developers can actually then create the blocks or the block patterns with that for the end users to pull into a page or into the full site editing.

Mark Uraine: That’s right.

Birgit Pauli-Haack: Yep.

Mark Uraine: And then we have a lot of experiments done with the site editor, many of which touch on something that is kind of being called the navigation, navigation panel which, for those of you who haven’t seen this already, it kind of blew my mind when I saw it, I was taken back like, “Whoa! When did this get in?” I wasn’t quite paying attention to it.

But when you’re in the site editor in the Gutenberg plugin and you click on the W in the upper left hand corner, it slides open like a new sort of menu screen where the user or the site builder, whoever’s kind of be creating the site, is going to be able to jump around through templates, through pages essentially, all these things are going to be in here in a way and structured in a way that’s going to provide you a way to navigate through your site as you’re building it without having to leave the site editor and return to the WP admin screens. So, it’s very beneficial to help make the flow of building more efficient for you.

Birgit Pauli-Haack: Yeah, definitely. And it brings together the whole experience now that the things that you have in your head, what you might want to see will be in the left navigation bar, pretty much as you all actually accustomed to with the WP admin or just a layer on top of it.

Bug Fixes

Mark Uraine: Yeah. Good point. There you go, we had 62 bug fixes in this release, 62 bug fixes just tells me that Gutenberg was broken.

Birgit Pauli-Haack: And it wasn’t, it looks very well.

Mark Uraine: It wasn’t. It was beautiful. But somehow People found 62 bugs and they all got fixed here.

Birgit Pauli-Haack: They found more, they’re 25….

Mark Uraine: OK. You can’t say all that.

Birgit Pauli-Haack: Only the fixed ones.

Mark Uraine: That’s true. That’s true. Oh, now I’m sweating. OK.

So, running through these, there’s a few that we highlighted. One of the fixes was to keep the insert from URL entered value on the image placeholder. So, this kind of surfaces it visually. Let’s see the widget screen, adding a browse all option to the inserter. Is that a bug, I’m going to challenge that one or was that more of an enhancement?

Birgit Pauli-Haack: If you kind of think of, you said the experience that you have in your page….

Mark Uraine: Right. In the post editor, right?

Birgit Pauli-Haack: In the post editor and you have the insert of the same plus and on the black background for the Sibling Insert, it’s called you expect things that it works like the other one.

Mark Uraine: Yeah. I would agree. OK. Maybe, maybe I’ll call it. So then there was the post schedule label showing the wrong time if the site and user time zones did not match. So that’s been remedied. That’s nice. Okay. A little time zone. Speaking of time zones, everybody be ready. Because in North America, next week … when does the time change?

Birgit Pauli-Haack: 7:00.

Mark Uraine: Pay attention to all of this, because this is when the world goes to havoc, when you’re trying to organize meetings. Anyway, that was a tangent. OK. On a global scale, when you’re trying to organize on a global scale.

Birgit Pauli-Haack: Two weeks and open source were placed there but nobody is in the right meeting.

Mark Uraine: Everybody is showing up for the wrong meeting at the wrong time. This happens right about now everybody.

Birgit Pauli-Haack: I had up pick-up meeting.

Mark Uraine: Another bug fix included the cover block, improving the overlay opacity handling, which is nice.

Birgit Pauli-Haack: Threw me a little bit because I lost the overlay opacity online.

Mark Uraine: Really?

Birgit Pauli-Haack: And I had to set it again, but I didn’t see it anymore because it only shows up when you select an image, it was kind of really interesting when you select the background color, then you get the opacity. And I didn’t see it when I was up because before it was like there, it was a little bit hidden away.

Mark Uraine: There was fixing the drag and drop in the widget areas. So if you had an empty widget area and the widget screen, and you were trying to drag a blocker widget to that area, it wasn’t working. That’s been fixed. Hiding the parent selector in the widget area, which is nice because you know, if you roll over a block icon that you get the little pop-up that appears for the parent block, well, this was happening. If you were in the widget or in a block in the widget area, that it would pop up and show your next selection parent would be the widget area. But that widget area is not really a block. It’s an area. So we wanted to hide that away.

Birgit Pauli-Haack: Right. And that actually only applies to the Legacy widget because all the other blocks either they have a parent or they don’t, if you put a column block in the footer you have, and then other blocks into the footer, then you want to have the pen selector.

Mark Uraine: To on those inner blocks, right? But when you get to the surface, the top level block, you don’t want it to show you that the next block up is the widget area. And for you listeners who are not following me while I’m explaining this, I’m using hand gestures to describe everything, but goodness. OK.

So then we have showing all widget areas on the widget screen, that was cool and making sure that all the widget areas are visible, including the inactive widget area, a couple fixes on the blocks. The 9:16 aspect ratio styling, fixing gallery captions were not centered in the front end. It looks like there were quite a number on the widget screen as well. But one such as like adding, save keyboard, shortcut, command state. Because you have to save things now for it to show up on the front end. So why not get the shortcut working too, right?

Birgit Pauli-Haack: It goes with the enhancement that you actually get a warning when they are saved.

Mark Uraine: Good.

Birgit Pauli-Haack: Then the 9:16 aspect ratio styling that’s for the embed blocks.

Mark Uraine: OK. Thank you. I wasn’t sure if that was the video or embed. OkK

Birgit Pauli-Haack: And then the Gallery caption well, as a side note, if you need more alignment for you for the controls of the caption editor’s kit provides you with them. So I really like it that you can have a caption that’s multi lined to actually make it left aligned because….

Mark Uraine: I like that too.

Birgit Pauli-Haack: The core block it’s only centered and you can only have it centered and sometimes you need a multi line caption and then it’s the accessibility issue that you have as multi line centered text.

Mark Uraine: It’s hard to read, right?

Birgit Pauli-Haack: Yeah.

Mark Uraine: It makes it a little more difficult to read. Just a few more real quick. A Cover block shows a spinner now when uploading an image that was very confusing because when you’d upload an image and you’re waiting for it to show up, you weren’t really sure what was going on, but now it tells you that it’s loading. And fix skipped shortcode transforms in row handling. You’re good. We have that bolded, but I don’t quite understand.

Birgit Pauli-Haack: When you convert a block from the previous classic editor and there was a short code in there now skips it, and it does not try to do anything with it, so you can make it a shortcode. Some of the shortcodes all actually inline shortcodes and that would always throw the person.

Mark Uraine: OK. And the last one I have noted is a Refactor Reusable block edit component using Hooks and fix interactions with multiple instances of the same reusable block.

Birgit Pauli-Haack: Yeah. So that’s the editing and saving an instance, do not automatically update other instances in the editor. So then that was a fix.

Mark Uraine: It’s a whole point of reusable blocks.

Birgit Pauli-Haack: No kidding. And then reusable blocks, put in focus in the title field and then pressing escape to cancel it. The edit did not work properly. So those were the refactors.

Performance

Well, that brings us to three performance issues that were fixed or that are PRs. So avoid the selector to improve performance on the paragraph, and then remove the transition from the block selection indicator also increases the performance, and widget screen preload now the request to the sidebar.

Documentation

And then we had a few documentation changes, commits. One is to bring the block-based theme tutorial up to date, and I think that’s the most important part because everything comes together now for, I think the block-based team and the full site editing is now getting ready to be tested. And for that, you definitely need documentation. And then also the documentation for the color component for, has been updated or even has been added. So it was missing and there were other others as well. There’s another one that says update block-based teams documentation. So there were quite a few edits in that documentation.

Mark Uraine: Keeping that one updated is very important right now with this pole block-based full site editing coming out. I’m sure theme developers are just learning all they can about these block-based themes.

Birgit Pauli-Haack: Yeah, definitely.

Code Quality

And then, well, 29 called quality commits in this. And I would think a third of them were refactoring the blocks to use Hooks. That’s a programmatical react hooks that came out in three years ago and now the block editor uses it, but also the API version two.

Supports it or the other blocks are now supporting it. So it was a list of all kinds of blocks. And then there was an update all blocks to API. Person two. We highlighted that to talk about that. So if I think I mentioned it, it’s from now on styles and class names are not added automatically overriding any at least or fighting with the developer styles for third-party blocks for the static block. And then the goal is a clearer separation between the core editor and the block developers.

Mark Uraine: I love how you and I laughed about the changelog items, how there were change log items for individual blocks being mentioned about this. And then finally there’s a PR that’s just like update all the blocks with this. And I thought to myself who goes through the changelog other than you and I, and then starts laughing at some of these PRs and how they’re being listed here. Like we’re geeking out on the change log basically. I love it.

Birgit Pauli-Haack: I like it that you talk dirty. So another code quality change that I wanted to point out is that they removed the animation from the mover buttons.

Mark Uraine: Yeah. There again, the mover buttons are being just tweaked, just a little, right? Because there’s so many things that are being tried and tried with getting these mover block mover buttons to work and look and react correctly. The latest addition was adding some animation to them to help well that’s been removed. And everybody listening, we’re getting towards the end, hang in there.

Security

There’s about one security improvement PR that made it in about the post CSS plugins pre-set saying update vulnerable dependency. So there’s that in a breaking change was included adding, add separate widgets end point. So for those of you looking at the widgets API and the end points.

Various

There was a breaking change there and there were 69 various or, kitchen drawer sort of PRs that we really couldn’t find where to put them. So they put them into a various section and I’ll briefly run through a few. One is to allow transform to columns from the single block. Which again is, we talked about creating multiple blocks and bringing them into a columns block. Well, you can do that with this single block.

Birgit Pauli-Haack: You can do the reverse of it.

Mark Uraine: Transform from a single block to columns, right?

Birgit Pauli-Haack: Right.

Mark Uraine: OK. I wasn’t clear. Thank you. Reusable blocks support for the widgets editor. That was the big one. Tadlock had called that one out and we’re like let’s get this in good points. Everybody brought up some good points about that. Let’s see social links block had an update placeholder experience when first editing social links. So there’s a bit of an update there, headings block at wide and full width options finally. Right?

Birgit Pauli-Haack: Mm-hmm.

Mark Uraine: Adding a color palette, edit functionality to global styles as wonderful. So if you get a theme that allows global styles, you can actually edit the color palette.

Birgit Pauli-Haack: You get a sidebar where you can edit that.

Mark Uraine: And few more here displaying before widget and after widget, when rendering WP widget block.

Birgit Pauli-Haack: Well, that comes from the old widget API, right? Because there were also properties of the widgets. So didn’t render at the wall.

Mark Uraine: Now it is so.

Birgit Pauli-Haack: Yeah.

Mark Uraine: The gallery block, add labels to image figure and fig caption elements for accessibility. There’s a good one. Hide the quicken site inserter when the user is typing. So the quick side inserter, I’m assuming that’s the plus that appears in the page in line with you. So it kind of hides while you’re typing. In fact, oh, my goodness. Have we passed that announcement section?

Mark Uraine: What’s an active development? I’ve got one to add when we get there. And the last one on my list on our list, Birgit, is the Rest API: introduce batch controller, so that, you have a question?

Birgit Pauli-Haack: What is it?

Mark Uraine: I don’t even know, but it’s highlighted on my list. We got to open this up. It sounds quite important.

Birgit Pauli-Haack: Oh, you can get to, you need, when you put in widgets, you need a validation on every of those pieces.

Mark Uraine: For validation mode.

Birgit Pauli-Haack: Yeah. It’s good for people who you see rest API.

Mark Uraine: Yeah. And that closes out changelog for Gutenberg 9.2. Everything that has been introduced.

Birgit Pauli-Haack: Well, good job.

Mark Uraine: Good job. Yes, we did it. We skim through 227 changelog items.

Active Development/Discussed

Birgit Pauli-Haack: So, what’s an active development and discuss and the list that’s here, that’s all very theme oriented. So, the theme 21 is now available in the beta version. So I already started, so I have a site where you use Strunk that’s the daily build of core as well as the daily build of Gutenberg and the Twenty Twenty-One theme. So I’m at the latest updates every day where I can test things if I want to. But the Twenty Twenty-One theme, also Mel Choyce put together a discussion on should the team work on dark mode for the theme to get a little bit ahead of the curve. We all know dark mode, dark mode on apps, but we haven’t seen a lot of websites that can switch between light mode and dark mode for the visitor that they can do this. And Mel Choyce did a fantastic job, putting all the options in there that how to implement it, or it could be implemented and then discussing the pros and cons. So that’s definitely a good read for those who do the themes.

Mark Uraine: So can I? I’m laughing to myself because I recently downloaded this off of get hub and the steam, and then uploaded it to like a local, one of my local sites here that I was testing with. And I could not understand why, I thought the background was supposed to be like this teal color, but I kept seeing a background that was like a dark gray. And I couldn’t understand some pages it was dark gray, some pages it was like empty and I didn’t know what was going on. And so I’m laughing to myself right now because obviously like some dark mode thing was happening, and it’s probably still just a little buggy right now or something I should really read that post because I’ll probably learn a lot from it.

Birgit Pauli-Haack: There’s also that a lot of people already commented on it. So it’s a really public discussion with interesting points and how people approach it. So definitely worth a read.

And in the same topic, the first full block-based theme for full site editing was approved on your official repository for themes at wordpress.org/themes/q. And it’s called Q, created by Ari Stathopolus, and Ari is a team rep on the theme review team and wrote on a Tweet. And I quote, “Hopefully this will allow more people to easier test for that editing FSE,” he wrote, “in Gutenberg and move the project forward a bit faster,” end of quote.

So in the show notes, we will have the link also to the GitHub report. So you can file issues or contribute to that. Yeah. So that was that part in the same way also there’s a Twenty Twenty-One blocks theme and the GitHub theme experiments repository by Carolina Nymark. She is developing the full-site editing version for Twenty Twenty-One. That process has started as well, and you’re welcome to check it all out.

Mark Uraine: For anybody interested in the theming with block-based themes, everything that’s happening right now, all of these things in active development are really great pieces to look into, to see what people are doing and building for ideas and inspiration.

I wanted to add one thing to this list, and I know we had a long one already, but I wanted to talk about what spurred the thought in my head. I can try to include the link in the show notes, but Shaun Andrews did recent investigation into that little sibling insert, or the plus that’s inline with your post and you and I have noticed that that plus appears in multiple areas at times. It’s very confusing how it acts and reacts with things.

He’s recently done a deep dive into it and is providing some new solutions around this, which I think could really change the experience for just trying to type content and edit things without having all these little pluses appear all over the screen. I just wanted to touch on that and then I’ll grab the link and make sure it’s in the show notes.

Birgit Pauli-Haack: Yeah, that’s awesome. I’m glad that you brought this up.

We are now at the end of this Gutenberg Changelog. It’s the number 31. I have one reminder: just because it doesn’t get into 5.6, the widget screen still needs your input and your testing. I will have in the show notes again, the call for testing of the widget screen that Anne McCarthy posted several weeks ago, but it’s still accurate.

As always, our show notes will be published on Gutenbergtimes.com/podcast. This is episode 31. If you have questions or suggestions or news you want to include, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. We love emails from you, dear listeners. Thank you all so much for listening. Goodbye until the next time.

Mark Uraine: Yes, thank you everybody. Birgit, it was a wonderful time with you, and I hope you have a great evening.

Birgit Pauli-Haack: I hope for you the same, and see you in two weeks.

Mark Uraine: Alrighty, bye-bye, everyone.

Phases of Gutenberg

Widget Screen pulled from WordPress 5.6 scope

Tools for CSS and Theme.json

WordPress 5.6 Beta 1

Gutenberg 9.2

About Themes

Transcript

Conversations

Four Phases

Announcements

Community Contributions

WordPress 5.6 Beta 1/Gutenberg 9.2

Features

Enhancements

APIs

Experiments

Bug Fixes

Performance

Documentation

Code Quality

Security

Various

Active Development/Discussed

Leave a ReplyCancel reply