Chime in on design & development of the block editor
Birgit and Mark answered listener questions on which version is in WordPress Core and when the next version will come out, on documentations. They shared summaries from talks from WordCamps and other conferences by KAdam White, Greg Ziolkowski, Jonathan Williams and Felix Frantz. Mark fills you in on the ongoing usability testing by the design team and how they influence development and design. Birgit discussed with Mark the work on the Gutenberg Starter Theme and the multi-block transformations to columns. They also mentioned features in the works, like gradients for background of blocks, row and column styling for the table block and a new list search for categories in the document settings. If you have questions, or news to share, please contact us at changelog@gutenbergtimes.com
Music: Homer Gains | Logo Design: Mark Uraine
Show Notes and Resources
Video: Gutenberg Live Q & A: WordPress and AMP, AMPSories in Gutenberg
Video: Gutenberg Live Q & A: Using Gutenberg for news and editorial sites
Listener Questions
- Block Editor Documentation: Gallery Block
- WordPress Releases: Dev Chat Summaries
- WordPress 5.2 Field Guide
Announcements
Gutenberg Times Live Q & A -August 2nd 2pm EDT/ 18:00 UTC “Using Gutenberg to bring speed and flexibility to news and editorial sites”
Talks at WordCamps and other Conferences
- #WCBos: Real-World Responsive Blocks by K.Adam White
Slides | Plugin | Philip Walton’s article - #jsforwpconf: Growing your JavaScript skills by Greg Ziolkowski
- #WCBos: “Reacting to WordPress: an Evolving Journey of Plugin Development by Jonathan Williams
- #WCEU: Leveraging the Power of Custom Elements in Gutenberg by Felix Arntz
Usability Tests
Gutenberg Usability Testing for June 2019
In Active Development
- Mock-ups to add gradient backgrounds to blocks.
- Gutenberg Starter Theme
- Transform to Columns
- Alternative Search for list (Categories for instance)
- Table Block
Transcript
Birgit: Hello and welcome to our second episode of this new podcast called Gutenberg Changelog. I’m Birgit Pauli-Haack. I’m curator at the Gutenberg Times and I’m here with my co-host Mark Uraine, designer at Automatic and core contributer to WordPress. So how are you today, Mark?
Mark: I’m doing well. I’m doing well. This day has been full of meetings for me, so it’s a nice break to step away for a little bit and sit down and just talk with a friend like you. You’re here for awhile.
Birgit: Oh, that’s nice. That’s nice. Yeah. And I have a quite an interesting live Q and A this afternoon with the people from Google about AMP Stories and Cathi Bosco was on it too. And we did a love fest for M stories because they’re visually so attractive. So I’m really psyched about that. So shall we start with our listener questions again?
Listener Questions
WordPress Release 5.3 and Gutenberg plugin releases
Mark: Yeah, yeah. It seems to be a good format. People are asking some questions and I’m excited to answer those. So let’s see. Peter Mueller asks on Twitter there, I believe, Any news about a release scheduled for WordPress 5.3?
So there was, just this week on Wednesday, was the core meeting in Slack and that was talked about. So there’s three likely target dates for WordPress 5.3 right now. Nothing has been determined yet, but the three dates could possibly be a one month prior to WordCamp US. And WordCamp US is on November 1st through the 3rd.
The other two possible release dates would fall after WordCamp US. One could happen two to three weeks prior to Thanksgiving and Black Friday, or another date would be early December. That’s what was discussed. And again, no decision has been made yet. Peter also asks another question. He says, which version of Gutenberg Plugin will be merged with it? That’s hard to say because New Gutenberg Plugin versions are released about every two weeks right now. So it all comes down to math. It could be about eight to ten versions of the plugin down the road from right now, for all I know. Based on those timeframes for WordPress 5.3. I hope that helps, Peter. Thanks for those questions.
Birgit: Yeah, those, those are fabulous questions. Thank you, Peter. I, I get them once in a while also randomly outside of this Changelog. And it is an opportunity to actually clarify the difference between the development cycles of the block editor in WordPress core and the Gutenberg plug-in. Do you know which version was in WordPress 5.2, Mark?
Mark: Yeah. So, in in WordPress 5.2, I believe, Gutenberg 5.4 was bundled with that version. And these questions are fantastic because there was a lot of confusion when the Gutenberg Plugin was holding the same version number as the WordPress version for awhile, and that caused a lot of confusion. So helping people understand that Gutenberg Plugin moves a lot faster and every two weeks a new version is coming out so we’re already on 6.2. So you know, so things are moving quickly.
Birgit: And what happens is that unless there are really bad bugs in the core version, none of the features that get into the Gutenberg Plugin after a release, a WordPress core release won’t be ported back to the release. The good plugin is pretty much the Beta testing of the block editor’s new features until they can be merged with core. So when we talk about what will be in a release of the plugin, we always talk about the plugin and normally not what’s in core. Probably didn’t make this clear enough.
Mark: Oh, that’s right.
Birgit: Yeah.
Mark: Yeah. And but yeah, and even so if you have the plugin and happened to update your WordPress software to 5.0 that turned off the plugin. So make sure you activate it again and you’ll get access to the latest Gutenberg stuff that’s being merged into the plugin as we go. And even in the plugin, Birgit, we’re looking at an experiment’s settings page of sorts to allow people who have the plugin to even test even more on the edge stuff that we’re building, which is fantastic. Like the widget screen or customizers stuff and we’re working out that settings page right now. Hopefully that’ll be getting merged in very soon.
Birgit: Yeah, it’s interesting, but I think it’s very important to actually release those things into the wild so you get more feedback and more…
Mark: That’s it. Exactly. Yeah. It’s one of the best ways to test is just get this into people’s hands that are willing to experiment and maybe try things out. You don’t need to have a local environment at that point. You just fool around with it a little bit.
Gallery Block: Documentation
Birgit: Yeah, and so we have another listener question or discussion. Elizabeth had a question on trade off about the image stroke and the difference between linking to the attachment page or linking to the media file. And during the exchange, we discovered a mistake in the documentation. The documentation said that if you use the media file, then it would automatically be displayed in a carousel and that is something that only happens when the check pick plugin is also installed. In the genesis of the startup, the block editor documentation is that the WordPress.com support wrote the first set of documentation for the block editor for their users and they have automatically installed the check pick feature.
Mark: Right.
Birgit: So when it was transcribed to the WordPress.org, of course everybody went through it, but that fell through the cracks. So I moved and thank you to Elizabeth for surfacing that. Now when you link the media file, all the browser is displaying is just that particular image that was linked from the gallery block.
Mark: Correct. Leave that settings in the sidebar there. The inspector, right? If you want to link it to the rightful file.
Birgit: Yeah.
Mark: Yeah, that’s a great find. Thank you Elizabeth for that and Birgit for scouring through the documentation and…
Birgit: I had to rely on Elizabeth, she had all the links in there in her treat. If you, dear listeners, also have questions. Feel free to tweet at us, @gutenbergtimes with the hashtag “changelog” or just send an email to changelog@gutenbergtimes.com and we’ll answer your question in our next episode. I’m absolutely sure that if you have a question, a lot of our listeners had the question at least in the back of their minds as well, and we want to answer those over the air.
So we have only one announcement. Next week, our live Q & A on August 2nd 2:00 PM Eastern and 18 UTC. The topic is using Gutenberg to bring speed and flexibility to news and editorial sites. We’ve had discussion with Byline Times editor, Peter Jukes, and yes we were team members, Andrew Staffell and Thomas Eagle about how custom blocks allow journalists to compose engaging layouts and without the help of the designers, and how ACF advanced custom fields blocks makes testing and iteration easier for the developers. We also thought that we were going to start out with talking about in the community happens or what we heard on both hands when we are out there and I can shut up talking about Boston. I’m sorry.
Mark: You just got back from there, right?
Real-World Responsive Blocks by K.Adam White
Birgit: Just got back from work in Boston. Yes. And I got to listen to quite a few excellent talks, not all related to Gutenberg but one was “Responsive Containers” by K. Adam White. K. Adam is a component container, I think, for the rest of API.
Mark: Yes.
Birgit: The but he didn’t talk about the rest API dropped in Boston. He talked about the problem that media queries in sun sheets don’t get us where we need to go when we want to target blocks for styling and because you can’t target elements that are capsulated in a column block to resize some for the stage, the parent element clients. And here’s a very nice example of where there’s a three column layout, a block spread and then put the blocks grid in a kind of locals and two column layout thing.
And of course the column block did not fall back to its one column layout when it was in a smaller space. Just to recap so that you could change the multi-color layout for grid display to one column when the screen size is under 400 for instance, but you cannot resize it easily when the paradigm and only to support numbered pixel widths. So K. Adam was forming a suggested solution by Philip Walton, who’s an engineer at Google and applied it to reference.
Mark: I definitely want to watch that though because we are right now- I know we’ve taken a stab at some concepts and mockups. Looking at making, adding block responsive controls or responsive controls for blocks and one of the things that keeps coming up right now is that people are noticing the column’s block doesn’t just respond nicely on mobile, or the median text block, right? People are asking like “Shouldn’t this just stack on mobile? Why isn’t that default?” But it’s not happening so we need to investigate this more.
Birgit: And do you what I love? Because K. Adam actually released his first plugin ever in the plugin repository where he made this available to-
Mark: I can’t believe that’s his first plugin ever.
Birgit: I couldn’t believe it either.
Mark: He should have like 10 plugins out by now.
Birgit: So it was definitely worth checking it out. It made a total sense when I saw him, and we will have those lights and the plugin. And also Philip Walton’s article in the show notes so you can follow along. Yeah, it was a very good talk. Yeah.
Mark: Adam does a good job at explaining that stuff for people to understand and grasp, so yeah.
Birgit: Yeah. I understand it.
Talk: Improve your skills JavaScript skills with WordPress
Mark: Another recent talk that was given at JavaScript for WordPress conference was by Greg Zelkoski, and he’s a developer on the Gutenberg project. His talk was about how to improve your skills with WordPress, JavaScript skills with WordPress, and he later then, after the talk he wrote up a post about it, put it on his blog there, which we have a link to in the notes.
And in the post, Greg goes over the history of JavaScript’s relationship with WordPress, compares React to some of the other JS libraries that WordPress used like Backbone and jQuery. And he touches on extensibility, which he has just a little part about extensibility, but I love it because as I mentioned last time we talked, extensibility is the number one reason people love WordPress, according to the site building study that was done earlier this year.
And he talks about React, how it opens the door for this extensibility even further. And then he digs into it in his post and he goes over the modular architecture, embracing modern tooling. He goes into that a bit and talks about code re-usability, which is a big thing now. And even code quality. The post is great for just, even if you’re new to JavaScript, new to React, to read up on and get a sense for some of the reasons behind the decisions and how React really helps us, and WordPress in the future, grow. So.
Birgit: Yeah, and I have my of have Radke has done some awesome talks on other WordPress before. And he also did some live programming on the Gutenberg Times live Q & A with Seth Gordon, when he taught us how to change the block to one with your own buttons. So it was really good.
Talk: Reacting to WordPress: an Evolving Journey of Plugin Development
Second talk out at Boston about Gutenberg was a higher level one by Jonathan Williams with the smart title or cute title Reacting to WordPress: an Evolving Journey of Plugin Development. And Jonathan works at Boston University, and he and his team are working on what they call the BU learning blocks or short ups [inaudible] and he retold the team’s journey creating open educational resources and quizzes for students available for free on their public websites. And when they started imagining the project they saw WordPress, jQuery and a Shaker Library called Slick. And then when the project progressed they first switched out the front end and said, “Okay, we’re going to do this in React,” and then switch out the backend and said, “Okay, well let’s use Gutenberg for it.”
It extended a little bit the production of that and certainly took a productivity hit at the moment. But they really feel that making those decisions future-proofed whatever they put in and created because they want this website or the courses and the curriculums out there for many, many years to come. So now educators are putting online curriculums together and are able to add their own quiz questions using Gutenberg and why adjacent data format, the feed the question into the front end. So I was fascinated by the story and the architectural choices and then refactoring the earlier code for Gutenberg once it was in Quora. So once that’s breakfast TV, I think it would be a good thing to watch for anybody who’s starting out. Imagine some more things with Gutenberg.
Mark: Yeah, it’s exciting to hear Jonathan talk about it as future-proofing their work because I’ve been involved in conversations before, Birgit, where people are really hesitant about React and what Gutenberg is doing right now as, and portraying it as almost as a blocker for a lot of people. I remember, a lot of people really used WordPress at a time to learn how to develop and to program and they learned PHP through this. And in a sense, I totally understand that argument being made that yeah, adding React and looking at things like a node and npm packages and webpack. These things are daunting for people coming in who want to learn how to develop. So when I hear someone say it’s future-proofing WordPress or future-proofing their work, it’s heartwarming to hear that there are people out there that are really trying to learn maybe some modern technology and looking at WordPress once again as a way to learn and to grow development skills.
Talk: Leveraging the Powers of Custom Elements in Gutenberg
Yeah. Well we have one more talk by Felix Arnst who is a developer at Google working on amp, wrote another recent post about custom elements in Gutenberg. It’s called Leveraging the Power of Custom Elements in Gutenberg and we have the link in the show notes. In his post, Felix talks about technology complexity and content complexity and he presents a component based approach called custom elements. Then he breaks this down very technically, offers a few warnings for getting it right and provide some great examples of the few projects using custom elements at the bottom. So if you’re interested in the technical side of Gutenberg, this is a great post. There are some terminologies that you might have to acquaint yourself with, but if you’re a developer, jump right in. He’s opens it up and offers an interesting solution that I think is very important to read through.
Birgit: Yeah, that’s a very interesting article and I think Felix talked about this at Europe also.
Usability Tests in June 2019
What happened on Europe and we mentioned it last week. The core team also did some Gutenberg usability tests and some of the updates to the Gutenberg plugin based on the insights on how users work with a block editor now. And, Mark, what else will the team discuss what all the plans to do future studies?
Mark: A lot of us are watching these usability videos, and not only the designers, but we have developers looking at them. Accessibility team, wordpress.org watching these and they’re opening up a lot to our eyes. One of the main things is just the tips that you see when you come into Gutenberg. Oftentimes when we’re going through some usability tests, these tips are covering content and making it more difficult for the user to really achieve that first task.
And then we might have talked about a little bit of this before, but that’s tips are re getting redesigned because of some of the results coming out of this. And we see a lot with blocks as well or even drag and drop. Adding drag and drop is a big thing that people are trying to use within the editor while they’re trying to accomplish a specific task. For new users who are not familiar with Gutenberg and the block paradigm. Sometimes it’s not always easy for them to go back to the block upender icon or to insert a block. They just want to grab the content that’s on the page and drag and drop it into where they want it to be. And so there’s explorations that are happening, which is really cool. And these usability tests, we’re planning on do keep keeping the cadence of performing a usability test, one every week.
So we ended up at the end of the month with about four tests. I’ll sit down. I’ll go through them myself, but I’ll just try to post the videos at first, open it up for discussion for others to watch. And all this is shared on the make blog, a forward slash test. And we’d love to get people involved in that discussion and contributing there, watching these videos, calling out the things that interest them most. Because watching them ourselves, we miss things at times and there might be things that are very specific that other people have also have been challenged with in Gutenberg or great successes as well. So these will continue to happen. And we’re also looking at having another usability testing table at WordCamp US, similar to how we did at WordCamp Europe.
Birgit: Excellent, excellent. So I really like those usability tests because sometimes I find myself in the situation that I can’t grab the border of a column or either get a block out of it or blocks into it with a drag and drop. And so I’m always wondering is it me and my mouse skills? Or is it a problem that other people also have? So sometimes I might not air that. Yeah. Towards the developer team or file a GitHub issue because I can’t nail it down in terms of what is it exactly that goes wrong? And these usability videos definitely help with that.
Mark: They do, they help reaffirm that it’s not just us that’s having the problem. There’s others out there struggling. And so catching onto these challenges is vital for us as we continue to develop and design and build Gutenberg.
Gradient Backgrounds for Gutenberg Blocks
Birgit: Yes. Speaking of what’s in the works right now, and I saw on GitHub some great mockups to add gradient backgrounds to some of the blocks. And the first one would probably be the color block and the mockups include two or more different color pickers and then as well as the radios for the direction of the gradient and opacity for the various colors. I think that’s a great development too. Really answers some of Peter’s questions on the enhancements to existing blocks that he had last week.
Mark: That gradient issue right now is getting a lot of contribution from other designers who are designing mockups and sharing them right there and the issue. And who knew? It doesn’t always happen this way. Next time I want and I need some contributions, I’m going to find a way to work gradients in it because… And I’m sure to get some good contributions and these are good mockups these people are doing. Love it.
Gutenberg Starter Theme
So let’s see. Another thing being worked on, recently, is the Gutenberg starter theme. Kjell was taking a look at that this week and made several improvements throughout it. It has a dark mode. Basically he added a theme preview thumbnail to this, some toggles for theme options and align the Front End Styles more with Gutenberg. And for those of you who don’t know, the Gutenberg starter theme was a theme that really was built to just kind of allow developers and designers and other contributors to really test the bare default styles that Gutenberg presents in the editor and on the front end.
Sometimes when you’re testing PRs and testing ideas out with an opinionated theme that might impose its own styles in the editor, sometimes it’s hard to tell if it’s the editor that’s causing a problem. Is it Gutenberg? Or is it just the theme is forcing the block to work a different way than you expected? So having a Gutenberg starter theme just makes testing so nice for the rest of us, and Kel has really gone through and beefed it up and added some really good things needed there, and he’s even looking at getting it submitted to the theme repo possibly this week. There were a few hiccups with that. I believe that theme repo now is kind of requiring like any theme options to be built into the customizer and not have its settings page, so he’s working through some of that right now just to refine before submitting it.
Birgit: Yeah, and a work on the Gutenberg starter theme was long overdue. I think the last time somebody worked on it was two years ago when Gutenberg was first released as a plugin.
Transform to Columns
Speaking of Kjell, he also exposed an idea on how to handle selecting multiple blocks and transform them for instance, into a column display. And the GitHub issue we’ll link in the notes, but it’s an interesting concept then because one sometimes fines on top of the situation for changing one layout and then you have to do it one at a time, kind of drag and drop a column above all it and then drag and drop all the blocks that you want to have in there. But I also found that the columns block for transforming is an interesting approach.
I would have thought that maybe that formatting would be the first thing that will be done with one blocks connected because that’s one of the stumbling blocks. When people move from Classic Editor to Gutenberg, then all of a sudden they cannot just highlight 15 paragraphs and set them on to a different font size or align them left or right. It’s interesting that the transformation is actually into a different layout, but I was wondering if we could do the slur, but though I’m just now dreaming.
Mark: Yeah, I think it’s really riding the coattails of the group block and how we’ve recently implemented the group block. You were able to select a few different blocks and convert those or into a group block or wrap them in a group block with one click. So with that functionality, Kel saw this and really wanted to group these blocks into a call. So I think that progression was just a natural progression into rather groups into columns. But what you’re bringing up about selecting multiple blocks and be able to format them differently. This is something that we need to work on, and we need to get this going. These might lend themselves more to- they wouldn’t be global styles, but they’d be just formatting multiple blocks at one time.
I think you bring up great point there, Birgit. We have another issue that we can bring up. It’s the alternative search for lists in the UI. There was some early discussion about this search functionality and the issue. Recently a contributor suggested taking a look at how GitHub themselves do this. So when you add labels to issues and you search for a label and turn it on and off. So we were looking at this in relation to the categories in Gutenberg there. Yeah. Recently to help keep that conversation going or to spark it and getting people contributing again, I just threw up a few mockups based on the GitHub style. And so there’s something there to look at for people and comment on. And after that, I want to talk about the table block a little bit.
Table Block: Styling Rows and Columns
Birgit, I love the table block because it’s- And WordPress, the classic editor, just really didn’t give you that ability to create a table and add data, right? So having this table block just makes it so much easier. And currently, Dan Richards a developer on the Gutenberg project, he’s been focusing a lot on improving the features around the table block. There’s one particular one that’s coming that can be tested right now, but it’s a pull request 16493 where he’s adding complete row or column selections in the table, so you can actually select an entire column and then that the feature is that you’d be able to align that column differently rather than having to go through each cell and make a change. So, this is really basic stuff for a table, right? How we operate in the world of spreadsheets and use tables. But getting this refined in Gutenberg is happening right now. We’re bringing those features in. So.
Birgit: No, that’s really huge. And I know they are not the only one who likes tables in their contents and it’s rare that editors actually can do the rows, select rows or columns for formatting, either as line by line and then it’s columns and rows or it doesn’t work at all. So this is really huge. Yeah. Thank you for bringing that up. Yeah, so I think that’s all we have for today.
Before we end the show, I want to remind everybody next week, August 2nd is the live Q & A with using Gutenberg blocks for news and editorial sites. The links are on the front page of the Gutenberg Times. Or you subscribe to our YouTube Channel and you won’t get notification about when we go live. So do you have any other last announcements, Mark?
Mark: Listeners, keep your eye out for the weekly Gutenberg design update. That’s going to be coming later today. Normally I get that out before our show earlier, but I’m a little late, so keep your eyes out. It’s coming.
Birgit: Alright, the show notes will be published on the Gutenberg Times. GutenbergTimes.com forward slash podcast. And if you have questions or suggestions or news you want us to include, send some to, Changelog@gutenbergtimes.com. Thanks for listening and goodbye.
Mark: Yes, thank you everyone. Bye. Bye.