Skip to content

Commit 5899a63

Browse files
andrewserongandrewserong
committed
Background image block support: Add tests, adjust injection logic slightly
1 parent e86aae1 commit 5899a63

File tree

2 files changed

+192
-2
lines changed

2 files changed

+192
-2
lines changed

‎lib/block-supports/background.php

+5-2
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,11 @@ function gutenberg_render_background_support( $block_content, $block ) {
7878
$existing_style = $tags->get_attribute( 'style' );
7979
$updated_style = '';
8080

81-
if ( ! empty( $existing_style ) && ! str_ends_with( $existing_style, ';' ) ) {
82-
$updated_style = $existing_style . '; ';
81+
if ( ! empty( $existing_style ) ) {
82+
$updated_style = $existing_style;
83+
if ( ! str_ends_with( $existing_style, ';' ) ) {
84+
$updated_style .= ';';
85+
}
8386
}
8487

8588
$updated_style .= $styles['css'];

‎phpunit/block-supports/background-test.php

+187
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
<?php
2+
3+
/**
4+
* Test the background block support.
5+
*
6+
* @package Gutenberg
7+
*/
8+
class WP_Block_Supports_Background_Test extends WP_UnitTestCase {
9+
/**
10+
* @var string|null
11+
*/
12+
private $test_block_name;
13+
14+
/**
15+
* Theme root directory.
16+
*
17+
* @var string
18+
*/
19+
private $theme_root;
20+
21+
/**
22+
* Original theme directory.
23+
*
24+
* @var string
25+
*/
26+
private $orig_theme_dir;
27+
28+
public function set_up() {
29+
parent::set_up();
30+
$this->test_block_name = null;
31+
$this->theme_root = realpath( __DIR__ . '/../data/themedir1' );
32+
$this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
33+
34+
// /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
35+
$GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
36+
37+
add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
38+
add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
39+
add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
40+
41+
// Clear caches.
42+
wp_clean_themes_cache();
43+
unset( $GLOBALS['wp_themes'] );
44+
WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
45+
}
46+
47+
public function tear_down() {
48+
$GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
49+
50+
// Clear up the filters to modify the theme root.
51+
remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
52+
remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
53+
remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
54+
55+
wp_clean_themes_cache();
56+
unset( $GLOBALS['wp_themes'] );
57+
WP_Style_Engine_CSS_Rules_Store::remove_all_stores();
58+
unregister_block_type( $this->test_block_name );
59+
$this->test_block_name = null;
60+
parent::tear_down();
61+
}
62+
63+
public function filter_set_theme_root() {
64+
return $this->theme_root;
65+
}
66+
67+
/**
68+
* Tests that background image block support works as expected.
69+
*
70+
* @covers ::gutenberg_render_background_support
71+
*
72+
* @dataProvider data_background_block_support
73+
*
74+
* @param string $theme_name The theme to switch to.
75+
* @param string $block_name The test block name to register.
76+
* @param mixed $background_settings The background block support settings.
77+
* @param mixed $background_style The background styles within the block attributes.
78+
* @param string $expected_wrapper Expected markup for the block wrapper.
79+
* @param string $wrapper Existing markup for the block wrapper.
80+
*/
81+
public function test_background_block_support( $theme_name, $block_name, $background_settings, $background_style, $expected_wrapper, $wrapper ) {
82+
switch_theme( $theme_name );
83+
$this->test_block_name = $block_name;
84+
85+
register_block_type(
86+
$this->test_block_name,
87+
array(
88+
'api_version' => 2,
89+
'attributes' => array(
90+
'style' => array(
91+
'type' => 'object',
92+
),
93+
),
94+
'supports' => array(
95+
'background' => $background_settings,
96+
),
97+
)
98+
);
99+
100+
$block = array(
101+
'blockName' => $block_name,
102+
'attrs' => array(
103+
'style' => array(
104+
'background' => $background_style,
105+
),
106+
),
107+
);
108+
109+
$actual = gutenberg_render_background_support( $wrapper, $block );
110+
111+
$this->assertEquals(
112+
$expected_wrapper,
113+
$actual,
114+
'Background block wrapper markup should be correct'
115+
);
116+
}
117+
118+
/**
119+
* Data provider.
120+
*
121+
* @return array
122+
*/
123+
public function data_background_block_support() {
124+
return array(
125+
'background image style is applied' => array(
126+
'theme_name' => 'block-theme-child-with-fluid-typography',
127+
'block_name' => 'test/background-rules-are-output',
128+
'background_settings' => array(
129+
'backgroundImage' => true,
130+
),
131+
'background_style' => array(
132+
'backgroundImage' => array(
133+
'url' => 'https://example.com/image.jpg',
134+
'source' => 'file',
135+
),
136+
),
137+
'expected_wrapper' => '<div style="background-image:url(&#039;https://example.com/image.jpg&#039;);background-size:cover;">Content</div>',
138+
'wrapper' => '<div>Content</div>',
139+
),
140+
'background image style is appended if a style attribute already exists' => array(
141+
'theme_name' => 'block-theme-child-with-fluid-typography',
142+
'block_name' => 'test/background-rules-are-output',
143+
'background_settings' => array(
144+
'backgroundImage' => true,
145+
),
146+
'background_style' => array(
147+
'backgroundImage' => array(
148+
'url' => 'https://example.com/image.jpg',
149+
'source' => 'file',
150+
),
151+
),
152+
'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>',
153+
'wrapper' => '<div classname="wp-block-test" style="color: red">Content</div>',
154+
),
155+
'background image style is appended if a style attribute containing multiple styles already exists' => array(
156+
'theme_name' => 'block-theme-child-with-fluid-typography',
157+
'block_name' => 'test/background-rules-are-output',
158+
'background_settings' => array(
159+
'backgroundImage' => true,
160+
),
161+
'background_style' => array(
162+
'backgroundImage' => array(
163+
'url' => 'https://example.com/image.jpg',
164+
'source' => 'file',
165+
),
166+
),
167+
'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>',
168+
'wrapper' => '<div classname="wp-block-test" style="color: red;font-size: 15px;">Content</div>',
169+
),
170+
'background image style is not applied if the block does not support background image' => array(
171+
'theme_name' => 'block-theme-child-with-fluid-typography',
172+
'block_name' => 'test/background-rules-are-not-output',
173+
'background_settings' => array(
174+
'backgroundImage' => false,
175+
),
176+
'background_style' => array(
177+
'backgroundImage' => array(
178+
'url' => 'https://example.com/image.jpg',
179+
'source' => 'file',
180+
),
181+
),
182+
'expected_wrapper' => '<div>Content</div>',
183+
'wrapper' => '<div>Content</div>',
184+
),
185+
);
186+
}
187+
}

0 commit comments

Comments
 (0)