Changelog #44 – Gutenberg 10.6 Release, Features Coming to WordPress 5.8, and Theme Settings in Theme.json

Changlog episode 44 cover
Cover Art: Gutenberg Changelog
Gutenberg Changelog
Changelog #44 - Gutenberg 10.6 Release, Features Coming to WordPress 5.8, and Theme Settings in Theme.json
Loading
/

Birgit Pauli-Haack and Grzegorz Ziolkowski discuss the Gutenberg 10.6 release, Features Coming to WordPress 5.8, Theme Settings in Theme.json and What’s in Active Development.

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

Tweet that started a great discussion: A resource that really sells the power of Gutenberg to a prospective client?

Upcoming “Universal Themes” Hallway Hangout – See the comments for video, chat transcript and post-it images.

New Widget Screen in WordPress 5.8

Full-Site Editing

Gutenberg 10.6 Release

What’s in the works

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

Please write us a review on iTunes! (Click here to learn how)

Transcript

Birgit Pauli-Haack: Well, hello, and welcome to our episode #44 of the Gutenberg Changelog podcast. In today’s episode, we will talk about the Gutenberg 10.6 release, features coming to WordPress 5.8, and the theme settings you can now control in the theme.json file. I’m Birgit Pauli-Haack, curator at the Gutenberg Times. I’m here with my co-host, Grzegorz Ziolkowski, JavaScript developer at Automattic and WordPress Core contributor. 

Hey Grzegorz, how are you doing today?

Grzegorz Ziolkowski: Hello, Birgit. I’m great. I must admit, I’m very excited to talk about another Gutenberg release that is full of amazing features and enhancements. How have you been? 

Birgit Pauli-Haack: Thank you. I’m well. This week, I spent quite a bit of time testing this release and you are right. There are some amazing changes coming to the Block editor. But before we head into the deep end of that release, I want to share a conversation I had with listeners on Twitter.

Listener Questions

Keith Devon, from Highrise Digital asked a general question on Twitter. He wrote, “Anyone knows a resource (video posts, etc.), that really sells the power of Gutenberg to a prospective client?” Laura Byrne, she’s a friend of the Gutenberg times content creator and block editor power user pinged me and I shared the recent WordPress VIP article with the thread.

The article is How the WordPress Gutenberg Block Editor Empowers Enterprise Content Creators. That really can help out with all the arguments why your client should use and migrate to the block editor. Although useful, Keith actually found it understandably one-sided, and he was more looking for a direct comparison between the other third-party page builders.

I had to say, I haven’t seen any publication that compared directly page builders with Elementor or Beaver Builder with Gutenberg, the block editor doesn’t have any page building capabilities. And FSE, full-site editing, won’t be comparable with third-party page builders for many years to come. And then I remembered two articles by developers who replicated landing pages with Elementor and Gutenberg and compared the page load speeds of the final product. 

One was Kyle Van Dusen with his post, Damn, Gutenberg Smokes Elementor from January 21. And the other one was a little earlier by Munir Kumal, Gutenberg vs. Elemental – HTML Bloat, and he wrote it in July 2020. 

Grzegorz Ziolkowski: Yeah. It’s interesting. I saw quite recently a YouTube video recorded in March this year and this was about exactly the same approach. There was a comparison between a theme that has a version for Elementor and with Gutenberg and Web Vitals metrics scored much better for the version with Gutenberg. And then it’s also a fun story, because I had some internal meeting with some of the teams from WordPress.com support. They asked me exactly the same questions, but I didn’t have the answers you shared. 

Birgit Pauli-Haack: Well, if they listen to the Gutenberg Changelog, they have the answer now. And of course, all the links will be in the show notes for your self study. Now, I would take those speed tests with a grain of salt first. Elementor can catch up quite quickly with that. And there are only one indicator of the comparison and we are getting a little bit away from the feature comparison. 

Bet Hannon, also a friend on Twitter, agency owner and works on a nonprofit. So we have a few overlaps there. And she asked me “You really think it will be years before Blocks and FSE, FSE being full-site editing, will be comparable?” 

And I wrote on the Twitter that the power of the page builders is more for the site implementers to build and reuse. To have repeatable processes with adjacent tools. And block-based themes that use the full capabilities of full-site editing will take an army of Theme developers embracing the new era. And so wide adoption will take about three years. That’s just me. But if you work with a theme developer ahead of the curve, you will get there sooner of course. We have been working with the block editor since 2018, actually before it became part of Core in production, and many people are just now starting to give their clients access. That’s two and a half years after the block editor was first released in December 2018. 

Grzegorz Ziolkowski: That’s a lot. 

Birgit Pauli-Haack: Yeah.

Grzegorz Ziolkowski: It’s very late to join.

Birgit Pauli-Haack: I think that’s actually up for par with technology adoption cycle. But I find it an interesting question to contemplate. What do you think Grzegorz? When will the site editor provide similar flexibility, stability and tools like Elementor and Beaver Builder and just bring it in perspective? Elementor is five years old and Beaver Builder is actually seven years old.

Grzegorz Ziolkowski: Yeah, that’s a lot of time. But I would like to disagree with you because Gutenberg has a lot of offer- 

Birgit Pauli-Haack: No, controversy.

Grzegorz Ziolkowski: It’s, of course, on a different level. What Gutenberg has it’s block style, block variation, block patterns, reusable blocks, custom blocks, dynamic blocks, those are foundations that are in their first iteration. I think that’s something that gives the power to the community to build up on that and make the progress much faster that Elementor or Beaver Builder did on their own developing independent solutions. 

There will be block patterns directory that will allow you to import export blocks and composition of blocks. Maybe it won’t take so many years, as you predict to build that. However definitely, with the frequency of updates, we can see more features built on top of that inside the Gutenberg. But it might be that some of the new tools are adopted, mastered and extended upon. 

Birgit Pauli-Haack: Yeah. That’s fair enough. We have seen the creativity be sparked in the first phase of Gutenberg with some great plugins. But we haven’t seen many themes that yet embrace the full range of possibilities of the block editor. Maybe that group of extenders is not yet ready for it. 

Could also be that just now, the block editor gets a little bit more stable in terms of interfaces and extension. I heard a lot from developers that said, “If I dive into Gutenberg with every update, I have to change my code.” That’s certainly something as well. But we will have that conversation in 2024 again Grzegorz?

Grzegorz Ziolkowski: For sure. Yeah. Also, all this just said reminds me about the rollout of the block editor after WordPress 5.0. It was exactly the same cycle. People waited until everything became stable, tested on production before they jumped in and joined the efforts to build great things on top of that. I completely understand that because nobody wants to redo their work all the time, especially in their case when people buy design, they need to rethink from scratch how they build themes using those new capabilities. 

Birgit Pauli-Haack: Yeah, so I found that was a very interesting conversation to go down that line. I wanted to share this with our listeners. And if you have any questions or suggestions that we should talk about, you can send them via email to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com or just ping me on Twitter. My DMs are open. 

Grzegorz, I know is also open on DMs on Twitter, so send them in. We are here for you. 

Announcements

Now, we have a few announcements. One is there will be a discussion this afternoon and by the time you hear this, the recording is probably already available, and we have it in the show notes. But there is a discussion about a universal theme. So there was a discussion about hybrid themes where classic themes, that’s how they call the old way is classic, I would say vintage, but that’s classic. Other ways that conventional themes can adopt some of the features that come with FSE. And then there was the idea like, a hybrid theme where you can do one thing, but not the other thing.

So the discussion this afternoon is going to be about a universal theme. That’s a theme that works with the classic customizer, but also with the FSE, the full-site editing template block-based functionality and it’s going be a really interesting discussion. It will be lead by Jeffrey Ung and other people from the themes team. I’m looking forward to that. 

And then the other announcement I have is two calls for testing. Yes, there are two now. So Andre Draganescu has a post on the Core Make Block, Help Test the Widgets Editor for WordPress 5.8. He covers in his test instructions, the three scenarios any user could test, like migrating from classic widgets, adding blocks next to widgets, and opting out of the new widget screen with a new plugin from the Core Contributor. 

Grzegorz Ziolkowski: Yes, we have new blocking next to classic editor. Now there will be classic widget as far as I remember.

Birgit Pauli-Haack: Yeah, that’s actually disable the classic… no, enable the… well, or keep the classic widgets. I need to kind of look at the plugin, but we’ll have it in the show notes. I’m a little bit confused now. 

Grzegorz Ziolkowski: Yeah, I think the idea is exactly the same. So you install this plug in and you ensure that the old widget screen will stay on your website. 

Birgit Pauli-Haack: Yeah. So Andre and his peers also urges theme and plugin developers to read the available documentation and suggests that they also tested upgrading from classic widgets to blocks and enabling and disabling theme support for that and of course, third-party widgets compatibility. There are a ton of plugins, thousands of plugins out there that add widgets to a WordPress install. 

Just thinking, the WordPress one, that’s BuddyPress and bbPress and Jetpack, but they’ll also… Like I know that some theme plugins, some donation plugins, all that, they also have widgets. 

Grzegorz Ziolkowski: Yeah, I think it will be quite similar to what we had with metaboxes for Gutenberg initial release. That’s the same set of challenges. I hope that people will report how it goes because that’s essential to make it successful. 

Birgit Pauli-Haack: Yeah. Also, if you have work arounds that you found with your own plugin that you actually share that with a community. Not everybody has to go down the rabbit hole.

And the team recognizes that they are not ready to decide to have the new widget screen, the block post one, enabled in why opt-in or opt-out. They feel they don’t have enough user stories yet to make the decision. If you share your feedback, that definitely gives them a much clearer picture. 

Now, to the second test, it’s the second of those six tests for the full-site editing outreach program. This time, it’s all about creating a landing page. It’s called sticking the landing parenthesis pages. In her post, Anne McCarthy gives us a feature overview and a video of the test instructions, but she has about one to 36 test instructions for setting the scene, creating the template and have various suggestions to customizing it. 

It sounds quite the real life example that we could encounter regularly in our web building journey. Once you are done with those steps, you actually get to create a custom footer and then add a new page and assign a new template to it. Doesn’t this sound like great fun? I learned a new English expression for those who are not listening from the US or UK, stick the landing. It’s all for us. Stick the landing is the expression and it comes from gymnastics or athletic routines when the athlete does a lot of whirls in the air and lands firmly and confidently on their feet. Or an aviator, who executes a flawless landing of the plane. It’s stick the landing. This is….

Grzegorz Ziolkowski: Stick the landing.

Birgit Pauli-Haack: Yes, stick the landing. It’s all part of the service here with the house of useless knowledge. 

Grzegorz Ziolkowski: Yeah. That’s great. Can you tell me where you find all those calls for testing because I’m watching those announcements, but I’m certainly notice not subscribing to the channel that has that all. 

Birgit Pauli-Haack: The widget test is on Core. 

Grzegorz Ziolkowski: I saw that one. But the other one-

Birgit Pauli-Haack: That is shared. The other one is on the team test. Make.wordpress.org/test. You find all the things from the FSE testing sCore. That’s also where Anna McCarthy publishes the summary of the feedback that she gets. Those are great way to, to get a little bit into the inside baseball of developing the future but it’s certainly interesting too.

If you want to keep up with Gutenberg and you’re not necessarily binged, listened to all the Gutenberg Changelogs, there is a page on the Core handbook under resources. It’s called Keeping Up with Gutenberg Index Page. It lists all the posts from the various teams that deal with the block editor. That’s Core, that’s design, that CSS, Core CSS, that’s Core editor, of course, and there you can read up about the kind of the week. Of course, I’m going to share this also in the show notes. 

Grzegorz Ziolkowski: Yeah, this one is very helpful. 

Birgit Pauli-Haack: We all try to keep it up so it’s kind of up to this date. You see yesterday’s post all in one screen, so you don’t have to… because Core is a very busy make blog. And if you scroll through that, it’s going to be hard to find the latest Gutenberg related ones. And other teams have the same thing. All right. 

What’s Released – WordPress 5.7.2

We are now in our section what’s released, and yesterday, WordPress 5.7.2 was released as a security and maintenance release. I would want you to stop listening to this change log, we’ll wait for you, and update all your sites. Go now! Okay.

Grzegorz Ziolkowski: Probably, it’s also good to enable auto updates and don’t care about that anymore in the future. 

Birgit Pauli-Haack: Good point. Good point. Thank you. Do you want to start with Gutenberg release?

Grzegorz Ziolkowski: Yeah.

Birgit Pauli-Haack: Okay.

Gutenberg 10.6 Release

Grzegorz Ziolkowski: This brings us to the Gutenberg 10.6 release, which was led by Koen Van den Wijngaert. This is a community member that stepped in and helped with the release. It was the second release that was led by someone outside of the Gutenberg Core team. In the previous Gutenberg series, that was Ajit Bohra. 

That’s amazing that we finally get help from the community surrounding all that work, because that takes a lot of time. Big shout out to both of them for helping. I also wanted to remind that this is the second to last plugin release before feature freeze for 5.8 release that is scheduled for May 25. 

Birgit Pauli-Haack: Well, the overall feature freeze is May 25. But it’s a week earlier for Gutenberg because everything that needs to get in there needs to be in 10.7 release candidate, and that’s released on May 19. That’s the feature freeze for that. 

Grzegorz Ziolkowski: Yeah, I mean. From my practice we will do all we can just to ensure that all the features we plant are included so we can add them a bit later. But they are of course, as you said, the first of the plugin will be almost a week earlier. 

Birgit Pauli-Haack: After that, only comes bug fixes and, “Oh, I did this wrong,” kind of thing. 

Grzegorz Ziolkowski: Yes, because the plan is here is that in the next two weeks will be spent only on bug fixes. Starting from the beta, we will only add fixes to the bugs found during the testing. That’s something new in WordPress Core and we are trying this approach to ensure that everything goes according to the plan. 

Birgit Pauli-Haack: Yes. If you follow along, beta one is scheduled for June 8. There is between the feature freeze May 25 or May 19 for the block editor to July 8, that’s the two weeks you’re talking about.

New Features 

Grzegorz Ziolkowski: Yeah. Now, it brings us to the section, what’s actually in that release? And we have a lot of features to cover this time. It’s really amazing. Why I’m starting with the killer feature, in my opinion, which is duotone block supports. It’s something that you can enable. It’s still experimental. However, users will be able to use that new feature. What is it about? So first, big shout out to Alex Lane for working on that one. I know because he works at Automattic, that he spends a couple of months preparing that. Code-wise, it isn’t like a big change but it opens a lot of possibilities for users. 

It adds those filters to the images inserted in the block editor. It’s similar to how gradients work at the moment. But it’s so much nicer because it allows you to apply filters on top of images inside the image block or the cover block at the moment. The idea is that you have this picker that allows you to pick two colors and it applies something amazing. Can you help me Birgit? I don’t have words to say.

Birgit Pauli-Haack: Well, it has… duotone as you said, it’s all about filters. And if you use Instagram, you have probably experimented with some of them that now come to WordPress. The duotone means two colors pretty much and it will change the shadows and the highlights of your pictures and applies those colors. You can have a duotone with white and black. So it’s a black and white, but kind of fake picture. 

But if you have for instance with a yellow and purple, then all your highlights on yellow color and then your shadows are in purple color. But what’s also quite interesting and powerful here is that they’re all SVG-based filters. They don’t take a lot of time with the processing. 

And of course, every new feature needs a way to switch it off. You can control those presets in the theme.json file, which also, and we’re going to talk about it later, came out of the experimental phase. So ready for 5.8. Yeah. So the-

Grzegorz Ziolkowski: Yeah.

Birgit Pauli-Haack: Go ahead.

Grzegorz Ziolkowski: Just to add on that, so it’s similar also how you can control gradients. So you can define your own presets for duotone. That’s also interesting that the theme author have control over that and provides some consistent way of styling the site. 

Birgit Pauli-Haack: Yeah, yeah. I think it’s really good for featured images that kind of get them to match your style of the whole site. I’m really glad that this comes in. I tested it and I really like it. I can play around with it for hours.

So the next thing is the one PR that stabilizes the theme blocks that are prepared for the 5.8 release. What are theme blocks Grzegorz?

Grzegorz Ziolkowski: Those are blocks that you would use when you want to create like layout for a page. By page, I mean the whole canvas that you see on the side. It’s in contrast to the page content, which is only the thing that you would edit in the past, in the classic editor and now in the Gutenberg. But it also contains blocks related to how you would like to present your content.

Like this is post title, post content, post date, excerpt or featured image. But this also contains everything related to the query block which contains a lot of child blocks like loop, title, pagination and different variations of pagination, which allows you to display a list of posts. There is also something you would usually use inside the header which is site logo or tagline or title. Those blocks will be enabled. Now, they are available inside the Gutenberg plugin but now they will be exposed to the WordPress Core. 

Birgit Pauli-Haack: Right. Yeah, not all the theme blocks that are available in the Gutenberg plugin will make it into 5.8 of Core. We now have the list that we will kind of push over to the documentation team and say, “Okay, these are going to be the interface of changing additional blocks in there.” Also, coming to 5.8 is the login, logout block that themes would use to enable administrators, editors to log out of their site from the front end. 

All right. The next feature is to display most terms in the term selector that’s for the sidebar in the categories and tags sections. There is now a feature that shows or section where it shows the 10 most used terms for fast selection. Similar as was a thing in the classic editor as well, that comes back as well. 

Grzegorz Ziolkowski: It took a while to backport. 

Birgit Pauli-Haack: Yeah. I think that’s okay because you learn a lot when you say, “Okay, this is missing.” And how do you rethink something from new? What if I wanted to do a new, why would I change it there? Because that’s part of deciding on what is legacy and what doesn’t come over as the… and I think the widget team went through that kind of thinking quite a bit in the last year because otherwise, the widget screen has changed quite a bit in what is possible and what’s not.

Enhancements

All right, so for the enhancements, the block editor added, border support, spacing support. Spacing support means you don’t have to use the space of quite so much anymore. You can use the padding that is available for certain blocks.

Grzegorz Ziolkowski: That’s a huge change. There were so many complaints about the spacer block that exists in the first place. But it’s finally something that we can solve because of global styles and the progress on that project. I hope that in 5.9, WordPress major release, when we enable all the UI for all those controls, that will be the moment that when everyone would be able to achieve all the goals without using CSS. Let’s say in most of the cases, because there is always something you need to apply with CSS. 

Birgit Pauli-Haack: Yeah, yeah. I actually tested both features, the duotone as well as the padding. I like how you can say, “Okay, one padding 25 pixels around everything,” or you can say, “I want 45 on top, 25 on the bottom and left and right, I want 35.” You can unlink and that’s just a little small button in the interface, but don’t overlook it. And then it gives you more control over the sides and the padding of each side of the bucks pretty much. 

We will have in the show notes also a link to the updated documentation of the theme.json file, what can be in there, how it’s formatted and all that. It’s very interesting for….

Grzegorz Ziolkowski: Yeah, I guess this documentation is still very in progress because there are so many updates happening. It takes some time to include that into this documentation. It’s very long already. 

Birgit Pauli-Haack: Yeah.

Grzegorz Ziolkowski: That would be quite important place to start tinkering about themes.

Birgit Pauli-Haack: Yeah, but I like it how it’s broken up in various sections so you can find out pretty quickly. 

Now the block library, so the additional enhancements to existing blocks and I like very much the table, border block support, the border support as well as the color support. So you can not only change the border’s color and size of it, but you can also change the colors on the background and everything. The table block becomes quite a very useful tool not only for display, as well. 

I’m reminded sometimes of the early beginnings of the web where you had to do columns and tables. Don’t go back there. 

Grzegorz Ziolkowski: I remember that. Yeah.

Birgit Pauli-Haack: Yeah.

Grzegorz Ziolkowski: It was 20 years ago, I guess.

Birgit Pauli-Haack: Yeah.

Grzegorz Ziolkowski: That is how I started doing web development with tables everywhere. 

Birgit Pauli-Haack: Yeah, me too. Me too. Yeah, I still have a site that’s out there that I haven’t updated since 2002. But that uses that heavily. 

Then the query block got some enhancements as well, like a wrapper and the line support and it now has a spinner instead of loading pics. So some small things and some big things. 

Grzegorz Ziolkowski: Yeah. There’s also components. We have a lot of changes happening there. It’s related to the project of improving the way you compose individual components. It’s very necessary to make this type of flexibility to build UI for global styles because there are so many new settings there. We want to have the flexibility to presenting in a more structured way. That’s like the foundation for that. We had a lot of changes in that area and it’s mostly to align the prototype that was built before by John Q.

Now, the work is pivoting towards using native libraries that Gutenberg has and ensuring that it integrates nicely. Yeah, it’s something that you should still consider experimental about it will be exposed to the wider audience as soon as we start working on the UI on global styles. 

Birgit Pauli-Haack: Yeah. Just to forward for listeners of last year, it’s the G2 Project that John Q had. The prototype was that the new components can be reused for plugin developers and you will have… They are out of the box as much as possible accessible and responsive. He had created a whole set of components that now come in. There won’t be nothing in 5.8 for that and it might come into 5.9, which is in December, but it might even take until 2022.

Grzegorz Ziolkowski: I wouldn’t be surprised. 

Birgit Pauli-Haack: Yeah. It’s an ongoing project. And it’s also a huge add to kind of change out all the components and work in but when it’s done, it’s a consistent way of styling and a consistent way of putting those together. 

Grzegorz Ziolkowski: Yeah. So just to add on that, the whole idea is that individual components, as you said, there are responsive, which means that they will adjust how they display depending on the size of the placement. You have them. If they are in the sidebar, they would render differently than when you would have a larger Canvas like in the mine area of the site. The prototype contains around one hundred components. That’s why it will take a lot of time to integrate that.

Birgit Pauli-Haack: Yeah. Awesome. If you want to contribute to that, we certainly can hook you up to the people who are doing it now to train you and to make this happen. 

Another enhancement, we’re still on enhancements is that there is now an experimental utility that allows you to fetch a remote URL from the REST API and then display that in a block. It’s very experimental because right now, it only pulls in one parameter and that’s the title. But check it out. It’s PR-31085, 31085, they’ve had a prototype up there. So it will enable you to have other people’s titles or from a WordPress site, other REST API information come in into your site with a block. 

Grzegorz Ziolkowski: I just checked that one. It looks like it’s necessary for the link insertion. When you insert the link, it will show you the title of the page. That’s really nice to have. 

Birgit Pauli-Haack: Mm-hmm. Yeah. But it can be used for a lot of other things as well. Every time I hear REST API, I said, “Oh, integration,” with other things. And then kind of my mind goes all the way some other places. 

There’s a small change on the interface. On the top toolbar, there is this pencil icon, and now where you can change the modes between edit and select. This icon is now called Tools. That renaming. So that’s where that went, just in case you were looking for it. 

And then there is the next enhancement is something I really love is the suggest block patterns in block placeholder states. That’s just for the query block, right Grzegorz?

Grzegorz Ziolkowski: Yes, we discussed that in the past maybe about the progress of development and now it’s final. It’s only for the query block for now. But it’s something that you know, if it clicks, that we could start using that for other blocks and maybe build even an API that will allow to integrate that easily with other blocks. 

Birgit Pauli-Haack: Yeah, so what happens is you select the query block to come into the template or the page, and then it suggests different kind of patterns you want to organize the posts in that. It displays it in your themes colors, not sure if that is just because it’s the color of the TT1 block or the 2021 theme that matches up, but it’s very slick. You don’t have to come up with the creativity part where you say, “Okay, I want the title here and the feature picture here and then the excerpts there, and then the tags.” So you’ll get a list of different formatting and layout suggestions with the query block. That’s very nice. Kudos to Nik Tsekouras, who worked on this quite a bit. 

Grzegorz Ziolkowski: Yeah. There is one very technical change, which is the change doc, the template editor will be inside an iFrame. And it’s similar to how the site editor works. You probably don’t know about that. But it’s something very important for plugging outdoors that build blocks because that might have some impact on how CSS works, maybe also on some JavaScript, if your block uses that.

I encourage all the blocking authors to make sure that their blocks integrate nicely inside this template, building screen. And reach out to us if you find any bugs so we could fix them. I think that’s something that will eventually land inside the post content editor as a last step, but we are just trying to do small steps to ensure that we don’t break anything. I think this order of adding this integration works so well because we do have many reports for this side editing context.

Birgit Pauli-Haack: Yeah. And I think when we… yep, go ahead. 

Grzegorz Ziolkowski: Yeah. I also wanted to share that kudos to Ella van Durpe because she spent months doing refactoring to get us to this point. It’s a massive amount of work that was put to make that happen. 

Birgit Pauli-Haack: Yeah. I can see the benefits of this can be further in the future, because now that’s an iFrame and everything works in iFrame, you can use the block editor also in different other in other contexts. So you could, for instance, actually put them into a dashboard widget. There’s word again, that’s dashboard widget, when people log in, then they can just kind of get into the editor and do some new writing or something like that. That comes to mind immediately.

Or if the block editor is used in a different content management system, it’s probably easier to integrate it with an iFrame than was pulling it in the JavaScript library. All that. 

Grzegorz Ziolkowski: Yeah. I think that the biggest challenge that we had so far was all the CSS handling because WordPress provides inside WP admin, a set of default CSS styles that we had to reset before going back with applying that. And sometimes those resets didn’t work because new styles were added. That prevents all that set of complications happening. 

Birgit Pauli-Haack: Excellent. Excellent. Yeah. All right. The site tagline and the site title blocks, they got also equipped with padding and also with letter casing. So now you can have a choice between all caps or all small letters, or title case or sentence case. Yeah. So this is important for people who are kind of opposed to do all caps and want to change it when they get it offered. Yeah. 

APIs

So what are the new APIs that come in, Grzegorz? 

Grzegorz Ziolkowski: Yes. We have three of them and one of them is JavaScript-based API, to register blocks, using block JSON format. So this is the bridge, PHP and JavaScript. So you can share the block JSON and load that on the JS site. It’s probably something that most of the block authors won’t need. 

But I want to highlight that there is this method register block type from metadata. That could be also… that too could also change. We could merge everything inside the register block type on both the server and the client to make the documentation efforts easier for you, Birgit, and the rest of the team. 

Birgit Pauli-Haack: Well, thank you. 

Grzegorz Ziolkowski: Yes, yeah. And the other change is pretty simple, but also related to block JSON. And so far, it was quite hard to register block variation on the server because one of the attributes is active, could be only represented as a JavaScript function. So what we did is that you can provide an array with the list of attributes you expect for a given block to determine whether the block is active or not.

Let’s give an example. If you have a block that has attribute type and you give the type YouTube, as let’s say for the embed block. So when this attribute is equal YouTube, then that will display the icon for the YouTube and so on. And that’s a way to make this API simpler.

Birgit Pauli-Haack: Excellent.

Bug Fixes

Grzegorz Ziolkowski: And now we can move on to bug fixes. And there is 28 of them. I personally didn’t watch the space so far. I was so busy working on integration on the WordPress Core site. Is there anything that you found interesting? 

Birgit Pauli-Haack: Well, on a quick review here, I found that the button block now has the 100% width fixed, so it plays well with other buttons. That was kind of a quirk that you had to work around for it when you have a row of buttons. The ListView got quite a few improvements in the site editor. But once they are kind of finalized there, the ListView is the previous block navigator from the toolbar with three lines there.

In the site editor, now you can see it color coded. So if you’re in a template part and it gives you color coded all the child blocks in there, we can certainly use that also very well on the post editor. But right now, it’s tested for the site editor and we’ll come to the post editor in a bit. There were some bug fixes for the themes. And especially one that the Core block styles should not override the user added inline styles and obviously did before and now the user has precedence over a Core block style. 

So that is a relief. That’s a good change. 

Grzegorz Ziolkowski: Yeah, I found one. So this is for the post content block. Actually, that one was fun. So the way everything works is quite complex, technically, but you could run in feed recursion, when search inside the post content, the query block that will contain the post content will just create this mirror effect when you use two mirrors and you see DB side and that’s now fixed. And this is like third fix for blocks. So the other ones in the past were for the template part and for the reusable block. I hope that that’s the last one.

Birgit Pauli-Haack: Yeah. But was it a year? Maybe it’s about two years ago. Yeah, we found that infinite loop, when you create a reusable block within the reusable block, it wouldn’t take long and then your memory would kind of crash on the browser. 

Now, the error message I ran into this when I was testing it, that block cannot be rendered inside itself. Yeah. Preventing an endless loop is a really good fun thing to do.

Grzegorz Ziolkowski: Yeah, I think by design it doesn’t look good on the UI. So just make sure that nobody tries to publish it on production. 

Birgit Pauli-Haack: Yeah. 

Performance

Grzegorz Ziolkowski: Speaking of memory issues, there was one important performance change. One thing that the Core team noticed in the recent, after several plugin releases is that the performance has gone in the wrong direction. The time started to rise. So Riad Benguella, he started investigating what could be the issue. He found that the 15 lines of code improves the performance about 10 to 20% depending on the metric. That’s a lot. This brings key press event. So this is the way how fast you can type, that it’s faster than WordPress 5.7 series despite even all the new features that were added to the editor.

Birgit Pauli-Haack: Yeah. And on the Core block, you remember, there’s always a performance benchmark and you can see this quite a bit how that changed. So the performance benchmark is that the test is with a particular sizable post. And that’s 36,000 words and a thousand blocks. And then it measures two thing so 36,000 words, that’s kind of a book, right?

Grzegorz Ziolkowski: Yes.

Birgit Pauli-Haack: And it compares loading times and WordPress, 5.7 has a 5.6 second loading time, milliseconds. And that is still a little higher with Gutenberg 10.6. But the key press event, the time that it takes so you can actually type is now less than, as you said, WordPress 5.7. With all the new features and the new panels that come in, that’s quite an improvement. Yes.

Grzegorz Ziolkowski: Yeah, I think the loading time, it’s expected that will take longer because of all the new block patterns. As long as they are inside Core, it will be slower.

Birgit Pauli-Haack: Thank you for reminding me the block pattern directory actually has a second set of designs that’s on the meta team. And they will… how it’s going to look when you want to submit your block pattern to the directory and so there’s quite some work still to be done to actually get it ready for 5.8. We’ll see how that progresses. I will dive in to that later next week to see how that works out. But then, once the block pattern directory, all the Core block patterns will be removed from the Gutenberg plugin and Gutenberg Core and will all be placed in the pattern directory. The wait is later. 

Experiments

Which brings us to the experiments and experiments of… now, with template editor out of it. We only have three experiments now. One is the block based widgets still in experiments, but testing is on the way. There are some….

Grzegorz Ziolkowski: Yeah, I highlighted one item which I find very interesting there is that there is no convert to blocks button for the text widget. So those are legacy widgets. So it’s very similar to how the classic block works. You are using some HTML code and then magically transform into blocks.

Birgit Pauli-Haack: Yeah, yeah. And there was an additional widget, I don’t know when it came in to WordPress, it’s called Custom HTML. And when you change your text widget that has a lot of HTML in there, it will remind you to use the Custom HTML. Now, you can kind of jump over that step and just convert it to blocks and I really liked that.

Grzegorz Ziolkowski: I have also another one. This is for global styles but in general for block editor setting. There is ongoing work on a REST API endpoint that is going to expose all the block editor settings. This particular was done by Gerardo Pacheco and he’s working on the mobile team that builds native apps. This is where it’s going to be tested first. That will be also great for all the sides that want to build some custom version of the block editor, then they will be able to take advantage of that. 

This will contain also a context. This will allow you to customize those settings and provide filters on top of that. I’m really looking forward, how this evolves, because this will give a lot of possibilities. I personally hope to see the publishing of comments with Gutenberg in the future. That’s definitely a step towards that.

Birgit Pauli-Haack: Yeah, yeah. But I also can see that the plugin developers would like if they want to grant a little or React, whatever they building to make it happen to see if something is enabled or not enabled in the block editor and then they can much easier figure out if they can offer that feature or not, whatever they are building. It’s a good step to not only for the cross team collaboration with a mobile component, but also for a plugin and theme developers to have access to that.

Grzegorz Ziolkowski: Yeah, that’s a great thinking. I didn’t consider that. You can check the list of allowed blocks and do some computation based on that and display different UI’s here.

Birgit Pauli-Haack: Yeah. Well. And now we come to the big, big feature. It’s renaming Experimental.json to theme.json, and have a fallback for backwards compatibility. So that’s pretty much the start of theme integration for block based templates and other things of the same json for your themes. 

Grzegorz Ziolkowski: Yeah. I mean, the change itself in the code, it was like five lines maybe tops. But it’s important because that means that the theme.json becomes a stable API. So from now on, we can expect that whatever is in the documentation and is supported in this format will stay like this forever. All right. This is how it works in WordPress.

Birgit Pauli-Haack: Yeah. And that when changes are necessary, they are highly discussed and followed about and then have backwards compatibility, building to any change in certain ways. That’s how WordPress wanted to work. Yes. And then for the navigation editor and block, I’m sure there are quite a few changes but we’re going to skip this for now. 

You’re definitely welcome to work with that. And I’m sure they will, after 5.8 comes out. The next big call for testing will be the navigation editor and the navigation block. But it has been quite the journey for the team to get this functional. They are of course not yet ready for 5.8. We’re going to skip right to the documentation section.

Documentation

Grzegorz Ziolkowski: Yes. And there are 13 items on the list. I have one big announcement. We dropped support for IE 11. There is no longer support for Internet Explorer in the block editor. This means that it also will be moved to Core. In WordPress Core, you won’t be able to use the Block editor. I guess unless someone will be able to provide some layer that polyfills all the features, but it’s probably impossible at this stage.

Like on this, there is also similar change. Because of that, we also change the minimum supported version of Node JS to version 12, which is the lowest activity supported version by the Node JS project. That was also the change that happened at the last day of April. We just align with that. That’s important to notice. If you are consuming WordPress packages, you need to update your Node versions to 12 or better, 14 or even 16.

Birgit Pauli-Haack: Yeah. And so the documentation section also reminds us that there is a full-site editing document out there. Of course, the definition for the theme.json settings and global styles, the documentation, I think is now up to just three days ago. 

That was the latest change. We will link to add in the show notes so you don’t have to hunt for it. And then there’s what they also reorganized is the update and organizing of the block theme documentation. That is going to be ready for 5.8 as well as the block patterns documentation for the block directory. That’s in the handbook.

Grzegorz Ziolkowski: Yeah. I expect more movement in the documentation area just after the feature freeze, because this is when usually all the dev notes when they are compiled. That also means that there will be improvements or recommendations. Those two align.

Birgit Pauli-Haack: Yeah. If you are listening and you are part of the documentation team or want to be on the documentation team, on the block editor documentation team for end user documentation, we still are looking for contributors who want to take on and change some of our documentation to reflect the new features. We will have a sprint on Thursday, May 20, one day after release candidate 10.7 is out, where we go through all the release notes from 9.9 to 10.7 and look at the features and the enhancements and see what is the end user facing or interface facing so we can align them up with our Trello board. 

Just ping me on slack, if you want to be part of it. We will get you to the new contributor onboarding kind of place and see how you can help. Yeah, we need all the help we can get. I looked through the Trello board and I saw some of the pages and still hasn’t been updated to 5.5. It’s 5.5, 5.6, 5.7, 5.8. Not every version actually has changes but that’s certainly something we need help with. All right, that brings us to, Grzegorz, anything to code quality section on the components.

Code Quality

Grzegorz Ziolkowski: There’s 35 items on the list.

Birgit Pauli-Haack: 35. Wow.

Grzegorz Ziolkowski: This release is also huge. I think that PRs is….

Birgit Pauli-Haack: 216.

Grzegorz Ziolkowski: 216, it’s a big number of changes. I don’t have anything specific highlighted here. One thing that we talked about digital components, like the code name and the project. So there’s a lot of progress on that one that was mostly about removing the references to the prototype that we are using. Now all the code that is used is all everything is now inside the Gutenberg repository, which is a good step towards, and we have like 2020 or more components already there. 

Some of them were promoted to experimental. They are exposed from the WordPress components package, which means that inside the Gutenberg plugin, you could use them in theory. They are just prefixed with __experimental and they can change. So I’m just warning upfront about that. It’s the usual way we expose something that is still in progress so we can use in other places inside the block editor and validate our assumptions that we didn’t do something that is unusable or something like that. It doesn’t scale. There are a lot of….

Birgit Pauli-Haack: Yeah.

Grzegorz Ziolkowski: We’ve been very cautious about introducing new APIs, after WordPress 5.0, the initial release when we had to accept some design mistakes for the code. And now we are doing on a much slower pace.

Birgit Pauli-Haack: Yeah, it’s an ongoing effort now. I like that. You’re not only changing one thing, but when you expose it with the experimental flag, you can also as I said, check if other things break when you use it and replace things for it. It’s a very cautious way. Yes. That brings us to the tools section. 

Tools

You highlighted that the remove for support for IE 11 from the tool section actually brings a reduced build size by 6%. That’s way more than the rate of Internet Explorer people out there.

Grzegorz Ziolkowski: That’s a good point. I didn’t think about that this way. But yes, it’s like point eight or even less last time I heard about that. But this says around 100 kilobytes after all this magic and stuff like this. There will be there will be a bit more because there is also polyfills that is a solution that allows you to make a feature work in the browser that doesn’t support it yet. So if you have new web API, if there are smart people that come up how to build that feature before it even exists in the browser. That’s another way where we’ll be able to save some bytes.

Birgit Pauli-Haack: All right. I think that brings us to the end of going through the change log for the 10.6 plugin. 

What’s in Active Development or Discussed

We want to also talk about things that are in active development or discussed and we have, I think, four of them that we want to point out for you. 

One is the merge of the Gutenberg updates of 10.6 will be already coming to Core. Ahead of the 5.1 have, of course ahead of the 5.8 release, but also ahead of the feature freeze, because the last two releases, you have been working, Grzegorz, on the merging things to Core off from the plugin 10.4 and 10.5. 

When do you think….

Grzegorz Ziolkowski: Yes.

Birgit Pauli-Haack: Yeah.

Grzegorz Ziolkowski: I started also working on 10.6 today and it requires some more work this time, because we move more features that are based on PHP, which is much harder to backport to Core. That’s one thing. And also there is an issue created by Riad Benguella that contains all the steps necessary to get us to WordPress 5.8. Those tasks are all changes, like bringing all the infrastructure for Team JSON, the team blocks, this is what I’m working on right now. 

All the work necessary for the widget editor and for the template and the taking the post editor. There is more. So definitely, if you want to see what’s in works, check out this issue.

Birgit Pauli-Haack: Excellent. Yes, Riad Benguella also posted on his private blog, An Introduction to WordPress Global Styles and Global Settings. It’s on his private blog, because it’s not officially part yet. And it’s just part of the experimental phase and the Gutenberg plugin and won’t come to WordPress in siphoned age. But if you want to read up about it and get prepared for it, it’s an excellent tutorial and information about how the global styles will work and how the global settings will tap into that and also have the technical documentation around it. We will have the link in the show notes so you can study it.

Grzegorz Ziolkowski: Yeah. Just one correction, I think that some of those features will be in 5.8 WordPress release. The issue that I saw was that some of the names are still experimental. Until everything is sorted out, he didn’t want to make it an official document. I’m sure that he will bring that to the WordPress documentation as soon as clarified how it will work.

Birgit Pauli-Haack: Yes, thank you for setting me straight. Then, of course, we talk all the whole episode about theme.json, which comes into 5.8 and that’s part of the global settings and global styles. All right. Yeah.

Grzegorz Ziolkowski: So there is also one important change that landed in WordPress Core in the trunk, which is the development branch. This enables pretty nice improvements for styles related to Core blocks. So Ari Stathopoulos has been working on that feature for quite long. And it contains two separate features that combined together and do magic. 

So let me explain how it works. So first of all, each Core block will have their own file with styles. There will be an opt-in flag with the PHP filter that will allow the team author to say that I want to use this feature.

What we’ll do is that if you render a post or page and it contains blocks, it will only pick the styles for the blocks you actually use. We dramatically reduce the size of the styles loaded. And there is a second part to it, which makes it even more appealing because now you could end up loading like 50 files for every block. So there is another filter that allows you to change the threshold for which those types would be inline into the HTML documents. 

It set at 20 kilobytes, but every theme author or site owner can change that. And it will ensure that the performance boost gets also from the fact that those styles don’t get anchored in the individual files. So big shout out to Ari for spending a lot of time tinkering and implementing that feature.

Birgit Pauli-Haack: And getting it in there for 5.8. Excellent. We will share, of course, the GitHub repo for that where he has more detail explained. You can kind of follow up on that. That brings us to the end. I have only to remind everyone, there are two calls for testing. One to test the widget editor and the widget screen and the other one to stick the landing for the landing pages on the front side editing for the template editor. As always, the show notes will be published on Gutenbergtimes.com/podcast and this is #44. 

And if you have questions and suggestions as I mentioned before or news that you want us to include send them by email to changelog@Gutenbergtimes.com. That’s changelog@Gutenbergtimes.com and that’s it. That’s a big show today, but we had a lot of features to go through. 

Thank you so much, Greg, for putting that all together and helping during that part with explaining all the technical underpinnings of it. 

I say goodbye to our listeners until the next time.

Grzegorz Ziolkowski: Thank you Birgit. Yeah, that was a great show. I’m looking forward to the next one that will conclude all the preparation for WordPress 5.8 release. That will be a great one to reveal what’s actually getting in there. So see you in two weeks. 

Birgit Pauli-Haack: Stay tuned. Bye-Bye. Take care.

Grzegorz Ziolkowski: Bye.

Birgit Pauli-Haack: Bye.

Leave a Reply

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