WordPress Editor Border Controls

The WordPress block editor aims to democratize design by offering simple tools to allow anyone to control the visual display of their content. One of these basic tools is the ability to add a border to a block.

Pre-existing controls for block borders. This UI allows for a lot of flexibility, but at the cost of visual and cognitive complexity.

We had already added some very basic tools for controlling a block’s border, but they had a large visual footprint and were needlessly complex.

We needed to update the controls to focus on displaying the most common and simple needs, while still allowing for more complex borders. I designed a small and simple border UI where you can unlink to control the borders on individual sides of the block.

I designed a small and simple border UI. You can unlink to control the borders on individual sides of the block.

When the sides are linked the border control’s footprint is very small, comprising of a single row within the editor’s Inspector sidebar.

I explore numerous variations, each with their own pro’s and con’s, and shared these designs with both an internal design team but also with the wider WordPress community. Working in the open-source community brings many benefits and challenges, allowing anyone and everyone to contribute their expertise — and their opinion. It can be a challenge to ideate, communicate, and iterate with so many varied voices and points-of-view. The best way forward is to not stop, and I’ve learned to work with the community while avoiding roadblocks to progress and ship meaningful changes.