Skip to content

Commit e55e9c2

Browse files
tellthemachinestellthemachines
committed
Editor: add box shadow support to blocks.
Adds the ability for blocks to declare support for CSS box-shadow and processing of necessary styles. Props madhudollu, sabernhardt, ramonopoly, spacedmonkey, mukesh27. Fixes #58590. git-svn-id: https://develop.svn.wordpress.org/trunk@56046 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 5b483bf commit e55e9c2

6 files changed

Lines changed: 199 additions & 0 deletions

File tree

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<?php
2+
/**
3+
* Shadow block support flag.
4+
*
5+
* @package WordPress
6+
* @since 6.3.0
7+
*/
8+
9+
/**
10+
* Registers the style and shadow block attributes for block types that support it.
11+
*
12+
* @since 6.3.0
13+
* @access private
14+
*
15+
* @param WP_Block_Type $block_type Block Type.
16+
*/
17+
function wp_register_shadow_support( $block_type ) {
18+
$has_shadow_support = block_has_support( $block_type, array( 'shadow' ), false );
19+
20+
if ( ! $has_shadow_support ) {
21+
return;
22+
}
23+
24+
if ( ! $block_type->attributes ) {
25+
$block_type->attributes = array();
26+
}
27+
28+
if ( array_key_exists( 'style', $block_type->attributes ) ) {
29+
$block_type->attributes['style'] = array(
30+
'type' => 'object',
31+
);
32+
}
33+
34+
if ( array_key_exists( 'shadow', $block_type->attributes ) ) {
35+
$block_type->attributes['shadow'] = array(
36+
'type' => 'string',
37+
);
38+
}
39+
}
40+
41+
/**
42+
* Add CSS classes and inline styles for shadow features to the incoming attributes array.
43+
* This will be applied to the block markup in the front-end.
44+
*
45+
* @since 6.3.0
46+
* @access private
47+
*
48+
* @param WP_Block_Type $block_type Block type.
49+
* @param array $block_attributes Block attributes.
50+
* @return array Shadow CSS classes and inline styles.
51+
*/
52+
function wp_apply_shadow_support( $block_type, $block_attributes ) {
53+
$has_shadow_support = block_has_support( $block_type, array( 'shadow' ), false );
54+
55+
if ( ! $has_shadow_support ) {
56+
return array();
57+
}
58+
59+
$shadow_block_styles = array();
60+
61+
$preset_shadow = array_key_exists( 'shadow', $block_attributes ) ? "var:preset|shadow|{$block_attributes['shadow']}" : null;
62+
$custom_shadow = isset( $block_attributes['style']['shadow'] ) ? $block_attributes['style']['shadow'] : null;
63+
$shadow_block_styles['shadow'] = $preset_shadow ? $preset_shadow : $custom_shadow;
64+
65+
$attributes = array();
66+
$styles = wp_style_engine_get_styles( $shadow_block_styles );
67+
68+
if ( ! empty( $styles['css'] ) ) {
69+
$attributes['style'] = $styles['css'];
70+
}
71+
72+
return $attributes;
73+
}
74+
75+
// Register the block support.
76+
WP_Block_Supports::get_instance()->register(
77+
'shadow',
78+
array(
79+
'register_attribute' => 'wp_register_shadow_support',
80+
'apply' => 'wp_apply_shadow_support',
81+
)
82+
);

‎src/wp-includes/kses.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2280,6 +2280,7 @@ function kses_init() {
22802280
* @since 6.2.0 Added support for `aspect-ratio`, `position`, `top`, `right`, `bottom`, `left`,
22812281
* and `z-index` CSS properties.
22822282
* @since 6.3.0 Extended support for `filter` to accept a URL and added support for repeat().
2283+
* Added support for `box-shadow`.
22832284
*
22842285
* @param string $css A string of CSS rules.
22852286
* @param string $deprecated Not used.
@@ -2447,6 +2448,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
24472448
'bottom',
24482449
'left',
24492450
'z-index',
2451+
'box-shadow',
24502452
'aspect-ratio',
24512453

24522454
// Custom CSS properties.

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,17 @@ final class WP_Style_Engine {
148148
),
149149
),
150150
),
151+
'shadow' => array(
152+
'shadow' => array(
153+
'property_keys' => array(
154+
'default' => 'box-shadow',
155+
),
156+
'path' => array( 'shadow' ),
157+
'css_vars' => array(
158+
'shadow' => '--wp--preset--shadow--$slug',
159+
),
160+
),
161+
),
151162
'dimensions' => array(
152163
'minHeight' => array(
153164
'property_keys' => array(

‎src/wp-settings.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,6 +331,7 @@
331331
require ABSPATH . WPINC . '/block-supports/custom-classname.php';
332332
require ABSPATH . WPINC . '/block-supports/dimensions.php';
333333
require ABSPATH . WPINC . '/block-supports/duotone.php';
334+
require ABSPATH . WPINC . '/block-supports/shadow.php';
334335
require ABSPATH . WPINC . '/block-supports/elements.php';
335336
require ABSPATH . WPINC . '/block-supports/generated-classname.php';
336337
require ABSPATH . WPINC . '/block-supports/layout.php';

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<?php
2+
/**
3+
* @group block-supports
4+
*
5+
* @covers ::wp_apply_shadow_support
6+
*/
7+
class Test_Block_Supports_Shadow extends WP_UnitTestCase {
8+
/**
9+
* @var string|null
10+
*/
11+
private $test_block_name;
12+
13+
public function set_up() {
14+
parent::set_up();
15+
$this->test_block_name = null;
16+
}
17+
18+
public function tear_down() {
19+
unregister_block_type( $this->test_block_name );
20+
$this->test_block_name = null;
21+
parent::set_up();
22+
}
23+
24+
/**
25+
* @ticket 58590
26+
*/
27+
public function test_shadow_style_is_applied() {
28+
$this->test_block_name = 'test/shadow-style-is-applied';
29+
register_block_type(
30+
$this->test_block_name,
31+
array(
32+
'api_version' => 3,
33+
'attributes' => array(
34+
'style' => array(
35+
'type' => 'object',
36+
),
37+
),
38+
'supports' => array(
39+
'shadow' => true,
40+
),
41+
)
42+
);
43+
$registry = WP_Block_Type_Registry::get_instance();
44+
$block_type = $registry->get_registered( $this->test_block_name );
45+
$block_atts = array(
46+
'style' => array(
47+
'shadow' => '60px -16px teal',
48+
),
49+
);
50+
51+
$actual = wp_apply_shadow_support( $block_type, $block_atts );
52+
$expected = array(
53+
'style' => 'box-shadow:60px -16px teal;',
54+
);
55+
56+
$this->assertSame( $expected, $actual );
57+
}
58+
59+
/**
60+
* @ticket 58590
61+
*/
62+
public function test_shadow_without_block_supports() {
63+
$this->test_block_name = 'test/shadow-with-skipped-serialization-block-supports';
64+
register_block_type(
65+
$this->test_block_name,
66+
array(
67+
'api_version' => 2,
68+
'attributes' => array(
69+
'style' => array(
70+
'type' => 'object',
71+
),
72+
),
73+
'supports' => array(),
74+
)
75+
);
76+
$registry = WP_Block_Type_Registry::get_instance();
77+
$block_type = $registry->get_registered( $this->test_block_name );
78+
$block_atts = array(
79+
'style' => array(
80+
'shadow' => '60px -16px teal',
81+
),
82+
);
83+
84+
$actual = wp_apply_spacing_support( $block_type, $block_atts );
85+
$expected = array();
86+
87+
$this->assertSame( $expected, $actual );
88+
}
89+
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ public function tear_down() {
2626
*
2727
* @ticket 56467
2828
* @ticket 58549
29+
* @ticket 58590
2930
*
3031
* @covers ::wp_style_engine_get_styles
3132
*
@@ -182,6 +183,19 @@ public function data_wp_style_engine_get_styles() {
182183
),
183184
),
184185

186+
'inline_valid_shadow_style' => array(
187+
'block_styles' => array(
188+
'shadow' => 'inset 5em 1em gold',
189+
),
190+
'options' => null,
191+
'expected_output' => array(
192+
'css' => 'box-shadow:inset 5em 1em gold;',
193+
'declarations' => array(
194+
'box-shadow' => 'inset 5em 1em gold',
195+
),
196+
),
197+
),
198+
185199
'inline_valid_typography_style' => array(
186200
'block_styles' => array(
187201
'typography' => array(

0 commit comments

Comments
 (0)