Changelog #49 - Gutenberg 11.2, Drag and Drop, Flex Layout, Core Data Shortcuts and Modern WordPress Development

Gutenberg Changelog

00:00 /

Birgit Pauli-Haack and Grzegorz Ziolkowski discuss Gutenberg plugin release 11.2, drag and drop, flex layout, core data shortcuts and modern WordPress development.

Music: Homer Gaines
Editor: Sandy Reed
Logo: Mark Uraine
Production: Pauli Systems

Show Notes / Transcript

Show Notes

Chris Wiegman’s The Changing WordPress Ecosystem,
Marcus Kazmierczak’s Modern WordPress Development
WordPress Philosophy, Design for the Majority
Using WordPress Without Writing Any Code by Chris Lema

Gutenberg 11.2

What’s in active development and discussed?

Did you like this episode? Please write us a reviewhttps://lovethepodcast.com/gutenbergchangelog

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 49th episode of the Gutenberg Changelog Podcast. In today’s episode, we will talk about the Gutenberg plugin release 11.2, and drag and drop, flex layout, core data shortcuts, and modern WordPress Development.

I’m Birgit Pauli-Haack, curator at the Gutenberg Times. I’m here with my co-host, Grzegorz Ziolkowski, code wrangler at Automattic, and WordPress core contributor. Good morning, Grzegorz, how are you doing? I am so glad that we have the same time zone together for the next two or three episodes. And good morning to our listeners, we are glad you join us again for this episode. How are you this morning, Grzegorz?

Grzegorz Ziolkowski: Good morning, Birgit. I’m so happy to be recording this one in the morning for the first time, it’s such a refreshing experience and something new. Everything is great here, and I guess the weather is similar at your place now, like in Poland, it’s changing rapidly everyday. Yesterday it was sunny, then raining, today it’s cloudy. So, you have everything. How about your place? How do you enjoy it?

Birgit Pauli-Haack: Yeah. We are on the same weather, it changes through the hour, we have one hour, we have sunshine, then we have thunderstorms and then it comes back. It’s almost like Florida. But I’m here in the makeshift office at my parents’ house, it’s kind of working from home home. It’s a little bit different, because it’s a big household, of course. And it took us an evening to distribute the fast internet that comes in on the second floor to the basement. But there is something like, it’s wired through the power grids, it is actually spectacular. It hard lined in through the network, it’s very interesting what they put together.

Grzegorz Ziolkowski: No, that’s really interesting. I’m keen to learn more after the show about that because I don’t have the cable to my office and sometimes the wifi isn’t great enough. And I miss that when I was preparing everything, I’m glad that there are some other ways to do it.

Birgit Pauli-Haack: I’ll be happy to get deeper into that.

Communication Contributions

So, for our show today, the first section today is a community contribution, and I appreciate Chris Wiegman and Marcus Kazmierczak blogging about WordPress development in 2021. And they’re trying to define the barriers to entry for WordPress users, are they low, or they are high. I think we all are getting a few blurry lines, depending on what kind of stakeholders, or what kind of users you’re talking about. I haven’t read all of the blog posts, and I definitely need to read them again. But Chris Wiegman started the discussion on Twitter and I quote him, “The deeper I get with modern WordPress development, the more I understand why newer devs don’t like to work on it. This is not the same project that I was in, in the past. The learning curve is now extremely high, regardless of past experience.” Chris Wiegman on the Twitter verse, and we’ll link to that tweet in our show notes.

And there are quite a few that chimed in on it. There was Alain Schlesser, Rich Tabor, and others.

Grzegorz Ziolkowski: Matias Ventura.

Birgit Pauli-Haack: Matias Ventura….Yes, Jessica Lyschik as well from Germany, and Marcus Kazmierczak, I might have put just his name, last name, but I need to ask him how to pronounce his name. He wrote a blog post about modern WordPress development and, pretty much as an answer to Chris Wiegman, and Chris Wiegman actually put some more thoughts into it on his blog, with changing WordPress ecosystems. What do you think about, you came from a different content management system to WordPress, how many years ago?

Grzegorz Ziolkowski: I started like with development with Drupal and it was like, maybe 10 years ago. And the entry level for Drupal is so high that going back to WordPress seems like you are in a familiar place and everything is so simple. So it really depends on your background, if you have a strong PHP background, then it might be easier to start with Drupal then maybe WordPress. If you don’t have any experience, it’s going to be hard no matter what you would like to do. So, it’s definitely a very complex topic. One thing that I would like to emphasize that WordPress has this badge with the fields of each of ours. So one of the sections is designed for the majority, it says that the way that WordPress is structured should be optimized for the end users rather for the developers.

And this is happening with full-site editing. And that’s why there is no, this impression that writing for the, like extending the block editor is hard and it’s something that definitely needs more attention, but it’s also a very complex thing to operate in this area of a very rich user experience and having so many features that so tightly related to the DOM, to the browser. So, it’s not an easy place to be when you are a developer. So I suspect that if you would like to achieve even like half of the goals that the Gutenberg gives you in the classic editor, I don’t think that it would be doable at all.

Birgit Pauli-Haack: And I like how Marcus iterated that the competition between WordPress, is for WordPress and it has had a remarkable growth rate, even in the last four years, going up to 42% and the competition is not Drupal, or Wix, or Squarespace. The competition lies through the social networks who made it so easy to create a post like on Instagram connect with Venmo, and then have a shop up there. So, following that path, there is an expectation from the users to also make it as easy as possible, and intuitive as possible. And of course the block editor is for quite a few developers, a moving target, the goalpost kind of still moves, because the team hasn’t finished developing it. It’s still on its way. And listening to Matt Mullenweg, he says, it’s going to be a 10 years, two years or four years, into a 10-year project.

So it would be that way and probably settle down quite a bit, but there is always keep moving, but I’m also wanted to outline, I found a tweet by Matt Edgar, who’s an editor and writer, and he says I fear that WordPress goes the Microsoft Ballmer way, where it’s all about developers, developers, developers, and not about users, users, users. So, that’s the whole other extreme there. And right now it seems to be on a middle path. I’m not sure it’s the right path, but it’s at least kind of, if you offset both sides a bit. There’s something new coming by.

But Chris Lema actually posted a, his latest blog post was about using WordPress without writing any code. And so that’s the goal pretty much, but he is actually preparing for a presentation on a non-WordPress conference. And, that don’t use WordPress all that much, but wants to make a case for WordPress.

So that blog post was very interesting to me as well, figuring out how to do this without, yeah. There’s a few plugins that he uses, but most of it is based on the native blog editor. So I think there is a great discussion going on and we all need to be a little bit more taking, and someone who has been successful with WordPress for 10 years and doing what they’re doing, bringing them all along, but bringing them piece by piece and also teach a lot about the new tools there, like react, yeah. MPM and all these new cool features that are hard to learn, sometimes when you haven’t been in this space for a long time. Yeah. I see it for myself, I came to WordPress from a total different programming language. And I programmed my own content management system until I saw WordPress offering so many features out of the box on their free plugins.

I wasn’t able to charge my clients that much for custom developers when there is a different system out there that you can use that they can use. And I started WordPress 10 years ago and it took only four, five years until we actually had to write code, PHP code. But I was a PHP novice, I didn’t get into it, until writing code, about six years ago or something like that in PHP. And it was so easy for an implementer to do that. And it will still be that, but I will never say, but for our clients, it was never easy to use WordPress when we say that it’s easy to use WordPress 10 years ago, it wasn’t really. There were multiple, was it a Tammie Lister who did a run down from how to change a theme at the beginning of Gutenberg, I thinks she had 62 steps to change the theme.

Grzegorz Ziolkowski: I can imagine that.

Birgit Pauli-Haack: Yeah, so, it’s getting really easier and easier, but of course there is a disruption there and we’ll use different tools there. So, I guess we have a lot of ready material for our listeners and we certainly wish that you communicate with us your ideas of what you think. And maybe also be a little bit more specific on, when you find it hard to work with WordPress. What exactly is it that trips you up, or that sometimes it’s small thing, sometimes it’s a big thing. And we all learn with that going forward, so we will have the blog, Chris Wiegman’s blog, his tweet and the thread around it, and Marcus Kazmierczak’s Modern WordPress Development, link to the WordPress Philosophy, and we also have Chris Lema’s Using WordPress Without Writing Any Code in the show notes for you to read.

Which brings us to What’s released? The Gutenberg 11.2, do you want to get us into it?

What’s Released – Gutenberg 11.2

Grzegorz Ziolkowski: Oh, sure. Let’s start with features.

Features

So this plugin release, it doesn’t bring so many new features. It’s obvious the reason why it happens is because there is a summer on the Northern hemisphere and a lot of contributors that I engaged with on a daily basis we’re not present. So, there’s definitely some slow down. This is also a great time to do some improvements for the developers, so they don’t feel left out. And there are also some efforts to improve performance, on the features level. So most of the work is around blocks and adding support, functionality, which supports something like colors, or border, and similar features. And the biggest change is this for the search block. It’s a bit strange when I learn about that, that you can add color support, but for the button that is in the search form. So, you can modify something similar to other blocks, like the background color or the text color, but it’s only for the button, and there is also a border color support, are they there? I’m not quite sure it’s the border is only for the button as well.

Birgit Pauli-Haack: I tested it yesterday. I got a little bit sidetracked because I found a bug there, but not a bug, it’s the display thing, but the border color, as well as the support full border is actually for both the field, the input field, as well as the button. And you also can have different alignments for that. So it’s quite nice. You can actually, the example in the release notes or the make posts towards actually in a group block with, with image, background or color dual tone background, and then, search block on top of, it’s quite nice. Yeah.

Grzegorz Ziolkowski: Yeah. And we use the border edges functionality, they have very nice effects, that you don’t have to use rectangles anymore.

Birgit Pauli-Haack: Yeah. Found the borders in fashion again, so every 25 years we have rounded corners.

Grzegorz Ziolkowski: The good thing is that you need to use background images that swap with JavaScript on the fly like 20 years ago. But it’s back and the pullquote block, it also got board and color support. And the examples that were shared in the posts that described all the changes there is, includes very interesting effects, like you can use some sort of dotted border that use like very large dots and it creates a very nice FX for the pullquote. So I encourage everyone to give it a try and check some crazy values there and see how it looks like, because it might turn out that looks so nice that you would want to have it. And that’s basically all about features.

Enhancements

And we also have several enhancements, which one of them I would consider or other as a feature, this is a button that was added in the publishing flow.

So when you schedule or publish the post, there is the sidebar, that shows up on the, like, it goes from the right side. If you are in maybe a regular, no like, you’re using in English. And if you’re using Arabic, you will be go from the other side. That’s why it’s confusing to explain. But anyway, the feature is that at the end, there is like summary, what has happened to which side you, you are using. And you can go and view the post there, but next to it, there is now a button that allows you to create another post. I don’t know if it’s very useful because at least for me, I don’t really write another post just after I finished the one, I rather celebrate.

Birgit Pauli-Haack: Yeah. I think it’s more for the micro bloggers that kind of want to upload an image and then do the next image like an Instagram post. But I like that it’s now trying to keep a user in the block editor for some publishing flows. I need to check, so it’s in the second step. Oh, it’s in the last step of the publishing flow. So you get the view post and as you explained it, there’s the add a new post button there. I need to test this out, how that behaves in the two-step process for the publishing process. So one of my pet peeves is that I started with the block editor. Can I log into my website and then already have add new post, at the first screen that I get to.

So I don’t have to look for all posts and add new and all that. Because all I do on a website once it’s set up is publishing posts. So, I might just want to start there, but this is the end of it. So after I do one, I can stay in the block editor with it and update.

If you do photos, if you say, I want to just highlight certain links and then link out. I like it. So there is also some enhancements for the widget editor, and then for some of the components, but there seems to be a quite finite, not finite minuscule a little bit, not so obvious for people, but it makes the experience a little smoother. One of it is the core data, you can pass a query argument to a data selector shortcut. Could you explain that a little bit for me?

Grzegorz Ziolkowski: So, the change for the core data is about passing. Mostly the context that is going to be used with the REST API. That was actually one of the missing features. So if you know how our REST API works, it allows you to fetch the data with different contexts. So let’s say to view, you get a different set of fields, then when you want to edit something and every REST API endpoint defines it differently. So thanks to this change, you can have full control over that when using core data.

Birgit Pauli-Haack: Excellent. Excellent.

Bug Fixes

Then we had some bug fixes. One is for the Featured Image, now authors can select images that were uploaded by other users. So, if an editor uploads an image, now authors can also use them for the featured image and their blog post. And that’s certainly helpful, and reduces the duplication of images, probably quite a bit, in the media library.

Grzegorz Ziolkowski: Yeah, definitely. One thing that I marked is that there was a change in the description of the embed block that was referencing Instagram. And I was surprised seeing that and turns out that Instagram is no longer supported as an embed in the block editor. So, that might be confusing. That was a fix, but it’s also good to know that Instagram embeds are no longer present in WordPress.

Birgit Pauli-Haack: Yeah. I think that was taken out last October when Facebook changed, how they, that you now needed a developer account with Facebook to use some of the, while the embeds, they no longer an embed publisher. So, now they changed it. There are quite a few fixes and, we had quite a few recommendations for plugins, and I certainly can reference that in the show notes again, but I think there was just an oversight to use Instagram as an example on how to use the embed with the Instagram, not doing it anymore. But the bigger problem was that it was showing up in the inserter when you started typing in Instagram. And so that would come up. So, that was leading the user a little bit astray on their publishing process. So, the one bug fix, also was the most used terms, we were running into a 403 error for non administrators, that has been fixed. And then we kind of tripped up a few users, I would imagine.

Grzegorz Ziolkowski: So, most of the bug fixes where a smaller changes closer to the code quality improvements, like for the FocalPointPicker component, there is now additional check that verifies the type is correct. Like NAN which stands for, Not-A-Number in JavaScript. So, nothing really interesting, like this is just everything to ensure that there are no unexpected behaviors in some edge cases.

Birgit Pauli-Haack: Yeah. But I’m glad that the team takes the time to go through that and fix those little things as well.

Performance

So then we had some performance updates and one of them pretty much only one that’s a drag and drop and it’s now, drag and drop is such a wanted feature. And it needs to work really well to be useful, and Kerry Lui did some changes there and fixes there. So I don’t understand exactly what the changes were there.

Grzegorz Ziolkowski: I don’t know. I know, it’s very complex related to how the browsers work. So, if you are keen and learn how you can profile the performance of layouts and, CSS, how it works, the drag and drop, it’s very well explained in the PR that’s linked and Kerry, she’s doing fantastic job on that field. She has a lot of expertise. So you can follow along if you want to learn more.

So one thing that I checked, one when playing quiz is that in the last episode, I was wondering if it is possible to drag and drop a block from the list view to the editor canvas or the other way around.

And it turns out that you can, and I was surprised. Yes, I don’t know how it works because I don’t think it contributed anything to that functionality at all. But it’s very well designed. If you can do so, so interesting interactions. One thing I noticed that there’s a bit of delay when you drag from the list view to the canvas, then it updates in the canvas and then the animation starts in the list view. So, it’s not the perfect experience, but you know, it was right.

Birgit Pauli-Haack: Right. But it seems that that’s something that Kerry was working on to avoid layout and repaints, but you definitely need to have it. So it’s all in the right order when you drag it from one canvas to the list view and back. So I can see that that’s a great challenge for programmers to get right, yes.

Experiments

So, and that brings us to the experimentation or the experiment section. And right now, Riad started to put in a prototype and this plugin for a flex layout supported by the block editor. You made some notes on that.

Grzegorz Ziolkowski: Yeah. Because I first wanted to try how it works, but it turns out that it’s not that simple to, that on your website. So first of all, it’s an API change and that API is hidden behind a special flags. So if you add the examples for the group block and to enable that you need to change the block JSON file, for the block, and there is experiment layout already present, but it’s set to true. If you want to use this new feature, you need to choose an object, and there is all over switching flags, but this API is still in progress in, we will change for sure, because Riad left a ton of notes, how it can evolve. So he said that we could introduce more layouts, such as grid or absolute position in container. So it’s really nice when you play with that, but there’s one more thing, it only works with full-site editing themes, that content theme JSON file.

Birgit Pauli-Haack: It needs to be set in the block JSON, black JSON, as well as on theme JSON?

Grzegorz Ziolkowski: No, we don’t need to do anything in the theme JSON but you need to have a theme that have this file, because this experimental layout, it only works for you if it’s full-site editing. I know it’s quite confusing, but I learned the hard way trying to play with that. But once it’s there, it’s really nice. So when you change to the flex, then if you had rows, then you suddenly have items next in one row next to each other. And even if you go and try to move the one of the inner blocks, then the arrows, will be to left and right. So they adapt to the layout, which is pretty nice.

Birgit Pauli-Haack: Yeah. I think there was, years ago, there was an issue that one that, that I also, and I put an actually in the actively discussed. So let’s talk about it again there. So for the Changelog, there’s a lot of testing updates and a lot of build tooling updates. Is there anything that stand out that you wanted to talk about today?

Grzegorz Ziolkowski: There isn’t anything that would count my attention. So I don’t have anything to share. I mean I could but-

Birgit Pauli-Haack: Well, you could probably another hour or so about it.

Grzegorz Ziolkowski: I’m thinking mostly about our listeners and what could be interesting for them? So I didn’t identify anything this time, but there’s a lot of them and mostly this is related to the constant improvements to-end-end testing. And the fact that it’s almost stable these days, which is a great improvement for all the contributors.

Birgit Pauli-Haack: Yeah, absolutely. And there is actually a new testing team, not a new team, but the test team has more new reps. And Tonya Mark has written about that on the test blog. And so they all, some contributors that wanted to get deeper into testing of new versions of the WordPress core, as well as on Gutenberg and have more look at the tickets for needs tuner tests or needs E2E tests to, and add those flags to the tickets. So it can be quite a bit more stable, when it comes out in beta. So I think that’s a good development here too. And if you’re interested in that, I think that the test team can use your assistance there and your help and your expertise. Of course.

Tools

Grzegorz Ziolkowski: So I think I have one thing, Riad Benguella, he’s exploring a special website that would track performance metrics over time for the Gutenberg editor. So, It’s the same thing that you see every time when a new Gutenberg release post is published the bottom of every post, and that would be something that like a chart that would show you how it changes with every Gutenberg release. So, to save some historical data, if that’s working, that would be really nice to observe how it all changes.

Birgit Pauli-Haack: Oh, nice. I just clicked on the link that was in the PR. So I’d like it. It’s a website that’s on Versal, and talks about the different, the type speed, the inserting, the opening, insert opening, insert of hover items, the load of the whole editor, selecting block, selecting and insert a search. So it’s quite nice. Yes. I linked through the additional site as well in the show notes.

Documentation

And then there were some documentation changes. Some of them were as minuscule as adding a missing space or changing an intake, but one of them is the missing IATN, the internationalization filters for the documentation that was caught by one of the developers on Twitter and turned out it didn’t come over from when the documentation is automated or is imported into the WordPress developer handbook. So that has been fixed now. So you get all the filters that deal with internationalization of your block editor assets.

Grzegorz Ziolkowski: Yeah, that’s really nice for plugin or if they want to modify translations. And it existed there since WordPress 5.7. So, quite a while.

Birgit Pauli-Haack: Yeah. Sorry, it wasn’t in the documentation. And there was one block API change where you, I think it was one of your PRs, how to improve block assets or versioned. And what’s the background of this and why was that important?

Grzegorz Ziolkowski: Oh, it was purely technical on the WordPress core side. So there were some concerns that we were using the file time function, which is based on the five system to generate version for style sheets, which when you have more complex setup, like several servers, then the value might differ when load balancer kicks in. So, it’s fine for a single website, but for more complex, it’s not so reliable. So, the idea is that, we now have in block JSON version field, so you can provide the version of your block, and that is used for style sheets to define whether browsers should load a newer version of the same style sheet.

Birgit Pauli-Haack: Yeah. It’s kind of to bust out of the cache, for the style sheets. that’s very interesting. Cool.

Grzegorz Ziolkowski: Yeah. Even if it’s not provided, then the WordPress version will be used. So, it’s still not a big deal if someone forgets to do it, but in some cases, if you resolve, and then you probably should add that to our blocks.

Birgit Pauli-Haack: Yeah. It makes it definitely explicit, it’s probably better than just assumed.

Code Quality

And then there were some code quality issues that were resolved or checked. One of them is a performance issue, that’s the refactor of the post author component. But George Mamadashvili, short MamaDuka, he refracted it, so it only requests fields that are needed for the rendering, like the ID and the name, and that reduced the trend data transfer considerably by roughly 50%. So, these kinds of changes or behind the scenes, they’re very technical, but it’s really important to know that they are happening. Good. So this brings to the end of the changelog. Yeah. It’s a good release and try out all the new features. And there is one discussion that we mentioned earlier was about the flex layouts.

What’s in Active Development or Discussed

Now that the prototype is in the plugin, Riad Benguella who published that also opened another issue to discuss further iterations.

And we’ll have it in the show notes for you. It’s 3-3-6-8-7, the issue. And he describes the current state of the floor layout and the flex layout. And then the, an experimental way to switch between the two, as Grzegorz mentioned earlier, and then also outlines concepts that were resolved in a refactoring of some of the blocks to a declarative behavior on context, but Matias Ventura also chimed in and mentioned the grid layouts to be worth exploring as well.

So if you dear listeners want to get in an early discussion of a new feature, this is the time for this feature, subscribe to the issue, chime in in the discussion, and lend your expertise and your ideas to the developer team. I know that way back in 2019, for instance, I think in November ’19, Automattic published a grid layout block. And I wonder how many of the learned lessons can be applied to the core editor. So I’m also linked to that particular plugin and had his last updates were three weeks ago. So it’s still on, and it has about a hundred thousand active installs. So it’s definitely something people are looking for, and your discussion, you can definitely contribute to that.

Grzegorz Ziolkowski: From my perspective, I think that the biggest advantage of the current exploration is that it or uses it an existing block and only add it as a feature.

Birgit Pauli-Haack: Well, this is our bell, it’s the end of the changelog.

So, we are at the end of the show, and I want to remind everyone too, if you have something that we should talk about, what questions or news that you want us to include, send them to email, changelog@gutenbergtimes.com. That’s changelog@Gutenbergtimes.com. If you want to write a review, if you like it, write a review for us, please in either the iTunes or Stitcher, or any other of the podcast directories, it would really help us to spread this wide and far.

All right. Well, thank you, Greg. This was a great time to spend with you again.

Grzegorz Ziolkowski: Thank you Birgit, and thank you for all our listeners, we are really glad to have your support. And so, see you all in two weeks.

Birgit Pauli-Haack: Yes, two weeks, and thank you for listening. Bye-bye.