From 430fec2caae67791603705a02fc6022aa3695601 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Tue, 26 Jul 2022 12:49:01 +0530 Subject: [PATCH 1/5] add box-shadow support to blocks in theme.json --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 3 +++ 1 file changed, 3 insertions(+) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index a68e2dbc427167..76c84a346cf2a6 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -78,6 +78,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { 'text-decoration' => array( 'typography', 'textDecoration' ), 'text-transform' => array( 'typography', 'textTransform' ), 'filter' => array( 'filter', 'duotone' ), + 'box-shadow' => array( 'shadow' ), ); /** @@ -313,6 +314,7 @@ public static function remove_insecure_properties( $theme_json ) { 'gradient' => null, 'text' => null, ), + 'shadow' => null, 'filter' => array( 'duotone' => null, ), @@ -1112,6 +1114,7 @@ protected static function get_property_value( $styles, $path, $theme_json = null 'palette' => null, 'text' => null, ), + 'shadow' => null, 'custom' => null, 'layout' => array( 'contentSize' => null, From bf3f74d371fb964b44a214f93b94e51e1e47360b Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Wed, 3 Aug 2022 19:04:41 +0530 Subject: [PATCH 2/5] reduce specificity for default button shadow --- packages/block-library/src/button/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index e5544d7e148083..c2376de87201c8 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -4,7 +4,6 @@ $blocks-block__margin: 0.5em; // Prefer the link selector instead of the regular button classname // to support the previous markup in addition to the new one. .wp-block-button__link { - box-shadow: none; cursor: pointer; display: inline-block; text-align: center; @@ -32,6 +31,7 @@ $blocks-block__margin: 0.5em; // They are needed for backwards compatibility. :where(.wp-block-button__link) { // This needs a low specificity so it won't override the rules from the button element if defined in theme.json. + box-shadow: none; text-decoration: none; // 100% causes an oval, but any explicit but really high value retains the pill shape. From 6755af314f16f03e7aeb60443e5317f9779a7daf Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Wed, 3 Aug 2022 19:05:06 +0530 Subject: [PATCH 3/5] update schema for shadow --- schemas/json/theme.json | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 25a973d26ff5ab..4a1441f5887283 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -1078,6 +1078,10 @@ } }, "additionalProperties": false + }, + "shadow": { + "description": "Sets the `box-shadow` CSS property.", + "type": "string" } } }, @@ -1092,7 +1096,9 @@ "border": {}, "color": {}, "spacing": {}, - "typography": {} + "typography": {}, + "filter": {}, + "shadow": {} }, "additionalProperties": false } From 2b0c347439c2b0a6cb1e5def4f2e1361455a14aa Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Wed, 3 Aug 2022 19:36:15 +0530 Subject: [PATCH 4/5] fix lint issues --- lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 76c84a346cf2a6..90d804313550ab 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -78,7 +78,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 { 'text-decoration' => array( 'typography', 'textDecoration' ), 'text-transform' => array( 'typography', 'textTransform' ), 'filter' => array( 'filter', 'duotone' ), - 'box-shadow' => array( 'shadow' ), + 'box-shadow' => array( 'shadow' ), ); /** @@ -314,7 +314,7 @@ public static function remove_insecure_properties( $theme_json ) { 'gradient' => null, 'text' => null, ), - 'shadow' => null, + 'shadow' => null, 'filter' => array( 'duotone' => null, ), @@ -1114,7 +1114,6 @@ protected static function get_property_value( $styles, $path, $theme_json = null 'palette' => null, 'text' => null, ), - 'shadow' => null, 'custom' => null, 'layout' => array( 'contentSize' => null, From 13a7a9fd5337d295bf805a7b3f04f139d597d693 Mon Sep 17 00:00:00 2001 From: madhusudhand Date: Fri, 12 Aug 2022 17:28:15 +0530 Subject: [PATCH 5/5] add box-shadow support in templates --- lib/block-supports/shadow.php | 124 ++++++++++++++++++ .../wordpress-6.1/class-wp-theme-json-6-1.php | 10 ++ lib/load.php | 1 + .../style-engine/class-wp-style-engine.php | 9 ++ 4 files changed, 144 insertions(+) create mode 100644 lib/block-supports/shadow.php diff --git a/lib/block-supports/shadow.php b/lib/block-supports/shadow.php new file mode 100644 index 00000000000000..392c051a7ced4e --- /dev/null +++ b/lib/block-supports/shadow.php @@ -0,0 +1,124 @@ +supports, array( 'shadow' ), false ); + if ( ! $has_shadow_support ) { + return; + } + + if ( ! $block_type->attributes ) { + $block_type->attributes = array(); + } + + if ( $has_shadow_support && ! array_key_exists( 'style', $block_type->attributes ) ) { + $block_type->attributes['style'] = array( + 'type' => 'object', + ); + } + + if ( $has_shadow_support && ! array_key_exists( 'shadow', $block_type->attributes ) ) { + $block_type->attributes['shadow'] = array( + 'type' => 'string', + ); + } +} + +/** + * Add CSS classes and inline styles for typography features such as font sizes + * to the incoming attributes array. This will be applied to the block markup in + * the front-end. + * + * @param WP_Block_Type $block_type Block type. + * @param array $block_attributes Block attributes. + * + * @return array Typography CSS classes and inline styles. + */ +function gutenberg_apply_shadow_support( $block_type, $block_attributes ) { + if ( ! property_exists( $block_type, 'supports' ) ) { + return array(); + } + + $has_shadow_support = _wp_array_get( $block_type->supports, array( 'shadow' ), false ); + if ( ! $has_shadow_support ) { + return array(); + } + + $shadow_block_styles = array(); + + // print_r($block_attributes); + + $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 = gutenberg_style_engine_get_styles( + array( 'shadow' => $shadow_block_styles ), + // array( 'convert_vars_to_classnames' => true ) + ); + + if ( ! empty( $styles['classnames'] ) ) { + $attributes['class'] = $styles['classnames']; + } + + if ( ! empty( $styles['css'] ) ) { + $attributes['style'] = $styles['css']; + } + + return $attributes; +} + + +/** + * Returns a font-size value based on a given font-size preset. + * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values. + * + * @param array $preset fontSizes preset value as seen in theme.json. + * @param boolean $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. + * @return string Font-size value. + */ +function gutenberg_get_shadow_value( $preset ) { + $slug = $preset['slug']; + $x = isset($preset['x']) ? $preset['x'] : '0'; + $y = isset($preset['y']) ? $preset['y'] : '0'; + $blur = isset($preset['blur']) ? $preset['blur'] : '0'; + $spread = isset($preset['spread']) ? $preset['spread'] : '0'; + $color = $preset['color']; + $inset = $preset['inset']; + + $shadow = $x .' '. $y.' '.$blur.' '.$spread; + + if (isset($color)) { + // set color only if defined, let it fallback to browser default otherwise + $shadow.= ' '.$color; + } + + if (isset($inset) && true === $inset) { + $shadow.= ' inset'; + } + + return $shadow; +} + +// Register the block support. +WP_Block_Supports::get_instance()->register( + 'shadow', + array( + 'register_attribute' => 'gutenberg_register_shadow_support', + 'apply' => 'gutenberg_apply_shadow_support', + ) +); diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php index 90d804313550ab..9490e8df715331 100644 --- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php +++ b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php @@ -1084,6 +1084,15 @@ protected static function get_property_value( $styles, $path, $theme_json = null 'classes' => array(), 'properties' => array( 'padding', 'margin' ), ), + array( + 'path' => array( 'shadows' ), + 'prevent_override' => false, + 'use_default_names' => false, + 'value_func' => 'gutenberg_get_shadow_value', + 'css_vars' => '--wp--preset--shadow--$slug', + 'classes' => array( '.has-$slug-shadow' => 'box-shadow' ), + 'properties' => array( 'box-shadow' ), + ), ); /** @@ -1142,6 +1151,7 @@ protected static function get_property_value( $styles, $path, $theme_json = null 'textDecoration' => null, 'textTransform' => null, ), + 'shadows' => null, ); /** diff --git a/lib/load.php b/lib/load.php index 9600d3100d3b7e..4942a36db7c213 100644 --- a/lib/load.php +++ b/lib/load.php @@ -140,3 +140,4 @@ function gutenberg_is_experiment_enabled( $name ) { require __DIR__ . '/block-supports/spacing.php'; require __DIR__ . '/block-supports/dimensions.php'; require __DIR__ . '/block-supports/duotone.php'; +require __DIR__ . '/block-supports/shadow.php'; diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php index b991265f62294f..5d3276afe45aa6 100644 --- a/packages/style-engine/class-wp-style-engine.php +++ b/packages/style-engine/class-wp-style-engine.php @@ -212,6 +212,15 @@ class WP_Style_Engine { 'path' => array( 'typography', 'letterSpacing' ), ), ), + "shadow" => array( + 'property_keys' => array( + 'default' => 'box-shadow', + ), + 'path' => array( 'shadows' ), + 'classnames' => array( + 'has-$slug-shadow' => 'box-shadow', + ), + ), ); /**