Wow! A lot has happened since the last round-up post. Where to begin? I just returned from WordCamp Atlanta and among other things, I listened to every Gutenberg related talk: Micah Wood, Rich Tabor and Victor Ramirez. They did a terrific job helping content creators, developers, publishers and consultants dive deeper into the most significant change in WordPress since Custom Post Types. The possibilities are endless.
There has been a lot more going in the last four weeks, and I hope you come back to this post multiple times to take it all in.
The Accessibility Report via WPCampus was published.
Building AMP Stories will be possible soon, check out the Alpha version of the AMP plugin
After Drupal, another CMS OctoberCMS is testing the waters in using Gutenberg as editor, and there is a Laravel plugin called Laraberg.
Two more version of Gutenberg plugin 5.5 and 5.6 came out.
These are only five of the 30+ other notable blog posts, plugins, themes and tutorials around the block editor listed. Enjoy! I am so glad you are here! — Yours, Birgit 💕
PS: Tell me what you enjoy or are missing, or what cool things you are working on. Or anything really. Leave a comment or write an email to email@example.com
“An inaccessible editing experience has real and significant consequences for many people in our community. The findings provided by Tenon are serious, and deserve to be considered with thought and care.” wrote Rachel Cherry on WPCampus.
The Gutenberg developers combined the 90 created issues into the Project: Accessiblity Audit. After a couple of days, 14 Issues were closed, not because they were resolved, but because they were either duplicates or reopened as Trac tickets for WordPress Core, mostly Media Library.
We talked about the great features of the block editor, plugins with blocks that augment the core editor, and the biggest hurdles to get comfortable with this new editor. We also answered a ton of audience questions from you! 💕
Birgit Pauli-Haack: We are preparing to stream on the webinar. All right. It should come up now. All right. Well, let’s get this party started. Oops. Where am I? I lost my documents. Can this be? Well, good morning, good afternoon wherever you’re from. Welcome to our 14th episode of our Gutenberg Times live Q&A. I’m still looking for my notes.
My name is Birgit Pauli-Haack and I’m the curator on Gutenberg Times and your host tonight so thank you all for watching. It’s great to have you. Today is all about teaching Gutenberg and we’re gonna explore the question from all different kind of angles, what it takes to teach site owners and content creators about the WordPress new block editor. And I’m thrilled to have these three strong educators take the time out of their busy schedules to discuss this in depth with you and me.
So we have Angela Bowman, and her site is askwpgirl.com, she teaches in person, beginners and advanced workers in workshops in Boulder, Colorado. We also Bud Kraus from New York and his site is joyofwp.com, he offers workers training with a personal touch and Shawn Hesketh of wp101, who offers online courses for WordPress and via his wp101 plugin, he offers the hundreds of awesome training videos to agencies and hosts.
We do proper introduction in less than a minute, but a little bit about the format today, thank you for attending the Zoom and the YouTube. We use the chat window so you can tell us where you’re from and where you’re listening from and who you are, and we’re using the Zoom Q&A feature that you can access on the bottom of your screen. There’s a chat bubble in our Q&A kind of thing, so the chat is for saying hello and all the comments and all the background chats, if you want to do that, and the Q&A is for us to answer your questions live. In YouTube there’s also a chat and we use that for Q&A as well. So let’s use it, type where you’re from and from which part of the world you’re watching, that would be great.
Mark from San Antonio, thank you, hello. Bethany from Boulder, that might be a good friend of Angela’s. Janice from Fort Myers, Linda from Naples, hi Linda. And Adam Warner from Florida, Adam Warner, we know you. Patty of Florida as well, so there’s a lot of things going on in Florida that does not keep people from coming into our show. And Michelle from Boston, yes, okay.
So let’s start the speaker introductions, we have some awesome guests who work not only in and on their business but are also deeply involved in the WordPress community team.
So Angela, apart from training and consulting, you are also a co-organizer of your local WordPress media and you do so many other things, so tell us about yourself, where do you live, what do you do for fun, and what’s new and exciting thing you’re working on.
Angela Bowman: So I live in Boulder, Colorado and Boulder is surrounded by a huge amount of open space and so what I do for fun is explore all the trails and hiking opportunities in our area. Recently my car died and I didn’t have the heart to buy a new car so I bought an e-bike, which is kind of an electric assist bicycle, it’s a normal bicycle but I thought with climate change, global warming and all these magnificent interconnected trails in our city, why not just bicycle? So that’s kind of my new fun, exciting thing I’m exploring. And in terms of WordPress, some of you may know that I’ve started this Women in WP podcast with AmyMasson and Tracy Apps and we are having so much fun interviewing women from around the world and I just wait every two weeks with bated breath, like I can’t wait for it to drop each time, so I wish we were pushing them out faster but we’re just trying to pace ourselves so that’s my new and exciting thing.
Oh, you’re muted. I think, Birgit, she’s muted. You’re gonna have to repeat yourself.
Birgit Pauli-Haack: I’m just talking, and talking and talking.
Angela Bowman: She’s talking to herself.
Birgit Pauli-Haack: There I am. I wanted to say, Angela, what’s the url where people can catch that podcast?
Angela Bowman: Oh yes, of course, that’s very important. Womeninwp.com, and you can get it on all of your podcasting subscription methods, iTunes, etc.
Birgit Pauli-Haack: Right, thank you.
Angela Bowman: Thank you.
Birgit Pauli-Haack: Good, Bud, what are you doing? If you’re not working on your business, are you involved in WordCamp New York City, I know. Tell us about yourself.
Bud Kraus: Well the thing I do the most, I guess in my spare time is play guitar. I enjoy it, I just bought a twelve string guitar and I’m about to buy a ukulele because since I can’t master twelve strings, maybe I can master four. So I do that and I also, I used to garden but I don’t do as much gardening anymore because the animals have overtaken everything, they sort of won so I don’t do that. And travel is a really good thing, it’s a good way to get away from the congestion of where I live because I live really close to New York City but I love the city, where I live you don’t really feel that you’re in New York but there’s plenty of cars and traffic, that’s for sure.
As far as WordPress goes, I started teaching web design twenty years ago at Pratt Institute and I gradually morphed into teaching WordPress because it was the natural thing where everything was going and on my site, joyofwp.com there’s lots of free videos out there. I actually have them organized in two different courses and my site is sort of a huge lead generator so that you look at my course and say, “Hey, I’d like to hire Bud to work on my website,” which does happen. It’s also something for me to refer to clients, the big thing though is that if you’re interested in anything that I do and you want to keep up with WordPress, I run this thing called the WordPress Big Three, it’s a newsletter that comes out every Sunday, all you have to do is go to joyofwp.com/newsletter and sign up. It’s pretty simple. So check it out. So that’s what I do.
Birgit Pauli-Haack: Awesome, thanks for being here, Bud. And Shawn your tutorials have been seen by thousands of people, so tell us a little bit about yourself and where do you live and what do you do for fun and what you’re working on next.
Shawn Hesketh: I live in hot, humid Houston so I try to do as many activities indoors and in air conditioning as a good Houstonian does. We eat at a lot of restaurants and I hang out in a cigar lounge and enjoy cigars and whiskey and these kinds of things and the fun times. Also, we enjoy traveling, my wife and I have three kids and because we homeschool them we’re able to travel so we live to spend extended periods of time in other places including Florida so we try to travel as much as possible. And we make a point of attending as many WordCamps as possible, so we enjoy travel quite a bit.
I started the original WordPress 101 video series that I created back in 2008, was recorded because I needed a resource to provide to my clients. So I was doing freelance design at the time and I needed a resource that I could leave with my clients so I didn’t have to continue doing one on one personalized training as I had done over and over and over again. I thought there had to be a better way to do this so I recorded this series of video tutorials over ten years ago, put it up as a membership site largely at the request of some friends of mine who were also WordPress developers and said, “I need that for my clients, set it up as a website, as a membership site and I’ll send my clients your direction.” That was 2008 and since then our videos have been viewed by over two million people.
Birgit Pauli-Haack: Ah, not thousands, millions. Yes.
Shawn Hesketh: Yeah, which just blows my mind, it’s humbling but it’s also a lot of fun.
Birgit Pauli-Haack: I can only, if you’re an agency, small or big, I can only say good things about it, people like them and they discover them, I’m not always pointing them to it buy I’m always installing it so yeah.
Well, that brings us back to our questions. Let me ask you this, Gutenberg is a whole topic and I think we can definitely do a two hour series or five hours or even ten hours about Gutenberg and the good things, so you as a trainer and talking to other people and content creators and site owners, what are the three features that everybody, once they got over their hurdle and offer they got over their, “Ah, this is new!” What are the three features that they like? That kind of triggers them, “Oh, this is really cool”? Do you have an answer to that?
Educators’ Three Favorite Features of the Block Editor
Angela Bowman: I have one I can mention, I think the gallery feature is really awesome. I think what you can do with images and with the galleries is really great. I’d like to see being about to do a light box with the gallery would make it even better so I’m gonna write a little tutorial on that. I think if I want to wow someone with why they want to use it, just diving into the imaging gallery feature is the one thing.
Bud Kraus: I did a talk at a meetup in New York recently on the subject of Gutenberg plugins because I think that we’re so limited by the blocks that come with WordPress by default, they’re sort of like, primitive and not really useful, like how am I gonna make a website.
Birgit Pauli-Haack: It’s early! Early!
Bud Kraus: So I starting looking at all these different plugins that extend what Gutenberg does and of course this is a huge direction of what’s going on now with this whole new genre of Gutenberg plugins. I’m not gonna mention all the names but they’re out there, I did a whole post on this which is probably the most popular post I’ve ever written and I like the fact that there’s a lot of good development going on to extend what Gutenberg offers by default so I just-
Birgit Pauli-Haack: I’m kind of, what’s the feature?
Bud Kraus: Well it depends, for example, table of contents that’s dynamically created, a lot of guys are doing these shape dividers that divide sections of content, different blocks with, sort of like SVG artwork, so there’s a lot of really good stuff going out there that you just don’t get with Gutenberg.
Birgit Pauli-Haack: Is there a feature that’s actually built into the Gutenberg editor that you can show off?
Bud Kraus: I don’t really like any of them that I can say-
Birgit Pauli-Haack: Alright, okay.
Bud Kraus: They sort of do the basic things, paragraphs, I will say one thing, as long as you’re asking on one feature, I do like the fact that they paid much more attention to HTML markup in Gutenberg, specifically how headings and subheadings are being used so that people are no longer using them just to make font bigger. I think that’s a really good move in the right direction for everybody. That’s one good feature.
Birgit Pauli-Haack: Shawn, what do you think?
Shawn Hesketh: I hear from users that they like the links and buttons, the ability to create buttons is a relatively simple thing, right? Buttons are something we all have to use, it’s a call to action, it’s used all over the place and the fact that you can now do that with a beautiful block that allows you to change the colors and styles is really great.
But I have to echo what Bud said as well, some of the real power and potential I think is in nesting these blocks so you can create reusable chunks of blocks that you might use. So for example for displaying team biographies with a photo and their social media handles and a little description. Being able to save that then as a block, a reusable block and then use that over and over again on other pages is really helpful. And there are a bunch of companies now that are making third party blocks without committing to any of those, there’s a service called Design Hub, wpdesignhub.com and these guys are just creating layouts using only the default blocks in Gutenberg and they’ve got over a hundred different layouts for all kinds of things, calls to action, testimonials, so they’ve kind of done the layout for you, nesting the blocks of you, then you can use those in your page layouts. We could never do that before Gutenberg. There’s a lot of flexibility and that’s what I hear most people love the most about it, once they get past that initial bump as we were talking about.
Birgit Pauli-Haack: Yeah, what I see is that I think that the cover block, now that you can have a headline and a text and a button in there, will be very, very popular once people discover it and have it in their plugin or in their site, because right now it’s only available in 5.3 Gutenberg, which will come out with the WordPress 5.2 on April 30th. Then it will be in there.
Yeah, so now that we have the good things,
What are the hurdles? What are people stumbling on? Angela do you want to start again? [00:14:20]
Angela Bowman: Sure. I complained about this on Twitter recently but when you are using Gutenberg and wanting to do a layout, you have to get your head around the concept of rows and columns like you do with any page builder plugin, and so I try to emphasis that in my classes when I’m teaching to more of the designers who want to use it potentially for page layout, it’s like, “Okay, well you need a row, you need columns,” and what I discovered is on smaller monitors, often the built in columns with Gutenberg, I don’t recommend people use so I’m turning them onto the Ultimate Gutenberg add-ons plugin or CoBlocks, I really like the CoBlocks rows and columns feature, I think the ultimate add-on has some possibilities that I liked but it was a little too much and too confusing and hard to manipulate.
So that brings up one issue, just it being hard to figure out where you are in the block to get the to the settings, you want to get and to manipulate and it’s kind of little bit of black magic and you’ve got to do some incantations and you’ve gotta sprinkle some pixie dust on it and then maybe you can get to the place where you need to go to be able to manipulate things but one of my big complaints with the rows is that if you set them to pop out and you’re on a smaller monitor, you can’t get back to the settings you need to get to to change them because your monitor’s too small. And so you really have to have a pretty large monitor to be able to work with some of the ways that the blocks are set up right now. At least, that’s my experience, maybe I’m missing something but it’s hard.
Birgit Pauli-Haack: So these are the hurdles that you see, but what are the hurdles that your students that want to create content-
Angela Bowman: I think it’s all of that, it’s kind of like, “Where am I and how do I get to where I am?” So they’re having that same frustration with finding the settings or sometimes the settings are just randomly different. I think there’s just a lot of bugginess in a lot of the Gutenberg blocks, not just in the core blocks but in the plugins as well, so the plugin developers are still working through a lot of their issues, and so I think that’s just confusing to people because it’s like, “Am I losing my mind or is this really not working properly?” I guess that’s kind of my experience with it, is just where you need to do stuff can be really hard.
Birgit Pauli-Haack: Yeah, that’s I’ve found with WordPress, period, that, ‘Is it me or is it WordPress?’ Shawn, what do you think? What are the biggest hurdles that you see? Or the most questions that come up?
Shawn Hesketh: Yeah, I get a lot of complaints about columns and that’s one of the most frustrating, it definitely is buggy, right? It’s early days, we’ve kind of recognized that there are some issues, they’re being ironed out as we go along but even when I was recording the video tutorials to demonstrate columns, it took three or four takes just to have the columns behave the way that I wanted them to in the video, the way they should, right? So I had to do multiple takes in order to get that right and that’s not the best thing, obviously it’s very confusing. Getting back into blocks, once you’ve created columns, but once you’ve nested some blocks inside there, how do you select the actual block you want to edit is still a challenge.
And then we continue to have the same, I’m sure everyone who’s ever taught WordPress to someone has dealt with this, it is the abstraction between what you see in the editor and then having to jump out to front end and see what is the effect of the changes that you just made. And that disconnect hasn’t gotten any better, really, or only marginally better I think with Gutenberg and depending on the theme that you’re using and whether or not it has support for all the Gutenberg blocks, you’re having a totally different experience. So most of the questions I’m fielding now are, “Now I’m understanding what to do with the blocks, I’m building some pages in my page editor, but then I jump out to the front end and it blows all apart, what’s going on?” Well that’s because your theme doesn’t support Gutenberg. So there still is a gap that we’re having to close between the back end editing experience, what you actually see on the front end and then hopefully, theme creators are as quickly as possible building in that kind of support for this new editor because it’s really unfolding right now.
Birgit Pauli-Haack: Yeah, I get that. And we’re getting quite a few comments and questions so I’m gonna go through them, Adam says, ‘Buttons for the win,’ on that earlier thing. So, ‘Why don’t people,’ I think that’s Mark having that question, ‘Why don’t people use local hosts such as Flywheel, to test Gutenberg and all the upgrades before using them live and complaining about Gutenberg? I have used it since September and have almost no problems.’ [00:19:06] People don’t test, right?
Bud Kraus: A lot of new users aren’t going to know about local and they’re not gonna know about desktop servers. If you’re talking about new users, just getting them to install a WordPress, everybody thinks it’s so easy and one thing I’ve learned as a teacher is to take out the word ‘easy’, because that word is just banned form my vocabulary when I teach, I just don’t use it.
Birgit Pauli-Haack: How about the word ‘just’?
Bud Kraus: Or, it’s intuitive. Anything but intuitive. I don’t think it’s intuitive at all. I always have to remind myself what it was like when I first started teaching myself WordPress, and now we’ve added this whole layer of complexity with Gutenberg. With a whole lot of hidden UI that people just have no idea-
Birgit Pauli-Haack: Well we don’t have a manual right now, have you discovered the manual on wordpress.org yet?
Bud Kraus: Yeah, but not everybody’s going to read manuals, they’re going to –
Birgit Pauli-Haack: There is one. There is actually one.
Bud Kraus: – click on things and see what happens.
Birgit Pauli-Haack: Right, yeah. So next question was,
‘What’s your favorite block solution for full width rows with background image or video? Do you need to have a theme in order to accomplish this?’ [00:20:23]
Who wants to take it?
Angela Bowman: I could say something briefly, so yeah, you don’t. I think you need to theme like Shawn was saying, a Gutenberg compatible that will allow, depending on what Gutenberg tool you’re using to do these features, they may or may not pop out the content with your theme, so that’s the main thing that you’re gonna find, is that you want to have like a full width content piece but if your theme is kinda restricting the content width, and depending on how the block is dealing with that potential restriction will determine whether it successfully works or not, and if it doesn’t you can usually use some sort of CSS to override that. But having a Gutenberg-friendly theme that will allow that content to pop out, there’s so much that you can do with these additional Gutenberg plugins that you could do full page layouts with them, just like Shawn was mentioning with the one website where they’re doing those already.
Birgit Pauli-Haack: Yeah, there is some and I hope I’ll find it soon, I was trying to maybe show a certain background but the Gutenberg handbook, and you can reach it through the Github repository, they have a whole page of theme support, how they actually explain how you can align widths in full to your theme, it’s pretty much a run line of code and then of course you need to style it but it also gives the style for it. So once you have that, the aligned width, I think you can use the cover image, the cover block to have your background image and your paragraph with it.
So Linda asked, ‘I just installed Gutenberg on our new, not yet ready site today. Yes, I hesitated for age is fear of change. What I found so great today was being able to copy and paste content from my old classic editor site into the new one and have it appear as blocks. Hooray!’ Well, congratulations Linda.
And then Adam, ‘It’s funny, am I missing something here?’ Is the question that comes a lot, in his experience.
‘So how can we do what we can do with page builders without using page builders?’ [00:23:06]
Yeah, that’s kind of a loaded question, right? You want to take that, Shawn? You were laughing so I think you have an answer.
Shawn Hesketh: Yeah, I mean, what we’re seeing with page builders like Beaver Builder and Elementor, they’re doing a fantastic job of extending it, right? They’re going beyond the basic blocks. A year ago we didn’t have any other choices, if you want to do this kind of modular building page layout building style, you used a page builder. So what we’re seeing now is that they’re adapting to this brave new Gutenberg world and creating many more blocks in addition to the default blocks that are included in WordPress. There’s a lot more design flexibility but when you go down that road you’re also investing and trusting that page builder’s gonna be around. What we know about the Gutenberg project is that today we have blocks that allow us to create multimedia rich pages and posts, but in phase two of Gutenberg we’re actually gonna see more layout controls. Headers, footers, sidebars and these kinds of things. When we do that, the lines are gonna get even more blurry, for things that we turn to page builders today for. So in the next year or two, I don’t know, it could end up being that you could do a lot more out of the box with default WordPress, things that right now, today, you have to use a page builder for.
So what happens then? What happens to your site when you’ve created a lot of that content that’s relying on page builders? I think that’s a huge question to consider.
Bud Kraus: And if I can add something real quick, what this is gonna mean is people who train and teach people, we are constantly having to update our materials. We can’t just throw out something that was good right now and then, it’s gonna be a real challenge. How are you going to build your courses, build your instruction, knowing that what I’m teaching now, in three months or what you’re creating now, in three months, there’s no such thing as evergreen content, that’s certainly what I’m saying. This is a train that’s just moving really fast. And then I wonder how people will adapt to this as we go forward. It’s a real challenge, not just for trainers but for people who are just casual users of WordPress. How are they going to absorb these changes that are going on, maybe a little bit too fast. Maybe things have to slow down a little bit, I don’t know. It’s just my thought.
Angela Bowman: I wish it would either, yeah, I think it just needs to speed up a whole lot more because I just want to pull of the band aid and just, you know, we’re moving on.
Bud Kraus: Give it to us, right.
Angela Bowman: This in between place, I just finished teaching a six week theme customization course and I had just, it’s for people who want to build websites for clients, you know, so teaching them the tools that they need to know how to do robust, custom beautiful websites and like, yeah, I’m in this whole Frankenstein schizophrenia with how to teach this, so I made sure to teach them all the Gutenberg concepts and the Gutenberg tools that are there but I still relied on a page builder. But I kept reiterating over and over, this is going away, we’re moving to this new method soon, instead of these elements and these things that you’re used to seeing with your page builder, you’ll have your favorite block collection that you’ll be curating and using with your clients and you know, just trying to transition them to thinking about that but it makes teaching so hard and I didn’t teach the course for two years under the threat of Gutenberg, and I finally just, I have to bite the bullet and teach it but it is so challenging.
Birgit Pauli-Haack: Yeah and one of the big parts of page building, there is no navigation bar that you can kind of go with Gutenberg, there’s no sidebar widgets, they are just coming in and that’s the second phase and I hope that they’re getting to that.
We have another comment from Bethany,
‘The big challenge for teaching is if students are coming in with sites someone else has built, each is so different, some are using a builder, some using classic editor and some using Gutenberg,’ [00:27:05]
and that’s certainly-
Angela Bowman: Yeah, what is WordPress 101 in that context?
Shawn Hesketh: That’s a question that I get every single day actually.
Birgit Pauli-Haack: But I must say, I migrated a website that somebody else had built and make it ready for editors to finally use and we kind of kicked out 26 plugins and just used plain Gutenberg with a few, the first go-to block suite that I installed was Atomic Blocks, by Mike McAllister, whose theme shop is Array Themes, you might have heard of him. And he got just bought by Genesis. By WP Engine. So that’s certainly available through that.
So our next question is,
‘How do you find out how well a theme works with Gutenberg? I’m wondering if different themes that say they are Gutenberg compatible may not all be the same.’ [00:28:11]
What’s your advice on that, Bud?
Bud Kraus: Well, I’m a simple person. I would start out, if you’re not really sure, use 2019 as sort of your baseline to see what, because we know 2019 is gonna play nicely with Gutenberg and show off some of the core Gutenberg features so I would start there and be weary of all these theme shops that say Gutenberg. There’s a whole lot of discussion going out, what does it mean, ‘Gutenberg compatible’? What the heck does that mean? I’m not really sure that I can answer that or anybody can answer that, that’s really up for debate. John
Birgit Pauli-Haack: Yeah, it’s not a binary thing either.
Bud Kraus: If you’re really starting out, you’re just not really sure about the capabilities of these plugins whether they’re core or with the Gutenberg plugins. Start with 2019, because I think that’s a pretty good place to start.
Birgit Pauli-Haack: Shawn,
How would you test a theme for Gutenberg readiness? [00:29:19]
Shawn Hesketh: Yeah, I was gonna say, first I would visit the homepage for the developers because if they put in the time and effort to make their theme Gutenberg compatible, believe me, they’re gonna be advertising that, because it’s no small amount of work. Supporting one block, like making the cover images as we talked about, full width, may be one line of code but if you have support for all of the blocks, that’s probably something that they’re gonna lead with so I would look at the homepage for the theme and typically we’re seeing support rolled out a lot quicker from more established theme shops. So you mentioned Mike McAllister and Atomic Blocks which is a fantastic theme and also their own plugin that extends the blocks, one of those third party block tools that we were talking about earlier, but also the Studio Press family of themes. There’s a lot to choose from in there, so when you pick a theme framework like that or a theme shop that’s got dozens and dozens of things, you know that it’ll be supported.
Less likely in the larger marketplaces where you’ve got thousands and thousands of themes created by people all around the world who may or may not have the time and bandwidth, like a full-time development shop or team to be able to bring all their themes up to date, so the best thing to do is to find more information about the theme, visit the homepage, they’re bound to be singing that feature set, that compatibility from the rooftops, I would imagine.
Birgit Pauli-Haack: Angela, anything to add?
Angela Bowman: I’d say, you know, it’s hard when you’re going to buy a theme because then you’re having to invest in it before you can try it out so like Bud said, with the free themes you can play with them and see how they’re working and compare them to the default theme. With the paid ones, I just ditto Shawn, I’d stay away from those places that have a lot of trees…
Birgit Pauli-Haack: They’re also not GPL, so… We’re not going to talk about that.
Angela Bowman: Right. And yeah, definitely going for, I think, I’m curious about the popular themes like Generate Press, there are some free themes on the repository, Generate Press, Astra, Ocean WP, you know, and then the Studio Press, those bigger places, but a lot of people who are new to WordPress don’t know the difference between any of these themes. Those of us who have been here for awhile, we know that the ecosystem of WordPress and we know who are the good players and we know the more, kludgy kind of setups and so I think it’s more a general education about where do you find reputable themes in general? And then when you get into that space then maybe you’re gonna find your more Gutenberg compatible ones that truly play by the rules.
Birgit Pauli-Haack: I get a lot of questions like,
‘My existing theme, how do I find out if that is Gutenberg ready or at least even if it doesn’t do the full width, how can I see if all the blocks are displaying?’ [00:32:15]
Rich Tabor, a very early Gutenberg champion, and the CoBlocks that Bud mentioned are from him, he has a plugin called a Block Unit Test, it sounds techie but it’s actually a plugin that you can install and it gives you, and I shared the link there, it creates a page on your site with all the blocks in there and you only have to click on the preview button and it shows you how your theme actually manages that, and I think that’s the fastest way to find out if your existing theme works and that also, if you don’t know if it’s really compatible or if the blocks really play well. Use that as well and you’ll at least get something up and running. So that was one of the questions.
Shawn Hesketh: I get that question a lot, actually, because people have older themes or older sites that are well established and last time they installed a theme was years ago, potentially, and so now if the theme is not compatible their question is what do I do with that? So we’re sending a lot of people to Codeable to have them add that type of customization, they can do it very cheaply, very affordably. They add support for Gutenberg blocks, and I’m sure there are other companies that service this as well, but right now we’re referring a lot of people to Codeable to have that kind of work done to make these older themes compatible, it’s a little bit of reinventing the wheel because now it’s unfortunate that a site owner would have to pay to bring their theme up to date and then how many other people are using the same thing, potentially doing the same thing, right? Paying the same cost over and over and over again to add compatibility. So again, it kind of comes back to Angela’s recommendation to find, if you have the opportunity to change your theme, or you’re starting a new site, make sure you’re doing that with a reputable theme at the very beginning, some people just aren’t so lucky. If you have an existing site, probably gonna end up having to hire somebody to add some code to make your site compatible.
Angela Bowman: One thing we decided to do with our meetup is an hour before our meetup we’re gonna start doing these site audits for people because you know, Bethany, who’s one of the participants here, teaches a WordPress 101 class and she’s struggling with like, ‘What do I tell these people? I can give them all this instruction but they can’t do anything actionable with it if they don’t know what condition their site is in.’ So I said, ‘This is kind of a community problem, let’s make it a community problem,’ so I’ve got like, four or five volunteers to come in for an hour and just check people’s sites out and kind of tell them, you know, what PHP are you on? Can you even upgrade to the latest WordPress and then, let’s check out your theme and how old it is and just, but a lot of people, even just to make that transition, need someone who’s a little more senior and professional just to even look at their site. That’s a huge challenge, that’s a big hurdle to overcome.
Birgit Pauli-Haack: Yeah. And there is actually, there are quite a few, I’m just doing a little self-plug here, in the Gutenberg Times, there are two articles, one is how you test your theme with a lot of instructions in there, and also how to actually create a test site. If you are migrating an older site or an existing site that you depend on for your livelihood, definitely use a staging site. And I have an article with very basic instructions on how to create a staging site for free with Pantheon and the instructions are actually tested by my 84 year old friend, who is not a techie but she is, kind of gets over any of the new stuff but she follows directions, and she said, ‘If you don’t watch the videos, you’re not gonna watch the videos, then the instructions are fine.’ That’s kind of how can then, your older site, it migrated over with all your content and you can adjust it with your content.
So, Bethany said she appreciates the site audit, thank you Angela. ‘Do you recommend,’ next question from Mark, ‘Do you recommend using the most basic updated themes for copyright changes, the used templates – ?’ I’m not getting that question. Sorry. ‘Do you recommend using the most basic, updated theme for copyright changes that use templates for that point on?’ Oh, that you want to change the copyright for it. I don’t know, you don’t have to change the copyright because the copyright normally is yours, yeah? On the site, yeah? Any thoughts on that?
Shawn Hesketh: Yeah, that may not have been typed the way that he intended there but I think we are seeing a trend toward the most basic themes, that are just barely there, because what they’re really supporting is blocks and they’re kind of creating every page layout the way that you want it to be so these days if you’re starting a new site then you can use a very basic default theme, like again, Atomic Blocks is one, there’s others that you can use, just kind of covers the very basics and then you are using page layouts, custom page templates to create the templates for future content so I think that may have been what he’s getting at there, Mark you can correct me. Okay, good.
Birgit Pauli-Haack: Yeah, yeah, and props to the core contributor. There was a team that actually back ported all the Gutenberg readiness back to 2011 theme, and I find this really remarkable that people would actually go back and make those default themes also Gutenberg ready so people who are using those can actually also be working very well with the new block editor.
Shawn Hesketh: That was no small task either. That is hats off to those guys for sure.
Birgit Pauli-Haack: Yeah.
Shawn Hesketh: And Mark, just to piggyback onto that question too, I think we’re seeing a trend away from these gigantic all in one themes that can build any type of site you can imagine and more towards themes that are more basic, right, but support for more blocks. So Elementor is one of the most prolific, I think, block creators or tools out there right now and so finding themes that support Elementor is probably a good place to start.
Birgit Pauli-Haack: Good yeah, I’m just going to put in those links in there that they’re asking about, the two articles that I mentioned. So glad that we covered what Mark wanted to know, excellent. So one question is:
Have you built any blocks yourself? Or are you working with a developer to build blocks, custom blocks, or dynamic blocks? [00:39:22]
Shawn Hesketh: Yeah, we are, actually. We’re creating a tool that we needed in-house, and that’s basically to create a very simple project roadmap for client projects. This is just a very simple series of checklists, when something’s gonna be done, proposed times, so we actually took a stab at creating a plugin that creates a block for that so we can actually drag in blocks for an individual project. It’s still really rough and we ran into a lot of issues along the way so I’m not sure, we’re not gonna show that to anybody right now. It’s an in-house tool, kind of a playground, but we’re having fun learning how to do that.
Birgit Pauli-Haack: Yeah.
Shawn Hesketh: Definitely not in a space where I’m ready to start teaching that, too much is changing so I’m not about to dive into teaching people how to create their own block so other people are doing a fantastic job of that. I’m gonna stick with the 101 and helping beginners learn how to use Gutenberg to do what they want to do. It’s interesting.
Birgit Pauli-Haack: Mm-hmm (affirmative). There is actually a plugin, I don’t know if you came across it, Bud, when you were doing your research, but there’s a plugin called Block Lab, and it was built by the developers from, I think XWP, who are an enterprise level worker’s agency and they worked pretty closely with WordPress VIP group, so you don’t have to know a lot about ACF to actually know how block would work but that is in the block builder Block Lab, that’s one where you don’t have to know coding to create blocks.
Bud Kraus: I haven’t seen that one but one that I thought had a lot of promise, at least I’m hoping and sort of pulling for it is the Gutenberg Cloud Library, because I think it’s such an interesting idea, it’s sort of takes the WordPress way of doing things and allowing people to download the block that they want to use for their site. It’s not ready, it’s really kind of early stages for this thing because every time I look at it it’s like, come one guys, this is not where I want to see it yet. But the concept is really interesting.
Birgit Pauli-Haack: Yeah, there is actually an initiative and they’re asking for comments to build a block directory through WordPress.org and Alex from Australia has put in a proposal and the developers are kind of figuring it out. I think it’s on WordPress.org/core, somewhere in the latest update but these sites change so often that you’ll kind of find that even if you’re just a week behind you kind of need to scroll though, you have 10 or 15 posts before you can actually find something there.
Are we running out of questions? I can’t believe this, audience.
Angela Bowman: There was one question in the Q&A.
Birgit Pauli-Haack: Okay, yeah
What is the most difficult thing about Gutenberg? [00:43:11]
Bud Kraus: What are they hearing from their students, clients, users, about something, what is the most difficult thing about Gutenberg? Maybe that’s too general a question but is there sort of thing that you’re starting to see as a unique stumbling block? For example, I think finding how to remove something can be really difficult. And if you remember earlier versions of Gutenberg, you may recall it used to have a little trash icon at the end of the block and now it’s hidden. And I wish that trash icon were at the end of the block so it would be just so much easier, then you don’t have do like, two clicks. I don’t know, anybody have anything like that that they could share or talk about? That they know is a stumbling block for everybody?
Shawn Hesketh: Beyond Gutenberg itself?
Bud Kraus: Not just within the confines of Gutenberg.
Angela Bowman: I think that’s a common one, I think that getting to know what the differences between those optional settings that show up on the side versus the options that show up on the top, how do you get the options to show up at the top? Because sometimes you just have to click in this magical way to get those top options to show. And then what Shawn was saying, what block am I in? How do I get back to my block and my nested blocks? It’s those basic navigation things.
Bud Kraus: Yes, I agree.
Angela Bowman: That are the basic kind of settings and functions and getting to where you need to go that’s challenging, yeah.
Bud Kraus: I agree.
Birgit Pauli-Haack: Yeah, but that’s what you have with any user, new user interface. It’s kind of all crowded and it’s all, ‘where am I?’ I’m having a structured place where you can look up the different things. I think what helps a lot of people is when they’re not using the block toolbar on every block, because it can confuse things and it kind of is a little, yeah. So to use the top toolbar option, which is on the right hand side, the three dots, and then you go further down and then click and then the toolbar is right on top and any block that you then click on has the toolbar right on top. And it moves with you.
Bud Kraus: In my opinion, the block toolbar should be at the top by default and then if you want to have it for every block, you should be able to switch it so that – you disagree. It’s the first thing I always do, is move the toolbar to the top.
Birgit Pauli-Haack: I think it’s a 50-50 chance that people like it, so it’s one of those things, do we make it default or not? But there are, Angela actually answered all the questions in the Q&A-
Angela Bowman: There was one question, a woman, but look at that, look at what she said, maybe put that to the group.
For a new site: Classic or Block Editor?[00:46:00]
Birgit Pauli-Haack: So Linda has a question as well, listening to these experts discussing bugginess, natural with something so new, is a non-techie user better to stick with a classic editor until more bugs are worked out?
Well, I don’t think so, my humble opinion is kind of stick with the new thing, figure it out and you’ll learn so much every time. But then also Linda said, an hour later, ‘OK, done, guess that means I keep going with Gutenberg on the being developed site.’ Definitely, Linda, if you are doing a new site, yeah I would do Gutenberg all the way. There is no sense in going backwards.
Bud Kraus: Absolutely. You know, think of it this way, remember when the cell phone first came out, it was sort of buggy and they only had a few apps, think about, we’re sort of in that era. Cellphone 1.0 and they’re not going back, this is gonna be reversed and we’re gonna have a classic editor, it’s not going that way so why, especially during New Years, why even think about it that kind of thing?
Birgit Pauli-Haack: Yeah, yeah.
Shawn Hesketh: We always create videos that support the default, out of the box experience, so we’re only going in one direction with our training and that is the brave new world in which we find ourselves. I think ultimately that’s the best way to ensure you’re gonna be supported for years to come.
The good news is you don’t have to do it today, so you can install the classic editor plugin, that’s gonna be supported through 2022, the year 2022, so you’ve got a couple of years then, if you want to prolong that decision and not dive in right away. A lot can change in two years, so if you install the classic editor plugin today, that might buy you some time to be able to think more clearly about a strategy that might allow you to build in a new direction.
But we typically encourage people to jump in, play with it, because what we’re finding is as soon as they do, if you just start off and create a new page or a new post, there are more moments where you go, ‘Oh okay, this is really great, this is better.’
And just in terms of the page layouts that you can create today that you weren’t able to do before Gutenberg, there’s a lot more flexibility. It takes a little bit of experimentation, there’s a much sharper learning curve than we used to have. Our WP 101 video series used to be 20 videos. It was 20 videos for nearly ten years and this is the first time we had to significantly redo that and we rewrote the entire course from the ground up, right? 34 videos, we had to add 14 new videos, just to cover all the features and functions in the block editor and there are new blocks coming, right, with every new release and so that’s the first time we’ve had to significantly change and so my comment and the reason for sharing that is because I think it’s easy to get lost in the weeds because there’s so much you can do, there’s so many new features, so many new blocks, and if you install a block editor like Elementor, you’ve got hundreds to choose from, potentially, blocks to choose from.
So you have to be really clear about what you’re doing and why. So I think as educators we kind of, we’re kind of focused on the objective. What are you trying to do, first of all. Then we can talk about how to get there, what is the best method for getting there, what are the best tools that you’ll need to accomplish that goal, but at the end of the day, objective based or results based teaching, I think, is the best approach. The tools are gonna change, they’re always gonna change, they’re gonna continue changing for the next who knows how many years if we’re all still lucky enough to be doing this. We’re gonna be teaching totally different tools five years from now. So the quicker you’re able to adopt these tools to accomplish your goals, then the better off you’re gonna be.
If you were teaching a WordPress 101 class, would you teach the classic editor? Or would just only teach Gutenberg? [00:49:54]
Angela Bowman: Shawn, I wanted to just piggyback on that with Bethany’s question, if you were teaching a WordPress 101 class, just like a set number of hours in front of people in person, would you even teach them the classic editor? Or would just only teach Gutenberg?
Shawn Hesketh: I would teach Gutenberg, I would dive right in to building your first page, let’s start with an ‘about’ page, that’ll give an opportunity to learn how to use the various blocks in a very creative way. That’s the way that I would teach it. That’s the way we do teach it.
Bud Kraus: I’m starting two new classes next week, all online, I guess I don’t teach in classes anymore, all online, like classes and I will hardly mention the word classic editor, because it doesn’t mean anything to these people. It’s Gutenberg.
Angela Bowman: I think it does in the sense like, if you have people coming to class and you do have them coming in with a classic editor, one thing that they do need to know how to do if they want to convert that content, how to take that classic editor block and convert it to blocks and be mindful that sometimes that process doesn’t work and maybe they need to copy and paste into the front end into fresh blocks or something, there’s some strategies for converting over so I think it is a little bit of a challenge because in a way we also have to teach them how to get from here to there.
Birgit Pauli-Haack: – It’s a big hurdle there, yeah. And also for people, okay, Gutenberg is not gonna touch your old content, yeah? Unless you want it to convert so yeah, it’s not gonna do anything with it and using it for, some plugins actually don’t use the Gutenberg editor yet for adding new stuff to it, like a team or an event or something like that, they have fallback to the classic editor anyway. They are built in WordPress 5., the current WordPress field so the custom post type that those plugins kind of register they say, ‘don’t use the Gutenberg, I’ll stay with the old one,’ and then it will automatically come up.
I think that’s all, do we have questions we missed… list ordered or numbered problems. Mark, there is a fragment there, I think I only get the tail end of it, so list ordered or numbered problems? I think you want to use the newest plugin because they really fixed some of the hiccups there with the lists. I think that is all the time we have, we don’t have any questions anymore, I think?
Angela Bowman: I think their message says ‘can you talk a bit about the difference between the menu for editing the blocks versus style this page menu?’ I don’t know what that means.
Birgit Pauli-Haack: and style this page? Oh, that’s probably one of the third party-
Angela Bowman: Page builders?
Birgit Pauli-Haack: Page builders, yeah. I don’t have any experience with that page builder except that I’m throwing them out. Migrate them over, so Denise, are you still on the site? If you could clarify that a bit then maybe the others can help you out with that.
Shawn Hesketh: I’m pretty sure that is in reference to a third party plugin, page builder plugin.
Angela Bowman: Yeah.
Birgit Pauli-Haack: Alright. Well, seems that’s all the time we have, I asked Shawn, Bud and Angela to kind of take an hour and a little bit, but this has been fun. This was a great show and there’s so much wisdom in all of your heads, I wish we could do another three hours and we probably would fix Gutenberg right away. But if people want to get in touch with you, I only have two more questions for you three, if people want to get in touch with you, how would they best do it and do you have any announcements that you couldn’t talk before or that you didn’t mention before? This is your chance. Shawn, you want to start?
Shawn Hesketh: Yeah, sure. Well obviously you can find us at wp101.com, on all the socials we’re also wp101. My personal Twitter handle is @leftlane, so you can find me there. And then we just launched a brand new version of our WP 101 plugin that we talked about earlier, just in this past month and it adds a lot of new features and capabilities, we’re really proud of it, we completely rewrote the plugin from scratch so this is kind of a recurring theme, we redid our entire WordPress 101 video series from scratch and then also the plugins so you can check out that plugin. That’s perfect for installing on your client sites if you’re an agency or a host. Definitely check those out. Also last year I spun up a new business because apparently I had too much free time so I actually launched 101videos.com and I’m really excited about this. This is a custom video tutorial service, I’m partnering with a couple of phenomenally talented educators in their own right, Brian Richards of WPSessions, Joe Casabona of Creator Courses, so the three of us together are tackling some really fun video projects, creating video tutorials for other WordPress products and services. So we’re excited to see where that goes.
Birgit Pauli-Haack: Awesome, thank you so much Shawn, Bud?
Bud Kraus: Well you can reach me at firstname.lastname@example.org or just go to my site, joyofwp.com, and my email address is over there. And I’m also on Twitter and my handle is @joyofwp so it’s kind of simple to remember.
Shawn Hesketh: Love it.
Birgit Pauli-Haack: I put it in the wrong things here so I’m sorry, I’m gonna do it again. So Angela, how can people get in touch with you?
Angela Bowman: On most of the social networks I’m askwpgirl and my website’s askwpgirl.com, I hope to be writing more. And if you’re going to WordCamp Europe we’re hoping to do a live show or at least an interview at WordCamp Europe of Women in WP and I hope that men and women would take an interest in the podcast and suggest guests and sign up to be a guest.
Birgit Pauli-Haack: That’s awesome, yeah. I’m looking forward to whatever comes out of WordCamp Europe, I have a lot of FOMO for that and this weekend is WordCamp London, that’s a another FOMO event for me, so I’m trying to catch the live stream there.
Thank you to all our viewers and listeners for your great questions. If you have more questions you can always send them to me via email at Pauli@Gutenbergtimes.com. A recording of this show will be available in a few minutes on the YouTube channel and we’ll publish the transcript later on on Gutenberg Times and for the next show, we’re taking a break in April, this is the last show in April and it’s only April fifth, the next show will be on May 10th. And the show’s sponsored by Pauli Systems and our generous supporters on Patreon.
Thanks again to Angela, Bud, Shawn, it’s been a great joy talking to you and having you on the show. Thank you so much and that’s it for now.
“We explored how to customize format controls like bold or italics and extend the block toolbar with your control allowing to change the color of selected text.” – @gziolo
Zac Gordon: Howdy, folks. Yeah, we did it last year, and it went really well. Basically, I just pinged as many JS devs who were doing cool things as I could find. We had a great conference, and it went well. We’re doing it again, but we’re doubling down. There’s going to be a full day of workshops. There’s going to be full day of contributing to the Gutenberg docs. We’re going to have a ton of speakers. Greg’s speaking, Birgit’s speaking, a whole range. If you’re interested on these topics, please come speak. If you want to reach this audience, as Birgit said, come sponsor. Either way, come hang out for the day. It’s all 100 percent free, so no reason not to. Of course, we’ll have archives on YouTube and all that. Thank you for giving that shout out. Super excited for this event.
Birgit Pauli-Haack: Yeah, me too. I’m sorry I missed most of it last year, so I’m glad I can participate this year.
Tomorrow, for Gutenberg Times frequent watchers, we come back to our normal programming of live Q&A, and we talk with Shawn Hesketh from WP101, Bud Kraus from Joy of WP, and Angela Bowman from Ask WP Girl about the opportunities and challenges teaching site owners and content creators how to use the new block editor. Join us tomorrow, 2:00 PM Eastern Daylight, or 18:00 UTC. Note: The show was recorded and is available here
With that out of the way, I’d like to hand it over to Zac and Greg. What is it that you’re going to show us?
RichText Component replaces TinyMCE
Zac Gordon: Sure. Greg’s going to give us a home tour, like MTV Cribs, of his house and his family. No, I’m just kidding. Basically, we’re going to dig into the rich-text editor a little bit. If you don’t know, in the … what is it Greg, 5.2 that’s coming out? They’re going to take TinyMCE out of WordPress completely. It’ll still be in the classic editor, but not in WordPress Core, which is huge, because they have built from the ground up an entire editor experience. We have our whole editor, which is the block editor, but when you go into rich-text, if you’ve built some components, this is the component in WordPress to actually have an editable text area. You can bold stuff, you can drop case. It’ll do a whole bunch of cool things for you.
How does that feel? Does that feel like a pretty good overview? We’re going to touch on the data API, customizing components, extending things a bit. Does that sound about right, Greg?
Greg Ziółkowski: Yeah. That’s exactly what you said. Let’s start right over, and I will share my screen.
Zac Gordon: As you’re getting set up, basically, we’re going to let Greg talk. He’s going to follow through. If you have questions about any of this, throw them in the chat. Birgit’s going to collect them. We’ll make sure, we answer them. I might just throw in some random stuff along the way to make sure he’s explaining all of this and we understand the magic behind the scenes. Greg, man, this is on you. Give us a whirl. Show us how to do this.
Developer Tools show all Globals inside WordPress
Greg Ziółkowski: If you were watching some of the tutorials from Zac, you probably are aware that there is this nice trick inside WordPress. Whenever you open your developer tools, you are able to see all the Globals that are available inside WordPress. It’s something that is there for long time. When Gutenberg project started, it was very important to bring that over also for Gutenberg. You can do the same thing for everything that’s developed this way.
At the moment, we are still in WordPress 5.21, which is a bit complex, because to make widgets page work, we are introducing something which would be called block editor, which will be something that can be run standalone without any back end like WordPress, which is huge, because it will allow to do another very interesting things. However, for our talk today, the issue is that it’s the rich editor text, which is, at the moment, here. It will be also exposed under BlockEditor global, which translates to the package that is also published to npm, which can be grabbed outside of WordPress and used this way.
Introduction to RichText Component
The thing that is here is rich-text component. If you go to the editor, it’s something which is over here. If you go to this paragraph block, if you go to the pull-quote block, it’s much more complex, because you can have a few rich-text components inside one block. This thing, it’s one rich-text component. This, I think, here, that’s another one. You will see why that is important. We will get into that soon. We probably should share our links to that. Birgit, if you could pass it over for the rich-text
Zac Gordon: Yeah, I’m throwing those in as we go here. I’ll make sure the-
Greg Ziółkowski: Yeah. That’s amazing. There is also something that was developed that is specifically tailored to the Rich-Text editor, which allows to add your own controls, or you can remove the existing controls. We will show you how to do that soon.
Based on these format API things, you can also do things like … All the controls are stored inside rich-text store. There is this data API, which is available also under data global, which has this method called select, which allows you to get a given store. This one is stored under the namespace core/rich-text, which translate exactly more or less to the same namespace you saw before. If you use the method getFormatTypes, it will recommend for you all the existing controls. If we unfold that, then you will see that there is bold, which translates to this thing. There’s also code, image, italic, which is here, or link, which is here. If you can go here, there are more of them. There are seven, one of them is probably hidden, and there is also keyboard shortcut. We will get to that soon.
Why is that important? It’s important for you because if you want to change the behavior of the existing controls, you need to know all those names. In fact, you don’t need to go to the source code, you can explore it yourself inside your web browser, which is pretty huge, in my opinion, because it makes everything so much easier. In fact, I would say that at some point, we might go to the state that even using API method could give you some hints on the JS console, so you could play with that. If you want to contribute to that and help us to get there, it’s totally … go to GitHub and open pull request, that would be great.
Zac Gordon: Love it.
Greg Ziółkowski: Yeah. I have also some links which we could share, which is about the rich-text package. That’s important to also mention that all those components, there are three versions of those … It’s hard to explain. This code base lives on GitHub, but it also published to npm where you can grab that and install in your local project. Also, it’s exposed inside this global, which I talked about.
Block Editor Packages: in Core, via npm & on Github
Why is this important? It’s important because when you are using something from Gutenberg, depending on the place you are seeing the code, that might differ a bit. The best way to check the code you want to develop against is to go to the Gutenberg Handbook. The reason for that is we always pin the code that is used inside the code at the moment to the Gutenberg Handbook. For the npm package … the thing is that we try to publish this code as soon as it’s ready, first to share it with Core, because there is still this distinction between Gutenberg, which is developed on GitHub, and there is WordPress Core, which is still on Trac and on SVN, which makes it a little bit harder. However, to sync the code and make it easier, we do this distinction.
If you go to the npm and see the documentation, it could be a little bit in the future. If you go to the Gutenberg GitHub repository, there is even much more in the future of the existence in the Core. That’s very important to know about that, because that might bring you some confusions when you are developing code.
Greg Ziółkowski: There is some changes introduced. What’s in npm, it’s translate directly to what’s in Trac on WordPress Core. You could get the idea. What’s in Trac is something that you can develop against for the WordPress, but it’s going to be in the future version, whereas what’s on master, it can differ, because it can change in the meantime.
Zac Gordon: Cool. I love it. Let’s keep pushing, man. I love it.
Greg Ziółkowski: Another thing is that there is this format library. This is another thing that you can also access using format Library. It’s quite easy when you know the names to find them inside. This one is quite important, because we will be using this thing to use all the APIs to register your own control, unregister an existing control. I will show some examples.
Are there any questions so far? Okay. Let’s continue now-
Zac Gordon: I think keep rolling, man.
Working with the RichTextToolBarButton
Greg Ziółkowski: Also, under the rich-text, there are exposed some components that we will be using today. For instance, there is all of them … no, they are under … sorry, blockEditor. If you type rich-text then there is rich-textShortcut, RichTextToolbarButton, and something unstable. Those components are something you can use. To give you some examples, rich-textToolbarButton is something that you see in here which will be quite important later.
Zac Gordon: Could you maybe scroll down a little bit? I’m having some trouble. I don’t know if that’s just me seeing the very bottom of your console, if maybe you could clear it out and scroll up again?
Greg Ziółkowski: Yeah, sure.
Zac Gordon: It might just be my screen.
Greg Ziółkowski: I can also do this. Does it help?
Zac Gordon: You know what? I think it was just my screen. I think you were good. Sorry about that.
Greg Ziółkowski: No worries. Let’s continue. I will unregister format type this way. There is this method called unregisterFormatType which is exposed under rich-text namespace. We use the name from the existing … this name from the existing control. When I call that, what will happen, the name of this control will be saved under the name, and the rest of the structure that this control has will be under bold. If you will see here, there is no bold any more in here. That’s pretty nice when you are trying this kind of code inside the developer tools, because you don’t need to go through this process of going to your editor and so on and back to the browser and refreshing the page if you only want to check some stuff. What’s nice about this is now, under name, you have this core/bold, under bold, we have all the structure that was … is the same that we could see the edit method in here, it’s a function that … it’s a component, React component behind the scenes.
If you say wp.element, which is something that we are using special abstraction layer over React in case there are some breaking changes, we will be able to provide a way to make the code compatible with the older versions of React, but at the same time, we will be able to make sure that all of the code that was developed for it is still backward compatible. There is this tagName which is strong, because bold wraps the text that you select with strong, and there is a title.
What we will do now is we can register back using wf.rich-text register FormatType, and we need provide two parameters. First is the name of the format, we are using the variable we defined before when we were unregistering, and we are using bold object, which contains this structure with all the stuff. When I call it, see here, bold is here again, and we can go and just use it as see to all before.
Zac Gordon: Okay, we got a quick question. When you unregistered, did that apply to all instances of rich-text? [00:16:14]
Greg Ziółkowski: Yeah, sure. Let me show it again. Sorry, because … Why is that? Because I’m using this-
Zac Gordon: I think a quick answer is good. They’re following you. This is awesome. That did go ahead and-
Greg Ziółkowski: You see in here, and in here. That’s all I had in here. We are registered now. Let’s go and switch to the code.
There is also this package.json file. It’s using WordPress scripts. It’s something that we developed as a side-effect of developing Gutenberg, because we are using all the tools that you need to do all this stuff and use all the modern tools. We figured out that people had a lot of issues of setting up their own plugin and replicating the same setup we have, so we published to npm recently the version that allows to build scripts yourself.
What we will be doing is if you will go here, I have this repository cloned, and we will be using npm start command which allows us to rebuild script whenever something changes. When I will go here and say remove that, you will see that something is happening behind the scenes. If I go to this page and I refresh it then there will be no message any more.
Greg Ziółkowski: Did I miss something over here? Oh, this is this section scripts which I added according to the tutorial. It’s nothing fancy. I didn’t do anything. We’ll be using … the things I installed before are inside developer tools. I were using ES5. Zac, can you elaborate a little bit on that and explain what’s the difference … I know you are doing all the time-
Greg Ziółkowski: The nice thing about the tooling we are providing, it takes care of everything. It ensures that the code that is produced which is put inside this build folder, it does some magic, we don’t care about that at all, but the crux of it is that this thing will work in every browser that you consider as supported by WordPress, which is a lot, including IE11, some Android browsers which don’t have many features. It ensures that everything loads behind the scenes, so you don’t need to care about it, you just can focus on writing modern code.
First, we will do an exercise. We will be using something similar we did in the developer tools console. We will unregister bold control, and we will add special code which will allow us to have more control where it’s displayed, so instead of displaying everywhere, it will only be displayed inside pullquote block.
Zac Gordon: Good. That was a question. We don’t necessarily want our rich-text edits to go to every single edit block or every single component, right? We want to narrow it down. Cool.
Greg Ziółkowski: Actually, it’s not that much code to write. We probably could add something like this to Core, similar to how when you are registering blocks, you can define parent blocks, or … I don’t even remember the exact name. More or less what it does is if you want to have something like button which is only displayed in a map block, you can just define that this particular parent block is map, we will code the editor to display this block only in the context of the parent block, and that’s it. That’s something that we could add, so again, PR, pull requests are always welcome.
Zac Gordon: All these places to contribute, y’all. Good, I love it. Greg, I’m going to push you a little bit just so that we get into some more of the code and keep ourselves on track here a little bit. We’re doing great-
Greg Ziółkowski: Yeah, sure.
Zac Gordon: Let’s jump into it.
Zac Gordon: Hold on, buddy, I think there might have been a mistype on that one. Go back to your peach P&Q, richrext, yeah. Cool.
Greg Ziółkowski: It’s okay. We will do basically the same thing, but this time, we will also destructure. We will be saying that there also needs to be edit method, which is the function which will just need to be assigned to this variable, because you will need that to make some modification. Again, we need to use core/bold. That thing alone-
Zac Gordon: Do we need one more period there? Yeah.
Greg Ziółkowski: Yeah, it tells me everything because I am using ESLint tools.
Zac Gordon: Good tooling, helpful.
Zac Gordon: Yeah. We are basically going to go ahead and … We’re going to spread across bold and get all of that out, and then put in edit as well, but it looks like … are we going to rename edit to something? Is something else going along with edit after the colon?
Greg Ziółkowski: Yes. What we are doing now is we’re just registering it back, whereas we want to show it only in the case when it’s inside PullquoteOnly. For now, we’ll create PullquoteOnly component, because edit behind this is a function which is also a React component. Just to give you an idea, there is this plugin which was developed by Ella van Durpe, which is a core contributor, and she’s author of almost all of the code that we are using behind the scenes, so big shout out to her, she did a really great job. Also, if you want to learn more about al the things we are talking about today, she will be giving talk on React Europe in May and at JSConf Europe in June. I’m really looking forward to see those talks.
Zac Gordon: Please go and tell her that she’s doing amazing work. Not one of the most vocal members, but definitely building out this sucker, so a lot going on, doing good work.
Using the Data API
Greg Ziółkowski: This is where some magic begins. Now we will need to do something to make sure that this PullquoteOnly edit is behaving differently. We will be using data API. Can you elaborate on that, Zac, and explain what’s that exactly?
Zac Gordon: Sure. We have a data API in WordPress which is, at the most basic level, a bunch of variables and functions that map to data in WordPress. Where we might have to make a custom PHP call or we might have to make a custom API call, or maybe something we just can’t even get access to, the data API is going to make it super easy for us to be able to access all that stuff. We go into it in advanced Gutenberg course. This is a game-changer. This is something we haven’t dealt with in WordPress before and definitely a new, important skill for us to get comfortable with, so I’m glad we’re digging into this a little bit.
Greg Ziółkowski: Yes. Let me show it right now. As you can see … let me close this one. As you can see, bold is in here, and it’s everywhere at the moment, right? We just redefined, but it’s still the same. Compose, it allows us to … what it’s doing is it allows us to call functions which will be executed one atop another, so it’s from functional programming. This is just a thing that allows us to make the code look better, because we will have otherwise something looking like a Christmas tree. This just allows now to do something that is … as a pipe, so something that is executed one after another.
There are some helpers which we provide in Core. You don’t need to necessarily know all the details how does it work behind the scenes. The idea is that you can, based on the order of them, you will do some special things with them. We select this coming from data API and it … so we are having a lot of in-memory information stored inside memory which we can pull in. One of them, which we will need in here, is how to get the currently selected block? Based on that, we will be able to use the name of currently selected name and check whether the name of the block is the one we expect, which will be Core pullquote, and based on that, we will conditionally display all those code inside edit. Zac, is that clear?
Zac Gordon: Got to get back to my mute. Sorry, I was throwing in some links there. I think this is pretty clear. We’re getting the ability to get some of this data from memory and then modify it or add it in. If you have worked with React and some of these things, compose is not unique to WordPress. We are using some patterns here that are pretty common, and it’s nice that we have these little tools built into WordPress, because they do make our code a lot cleaner.
Greg Ziółkowski: As you can see, now it works still the same. The if Condition, if you just take the function, and based on the true or false, it will be changing the state of that. If I will provide the false, that will make there is no bold any more. We will use that behavior just to grab the name of the currently selected block and pass it over from the withSelect. To do this, we need to use select helper method. From Core, there is this block-editor store which contains all those information you need. There is method called getSelected Block, and-
Zac Gordon: If you haven’t, Sorry, I was just going to throw in, if you haven’t taken the time to look through the documentation, we could link up to the data API, there’s a ton of these new functions to learn, and a lot of them are documented. I don’t know if this block editor is totally documented yet, that’s part of why we’re digging in ahead of time. Yeah, so we’re getting out the selected block, then we’re going to return that, and then that should be available for us next time around to be able to check. We can just do selected Block Name and see what we’re working with.
Greg Ziółkowski: Yeah. I’m trying to… so far what we are doing now, we are calling this method which we can return the currently selected block, which is an object. We will just need to double-check that it’s returned, because there can be, of course, the case when there is no block selected, and then pick its name. The selected block name will be passed over to another, so when we go in condition, it also will pass all the props that it contains, so we will be able to take selected BlockName and compare against the one we are expecting here, which is pullquote.
That’s all we need at the moment. I think that’s all that is necessary to make it work. If you go to paragraph, there is no bold. If you go to pullquote, the bold is there. That’s all done. As you can see, it’s not lots of code to make sure that it’s working.
Higher Order Component
Zac Gordon: Before you go on, I just want to re-explain real quick. If you’re not familiar with this HOC pattern, or higher order component, what we’re doing is we’re basically modifying the edit component, which is actually coming at the end in line 16 there. We pulled out the edit function and then … switch screens here … Sorry, can you back to the code real quick … Yeah. We pull that out, then we’re basically writing some checks, we’re figuring out if this block is selected, getting the name of it, and then just doing a quick conditional check. It’s only going to apply these changes if it is the core/pullquote. We could also modify this. Instead of triple-equals, we could do a negative or is-not-equal-to, and then it would happen for everything that’s not that one block. I don’t know if that helps, but it might be some new code here that you’re seeing.
Greg Ziółkowski: One of the requests we get before this show was, “How can I add a control which will change the color of the selected text?” It’s something similar like in here and … If you check this plugin, advanced-rich-text-tools, it contains a way of doing so you can change inline text coloring, like background color, and it’s applied using inspector controls. Inspector controls, what that means is that it’s applied in here. However, we will be doing something now which will apply this code in here which is going to be a lot more challenging, I think.
We’ll do something quite simple first. We’ll just register a new format which will be something that we will call Text Color. To do so, let’s register a new variable, because we will need it later. What else do we need? Maybe let me remove that, this, and this to make it easier to follow. Beside, we will also need to register this format, so we will use this name … There are a couple of things that we need to register for every control. One of them is title, so let’s say Text Color. There is also tagName, let’s pick span. Basically, tag Name is something that will be inserted inside … if you go in here and go to edit SHTML, there is nothing-
Zac Gordon: That’s going to be your wrapping tag, right?
Greg Ziółkowski: Yeah. The wrapping tag is em here, but it’ll be span. There’s one more thing that we need to make it work, it’s a className. When you are using … the easiest way to give indicator that this control is wrapped with something is through the className. You can have multiple spans, but if you assign them unique class Name, then it’s easy to identify for the editor what it’s going to be editing.
Zac Gordon: I’ll just throw out, we are a pretty international crowd here, when you do this, things like title, we’d want to use underscore-underscore, but we’re just going quick through here to demonstrate.
Greg Ziółkowski: That’s true. That’s another big topic.
Zac Gordon: We’ll have you back for that one.
Greg Ziółkowski: What we need now is, again, we need to define this edit method. The one we used previously, we used from the bold control. Now we will need to implement it ourselves, which is not that easy, but also, it’s not super complex stuff to do. We’ll be using a function which is more or less something like a component, and this component provides props, which is an object, something like a regular React component. It provides the following props which we’ll be using, is Active, it indicates whether it’s selected or not. If we go back … okay, something is broken now. Let’s go back later when I have this code-
Zac Gordon: Finish coding it out, yeah. What you folks will find is if you’ve built a block, you’ve seen the edit component before throughout WordPress, and it’s going to start expanding when you need to build a custom component. I believe that the component name, or the name of that setting is usually going to be edit, so we can come to expect, when we need to build some component and we see edit, we know that we’re getting some sort of React element there.
Greg Ziółkowski: Probably it was strong.
Zac Gordon: Oh.
Greg Ziółkowski: I want just to make sure that it works before we go deeper into things.
Zac Gordon: Somebody pointed out, is our namespace correct on line 5, the Gutenberg Times with multiple Us? Is that breaking things for us?
Greg Ziółkowski: No, I think the issue was the component wasn’t returning anything yet-
Zac Gordon: We didn’t return anything yet? Got it, cool.
Greg Ziółkowski: In React, you need to return at least null.
Zac Gordon: Good catch, Anya.
React.createElement – JSX
Greg Ziółkowski: Yeah. We’ll be using JSX, which is … Can you, Zac, explain quick-
Greg Ziółkowski: It’s an issue also for Core. We are thinking about some improvements around that. However, I don’t want to get too lengthy about that because we are short on time and I want to go to the real stuff.
There is this rich-text Toolbar Button component which is provided by Core. It allows you to build the same control that we have for bold and for other elements. There is number of whitelisted blocks like bold, italic switches displayed by default on the first view of that block toolbar, however, some of them are displaying in the dropdown which have … it’s also the default behavior for all the non-Core blocks. The reason for that is because we want to provide some control over how it’s behaving. There will be ways to change that, so you could just define yourself the default ones, however, it’s not something we cover today.
Zac Gordon: As you’re typing, I’m going to let you type and talk about that for a second. If you go in again and you look, the first buttons are going to be bold, italic, and then there’s a dropdown, and you can add your own custom ones that go in there. For a while, I guess you haven’t been able to put yours as the first ones in there, but I guess it sounds like that’s coming. Today, what we’re going to build, I believe, is just going to go in the dropdown, because it’s a lot easier.
The cool thing about the way they’re building this is there’s hooks everywhere to extend and customize all this. Okay, so it looks like you added a title, you added an on Click event, which is going to handle what happens when you click on this button, and then we’re seeing, is the actual thing active, we’re determining … and that’ll determine the styling and if it’s indented right or not, should help-
Greg Ziółkowski: Yeah. I think we have everything just to make sure that it’s displayed at the moment. If we go over here and open the toolbar and it’s in this dropdown, we have this text color, if we select some text, apply that, nothing happens, but if you go to the source … nothing has happened. Why is that?
Birgit Pauli-Haack: It’s called live coding.
Greg Ziółkowski: Yeah, it is.
Birgit Pauli-Haack: That’s the beauty of it.
Greg Ziółkowski: Let’s get back here.
Zac Gordon: Do we need to have the on Click event setup for what is actually going to happen when we click on it?
Greg Ziółkowski: At some point, yes, but it should work without that.
Zac Gordon: It should already wrap the spans in even when you just click on that?
Greg Ziółkowski: Maybe not. Maybe that’s expected. Anyway, let’s go further. What we have now is, isActive is the state of the toolbar when it’s active, then it’s indicated inside the UI, that means that it’s applied. We also can have value. Value is the value of the rich-text, it’s not the value of the controls. This is something that … The text that you have inside the rich-text memory, which is a special structure, and there are special helpers to work with that. We need to bring those special helpers just to be able to use them. They are inside rich-text, so in here, we will need something to apply the format first. I think that’s called applyFormat. Everything is documented and available in the Gutenberg Handbook, so you will have to reference that if you want to find more details.
There’s this on Change, I think probably that’s why it doesn’t work at the moment. on Change takes this … What we will do now is we will take the value, we will call apply Format, this will do some crazy modification behind the scenes, and it will ensure that this … our control is applied to the text. To do so, we have to use this applyFormat, which takes value, and then it also takes an object. In this object, you will need to define type, that’s why I used types as the name of the control, and the other stuff is attributes. In this case, because we want to apply colors, what we have to do is provide style, provide color, and we will do something like red, for start, and … yeah. Let’s see if that works, then we can debug further.
Zac Gordon: I guess what you put in there is really going to depend on what your button is doing, but in this instance, we’re looking at how do we apply formatting to stuff … and look at that.
Greg Ziółkowski: It works.
Zac Gordon: Yay!
Greg Ziółkowski: As you can see, there is two things, or there are three things. There is span, which is the tag name, there is the style, which we applied using attributes, and there is this red color, and there is also this class name which is used. That’s everything that’s applied here. If you go here, at the moment, it’s active, so you can see that it’s highlighted in here. If we click again, it should be removed, probably. I didn’t select it properly.
Now, the reason why it doesn’t work is because we need to handle it ourselves. To do so, we can use isActive state. We’ll be branching our code so that when the control is active, you need to use another helper function, which in this case is called remove Format, which takes value, again, and the name of the format. That’s all which we need to provide. Also, we’ll have to return from here just to make sure that the other branch is not called at all, and we’ll also need to bring it in here.
If we reload the page, now we can … no? Okay, one more thing, we of course need to call this onChange. There are a few things to take into account here, as you can see. This onChange is crucial to make this work, and also, there are those helpers that help you modify the existing value structure. You don’t need to know how it looks behind the scenes. You shouldn’t be looking at it at all, to be honest, because it might change behind the scenes if we need to do some crazy optimizations to make it better or whatever. I also don’t know, I was reviewing the code, but it changes so rapidly, so probably there is something-
Greg Ziółkowski: Yeah. Let’s do one more thing, because I can show you that we can apply multiple formats like this. We can define the name of the color, let’s do it this way, let’s move it in here. We can use template literals … is that how it’s called, Zac? I don’t remember the exact name.
Zac Gordon: Yeah template ______ basically strings that we can put variables in with backticks.
Greg Ziółkowski: This way, it should … what I’m trying to do … Hmm?
Zac Gordon: … making it dynamic here. Let me ask you, do you think in general it is … We’re inline styling stuff. Do you think in general, folks would probably want to create classes and have a separate stylesheet? What’s your opinion on inline styling with stuff like this in this particular context? Do you think it’s okay-
Greg Ziółkowski: In this particular context … It depends, really. If you want to provide only subset of colors and maybe class name, it’s okay. If you want to have orange which is, I don’t know, you have a special team and each team can define their own shade of orange then that might be fun. It all depends on the use case you have.
In this case, I think that if you would like to develop a footer then you would probably try to find a way to use some dynamic ways of having something similar to the classic editor, which allows you to change the color. You apply it the same you see in Word and other editors. It really depends. That’s the most often things you would hear.
Let me just double-check that it still works … This autosave thing is really annoying. I’m not quite sure why it is happening. Anyway, it’s development environment, so we shouldn’t care. What I want to do now is I want to wrap this thing and provide you with more controls, just to show you the idea that it’s quite easy to, when you have one working control, then providing more control is quite straightforward. I’m using for each to iterate on every color in here, it will assign into the color variable, which is in here. It’s something not that complex. Now we should see three controls when I refresh the page.
Zac Gordon: Buttons on buttons on buttons.
Greg Ziółkowski: Yes. You can see there is color red because we probably did something wrong-
Zac Gordon: It might be because it was already on the page?
Greg Ziółkowski: No, I think there is one place where I didn’t provide … there’s still red somewhere, probably. No? Let me check really quick.
Zac Gordon: What if we just delete the block and refresh it? Was that-
Greg Ziółkowski: I think what’s happened here is we used the same class Name, which is quite an important issue. It probably was explaining … that message explained that, but I didn’t read it, because it’s live coding. Now when… it’s a nice way to see that you have this error message, which allow you to … Yeah, so it’s already registered using the class Name. It exactly said that. I just should read it and that would be much easier to fix it.
Birgit Pauli-Haack: Do you think it really helps when you read the error messages? [00:54:04]
Greg Ziółkowski: Sometimes. As you can see now, we have three controls. That’s quite important to show you one thing here, because we can apply multiple controls like that. If you go in here, all of them will be applied. “Your” is wrapped with both green and red. You need to remember that, because every control you are using is providing their own wrapper. It’s not that they are matched together, and the order of lines is also important. I think that’s all I got.
Birgit Pauli-Haack: This is awesome. I learned something great today.
Zac Gordon: Let me ask those of you who are watching. Do you think you could have just intuitively figured this out, or are we grateful that he took the time to show us this? I think you are saving all of us a ton of time. Let me ask you, what other kind of things … we’re wrapping stuff in an element. Can we insert crazy things? Can we go beyond just wrapping, or is that really the constraints of what we’re looking at today is meant to do is just this, take some text, wrap it in there? Can we inject a whole other component into this? How far can we push what we’ve seen today?
Greg Ziółkowski: You mean about the edit implementation, right?
Zac Gordon: I mean about this filter of modifying stuff in rich-text.
Greg Ziółkowski: Oh, yeah. You can do some modifications. If you go to this example which I shared before from the rich-text control, there is something that Ella is doing with styles. There is this helper method called getActiveFormat. It allows you to get the actual element for this format control, and will let you access things like style, so you will be able to do some modifications around that. I think it’s much more advanced. There are lots of helpers. I don’t even remember the names of them. I no longer share screen, but if you go to wp/rich-text and try to see all the methods that are exposed there, I think there are a lot of them. You can get text content, you can … what else? You can do … toggle Format toggle Format is pretty nice. Bold is using that. This just allows you, in easy way, to do the same thing I did, which is apply format and remove format, so there is toggle, which just simplifies stuff. You don’t need to do all those conditions yourself.
Birgit Pauli-Haack: That’s awesome. Thank you so much. That’s wonderful, and you timed it quite nicely. We are now at-
Zac Gordon: Right on the hour. This is something around here.
Birgit Pauli-Haack: That’s a fantastic demonstration. Thank you Greg and Zac for putting all the work together, especially Greg, to condense all this knowledge to this one hour of things. The video recording will be on YouTube in a few minutes when it all renders, and we have the post of the transcript in the links again in the Gutenberg Times on Saturday. The code is published, and I think I shared the link, but I’m going to share it again, on the GitHub repository. That’s all I have. Do you have anything to add, Greg, Zac? How can people get in touch with you? What else?
Zac Gordon: Greg, give us the one-minute preview. What’s it like to be on the team here? What’s it like being in the trenches with all of this? Are you pretty siloed on one particular thing? Do you see all of it? Is it your fault if we have a problem with Gutenberg? Do we contact you on Twitter? What’s it like?
Greg Ziółkowski: It’s growing a lot, so it’s amazing to be on the Gutenberg Core team. I think that we are still learning ourselves to learn to make it something that’s easier to use for everyone. I particularly was involved in all the extensibility efforts last year, and I’m still continuing doing that. The thing that I’m currently looking at is block directory and the way to make block registration easier and easier to discover also inside wordpress.org and for you inside WordPress when going to the block.
Zac Gordon: Man, peace and love forever and ever, something like that. I really just want to thank Greg again. I could not be doing the course and the teaching I’m doing without your help, buddy. Every time you answer a question and all this stuff that you’re doing … I’m really grateful. I’m trying to take this contact point and share it with as many people as we can. I’m really glad that you came on and folks got to hear a little bit and see a little bit, so just hugely grateful, and of course, Birgit, to you, keeping up with the news, this is how I keep up with this stuff. Thank you both, just grateful.
Birgit Pauli-Haack: Thank you, Zac and Greg. That’s it, then. Happy Gutenberging, or Guten Tag, or goodbye. That’s it for today. Come see us tomorrow, not live coding, but we’re talking about teaching Gutenberg. Bye-bye.
Thank you all for the Get Well wishes! Be well and enjoy the Spring! 💕 — Birgit
PS: This week WordPress 5.2 Beta 1 was released there is plenty to like about this next version. It comes with Gutenberg 5.3 and brings part of the Health Check plugins into Core. Make sure you help testing this first beta. The final release is scheduled for April 30, 2019.
The block plugins mentioned here the new additions to our Big Plugin List for the WordPress Block editor, categorized for Block collection, single purpose blocks, blocks for eCommerce, for 3rd party integration and tools for the block editor.
Howdy, howdy! And again, another three weeks came and went. I am back from Portland, OR and mostly recovered from the flu, that kept me in bed for three days. We have a lot of catching up to do! Let’s get to it!
The team released two more versions of Gutenberg 5.2 and 5.3. The latest version brings you the first version of a Block Manager and nested blocks for your Cover block, you can now use as your built-in Call-to-Action block with buttons and all. That and many more fixes and features you can read about out on the MakeBlogs for the design and core teams.
I also found some great more block plugins for different verticals and purposes. Don’t miss the recording of this week’s Freelancer panel on Live Q & A and sign up for our upcoming events in the first week of April! — Enjoy, Birgit 💕
For content creators, change in daily routine is fatal to productivity. This is especially true during the transition to Gutenberg since it still contains a few “gotchas” that may stymie people and interrupt workflow. I list a few here, along with some workarounds to assist users during active development. Gutenberg will be updated as soon as issues are resolved or refactored.
Now it’s one to the reason for this post: to alert content creators to the hidden features of Gutenberg that streamline writing workflow. As we all know, each time we learn a new software or tool we tend to judge it at our “beginners level”. We may even throw in the towel before we reach mastery. And that applies to the current editor.
This post assumes that you have already gotten your feet wet with Gutenberg and WordPress 5.0 If you haven’t I suggest that you read one of these excellent resources under the Beginner’s Guides to Gutenberg
There is also a whole team working on an official user manual for the Block editor. Until that’s published, it’s all a bit fragmented. If you are a technical writer and would like to lend a hand, join the #docs channel on the WordPress Slack
With Gutenberg 4.4 you can now edit the permaling in the document panel of the sidebar.
Once you save your draft, you can modify the permalink by clicking into the title section. There you will see the permalink editing space above the title. Developers and designers discuss on Github on how to improve this feature’s discoverability.
For users using an older version of Gutenberg on their sites (pre-4.4)
Please note that there is no permalink created for a new post until you have clicked Save draft at least once (Marius Jensen, Support Forum)
Slash Command to Trigger the Block Inserter
Probably the most useful tool hiding in Gutenberg is the Slash Command. It’s also my favorite. Using slash command invokes the Block Inserter including its search, so you don’t need to interrupt your writing flow to hunt for your mouse to add a quote or a list via the keyboard. Begin by starting a new line with Enter. Then hit the “/” key and start typing the name of the block. “/l” gives you the list as a choice. Selecting it and typing your first list item is really cool. Or you could just use one of the keyboard shortcuts below
But “/” + i gives you an image block, “/”
The introduced keyboard shortcuts also allow for the following combination
⌥⌘TInsert a new block before the selected block(s).
⌥⌘Y Insert a new block after the selected block(s).
Customize Your Workspace
Since version 3.8 there are three features to customize your writing workspace. The Unified Toolbar, the Spotlight mode and the Fullscreen mode. You can use all three together or each one alone. Some people are a bit taken aback by everything’s being block, especially each paragraph. “Spotlight mode” helps with that.
Top Toolbar (former Unified Toolbar)
And it can seem awkward for each paragraph block to have its own formatting toolbar that pops up on hover and covers text above. The Gutenberg team implemented a solution for this called Top Toolbar – which was just renamed from ‘Unified Toolbar.’
Switch it on in the Editor Settings menu, and reach it via the ellipsis menu (3 dots) in the top right corner. The Block Options menu is also available from the toolbar on top of the screen.
This process is refined by a “Spotlight Mode”. The editor grays out the canvas except for the block you are editing. It also delays the visual clues about separate blocks while in writing mode in the editor, making it less distracting.But that has the down-side of making the features for individual blocks even harder to discover. But you can easily switch it off again by returning to feature mode.
Full Screen Mode
With 3.8, Gutenberg now also has a full screen mode You can switch it on and pretty much remove the top admin toolbar as well as the left admin menu. Once you remove the editor sidebar, all that stays on your screen is the Top Unified Tool bar and your content.
Full Screen Mode, Spotlight Mode and Unified Toolbar.
Disable Publishing two-step
I personally like the Publishing two-step process. As soon as I hit the publishing button, the post will automatically shared on various social networks (via JetPack or other RSS to Social integration.
The Publish Two-Step has saved me more times that I care to admit.
On the 2nd publishing step you will also find JetPack’s Publicize area to modify the post to the social networks connected. It’s actually on the second step so you might not want to remove it if you are using it.
You are able to switch that off using one of the two methods.
One way is under the “Editor Settings menu”, you open via the 3 dots in the top right corners.
Or you can also disable it the first time you see it happening in “Are you ready to publish?” Screen. On the bottom of the screen uncheck “Always show pre-publish checks”. And it won’t bother you again.
New line as command line
Gutenberg developers also introduced a new concept: new line as your command line.
By hitting enter in a paragraph, you can write another line or execute a few shortcut commands:
`/` slash command to insert a block
`>` to start a quote directly,
`##` to start a heading, (in a post’s body you start heading hierarchy i with <h2>)
`1.` to start an ordered list (also ‘1)’ )
`-` to start a list.
Using backticks ` at the beginning or the end` of a string adds code formatting to your string. (the same key as the ~ key)
I also learned a few more very helpful shortcuts,
⇧⌥⌘M Switch between Visual Editor and Code Editor.
⌘K Convert the selected text into a link.
^⌥S Remove a link.
Since the focus is now on block based editing, I was surprised to notice that there is no keyboard shortcut to switch to HTML editing on the block level. And that is where I do most of my HTML tweaks. Turns one I am not alone. I filed a GitHub issue and it seems to be on the docket to be added.
More Keyboard Shortcuts can be accessed, via at the Editor Settings Menu
I apologize that the shortcuts are all in MAC notation. If you open the Gutenberg editor on your machine, you’ll be able to look up the shortcut combinations your specific operating system.
Copy/Paste from Anywhere
Matt Mullenweg’s favorite hidden feature is the parser built into Gutenberg that allows for copy/paste of content from various tools, like Evernote, Google Docs, Microsoft Word, etc. Here is a little matrix on what works across the various platforms:
Reusable Blocks offer a whole new level of content development. With Gutenberg version 3.9, you can now save a combination of blocks as one reusable block, which you can also export and import on other sites. Why is this a big deal?
For instance you can build landing pages with certain disclaimers, calls to action and campaigns. You can make the wording, the combination between heading, image or cover image and CTA button available to your users, for their use on their own posts and pages.
The new Gutenberg release also provides ways to manage your reusable blocks: You can delete them, export reusable blocks, and even import Gutenberg blocks from other sources.
There is a power feature for the Donate Now button: If its link changes, you need to change it on just one page, and that updates all other instances on your site.
In other words, reusable blocks are not templates. They are “content + design” blocks. And, if you need to change things in one spot, but don’t want to change other instances, you simply convert it to a standalone block before making the changes. Just use the “Convert to Standalone Block” link in the Block Options menu.
How to align an Image?
We often add an image to break up dense text in a long paragraph, and it must be aligned so the text wraps either left or right of the image.
This may be the biggest transition hurdle for new Gutenberg users. I never found it easy in the old editor, and it’s still a bit quirky in the new editor.
But I am content to switch out one bad UI with the another bad UI. Coming from the early days of HTML coding, I know about the hazard of image floating n web design. So I don’t have high expectations and am happy that it works at all. Resizing the image is easier but the default experience is still not great.
The biggest change is that just putting the cursor on the top of the paragraph where you want the image to align doesn’t work. You need to add the image block above the paragraph that will be aligned with the image.
Follow these steps to align an image:
Use the “Inserter” above the pharagraph.
From the “Inserter” select “image block”.
Upload or select an item from the media library.
Use the left or right align button from the block toolbar.
Use the blue dot handles to resize the image.
Or you can drag and drop an image – again – above the paragraph, and align and resize it to fit.
How Gutenberg makes it much easier is that it’s truly WYSIWYG! You don’t have to switch from editing to preview to see if your image aligns well. You see it right in your editor.
There is a whole series of two blog post about this on WPTavern to solve one thing. A clearly Jeff Chandler didn’t have this secret manual:-)
WooCommerce is still working with the current editor. The post type “product’ is not yet ready for Gutenberg. Earlier this year, there was a test period, and since 3.4 it was reverted back to the classic editor. “Since WooCommerce is not optimised for the Gutenberg editor we’ve decided to keep the old editor for now so sites do not break when WordPress 5.0 is released. Products are not content focussed, so using Gutenberg with our meta box placed awkwardly at the bottom is not ideal.” Source: GitHub Issue #20201
WooCommerce’s plugin has four different product views, is a rudimentary Product view. Later in the year WooCommerce devs will refactor products using the Gutenberg framework and tools, they announced…
PootlePress released their premium plugin Storefront Blocks. The various views in grids, sliders, masonry or carousels are very slick and impressive. Take a look for yourself.
Formatting Multiple Text Blocks
Highlighting a few paragraphs and making them bold or in italics doesn’t work yet, unless you use the Classic Editor block. It’s one block at a time. Note: There is a GitHub issue where the foundation of multiple block behavior is discussed. It is a prerequisite to something as simple as formatting a paragraph and a list in italics. Here is the feature discussion, if you want to chime in
Posts are now locked for other users
If you are working in a team of editors, you are familiar with the post lock feature in the current editor. If one of your peers is right now editing a post, you are not able to access it for editing; you have options for read only or to take over the post.
“Title” is not a block
It looks like a block, behaves like a block, but it’s not a block. The post title holds a lot of weight, especially in backwards compatibility, plus in other places of WordPress for category pages, for the RSS feed, and many little things. Gutenberg is not modifying how the post title works.
White space around the editor
The editor is “opinionated” regarding the space it occupies. Depending on the size of the screen, you might find “too much” white space on the side of your content.
The opinion from the design is that there is an optimal width for reading on screen, and if the display space is larger it is much harder to keep track of the lines. It adheres to a max-width.
A few people mentioned this in the forums, and the team is giving it another review. (1483)
If you feel the same way when you look at your editing screen, you could use the plugin (???) To fix it for yourself.
Keep in mind though, that usability studies have shown that a content window is between 480 and 600 pixels. For easier reading it’s actually half the size. That’s BTW is helpful to have a graphic to the right for the first section of your blog post. That’s one aspect. The other is that with Gutenberg you are aiming at a 100% WYSIWYG. So what you see in the editor should be the same thing that is visible to your visitors on the front end. If you make the editor screen too wide, a few things will wrap differently for your visitors. Quite a few writers found this tip helpful.
Grammarly doesn’t work well
“Grammarly considers block a separate text box, meaning if you create a 25-paragraph post, you have 25 separate text boxes Grammarly is trying to check. This forced me to disable Grammarly on my site.” Jonathan Bailey in “WordPress’ Gutenberg: A Practical Review”
Marius Jensen has published a few issues that he and his team of volunteer forum helpers identified. Quite a few of them have to do with another fairly new module that made it into Core recently, the REST-API. Gutenberg development is based heavily on the REST-API so during developing Gutenberg, the collaboration with the REST-API made it better as well. At the foundation of this, it’s a programming issue, but it will bubble up to become quirks a content creator will need to be aware of:
Categories and tags are not showing up
Some security related plugins may have disabled all, or parts of, the REST API. This is used by Gutenberg to fetch all the data used to display content in the editor, so if you are missing fields, check if you have a security plugin enabled. If so, see if it has an option for the REST API.
Updating Failed Message
If you are receiving a Updating Failed message when trying to save a post or page, check if you are using the services provided by CloudFlare. We are currently working with them to address a problem which blocks the Gutenberg save function. A workaround is available while we find a solution to this.
It’s been reported that some antivirus software may also block REST API requests. So if your antivirus software offers an application firewall, this may prevent you from saving posts. We are looking into this.
Blank Editing Screen
Some users may experience a blank editing screen. If this happens, a first step to testing should be to just hit refresh in your browser. It may be a “race-condition” that we’ve identified and are working on fixing.
Howdy! It’s been about three weeks since the last Update post. I have been handicapped a bit. First, by a self-inflicted deep cut into my left thumb with a construction tool, #StitchesRUs. Then a needed vacation with dear friends, which ended in an clumsy sidewalk tumble. I am still working mostly from my couch with an elevated left leg, laptop on a pillow. It’s healing slowly and I hope, I’ll be in good shape when I head out to Portland, OR next week. Our eNews subscribers received their recommended reading fix with our weekend edition.You, too, can subscribe here. In the meantime, WordPress 5.1 was released. (Field Guide) as well as Gutenberg 5.1.
Speaking of Navigation Menu block, Susan Semark from the Research team has been busy and posted a first proposal, an Accessibility Video walk-through and is planning a usability study.
I collected quite a few more links for you, content creators, designers, developers and consultants.
Learn about the mechanics on how to contribute to the Gutenberg development.
Few more blocks for publishing and eCommers, discussions on a future Core Block Manager, reviews of existing Block Collections. Also, find tips and tricks for building blocks as well as for creating themes for the block editor or making them Gutenberg ready.
Thanks for visiting and enjoy the collection. — Birgit 💕
🎥 💬 Don’t miss the Live Q & A this week Friday with Josepha Haden, Daniel Bachhuber and Jon Desrosiers. We’ll be talking about leadership in the times of change. 📢 📅
It’s been over two weeks since the last update and a lot has happened. A new Gutenberg version, a release candidate for WordPress 5.1, and report on the site building research results. There are also a ton of awesome update in the next WordPress version. Make sure to check out the Field Guide. This post is also about education listing online courses, conferences and WordCamps, around the block editor. Lots of blocks for content creators, bloggers and small biz site owners and plenty of links for developers who want to build blocks. Enjoy and let me know what you are working on and what cool sites you built with Gutenberg blocks. Have a fabulous week! — 💕 🤗 Birgit
Two months after WordPress 5.0 was released, I can’t imagine WordCamps without talks about Gutenberg or the new block editor. As it’s now integrated into Core, any talk about creating content, designing sites or writing plugins will have to also be about the block editor. I also know a few people, you have not had the time to dive into the block editor parts of WordPress, and just went with the Classic Editor. After reading the Site building Research results, I understand more about this segments of site builder and coaches. The main reason, I list the WordCamp talks here is that we can collectively look them up on WordPress.TV later this year, and also maybe catch ’em on LiveStream, should there be one. There is some serious FOMO going on, too. The first WordCamp in 2019 for me will be WordCamp Atlanta on May 3 + 4, 2019. I am also looking at WordCamp Leigh Valley, Philly, NYC and Boston later this year. Who knows, maybe we run into each other! 👋 Waving at all the fabulous WordCamp organizers, who spend months of their spare time to put these phenomenal conferences together. Thank them when you meet one!
One (1) Year of Gutenberg Times, 100 hand-curated Updates since June 2017, the 10th episode of our Live Q & A on YouTube. 45,000 visitors. These are all just numbers. All that matters is that you are here! Thank you. Leave a comment on any of the posts, and tells me more about yourself! 💕
The web gets really interesting when you can add animation and moving art to it. Now the Block editor can be used as an p5js script editor and provide instant preview. Very cool. Enjoy our conversation with Kim Scotland, Bob Dunn and Kori Asthon about how they converted their sites to the block editor and how businesses can take advantage of the new WordPress visual editor for product and affiliate links.
Our friends, Zac Gordon and Joe Casabona published updated or new courses for you. Take advantage of their discounts! Gutenberg is also the topic of three WPCampus sessions. Morten Rand-Hendrickson teaches you how to extend your Themes for the block editor.
And again, Blocks Galore. Cool blocks for your blogs, and great tips for developing plugins and themes for the block editor.
Plugins, Blocks & Themes development for WordPress 5.0
Wavemaker – This illustrates how waves (like water waves) emerge from particles oscillating in place. Move your mouse to direct the wave. Contributed by Aatish Bhatia, inspired by Orbiters by Dave Whyte.
Gutenberg Phase 2 starting up with call for contributors, navigation blocks ideas and research in page building. Watch our Live Q & A conversation about Supporting & Testing WordPress 5.0. Find also a few more tips & tricks on using Gutenberg for content creation and block building. Hope you learn things! 💕
Monday was Gutenberg Times 1-Year-Anniversary. It’s been a fun ride! An awesome 12 months of the site, for sure. 🎂🍰🤡 — Birgit Pauli-Haack