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
This commit is contained in:
isabel_brison 2023-06-26 23:44:29 +00:00
parent 1d66cc61ef
commit 4e0fbeb04c
5 changed files with 97 additions and 1 deletions

View File

@ -0,0 +1,82 @@
<?php
/**
* Shadow block support flag.
*
* @package WordPress
* @since 6.3.0
*/
/**
* Registers the style and shadow block attributes for block types that support it.
*
* @since 6.3.0
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_shadow_support( $block_type ) {
$has_shadow_support = block_has_support( $block_type, array( 'shadow' ), false );
if ( ! $has_shadow_support ) {
return;
}
if ( ! $block_type->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',
)
);

View File

@ -2280,6 +2280,7 @@ function kses_init() {
* @since 6.2.0 Added support for `aspect-ratio`, `position`, `top`, `right`, `bottom`, `left`, * @since 6.2.0 Added support for `aspect-ratio`, `position`, `top`, `right`, `bottom`, `left`,
* and `z-index` CSS properties. * and `z-index` CSS properties.
* @since 6.3.0 Extended support for `filter` to accept a URL and added support for repeat(). * @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 $css A string of CSS rules.
* @param string $deprecated Not used. * @param string $deprecated Not used.
@ -2447,6 +2448,7 @@ function safecss_filter_attr( $css, $deprecated = '' ) {
'bottom', 'bottom',
'left', 'left',
'z-index', 'z-index',
'box-shadow',
'aspect-ratio', 'aspect-ratio',
// Custom CSS properties. // Custom CSS properties.

View File

@ -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( 'dimensions' => array(
'minHeight' => array( 'minHeight' => array(
'property_keys' => array( 'property_keys' => array(

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @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. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

View File

@ -331,6 +331,7 @@ require ABSPATH . WPINC . '/block-supports/colors.php';
require ABSPATH . WPINC . '/block-supports/custom-classname.php'; require ABSPATH . WPINC . '/block-supports/custom-classname.php';
require ABSPATH . WPINC . '/block-supports/dimensions.php'; require ABSPATH . WPINC . '/block-supports/dimensions.php';
require ABSPATH . WPINC . '/block-supports/duotone.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/elements.php';
require ABSPATH . WPINC . '/block-supports/generated-classname.php'; require ABSPATH . WPINC . '/block-supports/generated-classname.php';
require ABSPATH . WPINC . '/block-supports/layout.php'; require ABSPATH . WPINC . '/block-supports/layout.php';