This issue describes a set of refinements for the Cover Block layer management and some ideas for further improvements that @jasmussen and I have worked on. Our explorations and designs for this issue are also available on this Figma file.

The core idea is to group all the layers (both overlays and media layer) inside a single sidebar section called Background, abstracting the organization of the Cover Block layers on the canvas and simplifying the block sidebar.

On this issue, we’ll share a vision for a potential first implementation and a list of refinements for the future.

Here’s what the layer management could look like:

The sidebar contains a list of items sorted by the position of the layers in the canvas.

Each layer item now includes:

• A preview of its content.
• A text description (Solid, Gradient, Pattern, Image, or Video).
• The percentage of the layer opacity.
• A button to remove the layer (more about removing layers below.)

As with color management, we placed the settings of the media layer inside of a popover. This will reduce the overall number of elements in the sidebar and will allow users to adjust the media properties in a more focused way.

Since the media layer is central to the Cover Block, clicking the minus sign won’t remove the item from the list. Instead, we’ll return the item to its initial empty state.

Adding a photo or a video is also managed from a popover:

Clicking the popover placeholder will open the system file picker, but we could also allow dragging an image as we do with the featured images.

The logic for adding overlays on top of the media layer could work as follows:

When adding layers, we prioritize speed, so instead of giving users the option to choose between a solid, a gradient, or a pattern; clicking the plus symbol will immediately add a solid layer with some opacity (a good default could be 50% black).

Clicking the plus button several times will add new solid layers. Ideally, we’ll insert a random color from the theme color palette (it would be cool to avoid repeating colors, but that logic could be hard to implement). Other more simple options could be: adding the default 50% black solid layer or repeating the last inserted item.

On this initial exploration, we don’t envision allowing users to reorder their layers. However, users will be able to organize them by updating their properties or removing and adding new ones.

Future layer management

Looking at the future of layer management for this and other blocks, we believe it could look like this: 


• Users will be able to drag layers and arrange them in any way they like.
• It will be possible to stack multiple media layers (let’s say, a video layer on the bottom and a transparent PNG on top), giving a lot of flexibility to users.
• Layers will support blend modes (or even duotone filters for images and videos!)

Explorations and designs for this issue are available on this Figma file.

Related discussions and issues:

• Background Tools Make "Background Tools" an easy API and add to Group / Columns #16479
• Background block support Background block support #38119