From 4e0fbeb04cc14618ac0ee56f4a0e3597b28492ee Mon Sep 17 00:00:00 2001 From: isabel_brison Date: Mon, 26 Jun 2023 23:44:29 +0000 Subject: [PATCH] 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. Built from https://develop.svn.wordpress.org/trunk@56046 git-svn-id: http://core.svn.wordpress.org/trunk@55558 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-supports/shadow.php | 82 +++++++++++++++++++ wp-includes/kses.php | 2 + .../style-engine/class-wp-style-engine.php | 11 +++ wp-includes/version.php | 2 +- wp-settings.php | 1 + 5 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 wp-includes/block-supports/shadow.php diff --git a/wp-includes/block-supports/shadow.php b/wp-includes/block-supports/shadow.php new file mode 100644 index 0000000000..7a710c5222 --- /dev/null +++ b/wp-includes/block-supports/shadow.php @@ -0,0 +1,82 @@ +attributes ) { + $block_type->attributes = array(); + } + + if ( array_key_exists( 'style', $block_type->attributes ) ) { + $block_type->attributes['style'] = array( + 'type' => 'object', + ); + } + + if ( array_key_exists( 'shadow', $block_type->attributes ) ) { + $block_type->attributes['shadow'] = array( + 'type' => 'string', + ); + } +} + +/** + * Add CSS classes and inline styles for shadow features to the incoming attributes array. + * This will be applied to the block markup in the front-end. + * + * @since 6.3.0 + * @access private + * + * @param WP_Block_Type $block_type Block type. + * @param array $block_attributes Block attributes. + * @return array Shadow CSS classes and inline styles. + */ +function wp_apply_shadow_support( $block_type, $block_attributes ) { + $has_shadow_support = block_has_support( $block_type, array( 'shadow' ), false ); + + if ( ! $has_shadow_support ) { + return array(); + } + + $shadow_block_styles = array(); + + $preset_shadow = array_key_exists( 'shadow', $block_attributes ) ? "var:preset|shadow|{$block_attributes['shadow']}" : null; + $custom_shadow = isset( $block_attributes['style']['shadow'] ) ? $block_attributes['style']['shadow'] : null; + $shadow_block_styles['shadow'] = $preset_shadow ? $preset_shadow : $custom_shadow; + + $attributes = array(); + $styles = wp_style_engine_get_styles( $shadow_block_styles ); + + if ( ! empty( $styles['css'] ) ) { + $attributes['style'] = $styles['css']; + } + + return $attributes; +} + +// Register the block support. +WP_Block_Supports::get_instance()->register( + 'shadow', + array( + 'register_attribute' => 'wp_register_shadow_support', + 'apply' => 'wp_apply_shadow_support', + ) +); diff --git a/wp-includes/kses.php b/wp-includes/kses.php index df9ae74b08..fd0d67dfed 100644 --- a/wp-includes/kses.php +++ b/wp-includes/kses.php @@ -2280,6 +2280,7 @@ function kses_init() { * @since 6.2.0 Added support for `aspect-ratio`, `position`, `top`, `right`, `bottom`, `left`, * and `z-index` CSS properties. * @since 6.3.0 Extended support for `filter` to accept a URL and added support for repeat(). + * Added support for `box-shadow`. * * @param string $css A string of CSS rules. * @param string $deprecated Not used. @@ -2447,6 +2448,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) { 'bottom', 'left', 'z-index', + 'box-shadow', 'aspect-ratio', // Custom CSS properties. diff --git a/wp-includes/style-engine/class-wp-style-engine.php b/wp-includes/style-engine/class-wp-style-engine.php index 3ec84aba6b..bdaae4a1f7 100644 --- a/wp-includes/style-engine/class-wp-style-engine.php +++ b/wp-includes/style-engine/class-wp-style-engine.php @@ -148,6 +148,17 @@ final class WP_Style_Engine { ), ), ), + 'shadow' => array( + 'shadow' => array( + 'property_keys' => array( + 'default' => 'box-shadow', + ), + 'path' => array( 'shadow' ), + 'css_vars' => array( + 'shadow' => '--wp--preset--shadow--$slug', + ), + ), + ), 'dimensions' => array( 'minHeight' => array( 'property_keys' => array( diff --git a/wp-includes/version.php b/wp-includes/version.php index b5221dc0e0..6d99ce52b3 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.3-alpha-56045'; +$wp_version = '6.3-alpha-56046'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. diff --git a/wp-settings.php b/wp-settings.php index f0c6639a46..f1c1e0cd37 100644 --- a/wp-settings.php +++ b/wp-settings.php @@ -331,6 +331,7 @@ require ABSPATH . WPINC . '/block-supports/colors.php'; require ABSPATH . WPINC . '/block-supports/custom-classname.php'; require ABSPATH . WPINC . '/block-supports/dimensions.php'; require ABSPATH . WPINC . '/block-supports/duotone.php'; +require ABSPATH . WPINC . '/block-supports/shadow.php'; require ABSPATH . WPINC . '/block-supports/elements.php'; require ABSPATH . WPINC . '/block-supports/generated-classname.php'; require ABSPATH . WPINC . '/block-supports/layout.php';