Single Blog

Gutenberg Contributors Explore Expanding Background Image Block Support and Refining UI for Background Tools

Background tools in Gutenberg are currently limited to the Cover block, but contributors are working on expanding support so that any block can opt into it. Discussions about the best way to do this have been happening for the past two years and now are gaining some momentum.

“Right now it’s possible to add video backgrounds, colored overlays, etc, to the Cover block alone,” Matias Ventura said in 2019 ticket on the UI for background tools. “It would make sense to extract this and extend to other container blocks (group and columns, for example) as well as expanding the features.”

Gutenberg contributor Andrew Serong has created a draft exploratory PR for adding opt-in, server-rendered background support for blocks, which would save background image values to the block’s style attribute in a backgroundImage key. Serong created the PR as a rough, experimental approach and published a few screenshots of how the inspector controls might fit in. However, Gutenberg designers are working on a more refined design for background support in the editor.

Today, Gutenberg designers Joen Asmussen and Javier Arce published a GitHub issue with their vision for a complete reorganization of background controls that includes layer management, layer reordering, and support for filters/blend modes.

“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,” Arce said.

These new designs intersect with the goal of expanding background support for use in other blocks beyond the Cover block. There are many other considerations that splinter out of adding background image support to blocks, which contributors have noted in the discussions. These include features like the ability to add a body background image to block themes, specify a color palette to be used for background colors, and the ability to add multiple background images.

Expanding background image support and refining the UI for background controls is still a little ways off, but the project is starting to make significant steps forward. This will be an exciting addition that will markedly expand users’ ability to customize blocks.