Gutenberg Changelog #12 – Gutenberg 7.2, Community Theme Explorations, Live Coding and Future Block Areas

 
Play/Pause Episode
00:00 /
Rewind 30 Seconds
1X

In this episode, Birgit Pauli-Haack and Mark Uraine kick off 2020 with the Gutenberg release 7.2 and its array of new features and enhancements. They cover theme explorations in the community, block areas and block patterns. There is a live coding session coming up, too.

Gutenberg Times Live Q & As

Community Sites

  • Share a Block – “Community submitted free block designs and templates for Gutenberg editor to help you get started.” by Jeffrey Carandang

Experimental Full Page Editing – Videos and PRs by Enrique Piqueras:

Tammie Lister on Block Building and New Theme

Gutenberg Development

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 12th episode of the Gutenberg Changelog. In today’s episode, we will talk about this week’s Gutenberg plugins release 7.2. There’s more theme exploration being done in the community. There’s an upcoming live coding session. And the focus for this month, what’s being worked on in the future, like block areas and block UI.

My name is Birgit Pauli-Haack, and I’m the publisher of the Gutenberg Times. So glad I have you with me again. And my co-host is Mark Uraine, designer at Automattic and Core contributor to WordPress. Happy New Year, everyone. So glad you’re here. Hi Mark, how are you today?

Mark Uraine: I am wonderful. Happy New Year to you, too, as well Birgit and all our listeners. It has been fantastic. These last few weeks have been just mellow and pretty relaxing. I’ve been working but the community at large has all been on vacation it seems like, so it’s been relatively quiet in all the Slack channels, so I just focused on a lot of design work and knocked out a lot of issues in GitHub and it was fantastic though. I’ve just come out of today, out of a team meeting, and we’re really looking forward to full site editing and creating designs to share with the community and get them out there for the information architecture flows and user journeys. Good stuff.

Birgit Pauli-Haack: Well, that’s awesome. I’m convinced that 2020 will bring a total explosion of creativity to plugin authors and theme developers and designers and of course in Core and I’m very much looking forward to it.

Mark Uraine: Yeah.

Birgit Pauli-Haack: I’m a little bit afraid that even I can’t keep up with it all.

Mark Uraine: Oh, I know that.

Birgit Pauli-Haack: But there’s always the community who will tell me, ok, you miss this and you missed that.

Mark Uraine: I know that feeling though, keeping up with all the creativity that’s happening out there right now around WordPress is amazing. The explosion that you speak of is happening faster than I thought it would, already this year.

Rethinking Themes & Upcoming Live Q&A

Birgit Pauli-Haack: Yeah, really remarkable things, and if you haven’t listened to it yet, the recording of our December live Q and A on rethinking themes in WordPress is now published on Gutenberg Times. There’s a transcript and the links we mentioned during the show. There was a show with an Ellen Bauer, Rich Tabor and William Patton, all major theme developers or involved in theme review, like William.

Since then, Mel Choyce-Dawn published a proof of concept of a new theme with HTML templating, and Enrique Piqueras published short videos on how to create a single page template…and I invited Enrique to show us some more about the new template and template parts, content, custom post types, and how a theme can make it all look beautiful and options rich for additional creativity for the site owners.

So reserve the date for our next live Q and A. That’s January 23rd at 2:00 PM Eastern and 1900 UTC, and as always you’ll find the link to Mel’s theme and Enrique’s videos in our show notes.

Mark Uraine: Yeah. Speaking of those templates and template parts, I’m actually going to be digging into that this week and looking through the flows and the design work and really trying to help Enrique push that further. So that’s going to be a fun project.

Birgit Pauli-Haack: Yeah, it’s amazing, the work that has been done there. And it’s still not finalized. Yeah, I think it’s more a proof of concept, but it’s also hard to get input when everybody’s kind of talking in the abstract. Then you don’t see, you can just touch it. It’s not tangible for development.

Community Sites

Mark Uraine: Right. Right. It’s very true. Prototypes are so helpful to really just convey the ideas more concretely.

So we have some community contributions. One of those being, Birgit, is share a block from Jeffrey Carandang. He’s put that site together. I think we may have talked about it before of block patterns, and anybody could come on, and if you have a particularly creative pattern that you’d like to share with others, you can submit it to this website which would be in the show notes, and once approved it gets listed there for everybody to see and download and use that block pattern, and just put it right into their own website. Really creative stuff.

Birgit Pauli-Haack: Yeah.

Mark Uraine: I’m actually…

Birgit Pauli-Haack: Go ahead.

Mark Uraine: Oh, I was going to say, I’m actually going to be reaching out to Jeffrey, hopefully if you’re listening, Jeffrey, pretty soon because I’d like to find out what are some of the more popular patterns that are being downloaded by people and being used because this is something that Core is looking at right now.

The Gutenberg team is exploring block patterns, and we’re going to get to a point where we’re going to want to include the default block patterns for people to use, and maybe some of these most popular ones that are people are using might be great start for us.

Birgit Pauli-Haack: Yeah. And so that the numbers, the click numbers go up, go and look it up, share a block. There are blocks from Ben Gillbanks and from Mel Choyce, from Mark, you put one in there and off-grid photos, block pattern and of course Jeffrey put quite a few in there. And JB Audras also has a nice pattern that I’m going to use on the Gutenberg Times as a favorite WordPress plugin pattern. So check it out.

Tammie Lister on Block Building and New Theme

Another community contribution is Tammie Lister has blogged about her block building journey and going through the design and the programming part of creating a knitting pattern, block pattern.

Speaking of pattern, it sounds like a very nice read and it makes a lot of things very clear in terms of language and also in terms of how you can kind of combine blocks to a block pattern. But she was very busy over the holidays, and she also started a new theme called Lithosphere, and it started out as a theme that is very minimal but then uses blocks for navigation and the other things, so it’s definitely a journey. She hasn’t finished it yet, but if you want to follow along, go to the logicalorbinary.com site.

Mark Uraine: Yeah. I believe her site is using that theme, correct?

Birgit Pauli-Haack: Yeah, I think so. I believe so.

Mark Uraine: Yeah, really great work. She took some time off as a lot of Automaticians do and at the end of the year, and she really spent it being very creative in the work she was doing. And so, that brings us to a Gutenberg 7.2, Birgit. Can you believe that?

Gutenberg 7.2 Release

Birgit Pauli-Haack: It’s a huge release. Reminded me back in early 2018 when we also had a mile long changelog of release notes. Yeah.

Mark Uraine: How many items were there?

Birgit Pauli-Haack: They were 122 items, line items, were in this release.

Mark Uraine: Wow. That’s a lot of work for a team that was supposedly taking the end of the year off there, right?

Birgit Pauli-Haack: Right. Absolutely. Yeah.

Future Block Areas

Mark Uraine: So, Ella van Durpe posted about this yesterday, I believe, on Core, on the main Core blog, and gave us all these things to go through so let’s talk about them today, Birgit. We’ve got the new features category, which we love to dig into because that’s always very exciting.

Birgit Pauli-Haack: Yeah.

Mark Uraine: One of them being adding a new buttons block. Now listeners, you’re probably familiar with the button block, singular, right? Well, this is a buttons plural block. You can add multiple buttons together, which is really where we’ve been trying to get to for awhile now and be able to reorder these and utilize these in various ways. Right. It’s a common pattern we see all the time.

Birgit Pauli-Haack: Yeah. It’s when you have your hero image and you only can put in one button or need to use a column button to have two buttons. Now you just need the buttons block, and you can even apply different coloring to each block. So it’s really nice. I love it.

Mark Uraine: Yeah. And what’s interesting, too, is that particular block really helps inform, or vice versa, the navigation block as well, because they’re similar almost in a way that you’re having horizontal items, horizontal child blocks next to each other, and so the learnings from each one of those is kind of feeding into each other.

Let’s see. Another feature, support adding links to the media and text block image. Yes, that’s what I was waiting for. I thought I was going to say, I think I heard all our listeners just shout out, so you can link the media in the media text block.

We have the navigation block, which is a number of enhancements or features or just improvements overall. The gallery block, adding an images size selector so you can change that size.

Birgit Pauli-Haack: I was like, “Yeah.”

Mark Uraine: Yeah, yeah. That has been very requested, right?

Birgit Pauli-Haack: Yeah.

Mark Uraine: What else do we have here, Brigit?

Birgit Pauli-Haack: Yeah, so those were the new features and for those who have not yet realized that the navigation block is out of experimental, so you can use it on your pages and posts to have page navigation. I really like it.

So on the enhancements, there were a few things that are quite improved, for instance, the block place holders design and the responsiveness. What are placeholders when you create an image, when I add an image block, you get this gray field of text and buttons. That’s called a placeholder. Another one is upload videos or audio.

Mark Uraine: Speaking of that one, Birgit, the placeholder design. Very interesting how we just basically kind of left justified everything. If you remember in the past it was all kind of centered, but now with the new improvements to the core UI, you see it in the buttons and stuff and we’d left justified everything. Looks very sleek and it really works well, I think, in like some of the narrow spaces as well. I know that we’ve seen a few issues, but overall I like that little touch, it’s those little details.

Birgit Pauli-Haack: Yeah. Especially when you’re on the mobile phone and you want to add something to that, then you actually can read it and the buttons are not overlap themselves.

Another improved block feature is the multi-selection styles. That’s a little bit more obvious that when you multi select blocks as well as segments of blocks. There you cannot yet format over more than one paragraph block, but that’s coming in. This is kind of the basis for that.

When you come in with Gutenberg from the classic editor, and you want to convert the text all into blocks, sometimes there are stumbling blocks, and now it can now preserve the text alignment and it also skipping over short codes. That has been fixed, so yay to the those who worked on it.

A big enhancement part was not only in the enhancement but also in the bug fixing was accessibility, a big focus for this release. So a new tabbing behavior was introduced into the edit mode, and when you tab forward you can get out of the block, and then it brings it to the end of it, and then tabbing backwards brings you to the block toolbar and the header, and it makes it a little easier if you are traveling that editor by keyboard, and the tabbing focus is for the next elements and inside the editor, outside the editor, is all a little bit more streamlined and consistent. So try it out and see if that works better for you now.

You can also press enter to return to edit mode or use the arrow keys to tab to navigate to other blocks. So some of it was already working, but it’s now streamlined. And also some UI copy was updated for consistency.

Mark Uraine: Now one of those being, I think we mentioned it before, sentence case. A lot of the UI elements were title case and we’ve been shifting it over to sentence case now, which just means a capitalization on the first word.

Birgit Pauli-Haack: Makes a much better, a much nicer reading.

Mark Uraine: Yeah. It does. And we’re really trying to get consistent with a lot of the things, but at the same time trying to keep proper nouns, time case throughout.

So, the bugs list, Birgit, we’ve got about 36 bugs. I’m not going to go through them all for you listeners, but several of those were accessibility bugs that were improved or fixed. Some of the pasting issues that people have had and experienced, like let’s see, content that results in a new block shouldn’t be treated as inline content. One of them being preserving inline images. Another removing trailing, breaking elements, VR elements. And remove windows, paste markers, stripping HTML formatting space for inline text, and applying active formats when pasting inline. So these, all those bugs regarding pasting have been tended to.

Birgit Pauli-Haack: Yeah, and I really was looking forward to that because I have been pasting from Google drive almost four or five documents per week and I always had this trailing break elements to edit.

Mark Uraine: Yeah. You always had to go back. Yeah. And hit delete and hit the go up and hit delete.

Birgit Pauli-Haack: Yeah. It was very meditative. Then back into the tech stuff that had done it. Yeah.

Mark Uraine: That’s much more uplifting than how most people would put that, Birgit.

Birgit Pauli-Haack: Yeah. I have found that all the tedious work that I do in household or computers, I kind of make it a meditation and then kind of clear my head and come back from it.

Mark Uraine: So we’ve got a few other bugs like fix the gallery block crashing on the contributor role, only show available image sizes for imaging gallery box, reposition popovers on click. This was the one that was having some issues. If you clicked on various things a popover would kind of get all winky wonky. But let’s see, and the writing flow, simplify and fix tabbing out of the block as you mentioned earlier.

Birgit Pauli-Haack: Yeah. Now also, two new APIs. Well, they’re more, but two I wanted to highlight. One is that a button component with the buttons block, also the button component had been refactored in a big way, and so if you as a developer using that core component for your plugins, make sure that you go back to it and look for it, if it still works well. It now supports the icon property and this design has been tweaked to more consistent across different variations.

And the other API is a new keyboard shortcuts package and that has been added both the goal that users can edit their own keyboard shortcuts combination and third-party developers can register their own keyboard shortcuts for the plugins and hopefully themes.

Mark Uraine: That’s really cool.

Birgit Pauli-Haack: Yeah. And so that’s also a huge factor. Also, if you are using some of the shortcuts, if you find some things that are a little quirky, that’s a technical term in our household, quirky, please feel free and kind of put a GitHub issue there and just say this shortcut doesn’t work or it’s wonky or it doesn’t work.

Mark Uraine: I have a question. Can third-party plugins override a keyboard shortcut and change command Z to do something else, I wonder?

Birgit Pauli-Haack: I did not dive that detailed into any of those pull requests. So there are one, two, three, four, five, six, seven, eight.

Mark Uraine: They’ll all be linked for you listeners. Let us know if that’s possible or not.

Birgit Pauli-Haack: Yeah. So those keyboard shortcuts, they’re all linked in the release post by Ella so you can find them on the new APIs. We are not going to put them in the show notes that way.

Yeah, that’s pretty much it. There’s a new react hook for the programmers and the environment containers found some support arbitrary commands. I like that. Arbitrary commands for linting package and also font size picker has now a default size, which is nice.

Experimental Full Page Editing – Videos and PRs by Enrique Piqueras

The experiment section of Gutenberg is still the same as it has been for the last few versions. It’s about full site editing. It’s about the widget screen and the customizer and it’s about the block directory, so anything that we need to kind of highlight from there?

Mark Uraine: The experiments are all still there in that same page and if people are looking to really get some insight into full site editing, make sure you go to that experiment’s page and check on some of those checkboxes, especially with the recent merge that Enrique Piqueras did. There’s really good work that can, that’s prototype there. People can check that out. I don’t know if that’s in 7.2 yet though. I think it was just merged recently.

Birgit Pauli-Haack: Yeah, we definitely have in the show notes some of the videos that Enrique put up to kind of demonstrate some of that full page editing with the templates.

In the blog directory, it has a focus for 5.5 and part will be in 5.4, so they’re getting closer to a working prototype.

Mark Uraine: Yeah. Right now you can turn that experiment on and actually use it from within Gutenberg and install those blocks straight from Gutenberg, but I know there’s still a lot of work to come that will affect the WPI admin interface and some other areas.

Birgit Pauli-Haack: Yeah, we mentioned that the guidelines have been published.

Mark Uraine: Yeah. Yeah.

Birgit Pauli-Haack: The proposal for the guidelines have been published for those block plugins and there are not a whole lot of plugins or single blocks in the directory. So if you want to experiment with that and see how that works, contact Alex Shields in the meta channel. Send them a DM message also and then he can help you get this released or at least be experimented. Yeah.

Mark Uraine: And so, documentation. We’ve had lots of updates to the documentation, added lots of various types of packages or types of various packages.

Birgit Pauli-Haack: Well, the packages that didn’t have, what variables didn’t have types. So those were edited.

Mark Uraine: Thank you.

Birgit Pauli-Haack: They were that type. They were that type first and then now they have specific types in there.

Mark Uraine: We have documentation for the custom select component, as well as the writing flow component. There was also a link to the user support documentation added to the welcome guide in Gutenberg now. So it used to be just kind of three little slides that you could jump through to get an understanding of how to use Gutenberg. But now there’s a fourth slide in there that talks about the documentation and they’ll be a link where to go.

And let’s see, lots of typos and tweaks that were implemented as well to help with readability. And after documentation of course, we have various, the very descriptive section of various.

Birgit Pauli-Haack: That’s the kitchen drawer, right?

Mark Uraine: That is. Right. You just put everything else there. So there is a number of those refactor the media replace flow component, to use dropdown, writing flow is updated to rewrite with hooks, add minimum maximum values to the gallery columns attribute.

Birgit Pauli-Haack: Yes.

Mark Uraine: Including demo block templates in a build zip and added plenty of end-to-end and unit tests. These unit end-to-end tests have been some of the most difficult parts for me these last past few couple of weeks.

Birgit Pauli-Haack: I imagine.

Mark Uraine: I am always getting nailed with errors on those with my PRs, but nevertheless, it’s been a learning experience.

Birgit Pauli-Haack: So the media replace flow component, that is the component that when I have an image block and I want to replace that image, that flow, update it. Ok.

Mark Uraine: And it’s being applied to a lot of the other blocks right now as well. I don’t know if we had mentioned that or will be mentioning that, but that little component’s going to be more consistent throughout the interface.

Birgit Pauli-Haack: I think it was in the image block before, but now it’s distributed also to media and text, and I believe actually also to the cover block or maybe that’s just wishful thinking on my side.

Mark Uraine: So what’s app development?

Birgit Pauli-Haack: Yeah, I’m kind of a little confused but there is a new media replace control that’s implemented in all media blocks that kind of goes into the media component, and it’s tested for the image blocks and now it’s also implemented for video and audio.

Mark Uraine: There it is. There it is. We mention it right there.

Birgit Pauli-Haack: And Andrei Draganescu and Soren Wrede have been working on this and got that into the release of this week. I’m sorry. It’s still an active development. It has not landed yet.

Mark Uraine: It’s been merged though.

Birgit Pauli-Haack: Oh. Ok.

Mark Uraine: On with a particular blocks. But because I remember when it got merged I saw several little ta da emojis with, you know, the surprise like appear all over Slack because we’ve been waiting for that one.

Birgit Pauli-Haack: Yeah. And there was quite a production there.

Mark Uraine: And then as we talked about earlier, Birgit, the navigation block is no longer experimental. So there are a lot of people working on that right now, especially that we saw bring that up in the core editor chat earlier this week and that just can use a lot of people testing it right now. And so if you have an opportunity, listeners, try out that block, drop some messages in Slack or in Twitter. Let us know what you think about it, how you’d like to see it improved. There’s a lot of work that needs to be done there.

Birgit Pauli-Haack: All right. What’s also in what’s discussed or what’s in the works is Riad published the focus areas for the month of January and in broad strokes, these are the features of the block content areas that are very important for the full page editing experience in terms of a front page template or a framework to nest blocks in lists and other entities and have the blocks that are doing the site description for tags and for post author be in there.

I find this very important — exposed to global styles, also to the block content areas so they, the theme developers, as well as the users can have a consistent appearance of all the blocks that they put in there.

Block UI

The block UI, that’s a continuous effort to improve the accessibility and usability for the Gutenberg plugin and it’s based on user feedback and also have an updated block Y design that’s being explored. There are two or three GitHub issues linked where the discussion is happening right now.

Mark Uraine: Yeah. That new block UI is really a simplified high contrast view of how these blocks work. And listeners, if you get a chance to look at some of the gifs that are being posted on some of these issues, you can really get an idea for what it looks like. But one of my favorite things that I didn’t even realize it affected where like right and left justified images with wrapping text.

Normally you’d see the block of the text, the border of the box kind of still surrounds the left or right image block as well and it was a little bit confusing, but with the reduction of this UI, it looks just much more intentional.

Birgit Pauli-Haack: Yeah.

Mark Uraine: It doesn’t look like an accident. It looks on purpose now. Like this is how it’s supposed to look, if you’re doing it right.

Birgit Pauli-Haack: So the image does not just text onto it?

Mark Uraine: Right.

Birgit Pauli-Haack: Yeah.

Mark Uraine: Or like overlapping oddly the text block that it’s wrapping, right? Like, yeah.

Birgit Pauli-Haack: Yeah. And the noisiness of a Gutenberg editor, when you hover over certain things, they appear and disappear. It’s something that’s for quite a few people, a little bit anxiety-inducing and overwhelming at first, so tightening that up and making that a little less noisy is certainly improving the Gutenberg experience as a whole.

Mark Uraine: Yeah.

Birgit Pauli-Haack: So the other part that reared once the developers and the designers all to work on is tightening up the interfaces and polishing the navigation log, expand the new media flow component, block patterns for several blocks and these kinds of things. So that seems to be all on target and focused.

Mark Uraine: Yes, there’s lots of work everybody. There’s always lots of work.

Birgit Pauli-Haack: Yeah. And there’s a lot of appreciation needed. It kind of, there’s a lot of work, but it can be very overwhelming to, to figure that all out. So, before we end the show, I want to remind everyone to join us on January 23rd with the live Q and A and coding demo session with Enrique Piqueras at 2:00 PM Eastern, 1900 UTC. How about you, Mark? Do you have any last reminders or announcements?

Gutenberg Development

Mark Uraine: Yeah, just, you know, we spoke a bit about the navigation block. I want to remind everybody that I posted last year’s final usability tests in which I actually ran a few on the navigation block. So if anybody has a chance to go and watch some of those videos, they’re on the make test blog on wordpress.org.

And this month, in particular, I’m kind of focusing on the columns block. So, if any of you have suggestions or ideas or certain experiences around the columns block that you’d like to see tested or improved, DM me in Slack or hit me up on Twitter, and I’d be happy to investigate that further. We’re going to make a run at improving this columns block.

Birgit Pauli-Haack: Yeah, and it definitely can use some TLC. So I’m definitely looking forward to it. And as always, the show notes will be published on gutenbergtimes.com/podcast, and if you have questions or suggestions or news that you want us to hear, send them to changelog@gutenbergtimes.com. That’s the email address changelog@gutenbergtimes.com.

That’s it for today. Thanks for listening, until the next time.

Mark Uraine: All right. Goodbye, everybody. Thank you.

Published by Gutenberg Changelog

Updates and Trends around Gutenberg, the block editor of WordPress - A podcast with Mark Uraine & Birgit Pauli-Haack

Leave a comment

Leave a Reply

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