Want to get involved? See the handbook and optionally drop into #design to chat. Most active design work happens in the block editor project, consider dropping into Needs design or Needs design feedback.
There’s a WordPress Component Library in Figma. Duplicate to edit, direct access is reserved for the design team.
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:
Besides these objectives, our work tries also to address this issue created by Matías Ventura regarding the improvement of the Cover block:
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:
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.
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:
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.
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.
We hope you like these explorations and help us with comments and suggestions.
You must be logged in to post a comment.