In this episode, I talk to Birgit Pauli-Haack about the WordPress block editor, Gutenberg. Birgit is the self appointed cheerleader for the Gutenberg project, she runs the Gutenberg Times website and is the host of the Gutenberg Changelog podcast. In this episodes we talk about how agencies should think about Gutenberg and what the future of the project looks like.

Links

Try Branch - Automated deployments for WordPress
Branch is my company and the sponsor of this podcast. Branch helps agencies and freelancers set up automated deployments for all their WordPress client sites. Listeners of this podcast gets twice as many free deployments by identifying themselves in the live chat widget!

➡️ Create a free Branch account

Transcript of this episode (automatically generated)

Today I'm really excited to have Birgit Pauli-Haack on the show. Birgit runs her own podcast called Gutenberg Changelog. Gutenberg is of course the code name for the WordPress block editor. And I thought Birgit would be the perfect person to bring on, to talk about blocks. Birgit is also the  founder of Pauli systems.
And you can find her on Twitter at BPH. That's the three-letter Twitter handle right there. Before we begin the episode, I want to tell you a bit about Branch. Branch is my business and the sponsor of this podcast. It's the simplest way to set up automated deployments for your WordPress sites. We've got your back with the recipes for all the common workflows that the WordPress developers need making it super easy and fun, honestly, to build out your deployment pipelines.
It's continuous integration and deployment without the learning curve and it's free to get started. So go check it out. And if you open up the live chat widget and identify yourself as a listener of this podcast, we'll double the amount of free deployments on your account. Yep. Twice as many deployments without pain, you can sign up for free on branchci.com.
We started this episode by talking about Birgits involvement with Gutenberg. Okay, Birgit, so do you want to tell us how you got involved with Gutenberg? Well, after three years, I'm pretty much the self appointed cheerleader for the product. It seems, but I'm not alone anymore, but in June, 2017, that was the first time I saw the first demo video at WordCamp Europe in Paris.
And I thought this was the biggest innovation since, um, yeah, I have a battle. What you see is what you get editor as developer, as, as content creator and try to teach people things so Gutenberg or the block editors it's called now has been a real revelation for me as that. So I wanted to learn everything I could about it.
And also see what the people in the community did with it. So I collected all the updates that went up many at the first, but then coming closer to what came to us 2017, there were quite a few people experimenting with the block. Editor was building blocks, was making the seams work and all that. My updates were on Storify and Adobe, the owner of story five announced in December, 2017, that they will discontinue story five in may of 2018.
And I said, Oh man. Yeah, again, never build on rented land. Um, so sooner or later, so it turned out. I also have many requests to actually. Build a newsletter around the updates on good Morgan block editor. So it was time to build a website and in January, 2018, couldn't work times came about. And then where I update things, I have a weekly newsletter that goes out on Saturday and noon.
Most of the time, sometimes it's an hour later, sometimes a day later, depending how my weekend goes. And, um, but it's in the 140. Four edition comes out next Saturday. Wow. We also have live Q and A's with people who have a workforce. Yeah. Mostly practitioners or from the Gutenberg team that have worked as good and work and have done new websites or are a publisher that uses it, or it's the block directory team telling us how that came about or it's the theme developers that.
All working on the block-based theme. And once in awhile, update us how this all works. So the video is all, most of the time have a transcript on our website, including also the resources that we mentioned in the conversation. So that's definitely a very good source for someone starting out to just go back and look at those videos.
And then in June, or may. 2019, I was in contact quite a bit with a Maki reign, who is a designer on the team, and I've just flat out, asked him, do you know, every two weeks we have this wonderful updates on a Gutenberg plugin, and we only scratched the surface on, or what's published, but not going deeper into what are the bug fixes?
What are the enhancements? What are the documentation updates and the change log. Came up out the Gutenberg changelog podcast we have now recorded 30 episodes and 9.2, we will record the 31st one, which also will have updates. What will be in replace 5.6 and what we'll be in public beta. We're still on the plugin.
So that's, um, what couldn't work times. Nice. Yeah, that's a lot right there. We shouldn't really call it good and Berg really these days. Right? Or what do you think about that? That was the code name in the beginning. It is the Lakota name. Yeah, kind of because the block editor is actually the official name.
Now, as soon as it's in court, that's the stuff that's emerged into WordPress right now. In WordPress, we don't have to install a plugin that you can use out of the box. And the Gutenberg plugin is where all the development happens and is released. Um, and people who have the plugin installed are pretty much using that to also test new features and give feedback, actually, some of.
The more braver people actually have the Gutenberg plugin on production sites to have the newest features actually tested in production, which is the ultimate test of your risk-taking measures. And it has been pretty stable. Yeah. What comes out and. It wouldn't look plugin unless you go to the experiments, which is a subsection.
So there is a plugin with all the new things that come to the block editor with your posts and pages, and then they'll the experiments in the plugin that you have to turn on. And that's really the place where you can get yourself in trouble. Yeah. Yeah. Awesome. Yeah, I think it would be awesome if we took a step back maybe, and just in a few sentences, just explained what Gutenberg is and how it's different from what was already there.
Because it worked for has already had an editor for adding posts and pages, but now we have Gutenberg or the block editor and maybe the name implies what it is maybe. But, uh, do you want to briefly just explain to people. Just the core differences. Sure. The core difference between the classic editor and the block editor, the classic editor, when you open it up is a white canvas and you have a toolbar on top and you can do any additional magic layouts.
I call them. So if you want to do a cover section on your. Post or page, you would need a plugin. If you want to do a media next to texts, you need a plugin. And if you want a gallery, you could either use the build in gallery from cool or a plugin. So you know where this was going. So the block editor, the tool set for content creators just exploded.
You get blocks. So you have a paragraph blocks. You have a list block, you have a media block, an image block, a video block. Audio blog. Yeah. All kinds of blogs that all help you display your content in a more attractive way than just a white wall of text. And we have found when we migrated some sites over to Gutenberg and kind of gave him a new theme for that.
We eliminated it. The number of plugins from maybe 32 to 14. Um, just because there was so much already built into WordPress. So that's the stage in 2018, when it came in 19, there were additional features coming to pass. One of them was block variations and then block patterns. And the block parents just came out with the last version, but they are a combination of.
Core blocks with us certain attractive design that can be used over and over again. So theme developers now can actually create the design and then create a design system where they can have a section of very special color blocks that has all the different things that I content create and needs. But it's already built into the block pattern.
You don't have to use all the tools to make it over and over again. Yeah. It's like a reusable block, but just in a pattern way, there are some features like the reusable blocks that were never possible. Well, I don't even think there was a plugin where you could use this. Maybe a text snippet, one. We use reusable blocks for the branch website because we do guides for how to use branch with different hosting companies.
And. A large percentage of the content and those guides are actually the same. So basically most of the stuff you'll have to do on the brain side. Like one example is there's a section on how to sign up for branch. That's the same, even if you're using three P engine or Pantheon or whatever you're using.
So we actually use the reusable block for that part. So we can just go to one of the pages and edit that were usable block. And then it changes in all the different guides at one point or at one time. So. It's a really effective way to manage your content. Yeah. And that opens up a lot of possibilities, for instance, for affiliate marketing or for call to actions that need to be consistent overall, your website now, where you're only created once and that pull it in if you want to change.
So there are two things that trip people up and now with block pattern, that distinction is really good. One is when you change it, once you change it on all of them, some people don't want that. They just wanted to use it as a template. And so the step in between you need to do is convert it to regular blocks.
Yeah. And then you can do that. And blood parents may push that metaphor much further and that's really cool. Uh, absolutely. The fan for it. Yeah. Yeah. It sounds like something I want to dive into for when I think about Gutenberg and how we use it. For me, there's a very big distinction between the end user and the developers.
Hopefully it's a better experience for the end user because it should be easier to build your website, but it's a little, very different as a WordPress developer to interact with Gutenberg. It's a whole different ball game, but even end users, there are quite a few end users that have a hard time getting started.
Accessibility comes to mind that's accessibility, but it's also just the overwhelm of new tools and stuff. So it's like moving into a new city neighborhood. Yeah. Where you're all of a sudden all the noise around your flat or your house is new. Yeah. You hear the Trump passing by, you hear the bells ring from the church.
You hear the delivery every day of a band spring and merchandise to the shops. That's overwhelming. And a lot of people have that feeling when they start out with Gutenberg as a content creator. But when you move in a neighborhood, if you don't sleep for two nights, but then after five days, your brain doesn't feel anymore, the flight or fight reactions.
And it kind of quiets down. So to jumpstart, that particular experience, I suggest to every content editor who has that to move the toolbox that comes with every blog and sometimes overlaps the previous blog and all that. And it comes up when you just click in that. And you just want to change that you have this book hula, there, there isn't a setting in the three.menu on the right hand side that you can tack.
Well tape the lock tool up to the top of your screen, and then it will be much quieter experience. Yeah, that's helpful. I've seen, uh, quite a few people who had noticed that that should have been the default setting for the writers. That's kind of a 50 50 problem with that. You have a feature that you build in 50% people like it.
55% of the people hate it. So, yeah, there is no good decision there, but that's okay. That makes sense. It's very different. Cause it's all react. Yeah. Yes. There's definitely a learning curve there. Sooner or later, you will have to build blocks and react JS or a vanilla JavaScript. You could do that too, because, um, but prescripts abstract.
All the reactions. Part of it. And you could actually access the scripts with a vanilla JavaScript and you can also do in PHP so you can build blocks and PHP. You can build blocks and PHP. If you use the tool for that, developers not only build blocks, they also extend core blocks with additional features and.
The tools for site owners and theme developers, style the blocks and create the block patterns. It really depends on every learning step. You have a way to get started without having to do JavaScript deeply. Yeah. That makes sense.
What we're talking about now is basically what Gutenberg is right now. It's like, it's something that you can use to build out posts and pages with these blocks, but already we're seeing Gutenberg go beyond just replacing the old editor. So basically the way I understand it is it's also replacing the customizer, which is a tool that you can use to customize the entire side.
And how the entire side looks eventually Gutenberg. Won't just be for changing a single page or a single post. Right. Gutenberg started out with a vision of four phases. The first phase was the editing experience for posts and pages. And we are through that. Uh, we are not completely done because there are some issues and it's a constant reiteration process.
The second phase. Is Anne, I just wanted to stop by the customer will not be replaced. Yeah. Or for a long time, because it's so used by so many people, the block editor started out to think about all the mystery meat that comes with a WordPress site being shortcodes being rigid, being a sidebars and all that, that a site owner needs to know about to actually.
Organize their site and that mr. Amit kind of puts everything on the chopping block, so to speak. And the phase two is the envision to have widget sections, be addressable with blocks instead of widgets kind of thing. Um, so you can use normal core blocks as well as special widget blocks that are created.
And the first iteration of that will come in plus 5.6. Right now it's a testing phase. So from now on and to the release candidate of surplus 5.6, um, everybody is kind of calling to test it, to make sure backwards compatibility works. And third party plugin that use widgets sections also work in that. So that's like the footer and the sidebar.
That's where we are now. Right. If the theme has a widget section in the photo or in the sidebar, you can address it as an end user with a block. If the block has already been styled, it might follow that style or you get a wrap around it for the theme to have a different styling for a widget area. Kind of thing, but the vision is the full site editing part where it's a block-based seam.
So all these sections, the block areas, you can pull in blocks there and you can edit them through a so-called site editor and also have navigation screen and navigation block. The header, the menu and navigation, everything will be blocks eventually. Yeah. So it's a good time to learn how to use blocks now.
Right. Right. And theme development actually will become easier. Because the blocks are already there. And it's really about styling. It's about making the best combination of blocks with the styles that you do. Oh, so basically what you're saying is instead of the good old, when we're doing themes, the old way, like we have to think about the loop and all like these different things we add to our themes.
No. In fact, there blocks for all these common use cases of sections features. And as theme developers were styling them and maybe using some Java script or PHP here and there, but we're just composing blocks and providing these block patterns and styling and design systems and stuff like that.
Excellent. Yeah. So it's the more, the kind of going back to the roots of a theme, what is the purpose of it and then provide, so they're all working on global styles. That is a design system where you, as a theme developer can tap into it and just have a color palette and then attach it to the global styles.
And the whole site is taking that over and booth. That also comes a sidebar in the so-called side editor, which is a block editor where you can change the custom styles or custom colors, and then change the whole theme of it. Yeah. That's an idea. So yes, they create the site title block. The post block was post off a block and it's kind of really granular.
I have post eight block and also the, there is one block that is a little bit of, um, a mystery still. That's the query block. They're trying to get the design, right. How to manage those, um, all the different, yeah. Custom post types categories, tags, pagination with, or without it, with features, without the feature image, all that kind of thing.
It would be put in one block. So it's the loop in one block and in the CMU address it just with the WP query block kind of thing, and put the attributes on that. Yeah. So that's in the future. Is that phase three or phase four? That's phase two, actually what's phase three and four. Do we know? Yes, no. Well, in theory, we know, so phase three is creating a collaboration, like a Google doc collaboration tool with the block editor and Riyadh Benguela who's the lead developer on the phase two.
He has started to get his head around, um, fully encrypted. Online experience to have two people or more work on the same document and then share that also you can get a link. So there is a site out there it's called AAS blocks.com. So as blocks.com, where he writes about it and makes it available, it's quite interesting to see that really changes how a publisher and editor or a bigger team is working with the blocks.
Yeah, they don't have to go to Google docs and do everything there and then copy paste it over. And even some of the stuff that people themselves can build on WordPress, like you can build collaborative tools on top of WordPress and that's really, really cool. Yeah, I'm curious to know what phase four phase four is, what a lot of people and WordPress really need is building a multilingual site was cool.
So that's a big sleep. Yeah. Do you thought that full site editing would be big, but, um, what, when you have a motto. Lingual site. And we hit the borders where the boundaries of a block editor already on the core sites or the wordpress.org sites. Um, in documentation, I ran into that when we wanted to use reusable block for the same sections over and over again, we can't because they don't travel to the.
Polyglot sites to the other Recita and they only see the number, but the custom post type is not migrated over to their site. So they don't know what the content is and we need to actually convert them to regular blocks. We use them as templates. Yeah. So we need to kind of rethink some of that documentation process with that, but that's just one thing.
Yeah. So I'm waiting for that. Yeah. That's interesting. There was one question I wanted to ask. Which I think you already touched on a bit. And I know Matt famously said at word camp, in which word camp I was at that word camp, but I don't remember which one it was, but he's at learn JavaScript deeply Philly.
So basically like how much JavaScript do we need to know to work with Gutenberg and start using in client projects? Yeah. So ultimately I would think any developer who is using reprints professionally might need to make her way to react JS, um, sooner or later. So in May, 2019, um, I wrote an article for the WP Tavern create blocks without JavaScript.
And I compared two plugins on how they do blocks and how you can, as a WordPress professional developer can create blocks versus using your skills that you already have. Um, and the biggest one is definitely advanced custom fields. Elliot Condon has continued to enhance the plugin with blocks and block building.
Then there is one in the article's called block labs, and then other one is lazy blocks and they're all let you create a field and custom fields and field groups. And then, uh, give you the tools to say, okay, I want this as a block. And then with the PHP or theme template, or even a handlebar template, you can create the front end rendering.
Or if you need also the rendering in the editor. So those are three tools you can use that don't need you to create JavaScript. If you use ACF advanced custom fields, definitely get the pro version and five point. I think it came out of 5.8, 5.9 is now Elliot has just released 5.9 with the inner blocks that you can create your blog, but then you can let the.
Content creator add additional core blocks to that section that you just created. And that's pushes you even further into the block editor using blocks. And bill Erickson has actually wrote a nice tutorial on how to use inner blocks with ACF. So that's maybe a good starting point, but what you're saying is learn JavaScript, learned, react, at least to some extent, just kind of get started on that.
Um, there will only be more of it. Yeah, block labs got actually bought just recently by WP engine. And it's now marketed as, um, Genesis custom blocks together with the atomic blocks, former atomic blocks as Genesis blocks on the Genesis themes. So there's also a whole framework and environment that you might already know that.
Brings you along on the block editor and what I definitely like on all these three plugins was the input and export functionality. So you can make it easier to reuse your code or reuse the thinking about things. Yeah. So there is start down.
So this is. Technical question, but I wanted to ask you, um, the audience here is primarily WordPress agencies. Do you think basically Gutenberg all blocks makes it easier or harder for an agency to sell a WordPress project to a client? Is this a good selling point? Do you think. Definitely for someone. If they have clients that create their own content, content, creators love the block editor.
It's really amazing how far that has come. And if you use ACF, because you are in the mindset that you need to have clean data and you need to work with that clean data, that's certainly something you need to consider, but it's absolutely magic when you see your content creator. See. What they are building at the time, they're building it through the, what you see is what get an editor.
So migrating some of the fields into block pattern, some of the things into custom block is definitely a much better experience for a content creator. Most agencies that I know actually are not selling WordPress as a thing, they're selling a product . Definitely is ahead of a lot of custom management systems.
Yeah. And I think it would be a good opportunity for these agencies to also keep in mind those different faces that you mentioned. Basically they could say their customers. If we built this site on WordPress now with this Gutenberg thing that it now has like. Eventually you will have a way to have Google docs, style collaboration.
You'll have a multi-lingual side if you need it. Like that's a good vision to share with your customers potentially, I think. Yeah. Do you have any practical tips for maybe how to remind great your customers? Do you think people just get it or do you need. Some sort of education. Cause I know a lot of people kind of jumped to install the classic editor plugin when Gutenberg came out because they thought this might be a distraction or a disruption to their customers.
So I had two kinds of customers. One said, I'm never going to touch it. You do whatever you do with Gutenberg, but don't take away the classic editor. So we do hybrid methods. So if they want to do the classic editor do, but we, when we update their site on certain landing pages or something like that, we use the block editor.
They're all project managers who said, I don't care. Just install it or make it work. And we did adjustments on the. Brand colors. So they're not going wild on the color schemes with the background colors. And we made every block core block work in the scene. And after that, they are off to the races, they picked it up on it.
Um, if they had proper like, well, our team was able to show them how to do this, but we have one advantage where we do, that's kind of a policy, every. Customers gets the WP one Oh one plugin installed as long as we are working with them. And with the 90 day warranty that we have afterwards. And if they stay on the maintenance and update contract, they have that forever on their website.
So they can go in and read up about things. If they don't know things. Like media and texts is really something you need to think about how you're going to use it and put on the dials and kind of see how, what does that do when I click on here and that takes a while to get into it. And I know a lot of users have trouble clicking on buttons until they know what they do, because they have really the fear that they're set off a nuclear bomb, but something, and say, if I go in and edit an old post, or like, if a client goes into an old post that wasn't published with Gutenberg, Can you still be edited with Gutenberg?
Yeah. Yeah. So there are two things that one is the classic editor, but there's also in the blog editor of classic block. And that also is kind of a transitional thing, but it's also the block when all the old content is kind of in a classic block. So you have all the toolbars and it's one piece of content.
There is a feature, there is a congruence, two blocks. And that works well. So you can actually, when you're accustomed to I'm, I really don't want to go back and not be able to move paragraphs. I've been down with just the Iraqis. Well, add an image there. So there's converted to blocks status there. And now I saw a plugin and the repository that I keep testing.
So. Some of our clients have two or three years now, already with Gutenberg and they say, okay, can we make the seam now a little bit more modern? And all of a sudden you need to think about how does that old content that never got updated or converted to block look in the new scene. And there is a bug convert.
Plugin blog, convert blocks, I think is the name of it where you can say, okay, these are the old ones. It goes through the whole thing, and then you can change it. It's quite an interesting block. Yeah. You mentioned something else I wanted to dig into. So you said you made sure that all the core blocks, I don't remember which word you use, but worked with the theme essentially.
What does that mean to do that? Well, it means that if you have an image blank, that it displays well on your theme. If you have a gallery block that it displays well on theme that the quotes log and done. So there is a block unit testing plugin in the repository that you can install on a site. And then it creates one page with all the core blocks in different variations.
We went a different way because at the same time, That rich table was working on that we already were migrating that. So we put seven pages together with every block on it and then put it in a good hub, just because you can create a page and copy paste that in on the site. And then you see what works and what doesn't work.
Um, and you need to do some styling on that. So basically what you're saying is that each individual blog, when it's rendered into a page. Is it rendered as HTML and CSS classes? Yes. So what you did was that you rendered all those different blocks and you made sure that your styling or your CSS for your theme took into consideration the styling of each of those individual blocks.
Yeah. And the features of it. Yeah. So people like the Haber block quite a bit, and it has a features to do stripes or to have a background on it. Yeah. So those are colors and yeah. So you seem needs to be aware of that. And then if somebody puts stripes in that, that you actually just pay stripes, that's a simple way.
And image has two different styles that has an enormous style and a rounded style. And if somebody. Selects the rounded style. Do you think he needs to be able to handle that they have their own rendering by themselves, but that not always with an older theme works well. So you need to take care of that.
I really appreciated you taking us through all this. Gutenberg stuff. And I encourage people to follow your three letter Twitter handle. And you really are a wealth of knowledge when it comes to Gutenberg. And if people want to follow what you do, what's the best place for them to, well, it's definitely good and work times and subscribe to our news that comes out every week because that's where I share links to what other people do.
That's one place. The other place would be to follow me on Twitter, BPH or Gutenberg times, if you don't want to see my pictures and my other. Yeah. Sometimes I'm a little bit political and especially in this time or any private stuff wouldn't be at times is really focused on it. For agencies. We just finished a live Q and a Victor Ramirez who has a four level approach.
To customizing Gutenberg for clients and some of what we do matches what Victor does, but that's the last live Q and a and our YouTube channel. And, uh, we have quite a wealth of information on the good work times in the post. Was, uh, links to bill Erickson. He does a wonderful job sharing what he learned with other developers and other source of rich Teebo has, uh, quite a few tutorials on his blog.
CSS tricks is a good site to look up the keyword or category Gutenberg. So there are plenty of information out there that are all geared towards the developer. Yeah, that's awesome. Yeah. If people listen to this, they probably like podcasts. So Gutenberg change, luck podcasts. They can find that in their pod catchers.
Yes, absolutely. Thank you so much for your time. I really appreciate it, Peter. Thank you so much for having me. It was a great pleasure discussing this with you. Bye bye.