Skip to content

Commit 3fc0130

Browse files
sethrubensteinsethrubenstein
authored
Introduce new core/tabs-menu-item block (#14)
1 parent 45611ff commit 3fc0130

File tree

24 files changed

+933
-875
lines changed

24 files changed

+933
-875
lines changed

‎packages/block-library/src/editor.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747
@use "./spacer/editor.scss" as *;
4848
@use "./table/editor.scss" as *;
4949
@use "./tabs-menu/editor.scss" as *;
50+
@use "./tabs-menu-item/editor.scss" as *;
5051
@use "./template-part/editor.scss" as *;
5152
@use "./term-template/editor.scss" as *;
5253
@use "./text-columns/editor.scss" as *;

‎packages/block-library/src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@ import * as table from './table';
138138
import * as tableOfContents from './table-of-contents';
139139
import * as tabs from './tabs';
140140
import * as tabsMenu from './tabs-menu';
141+
import * as tabsMenuItem from './tabs-menu-item';
141142
import * as tagCloud from './tag-cloud';
142143
import * as templatePart from './template-part';
143144
import * as termCount from './term-count';
@@ -277,6 +278,7 @@ const getAllBlocks = () => {
277278
blocks.push( tab );
278279
blocks.push( tabs );
279280
blocks.push( tabsMenu );
281+
blocks.push( tabsMenuItem );
280282
blocks.push( tabPanels );
281283
}
282284

‎packages/block-library/src/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
@use "./table-of-contents/style.scss" as *;
7878
@use "./tabs/style.scss" as *;
7979
@use "./tabs-menu/style.scss" as *;
80+
@use "./tabs-menu-item/style.scss" as *;
8081
@use "./term-count/style.scss" as *;
8182
@use "./term-description/style.scss" as *;
8283
@use "./term-name/style.scss" as *;

‎packages/block-library/src/tab-panels/edit.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
1616
const TAB_PANELS_TEMPLATE = [ [ 'core/tab', {} ] ];
1717

1818
export default function Edit( { attributes, clientId } ) {
19-
const blockProps = useBlockProps( {
20-
className: 'wp-block-tab-panels',
21-
} );
19+
const blockProps = useBlockProps();
2220

2321
const innerBlocksProps = useInnerBlocksProps( blockProps, {
2422
template: TAB_PANELS_TEMPLATE,

‎packages/block-library/src/tab/add-tab-toolbar-control.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,11 @@ export default function AddTabToolbarControl( { tabsClientId } ) {
7272
editorActiveTabIndex: nextTabIndex - 1,
7373
} );
7474
}
75-
76-
// Select the tabs-menu so it can handle label editing
77-
if ( tabsMenuClientId ) {
78-
selectBlock( tabsMenuClientId );
79-
}
75+
// @TODO: Figure out a way to select and focus the tab-menu-item so it can handle label editing.
76+
// // Select the tabs-menu so it can handle label editing
77+
// if ( tabsMenuClientId ) {
78+
// selectBlock( tabsMenuClientId );
79+
// }
8080
};
8181

8282
return (

‎packages/block-library/src/tab/edit.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export default function Edit( {
150150
role: 'tabpanel',
151151
tabIndex: isSelectedTab ? 0 : -1,
152152
className: clsx(
153-
'tabs__tab-editor-content',
153+
'wp-block-tab__editor-content',
154154
layoutClassNames
155155
),
156156
} );

‎packages/block-library/src/tabs-menu-item/block.json‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"__experimental": true,
4+
"apiVersion": 3,
5+
"name": "core/tabs-menu-item",
6+
"title": "Tab Menu Item",
7+
"description": "A single tab button in the tabs menu. Used as a template for styling all tab buttons.",
8+
"version": "1.0.0",
9+
"category": "design",
10+
"textdomain": "default",
11+
"parent": [
12+
"core/tabs-menu"
13+
],
14+
"usesContext": [
15+
"core/tabs-menu-item-index",
16+
"core/tabs-menu-item-id",
17+
"core/tabs-menu-item-label",
18+
"core/tabs-menu-item-clientId",
19+
"core/tabs-list",
20+
"core/tabs-id",
21+
"core/tabs-activeTabIndex",
22+
"core/tabs-editorActiveTabIndex"
23+
],
24+
"attributes": {
25+
"activeBackgroundColor": {
26+
"type": "string"
27+
},
28+
"customActiveBackgroundColor": {
29+
"type": "string"
30+
},
31+
"activeTextColor": {
32+
"type": "string"
33+
},
34+
"customActiveTextColor": {
35+
"type": "string"
36+
},
37+
"hoverBackgroundColor": {
38+
"type": "string"
39+
},
40+
"customHoverBackgroundColor": {
41+
"type": "string"
42+
},
43+
"hoverTextColor": {
44+
"type": "string"
45+
},
46+
"customHoverTextColor": {
47+
"type": "string"
48+
}
49+
},
50+
"supports": {
51+
"html": false,
52+
"reusable": false,
53+
"lock": false,
54+
"color": {
55+
"background": true,
56+
"text": true,
57+
"__experimentalDefaultControls": {
58+
"background": true,
59+
"text": true
60+
}
61+
},
62+
"shadow": true,
63+
"typography": {
64+
"fontSize": true,
65+
"__experimentalFontFamily": true,
66+
"__experimentalDefaultControls": {
67+
"fontSize": true
68+
}
69+
},
70+
"layout": {
71+
"default": {
72+
"type": "flex",
73+
"orientation": "vertical"
74+
},
75+
"allowVerticalAlignment": true,
76+
"allowSwitching": false,
77+
"allowJustification": false,
78+
"allowOrientation": false
79+
},
80+
"spacing": {
81+
"padding": true,
82+
"__experimentalDefaultControls": {
83+
"padding": true
84+
}
85+
},
86+
"__experimentalBorder": {
87+
"radius": true,
88+
"color": true,
89+
"width": true,
90+
"style": true
91+
}
92+
},
93+
"editorScript": "file:./index.js",
94+
"editorStyle": "file:./editor.css",
95+
"style": "file:./style-index.css"
96+
}

‎packages/block-library/src/tabs-menu-item/controls.js‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import clsx from 'clsx';
5+
6+
/**
7+
* WordPress dependencies
8+
*/
9+
import { __ } from '@wordpress/i18n';
10+
import {
11+
InspectorControls,
12+
__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
13+
__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
14+
ContrastChecker,
15+
} from '@wordpress/block-editor';
16+
17+
function ContrastCheckerMatrix( { attributes, activeBackgroundColor, activeTextColor, hoverBackgroundColor, hoverTextColor } ) {
18+
const {
19+
customActiveBackgroundColor,
20+
customActiveTextColor,
21+
customHoverBackgroundColor,
22+
customHoverTextColor,
23+
backgroundColor,
24+
textColor,
25+
fontSize,
26+
} = attributes;
27+
28+
const activeBackground = activeBackgroundColor?.color ?? customActiveBackgroundColor;
29+
const activeText = activeTextColor?.color ?? customActiveTextColor;
30+
const hoverBackground = hoverBackgroundColor?.color ?? customHoverBackgroundColor;
31+
const hoverText = hoverTextColor?.color ?? customHoverTextColor;
32+
33+
return (
34+
<>
35+
<ContrastChecker
36+
backgroundColor={ backgroundColor }
37+
fontSize={ fontSize }
38+
textColor={ textColor }
39+
/>
40+
<ContrastChecker
41+
backgroundColor={ activeBackground }
42+
fontSize={ fontSize }
43+
textColor={ activeText }
44+
/>
45+
<ContrastChecker
46+
backgroundColor={ hoverBackground }
47+
fontSize={ fontSize }
48+
textColor={ hoverText }
49+
/>
50+
</>
51+
);
52+
}
53+
54+
export default function Controls( {
55+
attributes,
56+
setAttributes,
57+
clientId,
58+
activeBackgroundColor,
59+
setActiveBackgroundColor,
60+
activeTextColor,
61+
setActiveTextColor,
62+
hoverBackgroundColor,
63+
setHoverBackgroundColor,
64+
hoverTextColor,
65+
setHoverTextColor,
66+
} ) {
67+
const {
68+
customActiveBackgroundColor,
69+
customActiveTextColor,
70+
customHoverBackgroundColor,
71+
customHoverTextColor,
72+
} = attributes;
73+
74+
const colorSettings = useMultipleOriginColorsAndGradients();
75+
76+
return (
77+
<InspectorControls group="color">
78+
<ColorGradientSettingsDropdown
79+
settings={ [
80+
{
81+
label: __( 'Active Background' ),
82+
colorValue:
83+
activeBackgroundColor?.color ?? customActiveBackgroundColor,
84+
onColorChange: ( value ) => {
85+
setActiveBackgroundColor( value );
86+
setAttributes( {
87+
customActiveBackgroundColor: value,
88+
} );
89+
},
90+
},
91+
{
92+
label: __( 'Active Text' ),
93+
colorValue:
94+
activeTextColor?.color ?? customActiveTextColor,
95+
onColorChange: ( value ) => {
96+
setActiveTextColor( value );
97+
setAttributes( {
98+
customActiveTextColor: value,
99+
} );
100+
},
101+
},
102+
{
103+
label: __( 'Hover Background' ),
104+
colorValue:
105+
hoverBackgroundColor?.color ?? customHoverBackgroundColor,
106+
onColorChange: ( value ) => {
107+
setHoverBackgroundColor( value );
108+
setAttributes( {
109+
customHoverBackgroundColor: value,
110+
} );
111+
},
112+
},
113+
{
114+
label: __( 'Hover Text' ),
115+
colorValue:
116+
hoverTextColor?.color ?? customHoverTextColor,
117+
onColorChange: ( value ) => {
118+
setHoverTextColor( value );
119+
setAttributes( {
120+
customHoverTextColor: value,
121+
} );
122+
},
123+
},
124+
] }
125+
panelId={ clientId }
126+
disableCustomColors={ false }
127+
__experimentalIsRenderedInSidebar
128+
__next40pxDefaultSize
129+
{ ...colorSettings }
130+
/>
131+
<ContrastCheckerMatrix
132+
attributes={ attributes }
133+
activeBackgroundColor={ activeBackgroundColor }
134+
activeTextColor={ activeTextColor }
135+
hoverBackgroundColor={ hoverBackgroundColor }
136+
hoverTextColor={ hoverTextColor }
137+
/>
138+
</InspectorControls>
139+
);
140+
}

0 commit comments

Comments
 (0)