Birgit Pauli-Haack and Mary Job discuss with their guest, Dennis Snell, Gutenberg 13.0, WordPress 6.0, an Inline Token Proposal and so much more.
- Music: Homer Gaines
- Editor: Sandy Reed
- Logo: Mark Uraine
- Production: Birgit Pauli-Haack
Dennis Snell’s post on WordPress and Gutenberg
- Walkthrough of what’s to come in WordPress 6.0
- Help Wanted: Test WordPress 6.0
- FSE Program Testing Call #13: Authoring an Author Template deadline April 21
- Help Test the Comments Blocks for WordPress 6.0
- Core Styles and Theme Customization: the next steps
- WordPress 6.0 Beta 1
- WordPress 5.9.3 Maintenance Release
- What’s new in Gutenberg 13.0? (14 April)
- Gutenberg 13.0 Adds Text Selection Across Multiple Blocks, New Stack Group Variation, and Featured Cover Blocks
What’s discussed or in the works?
Inline Token with Dennis Snell: Dynamic replacement of server-provided content in blocks and in HTML attributes
Stay in Touch
- Did you like this episode? Please write us a review
- Ping us on Twitter or send DMs with questions. @gutenbergtimes and @bph.
- If you have questions or suggestions, or news you want us to include, send them to email@example.com.
- Please write us a review on iTunes! (Click here to learn how)
Birgit Pauli-Haack: Hello, and welcome to our 65th episode of the Gutenberg Changelog podcast. In today’s episode, we will talk about Gutenberg 13, WordPress 6.0, Inline token proposal, and so much more.
I’m Birgit Pauli-Haack, curator at The Gutenberg Times and WordPress developer advocate. And I’m here with my co-host Mary Job, WordPress advocate, support engineer at Paid Membership Pro, and community organizer of WP Africa.
Good evening, Mary. Good afternoon, Dennis. Welcome to our show. Seems we all three are digital nomads at the moment. So how is everyone today, and where are you located, and how is your weather? Three questions right out of the gate.
Mary, you want to start?
Mary Job: Yes, I’m doing great, Birgit, thank you very much. I’m right now in Kigali, Rwanda. The weather is quite better than in Nigeria, it’s not known to be hot over here. It’s usually cold, but not too cold. And I’m doing good, thank you for asking.
Birgit Pauli-Haack: All right. Dennis?
Dennis Snell: Thank you, yeah, thanks for having me on here. I’m currently in Tucson, Arizona until tomorrow, and the weather is sunny. The high today is around 30. For all my colleagues here in the US, that’s around 85 degrees. And I’m having a blast working on some blocks, working on implementing Gutenberg in context outside of WordPress. So yeah, I look forward to this chat today.
Birgit Pauli-Haack: Yeah. Well, it’s such a great pleasure to have you, Dennis, and thanks for joining us for the discussion of this week’s Gutenberg release and your Inline token proposal.
But until we start going into the details of both, tell us and our listeners a bit about you, Dennis. How did you get to work on WordPress and with Automattic?
Dennis Snell: I have a somewhat traditional WordPress entry story. Long ago, I was building webpages for my clients and wanted to give them more opportunities to edit their content. So I had a hodgepodge of home built, naively implemented content management systems.
And when I stumbled upon WordPress it seemed so easy in order to do what I needed. And so basically from the moment I found WordPress, I almost exclusively used it for the websites I was building.
Down the line, I was working at an electric utility as an engineer, and just really wasn’t getting enough programming in my day job to meet my wants since programming is a passion of mine. And so I wanted to find work that would let me dive deep into programming challenges really deep, and I was also looking to find a job that would give me more flexibility to do what I wanted with my day schedule and better meet my work habits. Again schedule, I work at night a lot.
So Automattic had been on my radar for a number of years and it was the pie in the sky dream I had. I applied and basically said I have no professional programming experience, but things worked out quite well. So that’s how I got to Automattic. It wasn’t something I expected to get, but it’s been a good eight years now that I’ve been there.
Birgit Pauli-Haack: Wow, eight years. That company has definitely grown in those eight years. Awesome.
Well, you were right at the beginning, if I remember that correctly, of Gutenberg, and you must know all the depth of the project.
I still share your article, Gutenberg Is Not HTML, from September 2017. And for someone like me who wrote HTML code manually at the web’s beginning, that was quite a conceptual jump to wrap my head around. It’s one of the many conceptual rethinking that was done with the development of Gutenberg on how content is created with blocks.
So I highly recommend the post to any developer who wants to learn building blocks or for the block editor, but it’s just the beginning. So then is what other revolutionary concepts implemented with the block editor are difficult for developers of the early internet days, or backend developers or PHP developers? And do you have any advice for them how to learn this better, faster?
Dennis Snell: A quick call out to the listeners who don’t get the opportunity to read that article before I start answering my question, is that I’ll point out that what I consider one of the more revolutionary concepts here is just that we see HTML on the web as the formatting language, and it is, but it’s a very low-level language in the way that assembly code is a very low-level programming language.
And with the Gutenberg block model, we’ve been able to heighten the level at which we describe the content we’re creating. And so while the image tag is absolutely the way to display an image in HTML most of the time, in Gutenberg we’re saying that’s an implementation artifact of the fact that we’re trying to create an image in our document. And the same way goes for other content types that get more complicated.
Other revolutionary concepts, I’m not sure they’re revolutionary so much as reflectionary. I think one of the things that I walked through in my programming journey on the web and that I’ve seen a lot of us do is I think when the web became a popular thing and HTML became the language we speak, we almost didn’t recognize the traditional programming practices that had guarded us in more typical software concepts around modularization, concepts around organization and design. We didn’t realize those could also transfer into how we generate web content and web pages.
We can recognize this in the way that we mix HTML and PHP, and even some of the bad rap that WordPress gets for mashing together those different things. None of this stuff had to happen. In fact, even back in the early days where everybody was writing pearl scripts, it was so easy to mix and match content and logic and presentation that we just did it out of convenience.
With the block model and with the editor’s data model, what we’ve tried to do is make the easy option operating on these more designed, structured interfaces.
The fact that this is all stored in HTML, going back to that article, is beside the point. The point is we’re able to interact with our modern expectations for creating web content, that’s things like being able to be responsive on different devices, being able to be progressively enhanced, interacting with other webpages and services out there. We can do this in a way that is principled by the default path.
And to me, that’s one of the biggest impacts that we’ve had. I think a lot of this stuff was a little nebulous in the beginning, it was an experiment. Can we do this? Can we build a structured system? Can we make it work? Can we do it without breaking backwards compatibility? Can we do it while preserving the openness that we love so much about the web?
And for the most part, it’s worked out really well, and I think that probably deserves a lot of consideration and appreciation as we move forward.
Birgit Pauli-Haack: Yeah. Well, awesome. There’s a similar movement to modernize and to structure and to systemize also in designer systems or design systems starting with the atomic design, and I think those principles actually matched up with Gutenberg. So I think that is where the web and the development on the web was going early on. But bringing it to WordPress, the monolith WordPress all of a sudden and then breaking it up into smaller pieces that then are assembled again.
So that has been a six year, maybe even seven year journey for you?
Dennis Snell: I looked that up recently, I think it’s somewhere around there, yeah.
Birgit Pauli-Haack: But you have been with Automattic for eight years, so pretty much three quarters of your time you spend on Gutenberg and the revamp of how you create content in WordPress.
So was there anything when you… I don’t know if you have it on top of your head or have thought about it. Was there anything that you started out thinking about and how this… And implement with the team, Matias and Grzegorz and Riad and all them, where you were surprised how it turned out after, I don’t know, 100 iterations or 100 plugin releases.
Dennis Snell: I was skeptical in the beginning of our JSON comments inside of the block come into limiters, and I was skeptical about how that would all go down. And really what became I should say the driving force behind that were the practical considerations brought in by thankfully the diversity of input at the time among the WordPress community to say, Hey, we care about backwards compatibility. We care about openness. We care about having one source of truth.
And so, like I mentioned, I went back to those early discussions in Slack, which are still publicly available, and we had a lot of discussion about how we would fundamentally store Gutenberg posts. And there was a strong argument in favor of creating a JSON data format that would be stored in the database. There were arguments for storing block information separately from the post content.
There were discussions about storing all of the attributes and data at the top or the bottom of the post in a delineated area. And so I think what’s neat about how this all developed is just getting input from a lot of different people forced us through these constraints.
Okay, well yeah, but what happens when you export your site? What happens when you don’t have the software anymore? What happens when you’re trying to archive these pages long-term? And I don’t remember when I was fully went over to the idea, it was after we built the initial models of it. But that one I think is still neat and what I consider one of those happy accidents or happy experiments in history.
Birgit Pauli-Haack: Yeah, and I still marvel at the 5.0 release in December, 2018 when nothing broke. The internet did not break with WordPress 5.0. And the conversion of classic content into blocks was very, very seamless. You could open up a… Yeah, and that was really surprising to me because normally when you change these technical paradigms then there is a strong break of backwards compatibility. And this is definitely a great step for that.
It’s still the wonder when I touch a site that still used the classic editor and I converted to block to Gutenberg. Yeah, it’s still totally amazing for me. So, well I think we could both talk quite a bit and maybe we get a chance to talk a little bit further into it, but we have a job to do tonight, or for me that we have the Gutenberg 13 release.
But before we go in there, I think we need to walk through the happenings of last week. There was a recording of the walkthrough, April 5th, of what’s possibly or not possibly to come in WordPress 6.0. And the recording is now available on WordPress TV and then Dan Soschin published a 6.0 product walkthrough recap with summary and issues list and the chat transcript as well as the video transcript.
So to get a sneak peek at what is coming to WordPress 6.0, what might still need some work before it’s available in Core, check it out. And it’s about an hour long, so you get definitely a sneak peek and see Matias Ventura, still the demo master of the master of life demos in that show. Did you watch it, Mary or Dennis? Did you get a chance to look at it?
Dennis Snell: I didn’t have a chance to look at it, no.
Mary Job: I haven’t been able to watch it either.
Birgit Pauli-Haack: All right, so let me tell you about the highlights then. The WordPress 6.0 Beta came out also this week and later on we will have some calls for testing. But the highlights of the sneak peak was that the style switching is coming with that you can… A theme developer can give you multiple theme JSON files and change the nature of a theme, so you don’t need to change the theme if you just want to change the color palette or some typography or the outlook, the graphical outlook of it, which is still really amazing.
And it’s going to have some great creativity coming into the fold. Then you get more template options, you can use the blocks to edit five more templates, the author template, eight categories tag, and any other taxonomy template. So that is definitely a relief for a few.
And a few people have been waiting for few million I think. And then you can easily select text across multiple blocks now and edit them to a liking or delete them. Then there has been great efforts made to keep custom styles in place when blocks are transformed into other blocks, like from paragraph to list or from group to cover. Or a button so you don’t have to replicate all the settings again.
More patterns will come into place with a quick insert that surfaces patterns at certain relevant semantic kind of thing. I haven’t seen that yet, I will see how the mind reading works from the developers. The list view will have some improvements and there will be some design tools. There will also be new blocks, the comments block, the read more block, the post author biography block.
And then the whole block blocking UI will come into WordPress 6.0. And last but not least, what we saw latest also coming in 12.9 is the export of themes that you created or modified with the site editor. So a question for you all, is there anything that you are particularly looking forward to seeing land in WordPress 4?
Dennis Snell: I’m excited about a few things. I don’t know if you want to go first, Mary.
Birgit Pauli-Haack: Well, go for it, Dennis.
Dennis Snell: I don’t think we can understate how valuable the partial text selection is going to be, great work there. Just super valuable for I think everyone, because that’s something that we’ve lost when you’re trying to select across multiple blocks but you don’t want everything. There’s a switch over that we’ve had that it just defaults to selecting the block instead of the text within a block. So that’s going to be incredible.
And that’s I think going to make it easier to adopt Gutenberg and even more context, because those are expectations that people have. By the way, that’s not an easy problem. And so it’s going to continue to get better, but it’s a hard problem to solve in these web-based editors.
Birgit Pauli-Haack: Yeah, I saw a comment that Notion, that’s a project management note-taking application, they just after 10 years or so had that feature, they didn’t have it before either. So it’s really a hard thing to do. And having that now in the block editor is definitely something that will improve the writing experience considerably. Because it’s one of the things that I heard a lot of people who write in the classic editor, they were surprised that wasn’t working and it threw them a bit.
Dennis Snell: Yeah, apart from that, I’m really excited about some of the underpinnings that we’re seeing with these style variations to make it easier, to more interactively adjust different elements of your site’s theme non-destructively, to be able to move sliders and visually see the feedback, and close this cycle of okay, anticipate what change might have, code in some value, reload the site.
Instead we can just flip back and forth in real-time and see that. And I’m also excited about the bit that we’ll talk about later that I put in there, which is just preserving broken blocks. Because I’m not the only one who’s ever hit save on a post and immediately after save realized that the block I just wrote is now broken. So we’re doing a lot of work actually to support other changes going on in future releases, but we’re doing a lot of work to make sure that if the editor’s unable to understand what’s loaded in post content, that it doesn’t change that or get rid of it. So those are the three big ones for me.
Birgit Pauli-Haack: Yeah, and I’m glad you mentioned that we are talking about that a little bit more when we come to the change log of 13. Mary, what is it that you are looking forward to 6.0?
Mary Job: I think Dennis already hit the nail on the spot. It’s that more to select, being able to select… You don’t know how many times I’ve tried to select a block and then I have to take them one by one. And I’m like, “Why can’t I select all of this at once?” But I quite understand when he says it might look simple but it’s difficult to achieve, because if there’s one thing that I’ve come to realize since doing WordPress support is that the simplest of the problems are the ones that you end up spending the most amount of time on because you underestimated it. So I can relate to that.
But I’m excited about that feature, and honestly, I can’t say thank you enough to all the people who are working on Gutenberg.
Birgit Pauli-Haack: Yeah, I’m looking really forward to all the list view improvements because that has been the power tool that I saw, and that has gotten so many small improvements that make working with it so smooth and easy to navigate your big template or your big posts, that there are some really great changes in there.
All right. So as I mentioned, the WordPress 6.0 Beta 1 has come out. And dear listeners, you are our core team. We need you because the release team has published not one but three calls for testing. One is titled help wanted, test WordPress 6.0, that’s the direct testing of the beta versions. Not only the Beta 1, next week we will have… April 19th, we will have Beta 2. And then later the release candidates. So we have that post and it walks you through testing environment, testing tips, then the key features to test, the editor, the blocks, the design, and the theme plugin development or backwards compatibility to how the plugins and themes work with 6.0.
It has been in great detail so you don’t have to come up with making all the decisions what exactly do I have to test, that is really a great post to follow along.
Then, Anne McCarthy has from the full set editing outreach program at the call for testing 13 out, which walks you through authoring an author template. That’s one of the five templates that will come to WordPress 6.0, but it will also walk you through testing the blocks or lock UI as well as customized no results for the query block and more design tools.
Again, Anne McCarthy has some very detailed instructions for you. And last but not least, help test the custom blocks for WordPress 6.0.
So up until now, we had one block for the post comments to add to a template or to a theme, but there was a team of developers who started out similar to the post template, having each data item like the content, the author, the date, the link, all in individual blocks. And now those can be styles, those can be used much more granular in your decisions. But it needs testing definitely, and the testing will also decide if it will come to 6.0.
So that’s definitely, you got your work cut out for you, dear listeners, if you wanted to follow or heed all those calls for testing. And then there has also been on the make blog an update on the state of the discussion and the explorations for standardizing styles and presets for themes. There’s a whole proposal was there from Mark Rutwiley and there were comments, and also some problems that themes also anticipate with the full site editing that they needed to be standardized, and the customizations being… Typography being it’s how will primary and secondary color change?
All these names, can they be standardized? How custom CSS will be coming into or dealing with blocks and full site editing? So Roman has published a post where he summarizes not only the challenge but also has links to the first explorations and the PRs that you can follow along with and test them. This is all under the big headline style engine for WordPress and Gutenberg.
He also has a section there how to get involved, so definitely check it out if you want to be at the forefront of the discussion and decision-making.
What’s Released – WordPress 5.9.3 and Gutenberg 13.0
So what’s released? There were three releases. One was the WordPress 5.9.3, if you haven’t updated yet or if you haven’t updated automatically, stop now listening to this, go and update your websites to 5.9.3, security and maintenance release with a few bug fixes.
If you want to hold off on 6.0 when it comes out, you definitely want to have the bug fix system we’re backboard from the block editor. And we will have the link in the show notes for the list of changes that come in 5.9.3.
So now that you’re back from updating, WordPress 6.0 Beta came out and we will have the link to the beta release notes. And of course, we have all the calls for testing for that in our show notes.
And now we come to Gutenberg 13, it’s the… Adam Zielinski led this release and published a release post on the make blog on April 14th. So that was after beta, but all the features that went in Gutenberg 13 is the last plugin version that will… Which of the features and enhancers make it into WordPress 6.0. Afterwards will only be bug fixes and the like.
And Grzegorz Ziolkowski, our friend here, a long time co-host, also handled the merge in for the Beta 1 release into Core. And there are also a few things that might not make it, few things in this release that might not make it into WordPress 6.0, and we will point them out as much as we know. But this is quite the big release, it’s 234 PRs or no, it’s 234 line items in the change log that’s about a mile long by 70 contributors with… Alone enhancements were 90 of that. So that’s really something.
So do want to start out Mary in the enhancements of the block library?
Mary Job: Okay, Birgit. So we have a couple of enhancements, I’ll start with the block library. Yearly, weekly, daily archive settings have been added to the archives block. We also have an enhancement to the code editor, which now presents the source of unrecognized blocks inside of the code editor.
Dennis Snell: Well, as alluded to just a little bit ago, this is the preservation work for what I like to call unrecognized blocks, the editor calls invalid blocks or missing blocks. And just the idea is it’s a workflow that I hit more often I think than a lot of people just because I’m often wanting to go in and play with markup changes, or I’m developing a block and it’s undergoing periodic changes. Or I want to see, what if I made this change both in the code editor and in the visual side now if your blocks are marked as invalid by the editor? It won’t touch that, it’ll basically just leave it as is.
So in the code editor there was this funny behavior where if you went in and made an edit, and for some reason it didn’t validate properly, as soon as you left the code text area, the content you wrote just would either disappear or change or get corrupted somehow. So right now, it’s going to treat that just as your plain notebook text editor. It may still mark the block as invalid, but as far as the editor goes, whatever you type is going to stay around.
So a lot fewer headaches for me for that. And then, yeah, the partner to that is on the visual side, if a block breaks, it’s going to show the HTML preview and forever since the origin of the project, that it might show the HTML preview if you’re lucky enough, but it was regenerating that block content from the attributes that the editor already knew it didn’t recognize.
So just a little note there is that if something is broken, it’ll leave it broken, and that makes me excited beyond probably what it should.
Birgit Pauli-Haack: Yeah, and I think the one stepping stone that a lot of developers found was actually the deprecation of blocks, the whole versioning system of the static blocks. And it’s so cumbersome for many developers that they decided to go with dynamic blocks right out of the gate or after they went through it with their first block, and render from the front end, from the PHP, which then circumvents that. But it also has a downside that it might take another trip to the server to actually show it and slows down the content creator.
So, I think you’re doing God’s work there and angels are working on it to make that experience a little less daunting for a developer. I see blocks that have these big, big separate file that the deprecation of blocks versioning system, that part could be longer than actually the rest of the plugin.
Dennis Snell: One other note on that is it has been very difficult to create invalid or unrecognized content in the editor up until now. And we often talk about the code view and the fact that this is all stored as serialized HTML in post content as an escape hatch. If there’s something that you really need to do and the editor doesn’t support it, and your writing post and you just need to get this published by Friday, you can now go into that code editor and add your custom HTML to your paragraph block.
And effectively, what that will do is it will lock it from the visual side because the editor says, Hey, I don’t know what to do with this so I’m not going to do anything, but it lets you go ahead and make the change. And that’ll be saved as a revision in the document so you can always see what it was. And we always have the other fail safe, which is add an HTML block. But sometimes the HTML block just isn’t as convenient as jumping in, making the change you know you need, and moving on.
Birgit Pauli-Haack: Yeah, thank you. There are quite a few bloggers out there that have always fiddled with the HTML, and now they have this outlet again. That’s wonderful.
Mary Job: Okay, still on enhancements, the column block also there’s been added block tabs. This means that you can now control the space from zero right space to large app gallery style gaps. The space around your columns is an integral part of your layouts.
Birgit Pauli-Haack: Yeah, it’s great. The block gap support is now… It was already in the gallery and now with 13, it also comes to the columns block. So that’s definitely… A lot of people were looking for that to control the gutter so to speak. And then there’s some… This enhancement to the cover block is definitely one that gets me excited, when I can use a cover block dynamically and then add the feature image for the post template.
So I can use the cover block as a part of my query loop when I want to… Or my single post template when I want the hero image as a background and then the text of the title on top of it. So that wasn’t possible before with Core block but now it is, and I’m glad it comes to 6.0 man.
The group block has two variations, we know about the roadblock variation, but now it also has a stack variation. And that is the first time that responsiveness comes in as intrinsic layout or design layout to Gutenberg, and responsiveness comes now… Is now available for the group block at the stack, which means if it stacks it in multiple columns, it’s a flex CSS. So you have four buttons or three columns that are stacked in a… Or three paragraphs that are in a group block, you can get them to display in a wide screen in three columns, but you can also, when you go to the smaller screens, it stacks them into one column or adapts to the width of the screen. And that is definitely a great feature to have now.
All right, what I like is that the list block gets a box size order box, which means that you can have a background on a list block but the list stays where it is. So the content is not padded on left and right like it was with a group block when you needed it before, the list can now handle background color. And this is awesome.
The navigation block got some updates and it added… So when added to the template or template parts, now the default is to grab the first available menu that was created in the background when only one exists. So that eliminates a few steps, before you had to click on it and then select the dropdown. There was only one in there, so it’s a much faster way to add a navigation block and a menu to the navigation block. It also now supports text decoration, like underline or strikethrough.
Why would I strike through a menu item on a navigation block?
Dennis Snell: Builds mystery.
Birgit Pauli-Haack: It’s the mystery of the web, yes.
And then with this release site, owners can also add a link description to the navigation link blocks, which is definitely an enhancement. Because that could be the beginning of the mega menus that people would like to build with a navigation menu, navigation block, but it’s not available yet. But you can add the link description to it.
There were also some minor up fixes as well as small changes. Also want to highlight that the post comment block that was previously used is now deprecated in favor of the granular post comments blocks, like date and author and content and link. So it will be hidden in the inserter, although if it’s not coming to 6.0 I’m going to keep an eye on it. But we won’t deprecate the post comment block there.
The quote block now also supports color, which means background color, text color, and link color, all that is now coming to the quote block.
But there’s also, and we talk about it later, the experiments, a new version of quote blocks in the experiments that uses inner blocks, which is quite nice. But we’ll talk about it later.
Dennis Snell: Okay, very good.
Birgit Pauli-Haack: Yeah, we’re going through the change log so people when they follow along or go back to the release, they can find it. So the RSS block had a few enhancements has now all the missing class names that is needed, you can free pen the HTTP to the URL. Is it HTTPS or is it HTTB, and you can also update the maximum items. I think the RSS block was very rudimentary and now got a few features in there, enhancements.
And the last enhancement that I want to point out, as I said, there are 90 enhancements in this release and about 30 in the block library, 34 in the block library alone.
So the last one I wanted to point out is the site logo and the featured image in the post template blocks of the site logo for the seam block and the feature image for the template… Post template or page template there now have duo tone in the placeholder. So even if you don’t see the image or the logo, you will see that the duo tone has been attached to it.
There are a few components changes to the borders and the border control, as well as the color palette, but they will seem to be quite technical with most of it not user facing, I think, or you wouldn’t know. There is the style sidebar, that’s the global… Previously was called global style, but that’s the right sidebar for the template editor for the site editor itself now has a search in the block types list and also has labels for the global style variations, and has a tweak in the preview box.
I really like when you go through the styles and then you see the preview of the styles, it’s really cool. The multi selection you can now partially… Select partials of for instance, paragraph block where you have the last line of the top one, and then there’s the first line of the second one. And you can highlight those and either make it bold or italic or just delete it, editing over… It’s only for rich text I think, but that’s a huge improvement on the writing experience in the block editor. Definitely.
And you can directly link to files stored in the media library by using the link user interface. Oh, what I really like in the document settings in the post editor is there is now a summary panel on top of all the settings where you can see the featured image, the title, and the excerpt. And I really like that.
So you see just a glimpse of the final post when you go into the document settings. And before you hit publish you can see how that is, how it looks, and you can actually have a maximum height control there.
All right. Mary, what is the block locking coming up?
Mary Job: Yes, the block locking interface also got some enhancements. So I’m particularly excited about this because what it means is that as a site designer, if you do create your site for your clients with good and bad, then you can lock the blocks and prevent the site from breaking the site.
I know I’ve had to do backups to prevent this from happening in the past, so I’m excited about this. So it also got some enhancements, there’s PR was introduced to use block lock feature. This makes it easier to assess lock status. Also display lock status, you cannot display lock status in list view. This is good. And then styling changes have also been introduced for this model. This means you can remove those separator lines. You can increase patterns so nested items line up correctly.
You can swipe existing icons for locked on locked icon indicators. And you can over this block to see that also. Okay, and lastly, reusable block edit locking has also been introduced. This means that you can… There’s the option to lock editing for usable blocks as well.
Birgit Pauli-Haack: Yeah, it’s really great. Yeah, it has been wanted for so long and now we have these user interfaces. You were able to lock those blocks as a developer in certain ways, but now a site owner can lock the things for their editors or a theme developer can lock block patterns as well. That’s also part of this, I believe.
And this is so much cleaner now that people don’t… And the reusable block is also important because there were some accidental changes to reusable blocks when added to a post or page. And people didn’t know that that was a reusable block that only when you hit publish it made them aware that they actually changed something that might have been… And the changes might have replicated over the whole site, wherever that particular reusable block was used.
That is really, really helpful. There’s some changes also to CSS and styling, and it was a bit in discussion where the block gap UI should reside. Should it be in the global standards or in the layout, and I think right now the decision is to have no block gap UI for the global standards but have the block gap appears on the individual block settings level when it’s supported through the theme or the block JSON.
And Dennis, if you have something that I’m… Found something wrong that I was saying, please feel free to correct me.
Dennis Snell: No, no. I have no correction right there. Thank you.
Birgit Pauli-Haack: I didn’t see you if you making faces or not. So there’s something that the next one was a change in the block API that allows now multiple view scripts to a block. And it seems that’s not coming to 6.0, but what does that mean, Dennis. Do you know?
Birgit Pauli-Haack: Yeah, okay. It’s definitely one of the efforts to reduce the payload of the page when blocks are rendered and with different contexts you would need different scripts.
So the next section is then the changes, enhancements for the patterns. There is now an option to pick a pattern on page creation, meaning when you hit add new page the theme could offer you as a site content creator a various block patterns that you can start out with on your page and then fill in the gaps or modify, just have different modifications there.
This is definitely a great enhancement so you don’t have to assemble with multiple blocks but you have that one page, standardized page or a subset of standardized page views that you can add to your site. And the theme creativity here is so you can have a landing page and have all the things that you need. You need to hear a image. You have the text, the first flow text, then you have the call to action, and then the pricing list and that… So your content creator wouldn’t forget anything or it will all look the same. And you just have to fill in that text and the data for that particular page.
But it only works when you of course have patterns that are registered with that. There is in the note in the PR you will see how you can check if you’re a plugin developer or team developer, how you can check if there are post content patterns available. The API is experimental so it’s not documented, and there is no promise that it will stay that way. So just as a caveat for that particular thing.
And the theme export has gotten a number of features. It converts spaces into tabs with the theme JSON, it declares a version number. If it doesn’t have… If the theme declares a version number then the schema link will be added. It restores the appearance tools when exporting the theme that got missed in the first version of it. And now it also sorts the theme, JSON properties alphabetically so you can find things. But it looks a little weirder.
And the theme export features from Gutenberg 13 have been backported to come into WordPress 6.0. And the last enhancement part is the web fonts API. And right now there’s a discussion that it probably won’t make it into WordPress 6.0 because it didn’t make it to Beta 1. There was feature freeze. And that’s such a huge new API that it’s probably not going to make it to 6.0 because it hasn’t been tested all that much. But you can use it with a Gutenberg plugin, so go ahead and start testing it.
You can register the web ones with the style variation. It will register and queue the fonts by font family. And it will only register the fonts that are required to render the blocks that are present on this page. And there are also a number of optimizations for the HTTP requests when grouping fonts by font family.
Then we have 43 bug fixes in this release, and one of them, I mentioned that I like all the new features for the list view, but the list view is now one of the most used sections of the block editor I find. And if you don’t just write the blog post and it really starts getting immensely powerful when using it in the context of template creation. There’s now the multi block selection and collapsible expanding section that was in 12.9, makes handling multiple blocks much easier. You can move them all together. You can drag and drop them to wherever you want to drop them. Especially when they are nested ones, like with columns or group blocks we have all these nested blocks where you hit and miss when you’re in the canvas or in your content. But it’s very easy to point them out on the list view.
It now also paints a little box around it around the block when you hit him in the list view on the canvas, it shows you where you are, where the block is. That’s really neat. That might have been long there before, but I just saw it when I tested it.
You also see the lock for you cannot move the blocks when they are locked, which is certainly wanted. And you see the lock next to the block that are locked. Say that 15 times, block that are locked in a locked. And now you can also… There’s a better CSS targetability, I don’t know if that’s a real word, but you can now, if you style the editor or want to style the list view, you could target the title of the block with CSS, which I find neat.
Are there any other bug fixes that stand out? There’s so many…
Dennis Snell: There’s one I think hinted at in limiting the slug to Latin characters, there are some fixes in place, particularly prominent when people are pasting from something like Word or Google Docs. Sometimes you’d get a funny object character that isn’t quite a letter and looks weird, so I know people have been working on that just to smooth over one headache.
Sometimes if you did that it wouldn’t necessarily appear in the editor, but when it creates the site slug it adds some extra content you didn’t want. So that should be patched up now.
Birgit Pauli-Haack: Yeah, okay. Yeah, so sometimes you find yourself having emojis in there, that wouldn’t work.
Well, thank you for pointing that out. Awesome. So there are… I’m skipping over a few of the bug fixes and jump right to the developer experience.
There were a few adjustments to the schemas for block JSON as well as for the theme JSON schema, the block Jason now has an ancestor prop and also supports lock property that is added to the schema. So you can manage that as well.
And the theme JSON now adds an avatar to the schema, as well as the title key is now part of the internationalization as well. And that’s the title key for the pattern that are mentioned in the theme JSON, which is of what a feature that came in 12.9. But this is definitely an oversight to make it translatable for the internationalization.
And we come to the experiments of the section of the… We didn’t have an experiment section for so long in the plugin release, and now you have to switch them on when you install the plugin and you have to go to the menu that says Gutenberg.
And then there is one item there, experiments, and you get two things. One is the list block version two, and the other one is the quote block version two. And both experiments deal with having different other blocks in the list. You can have images or paragraphs or list and lists. No, I don’t… You can also use all the other blocks or some other blocks also in the group and have inner blocks support.
Dennis Snell: We can see what’s going on is the great implosion of core blocks right now, because we’re taking all these other blocks and stuffing them inside. So these two experiments are exciting. They’re experimental because if we were to actually go ahead and do this, we’d make these changes now, there’s additional roadblock with backwards compatibility. So we’re actually building the framework to the point where we’ll be able to do these in the future without as many steps.
But HTML allows arbitrary nesting of list content and quote content. So like you said, I know me personally, I use Gutenberg every day for my work journal, I track what I do. And a lot of times I have bullet points. And something I want to do all the time is add a code block inside of a list item, and that’s not possible unless I just create it as text. It doesn’t get the highlighting.
So with quotes and lists, the work is ongoing to be able to embed these things in another. Like maybe you want to quote someone quoting someone else, so to me this is really exciting. The image gallery is using inner blocks now, and we’re just getting to that point where all these things are embracing the fundamental nestability to expand what was until now an arbitrary limitation.
There’s no reason we can’t add an image inside of a list block. So keep an eye on these, they’re experiments again because they introduce some backwards compatibility problems that hopefully will be fixed by the time they’re done being experiments, but check it out because there’s a lot of UI and interaction challenges to solve, lots of feedback would help with that. So it’s exciting.
Birgit Pauli-Haack: Yeah, I’m totally excited about that too. Especially for the quotes, sometimes you want to have just a little image of the person that you’re quoting there or it’s a description of what the quote is, a description of a picture, and then the picture needs to be someplace else.
And the code list block and the list is definitely a great use case for that, yes. And I see the compatibility problems that I think Glen Davis ran into that when he was working on the gallery block, the second version of the gallery block when image blocks came into it. And then how to transform them back and forth from the version one to version two and keep some of those settings as well.
And it was quite the undertaking, but I can see that the learned lessons there will introduce also for a list and a quote version two.
Dennis Snell: Yeah, and hopefully moving forward, we won’t have to have these very long transitions as more blocks adopt the inner blocks.
Birgit Pauli-Haack: Inner blocks came much later to the block editor. It came with the columns block but it was a little different implementation before it came to the block editor.
Dennis Snell: Interestingly just a small historical bit there. The inter blocks were technically supported by the editors since some of the earliest days, but none of the blocks use them and a lot of the UI functionality lag behind.
There are actually some more interesting opportunities we have to unlock in the future if we want to add some complexity into the inner block system, that currently again, there’s no support in the UI. But the future compatibility is there, giving us some choice. So just a fun tidbit you can pull me aside at a word camp if you want to talk about.
Birgit Pauli-Haack: Yeah, I will.
Dennis Snell: Thank you.
Birgit Pauli-Haack: Yeah, and then there’s another other experimental block patterns to load the block patterns. Why are the rest API? And that’s the part when the pattern comes from the directory, is that the…
I highlighted it, but then I forgot about what it was.
Dennis Snell: There’s going to be a lot of utility to gain from loading more of these things from the API, because there’s a lot of context where we don’t need them. And so ideally we only load the code that we want to use when we use it. So this is working towards that ends to make it easier to dynamically load some of this stuff to make the editor boot faster.
Birgit Pauli-Haack: Awesome. Yes, cool. So there are quite a few documentation changes coming in. Some are minor, some are fixes, typo’s or grammar fixes, and then there were some code quality changes. They’re quite technical and I’m not sure user facing. Yeah, I didn’t highlight any of that.
But Dennis, you wanted to talk about the core data piece and the migration to typescript. What is it about?
Dennis Snell: Well, this is a very developer centric change, but in the past few sprints of work here, we’ve been doing a lot of work with typescript in the core system and the data system, both in the package called data and the package called core data, which gets confusing.
Basically, we’re trying to incorporate more and more typescript into the project for the sake of making Gutenberg’s internal APIs more self-documenting. So if we step back a moment and we think about what typescript is and why it’s used in the project, fundamentally types in the programming sense are about automating safety and automating bug detection.
Some of those affordances open up or at least make other avenues a lot easier to get, which is what I’m interested in. And that is the self-documenting nature, because just as types allow the computer to understand our code better, to make different checks for quality, when it understands that it can also communicate back to us. And so the work going on in core data revolves around adding typed information to get entity record and its family of functions.
So for developers who are doing things like grabbing a post from the server or grabbing a list of tags, or interacting with this entity system that exists there in Gutenberg, what these changes are going to need are a couple of major things. Number one, when you tell Gutenberg to get an entity, it’s going to tell you what entities are available to get. Whereas before, a lot of time you had to know what you wanted or start reading the source code to figure out what’s there.
And the second thing is it’s going to tell you what data you get back. So when you make that request, you’ll get an object and your text editor, your IDE can tell you what properties are available and what kind those properties are. Some of that work isn’t going to land in six, but the foundations are being put in there. And the flip side data is the same kind of stuff, except instead of focusing on API calls it’s work on the store.
So if you’re writing a block and you want to get information out, like a block list or the list of inner blocks, or the site title, and you’re using select and dispatch, what this is going to lead to is when you type select, it’s going to tell you which stores are available to select from and then it’s going to tell you which selectors are available.
And then it’s going to tell you which arguments are necessary, and it’s going to tell you the kind of data it returns. So in this process there’s been a lot of low-level preparatory work, fixing things as mundane as our documentation generator for the project that builds the docs on the block handbook, fixing different linting issues, fixing different systems, like tests, that all break in these weird, specific ways.
And there’s a couple of big PRs out there for hitting the magic, and as soon as all this preparatory work is done, those PRs will get in and people will be able to start interacting in the source code the way that you might be able to if you open up the developer console in a running site and explore what’s in the state.
The second part of that is for the most part, the effort that’s going on is what I consider the ideal goal. We’re shooting for the maximum benefit from the type system with a minimum amount of effort to use it, which means things like you won’t have to be working in typescript when you write your code. But if you happen to call, use… Or call, get entity record, or get editable entity record or dispatch editor store dot update block, or select block, what this means is that information is going to be drawn out of the core project and presented to you because almost every IDE and code editor these days is able to read that information without you having to write into it.
Birgit Pauli-Haack: So it’s actually really a tool, you don’t have to know everything because your IDE is picking up on all the information and you will see what the attributes are, what any of the additional information. That’s wonderful.
And thank you for doing all the underpinnings to that so it can come.
Dennis Snell: It’s really about documentation and lowering the barrier to getting involved in some of the core systems that Gutenberg has to offer. And in fact, while we’re making these changes, because the more we embrace typescripts type system, the more our mentality is about understanding the reality of what’s there in the code and building a mental model to work with it. So as we do this, as we have to put our archeologist’s hat on and figure out, well, what actually is expected here? What actually uses these properties? How are they passed around? It’s giving us the chance to go back and document a lot of code that was built in stages organically and oftentimes in haste.
And those documentation updates are going to present themselves when you’re writing the code. So the way we’re talking about the style, the theme style variation selector, and closing the feedback loop, this is the same thing. Let’s get people out of the source code. Let’s get people out of a handbook, and let’s put the documentation and the guideline and the instructions and examples right in your editor at the cursor where you’re pointing it or where it happens to be.
Birgit Pauli-Haack: So what are the editors who would support that? I know VS code definitely would be. What about Adam?
Dennis Snell: Yeah, it would almost be an easier exercise to indicate which editors don’t. So Microsoft’s Notepad, to my knowledge, doesn’t have support for this. I don’t think the old Unix, Linux editors, Pico and Nano, or the stream editor, but yeah, VIM and Emax will support it. Anything that’s supports Microsoft’s language server protocol will support it. All of the jet aim software supports it. Adam, Eclipse, pretty much everything universally supports it these days.
Birgit Pauli-Haack: Excellent. And now you have it listeners, we dove into the underpinnings of Gutenberg and we are not done yet, but this was the Gutenberg change log of the plugin release 13.
And of course we have the show notes in the show note release post from Adam Zielinski, and we also saw the discussion in the release font. I think I mentioned it already that the web funds API probably won’t be in the 6.0 as the feature hasn’t received any meaningful testing yet because it was just coming into parts of Gutenberg.
Yeah, and that concludes also our section what’s released.
What’s in Active Development and Discussion
And we come to what’s in active development or in discussion, and that was… Now Dennis, you posted a proposal and that’s why you are on the show actually right now, that was the trigger why I asked you to come onto the show, because you were exploring something that was missing of the… And still is, we have these… Gutenberg takes away a lot of mystery meat from the old workers, not old, but the classic workers kind of thing.
Yeah, what is a widget? What is a shortcut? What is a… All the other, the sidebar items and all that. And with a short code, there’s the handling of, okay, whatever is in a short code you can put in a block and it’s a much better interface. But there are certain things that are missing or dynamic content pieces that are in the flow text, in the paragraph, in the rich text. So that’s the overall thing. Is that what you have been working on with this Inline token proposal?
Dennis Snell: Yeah, and I’m glad you mentioned short codes because the best way right now that I’m framing this work in my head is this is like shortcuts 2.0.
So when we started Gutenberg, what we observed is that by and large short codes were somewhat abused in order to build structure into HTML documents. Now the short code system didn’t work very well, that Gutenberg post in HTML has a sister post that I wrote called short code shortcomings. That goes into some of the details about why short codes failed to build layout and structure.
So we built the block model, and the block model captures the essence of what was lacking and we all moved to blocks. Well, guess what? On the other end of the spectrum, we have some let’s call it abuse of the block model to add essentially what’s inline content, to add what short codes were really good at. And blocks live on their own, they’re heavy weight, they’re high-level. And one of the things that short codes are good at is adding something very simple, generally plain text, such as the site title, the author name, the date of the week. And so this has been a long known deficiency in Gutenberg, and there’ve been some experiments over the years to try and figure out what it means to implement a system for bringing in this other content.
And it’s content that has some identity on its own. A site title is a site title, it’s not an image block site title. It’s not a quote block site title. It’s just the site title. The featured image is mostly just the URL of the featured image, it just comes from outside of the post and it’s not tied to the block for the most part.
So in this proposal, we’re looking at ideas of how we can realize this on a technical level and gather input to figure out what people want from this system. It turns out, like most things, there’s a wide array of use cases people have in mind. And a lot of this work is just decluttering those needs and trying to identify what the different specific needs are, and if they’re actually the same or if they’re not.
So it’s really early on I’d say in its design stage, but I’m actually full of anticipation. I think this is going to turn into something that we’ll see used everywhere, and hopefully will make it trivial for people to write their own plug in to register these tokens or these short codes to change things.
People are wanting to do things like write email newsletters that include merge fields like you’d use in Word to address each email recipient, and obviously pulling in parts of your site or post information inside the loop as we build templates for full-site editing, those kind of things.
Birgit Pauli-Haack: Yeah, and I’m really excited about it. And when you, dear listeners want to follow along on the proposals, you also see that Dennis shared quite a few code examples, how this could play out. How would this play out in a plugin or in a block, or the token. Even the comments in the block, how that would show up. So it’s very tangible to read as a developer and it also helps you a little bit visualize how it can end up exactly as you said, as a merch tag in the newsletter glue plugin that we’ve for instance used on the Gutenberg Times.
So how has the reception been, there were a few comments there. What are the roadblocks there to… What’s the difficulty in the decision how to go?
Dennis Snell: There’s a lot of people working on this problem and there’s a lot of people I think that this problem is important to, and so we’re starting to get some input. And I really appreciate that. I would say where we’re at right now, the roadblock is the typical design process. This is just the way it works, and I like to repeat good designs are discovered or good APIs, good interfaces are discovered, they’re not designed.
And so it’s real easy for us to just think of something, code it up and get it working, and push it out there. And it probably does what we intended it to do in a limited circumstance, in a limited subset of all possible circumstances. And what we’re trying to do here is go a different way, which it’s funny you mentioned that there’s code examples in the discussion thread because there’s no actual implementation code yet.
I think I started prototyping some parts of these ideas a little bit, but didn’t save that code intentionally. The whole idea is let’s get together, let’s write the code that we think we wish we could write, toss it into the stew, shake it around, and see if the way that we have been talking about these ideas actually matches the model that we have when we write the code to use it.
And so I’d say one of the bigger roadblocks right now is trying to understand, is it the same problem or are there two problems in author introduced tokens? In other words, I’m writing a paragraph. I want to insert the date that the post was published, so I say, when I wrote this blog post on insert the token published date on January 13th, I was racing to get back to normal life after the new year’s.
There’s one definite concrete use case we have, but what happens if I’m writing my own block and I want my image to be able to draw its source from the featured image? Well, that wouldn’t make sense, but let’s say draw its source from some AI system that’s a plugin I wrote that goes and asks a computer to give me an image for the post. It may not be a great example, but in that context, I’ve statically encoded somewhere in the code this thing can accept tokens.
Are those the same problem? Are they different? And where’s the line between what I as a developer want to use as tokens versus what I as an author want to use as tokens.
Birgit Pauli-Haack: Yeah, I find myself as a block editor always thinking, okay, a developer would do that but do we need a UI for it? Yeah, it’s the same thing. And I like what you said that the designs are actually only discovered and not built, was that… Am I quoting you right?
Dennis Snell: I misquoted myself when I first said it, but I say good interfaces or good APIs are discovered, they’re not designed. Yeah.
Birgit Pauli-Haack: Yeah, it’s a parallel to the system bible where it says pathways to success can only be found, not made. Yeah, it’s system built and you build systems. So it’s an interesting field of tension. Do we go all in or do we start small? Where is that? Yeah, it’s interesting to see.
Well, thank you so much for the proposal and what is that… So what is it that you ask from our listeners, if they’re interested in that to read and comment?
Dennis Snell: Well, it’s always good to have diverse input. How do you use these things? What do you wish you could do that you can’t do right now? What do you do right now that is frustrating or cumbersome to do where you have that impulse that says, there’s got to be a better way to do this? And this is specifically around tokens, short codes. Sometimes they call these pills because they’re drawn with a contrasting background with rounded corners.
Google Docs not too long ago introduced the ability to insert some of these things, and various other editors have added the support. We had a very, very limited webpage title builder on WordPress.com where we used that. So we didn’t like… When you’re in WordPress and you’re telling it how to generate the HTML title, we didn’t like bracket, bracket, bracket, bracket, curly bracket, curly bracket, Omaha site title.
We found that confusing and error prone, so we built a little, a little token-based entry. And that captures the essence of what we want here, but there’s a deceitfulness in that simplicity of the end result. And so really just people sharing what they want, what they’ve seen, what they’ve done.
We have one person on that thread who actually wrote a plugin to do this in some form, and we’ve been talking back and forth, okay, are you solving the same problem as core? Are you solving a subset of it? And this is all that we can do right now is figure out what problem we’re trying to solve. And it could turn out that it’s just way simpler and I’m making it in this proposal. There could be one really simple problem and a separate, much more complicated problem that at a glance looked the same. So just talking and figuring that out is going to be the critical help and the critical way to move it forward.
Birgit Pauli-Haack: And it’s also going through the plugin repository and see what kind of solutions people came up with, and see, is it possible to do this with the token system or not?
Most probably another research angle to that, yes. All right, anything else you want our listeners to know about the proposal, about Gutenberg, about your work? Or do you have any other announcements, because I’m thinking we are already 60 minutes in, if not longer, to come to the end of our show.
Dennis Snell: I don’t need to bore anyone with more discussion, but again, I’m happy to chat in-person or on WordPress Slack. My username is @DMSnell, so if people want to dig into some technical or philosophical points about the data flow, about the block model, about the editor in general, they’re welcome to reach out to me.
Birgit Pauli-Haack: Thank you.
And Mary, you haven’t said a whole lot of things today, sorry about that. But is there anything that you on your work for the last two weeks that you would like our listeners to know that is not so much Gutenberg related, but also of course, Gutenberg related?
Mary Job: Yeah, not so much Birgit. I think I’m very quiet today, I apologize for that. Actually I went through the proposal that Dennis shared. I think it’ll be good to be able to select an image to use as a featured image every time you publish a post. Because before now, you would have to put a featured image. Like if you share the post to Facebook or I’m speaking from a writer’s perspective, it would be nice to be able to think of it as a block instead of just a featured image, because sometimes I have to go look for a code to disable featured image straight away because you do some things and then they would show them.
And then you also have your image and the person, you’re like, no, I want this one to be the featured image and not this one. So from a user’s perspective and a non-developer perspective, that’s my opinion. I think it’ll be great to have that as a block instead of just a featured image.
Birgit Pauli-Haack: Yeah, that’s an interesting use case.
Dennis Snell: Yeah, a quick follow-up to that. Part of the motivation for prioritizing this work now is being able to use these in block patterns. So a lot of times we want to pull in a pattern with default data and okay, I would really just like to plop in this page heading pattern that references the featured image or references the site title.
And so currently there’s not a good way to do that. So yeah, just like what you’re saying, but even to the next level of building reusable block patterns that we could potentially share on the marketplace.
Birgit Pauli-Haack: All right.
Well, before we end the show, I want to invite everyone. There are three calls for testing that could use your attention and also your feedback. If you get in half an hour or even an hour, test the beta WordPress 6.0 Beta 1 or next week, the Beta 2. And the instructions on how to do that are in the posts that we share in the show notes.
And of course, every time you do this, I would be available to… If you have questions at BPH in the WordPress Slack or on Twitter, my DM’s are open. And as always, the show notes will be published on GutenbergTimes.com/podcast.
And this is the podcast 65, Gutenberg times.com/podcast. And if you have questions and suggestions or news that you want us to include, send them to firstname.lastname@example.org.
Yes, that’s an email address. That’s changelog@Gutenberg times.com. Thank you so much, Dennis, for all your explanations and being on the show with us. I really appreciate all the depth of knowledge that you have.
Thank you, Mary, for coming and being our co-host. And thank everybody for listening. And good-bye.