Designing the Editorial Experience

As a designer, you may (and should) also be responsible for designing the editorial experience, not just the end-user experience.

A well-designed editorial experience empowers content creators while maintaining design consistency. When designing blocks and patterns, consider both aesthetics and usability from the editor’s perspective.

Visual Feedback

For editors, visual feedback helps with writing content and creating pages. It is important to ensure editors can easily understand how a block works and possible interactions.

Block boundaries

In the block editor, every block should highlight the boundary. It helps with differentiating the block from other blocks and aids the content creation and designing process.

Figure 4.1 shows how a single column inside a columns block is highlighted when focused. 

Available block variations

Blocks may have different variations and these can be shown differently. Figure 4.2 shows the different variations available for the ‘columns’ block. As you can see, it is a wizard user interface.

You can also use the block toolbar to show variations. Figure 4.3 shows the group block and the three different width variations in the toolbar.

Layout control handles

For blocks that have interactions such as resizing, it is important to have well-defined handles.

Figure 4.4 shows the image block with resize handles.

Spacing visualization

Although spacing is almost always transparent. To effectively create layouts, it is important to differentiate between various spacing types (spacer, padding, margin, etc.).

Figure 4.5 shows the group block with padding (highlighted in blue).

Block Settings

Blocks have a variety of settings. There are usually two ways to show settings: Inspect Sidebar and Toolbar (Figure 4.6).  

Your blocks should be designed to expose the most relevant controls in the most effective manner.

Keep frequently used settings in the toolbar

The most commonly used settings should be immediately accessible to the user:

Some primary controls which should be in the toolbar are (but not limited to):

• Text formatting (bold, italic, links)
• Alignment options
• Basic color settings
• Block conversion
• Quick delete/duplicate

You may move settings to the sidebar panel if:

• Used less frequently
• Require detailed configuration
• Impact multiple properties
• Need preview functionality

It is possible to keep settings in the toolbar as well as the sidebar.

Group-related options logically

Group related settings to reduce cognitive load:

Typography Controls:

• Font size
• Line height
• Text decoration
• Font weight

Layout Controls:

• Width settings
• Padding/margin
• Alignment
• Position

Color Controls:

• Text color
• Background color
• Link color
• Gradient options

Provide clear, concise labels

Providing clear and concise labels is important to avoid confusion. Labels should be:

• Action-oriented (“Add Image” vs “Image”)
• Consistently formatted
• Brief but descriptive
• Free of technical jargon

Some examples of how you should label settings:

• “Adjust Spacing” instead of “Spacing Settings”
• “Change Layout” instead of “Column Configuration”
• “Add Link” instead of “URL Input”

Limit options

The more options available to a person, the longer it will take to decide which option is best (Hick’s law). It is important to limit options to prevent overwhelm.

Essential vs Optional

• Show only essential options by default
• Move advanced options behind “More” menu
• Use progressive disclosure for complex settings

Figure 4.7 shows how progressive disclosure is utilized for content width settings.

Contextual Display

• Show options only when relevant
• Hide unused settings based on context
• Disable rather than hide when appropriate

Maximum Counts:

• Limit primary toolbar items to 5-7
• Group additional options under dropdown
• Use sidebar for detailed configuration

Maintaining WordPress Design Language

WordPress has a distinct and well-documented design system. Using WordPress’ design system ensures that users feel comfortable with the editorial UI you design.

You may refer to the WordPress Design System Figma for more information.