Skip to content

Commit d5ca8ae

Browse files
aaronrobertshawshail-mehta
andauthored
Tab List: Add shadow support (#83922)
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: shail-mehta <shailu25@git.wordpress.org>
1 parent 78e07f3 commit d5ca8ae

5 files changed

Lines changed: 13 additions & 1 deletion

File tree

‎docs/reference-guides/core-blocks/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -961,7 +961,7 @@ Display the tab buttons for a tabbed interface.
961961
- **Name:** [core/tab-list](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tab-list/)
962962
- **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/)
963963
- **Parent:** core/tabs
964-
- **Supports:** ariaLabel, color (background, text), layout (default, ~~allowOrientation~~, ~~allowVerticalAlignment~~, ~~allowWrap~~), spacing (blockGap, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~visibility~~
964+
- **Supports:** ariaLabel, color (background, text), layout (default, ~~allowOrientation~~, ~~allowVerticalAlignment~~, ~~allowWrap~~), shadow, spacing (blockGap, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~visibility~~
965965
- **Attributes:** tabs
966966

967967
## Tab Panel

‎packages/block-library/src/tab-list/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
4242
- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
4343
- `padding`: `true`
4444
- `blockGap`: `true`
45+
- [`shadow`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#shadow): `true`
4546

4647
## Context
4748

@@ -56,6 +57,7 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
5657
_Defined via the [`selectors`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-selectors/) property in block.json._
5758

5859
- **border**: `.wp-block-tab-list button`
60+
- **shadow**: `.wp-block-tab-list button`
5961
- **color**:
6062
- background: `.wp-block-tab-list button`
6163
- text: `.wp-block-tab-list button`

‎packages/block-library/src/tab-list/block.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,14 @@
6565
"padding": true,
6666
"blockGap": true
6767
}
68+
},
69+
"shadow": {
70+
"__experimentalSkipSerialization": true
6871
}
6972
},
7073
"selectors": {
7174
"border": ".wp-block-tab-list button",
75+
"shadow": ".wp-block-tab-list button",
7276
"color": {
7377
"background": ".wp-block-tab-list button",
7478
"text": ".wp-block-tab-list button"

‎packages/block-library/src/tab-list/edit.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
RichText,
88
__experimentalUseBorderProps as useBorderProps,
99
__experimentalUseColorProps as useColorProps,
10+
__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
1011
__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
1112
} from '@wordpress/block-editor';
1213
import {
@@ -34,6 +35,7 @@ function Edit( {
3435
const colorProps = useColorProps( attributes );
3536
const borderProps = useBorderProps( attributes );
3637
const spacingProps = getSpacingClassesAndStyles( attributes );
38+
const shadowProps = getShadowClassesAndStyles( attributes );
3739
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
3840

3941
const { tabsClientId, tabPanels, editorActiveTabIndex, activeTabIndex } =
@@ -152,6 +154,7 @@ function Edit( {
152154
...colorProps.style,
153155
...borderProps.style,
154156
...spacingProps.style,
157+
...shadowProps.style,
155158
};
156159

157160
return (

‎packages/block-library/src/tab-list/save.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
useBlockProps,
55
__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
66
__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
7+
__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
78
__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
89
} from '@wordpress/block-editor';
910

@@ -16,13 +17,15 @@ export default function save( { attributes } ) {
1617
const colorProps = getColorClassesAndStyles( attributes );
1718
const borderProps = getBorderClassesAndStyles( attributes );
1819
const spacingProps = getSpacingClassesAndStyles( attributes );
20+
const shadowProps = getShadowClassesAndStyles( attributes );
1921

2022
const buttonClassName = clsx( colorProps.className, borderProps.className );
2123

2224
const buttonStyle = {
2325
...colorProps.style,
2426
...borderProps.style,
2527
...spacingProps.style,
28+
...shadowProps.style,
2629
};
2730

2831
return (

0 commit comments

Comments
 (0)