vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 12:20:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: add size and repeat to background image support.

Browse Source 
Adds background size and background repeat style processing to the background image block support and `WP_Style_Engine` definitions.

Props andrewserong, mukesh27.
Fixes #60175.



git-svn-id: https://develop.svn.wordpress.org/trunk@57254 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Isabel Brison
2024-01-09 06:10:09 +00:00
parent 2d764b4101
commit 15b5be2acd
6 changed files with 77 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/phpunit/tests/block-supports/wpRenderBackgroundSupport.php
+23 -5
View File
@@ -67,6 +67,7 @@ class Tests_Block_Supports_WpRenderBackgroundSupport extends WP_UnitTestCase {
* Tests that background image block support works as expected.
*
* @ticket 59357
* @ticket 60175
*
* @covers ::wp_render_background_support
*
@@ -135,7 +136,24 @@ class Tests_Block_Supports_WpRenderBackgroundSupport extends WP_UnitTestCase {
'source' => 'file',
),
),
'expected_wrapper' => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'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(
'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' => '<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>',
'wrapper' => '<div>Content</div>',
),
'background image style is appended if a style attribute already exists' => array(
@@ -150,8 +168,8 @@ class Tests_Block_Supports_WpRenderBackgroundSupport extends WP_UnitTestCase {
'source' => 'file',
),
),
'expected_wrapper' => '<div classname="wp-block-test" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div classname="wp-block-test" style="color: red">Content</div>',
'expected_wrapper' => '<div class="wp-block-test has-background" style="color: red;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div class="wp-block-test" style="color: red">Content</div>',
),
'background image style is appended if a style attribute containing multiple styles already exists' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
@@ -165,8 +183,8 @@ class Tests_Block_Supports_WpRenderBackgroundSupport extends WP_UnitTestCase {
'source' => 'file',
),
),
'expected_wrapper' => '<div classname="wp-block-test" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div classname="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
'expected_wrapper' => '<div class="wp-block-test has-background" style="color: red;font-size: 15px;background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
'wrapper' => '<div class="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
),
'background image style is not applied if the block does not support background image' => array(
'theme_name' => 'block-theme-child-with-fluid-typography',
tests/phpunit/tests/style-engine/styleEngine.php
+10 -5
View File
@@ -27,6 +27,7 @@ class Tests_wpStyleEngine extends WP_UnitTestCase {
* @ticket 56467
* @ticket 58549
* @ticket 58590
* @ticket 60175
*
* @covers ::wp_style_engine_get_styles
*
@@ -520,18 +521,22 @@ class Tests_wpStyleEngine extends WP_UnitTestCase {
'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',
),
),
),
tests/phpunit/tests/theme/wpThemeJson.php
+2
View File
@@ -264,6 +264,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
$expected = array(
'background' => array(
'backgroundImage' => true,
'backgroundSize' => true,
),
'border' => array(
'width' => true,
@@ -300,6 +301,7 @@ class Tests_Theme_wpThemeJson extends WP_UnitTestCase {
'core/group' => array(
'background' => array(
'backgroundImage' => true,
'backgroundSize' => true,
),
'border' => array(
'width' => true,