Skip to content

Commit 9f8ac78

Browse files
mikachanjasmussen
mikachan
and
jasmussen
authored
Tabs: Tidy up UI for controls (#75309)
* Remove layout controls from Tab block * Remove Tab label UI * Use ToolsPanel for Tab * Use ToolsPanel for Tabs * Revert unrelated changes * Remove Tabs Menu Item layout controls * Fix Tab checkbox control * Remove unrelated readme change Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
1 parent 3bddcdd commit 9f8ac78

File tree

6 files changed

+76
-65
lines changed

6 files changed

+76
-65
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -988,7 +988,7 @@ Content for a tab in a tabbed interface. ([Source](https://github.com/WordPress/
988988
- **Experimental:** true
989989
- **Category:** design
990990
- **Parent:** core/tab-panel
991-
- **Supports:** anchor, color (background, text), layout (allowJustification, allowOrientation, allowSizingOnChildren, allowSwitching, allowVerticalAlignment, ~~allowInheriting~~), renaming, spacing (blockGap, padding, ~~margin~~), typography (fontSize), ~~html~~, ~~reusable~~
991+
- **Supports:** anchor, color (background, text), layout, renaming, spacing (blockGap, padding, ~~margin~~), typography (fontSize), ~~html~~, ~~reusable~~
992992
- **Attributes:** label
993993

994994
## Tab Panel
@@ -1051,7 +1051,7 @@ A single tab button in the tabs menu. Used as a template for styling all tab but
10511051
- **Experimental:** true
10521052
- **Category:** design
10531053
- **Parent:** core/tabs-menu
1054-
- **Supports:** color (background, text), layout (allowJustification, allowVerticalAlignment, default, ~~allowOrientation~~, ~~allowSwitching~~, ~~allowWrap~~), shadow, spacing (padding), typography (fontSize, textAlign), ~~html~~, ~~lock~~, ~~reusable~~
1054+
- **Supports:** color (background, text), layout (~~allowEditing~~), shadow, spacing (padding), typography (fontSize, textAlign), ~~html~~, ~~lock~~, ~~reusable~~
10551055
- **Attributes:** activeBackgroundColor, activeTextColor, customActiveBackgroundColor, customActiveTextColor, customHoverBackgroundColor, customHoverTextColor, hoverBackgroundColor, hoverTextColor
10561056

10571057
## Tag Cloud

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,7 @@
3131
"text": true
3232
}
3333
},
34-
"layout": {
35-
"allowSwitching": true,
36-
"allowInheriting": false,
37-
"allowVerticalAlignment": true,
38-
"allowJustification": true,
39-
"allowOrientation": true,
40-
"allowSizingOnChildren": true
41-
},
34+
"layout": true,
4235
"spacing": {
4336
"blockGap": true,
4437
"padding": true,

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

Lines changed: 34 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,56 +5,60 @@ import {
55
InspectorControls,
66
store as blockEditorStore,
77
} from '@wordpress/block-editor';
8-
import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';
8+
import {
9+
CheckboxControl,
10+
__experimentalToolsPanel as ToolsPanel,
11+
__experimentalToolsPanelItem as ToolsPanelItem,
12+
} from '@wordpress/components';
913
import { __ } from '@wordpress/i18n';
1014
import { useDispatch } from '@wordpress/data';
11-
import { decodeEntities } from '@wordpress/html-entities';
1215

1316
/**
1417
* Internal dependencies
1518
*/
1619
import AddTabToolbarControl from './add-tab-toolbar-control';
1720
import RemoveTabToolbarControl from './remove-tab-toolbar-control';
18-
import slugFromLabel from './slug-from-label';
19-
20-
export default function Controls( {
21-
attributes,
22-
setAttributes,
23-
tabsClientId,
24-
blockIndex,
25-
isDefaultTab,
26-
} ) {
27-
const { label } = attributes;
21+
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
2822

23+
export default function Controls( { tabsClientId, blockIndex, isDefaultTab } ) {
2924
const { updateBlockAttributes } = useDispatch( blockEditorStore );
25+
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
3026

3127
return (
3228
<>
3329
<AddTabToolbarControl tabsClientId={ tabsClientId } />
3430
<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
3531
<InspectorControls>
36-
<PanelBody title={ __( 'Settings' ) }>
37-
<TextControl
38-
label={ __( 'Label' ) }
39-
value={ decodeEntities( label ) }
40-
onChange={ ( value ) => {
41-
setAttributes( {
42-
label: value,
43-
anchor: slugFromLabel( value, blockIndex ),
44-
} );
45-
} }
46-
__next40pxDefaultSize
47-
/>
48-
<CheckboxControl
32+
<ToolsPanel
33+
label={ __( 'Settings' ) }
34+
resetAll={ () => {
35+
updateBlockAttributes( tabsClientId, {
36+
activeTabIndex: 0,
37+
} );
38+
} }
39+
dropdownMenuProps={ dropdownMenuProps }
40+
>
41+
<ToolsPanelItem
4942
label={ __( 'Default tab' ) }
50-
checked={ isDefaultTab }
51-
onChange={ ( value ) => {
43+
hasValue={ () => isDefaultTab && blockIndex !== 0 }
44+
onDeselect={ () => {
5245
updateBlockAttributes( tabsClientId, {
53-
activeTabIndex: value ? blockIndex : 0,
46+
activeTabIndex: 0,
5447
} );
5548
} }
56-
/>
57-
</PanelBody>
49+
isShownByDefault
50+
>
51+
<CheckboxControl
52+
label={ __( 'Default tab' ) }
53+
checked={ isDefaultTab }
54+
onChange={ ( value ) => {
55+
updateBlockAttributes( tabsClientId, {
56+
activeTabIndex: value ? blockIndex : 0,
57+
} );
58+
} }
59+
/>
60+
</ToolsPanelItem>
61+
</ToolsPanel>
5862
</InspectorControls>
5963
</>
6064
);

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ export default function Edit( {
3737
clientId,
3838
context,
3939
isSelected,
40-
setAttributes,
4140
__unstableLayoutClassNames: layoutClassNames,
4241
} ) {
4342
const focusRef = useRef();
@@ -161,8 +160,6 @@ export default function Edit( {
161160
return (
162161
<section { ...innerBlocksProps }>
163162
<Controls
164-
attributes={ attributes }
165-
setAttributes={ setAttributes }
166163
tabsClientId={ tabsClientId }
167164
blockIndex={ blockIndex }
168165
isDefaultTab={ isDefaultTab }

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -66,16 +66,7 @@
6666
}
6767
},
6868
"layout": {
69-
"default": {
70-
"type": "flex",
71-
"orientation": "vertical",
72-
"flexWrap": "nowrap"
73-
},
74-
"allowVerticalAlignment": true,
75-
"allowJustification": true,
76-
"allowSwitching": false,
77-
"allowOrientation": false,
78-
"allowWrap": false
69+
"allowEditing": false
7970
},
8071
"spacing": {
8172
"padding": true,

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

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@
22
* WordPress dependencies
33
*/
44
import { __ } from '@wordpress/i18n';
5-
import { PanelBody, TextControl } from '@wordpress/components';
5+
import {
6+
TextControl,
7+
__experimentalToolsPanel as ToolsPanel,
8+
__experimentalToolsPanelItem as ToolsPanelItem,
9+
} from '@wordpress/components';
610
import { InspectorControls } from '@wordpress/block-editor';
711

812
/**
913
* Internal dependencies
1014
*/
1115
import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
1216
import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
17+
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
1318

1419
export default function Controls( { attributes, setAttributes, clientId } ) {
1520
const {
@@ -18,26 +23,47 @@ export default function Controls( { attributes, setAttributes, clientId } ) {
1823
},
1924
} = attributes;
2025

26+
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
27+
2128
return (
2229
<>
2330
<AddTabToolbarControl tabsClientId={ clientId } />
2431
<RemoveTabToolbarControl tabsClientId={ clientId } />
2532
<InspectorControls>
26-
<PanelBody title={ __( 'Settings' ) }>
27-
<TextControl
33+
<ToolsPanel
34+
label={ __( 'Settings' ) }
35+
resetAll={ () => {
36+
setAttributes( {
37+
metadata: { ...metadata, name: '' },
38+
} );
39+
} }
40+
dropdownMenuProps={ dropdownMenuProps }
41+
>
42+
<ToolsPanelItem
2843
label={ __( 'Title' ) }
29-
help={ __(
30-
'The tabs title is used by screen readers to describe the purpose and content of the tab panel.'
31-
) }
32-
value={ metadata.name }
33-
onChange={ ( value ) => {
44+
hasValue={ () => !! metadata.name }
45+
onDeselect={ () => {
3446
setAttributes( {
35-
metadata: { ...metadata, name: value },
47+
metadata: { ...metadata, name: '' },
3648
} );
3749
} }
38-
__next40pxDefaultSize
39-
/>
40-
</PanelBody>
50+
isShownByDefault
51+
>
52+
<TextControl
53+
label={ __( 'Title' ) }
54+
help={ __(
55+
'The tabs title is used by screen readers to describe the purpose and content of the tab panel.'
56+
) }
57+
value={ metadata.name }
58+
onChange={ ( value ) => {
59+
setAttributes( {
60+
metadata: { ...metadata, name: value },
61+
} );
62+
} }
63+
__next40pxDefaultSize
64+
/>
65+
</ToolsPanelItem>
66+
</ToolsPanel>
4167
</InspectorControls>
4268
</>
4369
);

0 commit comments

Comments
 (0)