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

What?

Closes #80957

Why?

• PR removes the default labels for tablist from panel, and adds the placeholder with an attribute.

How?

• Updated the tabs block to include the placeholders instead of labels on default tabs addition.

Testing Instructions

1. Open post/page.
2. Add the tabs block.
3. You will see the tab list with placeholder, Tab Title instead of Tab label.
4. For patterns, template - pass placeholder attribute and use that pattern, you would notice the placeholder is what you have added for pattern.

Testing Instructions for Keyboard

• None

Use of AI Tools

• Claude Code, Opus 5.
• For drafting implementation, spec test. Implementation was reviewed by me.
• For detailed description of PR which is shown below.

AI Summary

What?

Closes #80957

Tabs now start out untitled. Instead of inserting two tabs literally labelled "Tab", the Tabs block inserts two tabs with an empty label that render a "Tab title" placeholder in the editor. core/tab-panel also gains an optional placeholder attribute so patterns and templates can replace that prompt with something contextual, e.g. "Ingredient group" or "Question".

Why?

The hardcoded __( 'Tab' ) default meant every new tab arrived pre-filled with a word nobody wants to keep:

• Authors had to select and delete "Tab" before typing a real title, on every tab.
• Publishing without editing shipped a row of tabs all named "Tab" — meaningless to readers and to screen reader users.
• It was inconsistent with the rest of the library. Paragraph, Heading, List Item, and Details all start empty and prompt for content rather than pre-filling it.

The Tab List block already had a __( 'Tab title' ) placeholder in place — it was simply never visible, because the label was never empty. This change lets that placeholder do its job, and adds the pattern-level override suggested in the issue.

How?

Implementation notes:

• The placeholder attribute lives on core/tab-panel, next to label. The label is a tab-panel attribute that Tab List renders on its behalf, so its placeholder belongs in the same place. This matches the existing placeholder attribute convention in Paragraph, Heading, List Item, Details, and Post Title.
• It is editor-only. tab-list/save.js passes no placeholder to RichText.Content, so nothing is added to the saved markup or the front end.
• It is per panel, and nothing propagates it. Each core/tab-panel declares its own prompt; a tab the author adds afterwards falls back to "Tab title". Making added tabs inherit a sibling's prompt would need the attribute to move up to core/tabs/core/tab-list and reach the labels through block context — deliberately out of scope here.
• No deprecation or migration needed. label already defaulted to ""; only the values written at insertion time changed. Existing posts parse and serialize byte-for-byte identically, and placeholder has no default, so it is absent from markup unless a pattern sets it.

Testing Instructions

1. Create a new post and insert a Tabs block.

2. Both tabs are empty and show a greyed-out "Tab title" prompt. Open the code editor (Ctrl+Shift+Alt+M) and confirm the tab panels carry no label attribute.

3. Click the first tab and type a title. The placeholder disappears on that tab only; the second tab still prompts.

4. With a tab selected, click Add tab in the block toolbar. The new tab is empty and shows the prompt. Same when pressing Enter at the end of an existing tab label.

5. Confirm no regression on existing content: paste the markup below into the code editor, switch back to the visual editor, and check the tabs still read "Tab 1" / "Tab 2" with no block validation warning.

   <!-- wp:tabs -->
   <div class="wp-block-tabs"><!-- wp:tab-list -->
   <div role="tablist" class="wp-block-tab-list"><button type="button" role="tab">Tab 1</button><button type="button" role="tab">Tab 2</button></div>
   <!-- /wp:tab-list -->
   
   <!-- wp:tab-panels -->
   <div class="wp-block-tab-panels"><!-- wp:tab-panel {"label":"Tab 1"} -->
   <section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
   <p>Panel 1</p>
   <!-- /wp:paragraph --></section>
   <!-- /wp:tab-panel -->
   
   <!-- wp:tab-panel {"label":"Tab 2"} -->
   <section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
   <p>Panel 2</p>
   <!-- /wp:paragraph --></section>
   <!-- /wp:tab-panel --></div>
   <!-- /wp:tab-panels --></div>
   <!-- /wp:tabs -->

6. Publish a post with untitled tabs and view the front end. The tab buttons render empty — expected, and the same as publishing an empty Heading. Tab switching still works.

Testing the placeholder override

<!-- wp:tabs -->
<div class="wp-block-tabs"><!-- wp:tab-list -->
<div role="tablist" class="wp-block-tab-list"><button type="button" role="tab"></button><button type="button" role="tab"></button></div>
<!-- /wp:tab-list -->

<!-- wp:tab-panels -->
<div class="wp-block-tab-panels"><!-- wp:tab-panel {"placeholder":"Ingredient group"} -->
<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab-panel -->

<!-- wp:tab-panel {"placeholder":"Cooking step"} -->
<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab-panel --></div>
<!-- /wp:tab-panels --></div>
<!-- /wp:tabs -->

<?php
/**
 * Title: Placeholder test tabs
 * Slug: test/tabs-placeholder
 * Categories: featured
 */
?>
<!-- wp:tabs -->
<div class="wp-block-tabs"><!-- wp:tab-list -->
<div role="tablist" class="wp-block-tab-list"><button type="button" role="tab"></button><button type="button" role="tab"></button></div>
<!-- /wp:tab-list -->

<!-- wp:tab-panels -->
<div class="wp-block-tab-panels"><!-- wp:tab-panel {"placeholder":"Ingredient group"} -->
<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph {"placeholder":"List the ingredients"} -->
<p></p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab-panel -->

<!-- wp:tab-panel {"placeholder":"Ingredient group"} -->
<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab-panel --></div>
<!-- /wp:tab-panels --></div>
<!-- /wp:tabs -->

<?php
/**
 * Plugin Name: Tabs placeholder test
 */
add_action(
	'init',
	static function () {
		register_block_pattern(
			'test/tabs-placeholder',
			array(
				'title'      => 'Placeholder test tabs',
				'categories' => array( 'featured' ),
				'content'    => <<<'HTML'
<!-- wp:tabs -->
<div class="wp-block-tabs"><!-- wp:tab-list -->
<div role="tablist" class="wp-block-tab-list"><button type="button" role="tab"></button><button type="button" role="tab"></button></div>
<!-- /wp:tab-list -->

<!-- wp:tab-panels -->
<div class="wp-block-tab-panels"><!-- wp:tab-panel {"placeholder":"Ingredient group"} -->
<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab-panel -->

<!-- wp:tab-panel {"placeholder":"Ingredient group"} -->
<section role="tabpanel" tabindex="0" class="wp-block-tab-panel"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></section>
<!-- /wp:tab-panel --></div>
<!-- /wp:tab-panels --></div>
<!-- /wp:tabs -->
HTML,
			)
		);
	}
);

<?php
/**
 * Plugin Name: Tabs template test
 */
add_action(
	'init',
	static function () {
		register_post_type(
			'placeholder_test',
			array(
				'label'        => 'Placeholder tests',
				'public'       => true,
				'show_in_rest' => true,
				'supports'     => array( 'title', 'editor' ),
				'template'     => array(
					array(
						'core/tabs',
						array(),
						array(
							array( 'core/tab-list' ),
							array(
								'core/tab-panels',
								array(),
								array(
									array( 'core/tab-panel', array( 'placeholder' => 'Question' ) ),
									array( 'core/tab-panel', array( 'placeholder' => 'Question' ) ),
								),
							),
						),
					),
				),
			)
		);
	}
);

const TEMPLATE = [
	[
		'core/tabs',
		{},
		[
			[ 'core/tab-list' ],
			[
				'core/tab-panels',
				{},
				[
					[ 'core/tab-panel', { placeholder: __( 'Question' ) } ],
					[ 'core/tab-panel', { placeholder: __( 'Question' ) } ],
				],
			],
		],
	],
];

registerBlockVariation( 'core/tabs', {
	name: 'faq-tabs',
	title: __( 'FAQ tabs' ),
	innerBlocks: [
		[ 'core/tab-list' ],
		[
			'core/tab-panels',
			{},
			[
				[ 'core/tab-panel', { placeholder: __( 'Question' ) } ],
				[ 'core/tab-panel', { placeholder: __( 'Question' ) } ],
			],
		],
	],
} );

Testing Instructions for Keyboard

1. Insert a Tabs block with the keyboard (/tabs then Enter).
2. Focus lands in the first tab label. It is empty, and a screen reader announces the placeholder — RichText falls back to the placeholder for the editable's aria-label when no explicit label is set, so an untitled tab announces "Tab title" (or the pattern's custom prompt) rather than nothing.
3. Type a title, press End then Enter — a new untitled tab is added and focused, announcing the placeholder.
4. Press Backspace on the now-empty label to remove that tab; focus moves to the adjacent tab.
5. Arrow left/right at the label edges to move the caret between tabs and confirm the matching panel activates.

Automated tests

npm run test:e2e -- test/e2e/specs/editor/blocks/tabs.spec.js

The new Tab labels describe block covers:

• tabs start empty and prompt for a title,
• a panel's placeholder attribute overrides the prompt,
• tabs added from the toolbar stay empty and prompt.