In this episode, Birgit Pauli-Haack and Mark Uraine discuss updates to the Full-site Editing experience, and the releases of WordPress 5.7 Beta, Gutenberg 9.9 and WordPress 5.6.1.
Full-Site Editing Outreach
Block Manager Enhancements
- Full Site Editing and Themes: where things are by Josepha Haden
- On WP Tavern Justin Tadlock went into more details.
- Full-Site-Editing MVP & Ultimate Resource List
Customizer and block-based Widget by Kai Hoa, now merged.
Recording, transcript and resources are now available: Live Q & A: Updates to Full-Site Editing and Block-based Themes
Sponsored by Pauli Systems
Birgit Pauli-Haack: Hello, and welcome to episode 37 of the Gutenberg Changelog podcast. In today’s episode, we will talk about the full-site editing, WordPress 5.7, Gutenberg 9.9, and there’s actually also a WordPress 5.6.1. Lots of releases. 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 today? Happy Friday, no happy February.
Mark Uraine: Yes. Happy February for sure. I’m great today Birgit. I’ve become a big fan of Brandon Sanderson’s Stormlight archive series. These books, they are big, thick fantasy novels, but I’m on the third book right now called Oathbringer, and I’m really enjoying the series. If there’s any sci-fi or fantasy novel people out there, Brandon Sanderson has done a great job with these.
Birgit Pauli-Haack: All right.
Mark Uraine: How’ve you been doing though?
Birgit Pauli-Haack: Oh, I’m good. Time flies though. Florida was cold. Well, but everybody else was covered in snow, multiple feet of snow. We have cold weather and storms here, so I stayed inside a lot.
Mark Uraine: Birgit, I’m going to up you one, we have sunshine and beautiful blue skies over here in Southern California right now.
Birgit Pauli-Haack: Oh, good for you. Yeah, temperature today it was better and it’s up into the 70s again.
Mark Uraine: Oh, nice.
Birgit Pauli-Haack: So Floridians get cranky when the temperatures go below 70s. Everybody’s mood increased and I have been working on client projects. We are getting sites ready for training next week. So it’s quite an interesting week for us.
Mark Uraine: That sounds great. Okay.
Well, we have a couple of announcements today. Don’t we? Anne McCarthy has published a couple posts recently. In one, she’s calling for questions on full-site editing. So if you have an opportunity to head over to that post, and it’s on the Make Test blog, and it’s great opportunity to ask or submit some questions, and she’ll be posting those questions along with their answers later on, on that same blog I believe.
Birgit Pauli-Haack: Yeah and that probably came out of the live Q & A that we did a week ago.
Mark Uraine: That’s right.
Birgit Pauli-Haack: Yeah. And we had a lot of questions there, and she also wanted to go back and find some official answers for that. But it’s definitely good for any questions that you have to put in there and get them answered. So there’s a big FAQ coming up.
Mark Uraine: Yeah. Did you notice were there a lot of questions regarding full-site editing when you had that live Q & A?
Birgit Pauli-Haack: Yeah. Well, we also had 60 people in there, so it was a very well attended live Q & A. So there were quite a few questions. Like how can we narrow down that people are not messing with my design, with the global styles and all that?
Mark Uraine: Oh, yes. That is a big one.
Birgit Pauli-Haack: That’s a really big one now. So Anne and Carolina and Ari, they all kind of pointed to the fact that you need to first open it up, and then you can put in the switches to close it down again and make it work for those that kind of have all the access and the permissions are not in yet for those that don’t have permissions to admin a site, you won’t have permissions to change to global styles.
Mark Uraine: There you go.
Birgit Pauli-Haack: Yeah. But it’s certainly something that a lot of designers are worried about and I would be too actually, but….
Mark Uraine: The other post that she shared was one about the FSE program testing the FSE or full-site editing any time. So just as some of the posts that are calls for testing for the program may not be going out, there’s always an opportunity or a way to test full-site editing. And she links to that in her post to an article that really outlines how to actually go through and set up full-site editing on your WordPress installation and give it a try.
Birgit Pauli-Haack: Yeah. It’s very detailed instructions when you follow the link from the post into the handbook, and then she has the step first set up your site and then explore and test different features that anyone can test, and then also a list of test things for theme authors and plugin authors as well. So she gives some great instructions there or just ideas, what to test for.
Mark Uraine: Yeah. Excellent.
Birgit Pauli-Haack: Yeah.
For the community contribution, I wanted to point to a plugin called Find My Blocks by Eddy Sims. And then it comes out of an experience that I had two weeks ago, maybe when we took a website that we were working on and staging, and there were three people, a content creator, I was messing up things, and our designer was working on it and we all have our favorites, what we use as block collections. And then we took it live, and then we said okay, so maybe we need to consolidate some of the things because it wasn’t a very big website. And I found we used four different post grids, and we said okay, let’s consolidate that and use one and I needed to find the posts where that post grid was in there.
So I used the Find My Blocks for it and that was nice. It was really great. And then tracked down actually, a GitHub issue where they’re all talking about block manager enhancements. I shared my experience and also that it would be really helpful to have, when you switch to the block manager right now, only lets you switch on and off usage of blocks. But how can you make an educated decision on that if you don’t know how often it was used or where it was used or something like that.
And you can switch off actually the core blocks because if you say, okay, the core blocks I won’t take them off, so you’ll only see the plugin ones. And on the site, we had 148 blocks and of course I actually removed two block collections, and I didn’t look at the list of it, but yeah, all the blocks were for one block collection, and then we just adjusted the style sheet for it a bit. But I really would like think that something like that should be in core, so you can see that.
Mark Uraine: That’s a good call. The block manager, that seems like a really good place for that. Even if it’s just somehow highlighting whether or not that block is actually in use anywhere on the site, right? Or listing the number of times it’s used or something. Just that alone is helpful.
Birgit Pauli-Haack: Yeah. Because you can then with the search on the post list or the page list, if you search for the block, you can actually list all the posts or pages where it was used, but you need to know which one you should be looking for. So having that coming from the block editor would be really good.
Mark Uraine: And so….
Birgit Pauli-Haack: Find My Blocks by Eddy Sims.
Mark Uraine: Yeah. Find My Blocks. Good plugin. Okay.
WordPress 5.7 Beta 1
So what’s been released these last two weeks? We have a few things as you mentioned in the intro. First one we’ll talk about is WordPress 5.7 Beta 1 has been released and this includes a number of items. We’ve got the buttons block like overhauling the alignment and justification controls on the buttons block, adds variations for vertical layout and width selectors. The code block adds support for font sizes. Now you all probably have heard us mention these things in the past Gutenberg releases, but these are the new items from Gutenberg that are actually going into 5.7 now. Cover block has a full height alignment control list block, adds font size support.
Of course, as we all know, the social icons block saw a lot of revisions through the last few releases. Some addition of Patreon, Telegram and TikTok icons. The spacer block uses a semi-transparent background now. They add block variations and transformations to these and allowing dragging blocks and patterns from the inserter into the canvas. All those things, great things are going into WordPress 5.7 when that’s released. And of course to see all those features that will be included, just take a look at the past Gutenberg release posts from 9.3 on through 9.9.
Birgit Pauli-Haack: Yeah. And those are not the only things that come to WordPress 5.7. Of course, there are other things and we will link the make blog update for that because there’s lazy loading of high frames, migrating from HTTP to HTTPS is streamlined, standardizing the colors for the WP admin CSS to a single pallet. That’s huge. I think they eliminated a hundred, many colors and then a cleanup after jQuery 3.5.1, a new robots API. So it was just kind of there’s a lot of things going on besides the block editor. Just so you know.
Mark Uraine: Very true.
Birgit Pauli-Haack: Now that we know what’s in 5.7 also, I wanted to point out that what’s not in it and that’s the widget screen. It has not been merged with core yet. When it was punted from WordPress 5.6, the reason was that the block-based widgets would not work well with customizers and before they work in the customizer, the team needed a few weeks to also work on the backwards compatibility for existing themes and plugins. One item that was kicked back and forth, was actually one item we have in the change log that is adding IDs to the widgets. So the work for the customizers, this block-based widget is still in the design phase. So it will not be in 5.7. A few people had asked that question and that’s kind of what I found out.
Mark Uraine: Good investigation. Yeah. I know with full-site editing kind of, you have the benefit of just kind of, once you have a theme that allows full-site editing, the customizer gets hidden away. So with merging blocks into the widget screen though, that you don’t get that option, this is kind of still that step in between full-site editing and where we are right now. So merging those into the widget screen also means we need to include blocks in the customizer as well. So it’s a lot more effort on the part of that, especially with backwards compatibility.
Birgit Pauli-Haack: Yeah. And we talked about it before here. It’s quite difficult to kind of make that, we’ll see.
Mark Uraine: Get it right.
Birgit Pauli-Haack: Get it right with the instant preview and the smaller real FSE full blocks and all that.
Mark Uraine: Yeah. You’re right. You’re totally right. Though we can update the experience to be like the mobile web, it’s not always a better experience right? In that narrow width of the sidebar and customizer.
So the other item that was released was WordPress 5.6.1. That was released and included several fixes. A fix for editor crash when registering a block pattern without categories. The embed block added HTML and reusable support back, adding aria-labels to box control component inputs, and HTML block saw a fix in the editor styles. The core data has some normalize underscore fields value for use in stable key, and a fix on the font size picker and in edit site, prevent inserter over scroll. So those were the big things I got into 5.6.1.
Birgit Pauli-Haack: Yeah. And they cannot wait another six weeks so they are in there now in 5.6. So they were back ordered from the Gutenberg plugin.
Yeah. And then we had a Gutenberg 9.9 was released. The plugin release it’s available in the repo, and there’s also an article at the Tavern, and there were 157 PRs, which is really impressive what the team put together for the 5.7 release that needed to be in the Gutenberg 9.9 to get into….
Mark Uraine: Yeah. Like you’re saying that their focus was kind of split between a beta release and also getting out the Gutenberg release, but still 157 PRs, you are right Birgit. That’s great.
Birgit Pauli-Haack: That’s great. Yeah. So there were quite a few enhancements, 12 of them. One is a more muted sibling inserter and so it’s not so obvious when you’re in between block editors, there’s more visual clarity for the reusable block because they changed how the flow is a little bit. Now there is dark theme support in the block editor, the spacer block background is now shown on hover. So you can distinguish it when you’re in the edit mode. There’s social icons, receive more icons and background color options. And there was a tip from the team, if you as a designer want to restrict the different sizes of the social icons block, just change your CSS styles and every variation that is in there, not in the same size.
Mark Uraine: Yes. There’s your answer. Just write more CSS.
Birgit Pauli-Haack: Yeah. Well you can do it with variables and just kind of repeat those variables.
Mark Uraine: I just want to know there’s an introduction of background colors on these social icons now. Do those background colors, Birgit, do they include gradients?
Birgit Pauli-Haack: Well, I hope so. Well, I don’t think so, but it’s solid colors, but yeah, next step it’s gradient on the social icons. Yes.
And another enhancement is the support of both a horizontal as well as a vertical in-between inserter. That’s particularly important between columns. I haven’t tested it yet, but it’s certainly an increase there. The image block now received a border radius support and hopefully there is also a feature to switch it off. And then the system font for the vanilla editor styles. That’s an experiment more than an enhancement to see how that works.
There’s also two breaking changes in that release.
Mark Uraine: There is new, yeah. This is a new category for us right? I don’t think I’ve seen a breaking change category.
Birgit Pauli-Haack: Yeah. And it’s even on an experimental thing. But it’s important because the full-site editing block-based themes, they depend very much on the theme.JSON file that has all the settings and all the variations or styles in there. And they changed how the order is. So they go from global settings and styles to block setting and styles to have that all in the make the settings and over a top header and then the styles are top headers, saying those things are separate. I think it’s either way, it seems for them, this is a better way, but either way you would double up on styles or on block names. But look at that, because the global block selector is split and the settings and style are top-level keys.
Mark Uraine: That’s right. Definitely want to read those. Those are good. Very interesting. I’m curious why the decision was made there.
So bug fixes. Birgit, we’ve got 31 bug fixes in this release. There was fixing… You all right?
Birgit Pauli-Haack: Yeah.
Mark Uraine: Fixing sibling inserter. That color kind of got messed with a little bit. And that had to be fixed. There’s fixing issues causing the cover block, oh yes. So causing the cover block to black out with a fixed background. So this release saw a lot of particular fixes around the cover block or image blocks that had to do with repeating images. There was something going on there in the software that just was having a real trouble. And so we’re fixing repeated backgrounds with transparent images, fixing repeating backgrounds for the cover source set. All these things really got some attention to dial those in better. And the image block updating the link destination when editing an image link URL. The button components saw an adding a margin around the dash icon. There was also the cover block again, with positioning got fixed as well. So overall 31 big fixes in that and experiments.
The experiments, there were 33 of those. I think you were going to talk about these experiments.
Birgit Pauli-Haack: Yeah. I was talking about that. All of a sudden, the highlights kind of looked kind of interesting or at least familiar.
Mark Uraine: Yeah. You’re like, wait, I know I highlighted that one.
Birgit Pauli-Haack: Yeah. So as I mentioned, there was this add a widget ID to blocks in the widget screen that contributes “bigly” to its compatibility.
Mark Uraine: What was that word Birgit? Bigly? It contributes bigly. That is wonderful.
Birgit Pauli-Haack: And then the full set editing template parts now use the title instead of a slug when they’re displayed. The template export has been fixed. So you could actually export a template and then input it in a different site in work. So they fixed it now. And then there were other things like keyboard shortcuts and the navigation editor for safe undo and redo, the query pagination is now in Gutenberg with the inner blocks. So the query block is the do all for all posts types grids, pretty much or at least some.
Mark Uraine: Right. Yeah. Display a feed of your posts, right?
Birgit Pauli-Haack: Yeah. And then you would say, well, show me the last six, and then you need pagination for that. And that is also a block, but it also has inner blocks kind of next post, previous post and then the number of the page list with links. So that’s now in Gutenberg now.
Mark Uraine: Yeah. I’m glad that got in with 9.9 here, because I know I was just messing around with 9.8 earlier, and I still had noticed that the pagination block was completely separate from that. And so I’m glad it’s getting added.
Birgit Pauli-Haack: So they put it together and then there were fixes for the navigation blog, for the widget screen now is showing categorizations or not showing in the global inserter. What else? Yeah. That’s pretty much it.
Mark Uraine: I noticed Birgit that about half of these experiments are actually just fixes. So they’re actually just bug fixes.
Birgit Pauli-Haack: Well, maybe they should be on the bug fixes right?
Mark Uraine: Right?
Birgit Pauli-Haack: Right. Yeah.
And then some updates in the documentation. And everybody’s really glad about that. So there’s an updated list for the core block categories that have changed. I don’t know, six or seven variations earlier, well versions earlier. It’s now updated. They also updated the links used in the developer portal. Like other resources that is good. The read me for the block card has been updated. The block card is pretty much a developer block that can be many other things, like a call to action, or it’s a group block that has multiple components that you could use. And then they also changed the introduction to the block editor handbook. But that’s an ongoing process between Joen and Justin to update that. Yeah.
Mark Uraine: Okay. That’s great to see that. You know what, I think it was earlier this week, I was actually bragging about how much documentation WordPress has out there. I was pretty proud of it to another company. So I love it when I see these documentation changes coming through.
Birgit Pauli-Haack: Yeah.
Mark Uraine: Let’s see. That brings us to the code quality section, which there were nine changes under the code quality. A couple of them included renaming some template part icons. So some icons got renamed, and another one is change the way right to left styles get enqueued. So if you have styles for right to left, yeah. This is a little change in how they get enqueued. There was also a refactor out, refactoring out a CSS gradient from custom gradient bar. So that’s little depressing because sounds like we lost a gradient somewhere. I’m just kidding. Okay.
There were 22 changes under the tools category. Dependencies saw an upgrade to TypeScript fix end-to-end tests in the widget screen. Preferences modal saw a redesign. So if you haven’t opened up your preferences modal, please do and let the team know how you like that. Let’s see. There was adding some basic end-to-end tests for the widget screen. Wait, I just said fixing end. So I guess maybe some new end-to-end tests were added along with fixing other ones. That’s what it looks like there.
Birgit Pauli-Haack: Or they were added three weeks ago and then a week ago they were the fixers, yeah.
Mark Uraine: That could very well be true.
And everyone’s favorite category, the various category where we don’t know what belongs in here, saw 36 changes. The component system added a grid component. That’s a big deal, right?
Birgit Pauli-Haack: Yeah.
Mark Uraine: I want to fiddle with that one a little bit.
Birgit Pauli-Haack: And it was John Q.
Mark Uraine: Yeah, of course. We’re talking components now. Of course, we’re talking about Q’s work. Oh, let’s see. There was the cover block side improve on various states. So whether you have a background image or a background color, the block toolbar kind of was a little bit confusing on what you can use in the toolbar, that got improved. There was a PRF called showing reusable block parent border when the child is selected. So if you’re familiar with reusable blocks, when you’re editing a child element in there, you weren’t quite sure where the reusable block actually began and ended maybe, so now the border is always there when you’re editing, to give you some scope.
Birgit Pauli-Haack: Yeah. I think that tripped me up after the last change that I was not seeing that I actually edited the reusable block. So it wasn’t reusable anymore, instead of first converting it to a regular block, so I had to build it again and yeah, the reusable book also the edit and the save is now in the sidebar and not on the block toolbar.
Mark Uraine: Very different.
Birgit Pauli-Haack: I don’t like change you know?
Mark Uraine: Yeah. I hear you. Let’s see there was an add show block breadcrumbs preference. So you can turn those block bread crumbs off or on now. And some of these are interesting. A lot of these had to do with the UI, which is really cool. Component system saw an upgrade to the font size picker. Pattern directory created create end points to proxy, api.w.org/patterns, and show text labels in the block toolbars when that option is set. So if you’re familiar, there’s an option in preferences where you can say, I want text only instead of icons, that initially affected only the top bar of the editor. But now it also affects the toolbar of each block. So it swaps all those icons out with text.
Birgit Pauli-Haack: Okay. Yeah. I tested that a bit and I’m not sure how I feel about it. I think I like the icons better, but I guess screen readers and other tools are better with that.
Mark Uraine: Yeah. There are definitely some people that just don’t care for icons so much. Especially it might cause some confusion if they aren’t very clear icons. So having that text there just is one way to be really sure about the actions you’re performing.
Birgit Pauli-Haack: What you are actually doing. Yeah. That’s right. You only have a finite set of icons for multiple things. I get that. Absolutely. Actually one of them, the pattern directory creating the end point for the w.org/patterns, that is kind of a new development is the pattern directory. And I’m glad that it pushes forward for some of the little things that are really big, because of course you want to get back to the directory when you want to look for patterns and you need a point for that an end point for that.
Mark Uraine: I’m glad you called that out. The last one on there that I wanted to touch on, Birgit, was the block directory saw filtering out disallowed blocks before showing the available blocks. So I guess we kind of looked into that and it appears that when you’re inside of a block, like you’re in a nested block or something and you perform a search, you’re not going to see blocks that can’t be added. Is that kind of what we said?
Birgit Pauli-Haack: No, that’s exactly right. So it’s, you’re not getting confused that you select the block and then the block itself said, no, you’re not allowed, kind of cut that off earlier. It’s really helpful. So that was our release section in today’s episode, we’re coming now into what’s an active development were discussed.
What’s in Active Development or Discussed
It was a very big week for full-site editing discussions. Josepha Haden has published the global big goals for Twenty Twenty-One and had in it to have an MVP for full-site editing in April. And everybody was asking, not everybody, but many people were asking, okay, when you say MVP, what is that supposed to do. In her new post full-site editing and themes where things are kind of an update post, she formulated, “The MVP should make it possible to build a version of the Twenty Twenty-One theme using only blocks without any coding knowledge.” That’s the MVP.
And she also pointed to a post by Matias Ventura. They had this Overview Issue with the Milestones for the full-site editing. WP Tavern’s Justin Tadlock went into more detail. He picked up on that and then each of the milestones, he explained it a little bit. And I had an idea what this would look like for an MVP. It’s a long article, but it’s definitely worth reading. And it also touches on Josepha’s, she had a set of three challenges that full-site editing encountered, and that is each part of it, like the site editor, the global styles, the widget screen, and the navigation screen, are independent projects. And so if you update one of them that might have ramifications for the other part of the product and that feedback back and forth takes longer and things need to patch up again and then to have a seamless process and workflow possible.
Then the UI challenges of finding the edge of the possible promise is a nice phrase that I like there. Finding the edge of a possible promise. And so how to make the switch between post editing and site editing on all levels. That’s certainly the challenge there and people are working on it.
And then the other part is provide help for developers to turn a current theme into a block-based theme. And that part is supported by the development of the widget screen, the navigation and the customizer integration, that’s targeting actually existing themes. And they are for the block theme, native block-based themes in the future, they are melting all into the site editor. There are no widgets really or navigation, they’re just blocks for that.
And that is a very interesting discussion and that definitely, other newsletters picked up on it. I think the repository today picked up on the Twitter conversations that you can certainly read up about, we still have all the links in our show notes of course, but this was very interesting, all themes will go away to oh, new creativity and new ways to do things and also to a streamlined process of creating themes actually in the site editor and then export them and take them to a new site, replicate that. Found that really interesting.
Mark Uraine: So I tell you, I was creating a theme the other day and one site turned on full-site editing capabilities for it, and I lost the customizer and the menu screen and I was rolling down that road and I tried to create the menu within the full-site editor. And I was just having so many difficulties, I had to remove that from my theme and go back to the old menu screen, I had to use the old menu screen.
Birgit Pauli-Haack: Oh, wow. Yeah. Maybe looking at some themes, Ari and Carolina are doing that. Because yeah. But that’s part of it then, it’s all still very much in development and has so many moving parts. And I think we talked about the block-based editor, right? Do I have that on our list here?
Block-based Widget Editor
Mark Uraine: Well, yeah. Oh, the block-based widget editor. Yes. So Rob was saying that two bugs have been corrected with saving widgets in the widget editor now. So that’s good. They’re being merged. And he says, we have plenty of, and then tests now, which we talked about earlier in the podcast, thanks to Kai Hao for all that great work there. And the next priority that they have on their radar is bringing those blocks into the customizer as we talked earlier, Birgit. And get the widgets area blocks inside of the widget area in customizer working again. So I know Kai is working on that along with Shaun Andrews right now, he has also been contributing in there.
Birgit Pauli-Haack: Yeah. And there are some designs there. I’ll see if I can surface them and all other show notes then. Yeah. So cool things are coming. Lots of changes, but I’m also quite sure that full-site editing themes will not be the mainstream and until 2023 or something like that. Because the old themes stay around and yeah, it’s not that many. It’s going to be an MVP. What’s MVP mean? It’s a minimum viable product. So it’s the basic of the basic things. So going to be in there, there’s nothing yet for any complicated or complex themes that are available then.
All right. So this is the end of the show, dear listeners. Thank you for staying on, keep on testing the full site experiments and report back to the theme on GitHub or through the full-site editing outreach experiments, follow up on the links that Anne on the posts that Anne McCarthy put out.
And for those who missed it, the recording of our live Q & A, from last Friday, is now available with all the mentioned resource links and as well as a transcript. And we had probably about 20 questions. I know that’s a phrase in American kind of, we are not playing 20 questions here, but we probably had about 20 questions that came from the audience. And that all four of us, or the panelists were able to answer from the different perspectives. So it was quite an interesting show. Catch up. Maybe do that before you start the testing part. So you kind of know where everybody is.
As always the show notes will be published on Gutenbergtimes.com/podcast. This is episode 37. And if you have questions or suggestions or news you want us to include, send them to email@example.com. That’s firstname.lastname@example.org. That’s it. Thank you for listening. Goodbye. Thank you, Mark.
Mark Uraine: Thank you, Birgit.
Birgit Pauli-Haack: Until the next time.
Mark Uraine: All right. Bye-bye, everyone, have a great one.