WordPress 7.1 introduces a new background.gradient block support. It gives blocks a gradient control in the Background panel of the block inspector. Unlike the existing gradient support, it can be combined with a background image so the two render together.

GitHub issue: #32787 | PR: #75859

Background

Until now, the only way to apply a gradient to a block was through the Color panel’s color.gradient support. That value is stored at style.color.gradient and rendered as a background CSS shorthand.

The background shorthand resets every background property, including background-image. This meant a gradient set through color.gradient would conflict with, and override,

Click here to continue reading this article.