@wordpress/block-library 10.1.0 → 10.2.0

package/src/social-links/edit.js

@@ -181,7 +181,6 @@ export function SocialLinksEdit( props ) {
 						}
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Icon size' ) }
 							onChange={ ( newSize ) => {
 								setAttributes( {

package/src/spacer/controls.js

@@ -17,7 +17,6 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -62,10 +61,9 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 					value={ computedValue }
 					units={ units }
 					label={ label }
-					__next40pxDefaultSize
 				/>
 			) : (
-				<View className="tools-panel-item-spacing">
+				<div className="tools-panel-item-spacing">
 					<SpacingSizesControl
 						values={ { all: computedValue } }
 						onChange={ ( { all } ) => {
@@ -78,7 +76,7 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 						splitOnAxis={ false }
 						showSideInLabel={ false }
 					/>
-				</View>
+				</div>
 			) }
 		</>
 	);

package/src/spacer/edit.js

@@ -16,7 +16,6 @@ import {
 } from '@wordpress/block-editor';
 import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
-import { View } from '@wordpress/primitives';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -351,7 +350,7 @@ const SpacerEdit = ( {
 
 	return (
 		<>
-			<View
+			<div
 				{ ...useBlockProps( {
 					style,
 					className: clsx( className, {
@@ -361,7 +360,7 @@ const SpacerEdit = ( {
 			>
 				{ blockEditingMode === 'default' &&
 					resizableBoxWithOrientation( inheritedOrientation ) }
-			</View>
+			</div>
 			{ ! isFlexLayout && (
 				<SpacerControls
 					setAttributes={ setAttributes }

package/src/tab-list/README.md

@@ -1,8 +1,6 @@
 # Tab List
 
 <!-- START TOKEN(Autogenerated block API docs) -->
-<div class="callout callout-warning">This block is <strong>experimental</strong> and may change or be removed without notice.</div>
-
 Display the tab buttons for a tabbed interface.
 
 - **Name:** `core/tab-list`
@@ -28,6 +26,7 @@ _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`
+- [`ariaLabel`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#arialabel): `true`
 - [`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`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
@@ -36,7 +35,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`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"}`
+  - [`default`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-default): `{"type":"flex","flexWrap":"wrap"}`
   - [`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`
@@ -68,8 +67,8 @@ _Defined via the [`selectors`](https://developer.wordpress.org/block-editor/refe
 This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
 
 ```html
-<!-- wp:tab-list {"tabs":[]} -->
-<!-- Content... -->
+<!-- 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 -->
 ```
 

package/src/tab-list/block.json

@@ -1,6 +1,5 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"__experimental": true,
 	"apiVersion": 3,
 	"name": "core/tab-list",
 	"title": "Tab List",
@@ -16,8 +15,9 @@
 			"selector": "button",
 			"query": {
 				"label": {
-					"type": "string",
-					"source": "html"
+					"type": "rich-text",
+					"source": "rich-text",
+					"role": "content"
 				}
 			},
 			"default": []
@@ -25,6 +25,7 @@
 	},
 	"supports": {
 		"html": false,
+		"ariaLabel": true,
 		"visibility": false,
 		"lock": false,
 		"color": {
@@ -50,7 +51,7 @@
 		"layout": {
 			"default": {
 				"type": "flex",
-				"flexWrap": "nowrap"
+				"flexWrap": "wrap"
 			},
 			"allowVerticalAlignment": false,
 			"allowOrientation": false,

package/src/tab-list/edit.js

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { __ } from '@wordpress/i18n';
 import {
+	InspectorControls,
 	useBlockProps,
 	store as blockEditorStore,
 	RichText,
@@ -15,79 +16,98 @@ import {
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import {
+	TextControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
-import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
+import TabToolbarControls from '../tabs/tab-toolbar-controls';
+import useTabActions from '../tabs/use-tab-actions';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const EMPTY_ARRAY = [];
 
 function Edit( {
 	attributes,
 	clientId,
-	context,
+	setAttributes,
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
-	const tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;
+	const { ariaLabel } = attributes;
 
 	const colorProps = useColorProps( attributes );
 	const borderProps = useBorderProps( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
-
-	const { tabsClientId, editorActiveTabIndex, activeTabIndex } = useSelect(
-		( select ) => {
-			const { getBlockRootClientId, getBlockAttributes } =
-				select( blockEditorStore );
-
-			const _tabsClientId = getBlockRootClientId( clientId );
-			const tabsAttributes = _tabsClientId
-				? getBlockAttributes( _tabsClientId )
-				: {};
-
-			return {
-				tabsClientId: _tabsClientId,
-				editorActiveTabIndex: tabsAttributes?.editorActiveTabIndex,
-				activeTabIndex: tabsAttributes?.activeTabIndex ?? 0,
-			};
-		},
-		[ clientId ]
-	);
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const { tabsClientId, tabPanels, editorActiveTabIndex, activeTabIndex } =
+		useSelect(
+			( select ) => {
+				const { getBlockRootClientId, getBlockAttributes, getBlocks } =
+					select( blockEditorStore );
+
+				const rootClientId = getBlockRootClientId( clientId );
+				const tabsAttributes = getBlockAttributes( rootClientId );
+				const tabPanelsBlock = getBlocks( rootClientId )?.find(
+					( block ) => block.name === 'core/tab-panels'
+				);
+
+				return {
+					tabsClientId: rootClientId,
+					tabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,
+					editorActiveTabIndex: tabsAttributes?.editorActiveTabIndex,
+					activeTabIndex: tabsAttributes?.activeTabIndex ?? 0,
+				};
+			},
+			[ clientId ]
+		);
+	const registry = useRegistry();
+	const { isBlockSelected, hasSelectedInnerBlock } =
+		useSelect( blockEditorStore );
+	const {
+		updateBlockAttributes,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+	const { insertTab, removeTab } = useTabActions( tabsClientId );
 
 	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
+	const tabsList = useMemo(
+		() =>
+			tabPanels.map( ( tab ) => ( {
+				label: tab.attributes.label || '',
+				clientId: tab.clientId,
+			} ) ),
+		[ tabPanels ]
+	);
 
-	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
-		useDispatch( blockEditorStore );
-
-	const handleTabClick = useCallback(
-		( tabIndex ) => {
-			if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
+	function selectTabPanel( tabIndex ) {
+		if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
+			// Batch the selection and index update so the sync effect in
+			// the tab-panel block can't revert the switch from a stale
+			// inner-block selection in the previously active panel.
+			registry.batch( () => {
+				selectBlock( clientId );
 				__unstableMarkNextChangeAsNotPersistent();
 				updateBlockAttributes( tabsClientId, {
 					editorActiveTabIndex: tabIndex,
 				} );
-			}
-		},
-		[
-			tabsClientId,
-			effectiveActiveIndex,
-			updateBlockAttributes,
-			__unstableMarkNextChangeAsNotPersistent,
-		]
-	);
+			} );
+		}
+	}
 
-	const handleLabelChange = useCallback(
-		( tabIndex, newLabel ) => {
-			const tab = tabsList[ tabIndex ];
-			if ( tab?.clientId ) {
-				updateBlockAttributes( tab.clientId, { label: newLabel } );
-			}
-		},
-		[ tabsList, updateBlockAttributes ]
-	);
+	function handleLabelChange( tabIndex, newLabel ) {
+		const tab = tabsList[ tabIndex ];
+		if ( tab?.clientId ) {
+			updateBlockAttributes( tab.clientId, { label: newLabel } );
+		}
+	}
 
 	const menuRef = useRef();
 	const prevTabCountRef = useRef( tabsList.length );
@@ -101,30 +121,32 @@ function Edit( {
 			return;
 		}
 
+		// Only move focus during active editing, not external data changes.
+		if (
+			! isBlockSelected( tabsClientId ) &&
+			! hasSelectedInnerBlock( tabsClientId, true )
+		) {
+			return;
+		}
+
 		const focusButtonAt = ( index ) => {
 			window.requestAnimationFrame( () => {
-				const buttons = menuRef.current?.querySelectorAll( 'button' );
-				const target = buttons?.[ index ];
-				if ( ! target ) {
-					return;
-				}
-				const richText = target.querySelector( '[contenteditable]' );
-				if ( richText ) {
-					richText.focus();
-				} else {
-					target.focus();
-				}
+				const button =
+					menuRef.current?.querySelectorAll( 'button' )?.[ index ];
+				(
+					button?.querySelector( '[contenteditable]' ) ?? button
+				)?.focus();
 			} );
 		};
 
-		if ( tabsList.length > prevCount ) {
-			// Tab added — focus the last (newly added) button.
-			focusButtonAt( tabsList.length - 1 );
-		} else {
-			// Tab removed — focus the new active button.
-			focusButtonAt( effectiveActiveIndex );
-		}
-	}, [ tabsList.length, effectiveActiveIndex ] );
+		focusButtonAt( effectiveActiveIndex );
+	}, [
+		effectiveActiveIndex,
+		hasSelectedInnerBlock,
+		isBlockSelected,
+		tabsClientId,
+		tabsList.length,
+	] );
 
 	const blockProps = useBlockProps( {
 		role: 'tablist',
@@ -144,8 +166,40 @@ function Edit( {
 
 	return (
 		<>
-			<AddTabToolbarControl tabsClientId={ tabsClientId } />
-			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+			<InspectorControls group="settings">
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () =>
+						setAttributes( {
+							ariaLabel: undefined,
+						} )
+					}
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'Label' ) }
+						isShownByDefault
+						hasValue={ () => !! ariaLabel }
+						onDeselect={ () =>
+							setAttributes( { ariaLabel: undefined } )
+						}
+					>
+						<TextControl
+							label={ __( 'Label' ) }
+							help={ __(
+								'Briefly describe this tab section for screen reader users. Examples: Event information, Product details, and Account settings.'
+							) }
+							value={ ariaLabel || '' }
+							onChange={ ( value ) =>
+								setAttributes( {
+									ariaLabel: value || undefined,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			</InspectorControls>
+			<TabToolbarControls tabsClientId={ tabsClientId } />
 			<div { ...blockProps }>
 				{ tabsList.map( ( tab, index ) => {
 					const isActive = index === effectiveActiveIndex;
@@ -158,9 +212,11 @@ function Edit( {
 							className={ buttonClassName || undefined }
 							style={ buttonStyle }
 							tabIndex={ -1 }
-							onClick={ ( event ) => {
-								event.preventDefault();
-								handleTabClick( index );
+							// Activate the matching panel whenever this tab
+							// receives focus — whether from a click or the caret
+							// moving into the label via the keyboard.
+							onFocus={ () => {
+								selectTabPanel( index );
 							} }
 						>
 							<RichText
@@ -171,6 +227,10 @@ function Edit( {
 								onChange={ ( newLabel ) =>
 									handleLabelChange( index, newLabel )
 								}
+								__unstableOnSplitAtEnd={ () =>
+									insertTab( index + 1 )
+								}
+								onRemove={ () => removeTab( index ) }
 							/>
 						</button>
 					);

package/src/tab-list/index.php

@@ -22,14 +22,19 @@
  * @return string Updated HTML.
  */
 function block_core_tab_list_render_callback( array $attributes, string $content, \WP_Block $block ): string {
-	$tabs_list = $block->context['core/tabs-list'] ?? array();
+	$tabs_list  = $block->context['core/tabs-list'] ?? array();
+	$aria_label = empty( $attributes['ariaLabel'] ) ? __( 'Tabbed content' ) : wp_strip_all_tags( $attributes['ariaLabel'] );
+
+	$tag_processor = new WP_HTML_Tag_Processor( $content );
+	if ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-tab-list' ) ) ) {
+		$tag_processor->set_attribute( 'aria-label', $aria_label );
+	}
 
 	if ( empty( $tabs_list ) ) {
-		return $content;
+		return $tag_processor->get_updated_html();
 	}
 
-	$tag_processor = new WP_HTML_Tag_Processor( $content );
-	$tab_index     = 0;
+	$tab_index = 0;
 
 	while ( $tag_processor->next_tag( 'button' ) ) {
 		$tab_id = $tabs_list[ $tab_index ] ?? null;

package/src/tab-list/save.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
+	RichText,
 	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
@@ -34,15 +35,15 @@ export default function save( { attributes } ) {
 	return (
 		<div { ...blockProps }>
 			{ tabs.map( ( tab, index ) => (
-				<button
+				<RichText.Content
 					key={ index }
 					className={ buttonClassName || undefined }
 					style={ buttonStyle }
+					tagName="button"
+					value={ tab.label }
 					type="button"
 					role="tab"
-				>
-					{ tab.label }
-				</button>
+				/>
 			) ) }
 		</div>
 	);

package/src/tab-panel/README.md

@@ -1,8 +1,6 @@
 # Tab Panel
 
 <!-- START TOKEN(Autogenerated block API docs) -->
-<div class="callout callout-warning">This block is <strong>experimental</strong> and may change or be removed without notice.</div>
-
 Content for a tab in a tabbed interface.
 
 - **Name:** `core/tab-panel`
@@ -46,8 +44,6 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 
 **Uses context:**
 
-- `core/tabs-activeTabIndex`
-- `core/tabs-editorActiveTabIndex`
 - `core/tabs-id`
 
 **Provides context:**
@@ -59,8 +55,10 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
 
 ```html
-<!-- wp:tab-panel {"label":""} -->
-<!-- Content... -->
+<!-- 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 -->
 ```
 

package/src/tab-panel/block.json

@@ -1,6 +1,5 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"__experimental": true,
 	"apiVersion": 3,
 	"name": "core/tab-panel",
 	"title": "Tab Panel",
@@ -14,11 +13,7 @@
 		}
 	},
 	"parent": [ "core/tab-panels" ],
-	"usesContext": [
-		"core/tabs-activeTabIndex",
-		"core/tabs-editorActiveTabIndex",
-		"core/tabs-id"
-	],
+	"usesContext": [ "core/tabs-id" ],
 	"supports": {
 		"anchor": true,
 		"html": false,

package/src/tab-panel/controls.js

@@ -16,8 +16,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import AddTabToolbarControl from './add-tab-toolbar-control';
-import RemoveTabToolbarControl from './remove-tab-toolbar-control';
+import TabToolbarControls from '../tabs/tab-toolbar-controls';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function Controls( { tabsClientId, blockIndex, isDefaultTab } ) {
@@ -26,8 +25,7 @@ export default function Controls( { tabsClientId, blockIndex, isDefaultTab } ) {
 
 	return (
 		<>
-			<AddTabToolbarControl tabsClientId={ tabsClientId } />
-			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+			<TabToolbarControls tabsClientId={ tabsClientId } />
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }

package/src/tab-panel/edit.js

@@ -8,7 +8,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useEffect } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -24,18 +24,20 @@ const TEMPLATE = [
 	],
 ];
 
-export default function Edit( { clientId, context, isSelected } ) {
-	// Consume tab indices from context
-	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ];
-	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
-	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
-
-	const { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(
+export default function Edit( { clientId, isSelected } ) {
+	const {
+		activeTabIndex,
+		editorActiveTabIndex,
+		blockIndex,
+		hasInnerBlocksSelected,
+		tabsClientId,
+	} = useSelect(
 		( select ) => {
 			const {
 				getBlockRootClientId,
 				getBlockIndex,
 				hasSelectedInnerBlock,
+				getBlockAttributes,
 			} = select( blockEditorStore );
 
 			// Get the tab-panel parent first
@@ -43,6 +45,9 @@ export default function Edit( { clientId, context, isSelected } ) {
 			// Then get the tabs parent
 			const _tabsClientId = getBlockRootClientId( tabPanelsClientId );
 
+			// Read the active tab indices directly from the tabs block.
+			const tabsAttributes = getBlockAttributes( _tabsClientId ) ?? {};
+
 			// Get data about this instance of core/tab.
 			const _blockIndex = getBlockIndex( clientId );
 			const _hasInnerBlocksSelected = hasSelectedInnerBlock(
@@ -51,6 +56,8 @@ export default function Edit( { clientId, context, isSelected } ) {
 			);
 
 			return {
+				activeTabIndex: tabsAttributes.activeTabIndex,
+				editorActiveTabIndex: tabsAttributes.editorActiveTabIndex,
 				blockIndex: _blockIndex,
 				hasInnerBlocksSelected: _hasInnerBlocksSelected,
 				tabsClientId: _tabsClientId,
@@ -59,6 +66,8 @@ export default function Edit( { clientId, context, isSelected } ) {
 		[ clientId ]
 	);
 
+	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
+
 	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
@@ -93,22 +102,8 @@ export default function Edit( { clientId, context, isSelected } ) {
 	// Determine if this is the default tab (for the "Default Tab" toggle in controls)
 	const isDefaultTab = activeTabIndex === blockIndex;
 
-	/**
-	 * This hook determines if the current tab panel should be visible.
-	 * This is true if it is the editor active tab, or if it is selected directly.
-	 */
-	const isSelectedTab = useMemo( () => {
-		// Show if this tab is directly selected or has selected inner blocks
-		if ( isSelected || hasInnerBlocksSelected ) {
-			return true;
-		}
-		// Always show the active tab (at effectiveActiveIndex) regardless of other selection state.
-		// This ensures the tab panel remains visible when editing labels in tab-list.
-		if ( isActiveTab ) {
-			return true;
-		}
-		return false;
-	}, [ isSelected, hasInnerBlocksSelected, isActiveTab ] );
+	// Visible when selected, containing the selection, or the active tab.
+	const isSelectedTab = isSelected || hasInnerBlocksSelected || isActiveTab;
 
 	const blockProps = useBlockProps( {
 		hidden: ! isSelectedTab,

package/src/tab-panels/README.md

@@ -1,8 +1,6 @@
 # Tab Panels
 
 <!-- START TOKEN(Autogenerated block API docs) -->
-<div class="callout callout-warning">This block is <strong>experimental</strong> and may change or be removed without notice.</div>
-
 Container for tab panel content in a tabbed interface.
 
 - **Name:** `core/tab-panels`
@@ -47,7 +45,11 @@ This is a [**static block**](https://developer.wordpress.org/block-editor/gettin
 
 ```html
 <!-- wp:tab-panels -->
-<!-- Content... -->
+<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 --></div>
 <!-- /wp:tab-panels -->
 ```
 

package/src/tab-panels/block.json

@@ -1,6 +1,5 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"__experimental": true,
 	"apiVersion": 3,
 	"name": "core/tab-panels",
 	"title": "Tab Panels",