From 6423a57052398c02048f3a719f376780520c4a16 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:29:14 +1100
Subject: [PATCH 1/9] Backport background size and repeat block support
features from Gutenberg
---
src/wp-includes/block-supports/background.php | 19 +++++++++++++++++--
src/wp-includes/class-wp-theme-json.php | 6 +++++-
.../style-engine/class-wp-style-engine.php | 17 +++++++++++++++--
.../wpRenderBackgroundSupport.php | 17 +++++++++++++++++
.../tests/style-engine/styleEngine.php | 14 +++++++++-----
5 files changed, 63 insertions(+), 10 deletions(-)
diff --git a/src/wp-includes/block-supports/background.php b/src/wp-includes/block-supports/background.php
index a8de0c6b63b20..02d7301a34cc3 100644
--- a/src/wp-includes/block-supports/background.php
+++ b/src/wp-includes/block-supports/background.php
@@ -40,6 +40,8 @@ function wp_register_background_support( $block_type ) {
* it is also applied to non-server-rendered blocks.
*
* @since 6.4.0
+ * @since 6.5.0 Added support for `backgroundSize`, `backgroundPosition`,
+ * and `backgroundRepeat` output.
* @access private
*
* @param string $block_content Rendered block content.
@@ -67,6 +69,12 @@ function wp_render_background_support( $block_content, $block ) {
$background_size = isset( $block_attributes['style']['background']['backgroundSize'] )
? $block_attributes['style']['background']['backgroundSize']
: 'cover';
+ $background_position = isset( $block_attributes['style']['background']['backgroundPosition'] )
+ ? $block_attributes['style']['background']['backgroundPosition']
+ : null;
+ $background_repeat = isset( $block_attributes['style']['background']['backgroundRepeat'] )
+ ? $block_attributes['style']['background']['backgroundRepeat']
+ : null;
$background_block_styles = array();
@@ -76,8 +84,15 @@ function wp_render_background_support( $block_content, $block ) {
) {
// Set file based background URL.
$background_block_styles['backgroundImage']['url'] = $background_image_url;
- // Only output the background size when an image url is set.
- $background_block_styles['backgroundSize'] = $background_size;
+ // Only output the background size and repeat when an image url is set.
+ $background_block_styles['backgroundSize'] = $background_size;
+ $background_block_styles['backgroundRepeat'] = $background_repeat;
+ $background_block_styles['backgroundPosition'] = $background_position;
+
+ // If the background size is set to `contain` and no position is set, set the position to `center`.
+ if ( 'contain' === $background_size && ! isset( $background_position ) ) {
+ $background_block_styles['backgroundPosition'] = 'center';
+ }
}
$styles = wp_style_engine_get_styles( array( 'background' => $background_block_styles ) );
diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php
index 4826de8648acd..37f4d11ce9fb4 100644
--- a/src/wp-includes/class-wp-theme-json.php
+++ b/src/wp-includes/class-wp-theme-json.php
@@ -344,7 +344,8 @@ class WP_Theme_JSON {
* @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`.
* @since 6.4.0 Added support for `layout.allowEditing`, `background.backgroundImage`,
* `typography.writingMode`, `lightbox.enabled` and `lightbox.allowEditing`.
- * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize`.
+ * @since 6.5.0 Added support for `layout.allowCustomContentAndWideSize` and
+ * `background.backgroundSize`.
* @var array
*/
const VALID_SETTINGS = array(
@@ -352,6 +353,7 @@ class WP_Theme_JSON {
'useRootPaddingAwareAlignments' => null,
'background' => array(
'backgroundImage' => null,
+ 'backgroundSize' => null,
),
'border' => array(
'color' => null,
@@ -573,10 +575,12 @@ public static function get_element_class_name( $element ) {
* @since 6.0.0
* @since 6.2.0 Added `dimensions.minHeight` and `position.sticky`.
* @since 6.4.0 Added `background.backgroundImage`.
+ * @since 6.5.0 Added `background.backgroundSize`.
* @var array
*/
const APPEARANCE_TOOLS_OPT_INS = array(
array( 'background', 'backgroundImage' ),
+ array( 'background', 'backgroundSize' ),
array( 'border', 'color' ),
array( 'border', 'radius' ),
array( 'border', 'style' ),
diff --git a/src/wp-includes/style-engine/class-wp-style-engine.php b/src/wp-includes/style-engine/class-wp-style-engine.php
index 121bac2d927ba..04fd63247a5db 100644
--- a/src/wp-includes/style-engine/class-wp-style-engine.php
+++ b/src/wp-includes/style-engine/class-wp-style-engine.php
@@ -23,6 +23,7 @@
* @since 6.1.0
* @since 6.3.0 Added support for text-columns.
* @since 6.4.0 Added support for background.backgroundImage.
+ * @since 6.5.0 Added support for background.backgroundPosition, background.backgroundRepeat.
*/
#[AllowDynamicProperties]
final class WP_Style_Engine {
@@ -48,14 +49,26 @@ 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' ),
),
- 'backgroundSize' => array(
+ 'backgroundPosition' => array(
+ 'property_keys' => array(
+ 'default' => 'background-position',
+ ),
+ 'path' => array( 'background', 'backgroundPosition' ),
+ ),
+ 'backgroundRepeat' => array(
+ 'property_keys' => array(
+ 'default' => 'background-repeat',
+ ),
+ 'path' => array( 'background', 'backgroundRepeat' ),
+ ),
+ 'backgroundSize' => array(
'property_keys' => array(
'default' => 'background-size',
),
diff --git a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
index 4f38db87ab317..24d329dafbba4 100644
--- a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
+++ b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
@@ -138,6 +138,23 @@ public function data_background_block_support() {
'expected_wrapper' => 'Content
',
'wrapper' => 'Content
',
),
+ 'background image style with contain, position, 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(
+ 'url' => 'https://example.com/image.jpg',
+ 'source' => 'file',
+ ),
+ 'backgroundRepeat' => 'no-repeat',
+ 'backgroundSize' => 'contain',
+ ),
+ 'expected_wrapper' => 'Content
',
+ 'wrapper' => 'Content
',
+ ),
'background image style is appended if a style attribute already exists' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
'block_name' => 'test/background-rules-are-output',
diff --git a/tests/phpunit/tests/style-engine/styleEngine.php b/tests/phpunit/tests/style-engine/styleEngine.php
index b1a01563c2097..0a2fdc1b58f07 100644
--- a/tests/phpunit/tests/style-engine/styleEngine.php
+++ b/tests/phpunit/tests/style-engine/styleEngine.php
@@ -513,18 +513,22 @@ 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',
),
- 'backgroundSize' => 'cover',
+ 'backgroundPosition' => 'center',
+ 'backgroundRepeat' => 'no-repeat',
+ 'backgroundSize' => 'cover',
),
),
'options' => array(),
'expected_output' => array(
- 'css' => "background-image:url('https://example.com/image.jpg');background-size:cover;",
+ 'css' => "background-image:url('https://example.com/image.jpg');background-position:center;background-repeat:no-repeat;background-size:cover;",
'declarations' => array(
- 'background-image' => "url('https://example.com/image.jpg')",
- 'background-size' => 'cover',
+ 'background-image' => "url('https://example.com/image.jpg')",
+ 'background-position' => 'center',
+ 'background-repeat' => 'no-repeat',
+ 'background-size' => 'cover',
),
),
),
From 977cfafefae9be34f529dfc2a5c7a8ac3b2f2a7e Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:40:46 +1100
Subject: [PATCH 2/9] Fix linting issue
---
src/wp-includes/block-supports/background.php | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/wp-includes/block-supports/background.php b/src/wp-includes/block-supports/background.php
index 02d7301a34cc3..3b751689d0d36 100644
--- a/src/wp-includes/block-supports/background.php
+++ b/src/wp-includes/block-supports/background.php
@@ -72,7 +72,7 @@ function wp_render_background_support( $block_content, $block ) {
$background_position = isset( $block_attributes['style']['background']['backgroundPosition'] )
? $block_attributes['style']['background']['backgroundPosition']
: null;
- $background_repeat = isset( $block_attributes['style']['background']['backgroundRepeat'] )
+ $background_repeat = isset( $block_attributes['style']['background']['backgroundRepeat'] )
? $block_attributes['style']['background']['backgroundRepeat']
: null;
From d9f0819c52603a703691d9e3424f2c7f391a9121 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:47:05 +1100
Subject: [PATCH 3/9] Update reference to trac ticket
---
.../phpunit/tests/block-supports/wpRenderBackgroundSupport.php | 1 +
tests/phpunit/tests/style-engine/styleEngine.php | 1 +
tests/phpunit/tests/theme/wpThemeJson.php | 2 ++
3 files changed, 4 insertions(+)
diff --git a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
index 24d329dafbba4..f5867a9f3ce3d 100644
--- a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
+++ b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
@@ -67,6 +67,7 @@ public function filter_set_theme_root() {
* Tests that background image block support works as expected.
*
* @ticket 59357
+ * @ticket 60175
*
* @covers ::wp_render_background_support
*
diff --git a/tests/phpunit/tests/style-engine/styleEngine.php b/tests/phpunit/tests/style-engine/styleEngine.php
index 0a2fdc1b58f07..38ad106e2ca5e 100644
--- a/tests/phpunit/tests/style-engine/styleEngine.php
+++ b/tests/phpunit/tests/style-engine/styleEngine.php
@@ -27,6 +27,7 @@ public function tear_down() {
* @ticket 56467
* @ticket 58549
* @ticket 58590
+ * @ticket 60175
*
* @covers ::wp_style_engine_get_styles
*
diff --git a/tests/phpunit/tests/theme/wpThemeJson.php b/tests/phpunit/tests/theme/wpThemeJson.php
index 6da723583ba45..49e1661844b10 100644
--- a/tests/phpunit/tests/theme/wpThemeJson.php
+++ b/tests/phpunit/tests/theme/wpThemeJson.php
@@ -264,6 +264,7 @@ public function test_get_settings_appearance_true_opts_in() {
$expected = array(
'background' => array(
'backgroundImage' => true,
+ 'backgroundSize' => true,
),
'border' => array(
'width' => true,
@@ -300,6 +301,7 @@ public function test_get_settings_appearance_true_opts_in() {
'core/group' => array(
'background' => array(
'backgroundImage' => true,
+ 'backgroundSize' => true,
),
'border' => array(
'width' => true,
From 5f80467f2562d52b9fb215d86b6a2deb6a1b8813 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:57:07 +1100
Subject: [PATCH 4/9] Fix linting issue
---
src/wp-includes/block-supports/background.php | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/wp-includes/block-supports/background.php b/src/wp-includes/block-supports/background.php
index 3b751689d0d36..dd2fef10c4027 100644
--- a/src/wp-includes/block-supports/background.php
+++ b/src/wp-includes/block-supports/background.php
@@ -69,7 +69,7 @@ function wp_render_background_support( $block_content, $block ) {
$background_size = isset( $block_attributes['style']['background']['backgroundSize'] )
? $block_attributes['style']['background']['backgroundSize']
: 'cover';
- $background_position = isset( $block_attributes['style']['background']['backgroundPosition'] )
+ $background_position = isset( $block_attributes['style']['background']['backgroundPosition'] )
? $block_attributes['style']['background']['backgroundPosition']
: null;
$background_repeat = isset( $block_attributes['style']['background']['backgroundRepeat'] )
From 6b4dca48d18d4bbe50ac822926faf67e4ab7a9d8 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 3 Jan 2024 09:13:12 +1100
Subject: [PATCH 5/9] Update
src/wp-includes/style-engine/class-wp-style-engine.php
Co-authored-by: Mukesh Panchal
---
src/wp-includes/style-engine/class-wp-style-engine.php | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/wp-includes/style-engine/class-wp-style-engine.php b/src/wp-includes/style-engine/class-wp-style-engine.php
index 04fd63247a5db..3be384d679f00 100644
--- a/src/wp-includes/style-engine/class-wp-style-engine.php
+++ b/src/wp-includes/style-engine/class-wp-style-engine.php
@@ -23,7 +23,7 @@
* @since 6.1.0
* @since 6.3.0 Added support for text-columns.
* @since 6.4.0 Added support for background.backgroundImage.
- * @since 6.5.0 Added support for background.backgroundPosition, background.backgroundRepeat.
+ * @since 6.5.0 Added support for background.backgroundPosition and background.backgroundRepeat.
*/
#[AllowDynamicProperties]
final class WP_Style_Engine {
From db08860e0214a6df399845b56fce2c698b762dc5 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Wed, 3 Jan 2024 12:23:25 +1100
Subject: [PATCH 6/9] Update comment for background output
---
src/wp-includes/block-supports/background.php | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/wp-includes/block-supports/background.php b/src/wp-includes/block-supports/background.php
index dd2fef10c4027..62c6d83c0d730 100644
--- a/src/wp-includes/block-supports/background.php
+++ b/src/wp-includes/block-supports/background.php
@@ -40,8 +40,7 @@ function wp_register_background_support( $block_type ) {
* it is also applied to non-server-rendered blocks.
*
* @since 6.4.0
- * @since 6.5.0 Added support for `backgroundSize`, `backgroundPosition`,
- * and `backgroundRepeat` output.
+ * @since 6.5.0 Added support for `backgroundPosition` and `backgroundRepeat` output.
* @access private
*
* @param string $block_content Rendered block content.
From bf5bed8bb4595c2fae9e714ce64c32d30197351d Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 8 Jan 2024 10:37:23 +1100
Subject: [PATCH 7/9] Add has-background classname output
---
src/wp-includes/block-supports/background.php | 1 +
.../block-supports/wpRenderBackgroundSupport.php | 12 ++++++------
2 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/src/wp-includes/block-supports/background.php b/src/wp-includes/block-supports/background.php
index 62c6d83c0d730..0eac8eb810aa8 100644
--- a/src/wp-includes/block-supports/background.php
+++ b/src/wp-includes/block-supports/background.php
@@ -113,6 +113,7 @@ function wp_render_background_support( $block_content, $block ) {
$updated_style .= $styles['css'];
$tags->set_attribute( 'style', $updated_style );
+ $tags->add_class( 'has-background' );
}
return $tags->get_updated_html();
diff --git a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
index f5867a9f3ce3d..83ea7cd47c972 100644
--- a/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
+++ b/tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
@@ -136,7 +136,7 @@ public function data_background_block_support() {
'source' => 'file',
),
),
- 'expected_wrapper' => 'Content
',
+ 'expected_wrapper' => 'Content
',
'wrapper' => 'Content
',
),
'background image style with contain, position, and repeat is applied' => array(
@@ -153,7 +153,7 @@ public function data_background_block_support() {
'backgroundRepeat' => 'no-repeat',
'backgroundSize' => 'contain',
),
- 'expected_wrapper' => 'Content
',
+ 'expected_wrapper' => 'Content
',
'wrapper' => 'Content
',
),
'background image style is appended if a style attribute already exists' => array(
@@ -168,8 +168,8 @@ public function data_background_block_support() {
'source' => 'file',
),
),
- 'expected_wrapper' => 'Content
',
- 'wrapper' => 'Content
',
+ 'expected_wrapper' => 'Content
',
+ 'wrapper' => 'Content
',
),
'background image style is appended if a style attribute containing multiple styles already exists' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
@@ -183,8 +183,8 @@ public function data_background_block_support() {
'source' => 'file',
),
),
- 'expected_wrapper' => 'Content
',
- 'wrapper' => 'Content
',
+ 'expected_wrapper' => 'Content
',
+ 'wrapper' => 'Content
',
),
'background image style is not applied if the block does not support background image' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
From 185ee7697f36c82a8617415c994f69999bbb30d3 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Mon, 8 Jan 2024 11:05:41 +1100
Subject: [PATCH 8/9] Empty commit to re-run tests
From c2982a3b381ecf9bb29df3b1d5a7b2569d277705 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 9 Jan 2024 15:49:12 +1100
Subject: [PATCH 9/9] Return early if there's no source and url
---
src/wp-includes/block-supports/background.php | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/src/wp-includes/block-supports/background.php b/src/wp-includes/block-supports/background.php
index 0eac8eb810aa8..283833991f57b 100644
--- a/src/wp-includes/block-supports/background.php
+++ b/src/wp-includes/block-supports/background.php
@@ -65,6 +65,11 @@ function wp_render_background_support( $block_content, $block ) {
$background_image_url = isset( $block_attributes['style']['background']['backgroundImage']['url'] )
? $block_attributes['style']['background']['backgroundImage']['url']
: null;
+
+ if ( ! $background_image_source && ! $background_image_url ) {
+ return $block_content;
+ }
+
$background_size = isset( $block_attributes['style']['background']['backgroundSize'] )
? $block_attributes['style']['background']['backgroundSize']
: 'cover';