Tab List: Add toolbar buttons to reorder tabs by t-hamano · Pull Request #80107 · WordPress/gutenberg

t-hamano · 2026-07-10T12:18:33Z

~~Depends on #80031~~

What?

Since tab panels are blocks, they can be reordered by default, and reordering the tab panels propagates to the order of the tab list. However, the reverse is not possible. It would be convenient if the reverse direction, i.e., reordering could also be performed on the tab list.

How?

Inject a custom mover component to the block toolbar.
Add moveTab action to the useTabActions hook

Testing Instructions

Insert a Tabs block.
Click any tab to activate it.
Use the block toolbar buttons to move tabs left or right.
The order of the tab panels should change as you rearrange the tabs.

Screenshots or screencast

tab-order.mp4

t-hamano · 2026-07-10T12:25:00Z

+.wp-block-tab-list__mover-button {
+	@include break-small() {
+		width: $button-size-small;
+		min-width: 0 !important;
+	}
+}


The button needs to resize according to the viewport, similar to the block mover button.

github-actions · 2026-07-10T12:27:00Z

Size Change: +2.64 kB (+0.03%)

Total Size: 7.72 MB

📦 View Changed

Filename	Size	Change
`build/scripts/block-library/index.min.js`	350 kB	+320 B (+0.09%)
`build/styles/block-library/editor-rtl.css`	12.8 kB	+19 B (+0.15%)
`build/styles/block-library/editor-rtl.min.css`	10.5 kB	+20 B (+0.19%)
`build/styles/block-library/editor.css`	12.8 kB	+19 B (+0.15%)
`build/styles/block-library/editor.min.css`	10.4 kB	+21 B (+0.2%)
`build/styles/block-library/tab-list/editor-rtl.css`	1.02 kB	+1.02 kB (new file)	🆕
`build/styles/block-library/tab-list/editor-rtl.min.css`	100 B	+100 B (new file)	🆕
`build/styles/block-library/tab-list/editor.css`	1.02 kB	+1.02 kB (new file)	🆕
`build/styles/block-library/tab-list/editor.min.css`	100 B	+100 B (new file)	🆕

_{compressed-size-action}

github-actions · 2026-07-11T11:36:45Z

Flaky tests detected in 5f6d774.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29391189897
📝 Reported issues:

[Flaky Test] should not render Block Settings sections #64387 in /test/e2e/specs/widgets/customizing-widgets.spec.js

github-actions · 2026-07-11T11:39:08Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: noruzzamans <noruzzaman@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

noruzzamans · 2026-07-12T07:53:56Z

Hi @t-hamano I tested this PR locally, and the tab reordering controls work perfectly in both the editor and the frontend.

Screen.Recording.2026-07-12.at.1.47.44.PM.mov

t-hamano · 2026-07-14T10:21:06Z

Apologize for the widespread notifications. I temporarily failed the rebase.

jeryj

Functioning well! I think this is a big UX improvement. I'm approving, but I think we need to update the labels to match the icons with the isRTL check.

jeryj · 2026-07-14T13:22:43Z

+			<ToolbarButton
+				className="wp-block-tab-list__mover-button"
+				icon={ isRTL() ? chevronRight : chevronLeft }
+				label={ __( 'Move tab left' ) }


Should these labels also get the isRTL check?

You're right, this label needs to be flipped as well.

Fixed in 09637ca

jeryj · 2026-07-14T13:36:32Z

I merged the upstream in to get the tests to restart since they were all stalled.

The mover icons already flip based on isRTL(), but the labels stayed "Move tab left"/"Move tab right", so in RTL locales the label described the opposite of the direction the tab actually moves. Swap the labels to match the icons and the visual movement. Co-Authored-By: Claude <noreply@anthropic.com>

t-hamano · 2026-07-14T15:43:22Z

@jeryj Thanks for the review!

I would like to backport this PR to 7.1 because it does not introduce any new APIs and simply improves usability.

jeryj · 2026-07-14T15:53:57Z

would like to backport this PR to 7.1 because it does not introduce any new APIs and simply improves usability.

I agree. I think this would really improve the usability for people wanting to reorder the tabs.

ciampo · 2026-07-14T16:42:28Z

One way to avoid having to say "right" and "left" is to use words such as "previous" and "next", or "before" and "after", etc

That sounds like a good simplification to me!

Nice idea! Let's adopt that word.

Fixed in 6ba3ae2

LTR

RTL

A clever solution.

The mover button labels used "left"/"right", which are direction-relative and required flipping in RTL. Use "before"/"after" instead so the labels read correctly regardless of writing direction, and drop the RTL label flip. Chevron icons still flip for RTL. Co-Authored-By: Claude <noreply@anthropic.com>

Follow up to the direction-neutral mover labels: the E2E tests still clicked "Move tab left"/"Move tab right", which no longer exist. Use the new "Move tab before"/"Move tab after" labels so the tests pass. Co-Authored-By: Claude <noreply@anthropic.com>

Mamaduka

This test well for me. Thanks, @t-hamano!

t-hamano · 2026-07-15T06:02:48Z

Going to merge this, as a failing unit test is a known issue.

https://wordpress.slack.com/archives/C02QB2JS7/p1784093340358909

github-actions · 2026-07-15T06:04:59Z

I just cherry-picked this PR to the wp/7.1 branch to get it included in the next release: 4415a6b

t-hamano · 2026-07-21T09:42:11Z

I just cherry-picked this PR to the release/23.6 branch to get it included in the next release: 5261fa7

github-actions Bot added the [Package] Block library /packages/block-library label Jul 10, 2026

t-hamano commented Jul 10, 2026

View reviewed changes

t-hamano changed the title ~~Tabs list mover~~ Tab List: Add toolbar buttons to reorder tabs left and right Jul 10, 2026

t-hamano changed the title ~~Tab List: Add toolbar buttons to reorder tabs left and right~~ Tab List: Add toolbar buttons to reorder tabs Jul 10, 2026

t-hamano added [Type] Enhancement A suggestion for improvement. [Block] Tabs Affects the Tabs Block labels Jul 10, 2026

t-hamano self-assigned this Jul 10, 2026

t-hamano force-pushed the tabs-list-mover branch from d2d7f62 to 19e8312 Compare July 11, 2026 07:31

t-hamano requested review from Mamaduka and jeryj July 11, 2026 11:38

t-hamano marked this pull request as ready for review July 11, 2026 11:38

t-hamano requested review from ajitbohra and fabiankaegy as code owners July 11, 2026 11:39

t-hamano added this to WordPress 7.1 Editor Tasks Jul 13, 2026

github-project-automation Bot moved this to 🔎 Needs Review in WordPress 7.1 Editor Tasks Jul 13, 2026

t-hamano force-pushed the tabs-list-mover branch from cdd98a9 to c885c3e Compare July 13, 2026 06:31

t-hamano requested review from a team, desrosj, ellatrix, gigitux, nerrad, ntsekouras, ntwb, oandregal, ryanwelcher and spacedmonkey as code owners July 13, 2026 06:31

t-hamano changed the base branch from fix/tabs-label-source-of-truth to trunk July 14, 2026 10:20

t-hamano mentioned this pull request Jul 14, 2026

Tracking: Stabilize Tabs Blocks #73230

Closed

14 tasks

jeryj approved these changes Jul 14, 2026

View reviewed changes

Merge branch 'trunk' into tabs-list-mover

2ae3493

ciampo reviewed Jul 14, 2026

View reviewed changes

t-hamano and others added 2 commits July 15, 2026 11:34

Mamaduka approved these changes Jul 15, 2026

View reviewed changes

t-hamano mentioned this pull request Jul 15, 2026

General: Bump the pinned hash for Gutenberg to e73c3c4 WordPress/wordpress-develop#12540

Closed

t-hamano mentioned this pull request Aug 5, 2026

General: Bump the pinned hash for Gutenberg to f05e40 WordPress/wordpress-develop#12857

Closed

zzap mentioned this pull request Aug 11, 2026

[HelpHub][7.1] Create end-user documentation for the Tabs block family WordPress/Documentation-Issue-Tracker#2468

Closed

13 tasks

Uh oh!

Conversation

t-hamano commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

How?

Testing Instructions

Screenshots or screencast

Uh oh!

t-hamano Jul 10, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

noruzzamans commented Jul 12, 2026

Uh oh!

t-hamano commented Jul 14, 2026

Uh oh!

jeryj left a comment

Choose a reason for hiding this comment

Uh oh!

jeryj Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

jeryj commented Jul 14, 2026

Uh oh!

t-hamano commented Jul 14, 2026

Uh oh!

jeryj commented Jul 14, 2026

Uh oh!

ciampo Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jeryj Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano Jul 15, 2026

Choose a reason for hiding this comment

LTR

RTL

Uh oh!

Mamaduka Jul 15, 2026

Choose a reason for hiding this comment

Uh oh!

Mamaduka left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Jul 15, 2026

Uh oh!

github-actions Bot commented Jul 15, 2026

Uh oh!

t-hamano commented Jul 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

t-hamano commented Jul 10, 2026 •

edited

Loading

github-actions Bot commented Jul 10, 2026 •

edited

Loading

github-actions Bot commented Jul 11, 2026 •

edited

Loading

github-actions Bot commented Jul 11, 2026 •

edited

Loading

ciampo Jul 14, 2026 •

edited

Loading