Redesigning a College Website Using Gutenberg Blocks

What is Gutenberg and how does it affect design and development?

First of all, I asked our Lead Designer, Elliott, to have a stab at defining what Gutenberg is and how designing for the new editor differs from designing for WordPress’ classic editor.

Elliott: Gutenberg is a new WordPress content editing experience whereby pages are built from blocks, as opposed to previously where you’d be restricted by a template editor in the back end. And so this is quite “what you see is what you get”. However, you lay out the blocks translates into the front end forward-facing page.

It’s definitely a lot to get used to in terms of design because there are a lot of “out of the box” blocks that come with Gutenberg. So you have to just kind of understand what those are to then style them up for the dev team to build. Then you have to understand what’s not a standard block and what takes a little bit more work.

In the past, I’ve always designed it like, “this is a template, here you go, that’s what all your pages are going to look like”. So it was a bit of a challenge to kind of think like, okay, deconstruct the website a little bit, and then reconstruct it, if that makes sense. We’ve now done a few more projects with it. And it’s better. There’s still more to learn and WordPress adds more stuff quite a lot. But it was definitely a challenge at the start.

I also spoke to one of our developers, James, about the experience of building a site out of smaller component blocks.

Jon: We may have fiddled with Gutenberg blocks, and started to make inroads with them on earlier little sub-projects but I believe this is the first project launched where web blocks played a major part. I know that’s the case from the design team. Is that the case for you as well?

James: I believe, other than small side projects where we’ve enhanced the site with Gutenberg, this is the first website built with Gutenberg.

Jon: That’s a pretty major thing, right? Because before you’d be working with templates and stuff would have to be quite fixed. What’s changed from that method to this way?

James: Well, in the past, we kind of had our own version of Gutenberg where we could achieve a certain level of flexibility using ACF (Advanced Custom Field) repeaters. But it’s like using an external plugin that it doesn’t give us the flexibility of Gutenberg. And especially, it didn’t give us the visual aspect of the Gutenberg editor. With Gutenberg, you can now see what you’re putting together kind of in the back end before you click the ‘Preview’ button, whereas, with the old system, you’d have to fill in every input field before clicking ‘Preview’. Gutenberg means that you can move stuff around and it’ll change kind of in real-time. You can see more and get a better idea of what it’s going to look like before you click the ‘Publish’ button.

Jon: Yeah, it’s quite interesting, really, because I guess when the design team style Gutenberg blocks, they’re looking at what the front end user will see. But, I mean, Gutenberg is all about the editing experience, the fact that, as you say, you can see almost how these blocks will look on the final published page when you’re editing in the back end. And I guess that an extra job for you, in a way, is making sure that kind of looks attractive, or you know, something close to the end product, even in the page building experience?

James: Yeah, yeah. I mean, it’s certainly a little bit more extra work. But I think it’s worth it for that final product where you can just drag and drop stuff in. And it makes working with WordPress a lot more intuitive and fun.

What’s in it for our clients?

The stage that makes all the hard work worthwhile is handing the blocks over to our clients so that they can start building their website. I asked our Solution Architect, Nathan, to outline Gutenberg’s main advantages from a content editing and authoring perspective.

Jon: Well, I know with this project, we’re excited that it was kind of the first one where Gutenberg as a whole was kind of available to us to design and develop with. And we were excited particularly about what editing experience that provided for the customer as well. How do you think people got on with Gutenberg once we’d handed the project over?

Nathan: What I would say is that Gutenberg is what content authors and editors have been asking for, for years. Regardless of platform, the way in which Gutenberg works is what they have wanted and now have.

Any developer that installed ACF as at some point created some sort of advanced templating system that allows you to create components or blocks or whatever you want to call them. And really, Gutenberg is that same ideology being brought into core WordPress with a framework that we can just leverage straight out of the box. I mean, the big advantage is the restrictions are completely removed for content authoring. Our clients now don’t need to be able to understand templates or what templates they have available to them. Because if you want a header halfway down the page, you can just drop in a header halfway down the page.

And from a training perspective, Gutenberg just seems to click with a lot of people. You can see that they’ve used similar tooling, to some extent, things are pretty obvious in the main. I think once you wrap your head around the paradigm of what Gutenberg is, you’ve learned everything.

Jon: Yeah, as you say, you can’t really go wrong. It feels like Gutenberg is a similar advancement to how MS Word naturally formatted word processing documents so that they were ripe for printing. With Gutenberg, just the simple things of how, for example, hitting ‘Enter’ will give you a new block, it’s almost like it’s been made specifically for web editing.

Nathan: Yeah, 100%. I couldn’t agree more and just I think it’s actually quite an enjoyable experience. Because every time I use it, I feel like I’m learning something new. There have been times where I’ve had to write things like blog posts and before I would have written it in an external editor and then brought it into WordPress, but now I tend to write them directly into Gutenberg. Because it’s just so easy.

Too much flexibility?

Finally, I wanted to ask the team’s opinion on the pros and cons of Gutenberg’s layout flexibility from a content authoring perspective. It’s easy to see how such ultimate freedom can be an advantage. But could it also have the potential to worry or scare users? And is there the potential for new developments that could address these concerns?

Elliott: Yeah, so we kind of design all the blocks together, as an example of a page layout that you could build with the blocks – a typical example is like an about page or something. And this shows them what they can do with the blocks available to them. But then, obviously, it’s completely up to the client what they want to do with those blocks and how they want to arrange them on whatever page. It gives a lot of freedom to the client which sometimes can be daunting for them because I think a lot of people expect that it’s a case of we design it and build it, and that’s it, done.

Even from a development-centred perspective, James raised a similar concern.

Jon: So I guess before when you were building pages out of ACF repeaters, they were ultimately still a fixed template. Whereas now you’re going super-specific. You’re working on the individual things that make up those and then rely on the other end that people put them together in a nice order.

James: Yeah, there’s always the question “are we giving the client too much flexibility?” Because Gutenberg does give you extreme flexibility. But then it’s kind of having some form of design so that you can put together a site, and it looks okay and it’ll be a cohesive page. But in order to make something look amazing, you’ve got to kind of know, oh, if I put this here or here, and then some text here and a slider there, then we’ll have some accordions here, and then specifying the width of each item too. You kinda have to have some kind of design know-how. But yeah, it’s kind of the trade-off.

Jon: Do you think moving forward into the future, there might be ways of developing that do give you that kind of medium where we can almost provide borders within which customers can only put specific blocks in or that kind of almost restrict them to help them in a way? Is that the direction things might head in the future?

James: I think an interesting prospect that I hope WordPress core investigates is something along the lines of page templates [built from blocks] but fixed as a design layout. So you could select a template in Gutenberg and there’s a hero, some text, a related block at the bottom, and sponsors just underneath. And that’s one layer. And then the next layer is just a full page of text. The next layer is a crazy, wacky design that Elliott’s put together so that we don’t have to tell the end-user to go “Oh, so you have to put this block here and this block here. And also this will go here, and then just float this left and then put this at the bottom.” Yeah, that’d be really useful.

Jon: It’s funny how design has become a way to provide suggestions for a way to organise blocks. Because essentially, all you really need is a stylesheet that goes “here are all of your blocks”, but it’s part of that transition, isn’t it? It’s almost like part of the design’s job is the curation of blocks now as well.

Nathan: Yeah. Absolutely. And actually, you can see this being considered by the team behind Gutenberg as well. So there’s a feature that’s coming up which is called patterns. And that’s where you can group a collection of blocks together and save it as a pattern. And then that is almost like a reusable thing. So if you wanted to create some sort of really fancy author card where it uses a media and text block and a little circular image and some citation block or something like that, you can. And the foundation of Gutenberg is what makes that possible. And that, that just wasn’t there in a templated system, but in a block system, it is there.