Skip to content

Tabs: Simplify layout and prune redundant block supports #77646

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
t-hamano merged 11 commits into from
Jun 15, 2026
Merged

Tabs: Simplify layout and prune redundant block supports #77646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
52eaca0
Tabs: Lock orientation to horizontal and prune redundant block supports
t-hamano Apr 24, 2026
7ef5211
Tabs: Remove dead CSS left over from orientation switching
t-hamano Apr 24, 2026
a1dcbc1
Tabs: Drop @use references to deleted stylesheets
t-hamano Apr 24, 2026
24cd3bf
Merge branch 'trunk' into tabs/simplify-layout-and-supports
t-hamano May 4, 2026
4b9cda6
Tabs: Align block.json asset fields with core block conventions
t-hamano May 4, 2026
4570c8b
Merge branch 'trunk' into tabs/simplify-layout-and-supports
t-hamano May 21, 2026
55e1b70
Tabs: Remove unused setAttributes prop from Edit component
t-hamano May 21, 2026
e15d6f3
Merge remote-tracking branch 'origin/trunk' into tabs/simplify-layout…
t-hamano Jun 8, 2026
88aac54
Docs: Regenerate tab block reference pages after supports simplification
t-hamano Jun 8, 2026
a5edbb1
Merge branch 'trunk' into tabs/simplify-layout-and-supports
t-hamano Jun 11, 2026
9e3a086
Merge branch 'trunk' into tabs/simplify-layout-and-supports
t-hamano Jun 13, 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
8 changes: 4 additions & 4 deletions docs/reference-guides/core-blocks/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1006,7 +1006,7 @@ Display the tab buttons for a tabbed interface.
- **Experimental:** true
- **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/)
- **Parent:** core/tabs
- **Supports:** color (background, text), dimensions (~~aspectRatio~~, ~~height~~, ~~minHeight~~, ~~width~~), layout (allowJustification, allowOrientation, allowVerticalAlignment, default, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~reusable~~, ~~visibility~~
- **Supports:** color (background, text), layout (default, ~~allowOrientation~~, ~~allowVerticalAlignment~~, ~~allowWrap~~), spacing (blockGap, padding), typography (fontSize), ~~html~~, ~~lock~~, ~~visibility~~
- **Attributes:** tabs

## Tab Panel
Expand All @@ -1017,7 +1017,7 @@ Content for a tab in a tabbed interface.
- **Experimental:** true
- **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/)
- **Parent:** core/tab-panels
- **Supports:** anchor, color (background, text), layout, renaming, spacing (blockGap, padding, ~~margin~~), typography (fontSize), ~~html~~, ~~reusable~~, ~~visibility~~
- **Supports:** anchor, color (background, text), layout, spacing (blockGap, padding), typography (fontSize), ~~html~~, ~~visibility~~
- **Attributes:** label

## Tab Panels
Expand All @@ -1029,7 +1029,7 @@ Container for tab panel content in a tabbed interface.
- **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/)
- **Parent:** core/tabs
- **Allowed Blocks:** core/tab-panel
- **Supports:** color (background, heading, link, text), dimensions (~~aspectRatio~~, ~~height~~, ~~minHeight~~, ~~width~~), layout (allowJustification, default, ~~allowOrientation~~, ~~allowSizingOnChildren~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (margin, padding, ~~blockGap~~), typography (fontSize), ~~anchor~~, ~~html~~, ~~lock~~, ~~reusable~~, ~~visibility~~
- **Supports:** color (background, heading, link, text), spacing (padding), typography (fontSize), ~~html~~, ~~lock~~, ~~visibility~~

## Table

Expand Down Expand Up @@ -1058,7 +1058,7 @@ Display content in a tabbed interface to help users navigate detailed content wi
- **Experimental:** true
- **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/)
- **Allowed Blocks:** core/tab-list, core/tab-panels
- **Supports:** align, anchor, color (background, text), interactivity, layout (allowJustification, allowOrientation, allowSizingOnChildren, allowVerticalAlignment, default, ~~allowSwitching~~), renaming, spacing (blockGap, margin, padding), typography (fontSize), ~~html~~
- **Supports:** align, anchor, color (background, text), interactivity, layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize), ~~html~~
- **Attributes:** activeTabIndex, editorActiveTabIndex

## Tag Cloud
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@
@use "./tag-cloud/style.scss" as *;
@use "./tab-list/style.scss" as *;
@use "./tab-panel/style.scss" as *;
@use "./tab-panels/style.scss" as *;
@use "./table/style.scss" as *;
@use "./table-of-contents/style.scss" as *;
@use "./tabs/style.scss" as *;
Expand Down
16 changes: 4 additions & 12 deletions packages/block-library/src/tab-list/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,28 +28,20 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._

- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false`
- [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`
- [`lock`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#lock): `false`
- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
- `aspectRatio`: `false`
- `height`: `false`
- `minHeight`: `false`
- `width`: `false`
- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
- [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
- [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
- [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"nowrap","orientation":"horizontal"}`
- [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
- [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `true`
- [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `true`
- [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `true`
- [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex"}`
- [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `false`
- [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `false`
- [`allowWrap`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowwrap): `false`
- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
- `padding`: `true`
- `margin`: `true`
- `blockGap`: `true`

## Context
Expand Down
25 changes: 6 additions & 19 deletions packages/block-library/src/tab-list/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,8 @@
},
"supports": {
"html": false,
"reusable": false,
"visibility": false,
"lock": false,
"dimensions": {
"aspectRatio": false,
"height": false,
"minHeight": false,
"width": false
},
"color": {
"background": true,
"text": true,
Expand All @@ -56,23 +49,18 @@
},
"layout": {
"default": {
"type": "flex",
"flexWrap": "nowrap",
"orientation": "horizontal"
"type": "flex"
},
"allowSwitching": false,
"allowVerticalAlignment": true,
"allowJustification": true,
"allowOrientation": true
"allowVerticalAlignment": false,
"allowOrientation": false,
"allowWrap": false
},
"spacing": {
"padding": true,
"margin": true,
"blockGap": true,
"__experimentalSkipSerialization": [ "padding" ],
"__experimentalDefaultControls": {
"padding": true,
"margin": true,
"blockGap": true
}
}
Expand All @@ -87,7 +75,6 @@
"padding": ".wp-block-tab-list button"
}
},
"editorScript": "file:./index.js",
"editorStyle": "file:./editor.css",
"style": "file:./style-index.css"
"editorStyle": "wp-block-tab-list-editor",
"style": "wp-block-tab-list"
}
3 changes: 0 additions & 3 deletions packages/block-library/src/tab-panel/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,18 +29,15 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer

- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false`
- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
- [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): `true`
- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
- `blockGap`: `true`
- `padding`: `true`
- `margin`: `false`
- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
- [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
- [`renaming`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#renaming): `true`
- [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`

## Context
Expand Down
8 changes: 2 additions & 6 deletions packages/block-library/src/tab-panel/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@
"supports": {
"anchor": true,
"html": false,
"reusable": false,
Comment thread
t-hamano marked this conversation as resolved.
"color": {
"background": true,
"text": true,
Expand All @@ -34,8 +33,7 @@
"layout": true,
"spacing": {
"blockGap": true,
"padding": true,
"margin": false
"padding": true
},
"typography": {
"fontSize": true,
Expand All @@ -45,12 +43,10 @@
"__experimentalFontFamily": true
}
},
"renaming": true,
"visibility": false
},
"providesContext": {
"core/tab-label": "label"
},
"editorScript": "file:./index.js",
"style": "file:./style-index.css"
"style": "wp-block-tab-panel"
}
17 changes: 0 additions & 17 deletions packages/block-library/src/tab-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,6 @@
.wp-block-tab-panel {
max-width: 100%;
flex-basis: 100%;
flex-grow: 1;
box-sizing: border-box;
Comment on lines -2 to -5

@t-hamano t-hamano Apr 24, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Since the layout of the Tab panels block has been changed from Flex to Flow, styles related to the flex layout are no longer necessary.


& > *:first-child {
margin-top: 0;
}
& > *:last-child {
margin-bottom: 0;
}
Comment on lines -7 to -12

@t-hamano t-hamano Apr 24, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

As the tab panel uses a flow layout, these styles are not needed.


&[hidden],
&:empty {
display: none !important;
}
}

.wp-block-tab-panel.wp-block.has-background,
.wp-block-tab-panel:not(.wp-block).has-background {
padding: var(--wp--preset--spacing--30);
}
Comment on lines -20 to -23

@t-hamano t-hamano Apr 24, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Since this block supports padding, the default padding feels redundant. Most blocks should no longer have this style.

16 changes: 0 additions & 16 deletions packages/block-library/src/tab-panels/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,34 +28,18 @@ _This block has no custom attributes._

_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._

- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `false`
- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false`
- [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`
- [`lock`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#lock): `false`
- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
- `aspectRatio`: `false`
- `height`: `false`
- `minHeight`: `false`
- `width`: `false`
- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
- [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
- [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
- [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
- `blockGap`: `false`
- `padding`: `true`
- `margin`: `true`
- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
- [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
- [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"nowrap","justifyContent":"stretch","orientation":"vertical"}`
- [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
- [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `false`
- [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `false`
- [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `true`
- [`allowSizingOnChildren`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowsizingonchildren): `false`

## Block Markup

Expand Down
29 changes: 2 additions & 27 deletions packages/block-library/src/tab-panels/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,9 @@
"allowedBlocks": [ "core/tab-panel" ],
"attributes": {},
"supports": {
"anchor": false,
"html": false,
"reusable": false,
"visibility": false,
"lock": false,
"dimensions": {
"aspectRatio": false,
"height": false,
"minHeight": false,
"width": false
},
"color": {
"background": true,
"text": true,
Expand All @@ -33,34 +25,17 @@
}
},
"spacing": {
"blockGap": false,
"padding": true,
"margin": true
"padding": true
},
"typography": {
"fontSize": true,
"__experimentalFontFamily": true
},
"layout": {
"default": {
"type": "flex",
"flexWrap": "nowrap",
"justifyContent": "stretch",
"orientation": "vertical"
},
"allowSwitching": false,
"allowVerticalAlignment": false,
"allowOrientation": false,
"allowJustification": true,
"allowSizingOnChildren": false
},
"__experimentalBorder": {
"radius": true,
"color": true,
"width": true,
"style": true
}
},
"editorScript": "file:./index.js",
"style": "file:./style-index.css"
}
}
4 changes: 0 additions & 4 deletions packages/block-library/src/tab-panels/style.scss
View file
Open in desktop

This file was deleted.

8 changes: 1 addition & 7 deletions packages/block-library/src/tabs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
- [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
- [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout):
- [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"nowrap","justifyContent":"stretch","verticalAlignment":"stretch","orientation":"vertical"}`
- [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
- [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `true`
- [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `true`
- [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `true`
- [`allowSizingOnChildren`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowsizingonchildren): `true`
- [`allowEditing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowediting): `false`
- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
- [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity): `true`
- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
Expand All @@ -49,7 +44,6 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
- `padding`: `true`
- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
- [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
- [`renaming`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#renaming): `true`

## Context

Expand Down
20 changes: 3 additions & 17 deletions packages/block-library/src/tabs/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,18 +30,7 @@
}
},
"layout": {
"default": {
"type": "flex",
"flexWrap": "nowrap",
"justifyContent": "stretch",
"verticalAlignment": "stretch",
"orientation": "vertical"
},
"allowSwitching": false,
"allowVerticalAlignment": true,
"allowJustification": true,
"allowOrientation": true,
"allowSizingOnChildren": true
"allowEditing": false
},
"html": false,
"interactivity": true,
Expand All @@ -53,16 +42,13 @@
"typography": {
"fontSize": true,
"__experimentalFontFamily": true
},
"renaming": true
}
},
"providesContext": {
"core/tabs-activeTabIndex": "activeTabIndex",
"core/tabs-editorActiveTabIndex": "editorActiveTabIndex"
},
"usesContext": [ "core/tabs-list", "core/tabs-id" ],
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"style": "wp-block-tabs",
"viewScriptModule": "@wordpress/block-library/tabs/view"
}
8 changes: 2 additions & 6 deletions packages/block-library/src/tabs/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const EMPTY_ARRAY = [];
*/
const TABS_TEMPLATE = [ [ 'core/tab-list' ], [ 'core/tab-panels' ] ];

function Edit( { clientId, attributes, setAttributes } ) {
function Edit( { clientId, attributes } ) {
const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;

const { tabPanels, tabListClientId } = useSelect(
Expand Down Expand Up @@ -93,11 +93,7 @@ function Edit( { clientId, attributes, setAttributes } ) {
return (
<BlockContextProvider value={ contextValue }>
<div { ...innerBlockProps }>
<Controls
clientId={ clientId }
attributes={ attributes }
setAttributes={ setAttributes }
/>
<Controls clientId={ clientId } />
{ innerBlockProps.children }
</div>
</BlockContextProvider>
Expand Down
Loading
Loading