Context Navigation

← Previous Change
Next Change →

styleEngine.php

Timestamp:

07/14/2026 02:16:06 AM (32 hours ago)

Author:

ramonopoly

Message:

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

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(...)).

Before, 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.

Props aaronrobertshaw, ramonopoly, wildworks.

Fixes #64974.

File:

: 1 edited

trunk/tests/phpunit/tests/style-engine/styleEngine.php (modified) (2 diffs)

Legend:

: Unmodified
: Added
: Removed

trunk/tests/phpunit/tests/style-engine/styleEngine.php

-              r62513
+              r62718
          * @ticket 62189
          * @ticket 63799
+         * @ticket 64974
+         *
          * @covers ::wp_style_engine_get_styles
 …
                         ),
+                        'inline_background_gradient_only'              => array(
+                                'block_styles'    => array(
+                                        'background' => array(
+                                                'gradient' => 'linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,0,255) 100%)',
+                                        ),
+                                ),
+                                'options'         => array(),
+                                'expected_output' => array(
+                                        'css'          => 'background-image:linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,0,255) 100%);',
+                                        'declarations' => array(
+                                                'background-image' => 'linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,0,255) 100%)',
+                                        ),
+                                        'classnames'   => 'has-background',
+                                ),
+                        ),
+                        'inline_background_gradient_with_preset_slug'  => array(
+                                'block_styles'    => array(
+                                        'background' => array(
+                                                'gradient' => 'var:preset|gradient|vivid-cyan-blue',
+                                        ),
+                                ),
+                                'options'         => array(),
+                                'expected_output' => array(
+                                        'css'          => 'background-image:var(--wp--preset--gradient--vivid-cyan-blue);',
+                                        'declarations' => array(
+                                                'background-image' => 'var(--wp--preset--gradient--vivid-cyan-blue)',
+                                        ),
+                                        'classnames'   => 'has-background',
+                                ),
+                        ),
+                        'inline_background_gradient_and_image_combined' => array(
+                                'block_styles'    => array(
+                                        'background' => array(
+                                                'backgroundImage' => array(
+                                                        'url' => 'https://example.com/image.jpg',
+                                                ),
+                                                'gradient'        => 'linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,0,255) 100%)',
+                                        ),
+                                ),
+                                'options'         => array(),
+                                'expected_output' => array(
+                                        'css'          => "background-image:linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,0,255) 100%), url('https://example.com/image.jpg');",
+                                        'declarations' => array(
+                                                'background-image' => "linear-gradient(135deg,rgb(255,0,0) 0%,rgb(0,0,255) 100%), url('https://example.com/image.jpg')",
+                                        ),
+                                        'classnames'   => 'has-background',
+                                ),
+                        ),
                         'inline_background_image_url_with_background_size' => array(
                                 'block_styles'    => array(

Note: See TracChangeset for help on using the changeset viewer.

Make WordPress Core

Context Navigation

Changeset 62718 for trunk/tests/phpunit/tests/style-engine/styleEngine.php

Legend:

trunk/tests/phpunit/tests/style-engine/styleEngine.php

Download in other formats: