Make WordPress Core

Opened 7 weeks ago

Last modified 7 weeks ago

#64974 new enhancement

Block Supports: Add background gradient support that can combine with background images

Reported by: aaronrobertshaw's profile aaronrobertshaw Owned by:
Milestone: 7.1 Priority: normal
Severity: normal Version:
Component: Editor Keywords: gutenberg-merge has-patch has-unit-tests
Focuses: Cc:

Description

This ticket tracks the backport of PHP files for the following Gutenberg update:

https://github.com/WordPress/gutenberg/pull/75859

Adds background.gradient as a new block support, enabling blocks to have a gradient picker in the Background panel. This is separate from the existing color.gradient in the Color panel and allows blocks to combine a background gradient with a background image via comma-separated background-image CSS values.

The ability to move away from the shorthand background CSS property for block supports is also required to unblock further design tooling improvements such as text gradients.

Change History (1)

This ticket was mentioned in PR #11384 on WordPress/wordpress-develop by @aaronrobertshaw.


7 weeks ago
#1

  • Keywords has-patch has-unit-tests added

Trac ticket: https://core.trac.wordpress.org/ticket/64974

This PR brings the PHP changes from the following Gutenberg PR to core:

WordPress/gutenberg#72628

## Description

Adds background.gradient as a new block support, enabling blocks to combine a background gradient with a background image via comma-separated
background-image CSS values (e.g., background-image: linear-gradient(...), url(...)).

Currently, the only way to apply a gradient is through color.gradient, which renders as a background CSS shorthand and conflicts with background image
properties. By introducing background.gradient (stored at style.background.gradient), gradients become part of the background style group, allowing the
style engine to combine gradient and image values without conflict.

See: WordPress/gutenberg#32787

## Testing

  1. Ensure PHP unit tests pass: `npm run test:php -- --filter="Tests_Block_Supports_WpRenderBackgroundSupport|Tests_Block_Supports_Colors|Tests_wpStyleEngine|test_get_background_gradient|test_remove_insecure_p roperties_allows_combined|test_remove_insecure_properties_allows_background_gradient|test_get_settings_appearance_true"`
  2. In a theme.json file, define a background gradient for the Group block using the new styles.blocks.core/group.background.gradient property (e.g., "gradient": "linear-gradient(135deg, #000 0%, #fff 100%)"). Verify the gradient renders correctly on the frontend.
  3. Also set a backgroundImage on the same Group block and confirm both values combine into a single background-image CSS declaration.
  4. Verify existing style.color.gradient support continues to work on blocks that don't opt into background.gradient.
  5. On a block that supports both, set both style.color.gradient and style.background.gradient — confirm background.gradient takes precedence and the color.gradient shorthand is suppressed.
Note: See TracTickets for help on using tickets.