For Designers

The new editor gives everyone the option to design and edit more of their website, all from inside WordPress. While work continues towards enabling the creation of truly flexible websites using the editor alone, it’s possible right now to create small brochure-style websites without too much effort or 3rd-party plugins. Most importantly, the editor is genuinely fun to use!

Here’s what WordPress has to say:

The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you’ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.

Team WordPress

Working with Blocks

Every piece of content on a page or post is managed by a “block”. Think of blocks as a type of preset for different types of content: for example, “paragraph” and “list” will already be familiar as established formats for presenting text, and both have block counterparts.

Blocks are intended to manage the format of your content in an easy and consistent way, allowing you to focus on structure and intent.

Layout presets

Blocks quite literally become the “building blocks” of your website when grouped together to compose unique layouts:

Patterns

Allow for collections of blocks to be saved as a preset layout. They’re currently also a great way for a theme to provide layouts that are beyond the ability of the editor alone to create.

Elements like a call-to-action banner, a grid of cards, or an interesting typographical layout are each examples of a pattern.

Templates

Not a new concept but can now be safely edited from within WordPress’ new Site editor.

Design tokens

Themes built for the modern WordPress editor include a text file called theme.json, currently the closest thing to having a system for design tokens. This file acts as a central place to manage common values used throughout the theme.

While the contents of this file will vary from theme to theme, at a minimum every theme.json file will likely have default values for:

  • colour palettes
  • font sizes

It’s very much worth having a play with changing values in theme.json to get a feel for how you can easily change core theme attributes without coding experience.

Not the real Maisie cat

A tip for using the new editor

When designing a website it’s crucial to design in the editor. Bringing a design in from outside (for example, using a reference designed with software like Photoshop or Figma) will almost certainly end in frustration with WordPress. The editor simply isn’t nuanced enough—yet—to precisely match designs, nor construct them in a way that will ensure longevity for a website beyond the launch day.

Sticking to the available editor tools to build your website will ensure your designs have the best chance of displaying correctly and intentionally across different web browsers and devices.