Changelog #36 – Block Editor Plugins, Gutenberg 9.8, Full-Site Editing Goals

Gutenberg Changelot Episode 36 Cover
Cover Art: Gutenberg Changelog
Gutenberg Changelog
Changelog #36 - Block Editor Plugins, Gutenberg 9.8, Full-Site Editing Goals
Loading
/

In this episode, Birgit Pauli-Haack and Mark Uraine discuss block editor plugins, Gutenberg 9.8 release and goals for full-site-editing release.

Show Notes / Transcript

Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed 

Show Notes

Full-Site Editing

Block Editor Plugins

Gutenberg 9.8 Release

In Active Development and Discussion

Show End Notes:

If you have questions or suggestions, or news you want us to include, send them to changelog@gutenbergtimes.com

Transcript

Birgit Pauli-Haack: Hello, and welcome to our 36th episode of the Gutenberg Changelog. In today’s episode, we will talk about the Theme.json. We will talk about Gutenberg 9.8, WordPress and the big, bodacious goals or audacious goals. No, what’s the word I’m looking for?

Mark Uraine: Bodacious is great.

Birgit Pauli-Haack: Okay. So pick bodacious goals for 2021.

Mark Uraine: I like bodacious.

Birgit Pauli-Haack: And I’m Birgit Pauli-Haack, curator of the Gutenberg Times. And I’m here with my co-host, Mark Uraine, designer and core contributor to WordPress. Hi Mark. How are you?

Mark Uraine: Hey, Birgit. I’m doing well. I finally caught up on some of the past Gutenberg releases and posted some videos on my YouTube channel, The Gutenberg Walkthrough. Where I went through their visual features and enhancements and just kind of recorded that for people. And it’s interesting though, to see kind of how these features lately have been slimming down with each release. And I think that’s due to all the work that’s being put into full-site editing right now, honestly.

Birgit Pauli-Haack: Yeah, I can imagine. Yeah.

Mark Uraine: Yeah, really cool. We especially see that with this release, which we’re talking about today, 9.8. But overall I’ve been healthy and doing really well. What have you been up to lately?

Birgit Pauli-Haack: Oh, well it was a busy week, but when is it not? But I finally feel that I landed in 2021. Yeah, I had some transition problems getting the focus in and kind of getting back to work, that was the biggest part. I could have used a few more weeks, and I actually didn’t. Yeah. 

And I’m still on a high from today’s awesome 24-hour live-stream of WordFest, a celebration or WordPress for remote workers and benefiting a Big Orange Heart, a non-profit in the UK, which is providing well being support for remote workers. And for my talk, I tried something new, not sure how it turned out, but I will modify it for a later conference. It was a case study and no code contributor journey on the WordPress Gutenberg GitHub repro.

Mark Uraine: That’s all right. That’s right, I’m so glad you did that.

Birgit Pauli-Haack: Yeah. It was fun to do it and kind of think it through and how can you work on no coder through it? There’s a lot of lingo and I have a blog post about that, but I think doing it with examples was a good thing, but the video that I first recorded was 40 minutes and I had a 30-minute limit there. So I had to edit it down a bit. So it was kind of an interesting experience to do the pre-record talk as well. But we had live Q&A, and that was very interesting. I saw a few friends in there. We were about 80 people. We are for such a fringe start, 80 people, that was really good. I was kind of happy about that.

Mark Uraine: Yeah, it is.

Announcements

Birgit Pauli-Haack: Yeah. So we have announcements, the big picture goals, a post published by Josepha Haden who is the executive director, oh sorry.

Mark Uraine: Great. Yeah, yeah. I’m sorry. We’ve got some timelines there. Huh?

Birgit Pauli-Haack: Great, yeah. She is Josepha Haden, if you don’t know it. She’s the executive director of the open-source WordPress project and we have a little timeline for full-site editing. So first it’s going to be in the Gutenberg plug-in and then subsequently in WordPress core to edit all the elements of a site with Gutenberg Blocks. And that will include in-progress features designed to help existing users transition to Gutenberg as well. So the scope and the timeline is MVP. That’s short for Minimum Viable Product. It’s going to be in the plugin for sure in April 2021, so in three months. 

And then the version one is planned to be in core by WordPress 5.8. And we looked up the release schedules for the upcoming versions, and it was the release schedule date for the WordPress 5.8 is June 8th.

Mark Uraine: All right. This year? Yeah.

Birgit Pauli-Haack: This year, yeah. And then now I also understand April, why, what’s the difference between April and June? Well, yeah. But in April in plugin that is relatively close to beta one for the full 5.8. Yeah, so that’s why.

Mark Uraine: So that they got it. Yeah, they got to have that done by then in order to get into 5.8. Okay.

Live Q&A

Birgit Pauli-Haack: So it’s going to be interesting. So now we have a timeline and if you want to know how that all progresses and some updates, we have a live Q&A with the Gutenberg Times YouTube channel on January 29 with Carolina Nymark, Ari Stathopoulos and Anne McCarthy, and we will discuss updates on the full-site editing global styles and themes and WordPress 5.71, or not.

But it’s going to be interesting because Carolina Nymark and Ari, they’re both very entrenched in the theme building for full-site editing, and they will be able to give us an update at that. And Anne McCarthy is the program manager for the full-site editing outreach project that is testing all the full-site editing features. Yeah. So, January 29, 11:00 AM Eastern 1600 UTC.

Community Contributions

Mark Uraine: Cool, cool. That sounds wonderful. Then Birgit, we have some community contributions to share with everybody today. There was Frank Klein who shared how recently posted how he implemented the newly developed global styles feature into his experimental block-based Bosco. And that Bosco theme for all of you is available currently in the WordPress themes directory.

So Frank gives you a tour around the experimental themes.json file and compares working with styling for full-site editing with the current way themes deal with styling of headings and typography, etc. We have a link to the post, it’s on the WP development.courses site and really good read there for anybody interested in how to integrate global styles.

There was also a post from Anne McCarthy that was published about summarizing the first call for testing for the full-site editing program. It’s an interesting read of what non-developers found when working from within the new site editor. And she breaks it down really well. She provides some quotes from the actual testers and gives nice things, nice identifiable areas in which they tested. So excellent read for, especially for the Gutenberg team to stay abreast of. Right?

Birgit Pauli-Haack: Yeah. Yeah. I think it’s good that there are some people outside the team testing that, especially with the idea to, “How am I doing that with my users?”

Mark Uraine: Yeah. I love it.

Birgit Pauli-Haack: Yeah. And I discovered a new plug-in called Block Visibility by Nick Diego. And after you install it, you have another in the sidebar and another control for visibility and you can show and hide content depending on login or log out. And what excited me the most was that I was able to schedule blocks so they can magically appear even after I published a post.

Mark Uraine: Wow.

Birgit Pauli-Haack: If there’s some embargo information in there or like today my talk, I didn’t want to give away the talk. I just shared the slides. But now after the talk, I also make the video available transcript and all the links. So then I didn’t have to go in there again to check that.

Mark Uraine: Wow and the Block just appeared at a certain point at time, how cool?

Birgit Pauli-Haack: Yeah. You get the same scheduling feature that you have on your publisher posts.

Mark Uraine: Okay. Your post, yeah.

Birgit Pauli-Haack: Yeah. So that’s kind of re-use of components that’s already built into the block editor for additional plug-ins and it’s just very well done. 

And another block plug-in that we discovered is a query block that displays custom post types in a feed. And then you have controls for a featured image, display numbers of posts, etc. But if you need that for your custom post types, yeah. Check it out. It’s called OsomBlocks by OsomPress.

Mark Uraine: Yeah.

Birgit Pauli-Haack: All right.

What’s Released – Gutenberg 9.8

Mark Uraine: What’s released.

Birgit Pauli-Haack: So what’s released? We had a Gutenberg 9.8 plugin release with two enhancements and three new APIs.

Enhancements

The two enhancements are a semi-transparent background for the space of block when selected. So that helps users to find the spacer block. Even if you have a background there, like is solid color or picture there. Yeah. To kind of aim for that spacer block in the editor. So it’s not so hidden.

It also has matching variation icon in the block switcher. So the very left button in the Block Toolbar is the transformer. So you can switch out the content of a block from paragraph to list, but it will have now, if you have a variation of that block will have the variation icon as particularly pointed out, that’s working for Embed Blocks. So you get the Twitter icon or the YouTube icon. So, you know what that Embed Block actually is.

I like that, yeah. It’s kind of takes a lot of questions away or that you have to. Well, YouTube or Twitter yeah, you see that, but from other Embed Blocks, you don’t know always what that is.

APIs

There are three new APIs, two of them concern the Create-Block script, that’s Scaffolding of block development. It now allows locally installed packages with templates. And it also has now support for static assets, which is interesting when you kind of make that block a plugin that you have a separate static asset, you can kind of get them in there. And then the other one was just an export for some layout effect.

Mark Uraine: Okay, yeah.

Birgit Pauli-Haack: Yeah. That’s very technical. I don’t know if it has more than 15 syllables.

Mark Uraine: That’s amorphic, yeah. Right. That’s an amorphic layout effect. Okay.

Birgit Pauli-Haack: I don’t even know where the word starts or ends, it’s almost like a German word.

Bug Fixes

Mark Uraine: So there were about 25 bug fixes with this release. They included a number of things. One being that showing an error message when a reusable block has gone missing.

Birgit Pauli-Haack: Oh, yeah. Helpful.

Mark Uraine: So if you, this affects all your posts, live posts and may have been embedded in the focal point picker, but had a fix rendering and dragging experience, fixing the rendering and dragging experience, which is pretty nice.

Birgit Pauli-Haack: Yeah. Focal point picker, that’s for the….

Mark Uraine: The color record or the cover block. Yeah, yeah.

Birgit Pauli-Haack: Yeah or the image block or the media and textbooks. So it’s used quite a bit and fixing it really helps.

Mark Uraine: There were some invalid cover block transforms that got fixed. There’s one here, don’t close the block inserted when clicking the scroll bar or an empty area. So it kind of keeps that block inserter panel open. 

And I mean, many others here, fixing appender margins, which are always being refined. That’s the word again, fixing them again. 

Performance

There were two performance changelog items, one being the improving the inserted block hover performance.

So just looking at this issue is pretty cool. Nick does a great job comparing like the what it was, to what it is now, and kind of hovering over each of the blocks, seeing the previews, a lot of the performance is getting revised. 

Experiments

There were 13 experiments that were included in this release. The group block, adding border radiuses. Yeah, right. Fixing the border radius and the site editor, the hiding the theme without comments, the PHP deprecation message.

Let’s see, fix the navigation editor. There was obviously many of these experiments. I think might’ve been some bugs here, just fixing a few things in them. But the theme.json has added border radius to the theme styles schema, so very nice. Add theme.json internationalization mechanism and Json files specifying which theme Json paths are translatable. Okay. So internationalization for that. That’s great.

Birgit Pauli-Haack: Yeah. That’s a major improvement there for everybody who is not English speaking. Yeah.

Mark Uraine: Totally. The navigation block has a use draft status when user creates posts and don’t render on publish posts in menus. Okay. Good refinements there. And the full-site editor has a load content in iFrame change now. And from the release notes specifically, it says that the site editor now renders its content in an iFrame.

There are a number of reasons for this such as avoiding admin CSS bleed or allowing to simply use a theme style sheet for a site without any adjustments. Oh, my goodness, Birgit, this is a fantastic change implementation right here. Once this approach proves stable, the team is planning to make the same change to the post editor.

Birgit Pauli-Haack: Yes.

Mark Uraine: Yes, yes, yes. Please make that happen. Right?

Birgit Pauli-Haack: It’s already in there in the site editor.

Mark Uraine: Right. Let’s get that over to the post editor now.

Birgit Pauli-Haack: Yeah, imagine that one style sheet.

Mark Uraine: Oh, my goodness. And no more CSS bleed from the WP admin. That’s great.

Documentation

Birgit Pauli-Haack: Yeah. And then in the section of documentation, again, quite a few enhancements or updates for the Create block Scaffolding tool for creating new blocks. And then also on start, update the quick starter guide for the development environment. 

Code Quality

And so the next section is code quality. There were nine items in there. I just want to point out the upgrade of Reakit to the version. 1.3.4. Reakit is the library that helps building accessible rich web apps in React. So that will be also used for the interfaces of course, but also for the component library later on when they come in from the G2 component library. So that was necessary to upgrade that and get all the new features in. 

Apart from that there was some editing, some widget and annotations for the testing and for the storage, meaning data storage or stage storage things. But it’s very technical. And I only understand half of it. If at all, maybe 10% sometimes.

Mark Uraine: Yeah. I’m with you.

Tools

Birgit Pauli-Haack: And then there are 23 tools items in this release. Most of them also upgrades like puppeteer upgrades to 5.5, and ESLint and Jest as well as the minimum required node.js was upgraded to 12. So there are some tooling updates that will help people put it all together. Also, the webpack upgrade to version 5.

Various                                                       

The last section is our kitchen drawer, the various section of the 15 items. What also stands out, and this is the theme.json has received quite a few updates there, which is important for the full-site editing because now all of a sudden you have all the settings for a theme. You put it all in one big Json file and there was a lot of testing that goes on with full-site editing. That needs to be quite a few updates.

What also stands out is the avoid using auto drafts for the theme templates and template parts. That was something that I ran into that when I tested it, I had all of a sudden, a list of duplicates in my list of templates and template parts.

Mark Uraine: Really, oh wow.

Birgit Pauli-Haack: And so the full-site editing no longer creates auto drafts for templates and template parts, and they were previously needed to integrate with the previously direct files from the full-site editing theme and not have user modifications. But taking that out is hopefully putting a nice stabilized foundation for the full-site editing and not being so complex and management and synchronization logic. So it’s going to be a different experience now to test the full-site editing. So I’m looking forward to that. And did you highlight that, that add primary destructive button style?

Mark Uraine: Yeah. A new button style for the primary, the destructive button style. So whenever you’re going to remove something, delete it, got some changing to the style there.

Birgit Pauli-Haack: Excellent. Yes. Okay. This concludes our Changelog for Gutenberg 9.8. Is that it right?

Mark Uraine: Yeah, you got it. Can you believe we’re going to be hitting 10.0, pretty soon. Oh my goodness.

Birgit Pauli-Haack: Yeah. That’s 100 releases, right?

Mark Uraine: Is it? Yeah.

Birgit Pauli-Haack: Yeah. Or close to it on that, yeah.

What in Active Development or Discussed

Mark Uraine: Wow. So then we have, what’s in active development right now looking through kind of at the weekly chat that happened this week. 

We see that the query pagination block is merged and into the master branch. And that’s really helpful for the query block. Just paginating posts, wherever global styles was updated recently as well.

Robert Anderson mentioned that he’s working towards adding parts of global styles to WordPress 5.7. And there was a link to that issue on GitHub. We’re planning to do some changes to the shape of the theme.Json file, which again keeps coming up in these recent chats.

And another issue, the most immediate that they’re working on is to make settings and styles, top level keys. So really good focus on global styles. And not only that from the technical point of view, but also from Q. 

Q has been looking at the UI side of these global styles. And he actually jumped back into this space and working through the integrations and improvements to the component system for Gutenberg. So, yeah, it’s good to hear. I’m glad that we’re hearing about this component system again.

Birgit Pauli-Haack: Yeah, well, it’s a major component. That’s the global standards in the sidebar where the user then can change all the colors and settings that come in from the scene and then have some opinionated changes there.

Mark Uraine: I was glad to see in those global styles, several different instances of reset buttons. So I’m glad the reset or the concept of resetting these global styles is being part of this experience because so often do we go down global styles and end up somewhere we didn’t want to be, so it’s nice to be able to just reset that all and start over again.

Birgit Pauli-Haack: Oh yeah, yeah, yeah. I get lost in there, I have too many choices then all of a sudden it’s….

Mark Uraine: For sure.

Birgit Pauli-Haack: Yeah. I don’t know how to stop and then I need to go back to it, yeah.

Mark Uraine: The group block was seeing some updates from Andrei, adding a background to the group block. So this seemed like a big rabbit hole for Andrei. There was a lot of conversation about this or a little bit of conversation in Slack. So we’ll share that link. 

And also finally we have from the open floor section of the chat that happens on the weekly meeting, there’s work on the block base navigation screen has picked up again. And in fact, there’s a new channel for anyone interested in following and contributing in Slack. There is the feature navigation block editor channel now in Slack. So go check that out, along with the GitHub project for it too, which is a project number 31 on GitHub.

Birgit Pauli-Haack: Yeah. The feature navigation block editor joins the feature widget block editor channel. I think they’re also a planning weekly meetings on that.

Mark Uraine: Okay. That makes sense.

Birgit Pauli-Haack: So you can really focus on it. Yeah. I think the featured widget has a meeting at midnight. Yeah. There are quite a few Australian team members that are working on it. And so midnight is not for me.

Mark Uraine: You don’t stay up for that?

Birgit Pauli-Haack: Not anymore. No, I might get up but three or four again, but then the meeting is over-

Mark Uraine: Right.

Birgit Pauli-Haack: Like I missed it. Yeah. So there’s a lot going on at the moment in the development because everybody wants to get ready for this April full-site editing minimum viable product. And there are so many moving parts it’s really mind boggling. 

But we are almost at the end of the show. Just wanted to point out two things. 

WPBuilds

One is on Monday, I will be on WPBuilds, talking about Gutenberg with Nathan Wrigley, Paul Lacey and Christina Hawkins – WPBuilds on YouTube channel. And Mark mentioned his YouTube channel and the intro, the Gutenberg Walkthrough. Do you want to say more about that?

Gutenberg Walkthrough

Mark Uraine: If anybody’s curious about how these continued features and enhancements actually affect the UI and the experience of Gutenberg, that’s what I go through in those videos, just to give everybody a visual representation of that.

Birgit Pauli-Haack: Excellent. Thank you for doing that. 

So as always the show notes will be published on Gutenberg times.com/podcast. And if you have questions or suggestions or news, you want us to include in our next show, two weeks from today, send them to changelog@gutenberg.com, that’s changlog@gutenbergtimes.com. So that’s it from me. Thanks everybody for listening for being here. Thank you, Mark, until the next time.

Mark Uraine: Thank you, Birgit, for joining me today, and everybody have a great time away. Bye-bye now.

Birgit Pauli-Haack: Bye-bye.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.