In this episode, Birgit Pauli-Haack and Mark Uraine talk about talks around Gutenberg at WordCamp New York City, new plugins for the block editor and enhancements, features and changes in Gutenberg 6.5 release, which will be merged with Core in the next WordPress release in November 2019
Music: Homer Gaines
Logo: Mark Uraine
Editor: Sandy Reed
Producer: Pauli Systems
- “How I Rebuilt my Base Theme for Gutenberg” by Beth Soderberg
- “Don’t Fear the block! Gutenberg is getting good” by John Eckman
- Add a new Social links block.
- Support border radius changes in the Button block.
- Support adding a caption to the Gallery block.
- Support local autosaves
- Disable the click-through behavior in desktop.
- Add one-click search and install blocks from the block directory to the inserter.
- Refactor the Navigation block to be a dynamic block.
- Add a block navigator to the Navigation block.
- Only show the customizer block based widgets if the experimental widget screen is enabled.
- Add a disableDropZone prop for MediaPlaceholder component.
- Add post autosave locking.
- PluginPrePublishPanel and PluginPostPublishPanel support icon prop and inherits from registerPlugin.
- Allow disabling the Post Status settings panel.
- Restore the keepPlaceholderOnFocus RichText prop.
- Upgrade React and React DOM to 16.9.0.
- Switch the local environment to an environment based on the Core setup.
- Refactor the loading animation to rely on the Animate component.
What’s in active development?
If you have questions or suggestions, or news you want us to include, send them to email@example.com
Birgit Pauli-Haack Hello, and welcome to our sixth episode of the Gutenberg Changelog. I’m Birgit Pauli-Haack, Curator at the Gutenberg Times and I’m here with my co-host, Mark Uraine, Designer at Automattic and co-contributor to WordPress. How are you today, Mark? Did you bring anything from the Grand Meetup that you can share just among friends?
Mark Uraine Yeah. That Grand Meetup was a week long event in Orlando, Florida. Not far from you, if I’m right? Although, you weren’t there in Florida at the time. But yeah, lots of people, lots of keynote speakers, that engaged the audience and taught some very interesting concepts. There were classes. I took a React class, a security class. Really good stuff and it was a great opportunity to bond with my fellow colleagues and get to know everybody on a more personal level. So how have you been Birgit?
Birgit Pauli-Haack Well, I’m still high from participating in WordCamp, New York City. I just can’t get enough of the city and what did I learn at the WordCamp? So much. I didn’t do much WordCamp speaking this year, so it felt really fantastic to interact with the attendees, also as a speaker. My talk was about work before nonprofits. So, nothing to do with Gutenberg, except on the fringes of it. But I had great conversations with various community organizers, and they have ideas on how to use technology to get information, freelancers, working with nonprofits, and they have those, and then nonprofit leaders who tried to make the best with the limited funds that they have.
Mark Uraine That’s great. I want to keep an eye out for that talk on WordPress TV.
Birgit Pauli-Haack Yeah. I’ll let you know when it’s up there. So the New York City co-organizer, said it’s between 30 and 60 days. So it might take another two months till you get them up there, and then I also would recommend looking up Beth Soderberg’s talk. She walked us through her process making her own starter theme, Gutenberg ready. She had some great insights in her decision-making for the changes, and she ended up modifying considerably, the Gutenberg starter theme. So her talk was called, How I Rebuilt My Base Theme for Gutenberg. And then there was John Ekman, CEO of 10 Up, and he shared some of the work of the agencies, that have been doing, and he mentioned a few third-party block plugins, like the Atomic Blocks, the CoBlocks, Stackable, the ultimate add-ons for Gutenberg and then the fairly new plugin called Kioken Blocks.
And we put both slide decks from John and Beth into the show notes and keep your eye on the WordPress TV talks of them. They’re certainly very, very interesting and then one of the sponsors at Redken, New York City gave out t-shirts kind of thing. “I survived Gutenberg.” It was really funny. Every time I passed by their table I had to giggle inappropriately.
Mark Uraine How funny.
Birgit Pauli-Haack So a full recap would probably take us into the next three episodes. But I just want to stop here and give a big shout out to the lead organizer Mervin Hernandez and his merry band of co-organizers, volunteers, fellow speakers and sponsors. So thank you all for your hard work in the community and the warm welcome you had for all the attendees. It was really a great event.
Mark Uraine How cool. That sounds like a fun event. I will have to make a trip out there someday. I do love New York City myself, for visiting.
Birgit Pauli-Haack Yeah, yeah. For visiting, it’s really cool and we went out over to Roosevelt Island and on the way back, we took the tram, the gondola tram over the river.
Mark Uraine Whoa.
Birgit Pauli-Haack … To really travel into the high rises of the night. It was almost out of the science fiction movies. I have a video of that on Twitter somewhere and it was quite interesting to see.
Mark Uraine Well, Birgit, we don’t have any listener questions. But we did receive our first review on iTunes. All right.
Birgit Pauli-Haack Yay. Yay.
Mark Uraine So Radiosalon wrote that … They say, “Great info and updates, great podcast, informative and detailed. Gutenberg team updates and what’s happening throughout the Gutenberg community. Provides places to add your own contribution as well and ask questions to be answered by hosts in the episodes. YouTube and show notes. Great.” They give us five stars. Woohoo.
Birgit Pauli-Haack Woohoo. Thank you. Radiosalon.
Mark Uraine Yes. We appreciate taking the time to leave a review and, who knows? Listeners, your review might be next. Stop on over and leave us some stars.
Kioken Blocks and Mighty Blocks
Birgit Pauli-Haack On iTunes. Yes. Under our community contribution, I wanted to point out a new plugin, that’s Kioken Blocks. It’s available in WordPress repository and John Eckman actually mentioned it also in his talk. It’s built by Onur Oztaskiran. I might butcher his last name … Sorry Onur … And he introduced some a block layout patterns, called design templates and other interesting approaches to the Gutenberg blocks. So check it out. I definitely will check it out over the weekend and see what we can do with it.
Mark Uraine Yeah. So design templates. As we’ve mentioned before, those were some things Core was starting to look at, and I know we have an issue on GitHub about these block patterns or block layouts and we’re going to keep moving forward on this. So I’m sure we can learn a thing or two from Onur as well, and that plugin.
But, we also have another community plugin called Mighty Blocks. It’s on the wordpress.org plugin directory as well. There’s some really interesting things they are trying and experimenting with and the way that they’re handling some user controls. They’ve got background controls for gradients and images, border and shadow controls. They’ve got typography controls and spacing controls for margins and padding, even some responsive controls for the blocks, and text selection color and background color. So, a really good variety of detail that Core just hasn’t offered yet. So, this plugin is really, really nicely done.
Birgit Pauli-Haack If I understood correctly, that the plugin also actually modifies or expands default blocks.
Mark Uraine Yes.
Birgit Pauli-Haack So they’re not new blocks that are going to be in your directory.
Mark Uraine Yeah. These are just more detailed controls for the user. Really cool.
Gutenberg 6.5 Release
Birgit Pauli-Haack Good. Oh, nice. New things to play with, over the weekend and check them out. Yes. So, but this week, Gutenberg 6.5 was released on Wednesday. It’s also the version that will be merged into Core for the 5.3 release in six weeks?
Mark Uraine Mm-hmm (affirmative).
Birgit Pauli-Haack Yeah. Six weeks. Oh, my God. The first beta version of WordPress 5.3 is expected actually, on Monday, September 23rd. That’s just for the plugin and theme. They also have to test and update the products, so their products work well in the Core version. This release notes, again has about 72 line items of changes and I want to start with the new features. Mark, what do they bring?
Mark Uraine Yeah. But before we jump into the features, I wanted to point out as well, that for WordPress 5.3 coming up, there will be, I believe, 11 Gutenberg plugin releases going into that, getting merged into Core. So Gutenberg has had 11 releases since 5.2. All these great features and enhancements and wonderful things are going to be included into Core now and really give people who are just opening up WordPress for the first time, a beautiful experience.
Blocks and More Blocks
Mark Uraine But, yeah. Let’s jump into features of 6.5, Gutenberg 6.5. There’s a new social block, which is really cool. This has been a long standing requested item, a block that you can share your social media links in. The designer and developers did some really good work there and really explored on a way in which inner blocks can be horizontally aligned with each other and how to interact with them. So, a little bit of a little different pattern, design pattern there and I think ultimately, we could really pull over some of these ideas into the navigation block, as we’re continuing as well. Let’s see, there’s support for border radius changes in the Button Block.
Birgit Pauli-Haack Yay. Yay.
Mark Uraine Yeah. Right? That’s cool.
Birgit Pauli-Haack Well, a designer here on Pauli Systems says, “You want round columns? Round columns are out.”
Mark Uraine “Corners.”
Birgit Pauli-Haack Sorry, not “Columns,” “Corners.” Yeah.
Mark Uraine That’s funny.
Birgit Pauli-Haack Yeah, it’s funny.
Mark Uraine There’s support for adding a caption to the Gallery Block now. That’s really cool and even support for local auto saves. What have to say about that one?
Birgit Pauli-Haack Well, I totally love the local storage. It means that your content is saved in the browser. So when your internet connection gives out, while you’re at a conference or airports, you’re not losing all of it. So, it saved me quite a bit recently and so it was really cool and also for the social links, I tested them and they work very well. And I also had the idea–OK, if you have a team page or a speaker page or something like that, you can use the social links as well, not only for your own profile links, but also for other people’s profile links. So that’s really awesome. We also have a few enhancements that … So individual blocks and features receive constant smaller and bigger enhancements. So again, this time, the Gallery Block image controls now play nice with the block mover handles.
Mark Uraine Oh nice.
Birgit Pauli-Haack And there’s also some enhancement on the block mover itself and then padding around the inserter between the blocks was reduced. So there is not that much white space anymore, and the block manager has been enhanced by ignoring giant blocks, so they’re not crowding your block management there, and a lot of people have been waiting for the alignment controls for a heading block to come into the block toolbar. Because that’s where they are for every other block and for the heading it, they were in the sidebar only and now they are also in the block toolbar. So that’s really cool. It’s finally landed.
Mark Uraine That’s a big part of what we do is really try to narrow down on consistency between these blocks. Speaking of which, I was going through and creating some HTML of all these blocks, so that we can show them in the inserter panel, help panel, and I was discovering that a lot of the blocks that included an image component didn’t allow you to insert the image with a URL. Image block allows that. But on the media text block, it doesn’t give you the option to insert the image with a URL and so some of these inconsistencies we kind of need to dial in on. But really good enhancements.
A couple of the other ones were like, this is under enhancements but Birgit, this one, like, hits me to the core right here. We disabled the click-through behavior, on the desktop, and this was an a little feature that was added to Gutenberg, probably a couple of releases ago, and it was the process by which, if you had a block, parent block with many nested blocks, you’d have to click once, you’d click the parent block, click again. It clicks the inner block, click again, it clicks the inner block of that one and you kind of clicked through your way into the content.
The cool thing about that feature was that you were able to click the parent block really easily and move it around or do anything you want it to. But the downside was that you couldn’t get to the content as quickly as you wanted to, and in cases where blocks are really being used for layout, there’s blocks nested inside of blocks, and that was kind of becoming cumbersome. So we’ve reverted or kind of removed it again from this release, so that it doesn’t get merged into Core, and I know Yohan and Kale and a few others are kind of exploring a different pattern in which to interact with these blocks, which is really good. So it’s still being worked on. Then there was also an improved design to the block movers in general. We just kind of tweaked that a little bit, made it look a little better.
Birgit Pauli-Haack Yeah the block movers haven’t been in Gutenberg for that long. So I’m glad that we have some improved design there and that can go into Core with a very solid ground there and not as experimental as it is now in the Core version. Of course, this release also includes a ton of bug fixes, for the rich text component, for the block toolbar, significant accessibility and left to right fixes and also then fixes to the classic block, and then also to the handling of reusable blocks. So, that all gets better with improvements there. I just mentioned six or seven, and they are 21 more bug fixes in there, that I don’t want to list them all. Yeah. But because I wanted to also to talk a little bit about this experiments. Mark, what is in there?
Mark Uraine Yeah. So we’ve got about four various experiments in this and we add a one-click search and install blocks from the block directory into the inserter. So basically, the underlying ability for this is there, and you can actually turn this on in that Experiments page, in the plugin, I believe. So a really cool feature. You can open up the inserter, and if you can’t find a block or there is no Core block that meets the need that you need, you can do a search, like say a slider block or something, and if there’s a slider block in the block directory, it’ll show up and you’ll be able to just install it straight from the inserter right into your page. You don’t need to go to the plugin page. You don’t need to search for this in the plugin directory. It’s just all right inside of Gutenberg now, and we’re going to make that apart of Core soon, probably next release and really bring it to the forefront.
Birgit Pauli-Haack Yeah.
Mark Uraine Go on.
Birgit Pauli-Haack Yeah, that whole block directory, we did two weeks ago or maybe even three weeks ago, and we did a whole live Q and A with the builders of the blog directory and that was with Mel Joyce, Alex Shiels and [crosstalk 00:16:03]. Yeah, where you also can see additional demonstrations on what the future will look like in the whole thing. But the one click search and install blocks in the insert, that’s just a part of it. But it’s of course the main part of it and putting it in the experiments, so people can actually test it and iterate on and the contributors iterate on it, before the rest of it comes together. Yeah.
Mark Uraine Yeah. Then we also have, we’ve been refactoring the navigation block to be more dynamic and that’s coming along nicely. There’s some good direction on that. There’s block navigator. A block navigator has kind of been proposed or implemented into the navigation block as well. So you’ll be able to use this block navigator … Some of these terms are getting very confusing.
Birgit Pauli-Haack A little bit.
Mark Uraine But the block navigator, which will be like a drop down, that shows an outline of your menu and you’ll be able to jump through it and click on different parts of it, move things around there. So, that’s a really cool feature or experiment. And there’s also the customizer, block-based widgets and the experimental widget screen. If you turn those on, you can start fooling around with blocks within the widget areas basically, is what it is. Yeah. So that brings us then to the APIs, Birgit.
Birgit Pauli-Haack Yeah, and the API changes are more for plugin developers and give them a more flexibility or for various features to disable and enable items in the sidebar and around the blocks. So, the pre-published panel and the post-published panel support now the icon properties from the register plugin attributes. So there’s no duplication in code anymore. It also gives a chance to actually lock the auto save, that we just saw with a local storage, that is locked and also disable the drop zone for media placeholders and disable the post status settings panel and your plugin editor. Your plugin developer kind of needs to do this for an editorial process, now there are the APIs available for that. So that’s a great work. So, and then we come to the Various section.
Mark Uraine Yeah. I love the name of this. It’s so funny. Yeah. There were various Various improvements –14 of them actually, some of which include upgrading the React and React DOM to 16.9, switched the local environment to an environment based on the Core set up. So that’s kind of a cool feature there. So you can have a local environment set up, of Gutenberg running, that you could test, review PRs and it’s based on Core. There’s also refactoring the loading animation, to rely on the animate component and you’ll see a lot of this keep moving in that direction as we introduce more components and become more componentized. This is definitely where Gutenberg is going and hoping to push WordPress towards that as well.
Birgit Pauli-Haack Yeah. No, we had some experiments in some of the Gutenberg blocks, with the animation on it. I think the moving animation.
Mark Uraine Yeah.
Birgit Pauli-Haack So, those who haven’t installed the Gutenberg plugin will be very happy that they actually can now really control those moving and kind of see where things land when they move them. Yeah. That’s really cool. Yeah. So experimenting with the animation is quite interesting. We also had two big announcements, just before the grand meetup. One of them was hosted by Matias Ventura about the block areas and defining content block areas.
This is what everyone has been waiting for. It’s the prototype into full site editing. So Matias Ventura is a co-lead on Gutenberg, and it gives us a very detailed glimpse into the possible future of the block editor, well, WordPress really, and once the blocks bust out of the limits of the post and the pages and go side wide. So we have of course, the link in the show notes. But read up about the block areas. Matias put in a nice demo video of some mock ups, how is this going to work with the navigation bar, with the, “OK, is this an editing of the pages or an editing of content,” and how to distinguish that. So, read more about and start thinking about a new WordPress site building experience and what it means for you as a plugin author or theme developer. So, it’s your weekend reading.
Mark Uraine Yeah.
Birgit Pauli-Haack But it was very enlightening. Yeah.
Mark Uraine Really good stuff and there’s a lot of community discussion going on about that. So it’s great to brush up on what the future holds.
Birgit Pauli-Haack Yeah. I need to go back to the Matias’s article when it came out. But I did not go back and read all the comments that were made afterwards. So then, it’s another dive into the WordPress community thinks and brain. It’s always an interesting experience, to say the least. Because I also have some very proud people there. Oh, brilliant. Not proud. Brilliant people.
Mark Uraine [crosstalk 00:21:27]. Yes.
Birgit Pauli-Haack Yeah. Brilliant people.
Mark Uraine It’s always a good thing.
Birgit Pauli-Haack So the second announcement was…
Mark Uraine 2020.
Birgit Pauli-Haack Yes.
Mark Uraine Yeah, 2020. The new default theme coming out with WordPress, 5.3. It’s being built by Anders Noren, Carolina Nymark and Ian Bellinger, and I’m sure I pronounced someone’s name wrong in that. But there’s been some recent mock ups that were posted on the Make Core blog, and a lot of active development happening on it right now. And if you’re looking to find out more about it, drop in on the Slack channel Core themes. That’s where a lot of conversation is happening on the weekly meetings and talking about the theme and what needs to be done, how we can keep pushing it forward, and where contributors are needed. So, yeah. Those are the big announcements this week.
Birgit Pauli-Haack Yeah. I’m looking forward to testing the theme as well and maybe use it even at the Gutenberg Times, where I have been using the 2019 since it came out and see how that works out. So, dear listeners, this is the end of our show today. Share this episode with your friends and coworkers and wherever you want to talk about that. If you want, it would really help us to get the word out to post a review on iTunes. Because that’s still, although there are other podcast apps out there, that’s still the biggest directory. And, as always, the show notes will be published on Gutenbergtimes.com/podcast, and if you have questions and suggestions or news that you want us to include, send them to firstname.lastname@example.org. That’s email@example.com. So, thank you so much for listening. I wish you all a good week next week and until the next time.
Mark Uraine Yeah. Thank you everybody. Keep your eye out for the next Gutenberg design update as well. That’s coming today, pretty soon.
Birgit Pauli-Haack All right. Yes. Yeah. So goodbye, take care.
Mark Uraine Bye-bye.
Birgit Pauli-Haack Bye-bye.