Skip to content

Fix: Tabs block: Start with empty tab labels with placeholders #81009

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 7 commits into from
Aug 4, 2026
Merged

Fix: Tabs block: Start with empty tab labels with placeholders #81009

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
da69c15
Add placeholder instead of tabs label
hbhalodia Jul 31, 2026
96b3bb3
Update block docs and add changelog entry
hbhalodia Jul 31, 2026
6cdc4ce
Updated tests and asserts placeholder check to existing tests
hbhalodia Aug 3, 2026
e2e0732
Merge branch 'trunk' into fix/issue-80957
hbhalodia Aug 3, 2026
b7d6922
Remove placeholder attribute
hbhalodia Aug 4, 2026
9a41934
Remove extra spacing
hbhalodia Aug 4, 2026
ba6614c
Remove extra line
hbhalodia Aug 4, 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
1 change: 1 addition & 0 deletions packages/block-library/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
- Playlist: Expose the parent "Add track" toolbar control to selected Playlist Track child blocks via block toolbar sharing ([#80368](https://github.com/WordPress/gutenberg/pull/80368)).
- Gallery: Rename the dynamic variation's "Convert to images" action to "Detach", and confirm it in a dialog explaining that the gallery will keep its current images but stop updating automatically ([#80727](https://github.com/WordPress/gutenberg/pull/80727)).
- Page List: Rename the "Edit" action to "Detach", and confirm it in a dialog explaining that the list will keep its current pages but stop adding new ones automatically, matching the Gallery block ([#80847](https://github.com/WordPress/gutenberg/pull/80847)).
- Tabs: Start new tabs with an empty label showing a "Tab title" placeholder instead of a generic "Tab" ([#81009](https://github.com/WordPress/gutenberg/pull/81009)).

### Bug Fixes

Expand Down
6 changes: 1 addition & 5 deletions packages/block-library/src/tab-panels/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -19,10 +18,7 @@ import TabToolbarControls from '../tabs/tab-toolbar-controls';
* inner blocks are empty). templateLock is false, so this is never applied to
* existing blocks that already have tab panels saved.
*/
const TAB_PANELS_TEMPLATE = [
[ 'core/tab-panel', { label: __( 'Tab' ) } ],
[ 'core/tab-panel', { label: __( 'Tab' ) } ],
];
const TAB_PANELS_TEMPLATE = [ [ 'core/tab-panel' ], [ 'core/tab-panel' ] ];

export default function Edit( { clientId } ) {
const blockProps = useBlockProps();
Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/tabs/use-tab-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { createBlock } from '@wordpress/blocks';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useDispatch, useRegistry } from '@wordpress/data';
Expand Down Expand Up @@ -59,7 +58,7 @@ export default function useTabActions( tabsClientId ) {

const newIndex = atIndex ?? tabPanelBlocks.length;
insertBlock(
createBlock( 'core/tab-panel', { label: __( 'Tab' ) } ),
createBlock( 'core/tab-panel' ),
newIndex,
tabPanelsClientId,
false
Expand Down
3 changes: 3 additions & 0 deletions test/e2e/specs/editor/blocks/tabs.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,9 @@ test.describe( 'Tabs', () => {
await expect(
newTab.locator( '[contenteditable="true"]' )
).toBeFocused();
await expect(
newTab.locator( '[data-rich-text-placeholder]' )
).toHaveAttribute( 'data-rich-text-placeholder', 'Tab title' );

// The new tab's panel is the active one and is visible.
// Use `exact: true` to avoid matching the parent 'Block: Tab Panels' name.
Expand Down
Loading