diff --git a/docs/reference-guides/core-blocks/README.md b/docs/reference-guides/core-blocks/README.md index 1b4d74af5b9bdc..de51e84be9e9e3 100644 --- a/docs/reference-guides/core-blocks/README.md +++ b/docs/reference-guides/core-blocks/README.md @@ -961,7 +961,7 @@ Display the tab buttons for a tabbed interface. - **Name:** [core/tab-list](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tab-list/) - **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/) - **Parent:** core/tabs -- **Supports:** ariaLabel, color (background, text), layout (default, ~~allowOrientation~~, ~~allowVerticalAlignment~~, ~~allowWrap~~), spacing (blockGap, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~visibility~~ +- **Supports:** ariaLabel, color (background, text), layout (default, ~~allowOrientation~~, ~~allowVerticalAlignment~~, ~~allowWrap~~), shadow, spacing (blockGap, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~visibility~~ - **Attributes:** tabs ## Tab Panel diff --git a/packages/block-library/src/tab-list/README.md b/packages/block-library/src/tab-list/README.md index 6d49a009cbeb38..b24fb605e4e663 100644 --- a/packages/block-library/src/tab-list/README.md +++ b/packages/block-library/src/tab-list/README.md @@ -42,6 +42,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing): - `padding`: `true` - `blockGap`: `true` +- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true` ## Context @@ -56,6 +57,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._ - **border**: `.wp-block-tab-list button` +- **shadow**: `.wp-block-tab-list button` - **color**: - background: `.wp-block-tab-list button` - text: `.wp-block-tab-list button` diff --git a/packages/block-library/src/tab-list/block.json b/packages/block-library/src/tab-list/block.json index 3b489fc86d546a..95fa9eb3d7e0f0 100644 --- a/packages/block-library/src/tab-list/block.json +++ b/packages/block-library/src/tab-list/block.json @@ -65,10 +65,14 @@ "padding": true, "blockGap": true } + }, + "shadow": { + "__experimentalSkipSerialization": true } }, "selectors": { "border": ".wp-block-tab-list button", + "shadow": ".wp-block-tab-list button", "color": { "background": ".wp-block-tab-list button", "text": ".wp-block-tab-list button" diff --git a/packages/block-library/src/tab-list/edit.jsx b/packages/block-library/src/tab-list/edit.jsx index a512128c12df3f..28479138895492 100644 --- a/packages/block-library/src/tab-list/edit.jsx +++ b/packages/block-library/src/tab-list/edit.jsx @@ -7,6 +7,7 @@ import { RichText, __experimentalUseBorderProps as useBorderProps, __experimentalUseColorProps as useColorProps, + __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, } from '@wordpress/block-editor'; import { @@ -34,6 +35,7 @@ function Edit( { const colorProps = useColorProps( attributes ); const borderProps = useBorderProps( attributes ); const spacingProps = getSpacingClassesAndStyles( attributes ); + const shadowProps = getShadowClassesAndStyles( attributes ); const dropdownMenuProps = useToolsPanelDropdownMenuProps(); const { tabsClientId, tabPanels, editorActiveTabIndex, activeTabIndex } = @@ -152,6 +154,7 @@ function Edit( { ...colorProps.style, ...borderProps.style, ...spacingProps.style, + ...shadowProps.style, }; return ( diff --git a/packages/block-library/src/tab-list/save.jsx b/packages/block-library/src/tab-list/save.jsx index 0570c34d6e2dd2..d9655b9644741b 100644 --- a/packages/block-library/src/tab-list/save.jsx +++ b/packages/block-library/src/tab-list/save.jsx @@ -4,6 +4,7 @@ import { useBlockProps, __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles, __experimentalGetColorClassesAndStyles as getColorClassesAndStyles, + __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles, __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles, } from '@wordpress/block-editor'; @@ -16,6 +17,7 @@ export default function save( { attributes } ) { const colorProps = getColorClassesAndStyles( attributes ); const borderProps = getBorderClassesAndStyles( attributes ); const spacingProps = getSpacingClassesAndStyles( attributes ); + const shadowProps = getShadowClassesAndStyles( attributes ); const buttonClassName = clsx( colorProps.className, borderProps.className ); @@ -23,6 +25,7 @@ export default function save( { attributes } ) { ...colorProps.style, ...borderProps.style, ...spacingProps.style, + ...shadowProps.style, }; return (