Gutenberg Changelog #5 – Block Directory, Unpacking Gutenberg 6.4, Cover Block, Circle-crop and default styles.

Changelog Cover graphic, w/ Birgit Pauli-Haack and Mark Uraine
Cover Art: Gutenberg Changelog
Gutenberg Changelog
Gutenberg Changelog #5 - Block Directory, Unpacking Gutenberg 6.4, Cover Block, Circle-crop and default styles.
Loading
/

In this episode, we talk about the new block directory, a new local env’t for WordPress & Gutenberg. Gutenberg 6.4 was released with several enhancements and features — such as: Save default styles for blocks, updates to the Cover block, Typewrite experience, new help panels, and nice circle-crop for images.  Also, we covered Widgets, Navigation Block and more.

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

Show Notes

What’s in Gutenberg 6.4

What’s in active development or discussed

Before the end

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

Transcript

Birgit Pauli-Haack   Hello, and welcome to our fifth episode of the Gutenberg Changelog. I’m Birgit Pauli-Haack, curator at the Gutenberg Times, and I’m here with my cohost Mark Uraine, designer at Automatic and core contributor to WordPress. Hi Mark. How are you today? Just before the long Labor Day weekend.

Mark Uraine   Hey, Birgit. I’m excited today. Last weekend I did some backpacking with my kids, and this weekend I’m going on a camping trip with the whole family. So, lots of outdoor activities right now, and that’s really just helping keep me centered, so really enjoying it. How about you? You doing anything fun this weekend?

Birgit Pauli-Haack   Well, we hope so. We’re, of course, watching the news from Noah about the hurricane hitting Florida at one point, but we’re on the other side. Right now, the forecast is we are on the safe side of it. Well, we’ll probably kept some movies and, my husband’s going to be here all three days, so, and we will arrange, um, his office so he also gets to experience the electrical, standing desk. And, so it’s really cool, but that’s a lot of work, so we need to have some rewards, and that’s dinner and a movie.

Mark Uraine   Nice. That sounds like a lot of fun. Speaking of that hurricane, Automatic’s grand meetup is coming up shortly, like within a week or two. And everybody at the company right now is watching that hurricane to make sure it doesn’t interfere. 

Birgit Pauli-Haack  Yeah. When does a big meetup start?

Gutenberg Favorite Features

Mark Uraine  It’s the second week of this next month I believe. So, we’re watching it, ‘cause we’re all heading out there to Florida. So, we have a listener question today from Greg Zowkowski. He asks on Twitter, he says, “I have a very general one related to WordPress. 5.3 release cycle starting soon. What’s your favorite feature added to Gutenberg since the last major WordPress release?” Birgit?

Birgit Pauli-Haack  Yeah, that’s a very good question. And, it took me a while to kind of think of that. When was the last update, there was 5.2 and what was in there, so I’m not quite sure if it’s actually based, but I really like how the Cover Block came together, with all the enhancements that were put in since the last release. And uh, what’s also new, I’m pretty sure about that is the Group Block. So you can have a Group Block where you can put in all kinds of different blocks and don’t have to use the Cover Block or the Media and Text Block. And I also like, so it’s not one favorite. I also like the Block Manager so you can switch on and off some of those blocks that you barely use and that kind of get in the way of the inserter, so, it’s really cool. How about you?

Mark Uraine   I do have a couple of them as well. One specific one, which is under some reviewing right now, but was the click-through at that, or click-through pattern of clicking onto a block and then clicking again to get into the nested blocks. That was a real life changer for me because it just made the flow of clicking and moving through the blocks so much better. The nested blocks having borders around them now, so you can see their parent and the nested blocks together and kind of be able to traverse through, up or down the block tree, those improvements like that really made a difference for me.

Installing and Using Blocks

Birgit Pauli-Haack  Yeah, I really liked the keyboard navigation feature that came in on 6.3, and we talked about on the show about it. Yeah. But that’s so close. I kind of wanted to do it a little bit. Yeah. I’m also looking forward to what’s coming in 5.3. So, last night we had a very interesting and insightful, Live Q and A with the team working on the Block Directory. Mel Choyce, Alex Shiels and CK Lee were on the show and Mel walked us through the prototypes and explained it all from the user point of view, so you can search within your Block inserter for a new block, and it will show you some options that are not only installed on your computer, but also that are available for download. And once you select it, you can use it in your posts and in the background that was downloaded and installed on your site.

But, if you decide to not use it after all, it will then deinstall again from that session. And then, Alex explained how it’ll work in the backend and how plugin developers can interact with the directory. CK Lee is the Javascript developer putting the Gutenberg relevant pieces together for the inserter and handling the search, the preview, the install and the deinstall from the editor. So, with the block directory, you wouldn’t need to, you need a new block, you don’t have to save what you’re working on, go to the plugin directory or plugin page, go out and search for blocks and then come back, install them and then pull up your post again. So this would be so much simpler and smoother, and I was surprised when the team told me that the first basic version of that will be available in WordPress 5.3.

So if you are a plugin developer and you want to get your single block in for testing, connect with Alex Shiels, he’s using @tellyworth in the Meta channel on Slack. And when you get a minute, check it out on their Gutenberg Times YouTube channel. I put all the relevant links to the specification, the updates from mail and Alex, on the mock-ups and also the API for the block file. It’s all in the description of the video. So go out and go and check it. Of course, the link’s gonna be in the show notes.

Mark Uraine   Yeah, I really wanted to watch that live yesterday, Birgit. My time just did not allow it, though. I’m planning on watching it over the weekend or sometime here in a bit when I get a chance, because the block directory is just going to impact Gutenberg and WordPress in some amazing ways. I mean, like you mentioned about just being able to install blocks from within Gutenberg itself. Like, you don’t have to leave to go take care of something. It’s all happening right there inside where you need it most. And that’s key for a lot of users.

No Follow

Birgit Pauli-Haack  Yeah, you’re right. It’s a completely new way of extending WordPress in a very granular way. Yeah. It’s one good thing at a time, so to speak. And although it will all be based on the plugin repository’s architecture and a subsection there. But, yeah, it’s going to be really interesting. So, next I found quite a few community contributions that I wanted to share with our listeners. So, Sarah Gooding from the WP Tavern posted a story about a discussion on how to add no follow attribute to the link and paragraphs and buttons, and so on. That part is important for the bloggers and publishers. When they have affiliate links that need to be marked no follow, and the only way content creators can do this now is by edit the html for their links and keep Google from following those links and indexing affiliate links, which would be not so good. So, it might not be a mainstream feature request for those bloggers, but it’s definitely a PITA in doing this manually multiple times per post and pages. So, it was an interesting conversation to read up about. 

Mark Uraine   Yeah, it is an interesting one. I remember looking at this, and I actually had a conversation with some community members about it that, you know, this whole no follow link, like, if it was something that was really easy to just, that that was it. It seems to not jive as much with the 80/20 rule of WordPress. Like, are 80% of users really going to be using this or is it a minority of users that are going to be using this? And so there’s some discussion there around that because we should really try to stick with some of the philosophy behind WordPress and, and if it was such a big feature, I’m sure it would have been done way before Gutenberg was a thing, right? Like, it would’ve been done a long time ago. But, needless to say, uh, I’m staying open about it. It’s an interesting one. 

Dev Environment

Mark Uraine  So, next, on our list we have Gary Pendergast posts about new way of setting up a local Dev environment, which, he posted this on the Make Core blog and, it ensures that tests for Core and Gutenberg run in the same environment, which is kind of interesting.

It’s based on a Docker which is available in all operating systems. It should make it easier for non-developers to test Core as well as Gutenberg. So, the ease of it is kind of a big part. I used the older Docker local environment setup that he had done earlier and it was just today actually that I ran into a problem because this new one was now merged in. And, when I went to run the old one, it was telling me, oh, you’ve got to write, do this new script and the terminal. So I did a new script and I was getting errors. I was just having a hard time with it. I figured that I had to get rid of the local WordPress directory that I was installing. I did delete that completely, and then run this new way of doing it, and it ran perfectly. Smooth, I have it running right now, I’m testing PRs. It’s good stuff.

Birgit Pauli-Haack  Well, I definitely will check it out because I really need an environment that lets me test a Gutenberg from the master branch. I haven’t been logging any issues in the last few months because, before that, when I ever did it, I, it was already fixed in master. So, I could’ve saved myself the time to write the issues, and do the screenshots and yeah, all this, kind of thing, so it saved me a lot more time, and I can get a little bit deeper in the testing. So, uh, I’m really looking forward to setting that up on my machine. Of course, I also take your advice so to speak to, you’re going to get rid of old stuff to make this. I also was very happy to see Alyssa Cuda publish for WP Engine, a recap of the six months’ feature updates of Gutenberg.

It was interesting in confirming my suspicion that a lot of people on self-hosted WordPress sites don’t know about the progress made to the Block Editor. Why have a plugin? We talked a little bit in the last episode that all the things that we’d talk about, you can have it right now using the plugin. So, I think, an idea came into my head to maybe we need to consider some active messaging for content creators on the dashboard about, oh, did you know that you could do this with a new plugin kind of thing. I don’t know if that’s ok because we actually want to reduce some of the notification on the admin screens, but uh, I think that would be really helpful for a lot of people that are still only using the WordPress 5.2 version right now and are not using the plugin.

Mark Uraine   That’s an interesting concept there. I like that similarly to a lot of software, right, that when they come out with the new version they kind of have a little notification of some of the updates. 

Birgit Pauli-Haack  We don’t have it on our list for community contribution because it’s kind of a little bit far away from Gutenberg. But there is actually an initiative for a feature plugin for a new notification system for the WordPress admin, and Jon Bossenger is heading that initiative, and he just had his first meeting. So, I really would like to have this seen, but I digress.

Mark Uraine   I like looking at Alyssa’s as our posts though, like just seeing the things that have happened since WordPress 5.2 within the plugin, and kind of seeing how someone highlights the specific things that pointed out to them. It’s amazing the amount of work that’s happening.

Release of Gutenberg 6.4

Birgit Pauli-Haack  Yeah, it is. And speaking of which Gutenberg 6.4 was released this week, do you want us to lead us in there, Mark?

Mark Uraine  Yes it was. It looks like around 60 line items. The biggest numbers were probably around bug fixes and infrastructure, and in addition, this release had some really great new features. So that’s what we’re going to jump into here. One of them that was mentioned is adding the option to select the style that is automatically applied for users, for users to select a default style of a block. That’s a big one.

I don’t know how many times I add this separator block, and then I have to convert that block to be the wide version of the separator. And it was always a hassle, right? But if I can select, take a style, and make back the default style, then whenever I add it to my document, it’s always gonna have that default style. That’s a big one for me. Another one that was recent that was released was a lot of improvements to the Cover Block as you mentioned it being one of your favorites. So, you can now resize the Cover Block manually by dragging. You can allow directly setting a solid background color on the Cover Block. So you don’t need to have a media like an image or a video in the background and you just be a solid color. And then, it can have a default settings with the various styles, which was what I just brought up, which is so cool. So I liked that. The Cover Block is just becoming something really spectacular. And number three for me here is add a List Start and Reversed settings. So the List Block has got some upgrades, right? We can now change the way in which the lists are shown, reverse the lists. And, that’s kind of an interesting upgrade for that block.

Birgit Pauli-Haack  Yeah, the list blog definitely needed a few more TLC for a while now. And, I like that you can now change, in the order list, you can change from numbers to alphabetical to Roman numerals and you also can start the counting on a different number than just one. That’s really cool. And, there are times you want that, but also in the release is a new help panel on the Inserter for all the blocks. It explains more about the block and also helps you to decide is that a block that you want to use. And the help panel is also then visible in the sidebar once you integrate the block into your posts. So, that’s definitely a jump up from the new user experience. That was before with a little tool tips that everybody kinda clicked away as the usability studies in June and July showed. And this is so much more context sensitive. So, once a user wants to do something now, the help is readily available there. So I like the first iteration of it. Makes really sense. Another feature is the typewriter experience and no, it’s not a sound of the typewriter, which I first thought, oh, I get my sound back from my little mechanical typewriter that I had 30 years again. But it’s a significant part for writers because it keeps the editor in the same place on the screen when you’re writing, especially when you get to the end of your text, you get a little bit more comfort space on the bottom of things. So it’s a very nice writing experience. Now, that was a little bit upsetting, no, not upsetting, but it was a little bit quirky. It’s maybe a good word.

Then the Image Block. And that is not only the Image Block, it’s also the Cover Block. Both blocks received additional styling. So you can not only the circle crop on the image that you put in that you have a circle mask on it and that it, uh, is displayed round. You can also have rounded corners, of course, a drop shadow, and diagonal kind of cropping of the images and makes for…and, the same is true for the Cover Block. So, those two could complement each other when you use them to make some nice, funky layout. Um, there’s different colors but the same size shapes. So I really like this. So, there were a lot of groundbreaking features there–things that we have been waiting on quite a bit. And then there were some experiments in there and this 6.4 release, what are those? It’s about the widget screen?

Widgets

Mark Uraine   Yeah, the widget screen is pretty much completed. I’m hoping to do another design review on it again very soon just to make sure we cover all the bases. But, it’s there now, and it can be turned on in the experiment screen, and people can fool around with that. And it’s pretty far along. I know that the team is moving on to the Customizer now and really trying to figure out a way to get the blocks to view inside the Customizer. 

Birgit Pauli-Haack  That’s interesting. Yeah. So I started, I used this maybe three or four different releases ago and it was quite buggy. So I’m excited to go back there now that it’s completed and it’s closer to the vision that it was supposed to be. 

Mark Uraine   Yeah. And then it looks like some new API improvements, adding a block example API and use it for inserter and switcher previews. This is a big one for plugin authors and plugin developers, Birgit, is that right?

Birgit Pauli-Haack    Yeah, absolutely. And it shows the user how the block is going to be seen before it’s actually selected. So it’s helpful for the user to figure out. I guess a block name–it normally it doesn’t really tell you a lot. You kind of need to make a lot of assumptions, too. Is that a block that I want to use. And this is also in preparation for the block directory because the plugin authors then can put in the JSON-file the previews of the third-party blocks not only they build into a built in a block, so also the plugin blocks. So, it’s really cool.

Mark Uraine   I believe that is going to, if it hasn’t already been added to the insert or panel, within Gutenberg as well. So, when you roll over the block and you get that panel with the help information, that that preview will also be there. 

Birgit Pauli-Haack Yeah. I think that’s part of the whole revamp of that piece.

Navigation Block

Mark Uraine   There were about 15 various bug fixes, five various mobile web additions in this release. All in all, it’s a good one. It was another robust release 6.4. And, so that brings us to some of the active development that’s happening right now in Gutenberg. You and I know, Birgit, that the navigation block has been a long time coming, and it still is. There’s really good discussion. Uh, actually that happened a little bit earlier this week, I believe, or, or just the other day, maybe. Sarah Semark wrangled a few people into the Slack design channel and we all got together and discussed some kind of direction for this navigation block because something this complex is really difficult to get through. And just getting more voices around this and some direction about kind of how to handle some minutiae, and the details of this blog are key. There were a few things figured out as far as like kind of how to handle horizontal block movers within the block and things like this, but uh, but Sarah does still need feedback. So for our listeners, if you’re interested in the navigation block, there’s some issues on Github, please chime in on those, particularly issue 17116. This is how to add new menu items to the navigation block. That flow really needs some eyes and some good talking discussion around it. So there’s that. There’s also the full screen image edition, which is being worked on by a contributor right now. This allows you to change it. Instead of full width, you get full screen on images, and that’ll change it to full width and the full height of your screen. That one’s happening. There’s also the edit media flow. Yeah, before, you’d click edit on the media, and it would take you back to the placeholder of the block and you’d then select a new block or new image from there or something. And now, we’re kind of putting that all right there. In the toolbar, we’re changing it out from an icon to actual text. So it says replace media or something, and you click that, you get a little pop over of where you kind of want to select the media from, whether it’s a URL or you’re the media library. We think it’s going to be more accessible and just friendlier to use. 

Birgit Pauli-Haack  So, also a little bit more unified flow from Cover Block to image block to gallery block?

Mark Uraine    Well, those are still going to be there. I don’t know if it helps that directly, but it just kind of helps you swap out the media within any of either of those blocks if that’s what you’re saying. Yeah, it’s definitely going to be a part of all those. 

Birgit Pauli-Haack  Yeah. Awesome. Awesome. Yeah, I’m looking forward to these materializing. If I can get you back just a little bit to the Navigation Block. So, I tested the new features in Gutenberg 6.4, and I also noticed the experimental settings–the settings for the experiments, and the navigation block was actually mentioned, but nothing happened when I checked it. I don’t think that’s yet available. The experiment is just a setting place, a holder, for the navigation block, is that right? 

Mark Uraine   It actually allows you to use the block, but it’s kind of odd because we don’t display the block in the inserter. So, you need to actually manually enter in the code or, which is in some of the Github issues, and I could even share this with you. It’d be interesting to try out, but you actually just put in the code in the code editor, and then when you come back to the visual editor in Gutenberg, it’ll show the navigation block.

Birgit Pauli-Haack  Oh, that’s cool. Okay. So, I need a little bit of documentation for that, yes?

Mark Uraine  Yeah. We should probably maybe even include a link in that.

Birgit Pauli-Haack  Yeah. And speaking of the experiment settings, I think the release of the block directory will be in one of the next versions of Gutenberg, actually as experiments before it is anywhere near Core. CK told us that last night as well. So, this experiment settings page is not for the faint of heart

Mark Uraine  Maybe it’s not for your real, live site that you care about a lot. 

Birgit Pauli-Haack   Well, you’ll immediately find out what’s not working, but yes, it’s a great place to be when you want to live on the bleeding edge.

So, it seems that this is a shorter episode of our podcast here. Mark, thank you so much for hosting this again with me. I wish you a great camping weekend. Sounds so fantastic. We just went last week, just for two hours to the beach, and we were really happy that we were able to get away from the computers, and it’s such a different outlook. Then afterwards, all the minutiae kind of melts away and you can do big thinking, 

Mark Uraine   It bring like a calm to you. This can help you relax a little. 

Birgit Pauli-Haack   Yeah, we’re hoping it stays calm. We’re watching the news, but other than that, the news from Noah about Hurricane Dorian heading for Florida and, stay safe everybody who’s watching in Florida. As always, the show notes will be published on gutenbergtimes.com/podcast. And if you have questions and suggestions or news that you want us to include, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. That’s it for me. Thank you all for listening, and goodbye. Have a great weekend. 

Mark Uraine Yeah, thanks for listening everyone. Remember to check out this week’s Gutenberg design update posts on the make design blog. Bye, now.

Leave a Reply

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