How We Redesigned Our Website With the Full-Site Editing Features in the Gutenberg Block Editor

For enterprises leveraging content marketing to fuel growth, agility in their CMS is key. When content creators need to use design or development cycles to make updates, businesses fail to keep up with the demanding pace of producing quality content.

Since WordPress 5.0, when Gutenberg’s block editor was released, each successive release has brought more power to the content editing experience.

In previous versions, blocks were used to edit posts and pages. Now, with WordPress 5.8, blocks can do even more, including editing headers, footers and other elements of the full site which sit outside of individual posts. These features are collectively referred to as “full-site editing.”

Like many enterprises, WordPress VIP realized our content was becoming increasingly important to our business growth, yet we struggled to get content into the world in an agile way.

When we recently redesigned this website (wpvip.com), building it with full-site editing features in the Gutenberg block editor was a no-brainer. Our previous theme was not Gutenberg-enabled, relying heavily on metabox fields outside the post editor to create content. Creating new pages was clunky and slow, and it was difficult to preview new content before publishing.

The challenge? No enterprise website had done this before. The features we wanted to use hadn’t been released into the core software yet. We’d be navigating uncharted territory.

For the new site build, we partnered with WordPress VIP partner Athletics to bring the vision to life. Jameson Proctor, Athletics’ Executive Digital Director, leveraged the brainstrust of WordPress’s open source ecosystem for this pioneering development.

Jameson and WordPress VIP’s Design Director David Bowman recently joined me for a chat about the new theme development—and why it’s such a game-changer for enterprise WordPress. Below are highlights from our discussion.

---

Why was the WordPress VIP website redesigned?

David: We’ve ramped up content marketing efforts. We’re putting a lot of energy into making good content to drive leads. The site needed to be designed in a way that would surface this content all over the site, to make it more findable and drive more folks to it.

We also knew we needed to make the content creation process a lot easier, a lot quicker, and a lot more agile. But this agility needed to come without losing governance over the design of the page. As an enterprise, we don’t want to use the block editor as a design tool in itself; but we want to be able to use our brand’s design system in the block editor.

Why use the Gutenberg block editor’s new full-site editing features?

David: When we decided to rebuild the site, we evaluated our processes, our workflows, what we wanted our site to do and how we wanted it to perform for us. There were many options to achieve our goals, but we really wanted a very WordPress native way. We didn’t want to rely on a third-party tool or plugin.

Full-site editing brings the predictability, control, and agility of the block editor to the rest of your web experience.

David Bowman, WordPress VIP

The same awesome control that you had in the content of a page or the content of a post, you now have in your header, in your footer, in parts of the site that were previously locked away behind usually a dev cycle.

Jameson: Some other ways to implement a modular, flexible approach to content in WordPress are pretty clunky and feel like bolt-ons. Others are really clever and performant, but they still don’t feel like native WordPress. Full-site editing, on the other hand, brings ease of use and the power of the block editor to your entire theme. Not just posts, not just pages, but to navigation, to archive templates, homepages, etc.

The other thing that it brings to your theme is the power of React. I can’t think of a better way to implement flexible, modular content than with the JavaScript library that’s purpose-built for componentry. We were really surprised and delighted by the amount of JavaScript (as opposed to PHP) we were writing when we developed this full-site editing theme.

Design systems and the full-site editor, and obviously the Gutenberg block editor, are a perfect match. You’re able to really bake governance into the content creation experience through local styles and block controls, while also allowing content creators to remain agile and move at the speed of business.

What should people know before embarking on a full-site editing project?

Jameson: We were developing the site before any full-site editing features were released in the WordPress core software, so we worked with the most up-to-date set of features by installing the Gutenberg plugin. That meant that we needed to embrace the idea that the ground was changing under us as we worked. As full-site editing features get finalized, most of the issues we encountered will go away.

The great thing with WordPress is that there’s such a rich, robust community involved in the project. It’s not that difficult to find answers to the challenges you’re facing.

Being able to develop for the enterprise while also having the interaction and support of a really broad diverse community is an amazing combination.

Jameson Proctor, Athletics

Working on the bleeding edge of closed source and proprietary platforms is much more costly and difficult.

Any final words on the implications of full-site editing in the Gutenberg block editor?

Jameson: We’re creating this amazing ecosystem of collaboration between designers, content creators. As that continues to evolve, the power it’s going to unlock for organizations is something to reckon with.

---

For more of our discussion, watch the Gutenberg block editor full-site editing webinar now.

And stay tuned for a wrap-up of answers to all the questions we received during the broadcast.