- Getting Blocks from Code to Plugin Repo – Create-Block & Block Directory by Birgit Pauli-Haack
- Augusts 6th, 2020 – 7 pm EDT / 23:00 UTC – Live Q & A with Kelly Dawn, Alex Shiels and Samuel “Otto” Woods on the topic: Block Directory a new way to extend WordPress Live Q & A w/ Kelly Dawn, Alex Shiels and Samuel “Otto” Woods
- Munir Kamal – EditorPlus plugin
- Weston Ruter – Syntax-highlighting Code Block (with Server-side Rendering)
What was released in WordPress?
- WordPress 5.5 Beta 1. Go and test!
- Editor features for WordPress 5.5 – update by Andrei Draganescu
- Gutenberg 8.5
What’s discussed or in active development?
Mark Uraine: I’ve been well. It has been a busy week, I will agree with you there. I’m excited about the new WordPress release that’s coming out very shortly here, which we’ll get to in a bit. And yeah, I agree with you Birgit, just been busy. A lot of stuff, a lot of information flowing through right now.
The Gutenberg Block building talks were great. I was only able to listen for a short period of time before I had to get back to work, but I want to give a shout out to the speakers and to put them in your memory so you can come back and watch the videos.
Chandrika Guntur talked about converting shortcodes to Gutenberg Blocks, a task many of us are looking forward to. Justin Ahinon, sorry, I’m butchering his last name. Sorry, Justin. He showed how to take advantage of the Gutenberg Reusable Blocks. Joni Halabi talked about the data visualization with Gutenberg. Whoa.
Mark Uraine: I missed these talks, Birgit, so I cannot wait to watch some of these. Wow, OK.
Birgit Pauli-Haack: Yeah. Mario Santos had a case study connecting Gutenberg and Frontity framework. And then Kinda Goehler wants you to turn and face the strange, talk about making the transition to Gutenberg. And Diane Wallace talked about building custom components for Gutenberg, and I just caught a few minutes of hers as well, and that was really excellent.
Mark Uraine: Kindra’s talk, that’s pretty clever … face the strange. I like that one.
Birgit Pauli-Haack: Yeah. So my talk was on Thursday, and it was an exploration of the great create-block scaffolding tool that’s built into Gutenberg plugin and how it relates to getting single block plugins into the block directory that will be available with WordPress 5.5. And I shared the slide deck in the show notes, if you’re interested.
Mark Uraine: I just want to say that talk, Birgit, is very timely right now. So with 5.5 coming out, and I think you and I talked earlier about how there’s really not a lot of documentation on this. So if you’re interested in getting your plugins into the single block plugin directory, watch Birgit’s talk there with how to do that.
Birgit Pauli-Haack: Although it’s all a work in progress, you’re right. The documentation, as well as the block plugin valid data that Alex Shiels is working on is also a work in progress, but you can already check it out. And I have some links in the slide deck, and I will add them also to the show notes here so you can get yourself acquainted with it.
Block Directory Live Q & A
Speaking of the block directory, we are working on a live Q&A, and it will take place on August 6th at 7:00 PM Eastern, 23:00 UTC, which is a little bit late for our European friends, but we need to kind of do an odd thing because Alex Shiels is going to come and he’s in Australia. Alex Shiels and Kelly Dawn both worked on the block directory feverishly to get it into beta release, so they only have to fix the bugs later, but the 5.5 feature freeze was on July 7th, so a lot of things needed to be done by then. That’s why documentation and other things are a little bit to the wayside right now.
You can subscribe to our YouTube channel, youtube.com/gutenbergtimes at any time and you are notified as soon as we go live with our next chat. So that was from the announcements.
Mark Uraine: Yeah. Birgit, I’m so glad that you do those Q&As, because that is just such a valuable time of information that is conveyed to the rest of WordPress users. And if you’re interested in that stuff, this is a perfect opportunity to really just listen in, to hear what these people who are building the product are doing.
Birgit Pauli-Haack: Well, thank you, Mark.
Mark Uraine: So thank you for that.
Birgit Pauli-Haack: Well, thank you for mentioning, they’re a lot of fun. And to our listeners, if you have an idea of what we should do on those live Q&As and have an idea of who should come on, I’m open for suggestions and ideas. Yeah.
Mark Uraine: So we have community contributions now. We’re going to talk about a couple here, Birgit.
First one that we noted was Munir Kamal published his editor plus plugin, and that basically extends the core blocks with a ton of additional settings and options. He calls it the no code visual style editor. Now, we have the link in the show notes, but it includes things like background for individual columns, box shadow, margin, and padding. On the Gutenberg team, we’re always hearing the desire for these other features to be baked in, and here’s a plugin that’s really, really addressing those needs of the users out there. So Munir, this is great, great work.
Birgit Pauli-Haack: Yeah. Can you say gradients one more time? And the background for the individual columns actually also includes images, not only color, but all gradients, but also images. It’s really cool. I find many, many settings on the block sidebar are quite anxiety inducing, and I know I will spend a lot of time just checking them out. So I have mixed feelings about all the options that I’m bombarded with, because I feel maybe if I’m not looking at them, I’m missing out on cool stuff. But the border radius on columns is really cool.
Mark Uraine: It really is. Yeah, I totally agree with you there. And as if that wasn’t enough, we’re looking at ways right now, and Gutenberg itself, to really advance the actual block toolbar and ways to fit things in there more. And there’s a lot of neat experimentation that’s going on, rather.
Birgit Pauli-Haack: That’s great, I’m looking forward to seeing those. Yeah.
And just in case you don’t know, Weston Ruter works for Google on the AMP plugin for WordPress, so he would know.
Mark Uraine: He’s kind of an expert there.
Birgit Pauli-Haack: Yeah. Kind of, yeah. The plugin update includes line highlighting, so you can determine which lines are actually highlighted in the class. And you will have a choice of programming languages, and you can show line numbers or red lines and all through the block setting. It’s quite extensive. So if you’ll have a developer blog where you share your learnings, you get some nice tools with that.
Mark Uraine: That’s very valuable, yeah. I know sharing code on blogs and articles that are written, it’s just so nice when it’s syntax highlighted, numbers, like just reading it is enjoyable.
Birgit Pauli-Haack: Yeah, it feels like your own code in your editor, an IDE. Yeah. And I must say, a lot of documentation that we have on the GitHub or in the tutorials is lacking a few code examples that kind of gets you started to think about that and then the explanations later on. So I think I’m going to team up with Mark, who has been working diligently on getting tutorials ready. He also worked on the create block documentation that will come into the tutorial quite soon.
Mark Uraine: Yeah. That documentation got in, right?
WordPress 5.5 Beta 1
Birgit Pauli-Haack: Yeah, you will have it in your list there. Yeah. Speaking of Gunin, what was released, the WordPress 5.5 Beta 1 is out. It was released on July 7th. Please go out and test it. There is a Beta test plugin out there so you can download that to a test site. But take your live state into a staging environment.
Mark Uraine: Yeah, don’t test it on your live sites.
Birgit Pauli-Haack: Yeah. The release candidate you might be able to test on the live site, but it’s also a big release and it touches all corners of WordPress. So make sure you are not getting blindsided by any of those updates. And of course, no one wants to break anything, but it’s known to happen. And the more people … what is the saying? The more people in there, all bugs are shallow. That’s my shoutout for WordPress 5.5.
Gutenberg 8.5 and 8.5.1
Mark Uraine: And that then takes us to a Gutenberg 8.5 and 8.5.1 that have been released. There are about 140 change items in this release.
Birgit Pauli-Haack: Amazing.
Mark Uraine: Right? I didn’t think there would be that many in this one, because I figured this was just like, let’s get the last few things in, ready for 5.5. But here we are with a list of very impressive changes that have happened.
So all changes on this plugin will make it into WordPress 5.5, except for the experimental parts, of course, like full-site editing, navigation, screens, and blocks, and widgets. That’s not going to be included in 5.5, but there’s so many other things that are coming in with block editor for 5.5, that it’s kind of a relief not to have all this stuff pushed into one release for core.
But there were two major features in 8.5. One was for accessibility, add an option to keep the caret inside blocks in the edit mode. And number two was adding an anchor or ID support to all static blocks. And that sounds kind of technical, but it’s a big deal. There’s been a lot of requests for this. Now you can add links to parts of a post, no matter which form it took. It can be a paragraph, or an image, or a quote, or anything, really. This opens up the content for additional functionality, like a native table of contents or a citation down to a paragraph that was cited. At the moment, it only works with the static blocks which have built-in, front-end rendering. So it’s in the works for dynamic blocks, so keep an eye out for it for dynamic blocks, but it’s there. A lot of people are digging that.
Birgit Pauli-Haack: Yeah, I read the issue when it was kind of introduced to that, and a lot of people were trying to add those anchor links into the HTML, and then the block parser kind of kicked them out again. And it was a never ending cycle of kind of … well, they had to use the custom HTML block because just using HTML wouldn’t work for someone. Yeah, so a lot of frustrated users out there that are now getting that in, so it’s really cool.
Mark Uraine: That is. In the changelog, there were 34 enhancements in this version. I’m going to comb through a good number of these, because they’re all so fun to read through.
There was, “Add an edit button to the gallery images,” so you can actually edit individual gallery images. The image block allows uploading external images if the image host allows it. So, Birgit, I know you love this one. Will you explain it to us? Explain this one. What happens?
Birgit Pauli-Haack: So what happened to me was that we did, the documentation team, we had new contributors who said, “Well, write on Google Docs and add your screenshots to it,” and then we copy paste it into the site. And what happened was we were not able to get the images over, because they’re still linking to the Google documentation. So you don’t want the pictures to go mad or 404 when somebody just deletes the Google doc because they were done with it.
So I think I advocated for it in all corners of people who have anything to say. And then Ella was so graceful to say, “Oh, I put it into WordPress 5.5 and I will work on it.” It didn’t get as far as she wanted, but this is fine for me. What it does is you copy paste something over from Google docs, and then if the image comes over and then you see on the image block a little button that says, “Download the image,” as well, then it automatically goes out, gets the image, and puts it in your media library. So, that’s fantastic. Thank you, Ella van Durpe.
Mark Uraine: And I know that’s a lifesaver, right? I love the little bit as well.
Birgit Pauli-Haack: Yeah, we do a lot of writing in Google docs. So that’s definitely a saver when we do publish things.
Mark Uraine: There were also a lot of drag and drop improvements. You had some enabling for multi selection, improving the drag and scroll behavior, pretty cool. If you’re dragging up towards the top or towards the bottom of the screen, and it’s a long document, the scroll behavior will move faster for you and slow down as you move away from the edge of the screen.
Birgit Pauli-Haack: That’s good, because I never got to the point where I could scroll it up there.
Mark Uraine: There’s a, “Don’t show a cloned block while dragging.” I love this because I would always get confused seeing the block that I’m trying to drag, but also seeing it still in place. And so it would clone the block, you’d see the block in two different areas. And it just kind of was confusing for a long time. That has been fixed. And actually, when you go to drag a block now, it kind of minimizes into this little chip, this little black thing, that you can kind of easily drag around the page and drop it wherever you want, which I love.
There were a lot of image editing enhancements, like moving zoom control to the toolbar dropdown, adding original aspect to dropdown. So now the toolbar for image blocks, when you click the crop tool or the edit tool, there’s a lot of different editing variations or cropping variations that you could do. And all of these are kind of now getting grouped together and I’m actually working on an issue right now to even refine that further. So it’s really nice.
Birgit Pauli-Haack: But I can also see that that takes a lot of work and a lot of iteration to get it right with the expectations that our users have. Can I do this? Can I do that?
Mark Uraine: Yeah. All the developers and designers who have already put in the time to make this happen, kudos to them, because it’s fantastic that we have these controls now. I love them.
Let’s see. There’s of course the block directory. There’s few changes there, like use a CDN for block directory assets, polishing the document’s sidebar controls. That was one that recently got in, and just really tightening up a lot of the sidebar controls. You know how, Birgit, you were saying sometimes it can cause you a little anxiety? Well, just by adding a little polish here, it kind of helps visually. There is adding the modern WP admin color scheme support. So if anybody’s watching in Track, there is a new color scheme that got merged in for your WP admin called modern. And Gutenberg also now adds support for that color scheme to translate into the editor, as well.
Birgit Pauli-Haack: Oh, that’s awesome. So that’s a little feature that kind of got snuck into the big, big WordPress 5.5 and only surface it here. Yeah, it’s interesting.
Mark Uraine: There was redesigning the transform menu. So that basically used to be a grid of blocks when you’d open it up from the block transform tool. Now it’s a list, which is a lot easier to kind of scan through and see what’s going on. They redesigned the canvas inserter, so when you roll over between the blocks, you get a little plus button. When you click that, the inserter that pops up right there is redesigned and just shows like the latest blocks or the most recent blocks that you used or something. And then there’s a browse all button as part of that.
Birgit Pauli-Haack: Yes, I saw that. That’s much cleaner, yes.
Mark Uraine: Yeah, yeah. There’s add block variations to the slash inserter, which is kind of cool. So if you’re just using the forward slash to search for your block, now you have blocked variations in there, as well. Add reusable block tab to the inserter, so when you click…
Birgit Pauli-Haack: Big deal. Big deal.
Mark Uraine: Yeah. And you get that and now it’s like a panel, the inserter. So we used to have blocks and patterns, now it’s blocks, patterns, and reusable blocks. So it’s kind of a really good way to see your reusable blocks in a spot that you can add to your document.
Birgit Pauli-Haack: Yeah. They were all lost on the bottom of the screen. Yeah, you had to scroll through all the blocks that you had, from the plugins, to the core, to get the reusable blocks out. Yeah.
Mark Uraine: And then we had keyboard shortcuts for moving blocks. So you can move blocks around with keyboard shortcuts. Making Preview and Save Draft buttons use the same style, so you’ll notice, as with all the other UI redesign that happened in Gutenberg, that the Save Draft and Preview buttons now are looking very similar. So it’s just some nice little tightening up. Another one, adding unlink URL to the buttons block. So if you ever wanted to when you added a link, now you can unlink it.
Birgit Pauli-Haack: That’s good. Otherwise, you only could replace it.
Mark Uraine: Yeah, you had to leave the button and then start over. And the last one here under announcements that I have is clean the patterns list to include in core. So what that meant is that some designers and developers kind of spend some time going through the list of patterns and kind of cleaning, refreshing that list a bit, so we can make sure that the patterns that are going into core are the patterns that we want and think that people will use.
Birgit Pauli-Haack: Block patterns are the first time in core. So it’s going to be really interesting with the block patterns, the block directory, the reusable block surface. There’s a lot of good new features in there for the block editor, apart from the cleanup UI.
New APIs for developers
But also in the new 8.5 was new APIs went in there. And only five new APIs, and I’m highlighting three of them. There was a stabilize the image editing REST API endpoints, so you can use those also in your own blocks and also server-side, if you need to. And then you can stabilize, also, the block directory REST API endpoints for the block directory coming into core. The new APIs also include adding descriptions to block patterns. So you can tell people what they’ll do with the block patterns.
Mark Uraine: Because sometimes the title of the block pattern isn’t really enough to tell maybe a screen reader what that block actually does, right?
Birgit Pauli-Haack: That’s right. The block tab, block pattern tab, it has a visual of how the block pattern is going to look. But of course, if you are visually impaired, you don’t see it that well, so it definitely helps.
The experiments that the team has been working on is the full-site editing experience, a site building experience so to speak, and has a few enhancements on fixes. It definitely improved the template parts insertion flow, which was kind of tested, and there were some changes made. And add the template part block keyword to the box searches, and so that helps as well.
And then there were some changes on the navigation screen and the navigation block. One of them was specifically for accessibility, improve keyboard navigation on the navigation block tool. That is big.
Another one was hide the block toolbar on the navigation screen. That was a little clunky when you wanted to put menus or menu items there, you’ll also get the block toolbar there and it was kind of covering things up. So that’s really good. And then allow setting up menus that auto add new pages, that makes the navigation screen feature on feature par with what’s possible now. You can do that and it customizes it.
And the last item here is to also allow the search block to be added alongside the links into the navigation bar. A lot of sites do that, but it’s now relatively hard to do, or impossible without some development access to the theme. So this is definitely a great.
Mark Uraine: Yeah, and now I think we just need to tighten up that search block a little bit so that it works nicely in the navigation block.
Birgit Pauli-Haack: Yeah. Yeah. Depends on how much space it takes.
Gutenberg Bug Fixes
Mark Uraine: Right. And I think with the bug fixes, there were about 33 of those in this changelog. Several of them had to do with the block directory. As everybody knows, that’s the new feature, so working out the kinks, there still.
There’s fixing the horizontal Block Mover layout, which is a cool one. Fixing invisible drop target indicator, so if you’re dragging and dropping blocks around and you kind of need to … there was a little bug there. So, that’s cool.
Birgit Pauli-Haack: So the fix was to make invisible, right?
Mark Uraine: Fix invisible drop target, yeah.
Birgit Pauli-Haack: OK, yeah. Make invisible.
Mark Uraine: Let’s see, the Classic Block, had several bug fixes, which is great because that one was just kind of lingering there unattended for a while, I believe. So these bug fixes are really helpful.
Birgit Pauli-Haack: Yeah, I’m glad that somebody tended to them there. A lot of users that come over from the Classic Editor are still very much in love with the Classic Block as a replacement.
Mark Uraine: Yeah, and I think I have highlighted one other … oh, don’t show the “move to trash” action if the user is not allowed to delete posts. So that kind of seems like an important one, that user to have permission to move to trash.
We had one major performance improvement of the keyboard shortcuts binding. And then speaking of performance here, Birgit, we had nearly a 0.5-second loading time improvement from Gutenberg 8.4 to 8.5. Not much of an improvement coming from 8.4 to 8.5 on the keypress event though, but still really good. Love seeing the performance improve all the time.
Birgit Pauli-Haack: Yeah. But when I look at the table that is on the bottom of the release notes, if you ever want to look at it, there’s quite some improvement between WordPress 5.4 and Gutenberg 8.5. So I didn’t do the calculations, but there’s definitely a 25% improvement there on the keypress event typing.
Mark Uraine: And we had about 12 documentation changes. These included things like adding a documentation page, explaining how the repository is organized. So that one, I think, is super valuable for new users coming in, looking at the repository. There was another one about add “create a block” tutorial, so adding that tutorial, which we kind of discussed earlier. Update categories in block registration documentation. So the categories, of course, got revised. We needed to update that in the documentation and several other things as well, including typos and tweaks of all kinds.
Birgit Pauli-Haack: And if you were looking for a documentation on the WP block styles, you will also find that in this release that they were updated or clarified.
About 21 code quality issues in there, they seem to be minutiae, but sometimes they’re really, really important because the little things make actually the world go round.
So one I wanted to point out is that they reduced the number of SASS color variables for the block editor, which cleans up code nicely.
Mark Uraine: Yes, love it.
Birgit Pauli-Haack: And then there was the block directory, it removed the custom permission check and now uses the canUser capabilities from core to make sure that only people who have permissions to actually install plugins can use the block directory. Because that’s what it does, it installs plugins in the background of things, so you need to have that. Yeah, and there was some things that unnecessary … removing unnecessary block directory dependency, cleaning up image editor REST routes, and fix end-to-end testing for the Post Author block that I can see there.
Which brings us then further to tooling, and that is even more things that happened a lot in the background. It’s about the continuous integration set up with Travis and GitHub. Also about package management and improvement in the release tool and release documentation. And certain additional scripts were added, like the TerserPlugin, and exclude node_modules from source mapping and all this kind of thing. Good thing, good stuff.
And run end-to-end tests, which brings us to the various section of our release notes.
Mark Uraine: Yeah. And so now we have what’s in active development. And we talked about WordPress 5.5 in Beta 1 right now, and I just want to repeat that. Everybody, please go test this out because it’s a big deal. It’s a big release, and it touches all corners of WordPress. So make sure you’re prepared for what’s coming. I just wanted to reiterate that.
Birgit Pauli-Haack: Yeah, good point.
Mark Uraine: There was a post recently, “Editor Features for WordPress 5.5 Update,” by Andrei Draganescu. And the release team is also working on dev notes for five new features for developers.
And there’s one on updating the default block categories, into the one on introducing new API method that register block from block.json metadata file. There’s one on introduce block context. Another one support filtering arguments and block type registration. And finally, a REST API one about exposing blocks registered on the server. We’ll have links to those in the notes. And finally there was also a….
Birgit Pauli-Haack: Oh, that’s just on … what we have here is the excellent spreadsheet that Justin, who is the wrangler of the developer notes for WordPress 5.5 has put together to see which track tickets actually need dev notes. So we only pulled the editor ones out there, but I think that’s also good for developers to have in mind. They’re also coming a lot of changes, again, to Gutenberg. For those listening who don’t know what block context is that is introduced, it’s the idea that if it’s a child block in a different block will behave differently than if it’s on standalone. So the parent block can pass on props to the child block, as well as styling and other options. So that’s certainly something that developers are going to use. Yeah. All right. So we are at the end of the show.
Mark Uraine: Yay.
Birgit Pauli-Haack: Yay. Yeah. Thank you, Mark. And thank you to the big Gutenberg team that has yet released another awesome Gutenberg version.
At the end of the show, I just wanted to remind everyone August 6th, 7:00 PM Eastern, 23:00 UTC is the Gutenberg Times’ live Q&A about the block directory with the team members Alec Shiels and Kelly Dawn from the meta team working on that block directory. So Mark, do you have any last reminders or announcements?
Mark Uraine: I do not right now, Birgit. So yeah, just thank you for joining me in this episode and to our listeners for listening in. But yeah, it’s time to close this out.
Birgit Pauli-Haack: All right. Well, listeners, you might have noticed we didn’t have a review to read. This is your chance for our next episode, send us a review or post a review to iTunes, and it will help to surface this awesome podcast higher into the suggestion box on iTunes and other podcast apps.
As always, the show notes will be published on gutenbergtimes.com/podcast. This is episode 24. And if you have questions or suggestions or news you want us to include, send them to email@example.com. That’s via email, to firstname.lastname@example.org, or just ping me on Twitter in a DM. It’s always open. So thanks for listening. Goodbye, and until the next time. Thank you, Mark.
Mark Uraine: Thank you. Bye bye, everybody.