Skip to content

Background: add background attachment support to theme.json styles #6991

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ramonjd wants to merge 7 commits into from
Closed

Background: add background attachment support to theme.json styles #6991

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6d4e2c5
Initial commit - bringing across changes from https://github.com/Word…
ramonjd Jul 8, 2024
98d9dea
Tabs. No spaces.
ramonjd Jul 8, 2024
0a95b0f
update style engine
ramonjd Jul 8, 2024
86fe1f9
Complete theme.json tests and add ticket number
ramonjd Jul 22, 2024
28edf84
Added since attributes
ramonjd Jul 22, 2024
bcfd6b3
Add ticket annotation
ramonjd Jul 23, 2024
8485950
Add block style tests
ramonjd Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions src/wp-includes/block-supports/background.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ function wp_register_background_support( $block_type ) {
* @since 6.4.0
* @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
* @since 6.6.0 Removed requirement for `backgroundImage.source`. A file/url is the default.
* @since 6.7.0 Added support for `backgroundAttachment` output.
*
* @access private
*
Expand All @@ -62,11 +63,12 @@ function wp_render_background_support( $block_content, $block ) {
return $block_content;
}

$background_styles = array();
$background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null;
$background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null;
$background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
$background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
$background_styles = array();
$background_styles['backgroundImage'] = $block_attributes['style']['background']['backgroundImage'] ?? null;
$background_styles['backgroundSize'] = $block_attributes['style']['background']['backgroundSize'] ?? null;
$background_styles['backgroundPosition'] = $block_attributes['style']['background']['backgroundPosition'] ?? null;
$background_styles['backgroundRepeat'] = $block_attributes['style']['background']['backgroundRepeat'] ?? null;
$background_styles['backgroundAttachment'] = $block_attributes['style']['background']['backgroundAttachment'] ?? null;

if ( ! empty( $background_styles['backgroundImage'] ) ) {
$background_styles['backgroundSize'] = $background_styles['backgroundSize'] ?? 'cover';
Expand Down
11 changes: 7 additions & 4 deletions src/wp-includes/class-wp-theme-json.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,7 @@ class WP_Theme_JSON {
* @since 6.4.0 Added `writing-mode` property.
* @since 6.5.0 Added `aspect-ratio` property.
* @since 6.6.0 Added `background-[image|position|repeat|size]` properties.
* @since 6.7.0 Added `background-attachment` property.
*
* @var array
*/
Expand All @@ -237,6 +238,7 @@ class WP_Theme_JSON {
'background-position' => array( 'background', 'backgroundPosition' ),
'background-repeat' => array( 'background', 'backgroundRepeat' ),
'background-size' => array( 'background', 'backgroundSize' ),
'background-attachment' => array( 'background', 'backgroundAttachment' ),
Copy link
Member

@mukeshpanchal27 mukeshpanchal27 Jul 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the property in docblock with @since

'border-radius' => array( 'border', 'radius' ),
'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
Expand Down Expand Up @@ -520,10 +522,11 @@ class WP_Theme_JSON {
*/
const VALID_STYLES = array(
'background' => array(
'backgroundImage' => null,
'backgroundPosition' => null,
'backgroundRepeat' => null,
'backgroundSize' => null,
'backgroundImage' => null,
'backgroundPosition' => null,
'backgroundRepeat' => null,
'backgroundSize' => null,
'backgroundAttachment' => null,
),
'border' => array(
'color' => null,
Expand Down
14 changes: 10 additions & 4 deletions src/wp-includes/style-engine/class-wp-style-engine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,31 +50,37 @@ final class WP_Style_Engine {
*/
const BLOCK_STYLE_DEFINITIONS_METADATA = array(
'background' => array(
'backgroundImage' => array(
'backgroundImage' => array(
'property_keys' => array(
'default' => 'background-image',
),
'value_func' => array( self::class, 'get_url_or_value_css_declaration' ),
'path' => array( 'background', 'backgroundImage' ),
),
'backgroundPosition' => array(
'backgroundPosition' => array(
'property_keys' => array(
'default' => 'background-position',
),
'path' => array( 'background', 'backgroundPosition' ),
),
'backgroundRepeat' => array(
'backgroundRepeat' => array(
'property_keys' => array(
'default' => 'background-repeat',
),
'path' => array( 'background', 'backgroundRepeat' ),
),
'backgroundSize' => array(
'backgroundSize' => array(
'property_keys' => array(
'default' => 'background-size',
),
'path' => array( 'background', 'backgroundSize' ),
),
'backgroundAttachment' => array(
'property_keys' => array(
'default' => 'background-attachment',
),
'path' => array( 'background', 'backgroundAttachment' ),
),
),
'color' => array(
'text' => array(
Expand Down
12 changes: 7 additions & 5 deletions tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ public function filter_set_theme_root() {
* @ticket 59357
* @ticket 60175
* @ticket 61123
* @ticket 61720
*
* @covers ::wp_render_background_support
*
Expand Down Expand Up @@ -139,20 +140,21 @@ public function data_background_block_support() {
'expected_wrapper' => '<div class="has-background" style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div>Content</div>',
),
'background image style with contain, position, and repeat is applied' => array(
'background image style with contain, position, attachment, and repeat is applied' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
'block_name' => 'test/background-rules-are-output',
'background_settings' => array(
'backgroundImage' => true,
),
'background_style' => array(
'backgroundImage' => array(
'backgroundImage' => array(
'url' => 'https://example.com/image.jpg',
),
'backgroundRepeat' => 'no-repeat',
'backgroundSize' => 'contain',
'backgroundRepeat' => 'no-repeat',
'backgroundSize' => 'contain',
'backgroundAttachment' => 'fixed',
),
'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>',
'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>',
'wrapper' => '<div>Content</div>',
),
'background image style is appended if a style attribute already exists' => array(
Expand Down
21 changes: 12 additions & 9 deletions tests/phpunit/tests/style-engine/styleEngine.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ public function tear_down() {
* @ticket 58549
* @ticket 58590
* @ticket 60175
* @ticket 61720
*
* @covers ::wp_style_engine_get_styles
*
Expand Down Expand Up @@ -539,22 +540,24 @@ public function data_wp_style_engine_get_styles() {
'inline_background_image_url_with_background_size' => array(
'block_styles' => array(
'background' => array(
'backgroundImage' => array(
'backgroundImage' => array(
'url' => 'https://example.com/image.jpg',
),
'backgroundPosition' => 'center',
'backgroundRepeat' => 'no-repeat',
'backgroundSize' => 'cover',
'backgroundPosition' => 'center',
'backgroundRepeat' => 'no-repeat',
'backgroundSize' => 'cover',
'backgroundAttachment' => 'fixed',
),
),
'options' => array(),
'expected_output' => array(
'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;",
'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;",
'declarations' => array(
'background-image' => "url('https://example.com/image.jpg')",
'background-position' => 'center',
'background-repeat' => 'no-repeat',
'background-size' => 'cover',
'background-image' => "url('https://example.com/image.jpg')",
'background-position' => 'center',
'background-repeat' => 'no-repeat',
'background-size' => 'cover',
'background-attachment' => 'fixed',
),
),
),
Expand Down
34 changes: 19 additions & 15 deletions tests/phpunit/tests/theme/wpThemeJson.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4997,19 +4997,21 @@ public function test_get_shadow_styles_for_blocks() {
*
* @ticket 61123
* @ticket 61165
* @ticket 61720
*/
public function test_get_top_level_background_image_styles() {
$theme_json = new WP_Theme_JSON(
array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'styles' => array(
'background' => array(
'backgroundImage' => array(
'backgroundImage' => array(
'url' => 'http://example.org/image.png',
),
'backgroundSize' => 'contain',
'backgroundRepeat' => 'no-repeat',
'backgroundPosition' => 'center center',
'backgroundSize' => 'contain',
'backgroundRepeat' => 'no-repeat',
'backgroundPosition' => 'center center',
'backgroundAttachment' => 'fixed',
),
),
)
Expand All @@ -5020,29 +5022,30 @@ public function test_get_top_level_background_image_styles() {
'selector' => 'body',
);

$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;}";
$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;}";
$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' );

$theme_json = new WP_Theme_JSON(
array(
'version' => WP_Theme_JSON::LATEST_SCHEMA,
'styles' => array(
'background' => array(
'backgroundImage' => "url('http://example.org/image.png')",
'backgroundSize' => 'contain',
'backgroundRepeat' => 'no-repeat',
'backgroundPosition' => 'center center',
'backgroundImage' => "url('http://example.org/image.png')",
'backgroundSize' => 'contain',
'backgroundRepeat' => 'no-repeat',
'backgroundPosition' => 'center center',
'backgroundAttachment' => 'fixed',
),
),
)
);

$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;}";
$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' );
}

/**
* @ticket 61588
* @ticket 61720
*/
public function test_get_block_background_image_styles() {
$theme_json = new WP_Theme_JSON(
Expand All @@ -5052,10 +5055,11 @@ public function test_get_block_background_image_styles() {
'blocks' => array(
'core/group' => array(
'background' => array(
'backgroundImage' => "url('http://example.org/group.png')",
'backgroundSize' => 'cover',
'backgroundRepeat' => 'no-repeat',
'backgroundPosition' => 'center center',
'backgroundImage' => "url('http://example.org/group.png')",
'backgroundSize' => 'cover',
'backgroundRepeat' => 'no-repeat',
'backgroundPosition' => 'center center',
'backgroundAttachment' => 'fixed',
),
),
'core/quote' => array(
Expand Down Expand Up @@ -5094,7 +5098,7 @@ public function test_get_block_background_image_styles() {
),
);

$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;}";
$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;}";
$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' );
}

Expand Down