zh
English Español Deutsch Français Italiano Português (Brasil) Русский 中文 日本語

Using WordPress Blocks to Free Your Content Team from Your Dev Team's "Backlog Jail"

English

Transcript

Introduction

Jason: Hi. Welcome to this webinar, another webinar about WordPress with David. Today, the topic is Gutenberg. Basically, dev teams have a backlog of things they need to get to and a lot of times those content teams have their ideas kind of stuck there, or the dev team does whatever they have on their plate. Today's talk is really around how Gutenberg helps to give that power back to the content team.

Sara, lovely to meet you, you were saying that you work with Gutenberg every day. Can you tell us a little bit about that?

Sara: We do. At the brandiD, we work with Gutenberg every day when we build client websites and we also have created some themes that use the block-first approach.

Jason: Luke... he's in Australia, it's 3 AM, he's got a big cup of coffee. And he's as close as I've ever got to meeting Mr. Gutenberg. 

Luke: Good morning. I don't know if I'd classify myself as Mr. Gutenberg, but yeah, I've been involved in the project for a little while now, since the early days. My day-to-day is for a plugin called Block Lab, which I co-founded in November before Gutenberg was released. Block Lab helps freelancers and agencies create custom blocks for their clients using just traditional WordPress templating.

Jason: David's going to give a presentation. He's going to allow and ask Sara and Luke questions to get the thing flowing. I think I can hand it over to you now, David.

David: I'm going to walk through some of the content here with some visual examples and really leaning out Sara and Luke to kind of help me fill in the details here. We're going to kick off. 

For those of you unfamiliar with me, I'm David. I'm on the senior leadership team at WP Engine. You may know me from a few of the projects I work on. I lead the Genesis business unit inside of WP Engine, contribute back to the WordPress community, have led teams that have built various plugins, including the Amazon AI plugin for WordPress, the Cloudflare Stream Plugin, which is a block-first plugin for videos.

What I'm here to talk to you today about is, of course, the Gutenberg editor, now called the block editor in WordPress, codename Gutenberg. This is quite nuanced, but really how do we leverage the new block editor to deliver on that promise of empowering content creators and kind of getting out of backlog jail?

What is a Website’s Backlog Jail?

To start, we need to kind of understand what does backlog jail mean? When I first joined WP Engine back in 2010, one of the first teams I led was our internal web team, the team that made and designed our websites.

We'd have an idea for a new type of landing page or web page. We'd meet with the designer. They'd make a wireframe. We'd have a meeting about the wireframe. They would ultimately create a design based on the wireframe. Have a meeting about the design. 

Designer would make tweaks, the developer would code the design. Then, we change our minds anyways as stakeholders. They would un-code and recode that design. At the end of the day, or probably three weeks worth of the time, we'd have made one new web page design. This is the process that I think a lot of teams live with in WordPress and beyond.

As we think about workflows like this, which I'm sure familiar to many of you, again the time needed to achieve one new design, one new layout, one new approach can be quite overwhelming and can slow down your ability to try new ideas. 

I have my own ideas and backlogs of development teams right now, as I'm sure many of you do, but what most of your time spent on the design project is actually waiting for your dev team to get to it.

In other words, you need those designers, you need those developers to help, well, so do a lot of other people in your org, and of course, they have their own tasks, like maintaining the website or adding new functionality or something like that. Your idea will often kind of get shuffled into the backlog and may or may not get the priority you feel it deserves, and of course, until it's worked on, you're sitting there waiting.

Luke, how big is your backlog on any given day, like dozens of tickets, hundreds of tickets, like where does that fall for you just in any particular project or ever?

Luke: It's a constant struggle to get on top of the backlog. I try to keep it to one page, but at the moment it's two pages. There must be like over 40 different items.

David: The other thing to think about is that, a lot of development teams, they're really wanting to push the edge about what they can do, meaning new capabilities, new integrations, new ways of doing things challenges them intellectually.  When you load up that backlog with a bunch of landing page tickets, this can often kind of drag down the team that develops your site because those aren't challenging projects for them.

I often call these soul-crushing landing page tickets because your advanced designers and developers are now just dying to code that next landing page for you.

Sara: I think as developers we live for figuring out the next big thing for development. But, yeah, the landing pages are just more like data entry.

David: If your backlog is full of landing page tickets, that can actually cause morale issues with your team, may lead to retention issues keeping those people around. Nobody likes being stuck in the backlog jail.

How WordPress Blocks Help Clear the Backlog Jail

Historically, WordPress has been a really good tool for escaping backlog jail. The reason why websites on the internet use it is because it's so easy to create content and has been historically. 

The classic editor or the WYSIWYG, as we used to call it, I suppose in the old version of WordPress, pre-Gutenberg, in my view, excelled at what I call Word Doc web pages. The classic editor has bold and the ability to put in shortcodes and widgets, but it really fundamentally isn't what we might think of when we talk about a page builder or building very complex types of web pages and designs.

In the video you're looking at here, the user is trying to put two images side by side, which actually should be a pretty easy task, but as you can see in the gif, this user is actually kind of having a really big problem with that.

Luke, you've actually also used this notion of Word Doc web pages in the past, why did that resonate with you?

Luke: You just look at the editor, that classic editor, and the whole metaphor that it's using there with the toolbar is straight out of Microsoft Word. 

So moving to something different like the block editor, it for me just opens up so many different possibilities. Just having the flexibility to break out of the box and go wider and just something as simple as that, really sort of opens your mind to displaying content in really fresh, bold, interesting ways. And it breaks you out of the Word text area box, which makes me really excited.

Jason: A lot of complaints I saw right at the beginning at Gutenberg was it's terribly limiting, and in fact, what I've just heard now is it's completely the opposite.

David: I believe so. I mean, the core blocks, which we'll get to here in a little bit, they're finite, right? There's only so many of them. So when people first started testing it in the early versions, they were like, "Oh, these limited number of things that are available to me don't really get the job done. So this isn't helpful." 

But WordPress is an open CMS and so providers or people that make products, like Block Lab and Luke here, help to augment that and make it more powerful. And then, we're also going to kind of cover a little later on is, your dev team can make blocks for you.

I don't view it limiting at all. As a matter of fact, I view the classic editor...as much more limiting. But, yeah, that first blush of, "Oh, what am I going to do with these, 50 or 20 blocks” doesn't really tell the whole story. Some of those early takes on it might have just been a little maybe uninformed as to maybe what was coming in and what the capabilities were.

Another thing that WordPress excelled at, pre-Gutenberg, were custom post types with custom meta fields. The easiest way to think about this is with an e-commerce site. This screenshot from SellWithWP.com is a normal WooCommerce page. We have a picture, an alternative photo, a title of the product, price, a description. And there's other metadata associated with this type of page or type of post within the WordPress context.

From an end-user content creator's perspective, these types of pages are very easy to edit. You're just going to go into the back end, there's going to be fields for each of these pieces of data, and you're just going to fill it in. Then, on the front end, the template will essentially style out the view, the design that you see here. This is really helpful for creating the same kind of page over and over again like e-commerce site or a directory.

But if you want to change the design, often in these types of web pages, your choices are very limited. You can change the picture, but you can't change where it's positioned. You can change the title, but you can't change it from, say, H2 to an H3. Those kinds of edits that you might want to do as an SEO or as a designer or as a content creator.

I think I already know the answer to this, but, Luke, you've used custom post types with custom metadata, I'm sure just thousands of times, right? This was core to your building before Gutenberg?

Luke: Yeah, absolutely. It's really taken for me a whole change in mindset coming to Gutenberg. As a WordPress developer and building our content, you start to think architecturally, what have I got to work with? 

I've got custom post types, I've got custom meta, and I can do templates. If I want to do some interesting content pieces, maybe I want to create three columns with an icon in each column and a button, well, how am I going to do that? Well, the only way I can really do that is to create a page template that allows for that and add some custom meta fields in there. 

That's always been how we've thought as WordPress developers. Gutenberg's allowed us to add this new idea, this new paradigm into our thinking and break different sections of a page template out into reusable areas blocks.

David: Yeah, that's a great point. This capability that we're seeing here on this slide, this notion of kind of a custom type of page or post with custom metadata, fundamentally changed how people viewed WordPress.

But the problem is that these are modular pages, repeating pages, same kind of design over and over again with different content. So even with these capabilities in core and the classic editor, your ideas, your new ideas for new designs were still stuck in backlog jail, you still had to go through that whole flow to get a new layout, to get a new design, to get a new piece of content that looked good and wasn't a hack job in the classic editor.

How does the new block editor help us escape from that backlog jail? I want to kind of walk through a little bit about how that looks. It's a blueprint on how to change mindset, but also how that connects back to how developers and designers already operate.

Gutenberg really completes, in my view, the componentized approaches your dev team already uses. I think this is important to understand because development and design teams have long used componentized approaches to building. Every time they make a landing page or a new design they don't just throw away all that code, throw away all those designs. Many teams will save those as essentially components that they can reuse over and over and over again.

Sara: Yeah, Gutenberg has allowed us to make that much easier to implement on the WordPress website.

David: This isn't foreign, this notion of componentized site building or page building. It's just that these snippets are kind of stored away in different methods by your dev team. 

Their design files again may be stored or organized in a certain way to allow those designers and developers to reuse that work and move faster. The only problem was that, unless you had a very specific type of page with very specific metadata, the end-user couldn't really customize on top of that.

How Gutenberg Helps Content Creators

What Gutenberg does, again in my view, is kind of extending this notion of componentized building all the way to the content creator. Now, the pieces of your web page are no longer componentized and usable only by designers and developers, but also by the content creators. 

Again, nothing foreign here, this notion of componentized building to your design and dev team, it's just that Gutenberg essentially allows them to connect that approach all the way through the content creation piece.

By using these approaches, what content creators are able to do is to leverage that componentized approach right in the page creation process. They can change how the title might be tagged, they can change the design, they can certainly change the content. 

The other thing that is I think really cool about these types of approaches is the fact that your content team, not only can leverage the components or the blocks to build a page, to design a page, to layout a page, but they can also inherit optimizations, integrations, and functionality your dev team has done.

Meaning that if they've optimized the blocks for SEO, if they've optimized them for speed, if they've added an integration to a particular block for whatever reason, or you use a plugin with an integration, like what we're seeing here with Yoast, every time your content team uses that block, they inherit all of those things.

The Yoast block we're looking at here is called a structured data block. This particular block is designed around creating essentially how to using schemas markup for schema.org markup for how-to content, and then essentially in certain views inside of Google.

I think as many folks know, that are regulars for SEMrush webinars, it basically enables that content to be parsed and displayed more easily or in certain areas within Google search results and other search engines as well. But this I think is one of the neat pieces of Gutenberg is that those blocks contain functionality integrations and optimizations that your content team can reuse and in many cases customize.

Is that something that y'all played much with, Sara, this notion of smart blocks or integrated blocks or functional blocks?

Sara: Yeah. That's part of the awesomeness of Gutenberg. Our content team is able to reuse blocks over and over again. But also from a client's standpoint, they're able to replicate the same design and functionality throughout the website that before would have been so hard for them to understand and to keep recreating.

David: I mean, the shortcodes help people embed functionality, which was neat like forums and stuff. But even just as you created the page, of course, you have the kind of pop up to the preview view to even see how that looked.

So in my view, Gutenberg really delivers, the block editor really delivers, a much more WYSIWYG like experience, what you see is what you get like experience than the previous way we might edit a page or add functionality to a page.

Jason: I think that's an absolutely brilliant point. I'd just like to cut in there with this, the Yoast idea and the idea of blocks. If you guys know Cindy Krum, she talks about Fraggles. The idea is you've got a fragment of content, a fragment of block or a chunk, which is what a Gutenberg block is, with a handle that Google can use to reach and get the handle and pull it out and put it in the search.

I've used the Yoast FAQ markup to maybe trick Google, not a fair word, to get featured snippets. And that shows: a, the power of blocks and b, the power of Yoast's particular blocks, for those who have questions.

I think what is very powerful I found there is that Gutenberg has empowered Yoast to empower me to get those featured snippets and get myself to the top of the rankings. 

David: I think that's a great story to be illustrative of the fact that Gutenberg isn't just a tool that enables you to create say, a new layout, a new design, a new type of content, but also enables you to kind of scale this notion of functionality integrations and optimizations where you don't necessarily have to dig into the code or use confusing shortcodes in order to build out a page that's more than just a design.

We implemented a similar approach a little over a year ago. Within the last 12 months roughly, slide's a couple months old, but our content creators made over 2,000 different landing pages, web pages, product pages, and they only needed a developer's help on 24 of them.

This means that the development team was able to allow the content team to basically go from idea to digital reality in one-day instead of three-week process, which freed up their backlog and allowed them to bring their ideas or their improvements on site to life faster by freeing up all those soul-crushing landing page tickets from their backlog.

How Developers Can Use Gutenberg

I think another interesting thing to point out here is that Gutenberg isn't just used by content creators to make new pages and new designs. Luke, do you use Gutenberg to actually make a new web page and design? Or are you going into the code every time you make a new web page?

Luke: No, no. I absolutely use Gutenberg to build out a new design. The ratio over time is going to increase with more web pages built independently because the more your developers build blocks the more they can be reused. 

Actually, I had a client recently who had designed a template for the home page that they wanted to build and they were asking me how long it was going to take to build out the template. I looked at them a little perplexed for a second and I said, "Here, come and watch this." We got onto their WordPress together and started a new page, called it front page, and we built out the exact design that they had in mind. Using Gutenberg alone, we built out this page template, the home page, for this client in maybe like five minutes.

David: Everybody loves an easy button. It's not just a tool that content creators use, it's also a tool that developers use to build and experience. So in addition to kind of freeing up the backlog from those soul-crushing landing page tickets, developers actually are using Gutenberg to move faster in the projects that they take on.

Now with all of this efficiency here, like we're not taking three weeks to make a web page anymore and the content creators are kind of doing it without a ton of help from the developers or the designers, you might think that we didn't need as many developers anymore.

Sara, did you hear this when Gutenberg was released, designers and developers aren't going to have jobs anymore?

Sara: Yes, yes.

David: Actually, don't lay off your web developers. You still need them even more now. As a matter of fact, when we implemented these approaches, we actually hired more developers. 

Now you might think, well, why did you do that if you didn't need their help on as many web pages anymore? The reason was because the work they were doing was more valuable. They were creating more components for those content creators to use and reuse more integrations, making them better. 

I mean, now the ideas are like, how can I come up with new components that the content team can reuse to drive value even faster? The work that both the content team and the development team are doing are more valuable and we're able to get those ideas, again from idea to reality, in a much shorter period of time. So for us, it didn't mean laying off anyone, but the exact opposite.

Luke: Yeah. I was just going to say that I love that you've empowered your development team to be proactive instead of reactive.

David: Oh, absolutely. They have their own ideas, the content creators are now coming up with ideas for blocks. There's still this exchange of ideas and technology between the developers and the content creators. It's just that the minutiae of building every single page no longer falls to the developers. So they are able to add new integrations and blocks, new scalable innovation in a way that drives more value than they did before.

I wanted now to shift gears into building your block arsenal, some tips for learning how to build blocks. The first one is to think about leveraging core blocks. 

Luke a minute ago explained how he built that page for the client using the blocks that come with Gutenberg inside of WordPress, or the new block editor if you would. And then, you can also leverage blocks that come from what are essentially block library plugins like Atomic Blocks, another one out there called Code blocks. 

These are kind of like what you might consider like premium block libraries. Basically, someone else makes the blocks for you and you use them, is the fundamental idea behind this strategy. 

The benefits, of course, you kind of get the blocks for free, you don't have to do a lot of work to use them, and then other people will maintain them. Meaning that, in the case of core blocks, the WordPress core team maintains them and; in the case of a plugin like Atomic Blocks, that team fundamentally maintains them, make sure they work with the new versions of WordPress, adds features and capabilities to them. So all of that maintenance work doesn't have to fall on you.

Of course, we talked earlier about the Yoast's structured data block, but there's lots of other blocks that come included with plugins. A lot of plugins will include blocks specific to them that you can leverage as you start building out a site. Watch for your favorite plugins, see what blocks they have included. Again, it's kind of free maintenance, that team creates them and maintains them for you so you don't have to mess with that too much.

Ways to Build Custom WordPress Blocks

David: You can also build your own custom blocks, 100% custom just for you, and there's a few ways to go about that. The first choice or our first option when we're thinking about building custom blocks is to RTFM, or read the freaking manual, and in this case the freaking manual is the Block Editor Handbook found over WordPress.org. 

You can follow the little URL link there at the bottom to access, to find the Block Editor Handbook. It walks through everything you're going to need to learn to basically build with blocks, including examples, code snippets, and things like that.

The next option is this tool called Create Guten Block that was made right when Gutenberg was released. It's again a developer tool really focused on building Gutenberg blocks, particularly with React, which of course that's how they're built. But it's kind of a neat build tool, if you would, for learning how to build custom blocks, something your developer can check out.

This is my favorite, especially for those without teams that are strong in React, and that's of course Block Lab. The way I like to think about it is it abstracts out the hard parts of block creation by allowing those kind of PHP WordPress developers to stay anchored in places where they're comfortable.

David: Nice. Thanks for that explanation. Sara, how did you learn to create blocks? Did you read the Block Editor Handbook? Did you try something like Create Guten Block? Did you put Block Lab yet? 

Sara: Reading the manual. I have not tried Block Lab. Advanced Custom Fields has an option now to create blocks, we've used that. But I'm definitely interested in taking a bigger look at Block Lab because, I mean, the whole premise of Gutenberg is to help speed everything up and make everything more intuitive. I think that using a tool like Block Lab instead of recreating the wheel every single time you need a custom block is much easier.

David: I think this is one of the kind of high-level meta issues...with the new block editor, is that for the most part, especially if you don't use a tool like Block Lab, your development team is going to have to learn the React JavaScript framework. And, for a lot of developers, that's going to be brand new to them and there's a barrier of entry they're learning.

Now, for all those React developers flooding out of coding schools these days, this is great news because how they learn to build is now more native and part of WordPress. But for a lot of WordPress development teams, this is brand new stuff. Tools like Block Lab help to bridge the gap between the technology that they may not have time to learn and how they're kind of used to building.

Blocks in WordPress Themes & Plugins

Exactly. So these are some of the ways you can start thinking about building custom blocks. First of all, of course, themes, the theme providers are embracing Gutenberg in how they build. This is one of the themes that Sara here makes with the brandiD, it's called Course Maker Pro. It leverages basically a block-first approach to the theme. The demo content loads in about 30 seconds using a feature in the theme framework Genesis called one-click theme setup. 

Basically, everything is ready to start editing in seconds, so including the content in these very intuitive block-based interfaces. It just is such a delight for the end-user to kind of switch between these long set of processes to live demo content than figure out how to edit all a little bits and bobs into this approach where it looks like my web page and I can change the design in really material ways.

Sara: We realized early on that Gutenberg was going to be an important aspect of building themes. We have one dev who that's what he does, he's converting all of our themes.

I can't tell you how many times I've seen people purchase a theme, customize it the best that they can, and it doesn't look anything like what you want it to look like. This way it's so much easier for the end-user to have what they thought that they were going to get when they purchased it. 

David: Plugin providers are also delivering what I consider to be some really cool options with blocks. WooCommerce is an example of that. 

Adjacent platforms are integrating with WordPress using blocks of BigCommerce as a plugin that essentially extends the capabilities of the BigCommerce e-commerce platform into the WordPress context. 

I mentioned earlier, one of the plugins that I've been honored to lead a team that ultimately built is this Cloudflare Stream plugin, which I think is a really neat example of offloading and integrations making blocks more powerful. Offloading is basically pushing work or data to another thing so that way your WordPress has less work to do and therefore your websites faster.

In this particular plugin, what it does is it allows you to use blocks to add videos to your site and those videos are stored in the Cloudflare video CDN and then are essentially lightning-fast for your users. This is just like one of the examples of offloading and integrations. 

What's next for the block builder? We're seeing rapid updates to the Gutenberg plugins. For those unaware, there's a plugin that's called a feature plugin. Basically, it has the future features for the Gutenberg Editor, but it's called the Gutenberg plugin. 

There's rapid development going on there, but I think some of the key areas for people to keep an eye on is the capabilities of adding the block editor to control header experience, the sidebar experience, and the footer. 

Also, this notion of a block directory somewhere how we might have a plugin directory that presumably would be available on Wordpress.org just like plugins. So that's it. I hope we have some really good questions lined up, Jason.

Can SEOs Benefit from Gutenberg?

Jason: We've just been talking a lot about development. I'm also an SEO practitioner, and that's kind of like three different communities who are all using Gutenberg, who can all benefit from Gutenberg. Today, we've talked a lot about development, we've talked a little bit about the content people with Sara. What about the SEO people?

David: I think there's a lot of benefits from the SEO perspective, even this notion of like I can implement schema markup without having to know a lot of code and have some level of confidence that that's going to be done right. Especially if you use plugins, say, like Yoast where there's kind of an informed point of view behind that technology. I view that as very helpful to the SEO community.

Having also spent time optimizing for search engines, I know that the SEO's relationship with code and with the site and with the content is very special. When people start messing with that relationship, people get anxious sometimes. 

It's the role of the WordPress contributors and committers to make sure that we kind of bring people along and kind of sort of kind of shoving them to the next stage. That's tricky business, but I do think there's a lot of value that is available to the SEO community through the Gutenberg editor.

Jason: Brilliant. I mean, what I hear out of that is there's a paradigm shift and we all need to adapt to that paradigm shift. Being developer-driven, what do you think, Sara, how can we get people within the content and the SEO community to accept this paradigm shift?

Sara: I think that part of it is taking it slow, making sure that everything is working properly, so when it's released it's effective and you get to see the full power of it, and that the product is a good product. At first, it was super scary, it was totally different from what we were used to. But the way that it's unfolded over the past year or so has really helped to encourage everybody to get on board with Gutenberg.

David: To me, once you realize this benefit and use them in production and use them on a new campaign and see that benefit, you can't go back. So for me, it's just about time to adaption. 

Jason: That's absolutely brilliant. So a lovely way to end is, we can't go back, we've got to look forward, everybody needs to embrace Gutenberg because it's not going away anytime soon.

Thank you for the questions. Thank you to the audience for being here and listening. Thank you, David, for the presentation which was brilliant. Thank you, Sara, for your contribution, loved what you were saying. Thank you, Luke, for getting up in the middle of the night, drinking so much coffee, you won't be getting to sleep anytime soon.

David: Thanks, Susan.

Luke: Thank you.

Sara: Thanks.

Jason: Bye-bye. Thank you.

All levels

查看本系列的其他网络讲座