Background editor improvements

This post presents an analysis that Channing Ritter and I have made of the Cover and Image blocks and offers some ideas to improve the user workflow and streamline some of the basic operations, like cropping, image placements, and rotation.

We’ll also offer an idea to integrate Fill modes into Cover blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. settings. The designs, prototypes, and an analysis of the current functionalities are available on this Figma file.

Our intention with this exploration is twofold. We’d like to:

  • Simplify the way Image and Cover blocks work.
  • Offer image editing functionalities so that users don’t need to resort to outside tools.

Besides these objectives, our work tries also to address this issue created by Matías Ventura regarding the improvement of the Cover block:

Cropping issues

Before we present our designs, let’s see some of the current problems with the cropping tool.

The first one we encounter when using this tool appears right after the user clicks the crop icon. We go from this toolbar:

To this one:

We think this change is quite disorienting because the toolbar gets reorganized, adding new icons and removing the cropping and link icons in a very abrupt way. We’ll show a possible solution to this problem in a minute.

But there are some other problems with the cropping functionality. Let’s see a video of the cropping tool in action:

As you can see in the previous video:

  • It’s impossible to revert a change made inside the cropping mode. Clicking “apply” inside this mode essentially creates a new image and replaces the original one. This means that every time users make a change and go back to the cropping mode, they can only edit the new cropped image.
  • The rotation option is limited to just 90º increments.
  • The zoom only allows zooming in, and it only goes from 100% to 300%.
  • In order to zoom in, the user needs to click the crop icon.

But the main problem is that the cropping mode works in a convoluted way: instead of selecting a rectangle and extracting the content inside, the cropping tool defines a viewport (using the set “Aspect ratio”) that will be used for the crop. Users can move the image inside, but this movement is restricted to one direction and limited by the outer bounding box of the block.

Once the user applies a crop to the image, the image then expands to fill up the entire space of the block using the selected aspect ratio. This is confusing since the user sometimes interacts with a small image that suddenly grows and fills the whole block.

Secondary toolbars

A solution to the problem we mentioned above about the confusing toolbar could be to use dedicated toolbars for certain groups of actions.

These new toolbars would present a title indicating that the user is now inside a different mode, the set of options for the functionality, and links to apply and discard the changes.

It could look like this:

And here’s a list of explorations we did for the placement of the elements:


We’ve created three walkthroughs that explain several aspects of our proposal:

  • How to integrate the cropping tool and other editing background functionalities inside the Cover block.
  • How different Fill Modes could work.
  • How could we add the cropping tool inside the Image Block.

These prototypes are self-guided, just open each of them and advance to the next slide clicking each screen. A series of notes will explain each concept.

Cover Block

A question we haven’t addressed on this exploration is what happens with the focal point functionality this block offers.

On the one hand, it could make sense to keep this feature, because it allows centering an image that is larger than its container. On the other hand, however, this block’s new background editing capabilities would make it very easy to enter inside the Edit background mode, reposition the image or crop it, and apply the changes.

Fill modes

Image Block


We hope you like these explorations and help us with comments and suggestions.

#cover-block, #cropping, #design, #design-tools, #gutenberg, #image-block