How to Take Advantage of the WordPress Block Editor Without Undermining Your Website's Design


The WordPress block editor opens a new frontier for empowering your marketing team to create the features you need. Shifting from a classic interface resembling Microsoft Word, the block editor – aka Gutenberg – gives users more creative freedom than ever before to build truly custom website pages. Armed with blocks constituting paragraphs, images, and other components, your team can build the features you need that much faster.

However, as summer blockbusters have taught us, with great power comes great responsibility. Your marketing team and content managers can have all the control over the content they need to meet your goals. Without guidance about how to use the block editor, your team may have the ability to create pages that are inconsistent with the rest of your site. You need to ensure everyone working on your website has the proper training and implement guardrails within your CMS that protect your design standards. Otherwise, even the sharpest website designs will break down in a matter of months.

You and your team may love the power of the block editor. But without knowing how to build an effective page, that freedom and flexibility can be a curse.

Why Content Teams Need to Understand Digital Design

No matter how recently your website was designed, the days of treating your digital presence as a resource that needs to be remade every few years are gone. New websites constitute a huge investment of time and money. With a purposeful approach to building the platform and by using modern web ops processes, your website can be built to last and evolve alongside your business.

The digital marketplace requires consistent publishing of blog items, case studies, or landing pages to suit your needs. To keep pace, you need to ensure everyone working on your website understands how to create content that serves users’ needs while remaining consistent with your design.

Depending on how your site functions, tools like a pattern library provide much-needed direction when it comes time to generate new content. But as your teams see the need for custom improvements, they can still get into trouble if they don’t understand how effective digital design works.

Here are a few best practices to allow your team to get the most from the block editor in WordPress. By sticking to these principles, the new pages your content teams produce won’t just be functional. They’ll play by the rules of your website design and brand standards, creating a consistent user experience across your entire digital ecosystem.

Your WordPress Block Editor Cheatsheet

You can build quickly and successfully with the block editor, but only if you understand its crucial foundational elements. Learn how to use each block to your (and your users’) advantage.

Know the Purpose of Every Page Created for Your Site

Before your team creates a new website landing page, they need to conduct the proper research. Ask yourself three central questions to better understand each page’s underlying purpose and context:

1. Who is this page’s intended audience?

Is the page you’re creating intended for prospective customers? Or are you targeting potential new hires or investors? Knowing what information your audience needs to receive and how it will then be used focuses priorities for the blocks you use.

For example, a case study page obviously targets potential clients by showcasing a firm’s previous work. But the page also serves an HR function by providing an example of the projects a new hire can expect to work on. Understanding both of these audiences helps you set priorities for your content and the types of blocks you’ll need to design an effective page.

2. How does this page fit into my broader site strategy?

Every new page or feature on your site needs to account for the audience journey. What pages have your users seen prior to viewing this page? What pages are you driving them to after reading this content?

Someone arriving to your site from search may not know the full story of your company, or what services you provide. Consequently, pages that rank highly on search results pages need to deliver different information than those targeting someone navigating from elsewhere on your site. Along with considering where your users are coming from, you need to design every page with an eye toward where you want them to go next.

3. What is the ultimate action you want a user to take from this content?

The results you want to see from a page should be the guiding light to inform your layout decisions. Whether you want a user to complete a contact form or subscribe to a newsletter, your content should be designed to supply the right information in the right order.

The answers to these questions should inform every decision your site editors make. But every new landing page requires further consideration to be successful.

Ensure Consistent Landing Pages by Communicating Your Brand Standards

The more hands you have working on your company’s website, the more difficult it is to maintain a consistent user experience. For example, an individual team member creating a new landing page may feel inspired to make a headline bright red to underscore its importance. But red isn’t part of your brand’s established color palette. Before a new page publishes and breaks with your site’s conventions, you need to have well-documented design standards in place.

Setting up your block editor with custom parameters can supply guardrails that ensure any blocks added to a page are consistent with your brand. With a design system baked in, your block editor will offer options that conform to your latest brand standards.

That’s the power. Now here’s the responsibility—even a well-curated block editor can still offer a level of freedom that will allow your site editors to make changes outside of your design guidelines. Before anyone follows their own path to create the website content they need, you need to ensure they understand your existing design standards and how the block editor works to serve them. This is where training from your agency partner is critical to get the most out of this tool.

Abide by Digital Best Practices

When your site has an intuitive backend interface like the block editor, your team can quickly publish content on demand, as the need arises. But your copywriters and content editors may not share the same levels of expertise.

One person may have a wealth of digital experience, while others may be more adept with print design standards. The types of content in your block editor will vary depending on your design, but every piece of content on your site should follow a few best practices.

  • Ensure content is scannable: Regardless of your target audience, every digital user has the entire Internet at their fingertips. Users want information fast and will leave if they can’t find it. Nested headlines, bulleted lists, and informative images effectively communicate to users – and to search engines – that you have the relevant, easy-to-find information they need.
  • Create a visually engaging page: Large blocks of text are daunting to the reader. Use blocks like columns, images, and hero banners to break up the page and generate more interest.
  • Provide a clear next step: Apply the answers to your pre-design questions from the previous section to establish clear calls to actions for your users. Place CTAs within your header, footer, and within the content of the page to make sure users don’t hit a dead end.

By following these content best practices, you can empower your team to take advantage of the capabilities of the block editor while also preserving your brand guidelines. And, better still, you gain the peace of mind knowing your website’s design will be properly protected in the long run.