Birgit Pauli-Haack and Grzegorz Ziolkowski discuss with their guest, Fabian Kägy Gutenberg 12.4, Developer Hours, and how to best implement extensibility of the block editor
- Music: Homer Gaines
- Editor: Sandy Reed
- Logo: Mark Uraine
- Production: Pauli Systems
Subscribe to the Gutenberg Changelog podcast via your favorite podcast apps!
🎙️ Spotify | Google | iTunes | PocketCasts | Stitcher |
🎙️ Pod Bean | CastBox | Podchaser | RSS Feed
Show Notes
Developer Hours – Register for Feb 8th, 2022 at 11 am ET / 16:00 UTC via Meetup
Community Contributions
Gutenberg Playground project by Fabian Kägy
Gutenberg Playground website
What’s released?
WordPress 5.9 Release Day Process and Party!
What’s new in Gutenberg 12.4 ( 19 January )
What’s in active development or discussed
Proposal for opening the editor interface to more extensibility GitHub Discussion started by Fabian Kägy
Query Loop: Add support for custom taxonomies filtering
Query Loop: Add multiple authors support
Allow switching global styles variations
Stay in Touch
- Did you like this episode? Please write us a review
- Ping us on Twitter or send DMs with questions. @gziolo and @bph.
- If you have questions or suggestions, or news you want us to include, send them to changelog@gutenbergtimes.com.
- Please write us a review on iTunes! (Click here to learn how)
Transcript
Birgit Pauli-Haack: Hello, and welcome to our 59th episode of the Gutenberg Changelog podcast. In today’s episode, we will talk about Gutenberg 12.4, developer hours are coming, and extensibility of Gutenberg 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, Grzegorz Ziolkowsk. JavaScript developer at Automattic and WordPress core contributor. Howdy Grzegorz, how are you today?
Grzegorz Ziolkowski: I’m feeling very excited and that’s because I have a great pleasure to introduce our guest today, Fabian Kägy. Developer at 10up, core contributor and not unknown to the listeners and traders of the Gutenberg Times. I also see that Fabian is going to lead the next Gutenberg 12.5 release. How is it going, Fabian?
Fabian Kägy: Hey, thank you so much for having me on. I’m excited to be part of this.
Birgit Pauli-Haack: Well, Welcome Fabian. So happy to have you on the show. You have been busy around the Gutenberg project, so thank you for making the time. I heard you work for the 10up agency. That’s a large agency. How are you all adopting, working, building sites around the block editor?
Fabian Kägy: Yeah. That is correct. I’ve been working at 10up for two years now and in that time I’ve not really come across an installation of the classic editor plugin. We’ve really, full on, adapted the usage of blocks for pretty much everything that you see. We aren’t really all the way into full site editing just yet, but that is also something on the horizon.
Birgit Pauli-Haack: Yeah. Not many people are yet, because it hasn’t been released yet. It’s coming though.
Grzegorz Ziolkowski: Yeah. In a few days.
Birgit Pauli-Haack: In a few days, yeah, Tuesday, January 25th. All right. So we have a one announcement. Yeah. Oops, sorry.
Grzegorz Ziolkowski: Yeah. Be before that, I just wanted to ask, Fabian, how do you find time for contributing to Gutenberg? You are very active on that field.
Fabian Kägy: For me personally, that is split, I have some overhead hours dedicated to contributing, so part of my time that I spend on open source is actually sponsored time. Currently, there’s not too much that you can do in the winter and in these weird times that we’re living in and so it’s just something that I enjoy very much and something that I’m passionate about. I want to do as much of that as I can.
Birgit Pauli-Haack: Yeah. It’s wonderful. Well, thank you. You’re one of the rising stars here.
Grzegorz Ziolkowski: Yeah, definitely.
Birgit Pauli-Haack: And the Gutenberg project. Yeah. So we are glad you’re here. Okay.
Announcements
Grzegorz Ziolkowski: And now we can go with the announcement, right? So developer hours, hurray. So Birgit, can you tell us more about the idea?
Birgit Pauli-Haack: Yes. We will start developer hours next month. And it’s been a while that I published a proposal on the core block about this idea. I think it was back in October. So briefly the format is we will have a panel of free community developers and contributors and a short educational segment and then we open the floor for questions and discussion.
This event is mainly for developers learning and working with blocks or the editor itself. You can bring your questions, code samples or bugs to the panel and Screen Share and we’ll try to help you out. Well, the panel will help, not so much me, but the panel will help you out. And you can also bring you ideas like, “I do this plugin for the classic editor, how would I approach it for the block editor?”
These are actually some great conversations that we are looking forward to. And we have a fantastic group of volunteers right now and among them, of course, Grzegorz and Fabian. Thank you. And also thank you to Tammie Lister, Nick Diego, George Mamadashvili, Daisy Olsen, and Joni Halabi, who will join in on different days.
The events will be announced on the core Make Blog on the Gutenberg Times and the meet up, because they all will be located in the WordPress social learning group. So if haven’t joined that yet on meetup.com, do it now and you get automatic notification when it’s live and of course you follow Twitter. If you want to save the dates, now that you are hearing this on the podcast, it will be…. So the four events are trial events and Tuesdays, every other week. February 8th, February 22, March 8th and March 22nd. Always at 11:00 AM, Eastern 16 UTC.
And after the four trial events, we will open them up to other time zones and days and we’ll all come together and kind of figure that out on the team. Yeah, that’s it. I’m really excited about this. I’m actually kicking around that idea since September, 2020 and kind of, yeah, the bandwidth for it was just not there. And, yeah, a lot of people were not in the situation where they could do additional hours spent with other people. So there was also the Zoom fatigue. Okay. Yeah. But I think we’re good now. All right.
Grzegorz Ziolkowski: Yeah. That sounds very exciting. Can you tell more about the format, in a way, where it’s going to be available would be that YouTube, I don’t know. What other platform people would be able to follow?
Birgit Pauli-Haack: Yeah. We are not quite sure and we need to talk to the attendees on how they feel about recording things, because if you share code samples that might not be available for public consumption, so we need to kind of see that they are…. There will definitely be a follow up on learned lessons or what was discussed and if there were solutions which were provided, but for now, especially in the test trial, I think it would be good to maybe only record the educational segment. And when I say educational segment, what do I talk about? It’s more like, so how to add block variations or how to create dynamic blocks. Yeah. So smaller things, but that are really in the mind of a beginner developer. Also, how to add block styles, these kind of things. Or another one debugging JavaScript. So we will kind of have them in there and then that’s maybe 15 minutes and then the rest of the hour will be just open floor and who comes in and has a problem.
We do a round robin kind of, so everybody can talk about what they brought or what they are interested in and then we moderate that through the panel. Yeah. It’s going to be a meeting, not a webinar kind of thing, so we all can share screens. And so when you have something like a bug that you want to show, yeah, or a code segment that we can do this with the screens share on zoom and afterwards we have at least some blog post about it. So we know everything that was learned in this 60 minutes.
Grzegorz Ziolkowski: It sounds like a local meet up, but held online. So I like the format. It’s really exciting, especially because we don’t have so many opportunities these days to meet other people in our area, which is great. So that’s great that you were able to finally set the dates and organize everything.
Fabian Kägy: And the group of contributors that you got together to help out is really incredible, is really strong. So I’m really looking forward to also just seeing what’s being shared in all the sessions.
Birgit Pauli-Haack: Yeah. And for listeners, if you don’t have a problem, yeah, it might be something that you just want to hang out amongst developers and, yeah, shoot the breeze if nobody has, but we are still there. So, yeah, we can all have some discussions.
Community Contribution
Speaking of discussions, we have a community contribution and it’s a project you actually are experimenting with. Grzegorz, you want to kind of take us into that.
Grzegorz Ziolkowski: Yeah. Actually this is the project that Fabian started. And so the idea is that, now we have the block editor handbook and other resources, which contain a lot of APIs code examples, but all of them are static. So the challenge for many developers that they cannot play with that they need to set up the whole environment like WordPress and have Gutenberg plugin, to start playing with the code, tweaking some lines of code and seeing how it impacts the data. So Fabian had this brilliant idea, let’s make Interactive. There are so many tools out there that help with that and maybe Fabian will tell more about the thing you figure out.
Fabian Kägy: Sure. Definitely. Yeah. Well, actually taking a look at the new React Beta website, where they’re kind of relaunching their entire documentation. And one of the cool things that they are doing over there is showing live examples of React Code on the website, where you have an editor open and can actually explore and play with the code right on the website. And knowing that one of the common complaints that we see and hear from folks looking at Gutenberg documentation is, just getting set up initially is a hard thing. You have to make sure you have the correct node version installed.
There’s so many things to get your local set up correctly and if you are just starting out, if you just want to learn and understand how ‘little efforts,’ it actually is to get a block up and running or to do something there, that is a blocker that I was curious, whether it could be solved. And that is what this exploration is about. It’s using a code editor from CodeSandbox in that case, the online editors and embedding that in the page and that shows a split screen between your code editor in the browser. And then the code needs to compile in order to be previewed and that is all happening in the browsers. You have your code editor on once side, live preview on the other side and if you change something in your code, you see the live preview rendering in the browser.Birgit Pauli-Haack: It’s a little hard to describe, but I think you posted a great job in doing this on an audio podcast. And I have the pleasure to have Fabian walk me through this a little bit more yesterday, because I had no clue what that actually would do, but now I get it. So the project’s name is Gutenberg Playground, and we will have in the show notes, the site that Fabian put together as well as his code to put it together on, on GitHub. So, it’s not only good for documentation as I understood it, you could also use a similar system for tutorial. So if you are working in an agency or you are a trainer or you just want to share a little bit more interactive, what you learned about block development, you can add that also to your post once it’s a little bit more finalized. Yeah. I think Fabian, you told me yesterday, you’re still working on quite a few tweaks to make it available, to also work with a more complex coding and concepts apart from the HELLER world examples.
Fabian Kägy: Yeah. Definitely. Yeah, this actually really just started out as this exploration of, is this even possible? Can we live compile Gutenberg in a browser? And that is all it meant for initially and now the next stages, once this has now been proven it is working, well, it isn’t the fastest and there are definitely many improvements, the next steps for me personally, with this are actually taking the code that is on that example repository and trying to put that into a block, let’s say, where you could put that on your website, if you’re writing about Gutenberg stuff and if you’re teaching things with it. Yeah, just allowing you to embed that on your site and having those live examples embedded in your post.
Birgit Pauli-Haack: Fabulous. Yeah. If I hope it works out that way, as you envision that, so it gets to a point where many people can use it or we can actually discuss it on the documentation and code team to maybe help implement it also there. All right. Cool. Do you wanted to say something additionally, Grzegorz?
Grzegorz Ziolkowski: Yeah. I wanted to say that the Gutenberg project itself, the contributors are using this tool called Storybook, which is more for designing the react components, in this particular case, which allows you to browse all the components. However, the challenge with that is, that is a large collection of those components, which is very hard to navigate, for someone who doesn’t know what to look for. And it is completely separate, so you don’t have this connection, which Fabian is trying to solve here.
Birgit Pauli-Haack: Yeah. No. And it’s definitely a good resource for developers who just want to see how the components are working and what attributes they’re going to need or want or can, optional or default ones. I think that’s not a resource that’s also well known in the developer area, so I’m going to share that also in the show notes, the existing Storybook that is also on GitHub. I love the creativity, now that there is so much tooling going on. Yeah. The theme team also has this create this block theme out of the box on the theme dish experimentation. And I know that there’s also the block JSON Builder from David Guire just, yeah, getting better and better every week. So there’s quite some tooling now available for developers and Gutenberg and I love that.
What’s Released
All right. So we are getting into the What’s Released section of this podcast. WordPress 5.9 is around the corner, Release Candidate 3 is out. Keep testing your plugins and themes for compatibility and post bugs you find. They are probably not going to get into the release anymore. And Tonya Mork, the release coordinator did a marvelous job rallying all the trips for each release, the Beta releases and the Release Candidates, as well as managing the change of schedule. And she invites you to observe or participate in the final release party on Tuesday, January 25th, at 1600 UTC, that’s 11:00 AM. And it will happen at the WordPress core channel, WordPress Slack. Bring your own favorite beverage, or cookies. So, and then there was Gutenberg 12.4 was released. Grzegorz, you want to lead us into that.
Gutenberg 12.4
Grzegorz Ziolkowski: Yes. So the release was led by Alex Lende and it contains several new features. It wasn’t a big release, mostly because core contributors were busy with preparing the major WordPress release. However, there are a few things to tell about, but first maybe you will tell about the new section that was added, which was a big surprise. And I really like that and big it. Yeah.
Birgit Pauli-Haack: Yeah. I like that new section and Hector Pietro, he also did it in the core editor meeting. There is props to new contributors giving kudos to the first time contributors that joined during the last release cycle and for 12.4, it was Alberto Marin from Suffolk in England, Emir Ugljanin from Serbia and Mike Auteri from New Jersey. So welcome as contributors. And if you are interested in contributing just the shout to the regular weekly meeting for the core editor teams, Wednesdays at 1400 UTC, that’s 9:00 Eastern, in the core-editors channel, in the WordPress Slack. So now go ahead with the release. I just wanted to put this out there.
Grzegorz Ziolkowski: Yeah, that’s great. I think the same shout out for contributors is shared for the WordPress, PHP part of core. There is this weekly update and it’s always a list of new contributors, which is really great and I’m happy that we finally have that for Gutenberg as well. And speaking of new features. So the first one that I wanted to talk about is for the post excerpt. So before, if you had, for instance, a query loop that contained at list of posts and you had post content, you had to remove this block and insert a poster excerpt instead. And now there is this challenge form option that allows the users to switch between those two at will. So that’s a really nice user experience comparing to the old behavior that we had.
Birgit Pauli-Haack: Yeah. So, yeah, I really like that. And I think they’re also working now on transforming other content and to make them available, so you don’t have to switch out the blocks and lose content.
Enhancements
There were also some accessibility improvements in the Block Inserter 1 and the other one was for the list view as well. And it just kind of makes it better the Block Inserter to have a… It needed a close button. It wouldn’t display all the time for the screen reader. And then the list view part.
Grzegorz Ziolkowski: For the list view, it’s not only the close button, but also the escape key, when you press that it closes the list view. And the other thing that was improved, the focus, we will return to the button that is opening the list view, which is a great improvement when you don’t see the screen, because it’s much easier to orient yourself what you’d have to do next and whereas in the past the focus was lost and it was just randomly put on the page.
Birgit Pauli-Haack: Yeah. Makes sense. All right. Next, Fabian.
Fabian Kägy: Yeah. One thing that I really liked to see in this release is adding an upload states to the audio block and outside of just this item, there was also some discussion in the editor chat this week, about a similar thing of just improving the upload states and the failure states of media handling in general, with the image component, for example. If an image isn’t accepted, how all of that is treated. I think it’s great that it’s getting more robust, how Gutenberg is handling, not just the happy path, but all these different other behaviors, when your network isn’t so fast and the upload takes a little longer and so forth.
Birgit Pauli-Haack: Yeah. And there are hooks in place on the PHP side, like the WP handler upload pre-filter, where you could add error handling as well and error messages and they wouldn’t show through on the Gutenberg editor. Yeah, there is another issue in the repository that is worked on, for not only the audio, but also for image of uploads and other media uploads. Excellent. Yeah.
Grzegorz Ziolkowski: This media, it’s also very interesting, because in practice and the browser is capable of processing the audio before it gets uploaded to the server. So you can see the media, however, this loaning indicator just ensures that people know that the processing is happening in the background. So that’s just wanted to clarify that. The same would apply to images. You see them immediately, but sending the server might take some time, depending on the connection.
Birgit Pauli-Haack: Yeah. And I think for images with a new gallery block or the refactored gallery block, there is some additional handing of image uploads that are previews, so it might confuse users that they think it’s already uploaded, but it hasn’t, so they are not closing things.
All right. So what I also like it’s an update now for the Tag Cloud. It now has an outline style. So Tag Cloud is the list of tags. Previously it was in a widget, where the font size was determined by how often the Tag was used and some designers don’t like that very much, because it can’t be controlled and now with the outline stage, you can just have a list of tags, but then there are all outlined like a button. And I really like that. The views in the PR look quite nicely and it also adjusts the box, depending on what font size you use and uses all the gaps and all the nice features from display on the front end. There was some testing to be done for that. How it works with normal themes out of the box, so a theme designer doesn’t have to design anything for it, so still works. And there was some testing done, but it could probably use more. So if you’re a theme developer and look at that and see if it works for your design.
Grzegorz Ziolkowski: Yeah. This block reminds me all the times when internet, it was all about flicker or issues and services like that, which was the killer feature of the web tag cloud.
Birgit Pauli-Haack: Tagging. Yes. But I also like it when the blogs have it in the sidebar or somewhere, because apart from the categories, you see what really the emphasis is of a blog. Because, some bloggers have all kind of different topics on their blog and you are only interested in, for instance, the WordPress ones or just the photography ones and you can quickly discover all those. It’s still important and relevant, so I like that they give some more love and care to it.
Grzegorz Ziolkowski: The next one is change the publishing flow. It’s An addition. So we already had an option to suggest that user didn’t add taxonomy to the post and this one also brings the same priority for the category, so if they doesn’t pick any of them, then it will just say, “Maybe you should do it and consider that.” And, yeah, when you unfold the section, you just see the same category picker as you would see in the sidebar when dealing with the post or page.
Birgit Pauli-Haack: Yeah. I really like that feature. It’s a little bit, kind of, mommy kind of thing. Yeah. Kind of reminder, but how often have we published something in the uncategorized category? Yeah. It’s kind of a little dorky. Yeah. And some people have for each site, kind of, a different method, what they do when they implement a new site. We have, for instance, change the default category. We created a news category right at the beginning of any website and then switch that over to the default category, so nobody would actually publish in an uncategorized category, but normal blogs wouldn’t do that. So this pre-published suggestion is really nice. Of course, and it’s in the second published step, so you could certainly switch that off completely if you don’t use the second step on the public’s workflow, but this certainly doesn’t have an off switch right now. So maybe we should think about every new feature we have, needs an off switch because a lot of people don’t want it. Yeah.
Grzegorz Ziolkowski: Yeah, that’s true. As far as I remember, you only can disable this step, but not tweak how it looks like.
Fabian Kägy: Yeah. the next item I see on the list is, regarding the site editor and that is actually also a feature that not everybody knows about or is too familiar with, the actual keyboard shortcut help modal, which is something that you can access using the ellipsis button in the upper right corner, but this has now also gotten its own dedicated shortcut to open this very quickly, which is either control option H on macOS or control alt and H on windows.
Birgit Pauli-Haack: Excellent. Yes. Yeah.
Grzegorz Ziolkowski: It’s sort of a chicken and egg problem, because you first need to know the shortcut to open this modal to learn about the shortcut and other shortcuts.
Birgit Pauli-Haack: Yeah. And that’s our job. Yeah. Right? We point people to things that they don’t know yet and try it out.
Grzegorz Ziolkowski: Yeah. But there’s also pretty standard shortcut. So if you try the same combination for other websites, it’s very likely that something will pop up.
Birgit Pauli-Haack: Mm-hmm. Yeah. There was another discussion on GitHub repo, where somebody wanted to try the shift on H or something like that, shortcut to convert from the classic editor, to convert a line of normal text into a heading and was trying that out in the block editor and of course the classic editor, well, I say, of course, but it’s kind of me four years block editor experience, but if you use it for the first time, it’s not so much, yeah, self explanatory that the shortcuts from the classic editor wouldn’t work in the block editor, but there’s another way to do this. You can either do /H if you don’t have written it yet.
/H gives you a heading block from the keyboard shortcut. If it’s already a line that is in a normal text paragraph format you just go to the beginning of that line, hit the pound sign twice to get an H2. So twice pound sign space and then it automatically converts the paragraph line to a heading line. So that’s a different way to get very fast to your headings. The user who had this problem had to do 50 or 60 headings a day. So he’s really using that shortcut.
Fabian Kägy: All of the markdown related shortcuts in Gutenberg are really something that make me happy every single day, because I’m used to writing so much in markdown and just doing the same thing in Gutenberg. It just works.
Birgit Pauli-Haack: Yeah. It’s a more technical thing. Yeah. I know that there are quite a few writers who are also developers who have been developers, they use markdown, but it’s not so much something that other bloggers are using. Yeah. And I like the technical term, the markdown markup. Yeah, kind of it’s, “What now?” Yeah. But, yeah, it’s true, yeah, if you want to do very fast lists and create lists or, yeah, heading and image inserts. It’s sometimes easier to do it via keyboard rather than wire interface.
Bug Fixes
All right. So we are getting through the bug fixes and there were a few bug fixes. I haven’t counted them, but that looks like more than 30 or 40. And one of them is that the refactored gallery also has a migration script that converts gallery block from the first version to the second version, to the new version and it now also passes all the custom attributes that come with it, to the new gallery block. I think there were some major hiccups and that has been resolved with the 12.4 Gutenberg plugin now. And it will be, I hope in the next minor version of WordPress release that is somewhat around the corner already 5.9.1.
Grzegorz Ziolkowski: And just to remind our listeners that gallery version 2, it means that this new approach is using inner blocks, which means that inside the gallery block, there will be image blocks that you can rearrange the way you want and change the same way the regular image block works.
Birgit Pauli-Haack: Thank you for pointing that out. Yes. You have all the features like duo tone, and cropping, and resizing and all that, so this is really good. And I also like that you can have different styles on the image for each picture there. So you can use the round style for, yeah, speaker heads or something like that for conferences. Yeah. One of the bug fixes also was that the query loop now uses the gap feature for the grid views, so that has been now resolved and it can now be handled like any other gaps for the columns or the media text blocks.
Fabian Kägy: Yeah. Another item on the list that I found very interesting is, it was reverted that the paragraph block itself supports picking your own font family and I, digging into this, found the rationale behind it quite interesting, because it is so that is definitely on the horizon and something that we want to get implemented and added to the block, but right now, because there isn’t a robust solution to adding custom fonts into, kind of, that dropdown menu. It just isn’t super useful currently. And so that is why this decision was made to take out this relatively recent edition again and, yeah, revisit this in a future point when the new font registration API that was just cut out of WordPress 5.9 will eventually make its way into the Gutenberg plugin.
Birgit Pauli-Haack: Yeah. We mentioned it in our last changelog and even had it in the listener question. Okay, because it’s not a good user experience to just select between system font and nothing, so the designers are working on a better user experience. And I think it’s a good decision to wait for the web funds API, yeah, that was cut from 5.9, because it needs more testing, but I hope they release it soon, so we can have it in the Gutenberg plugin for a few user testing cycles as well.
And then for the colors, there was one thing, there was also a big boo boo, so to speak. The coloring panel for the customizer to select colors wasn’t usable in right to left languages, because there was a double double handling. It was first handled through the CSS and then through the package and so it wouldn’t work on right to left and that is fixed now and works brilliantly now in Hebrew and Arabic and other languages that are read right to left.
Grzegorz Ziolkowski: Yeah. Another change that was out that is related to the templates API, but it’s more about the case when you want to define a template for your content. In post or page, you are able using PHP to define inner blocks, now they all block templates that will be embedded by default in the editor. So for instance, let’s say you want to have custom post type called books and you will just provide paragraph heading and image and so on.
So the issue was that whenever someone would provide a block that no longer is registered on the page, it wouldn’t bring very bad experience. So this one fixes that by ensuring that the proper messages displayed to the user, instead of having some broken HTML or something like that. So we will see the same message when you see whenever you uninstall and the other blocking other place, that block is missing. You will see the name of the block. I hope that in the future, if the block is inside the block directory, it will show the link, so you could install that block back. Maybe it’s implement. I haven’t checked that, but looking briefly at the PR it didn’t look like it covers that, but yes.
Birgit Pauli-Haack: Yeah. The missing blocks that happens definitely when you deinstall a plugin that you were using before. And I think a good block manager feature that shows you which block is used, how often, would also help a user making a decision on installing a block plugin that they don’t know if it had been used on the site before. All right. Yeah. But I like that the user handling is not so much better, the messaging, but you’re still losing some content, so I need to test this a little some more if there’s some, yeah, that you can take care of, the non content loss.
Grzegorz Ziolkowski: Yeah. And there is also good news for people who don’t remember the shortcut to the help model. There is also now, a link in the drop down menu that you see on the top right in English, when you are browsing in English and it is just the help item in the menu that allows you to open the same dialogue.
Developer Experience
Birgit Pauli-Haack: Good. And then in terms of developer experience, quite a few things that we wanted to talk about here, the first two are about the JSON file Schemas for block and theme. The JSON schema now has properties to control font size, and the theme. JSON now allows for per block management of the settings and the fix has been done for the appearance tools, which you can say to false, if you don’t want users to be able to control some of the settings or styles for your site. So these are the three PR for that.
Fabian Kägy: Yeah. And the second item of that list, the updating the theme JSON Schema to allow per block management of the settings. That is actually something that is very useful when you’re building stuff with the theme JSON files, because by default, when you are trying to override settings on a power block basis, you’re getting all of the options that theoretically could be supported by a block, but it doesn’t list them of whether that particular block actually supports that or not. And this is something that Ryan Welcher is working on here, just to get better alignment of what the block actually supports also into the Schema.
Birgit Pauli-Haack: Yeah. Ryan does quite a few work behind the scenes for the JSON schemas. So, yeah, thank you. Shout for Ryan.
Fabian Kägy: For the custom name. I don’t actually know too much about the feature. I can talk about the dependency stuff, but for the custom name… And since you worked on both of these,
Grzegorz Ziolkowski: We have also changes to the Create Block tool. They are still not published to NPM, so you need to wait a few days until it’s available. So the first change is for supporting multiple blocks when you scaffold your plugin. And the challenge was, for now, that you couldn’t identify which part of the templates you had, are for the block and that was raised many times by developers using that tool and now is possible to do that with special configuration flag. And that also will allow us to Create Block JSON for every single block, so you will have an option to have multiple of them. And the other change that was introduced there is something that Fabian might know better, because he was one of the people arising this issue.
Fabian Kägy: Yeah. That is, when you previously installed and scaffolded a package using the Create Block tool, it took quite a while for you to get through this installation process. And that was mainly because previously to this fix, we were including all of the WordPress packages in the actual theme, not JSON file and so they were all being downloaded from NPM. And what’s interesting about this is that the way that the block editor works in regards to all these different packages, is that pretty much all of them are bundled in WordPress and are made available through the window object and so these packages that are installed via NPM, don’t actually get used in the block editor.
One of the benefits of having them is that your actual code editor can pick up some more intelligent code suggestion and if you want to do end to end testing, it is useful to have that there, but it is needed for the block to work and it made the experience of first getting started with creating your block quite slow and less ideal. And so looking at the trade offs of those two approaches, it’s the right decision to, yeah, make it so that you’re just up and running faster and you can install them if you want to, at a later point yourself.
Birgit Pauli-Haack: So is it a separate attribute?
Grzegorz Ziolkowski: No. It just works on Create a Blocks.
Birgit Pauli-Haack: It’s built-in, so if you do Create Block, you get all the questions, but it also doesn’t download all the node modals. Okay.
Fabian Kägy: Yes.
Grzegorz Ziolkowski: Yeah. Also based on the feedback, people who knew why those packages shouldn’t be there, they are also aware when to use them, so let’s assume for now that this default approach is better, because if someone is going to use Linter, then their Linter will complain that the package is not there, so just an example of that. If you start importing the package, it will be not installed, so you will get feedback as well. So I agree that it’s a trade off, but it’s for better.
Birgit Pauli-Haack: So there was also a recent change to the Create Block scaffolding, where there was a web pack feature in there, there was a fast reload that does automatic build, that wouldn’t interfere with that either.
Grzegorz Ziolkowski: No, not at all. Because, when you are developing a block, you don’t change all the scripts that WordPress provides, say like blocks or components or block editor packages that are converted to script handles. So it’s something that is set in stone, you don’t touch it at all, you just consume that, so you don’t have to worry about that.
Birgit Pauli-Haack: Yeah. That’s a nice change. Congratulations there. Yeah.
Documentation
The next items are now in the documentation section of the release and the changelog, and then there was one for the automated theme. JSON reference documentation was added to it, the automation script that renders the documentation now has all the information from the theme JSON, including the explanations for it. So that’s definitely a good improvement there.
Grzegorz Ziolkowski: Yeah. I’m looking at the generated page now and it’s very similar to what we covered last time for blocks. It’s just scanning all the options that team JSON has and generate something that is nicer for people to read. So it just provides all the options on one page.
Birgit Pauli-Haack: Yeah. That’s really good. Yeah. So we can all look it up. What does it all mean?
Grzegorz Ziolkowski: The experience is getting much better with every release, because now you have support inside IDE, if you are using visuals studio code or sense tools, stuff like this PHP storm, for instance, you can install extensions that are able to work with those Schemas, but also if you just wants to go to the browser and look for things you have now also better ways to do that.
Birgit Pauli-Haack: Yes. And that sounds a part of the developer experience. The next thing is that now for the JavaScript APIs that are removed, it will list also which WordPress version was it removed, so people can kind of organize themselves around that. I really like that there, because, as a developer, you also have to support older versions of WordPress. So knowing which version has what and not, is definitely helpful.
Grzegorz Ziolkowski: Yeah. I’m seeing that there are a few old APIs added to the WordPress 5.3 that are scheduled to be removed either in WordPress 6.2 or the version after that. So it’s not in the near future, but it’s just preparation, so there would be message on the JavaScript console in the browser saying that, “You are using something that won’t be supported anymore in the future. So plugin out.” Or, “Scan update their code.”
Birgit Pauli-Haack: Yeah. Very important. Yes. So 6.2, what’s the chance that’s going to be released this year. I think it’s relatively good, but it might be next year. Yeah.
Grzegorz Ziolkowski: Yeah. It still isn’t decided whether there will be three or four leases this year. So more likely 2023.
Birgit Pauli-Haack: Yeah. So there’s another year for those. Yeah. Josepha Haden Chomphosy, she had a post on the make blog about the release schedule for 2022 and was collecting comments and she hasn’t published the outcome of that yet, but I think she’s very much in the works of it. So when we are recalling the next changelog podcasts, we probably have some more information about that. All right, what’s next? Are we through? No, we still have a few things.
Code Quality
Grzegorz Ziolkowski: It still part of the code quality part. I think it’s a change that improves the readability of the code inside the block API, in particular, for block passing. It’s now in separate stages, but I don’t think it has any implication on how it works.
Birgit Pauli-Haack: Not on the implication on how the block works, but I think it’s easier to dissect the depreciation code that you… If you change a block in the next release, you need to have a section in your block for the depreciation. And I think that tripped quite a few developers up, because it wasn’t really clear what works and what doesn’t work and it wasn’t consistently working. So they switched to dynamic blocks where the rendering is actually done in PHP and any change to the render would just be applicable to all the front end, where the block is used. I don’t think it takes care of that, but at least you’re not getting these large error messages, but that’s certainly something that trips up quite a few developers, I would think.
Tools
Grzegorz Ziolkowski: Yeah. And we are now in the tools section and there’s one interesting change. There is WordPress environment tool, in short wp-env and the change that’s there is that, in Gutenberg, there is no longer at 2021 blocks theme used, but instead there is now empty theme, which is interesting name, but the idea is that that is just the smallest amount of code you need to create a theme, and it’s used now for automated testing. And the reason for that was that every theme has opinions and can change font, colors, gradients, and the list goes on. With theme JSON is like the list is so long that you can change whatever you want. And for automatic testing, you want to have a predictable state, so this is the solution for that. But also it’s interesting because everyone can go to the Gutenberg repository, find this empty theme and see how easy it’s to create a new theme now.
Birgit Pauli-Haack: Yeah. I’m definitely going to check that out.Fabian Kägy: Another great enhancement in the built tooling section is for the WP scripts package, there is a new command that was added in this release that allows you to create zip of your plugin. And that is something that has always been painful, especially these days with the node modules and these source files and all those files that you don’t actually need to submit or need to upload to WordPress. And this new command now allows you to automatically just take the build files and the PHP files and kind of the assets that you need and automatically create a zip file out of that that you can use to upload your block to your own site or submit to the repository and that is kind of cool.
Birgit Pauli-Haack: Yeah. I really like that. And I think it was the first thing that I said to Greg, when I was first playing around with the Create Block scaffolding. Well, we could use a plugin ZIP right from there, because I wanted to test it out on other sites and he said, “Yeah.” But sometimes it takes a while and some patience, because there are other priorities, but I really like that it’s in there. So I also have a little blog post on my personal Tag blog about that, because I was so excited when I was testing the PR of it, that it’s now available and it also has links to… Is a 10 up? That has this deploy tool from GitHub to the WordPress repository, because not everybody is fluent in SVN. So I have a link there as well. I’ve shared in the show notes, so you don’t have to go through, because it’s just a small post about that, so you can now…
Grzegorz Ziolkowski: Yeah.
Birgit Pauli-Haack: Yeah. Go ahead.
Grzegorz Ziolkowski: From my perspective, it becomes a bit annoying that there is no easy way to take your block and validate its content against the block directory. They have a special validator and so it allows you either to provide a zip file or GitHub repository. Creating a GitHub repository when you are just playing around is just too much, in my opinion, so this solves all the issues. Also, if you want to submit a plugin to the plugin directory, you also need to have a Zip file to start the process before the SVN magic has even created for you. So yeah. I guess, it’s going to be very useful.
Birgit Pauli-Haack: Yeah. I’m really…
Grzegorz Ziolkowski: Yeah. And again, this is something that will be published next week probably on Thursday or maybe Wednesday evening, depends how the things go with the Gutenberg plugin release.
Birgit Pauli-Haack: The plugin is already released. Right?
Grzegorz Ziolkowski: I mean the Gutenberg…
Birgit Pauli-Haack: Oh, the packaging.
Grzegorz Ziolkowski: Yeah, that. So it all depends on Fabian, in fact, because he’s in charge of 12.5, so whenever he’s done with RC 1, then the packages will be published to NPM.
Birgit Pauli-Haack: All right. Cool. Thank you. And this concludes our Gutenberg Changelog part of our podcast.
What’s in Active Development or Discussed
And we’re now coming to a section, which we omitted in the last few Changelog podcasts, because we had so much other things to talk about and I’m really glad that we can go back to the sections what’s in development and what’s discussed, and I’m glad we have Fabian on the show today and there was a reason for it, not only for the Gutenberg playground. So you posted a proposal on the GitHub discussions for opening the editor interface to more extensibility. It’s a long post, but could you summarize it for our listeners, Fabian?
Fabian Kägy: Yeah. Of course, I’d love to. It is a proposal going over, especially in custom builds in the world that I’m coming from in these custom client builds, there often are problems that we need to solve for that aren’t really right for everybody. That isn’t something that the Gutenberg plugin should do by default, because it may be too confusing or too specialized of a use case. And in a lot of those cases, it just comes down to needing to be able to have slots available in Gutenberg or have APIs to extend and change the core behavior.
And that has been something that purposefully has been kept very closed for a long time, and there are very good reasons for it because it can very badly hurt performance, it can make it very difficult to maintain the project long term and so I’ve created this discussion to start a thread of just, yeah, a place where we can collect issues that we’re running into, collect thoughts of, “Hey, we’d like to be able to do this kind of extension.” So that we can hopefully may maybe come up with solutions of how we can not hurt performance and these goals of the project, but still allows some more customization.
Birgit Pauli-Haack: Well, thank you.
Grzegorz Ziolkowski: Yeah. I think that there is an answer from Riad on the discussion on GitHub that pretty much summarizes the reasons why core team was so conservative about limiting the number of new extension points. In short, my version of that is, because full site editing project or in full motion and if you look back and see how the interface changed, if you would open too many places for extensions, we would have to keep similar interface to ensure that all of the plugins that modify that still work. It’s a bit sad that we didn’t do that here, but now we also are in a good position to collect all the use cases that plugin outers have, and together think about the best approaches for that.
And so in the past, it was much easier to extend everything, because it was based on PHP and the flow was easy, because you just run some PHP modify think and you output some HTML code. Whereas in the block editor, everything is interactive. So it’s not that simple to apply the changes, because it needs to be done in the right time and reapply it after something else changes. So it needs much more thinking. Well, I think we will do that eventually, but we are looking for feedback on this GitHub discussions from all the plugin authors, because this will help us to drive the development. So thank you Fabian for starting something more broad, because we had a lot of issues created in the past, but they were oriented for this particular cases, user head, and now it’s time to collect them together in one place and think, “Okay, what next?”
Birgit Pauli-Haack: Well, thank you. And this is the call for you, dear listeners, if you have a certain use case that you would like to tackle with the block editor, but you didn’t see or find the right place yet to tab into it, like a hooks or a filter, yeah, now would be a good time to, if you haven’t yet, create an issue and add it to that discussion so the developers can kind of really collect all their use cases and think about, “Okay, what would be the right approach.” But I can see how it takes a while to be ready for that when you have a moving target. Yeah. And if you don’t know yet how this all works, that there’s a lot of development that went back to figure out, “Okay, now this is a block that works in the post, but it doesn’t work in the rigid editor or site editor. And now you have to change it.
If that block would have a filter or a hook to be changed, yeah, all of the backwards compatibility would kind of stifle this new development already, in a very early stage. So I really see how that was a hold close to the vest, but yeah, starting a discussion is a really good way to start also the process to getting this opened up a bit more for the extenders.
All right. Thank you very much for putting this out there. In terms of the extension, there are two things in the works and I got them from the core editor meeting. Nick Seguras has an update that query loop block now supports custom taxonomies. That was certainly something that, yeah, when you have custom post types, you also want the custom taxonomies being available to the block editor and that is now available in the Gutenberg plug in, so it can be used furthermore. He also added support for multiple author filtering, in the query block. That was also a request from a few site owners that have multiple editors that coming through, actually, be able to have separate editor pages, for instance, where this is helpful.
Fabian Kägy: Yeah. And especially for the query loop block and all of the new things like now, custom taxonomy support, looking at the pull request, this is the first step. This was now merged in and the query loop block now supports those custom taxonomies, but the UI is still something that definitely is looking for some refinement. And there have been some great actual discoveries into this. I think Sean Andres did some great experimentation with how the pattern that we see in the dimension panel, and also the font panel in Gutenberg, where you can toggle on or off different features, like how something like that could be included in the query block. And I think there are definitely some movements going on, on that query loop block that may be in interesting to see how far we get by the time 6.0 gets released.
Birgit Pauli-Haack: Yeah. And that’s exactly what Nick also said that he really thinks it needs particular testing and for any regression and also, yeah, kind of buck fixes or bug reports would be really helpful to get it to the next stage. This is just the first version. As always in WordPress, first versions are minimal viable product. Yeah. It works somehow, but there it’s not yet the final stage.
Grzegorz Ziolkowski: There is also another work in progress that was rise by Jorge Costa. It’s actually proof of concept that was developed by Riad Benguela. And the idea is that, right now, when you have a team, you have global styles. However, the intent is that it would be great if you could just switch only the styles part and leave the rest of the theme the same. So what’s being explored is a special picker or switcher that shows different variations of the same theme that changes fonts, colors, and stuff like this. Let’s say in the far future, you just have your own taste for colors, fonts, and so on, and you just install that in your theme and you can check whether that works together. So I think that’s a really promising and exploration is happening and, yeah, we are looking for feedback and see how people like it. And it’s also quite similar to the demo that was presented during the State of the Word where Matt was playing a video that showed this idea that the same thing, how different it looks if you just switch colors, fonts and so on.
Birgit Pauli-Haack: Yeah. and I think that’s the part that was still missing from FSC and now it’s merged with Gutenberg trunk, so if you use the Gutenberg nightly, that comes out of the Gutenberg Times, you should already be able to test it with a normal plugin, zip and, yeah, send in your feedback for that. All right. Is there anything else that you want to talk about? Any reminders or announcements or something you didn’t get a chance to talk about, Fabian?
Fabian Kägy: I don’t think so. I think we’ve covered pretty much all the items that I had on my list. I think it’s, again, a great call out for anybody who has opinions and thoughts or examples of what they weren’t previously able to do, because there wasn’t a slot for something, just to add those items to the discussion, because it is super useful and we can only get this right if we have actual examples of what folks are trying to do. So I’d encourage everybody to add their thoughts there, but outside of that, I think I have everything.
Birgit Pauli-Haack: All right. So if people want to reach you, how can they get in touch with you, Fabian?
Fabian Kägy: You can find me always active in the WordPress Slack, and of course on Twitter @FabianKägy. Maybe you put that in the podcast notes also because it’s not the easiest to spell.
Birgit Pauli-Haack: Yeah. That’s true. It has this German Umlaut thingy in there and the two dots there. All right. So before we end the show, also reminder from me, developer hours are coming, keep an eye out for the announcements and join us with all your developer questions on building blocks or working with the Gutenberg block editor. All right. As always the show notes will be published on gutenbergtimes.com/podcast. This is episode 59. I’ve just realized that it’s WordPress 5.9 and Gutenberg Changelog 59, so, yeah, that’s a coincidence, but I like it.
Okay. So show notes are publish guttenbergtimes.com\podcast episode 59. If you have questions and suggestions or news, you want us to include the next time, send them to changelog@guttenbergtimes.com. Yeah. That’s an email address for changelog@guttenbergtimes.com or you can just kind of reach out to Grzegorz or myself via Twitter on the ends or, of course, on the WordPress Slack. We are all active there. So thank you so much for joining us again, Fabian. And also thank you Grzegorz for a wonderful show. I think we got a little bit more out of that. Oh, next item. So we talk a little bit more about what’s happening in the community.
Grzegorz Ziolkowski: Yeah, that was great. Thank you both for a great chat. And thank you to our listeners for being with us.
Birgit Pauli-Haack: And if you like the show, send us a review. Bye.
Grzegorz Ziolkowski: Bye. Bye.