The new WordPress block editor, known as Gutenberg, is the biggest change to the software in more than 15 years. Yet few enterprises have realized the full extent of its capabilities. Let’s change that.

The presentation is ideal for developers, marketers, project managers, and content creators who want to discover how blocks can help enterprise brands increase efficiency and accelerate workflows.

You will:

• Learn the capabilities of the new WordPress block editor
• Study real-life examples of custom publishing workflows that boost efficiency
• Discover how custom blocks can increase your organization’s production capacity
• Participate in a live Q&A with Big Bite design and development experts

Transcript

Tess Needham (00:03):

Thank you for joining VIP’s webinar, Gutenberg for Enterprise. At VIP, we’re really excited about the Gutenberg Project, it’s brought unprecedented agility to Enterprise WordPress. We’re already seeing our clients come up with blocks that allow enterprises to integrate branding, and to achieve custom functionality right in the WordPress Editor. So, we wanted to show off some capabilities of the Block Editor, and we invited our featured partner, Big Bite, to share some of their work with you. I’m going to hand over to Jonny, Big Bite’s Head of Design, and he can take it from here. Thanks, Jonny.

Jonny Waters (00:40):

Thanks. As Tess says, I’m Jonny, Head of Design at Big Bite. We’re a WordPress VIP partner, which means we’re lucky enough to partner with some great clients with WordPress, such as clients like Amnesty International, HSBC, Octopus Group, and News Corp, which we’re going to be showing some work from today. First, I’m just going to run through a few slides, just talking about Gutenberg, how we approach it, and then I’m going to show a couple of demonstrations of some sites that we’re currently working on at the minute. First, it’s going to be quite layout-heavy, talking about how we approach Gutenberg blocks, and how we might go about building a page, and then second, we’re going to focus more on using Gutenberg to improve editorial efficiency, with that we’re going to show some work that we’re doing with News Corp at the minute.

We are planning on having a little Q and A session at the end, but I should probably say upfront, this isn’t going to be a overly technical call or webinar, sorry. If you do have some technical questions, we can do our best to answer them. Also, we’ve got the chat window in Zoom, and if you did want to put in some questions in there, we’ve got Scott on hand as well, who might be able to answer some questions as we’re going along. So, I’m going to jump into the slide presentation now. Hopefully everyone can see that. Like I said, along with WordPress we work with some great clients, as mentioned before Amnesty International, News Corp, and Octopus Group, who’ve been kind enough to let us show some of the work that we’re working on with them at the minute as well.

I’m not a 100% sure what everyone’s knowledge is coming into this, of Gutenberg, so I’m just going to give a quick overview of Gutenberg. Gutenberg, obviously is the name given to the new WordPress Editor, it was officially launched December, 2018, last year, so it’s still a relatively new software. It was designed really to help create modern media-rich pages and posts. Big Bite is an agency, we’ve been a pretty early adopter of the software, and we’ve used it in a few different ways to varying degrees of success. The reason I want to show some projects that are work in progress rather than live projects that we’ve done in the past, is the more we use it, the more we improve our own process, constantly looking for improvements, and evolving the way we use the software, and the solutions we offer to our clients. Also, the platform itself is constantly evolving, with new features being announced all the time, WordPress 5.3 was released just last week. We can touch on that a little bit later as well.

In simple terms, the Gutenberg Editor is made up of different components that we call blocks, blocks can range from simple elements such as the title of a page, a paragraph, or a button, all the way to more complex components like you might find on more feature-rich websites like Gallery, or the Dynamic news page, for example. You can see a little GIF on the screen there, what we’re doing there is adding in a cover image, which has a couple of blocks predefined within that so we can set the background image, and then we’ve got an input there to add heading in. You can see a really quick example of how you could start pulling together a layout.

A good example of an early piece of work that we did with the Gutenberg Editor was for our client Amnesty International. I’m sure most people are aware of what Amnesty do, but just in case, they are a worldwide organization, human rights organization, and they operate in about 150 different countries across the world. Obviously, that means they have a lot of different websites, they have a lot of micro sites, landing pages, and they’re all loosely based on the same brand identity, but it didn’t all quite sit together as a cohesive brand. What we did is we worked with them to create a reusable framework, and that included about 25 different custom blocks, which means they can now internally build a website, or a landing page, or a micro site without our involvement. They would only really ever now come to us for new custom blocks, where you could develop that, and then ship that back into the core framework.

You can see the screenshot there, we’ve got the Gutenberg Editor on the left, and the frontend of the website on the right. Now, what we’re doing is we’re just adding a header in to a section banner, and you can see that quite closely it mirrors on the Gutenberg Editor what is shown on the print. This was one of the first major organizations to adopt Gutenberg. It is a really good use case, not only really here has it massively sped up the process of building a website, but now crucially all the sites are using that same framework, and they have a consistent look and feel.

So, that brings me on to talking about design systems, and design systems, as we probably know, quite a hot topic at the minute, with a lot of enterprise businesses exploring, developing a design system internally if they are looking at building out the website or product at scale. It’s something we’ve been tackling with our clients, looking at ways that we can implement the design system in Gutenberg. People are probably familiar with more commonplace design systems like Google’s Material Design, or Microsoft’s Fluent, for example, but you probably know more and more enterprise companies like Uber, Airbnb, Shopify, they’re all developing their own design systems, and they’re all striving for the same goal, which is essentially having a set of reusable standards, and components that change the pace of creation within their organization.

I’ve got this quote here from InVision, which says, “A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” I thought that pretty accurately and succinctly describes what a design system is, but actually if you switch out the first three words of that quote, it could also pretty easily describe what the goal of Gutenberg is, is they both follow pretty much the same principles. Gutenberg, as that says, is a collection of reusable components that are assembled together to build an application, or a product, or a website, and like I said, they all strive for the same goal, and they all adhere to the same principles, which are efficiency. Instead of repeatedly building similar components from scratch, Gutenberg allows us to reuse components, and thereby increase efficiency in building a website for a product.

Consistency, they both use a set of principles and rules to build components like typography, colors, padding, and we’re able to integrate these rules into Gutenberg so it becomes much easier for a site editor, or a content creator to create a consistent experience across different platforms. The final one, scale, increasing efficiency and consistency, as we’ve looked at, leads someone using WordPress to be able to build faster on its scale. Like I mentioned, with the Amnesty International project, they’re able to build a website now, within a week, that fits into their design system.

As I said, I’m going to show some demonstrations of project that we’re currently working on. This is a project that we’re working on with one of our current clients called Octopus Group. They have let us show some screenshots of their design system, and the current work in progress build of their website, and essentially they were trying to tackle the same problem that we were with Amnesty International. Octopus Group have a number of companies, and they wanted to bring them all together under cohesive brand identity, so they developed a design system. You can see some screenshots from that today.

We’ve touched earlier on a Gutenberg block can be anything, really, from single used components like typography or headings, so we can see the typographic scale being set here, and defined in the top left. We can see the different type of buttons that are defined also, or a block can be more complex components like a hero, for example, which is in the bottom left. A hero is actually a group of components that are grouped together so we’ve got a background image, we’ve got a heading, paragraph, and then a couple of buttons as well. You can start to see how you could group some of these together, define these elements in a Gutenberg environment, and start to build out the site.

Just before we jump into the Gutenberg Editor, I just want to touch on really four ways that we approach working with Gutenberg blocks, and developing Gutenberg blocks, so the first one being, working with the default Gutenberg blocks. So, if you went away and installed, say WordPress 5.3, you’ll get a collection of Gutenberg blocks that we can call base blocks. Like I said, there might be components like paragraphs, headings, images, lists, and what we’re essentially going to be doing is taking those components, and styling them accordingly with the rules that are defined in a particular design system. We could build out a simple banner like this, with a heading and a paragraph, and it will inherit the predefined styles.

The second one would be extending default blocks to enhance functionality and experience. This might be things like buttons or columns, where we could take the default Gutenberg blocks, and enhance them to add additional functionality. We can see there, we’ve got a slightly more complex layout, where we would define that it’s a two column layout. We’ve built a column builder that have set ratios, that we can have two different types of content side by side, and the rules of the grid, the padding, and the margins are all defined within Gutenberg. Then, the third one is creating completely custom blocks with, first of all, functionality, that is when you might have a block with very specific requirements. That isn’t something that comes with Gutenberg … out of the box, sorry, so you might need to dig into the React core base, and then build something up yourself. For instance, something like a Dynamic newsfeed, or the hero that we saw earlier on, and then the fourth one we’re going to touch on later, is advanced block development, where we’re going to get into some of the News Corp examples that I mentioned before.

I’m going to jump into the WordPress editor now. I hope one of the big takeaways that you can see from the WordPress Edit is it’s quite minimal, so there isn’t a lot of custom … in the past, WordPress could be full of custom fields, and things like that, whereas this experience is quite minimal. It really just focuses in on the content that you’re creating on the page, and obviously Gutenberg is inherently a visual experience to put together a site. You’ll see as we’re building it up, the backend of this closely mirrors what it’s actually going to look like on the frontend. What I’m going to do is just start adding some blocks. There’s a couple of different ways we can add blocks. I’m sure people have probably used Gutenberg already, but you can see that we can add blocks from here, or in the top left, or we can even use slash commands. As we go through this demo, I’ll probably start using slash commands more, just because it’s more natural for me to be able to do that.

I’m going to start by putting in section. We use sections, really, to group a collection of components together, that means we can apply a layout structure to that, and a grid structure as well. That may be something that is defined within the design system, so everything inside adheres to the rules within that container. It also obviously helps us to output nice semantic HTML on the front end, within this section I’m going to add in heading. You can see we’ve got a couple of different options, we can change the type graphic scale, and we can change the alignment here. Again, this is just using the base blocks that would come with any WordPress install, so we lie then paragraph, and again, we can change the alignment. You can see that the styles of the heading and the paragraph that we put in what was defined in the rules that we’ve put into the Gutenberg.

You can preview that on the front ends. You can see that the paragraph that we’ve put in sits within the containers. You can see that it’s in the wrapper of the page. You can see that we’ve also kind of pre-put in the header and the footer into the page. I’m not going to touch too much on the navigation elements because they, at the minute, are still set within the core WordPress menu system. There is talk, I think, of bringing that into Gutenberg, but as of yet we’re essentially just using the core WordPress menus. What we could do is we could interact with that section, and add some options in there. You can see on the right-hand side here, in the sidebar, we could add color to the background of that section, and we can also change the content width. Again, this then adheres to the rules that we have programmed into Gutenberg.

You can also see that we can change it as a completely different color, and if we do that, you can see that automatically the header and the paragraph changes a color to contrast against what the background is. Again, adhering to the rules that we put in, so that stops editors being able to, maybe manually select what color they think would work best on that. Like I said, it gives a much more consistent approach across content creation. We could also put in, let’s say an image, and again, that’s just a base block, but we could add a nice bit of style into it so we can add these corners in. You might thought to change the size of that so we can pre-define some sizes, and if we look at that on the frontend, you can see there that we’re starting to pull together the layout of the page quite quickly.

Then, if we want to look at more complex blocks that we could build, let’s look at putting in a hero. Again, this works in a similar way to the section that we talked about, where it’s a group of singular components within one block, but this time we’ve got some predefined inputs in there, so we’ve got heading, contents, and the bottom block as well. Again, we’ve got options around this where we can change the color, and you can see that the corresponding blocks within the group changed to match that background color. What I’m going to do with this one is put in a background image, I’ll just drop in an image to that, and I’ll just start filling out some content. We’ve got a heading and a paragraph there, and then we’ve got the button here so we can search for content throughout the website. I’ll put in this one to link to the About page, a text on that.

Now, I spoke earlier about extending blocks, and this is a good example of what we’ve done here is with this button. Now, in previous versions of Gutenberg, it wasn’t particularly easy to add, let’s say two buttons next to each other. What we’ve done is we’ve took that button block, and built a wrapper around that where we can add button settings, so I can then add a second button, and I can interact with that, because that is essentially just the duplicate of the button block. Let’s just say this goes to our story. You can see also that we’ve got some styles here, so we can change the style of that button, preview that and see that on the … The frontend of that, like I say, quite closely matches what’s in the background, but without really adding any much functionality. In the background to this, we can see that we’ve put together quite a nice layout here, with some kind of pre-defined animations.

We’ve got some basic content here. What I’m going to do is add another section in, and again, an example of something that we have took a Gutenberg block, and then extended that to add our own functionality, is what we’re calling the column builder. The column builder, as you might imagine, is going to put in some column rules within our grid structure. We’re asking here how many columns our row requires, let’s say in this example, two, and then we’ve got set ratios that, again, were defined in the design system that we have integrated into Gutenberg. We’ll go with this ratio, and you can see that we have two columns side by side, in this one let’s put in image, and to the side of it we can start populating that with some other contents. I’m going to put in some paragraphs, and again, we can have a button in there. This can go to the tech internships page, and we can even change the style of that button. Again, we’ll preview that page, and again, you can see how quick that is to make a layout.

This looks a little bit awkward that we’ve got this nice curved header at the top with the strip section. What we could do is reject the order of these blocks around, which is a benefit of using the section model because we can just get this, and jump that down so that it now goes underneath the layout that we created there, and if we preview that page again, see, that’s starting to look a little bit nicer. It’s probably worth mentioning at this point, we’ve been working on this project maybe about four months. At the time of doing this, one of the reasons we decided to extend the bottom block, for example, or make our own column block, is the base Gutenberg blocks for those two options didn’t quite have the functionality that we required for to build the layouts that we were looking at.

But actually, as of, like I say, last week, when 5.3 was released, both of those features are now actually in core Gutenberg. Like I say, you could go away and install a fresh version of Gutenberg, and as I explained at the beginning, it’s a constantly evolving software, so some of these more advanced things that we’ve been building separate to Gutenberg, are actually now in the core software. I’m just going to add another section in, and we’ll add a heading of latest insights, and then the just the final one, I want to touch on this is creating more advanced blocks. This, like I say, is digging more into the React core base, and building our own custom components. For instance, that was something like the Dynamic newsfeed card that we were looking at before. So, if I search for a block editor, and we bring in a Dynamic card, as you can see on the right-hand side here, we’ve got various different options for this card, and we can select post type from around the website, and we’ll bring in Insight posts.

You can see that it instantly populated that with posts from around the website. We can change the amount if posts that’s shown. We could even turn this into a carousel to show more than three posts. We could maybe change the display options. We might think … Actually we don’t necessarily want to show the tags there, or we don’t show the byline, and these are all defined as options that we can just turn on and off really quickly, same again with button styles, so that we can see that really, really quickly we’ve started to build out quite a nice layout. Hopefully, that gave us a good grounding on how we can interact with Gutenberg, and use it to build out fairly complex layouts. Like I say, with Amnesty, with a framework like this, that has that principles and their guidelines built into it, you can hopefully see how you could really quickly start building out a website at scale.

So, I’ve touched a little bit on block development with something like the card feed, or even the hero, but I wanted to just touch really quite briefly on some even more advanced block development that we’ve been doing, and really a good example of that type of work is what we’ve been doing with News Corp. Just to give you a bit of background on this project, News Corp across multiple publications are adopting Gutenberg as a digital publishing platform, so they are using Gutenberg as a base editor, but collaborating with agencies like ourselves, or other WordPress VIP partners to develop a custom set of components built on top of WordPress that we’re dubbing NewsPress. This enables us to build Gutenberg extensions, plugins, components that can be shared across various platforms like The Times in the UK, or The Wall Street Journal in the US.

The primary platform that we’ve been working on is The Times in the UK. I’ve got a screenshot here of an article from The Times, and unlike Octopus, where when we’re interacting with Gutenberg it’s focused on layouts, and building layouts, this is kind of the opposite, where the layout is quite rigid, predefined. We’re essentially using Gutenberg to speed up the process of creating content. All of the tools that we’re building is really to increase efficiency in building Outlook post just like this. You can see that this is a football article, so we’ve got some different types of media embedded within that. Obviously we’ve got images, but then we’re also bringing in data from external sources, so we’ve got match statistics, we’ve got league table, and we’ve got related articles at the bottom, which I can also touch on. Again, I’m going to jump over to the WordPress Editor, and like I say, you can hopefully see this is quite different to the Octopus example actually because this is less focused on creating layouts. The layout is quite predefined, and we’re essentially just getting the journalist or the editor to just focus in on the content.

You probably see in a normal WordPress install, we have the heading at the top, the requirements for a website like this for The Wall Street Journal is an article wouldn’t just have one headline, it might have multiple headlines that are displayed in various different places across the website. We’ve got our headline here. We’ve also got an input for the stand first, which we can put in, which is just below the title, but then we’ve also got this multi-title approach, where we could change the title. Let’s say we wanted to add some more SEO keywords, we can, or we can add a short title. Again, they might be displayed in different places across the site, let’s say a sidebar where it wouldn’t be able to fit in the full headline, it just want to show the short title. We’ve even, in some cases, added a word count in here, with a similar experience to Twitter, where it gives you a word count, and an indicator if you’re heading over that word count.

Coming into the article, we can see we’ve got an image here, and you can see we’ve got the get image banner at the bottom, again, in the spirit of really fast, efficient editorial workflow. We don’t want someone to interact with that image, take it away from the article, maybe in a Photoshop or something like that, and get rid of that banner, or even jumping into the WordPress Image Editor, so we’re building a suite of inline tools like, let’s say something where we can just crop the image. We can just really quickly get rid of that, save the crop, and insert a new image in there. This is part of a suite of image editing tools that we’re doing, this is just a really easy example of something that we can do inline.

We also saw in the screenshots there were various data sets that were brought into the article. Again, these are all [inaudible 00:31:13] on third party environments, again, we don’t want a journalist to leave this page, find and embed, bring it back in, and then embed it. We’ve integrated all of this data into WordPress so we can just add in a block, and we call this web components. We’ll go into that, and you can see all the different web components, and data sets that we have in the Gutenberg Editor.

We can go into football, and let’s see match stats, and then I can search for the game that this article is about. In this case, it’s a Manchester United match report, so I’ll just find the game, and you can see that the stats show there, and we bring that into the article. We can do this for various different things. Lets say we wanted the league tables, and there we go, within seconds we’ve got the league table. It’s obviously visible in the Editor as well so you can start to see how you can quite quickly put an article together. This could be various different things, for example, let’s bring in a audio feed of a podcast player, we’re bringing in that, view that, and you can see the podcast feed. Again, with Gutenberg being a visual editor, we can interact with that, we can play the podcast [inaudible 00:33:06], and you can hear that directly in the editor.

Speaker 3 (33:12):

Hello.

Jonny Waters (33:12):

Then the final thing I wanted to touch on is related articles. Again, this could be quite an efficient process of a journalist going away from this article, finding articles across the website that would relate to this, and really we just want to bring that entire experience into Gutenberg. We’ve got a search bar that we can interact with here, so let’s take in Manchester United. We’re dealing with some legacy data here, but we’ve got 20 search results of articles, so we can quickly go through. Let’s have a look at this one, and then it can quickly preview the article, it can even have a quick read of it, see if that’s the right context for this related post. We can add that in. Also, as I’ve said about bringing external data sets in, we could even look at the analytics from a post. We can look through that, see if that post is performing well at that end, and then these are the posts that will be displayed at the bottom of the article.

So, that kind of touches on a couple of things that we’re doing editorially with Gutenberg, and hopefully that gives you a bit of an insight how powerful Gutenberg can be, and has the potential to massively improve efficiency with your content creators. Hopefully that gives you a bit of an insight into the power of the platform, and how it can be a benefit to your organization. Like I said, I’m happy to answer any questions you might have of what you’ve seen. Also, the guys at AutoMake might be able to chip in with any platform-specific questions. If you wanted to follow up with any questions on email, you could get me on email at jonny@bigbite.net, or like I say, you can follow up with any of the guys at AutoMake, so thank you.

Tess Needham (35:36):

Thanks so much, Jonny. We have … I know that Scott has been getting to some of them as well. Also, if anyone wanted to ask a question live, you can raise your hand on the webinar, and then I will be able to allow you to talk when I see your hand raised. Jonny, would you like me to call out some of the questions that have not been answered yet?

Jonny Waters (36:00):

Yeah. I know Scott was answering some, so if you want to give me a little recap on what’s been discussed as I’ve been going through, because obviously I wasn’t paying attention to the questions.

Tess Needham (36:12):

No problem. There is one … I’m just trying to go back to the start, I know some of them have been answered already. Michael was asking, “Do you find that Gutenberg limits the abilities of designers and developers to create a custom page or a visual feature within the page?” He was saying the custom HTML block has issues and limitations, so they found Gutenberg to be limiting when trying to implement something not built into our design system and custom blocks.

Jonny Waters (36:42):

Okay.

Scott (36:42):

My views on that, I know the custom … We don’t really use the custom HTML block too much. We do do a lot of customization, so we are doing a lot of custom blocks, the Octopus Project that Jonny’s demoed, a good chunk of that is custom. We’re custom building the blocks to fit the design system, which takes a bit of time at the start, but then it’s very flexible in the future. It might take a little bit of time for engineering to build that up in at the start, but it’s very flexible, especially for a bigger project to extend blocks in the future. A lot of it is reusable so … I think it just-

Tess Needham (37:28):

I see that Michael just raised his hand, so I would just allow him to talk if he wants to add anything else to the question. Hi, Michael.

Michael (37:35):

Hey, can you guys hear me?

Tess Needham (37:37):

Yup.

Jonny Waters (37:37):

Yeah, yeah, go for it.

Michael (37:38):

Awesome. I think the main pain point that we experience here is in a pinch, when executives ask us for something and we’re trying to turn it around quickly, and it’s not something built into our design system as a block or something, and we can … if it was just HTML CSS then we can just build it quickly, without Gutenberg we can do it, within Gutenberg it can be challenging, particularly when we’re using templated pages, where the nav and footer are pretty built, and we’re just trying to customize something between that. It’s a matter of trying to turn something custom around quickly, is where we have gotten tripped up. We’ve only been on live for about three months on WordPress VIP with Gutenberg and everything, so we’re still fairly new to it, but that’s been one of our pain points early on, setting aside all of the great things that we’ve been able to achieve with the Gutenberg blocks.

Scott (38:30):

Yeah, I understand. In that situation, we have a little base block that we quickly fire up, that we can … it basically got really bare bones attributes, and then some markup in that we can just quickly jump into, and then we’ll just quickly, maybe just took some HTML CSS in there. Then you’ve got the flexibility of a block that you can put anywhere, but it might not be particular dynamic at that time, it just illustrate a particular piece of functionality, or something maybe for demo or something like that. That might be useful, but I understand that it is a bit more, there’s a bit more Bootstrap involved at the start, a bit more, like I say, a traditional HTML, but I think [inaudible 00:39:18] like the flexibility and the power of Gutenberg, like the block [inaudible 00:39:23].

Michael (39:25):

The reason I was raising my hand was actually separate than that previous question. It was that, seeing some of the blocks and the different implementations of Gutenberg, and the design systems on this webinar was actually really helpful for me, as I’m trying to plan the ongoing development of what blocks we need and how it could help us. Is there anywhere where I can see a bunch of different examples of different companies, and blocks that they have built for different purposes? Just so that I can start getting ideas of different ways that I can have Gutenberg evolve for our needs.

Jonny Waters (39:57):

Tess, you might be able to answer that in a more global approach. I think Scott, just quickly looking through the comments, I think mentioned that we developed our own open source theme called Benenson, which you could maybe look at, which has a couple of things that I might have touched on today. In terms of the wider open source community, I don’t know, Tess, if you have any more thoughts on marketing.

Tess Needham (40:27):

We’re definitely … it’s a goal of VIPs to share more examples of what our clients are doing with blocks in the near future, so look out, watch this face, I guess, but we do have … Yeah, we have a few resources that we’re going to be sharing, and we hope to strengthen those. There are already a few, if you look at WordCamp talks and things like that, you’ll see some examples of those already as well. Feel free to reach out to us as well at WordPress VIP, we can send you a few links.

Michael (41:01):

Awesome. Very much appreciate that, and appreciate this whole webinar. This has been helpful.

Tess Needham (41:05):

Thank you, Michael. There are a few other, so Thomas … Actually, I’ll just go to this, there is a Q and A box as well, that just has one question in it, from Samuel, just asking if those are all default Gutenberg blocks.

Jonny Waters (41:23):

I’m assuming that we’re talking about the Octopus blocks there, and no, like I say, a lot of them would be default blocks, but the more, kind of like the single use ones like heading, buttons, paragraphs, images, whereas with that project, anything that we saw that enhances the layout, like the columns or the hero, would be more custom-built. But like I said, even since we’ve started working on that project, the core WordPress has caught up to where we were with that, so with 5.3, the enhanced column builder is actually much, much improved now. Also, the buttons block, we can do things that we’ve been doing there where we can have more blocks next to each other. I’d encourage everyone to get the latest version of Gutenberg and start playing about with the blocks in there.

Scott (42:21):

I definitely agree with that because all the time it’s moving so fast. We started this project, what? Three months ago?

Jonny Waters (42:28):

Yeah.

Scott (42:28):

Already stuffs in there that we’ve already been thinking about, so definitely it’s moving on really well. I think it’s a lot more user-friendly now as well, the latest release is great.

Jonny Waters (42:41):

I’m conscious there is quite a lot of questions in here that I’d like to get to, obviously … I don’t know if we can get a copy of these, and I can type out answers in the fullness of time, or should we just keep going and pick them one by one?

Tess Needham (43:01):

I’ll definitely give you a copy of them in case we miss any, but feel free to go in and pick out some to answer as well.

Jonny Waters (43:07):

Again, I’ve put my email in there, so if you want to throw some questions at me over email, I can get back to you, or Scott can get back to you, or someone else from our team can get back to you as well. Is there any other ones you want to pick out in particular?

Tess Needham (43:26):

Let me have a look. There is one here from Thomas about whether there are any pros or cons on using Gutenberg versus Elementor, if you have any experience with Elementor, or I guess, other page-building plugins as well.

Jonny Waters (43:44):

To be honest, prior to this, I was more using advanced custom fields to build sites, and I think that was a lot, the way it was going before Gutenberg. I know there was page builders out there that do similar things, I personally just never really got on particularly well with them. I do find it much more comfortable to build out a layout with Gutenberg, and obviously it gives you that much more visual editor than something like advanced custom fields, which obviously I was really used to using before. I don’t know if you had any more experience.

Scott (44:22):

I’ve used a few of those page-builders before. I think we were trying to fill a void, but I think Gutenberg does that now anywhere. Also, from a developer point of view, there’s such a community behind the Gutenberg Project. Everything’s moving so fast, I just think it’s really the way to go, and obviously React-based or resource-wise, there’s just so much resources behind it.

Jonny Waters (44:48):

Yeah. There is a question there actually about documentation for the block editor being pretty poor now compared to Codex tips for documentation in Gutenberg. I know we’ve definitely came up with a case that …

Scott (45:04):

Yeah, I think it’s difficult because Gutenberg’s moved along so fast, it’s hard to keep the docs up to date, especially some of our key concepts, but I think it’s just a challenge, but it is getting better. It is getting better as well.

Jonny Waters (45:20):

Yeah, a lot of times we’ve dug into GitHub files, and looked through different ways of other people … other people who have approached it.

Scott (45:34):

Yeah. Often we’ve just … Well, personally, I’ll jump into the core code and look for the filters. It’s just experience, the more you do it, the more you pick up.

Jonny Waters (45:50):

I don’t know if that’s a particularly great answer, but I think the documentation is getting better.

Scott (45:51):

It is getting better.

Jonny Waters (45:52):

It is getting better.

Tess Needham (45:53):

Would you suggest also, maybe trying to become part of the open source project, like tap into what the Gutenberg team is doing directly? If you have the resources to do, that would be a good way to keep up to date with all of the latest developments.

Jonny Waters (46:06):

Yeah, absolutely. Absolutely. There’s other things like making WordPress Slack channel, if everyone’s in that, that’s a really good resource, because obviously that’s just a community of everyone that cares about WordPress, and is moving WordPress forwards. That’s probably quite a good place to go to if you have quite specific questions, chances are, there’s going to be someone in that Slack community who will be able to answer that. So that’s making WordPress the Slack channel.

Tess Needham (46:39):

This is a kind of related question from Grant about whether there’s an … if there’s an issue that its encountered while using Gutenberg, the best way to report it, if you find a bug, I guess.

Jonny Waters (46:50):

I think generally GitHub.

Scott (46:52):

GitHub issues, yeah. I think it’s quite active on there. It’s probably likely somebody else has come across a similar thing, so yeah. I mean, whenever I’ve had issues there’s always been … it’s been looked at pretty quickly, depending on the thing, if it’s more of a crucial change, like a core change, it might take a bit more time, but yeah, [inaudible 00:47:12].

Jonny Waters (47:11):

There’s a question, “Can I still choose to switch between visual and text on a post if I want to customize the HTML?” Yeah, you can do that. I think there’s limitations on what you’d be able to do technically with that, but you absolutely can switch to HTML view of any block.

Tess Needham (47:34):

There was one other question here that might be interesting, that if each of your blocks … it’s from Benjamin, “So if each of your blocks are modular, how many CSS files are you loading on the frontend? Does each block get its own style sheet? Are you bundling style sheets for all blocks together when you deploy?”

Scott (47:50):

Yeah, so how we do it is we normally have a CSS file, CSS file per block, and then we bundle them together. For the editor, sometimes you need to make a few tweaks in the editor because we try and keep the editor located as much as frontend as possible. Gutenberg, because its React needs to add extra markup here and there, so we have a separate editor file just for overrides, like little tweaks for blocks, just to make them maybe a bit more like the frontend in the dashboard. That’s how we approach it. You can do conditional loading if you split up your CSS files, but most pages we have we want the ability to have any block on any page so we need all the styles anywhere. That’s how we approach it, we use a BEM methodology for naming blocks as well so there’s no conflicts, but it’s probably getting a bit technical for this kind of talk. If you want to ask any questions on that, feel free to email Jonny or me, and I can get back to you on how we approach that.

Tess Needham (48:59):

Thanks. There’s another question from Amir, about how do you handle saved blocks by changing them in the future. I’m not sure, Amir, if you mean the actual code or reusable, I’m not sure if it’s … but I think probably reusable blocks.

Jonny Waters (49:14):

Yeah, probably. Yes, I was going touch on reusable blocks actually because, for instance, I didn’t do it there, but there was … We’ve got that card one that I showed on the Octopus Group one, there is a custom card as well, so that dynamic one, for instance, brings in a newsfeed from a post type from around the website. You can build up a custom card using individual components, so if you got a layout or you got a layout on the page that you were happy with, and you want to use it somewhere else, you could use that. You could save that as a reusable block, and then bring that in on another page, and there is a few drawbacks to that, at which the-

Scott (50:03):

Yeah, reusable block, we don’t do too much just because our block, the block’s reusable in itself. It’s more like if you had two blocks, say a heading and a paragraph, and that may look like a call to action, for example, you might group them together because it’s just a simple thing. I think if it was more complex kind of component, you’d actually make that a block in each one, like a gallery or a carousel, and that would replace the need for a reusable blocks, kind of functional. It all depends on use case, like for simple core blocks that you want to group together, I think reusable blocks is good.

Jonny Waters (50:46):

There’s a couple more Q and A coming in there. So, “If we have a blog and we change it up at Gutenberg, is the old content [inaudible 00:50:54] compatible?” Yes.

Scott (50:56):

Yes.

Jonny Waters (50:59):

Obviously, you can update to the new version of WordPress, and you can still have the classic editor installed in there, so you can switch between Gutenberg and the classic editor as well.

Tess Needham (51:10):

I’d just add on that, Jonny, as well, that we, so at WordPress VIP we developed a plugin called Gutenberg Ramp, and that allows you to selectively enable Gutenberg on certain post types, or just individual post IDs as well. It gives you the opportunity to really just try out Gutenberg on just one post to start with, and then you can sort of roll it out across your website, so that’s a good one to check out, is Gutenberg Ramp. Also, that if you do switch to Gutenberg, that your old post, the old post that you wrote before, there’s a classic editor block, so that content will automatically be converted into a classic editor block, and will retain all of the formatting.

Jonny Waters (51:52):

Yeah. Benenson is open source, completely open source. I don’t think there’s any plan to have a premium version, but we probably do need to expand on Benenson, and make some improvements for it.

Scott (52:07):

Yeah, I’d say we’ve got a few blocks that have to go in there, that we’ve developed recently. We just need the time to just get them in there.

Jonny Waters (52:14):

How do blocks look and work on mobile? It falls into the grid structure stuff that I was talking about, and obviously all of the stuff that we’re doing on that Gutenberg view that you’re seeing is desktop look. The CSS works in such a way that everything kind of responds on mobile anywhere. We have done a little bit of work in creating a plugin that shows you the mobile view within the Gutenberg editor, which we’re going to be expanding on. We just don’t have that quite ready yet, but that’s probably something that’s quite useful, actually building out a page, it would just be a toggle that shows you how that page reacts to a tablet, and more about sizes.

Tess Needham (53:12):

There are a couple of questions about decoupled, whether Gutenberg works well with a decoupled, or a headless CMS using things such as Gatsby.

Scott (53:23):

You can do this.

Tess Needham (53:24):

Yeah, absolutely. Yeah, that’s something that we’ve done a couple times on projects, not something obviously that I’ve shown today. Obviously we didn’t quite get into the technicalities of the times skills, but certainly it’s something that we’ve looked at in some client projects.

Scott (53:44):

Yeah. I think there’s a guide online that I followed for doing headless with Gutenberg. I could share it [inaudible 00:53:51]. Certainly some people are doing that.

Jonny Waters (53:54):

I think that might be all the Q and A ones.

Tess Needham (54:00):

Oh, Amir just clarified his question. We thought that it was about reusable blocks, what he meant is when you create a block with React, and you save and publish it, and then maybe you need to change it and add something, and what happens with the data in WordPress? I guess, yes.

Scott (54:18):

For me, how this world is if your block changes you can add deprecations as attributes into the components. What you do is if any attributes have changed, your deprecations have your current attributes, and you put your new ones in your blocks. You can put everything, all the old button deprecations, and it will gracefully fall back, and it’s quite helpful, the errors, so if you get any deprecations it will tell you, and you can just debug that. You might … Most of the term we’ve made, we had a couple of deprecations, a few attributes here and there, but that offers a flexibility to offer … Basically all it does is it goes into the block, and it will just go back until it finds a suitable one, so you could have as many deprecations as you want. Hopefully that answers that question.

Jonny Waters (55:07):

There’s a question there about migrating with themes with advanced custom fields. That’s quite a difficult one probably to answer right now, but I could definitely follow up on that, because that’s definitely something that we’ve encountered over the past couple of years working with Gutenberg, and typically still encountering. So, if I can follow up on that or you could drop me an email on that one, I can write out a response to that.

Tess Needham (55:41):

Thank you. I think … Oh, yup, I think that might be all of the questions. They were coming in a little fast there at the end, so hopefully we caught all of them. Thank you so much, Jonny, and Scott, for running the webinar, and thank you everybody for attending. WordPress VIP, we help enterprises realize the power of the open web, where we handle all the infrastructure, the performance, the security at scale, so our clients are free to focus on what matters to them. We are really excited to talk to you, please get in touch with any questions about the webinar, any questions about WordPress VIP. We’d also love to hear any suggestions of topics that you’d like for future webinars. We’re planning on running a lot more webinars, so please get in touch with anything that you would like to see covered. Thank you everybody for joining, and have a great one.

Jonny Waters (56:38):

Thanks. Bye.

Tess Needham (56:38):

Bye.