In this episode, Birgit Pauli-Haack and Mark Uraine talk about Newspack for local news sites, live coding with Jon Q, Gutenberg Plugin 6.7, Storybook and Full-page Editing.
Credits:
- Music: Homer Gaines
- Logo: Mark Uraine
- Editor: Sandy Reed
- Production: Pauli Systems
Show Notes
Newspack, WordPress for local News
- First newsroom launches with Newspack
- Newspack Theme
- Newspack Plugin
- Newspack Blocks
- Newspack Ads
- Newspack Content Converter
- Newspack Development Environment
Live coding sessions with Jon Q
Postmortem Of Gutenberg The Launch, So We Can Embrace Gutenberg The Product
Gutenberg 6.7 (October 16, 2019)
Full Page Editing: (Update #37)
Contributing
Transcript
Birgit Pauli-Haack: Hello, and welcome to our eighth episode of Gutenberg Changelog. I’m Birgit Pauli-Haack, curator of the Gutenberg Times, and I’m here with my co-host Mark Uraine, designer at Automattic and Core contributor to WordPress. Hi, Mark, how are you today?
Mark Uraine: Hey, very good, it feels good to be back. I am a pretty positive today. I actually spent some time organizing my garage at home, and that’s always a huge accomplishment, or feels like a huge accomplishment. Implementing some better organizational practices with the team and ultimately just getting ready for WordCamp US coming up and the release of WordPress 5.3 shortly thereafter. How have you been?
Birgit Pauli-Haack: Oh, I’ve been, well thank you. I just returned from a trip to Europe and have a little bit of re-entry issues with the little robots not behaving and jet lag and all, and I’m also deep into organizing WordCamp US, which will take place next week. If any of our listeners would want to say hi while they’re there, it would be awesome. I’m part of the sponsor team so my place will be in the sponsor hall for most of Friday and Saturday. There’s a big table there that has a sign “sponsor team.” That won’t be bad. Yeah, come and say hello.
Mark Uraine: Birgit, I will be sure to do that because for our listeners, Birgit and I have never met in person yet, so this’ll be the first time.
Birgit Pauli-Haack: My, yes. That’s so true and I’m excited about that.
Mark Uraine: Yes!
Newspack
Birgit Pauli-Haack: So for our show today we have on the community contributions an announcement that the first newsroom launched with Newspack, and more sites are due to come. Newspack is the open source collection of packages for publishers by Automattic and the Chilean news website, El Soberano, relaunched today with the Newspack plugin. Not today, a week ago, becoming the first live site to use the new platform designed for small and medium-sized publishers. Steve Beatty reported on the Newspack site blog, and of course, we have the link in the show notes. The sexiest thing about Newspack is the possibility of putting together all the blocks of content and adapt them to your needs.
Ana Arriagada, co-founder and executive director of the El Soberano, said, “Newspack had easily configured modules to bring the content in flexible ways either manually or by categories or tags, to give some examples.” So, if you want to check it out, Newspack Automattic has open sourcedom on GitHub, and we will have the links to the Newspack theme, the Newspack plugin, the Newspack blocks, the ads, content converter, and the development environment in the show notes. I think this is a good and an excellent development in terms of democratizing not only publishing, but also helps local news and those who report on saying truth to power in any of the countries, and they can use this kind of system for it.
Mark Uraine: For sure. I’ve been watching this whole project go down at Automattic and seeing the great work that everybody involved has been partaking on it. They really wanted to use Gutenberg and make it flexible enough and ease of use for people to just really come on and do what they need to do in a beautiful way. I think they’ve done that really well, that team, the Newspack team. I’m so proud of the accomplishments that they did. Hopefully it continues to grow, and other news media outlets, sources really start using this and it just takes off.
Birgit Pauli-Haack: Yeah, I definitely like it–the plugin has also some business models for the newspapers, like memberships or membership content-restricted sites, their contribution, so there are quite a few things that are in there that any newspaper would need that needs to have some revenue and pay their journalists. Yeah.
Coding with Jon Q
Mark Uraine: Next up, Birgit, we wanted to talk a little bit about Q, or Jon Q. He’s doing some live coding sessions on YouTube recently, which had been really fun to watch. I know you watched a few. I have. The latest one, most recently, he created a card component in React and showed kind of how to hook it up with Storybook and some other things. It was a lot of fun just getting some insight on a developer’s process through the journey and how they think things through. It was so neat to just watch him move along through the code and trial-and-error his way into a component that he built. It was very informative. Do you have anything more about watching the videos of Q?
Birgit Pauli-Haack: Well, it was definitely a deep insight into the design process, kind of yeah, how far can we push a card component because it can be not only just show a featured image and an excerpt and a button, but it also could be part of a model. It can also be some kind of a form that can put in there. There are so many ways to go with this kind of component, and he tried to explore that. And the process of exploring these things was really nice to see, as how a designer can approach that.
Mark Uraine: Right. Well, we’ll include the link to his YouTube channel below in the show notes.
Birgit Pauli-Haack: Yeah. And one other community contribution is the postmortem of Gutenberg the Launch, so we can embrace Gutenberg the Product, and it was written by Leonardo Losoviz at the Smashing Magazine. He takes us on the journey from, “I was quite opposed to Gutenberg” over to, “I have lately found myself using Gutenberg more and more” to “Nowadays, I’m actually enjoying it.”
Mark Uraine: I love that, Birgit. I love it.
Birgit Pauli-Haack: Yeah, and it was a great article. Also, too, for those who are still having reservations of using Gutenberg is, he also worked through that part, Gutenberg the Launch has been quite controversial in ’17 and ’18, and some of what he finds is that some of the people in WordPress are still hung up on that, angry about some of that, and that keeps them to actually embrace Gutenberg as the innovation and the next phase for WordPress, or the future of WordPress. He hopes that a lot of people can now take that anger about the longer way to actually see the product and how well it’s coming around.
Mark Uraine: The way he talks about how people are angry at Gutenberg. You know, it’s not that they’re angry with it or how it works, they’re just angry at it because it is what it is, and it just disrupted the flow of the WordPress site as they knew it. And despite the drawbacks that were recorded early in the process with performance and accessibility, a lot of these things had been overcome or improved greatly since the release of Gutenberg, or the merge of it into Core. And he really promotes it in a good light, which I think both you and I appreciate.
Plugin 6.7 Release
Birgit Pauli-Haack: Absolutely, yeah. So the Core and design team has been busy getting WordPress 5.3, the release candidate, out the door. Release candidate 2 was published today, and we are recording this on October 22nd, 2019, and the block editor merge with Core seems to be finished, and then because the project space is empty for that. Last Wednesday, the Gutenberg plugin version 6.7 was released, and the bug fixes have been included into WordPress 5.3 release candidates. They were a back portal to that. But, let’s take a closer look at it. A highly discussed feature on Gutenberg has been providing gradient backgrounds for blocks, and in this release it’s now available for the Button block. I just tested it on our beta site that I’m getting ready for my WordPress meetup on Thursday where the topic is what’s going to be in 5.3, and it’s probably a five-hour meetup.
Mark Uraine: We should probably all have those meetups.
Birgit Pauli-Haack: Yeah. But I find out that it’s the early version of gradient background for any of the blocks, but the Button block is kind of such a confined component that you can really experiment with it, and I like the gradient presets that the developers and designers came up with us. There are some attractive and good variations for most websites. Let us know if you’re listening, if you try them out what you think about them.
Mark Uraine: It was a good place to start, I think, on that Button block. Just to really kind of figure out how the component might work, the interface, and there’s still a ways to go with this whole interface as well, to really dig in further with varying gradients, to be able to add more, the way themes integrate with it. All of this still needs to be worked out, but great start I think.
Storybook
Birgit Pauli-Haack: Yeah. Me, too. So in his release notes, Riad Benguella highlighted that this release also introduces a Storybook for developers, and this is a little excourse into that. What is a Storybook in this context? And the Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular, and it makes building UIs organized and efficient. Storybook runs its own web server separate from your React app, and provides a catalog view for the components that you can choose how to use it. So, this is an exciting tool and helps in figuring out how each worker’s component works, behaves, and has the various use cases. Of course, we’ll provide the link in the show notes at gutenbergtimes.com/podcast. Marcus Kazmierczak also put a tutorial together on how to take an existing component and create a Storybook story for it.
Mark Uraine: That sounds pretty interesting, because I know there are some technical hurdles about getting those components into Storybook, and I know I’m not savvy with them all quite yet myself. But yeah, this whole Storybook option was originally, I believe, introduced by Enrique Queres in a PR, and it got merged in, and it’s just a beautiful visual way to see these components and be able to copy down the code, pull from them, change things up if it’s live editing, and having this as part of the Gutenberg package is really great.
Birgit Pauli-Haack: And if you want to contribute, you can kind of follow along with Marcus on his tutorial and grab some of the components. They’ll still need stories for it, if you wanted to. Mark, what else is in the Gutenberg release?
Enhancements
Mark Uraine: Yeah, so it looks like in 6.7 here, we had about four enhancements. I’ll run through some of those. Polishing the font size picker design, use body color for the post publish panel, limit the width and height of the pinnable plugin icon, and add a max width to the search block input. Just four of them there. Nothing super spectacular, but they are enhancements, and it shows that the team, while being focused on WordPress 5.3, is really making efforts and strides at improving the experience around Gutenberg the plugin, as well. We’re still maintaining a two-week release cycle and improving things as we go, which is really cool.
Birgit Pauli-Haack: Now that you mention it, the two weeks release cycle, are we expecting a good milk plugin release for the WordCamp US week, which would be next week?
Mark Uraine: That’s a great question. I don’t have the answer right now, but I know we’re looking at trying to help align contributors around the plugin focus areas more. There’ll be a post coming up on Make Core Blog sometime in the future from Riad kind of highlighting focuses for the month. That being said, I know that’s kind of a walk-around, bad answer to your question there, but I don’t know. I don’t know.
Birgit Pauli-Haack: So, we watch the Core/editor Slack channel to see what’s going to happen. The Wednesday meeting definitely will let us know. Speaking of the focus areas, there are some experiments in Gutenberg 6.7. There’s a major partner of the menu navigation block, the iteration around that. Then there’s also the initial state on top level pages, they’re fixing some menu alignment on that. It has experiments around the block directory as well, and, of course, the widget screen that is still in iteration and experimental stage had to get it to use blocks in individual areas or block areas.
Mark Uraine: Yeah.
Birgit Pauli-Haack: There was some bug fixes, right Mark?
Mark Uraine: Yeah. Bug fixes, 37 — 37.
Birgit Pauli-Haack: Wow.
Mark Uraine: A lot of them are being backported to 5.3, which is fantastic. Among these were items like fixing the headings and the paragraph colors inside the cover block, closing the NUX tips, new user experience tips, tips that pop up for a new user, allowing those to close by clicking away from the tip. There were fixing the block preview padding and and how those previews work in the inserter panel. You hover over a specific block or get a preview of that block now. And on blocks where we don’t have previews, we wanted to make sure we included some text there that said no preview available. It’s just a lot of little bug fixes that really tighten up the whole experience altogether. There was also a performance improvement from Ella. She was working on avoiding continuously reset the browser selection. So, there’s a PR around that and should improve that performance. And then we had some documentation in various items as well. Right, Birgit?
Birgit Pauli-Haack: Oh, yeah. Documentation items, there was only one thing apart from the typos and tweaks that are happening on an ongoing basis. It was the examples for the data controls for the WordPress script on the data controls in documentation, and they are now also, they’ll work now, so they catch up with all the different development that was done in Gutenberg.
On the various sections of the release notes, I will only want to point out about three things on that. One of it is that there is now a WordPress environment package with a zero config self-contained local represent alignment available, and they cleaned up the dash icon component. And the last one is that for the block preview that Mark mentioned earlier, the images were slowing down the whole thing, and they’re now using the content distribution network on WordPress.org for the images. That’s a major implementation there.
Mark Uraine: Yeah, we really spent some time and talked about how do we do that, right? You have the image block. Well you can’t really show a preview of the image block without an image, right? So, how do we do this with self-contained software? Do we include the image in the software itself? And what about licensing behind these images? We were looking at public domain stuff for a bit, and we were looking at other companies that offered open licensing and stuff, but nothing was really working. We even tried base 64 and coding these images into the software itself, but the file size was too big coming out of that, so we really worked with the meta team on .org and managed to upload some open license images onto the CDN there, and we’re pulling from there now in the software and it seems to be working great.
Birgit Pauli-Haack: Awesome. Yeah.
Full-page Editing
Mark Uraine: Let’s see, so moving onto some of the active development that’s happening in Gutenberg right now. This is a pretty exciting part. Let’s see. Last Friday I just posted, and I kind of posted the Gutenberg design update posts that I normally do on Fridays, but this time I really wanted to focus on full site editing because that is happening. We are moving towards this right now. I kind of wanted to gather a good list of resources and links of the issues and the PRs. Everywhere that the conversation is kind of happening and the development is being built out and package it all in this one post so that everybody could kind of read through it and click off and go investigate where they might be able to contribute and leave some feedback for the people involved. But, I kind of broke it up into three sections. Is that right, Birgit?
Birgit Pauli-Haack: Yep.
Mark Uraine: I think I did a section on full site editing where we talked about block areas and full site editing and entities and sources and hit up some of those key issues and PRs. And there’s a whole other section about modes, like we’re discussing about having an edit mode and navigation mode. We kind of introduced this navigation mode a little bit ago in Gutenberg for like keyboard navigation, but then you know, other people bring up, “Well what about the code editor? That’s a mode.” How do we include that in these various modes and how do we make it easy to switch through these modes? And then Yohan, who’s a fantastic designer, brings up like, “What if we don’t consider these as modes, but what if we look at them as tools?” And it really causes you to like take a step back and rethink about how we’re talking about these things. And if we look at like a toolbar in Adobe Photoshop or something and you select a specific tool to perform, do a certain thing, in your palette from your document there. And if we kind of envision these modes as being kind of a way or tools, and a way to react or to work within Gutenberg itself. But anyways, I’m going off on these tangents.
I also included a little bit about block patterns as well because that’s a thing, and we need to help support the users and people who are using WordPress with predefined beautiful layouts of blocks that they can really just implement or include right on their document and just fill in the blanks with content. And, so all these areas are being explored. They’re all going to touch each other and interrelate with each other, and finding those connection points can be big for us.
Birgit Pauli-Haack: Yeah, and it’s definitely early stages there, so if you have opinions or want to just see what the discussion is going to go around, any input would be really, really helpful for exploring all these different areas. I also put in the show notes an exploration plugin that Konstantin Obenland did for Automattic, for the WordPress.com area, and we are here exploring that editing with a navigation menu, site description, template parts, site title, and then a full site editing and yeah, just kind of see how that’s going to work in real life pretty much. Yeah, I’m really excited about the layout patterns, which have great potential in terms so people don’t have to make all those decisions.
Mark Uraine: Right.
Birgit Pauli-Haack: If they don’t have a vision, it’s the blank space that all of a sudden you want to fill. And we know it from writers, we know it from artists or painters that the empty white space produces a lot of anxiety for creators. So getting over that hump, the first step, and then getting some layout patterns going for the page is really good. And there’s a link in there to the GitHub repository issue also in the show notes. So, what else? I think we are about…that’s the end of the news for today.
Mark Uraine: I think so.
Birgit Pauli-Haack: It’s really filled with a lot of information there.
Mark Uraine: Yeah, I just keep thinking about WordCamp US coming up here, and I’m just getting excited to get over there, see everybody, meet you, Birgit, and make some connections there. I love that about WordCamps–is that it’s a great opportunity to just meet people in person and get to know them on another level outside of a 64 by 64 pixel avatar.
Birgit Pauli-Haack: Yeah.
Mark Uraine: My mind, believe it or not, has kind of already traveled there. I’m already at WordCamp US. I’m just waiting for my body to arrive.
Birgit Pauli-Haack: Yeah, we are also on the sponsor team. We’re kind of head first into the last minute questions and logistical support that we give for the sponsors that are coming. There are 58 sponsors.
Mark Uraine: Wow.
Birgit Pauli-Haack: And on various different levels, and it’s going to be really awesome. If you…and there’s also Sunday–is a Contributor Day. If you’re there, and you want to stay over Sunday, there are two things that I wanted to point out to you. And even if you’re not there, they are interesting links for you to contribute to Gutenberg development and if you don’t know where to start, Greg Ziolkowski identified Good First Issues on the GitHub repository. I’ll also throw in the link to the WordPress development environment that you can get on GitHub. And then for non dev contributors, you can follow the Needs Testing label in the repository. What is that? The Needs Testing means okay, somebody logged an issue on Gutenberg and now it helps when somebody else double-checks that issue and figuring out if it has all the information and if you can review or reproduce the issue and then comment on it. That, anybody could do who has the latest version of Gutenberg, and that’s really helpful for issue gardening and moving it along. So that’s really cool. And Mark, you are going to be at Contributor Day as well.
Mark Uraine: Yeah, I’ve been asked to lead up the testing table, probably because I’m the one posting these Gutenberg usability tests pretty monthly on the Make Test Blog. So I’ll be there at the testing table, and we’ll talk about various ways. We’ll also look into ways in which we can test and help confirm bugs. But, we’ll look also at ways in which we can maybe do usability testing, writing scripts for usability tests. I’m always kind of struggling with writing scripts myself on a monthly cycle to start doing usability tests every month in Gutenberg, so I’m sure that there are people out there who have more experience than I at this and can probably whip up some great usability testing scripts that I can use in these tests.
Contributor Day is fantastic for getting involved though, and I want to point out just how awesome the Gutenberg team is at identifying that there’s a big event coming up and then spending time in the repo to prepare it for contributors that day. Like Greg’s work to go through and identify Good First Issues. I know other people are involved in this and adding labels, organizing things, preparing it all to help out the contributors that are going to show up that day to make their experience as wonderful as possible.
Birgit Pauli-Haack: Yeah, that’s awesome. May I ask a question about the usability tests? Who are the people following those script? How do you find them?
Mark Uraine: I’m using a service called User Brain right now, and it’s a paid service where I just kind of post up some scripts. I order some testing videos. A lot of times these people may be completely new to WordPress, other times they’ve had some experience, and in some cases are familiar with Gutenberg. So, it’s really very new people to Gutenberg that I’m testing. I’ll test scenarios, I’ll test layout patterns, and lately like this month I’m really just trying to test out the various ways in which Gutenberg allows you to align items side by side right now and see how people do it within Gutenberg. If people are familiar with a gallery option or a columns option, or even like the media text block, you know? And having people talk out their process really gives me insight into ways in which we can improve that experience.
Birgit Pauli-Haack: Excellent.
Mark Uraine: Yeah, it’s really very fairly new people, but it kind of opens my eyes and hopefully others as we watch these videos and see how people use the software.
Birgit Pauli-Haack: Yeah, I think it’s a crucial part of the development process to figure out, okay, now we have this thing. Can people actually use it? All right. So people, dear listeners, thank you for joining us today. As always, we have the show notes on the gutenbergtimes.com/podcast, and this was episode number eight.
If you have questions, or suggestions, or news you want us to include in the next show, send them to changelog@gutenbergtimes.com. That’s changelog@gutenbergtimes.com. So, this is it. Thanks for listening and we’ll see you at WordCamp US or any other place online.
Mark Uraine: Definitely. Thank you, everybody, for our listeners listening, and we appreciate it. Goodbye, everybody.
Birgit Pauli-Haack: Goodbye.