diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index 7c9b7f75da5d45..4eb6067209f03b 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -195,6 +195,13 @@ CSS and SVG filter styles. | --- | --- |--- | | duotone | string | | +--- + +### shadow + +Box shadow styles. + + --- 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 f1371c04cacd35..220ef97d7fcece 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 @@ -79,6 +79,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' ), ); /** @@ -153,9 +154,11 @@ protected static function sanitize( $input, $valid_block_names, $valid_element_n // hence, the schema for blocks & elements should not have them. $styles_non_top_level = static::VALID_STYLES; foreach ( array_keys( $styles_non_top_level ) as $section ) { - foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) { - if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) { - unset( $styles_non_top_level[ $section ][ $prop ] ); + if ( array_key_exists( $section, $styles_non_top_level ) && is_array( $styles_non_top_level[ $section ] ) ) { + foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) { + if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) { + unset( $styles_non_top_level[ $section ][ $prop ] ); + } } } } @@ -314,6 +317,7 @@ public static function remove_insecure_properties( $theme_json ) { 'gradient' => null, 'text' => null, ), + 'shadow' => null, 'filter' => array( 'duotone' => null, ), diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 83f8602f81de21..58fe01e12e99f2 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; @@ -25,6 +24,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. diff --git a/packages/style-engine/src/styles/index.ts b/packages/style-engine/src/styles/index.ts index 290c319778e292..90b312c215bbee 100644 --- a/packages/style-engine/src/styles/index.ts +++ b/packages/style-engine/src/styles/index.ts @@ -3,6 +3,7 @@ */ import border from './border'; import color from './color'; +import shadow from './shadow'; import spacing from './spacing'; import typography from './typography'; @@ -11,4 +12,5 @@ export const styleDefinitions = [ ...color, ...spacing, ...typography, + ...shadow, ]; diff --git a/packages/style-engine/src/styles/shadow/index.ts b/packages/style-engine/src/styles/shadow/index.ts new file mode 100644 index 00000000000000..d547b94c3fd7ea --- /dev/null +++ b/packages/style-engine/src/styles/shadow/index.ts @@ -0,0 +1,14 @@ +/** + * Internal dependencies + */ +import type { Style, StyleOptions } from '../../types'; +import { generateRule } from '../utils'; + +const shadow = { + name: 'shadow', + generate: ( style: Style, options: StyleOptions ) => { + return generateRule( style, options, [ 'shadow' ], 'boxShadow' ); + }, +}; + +export default [ shadow ]; diff --git a/schemas/json/theme.json b/schemas/json/theme.json index b177bbf8af3e06..fb8a1f28b5a569 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -1087,6 +1087,10 @@ } }, "additionalProperties": false + }, + "shadow": { + "description": "Box shadow styles.", + "type": "string" } } }, @@ -1101,7 +1105,9 @@ "border": {}, "color": {}, "spacing": {}, - "typography": {} + "typography": {}, + "filter": {}, + "shadow": {} }, "additionalProperties": false }