Block Supports: Add background gradient support that can combine with background image#11384
Block Supports: Add background gradient support that can combine with background image#11384aaronrobertshaw wants to merge 2 commits intoWordPress:trunkfrom
Conversation
… background images
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @1178653+wordpress-develop-pr-bot[bot]@users.noreply.github.com. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
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.gradientas a new block support, enabling blocks to combine a background gradient with a background image via comma-separatedbackground-imageCSS values (e.g.,background-image: linear-gradient(...), url(...)).Currently, the only way to apply a gradient is through
color.gradient, which renders as abackgroundCSS shorthand and conflicts with background imageproperties. By introducing
background.gradient(stored atstyle.background.gradient), gradients become part of the background style group, allowing thestyle engine to combine gradient and image values without conflict.
See: WordPress/gutenberg#32787
Testing
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"styles.blocks.core/group.background.gradientproperty (e.g.,"gradient": "linear-gradient(135deg, #000 0%, #fff 100%)"). Verify the gradient renders correctly on the frontend.backgroundImageon the same Group block and confirm both values combine into a singlebackground-imageCSS declaration.style.color.gradientsupport continues to work on blocks that don't opt intobackground.gradient.style.color.gradientandstyle.background.gradient— confirmbackground.gradienttakes precedence and thecolor.gradientshorthand is suppressed.