Skip to content

Tabs: Tidy up UI for controls #75309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mikachan merged 8 commits into from
Feb 10, 2026
+76 −65
Merged

Tabs: Tidy up UI for controls #75309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
714a900
Remove layout controls from Tab block
mikachan Feb 6, 2026
f921267
Remove Tab label UI
mikachan Feb 6, 2026
2e11387
Use ToolsPanel for Tab
mikachan Feb 6, 2026
d74455f
Use ToolsPanel for Tabs
mikachan Feb 6, 2026
28c3bd0
Revert unrelated changes
mikachan Feb 6, 2026
f0c4f1d
Remove Tabs Menu Item layout controls
mikachan Feb 10, 2026
3f714a7
Fix Tab checkbox control
mikachan Feb 10, 2026
266be9c
Remove unrelated readme change
mikachan Feb 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -990,7 +990,7 @@ Content for a tab in a tabbed interface. ([Source](https://github.com/WordPress/
- **Experimental:** true
- **Category:** design
- **Parent:** core/tab-panel
- **Supports:** anchor, color (background, text), layout (allowJustification, allowOrientation, allowSizingOnChildren, allowSwitching, allowVerticalAlignment, ~~allowInheriting~~), renaming, spacing (blockGap, padding, ~~margin~~), typography (fontSize), ~~html~~, ~~reusable~~
- **Supports:** anchor, color (background, text), layout, renaming, spacing (blockGap, padding, ~~margin~~), typography (fontSize), ~~html~~, ~~reusable~~
- **Attributes:** label

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

## Tag Cloud
Expand Down
9 changes: 1 addition & 8 deletions packages/block-library/src/tab/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,7 @@
"text": true
}
},
"layout": {
"allowSwitching": true,
"allowInheriting": false,
"allowVerticalAlignment": true,
"allowJustification": true,
"allowOrientation": true,
"allowSizingOnChildren": true
},
"layout": true,
Copy link

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting supports.layout to true does not remove the Layout panel; it enables layout support with default settings, and the block editor’s layout hook will still render the Layout inspector controls when layout support is present (unless allowEditing is explicitly disabled). If the intent is to remove the Layout panel for this block, set layout support to an object with allowEditing: false (or remove layout support entirely if it’s not needed).

Suggested change
"layout": true,
"layout": {
"allowEditing": false
},

Copilot uses AI. Check for mistakes.
Copy link
Member Author

@mikachan mikachan Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I went with the default Layout control that is used when layout is set to true. Should we remove the Layout panel from these blocks entirely, @jasmussen?

Copy link
Contributor

@jasmussen jasmussen Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assuming you mean these?

image image

They feel valid enough to me, as they provide nice layout options for you, do you agree?

This one we might not need. How would you ever see the result of an alignment inside?

image

It hits me we need an icon for this. I don't love the following, but I think it can do in a pinch, and we can come back and improve it later:

image 
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#1E1E1E" d="M14 11.25a.25.25 0 0 0-.25-.25h-3.5a.25.25 0 0 0-.25.25v2.5H8.5v-2.5c0-.966.784-1.75 1.75-1.75h3.5c.966 0 1.75.784 1.75 1.75v2.5H14v-2.5Z"/></svg>

Copy link
Member Author

@mikachan mikachan Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Assuming you mean these?

Yes, they're the ones.

They feel valid enough to me, as they provide nice layout options for you, do you agree?

Yeah, I think I prefer having the default layout options for these blocks. I just wanted to double-check we shouldn't completely remove them.

This one we might not need. How would you ever see the result of an alignment inside?

Agree for Tab Menu Item - will remove the Layout options for this in this PR.

It hits me we need an icon for this. I don't love the following, but I think it can do in a pinch, and we can come back and improve it later:

Amazing, thank you! I'm opening a separate PR for the icons, will include that one there.

"spacing": {
"blockGap": true,
"padding": true,
Expand Down
64 changes: 34 additions & 30 deletions packages/block-library/src/tab/controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,56 +5,60 @@ import {
InspectorControls,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';
import {
CheckboxControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useDispatch } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Internal dependencies
*/
import AddTabToolbarControl from './add-tab-toolbar-control';
import RemoveTabToolbarControl from './remove-tab-toolbar-control';
import slugFromLabel from './slug-from-label';

export default function Controls( {
attributes,
setAttributes,
tabsClientId,
blockIndex,
isDefaultTab,
} ) {
const { label } = attributes;
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';

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

return (
<>
<AddTabToolbarControl tabsClientId={ tabsClientId } />
<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<TextControl
label={ __( 'Label' ) }
value={ decodeEntities( label ) }
onChange={ ( value ) => {
setAttributes( {
label: value,
anchor: slugFromLabel( value, blockIndex ),
} );
} }
__next40pxDefaultSize
/>
<CheckboxControl
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
updateBlockAttributes( tabsClientId, {
activeTabIndex: 0,
} );
} }
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
label={ __( 'Default tab' ) }
checked={ isDefaultTab }
onChange={ ( value ) => {
hasValue={ () => isDefaultTab && blockIndex !== 0 }
onDeselect={ () => {
updateBlockAttributes( tabsClientId, {
activeTabIndex: value ? blockIndex : 0,
activeTabIndex: 0,
} );
} }
/>
</PanelBody>
isShownByDefault
>
<CheckboxControl
label={ __( 'Default tab' ) }
checked={ isDefaultTab }
onChange={ ( value ) => {
updateBlockAttributes( tabsClientId, {
activeTabIndex: value ? blockIndex : 0,
} );
} }
/>
</ToolsPanelItem>
</ToolsPanel>
</InspectorControls>
</>
);
Expand Down
3 changes: 0 additions & 3 deletions packages/block-library/src/tab/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ export default function Edit( {
clientId,
context,
isSelected,
setAttributes,
__unstableLayoutClassNames: layoutClassNames,
} ) {
const focusRef = useRef();
Expand Down Expand Up @@ -161,8 +160,6 @@ export default function Edit( {
return (
<section { ...innerBlocksProps }>
<Controls
attributes={ attributes }
setAttributes={ setAttributes }
tabsClientId={ tabsClientId }
blockIndex={ blockIndex }
isDefaultTab={ isDefaultTab }
Expand Down
11 changes: 1 addition & 10 deletions packages/block-library/src/tabs-menu-item/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,16 +66,7 @@
}
},
"layout": {
"default": {
"type": "flex",
"orientation": "vertical",
"flexWrap": "nowrap"
},
"allowVerticalAlignment": true,
"allowJustification": true,
"allowSwitching": false,
"allowOrientation": false,
"allowWrap": false
"allowEditing": false
},
"spacing": {
"padding": true,
Expand Down
50 changes: 38 additions & 12 deletions packages/block-library/src/tabs/controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,19 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { PanelBody, TextControl } from '@wordpress/components';
import {
TextControl,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';

export default function Controls( { attributes, setAttributes, clientId } ) {
const {
Expand All @@ -18,26 +23,47 @@ export default function Controls( { attributes, setAttributes, clientId } ) {
},
} = attributes;

const dropdownMenuProps = useToolsPanelDropdownMenuProps();

return (
<>
<AddTabToolbarControl tabsClientId={ clientId } />
<RemoveTabToolbarControl tabsClientId={ clientId } />
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<TextControl
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
setAttributes( {
metadata: { ...metadata, name: '' },
} );
} }
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
label={ __( 'Title' ) }
help={ __(
'The tabs title is used by screen readers to describe the purpose and content of the tab panel.'
) }
value={ metadata.name }
onChange={ ( value ) => {
hasValue={ () => !! metadata.name }
onDeselect={ () => {
setAttributes( {
metadata: { ...metadata, name: value },
metadata: { ...metadata, name: '' },
} );
} }
__next40pxDefaultSize
/>
</PanelBody>
isShownByDefault
>
<TextControl
label={ __( 'Title' ) }
help={ __(
'The tabs title is used by screen readers to describe the purpose and content of the tab panel.'
) }
value={ metadata.name }
onChange={ ( value ) => {
setAttributes( {
metadata: { ...metadata, name: value },
} );
} }
__next40pxDefaultSize
/>
</ToolsPanelItem>
</ToolsPanel>
</InspectorControls>
</>
);
Expand Down
Loading