Skip to content

Commit c3e1d3a

Browse files
ramonjdramonjd
committed
Background: add background attachment support to theme.json styles
Introduces the ability to specify a value for `background.backgroundAttachment` in theme.json styles. The theme.json value determines the CSS value for the `background-attachment` property. This feature was introduced into the Gutenberg plugin in version 18.9. Props andrewserong, mukesh27, noisysocks, ramonopoly. Fixes #61720 git-svn-id: https://develop.svn.wordpress.org/trunk@58834 602fd350-edb4-49c9-b593-d223f7449a82
1 parent dfd1de0 commit c3e1d3a

File tree

6 files changed

+62
-42
lines changed

6 files changed

+62
-42
lines changed

‎src/wp-includes/block-supports/background.php

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ function wp_register_background_support( $block_type ) {
4242
* @since 6.4.0
4343
* @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
4444
* @since 6.6.0 Removed requirement for `backgroundImage.source`. A file/url is the default.
45+
* @since 6.7.0 Added support for `backgroundAttachment` output.
4546
*
4647
* @access private
4748
*
@@ -62,11 +63,12 @@ function wp_render_background_support( $block_content, $block ) {
6263
return $block_content;
6364
}
6465

65-
$background_styles = array();
66-
$background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null;
67-
$background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null;
68-
$background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
69-
$background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
66+
$background_styles = array();
67+
$background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null;
68+
$background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null;
69+
$background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
70+
$background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
71+
$background_styles['backgroundAttachment'] = $block_attributes['style']['background']['backgroundAttachment'] ?? null;
7072

7173
if ( ! empty( $background_styles['backgroundImage'] ) ) {
7274
$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';

‎src/wp-includes/class-wp-theme-json.php

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -226,6 +226,7 @@ class WP_Theme_JSON {
226226
* @since 6.4.0 Added `writing-mode` property.
227227
* @since 6.5.0 Added `aspect-ratio` property.
228228
* @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
229+
* @since 6.7.0 Added `background-attachment` property.
229230
*
230231
* @var array
231232
*/
@@ -237,6 +238,7 @@ class WP_Theme_JSON {
237238
'background-position' => array( 'background', 'backgroundPosition' ),
238239
'background-repeat' => array( 'background', 'backgroundRepeat' ),
239240
'background-size' => array( 'background', 'backgroundSize' ),
241+
'background-attachment' => array( 'background', 'backgroundAttachment' ),
240242
'border-radius' => array( 'border', 'radius' ),
241243
'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
242244
'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
@@ -520,10 +522,11 @@ class WP_Theme_JSON {
520522
*/
521523
const VALID_STYLES = array(
522524
'background' => array(
523-
'backgroundImage' => null,
524-
'backgroundPosition' => null,
525-
'backgroundRepeat' => null,
526-
'backgroundSize' => null,
525+
'backgroundImage' => null,
526+
'backgroundPosition' => null,
527+
'backgroundRepeat' => null,
528+
'backgroundSize' => null,
529+
'backgroundAttachment' => null,
527530
),
528531
'border' => array(
529532
'color' => null,

‎src/wp-includes/style-engine/class-wp-style-engine.php

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,31 +50,37 @@ final class WP_Style_Engine {
5050
*/
5151
const BLOCK_STYLE_DEFINITIONS_METADATA = array(
5252
'background' => array(
53-
'backgroundImage' => array(
53+
'backgroundImage' => array(
5454
'property_keys' => array(
5555
'default' => 'background-image',
5656
),
5757
'value_func' => array( self::class, 'get_url_or_value_css_declaration' ),
5858
'path' => array( 'background', 'backgroundImage' ),
5959
),
60-
'backgroundPosition' => array(
60+
'backgroundPosition' => array(
6161
'property_keys' => array(
6262
'default' => 'background-position',
6363
),
6464
'path' => array( 'background', 'backgroundPosition' ),
6565
),
66-
'backgroundRepeat' => array(
66+
'backgroundRepeat' => array(
6767
'property_keys' => array(
6868
'default' => 'background-repeat',
6969
),
7070
'path' => array( 'background', 'backgroundRepeat' ),
7171
),
72-
'backgroundSize' => array(
72+
'backgroundSize' => array(
7373
'property_keys' => array(
7474
'default' => 'background-size',
7575
),
7676
'path' => array( 'background', 'backgroundSize' ),
7777
),
78+
'backgroundAttachment' => array(
79+
'property_keys' => array(
80+
'default' => 'background-attachment',
81+
),
82+
'path' => array( 'background', 'backgroundAttachment' ),
83+
),
7884
),
7985
'color' => array(
8086
'text' => array(

‎tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ public function filter_set_theme_root() {
6969
* @ticket 59357
7070
* @ticket 60175
7171
* @ticket 61123
72+
* @ticket 61720
7273
*
7374
* @covers ::wp_render_background_support
7475
*
@@ -139,20 +140,21 @@ public function data_background_block_support() {
139140
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
140141
'wrapper' => '<div>Content</div>',
141142
),
142-
'background image style with contain, position, and repeat is applied' => array(
143+
'background image style with contain, position, attachment, and repeat is applied' => array(
143144
'theme_name' => 'block-theme-child-with-fluid-typography',
144145
'block_name' => 'test/background-rules-are-output',
145146
'background_settings' => array(
146147
'backgroundImage' => true,
147148
),
148149
'background_style' => array(
149-
'backgroundImage' => array(
150+
'backgroundImage' => array(
150151
'url' => 'https://example.com/image.jpg',
151152
),
152-
'backgroundRepeat' => 'no-repeat',
153-
'backgroundSize' => 'contain',
153+
'backgroundRepeat' => 'no-repeat',
154+
'backgroundSize' => 'contain',
155+
'backgroundAttachment' => 'fixed',
154156
),
155-
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;">Content</div>',
157+
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-position:center;background-repeat:no-repeat;background-size:contain;background-attachment:fixed;">Content</div>',
156158
'wrapper' => '<div>Content</div>',
157159
),
158160
'background image style is appended if a style attribute already exists' => array(

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ public function tear_down() {
2828
* @ticket 58549
2929
* @ticket 58590
3030
* @ticket 60175
31+
* @ticket 61720
3132
*
3233
* @covers ::wp_style_engine_get_styles
3334
*
@@ -539,22 +540,24 @@ public function data_wp_style_engine_get_styles() {
539540
'inline_background_image_url_with_background_size' => array(
540541
'block_styles' => array(
541542
'background' => array(
542-
'backgroundImage' => array(
543+
'backgroundImage' => array(
543544
'url' => 'https://example.com/image.jpg',
544545
),
545-
'backgroundPosition' => 'center',
546-
'backgroundRepeat' => 'no-repeat',
547-
'backgroundSize' => 'cover',
546+
'backgroundPosition' => 'center',
547+
'backgroundRepeat' => 'no-repeat',
548+
'backgroundSize' => 'cover',
549+
'backgroundAttachment' => 'fixed',
548550
),
549551
),
550552
'options' => array(),
551553
'expected_output' => array(
552-
'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;",
554+
'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;",
553555
'declarations' => array(
554-
'background-image' => "url('https://example.com/image.jpg')",
555-
'background-position' => 'center',
556-
'background-repeat' => 'no-repeat',
557-
'background-size' => 'cover',
556+
'background-image' => "url('https://example.com/image.jpg')",
557+
'background-position' => 'center',
558+
'background-repeat' => 'no-repeat',
559+
'background-size' => 'cover',
560+
'background-attachment' => 'fixed',
558561
),
559562
),
560563
),

‎tests/phpunit/tests/theme/wpThemeJson.php

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4997,19 +4997,21 @@ public function test_get_shadow_styles_for_blocks() {
49974997
*
49984998
* @ticket 61123
49994999
* @ticket 61165
5000+
* @ticket 61720
50005001
*/
50015002
public function test_get_top_level_background_image_styles() {
50025003
$theme_json = new WP_Theme_JSON(
50035004
array(
50045005
'version' => WP_Theme_JSON::LATEST_SCHEMA,
50055006
'styles' => array(
50065007
'background' => array(
5007-
'backgroundImage' => array(
5008+
'backgroundImage' => array(
50085009
'url' => 'http://example.org/image.png',
50095010
),
5010-
'backgroundSize' => 'contain',
5011-
'backgroundRepeat' => 'no-repeat',
5012-
'backgroundPosition' => 'center center',
5011+
'backgroundSize' => 'contain',
5012+
'backgroundRepeat' => 'no-repeat',
5013+
'backgroundPosition' => 'center center',
5014+
'backgroundAttachment' => 'fixed',
50135015
),
50145016
),
50155017
)
@@ -5020,29 +5022,30 @@ public function test_get_top_level_background_image_styles() {
50205022
'selector' => 'body',
50215023
);
50225024

5023-
$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
5025+
$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;background-attachment: fixed;}";
50245026
$this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_stylesheet()" with top-level background styles type do not match expectations' );
50255027

50265028
$theme_json = new WP_Theme_JSON(
50275029
array(
50285030
'version' => WP_Theme_JSON::LATEST_SCHEMA,
50295031
'styles' => array(
50305032
'background' => array(
5031-
'backgroundImage' => "url('http://example.org/image.png')",
5032-
'backgroundSize' => 'contain',
5033-
'backgroundRepeat' => 'no-repeat',
5034-
'backgroundPosition' => 'center center',
5033+
'backgroundImage' => "url('http://example.org/image.png')",
5034+
'backgroundSize' => 'contain',
5035+
'backgroundRepeat' => 'no-repeat',
5036+
'backgroundPosition' => 'center center',
5037+
'backgroundAttachment' => 'fixed',
50355038
),
50365039
),
50375040
)
50385041
);
50395042

5040-
$expected_styles = "html{min-height: calc(100% - var(--wp-admin--admin-bar--height, 0px));}:root :where(body){background-image: url('http://example.org/image.png');background-position: center center;background-repeat: no-repeat;background-size: contain;}";
50415043
$this->assertSame( $expected_styles, $theme_json->get_styles_for_block( $body_node ), 'Styles returned from "::get_stylesheet()" with top-level background image as string type do not match expectations' );
50425044
}
50435045

50445046
/**
50455047
* @ticket 61588
5048+
* @ticket 61720
50465049
*/
50475050
public function test_get_block_background_image_styles() {
50485051
$theme_json = new WP_Theme_JSON(
@@ -5052,10 +5055,11 @@ public function test_get_block_background_image_styles() {
50525055
'blocks' => array(
50535056
'core/group' => array(
50545057
'background' => array(
5055-
'backgroundImage' => "url('http://example.org/group.png')",
5056-
'backgroundSize' => 'cover',
5057-
'backgroundRepeat' => 'no-repeat',
5058-
'backgroundPosition' => 'center center',
5058+
'backgroundImage' => "url('http://example.org/group.png')",
5059+
'backgroundSize' => 'cover',
5060+
'backgroundRepeat' => 'no-repeat',
5061+
'backgroundPosition' => 'center center',
5062+
'backgroundAttachment' => 'fixed',
50595063
),
50605064
),
50615065
'core/quote' => array(
@@ -5094,7 +5098,7 @@ public function test_get_block_background_image_styles() {
50945098
),
50955099
);
50965100

5097-
$group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;}";
5101+
$group_styles = ":root :where(.wp-block-group){background-image: url('http://example.org/group.png');background-position: center center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}";
50985102
$this->assertSame( $group_styles, $theme_json->get_styles_for_block( $group_node ), 'Styles returned from "::get_styles_for_block()" with block-level background styles as string type do not match expectations' );
50995103
}
51005104

0 commit comments

Comments
 (0)