The WordPress block editor is starting to look more and more like a design tool for creating Patterns and web pages. We’re seeing new controls every release for basic design tools like line-height, color, padding, and block spacing.
The WordPress editor offers some simple controls for setting a block’s border. Controls for a block borders are currently available in the Inspector Sidebar inside a “Border” accordion section.
Not all blocks offer border controls. By default, the Group block supports borders but it is up to developers to provide support and default values for border controls in their theme.js or block.js.
Here’s how the border section looks right now…
The current controls offer a single width, style, and color for all four borders of a block. By default, all of these controls are not set and you must set at least a style before a border actually appears on the block; Setting a Width and/or Color without selecting a Style can make it appear that the controls are broken.
Here’s a few simple examples of what is possible with these limited border controls…
Border Radius
I haven’t mentioned it yet, but the Border section also includes a control for Radius. At first, this felt completely normal to me. But the more I thought about this grouping of controls, the more I thought it was strange to include a control that affects the shape of the block alongside the block’s border. Then it occurred to me — in CSS, an element’s radius is set using a property named border-radius. So of course this felt normal to me, I’ve been writing CSS for 15+ years.
But to most people, I imagine they wouldn’t look to control a shapes corner radius from inside a section entitled Border. Some of my early explorations included a Radius control, but I found myself omitting it as I progressed; I expect a Radius control will make more sense along side other Shape-type controls. I expect to have more on this in a future post.
First Drafts
I dove in by looking at the individual controls in isolation, trying to reduce, expand, and combine them in various combinations. I specifically was interested in how I could reduce the footprint of the color control, while also solidifying it’s connection to the width control. I also looked at using a segmented control and a dropdown, instead of just icons, for the Style control.
Exploration: Use ToolsPanel
After getting a solid grasp on the existing controls and how we could refine and combine them, I began looking at how they’d work in the larger context of the editor. My first exploration focused on using the new(-ish) ToolsPanel component, which provides a dropdown menu to enable and reset certain controls and their values, like the Radius control.
Exploration: Combining Color and Width
This next design continues with the ToolsPanel component, but with a combined Width and Color control. When pressed, the color swatch opens a popover with a list of theme-provided colors. This also shows the Style control having a default selection of solid.
Exploration: All-in-a-Row
After the previous exploration I wondered if there was another way to connect the Color and Width controls without having the swatch inside and input. Also, I felt the Style control could maybe be combined with the color selection, and hidden away inside the popover.
Exploration: Add/Remove with Individual Sides
As I continued to toy with the explorations above, I began to think that maybe the ToolsPanel component wasn’t the best fit for border controls. If we reconsider the inclusion of the Radius control, and that the other controls (Width, Color, and Style) are all relevant and necessary, then having the ability to enable/reset each individual control makes less sense. Instead, maybe its a more binary option; Add or remove a border.
As I went down this path, I realized it could be powerful to offer border controls for each individual side of a block. Plenty of designs include a border on only a single side of a block, but with the current controls the only way to do a single side border is with some CSS. The Quote block does this, and bundles it as a Block Style.
Exploration: Sides-in-a-Row
I really liked the previous exploration, but it feels a little too large when set. I wanted to see if there was another way to arrange the controls that didn’t consume as much vertical space.
What do you think?
I feel either of the last two explorations would be a significant improvement to block controls and could enable more expressive patterns, styles, and designs without needing to write any code. Are you creating themes or blocks, or just generally using the block editor? Drop your thoughts about these explorations and what you’d like to see in the WordPress editor in the comments below.