@wordpress/block-library 10.1.1-next.v.202607070741.0 → 10.2.0

package/src/query/edit/inspector-controls/index.js

@@ -8,12 +8,13 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { debounce } from '@wordpress/compose';
 import { useState, useMemo } from '@wordpress/element';
 
@@ -40,7 +41,8 @@ import {
 import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, isSingular } = props;
+	const { attributes, setQuery, isSingular, shouldExcludeCurrentPost } =
+		props;
 	const { query } = attributes;
 	const {
 		order,
@@ -55,6 +57,7 @@ export default function QueryInspectorControls( props ) {
 		taxQuery,
 		parents,
 		format,
+		excludeCurrent,
 	} = query;
 	const allowedControls = useAllowedControls( attributes );
 	const showSticky = postType === 'post';
@@ -171,12 +174,22 @@ export default function QueryInspectorControls( props ) {
 		[ allowedControls, postTypeHasFormatSupport ]
 	);
 
+	const showExcludeCurrentControl =
+		shouldExcludeCurrentPost &&
+		isControlAllowed( allowedControls, 'excludeCurrent' );
+	const postTypeSingularName = useSelect(
+		( select ) =>
+			select( coreStore ).getPostType( postType )?.labels.singular_name,
+		[ postType ]
+	);
+
 	const showFiltersPanel =
 		showTaxControl ||
 		showAuthorControl ||
 		showSearchControl ||
 		showParentControl ||
-		showFormatControl;
+		showFormatControl ||
+		showExcludeCurrentControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const showPostCountControl = isControlAllowed(
@@ -383,6 +396,7 @@ export default function QueryInspectorControls( props ) {
 							search: '',
 							taxQuery: null,
 							format: [],
+							excludeCurrent: null,
 						} );
 						setQuerySearch( '' );
 					} }
@@ -463,6 +477,32 @@ export default function QueryInspectorControls( props ) {
 							/>
 						</ToolsPanelItem>
 					) }
+					{ showExcludeCurrentControl && (
+						<ToolsPanelItem
+							label={ __( 'Exclude' ) }
+							hasValue={ () => excludeCurrent !== null }
+							onDeselect={ () =>
+								setQuery( { excludeCurrent: null } )
+							}
+						>
+							<ToggleControl
+								label={ __( 'Exclude current' ) }
+								help={ sprintf(
+									/* translators: %s: the post type singular name */
+									__(
+										'Exclude the current %s from the query.'
+									),
+									postTypeSingularName
+								) }
+								checked={ !! excludeCurrent }
+								onChange={ ( value ) => {
+									setQuery( {
+										excludeCurrent: !! value,
+									} );
+								} }
+							/>
+						</ToolsPanelItem>
+					) }
 				</ToolsPanel>
 			) }
 		</>

package/src/query/edit/inspector-controls/offset-controls.js

@@ -10,7 +10,6 @@ const MAX_OFFSET = 100;
 export const OffsetControl = ( { offset = 0, onChange } ) => {
 	return (
 		<NumberControl
-			__next40pxDefaultSize
 			label={ __( 'Offset' ) }
 			value={ offset }
 			min={ MIN_OFFSET }

package/src/query/edit/inspector-controls/pages-control.js

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 export const PagesControl = ( { pages, onChange } ) => {
 	return (
 		<NumberControl
-			__next40pxDefaultSize
 			label={ __( 'Max pages to show' ) }
 			value={ pages }
 			min={ 0 }

package/src/query/edit/query-content.js

@@ -44,8 +44,9 @@ export default function QueryContent( {
 		tagName: TagName = 'div',
 		query: { inherit } = {},
 	} = attributes;
-	const { templateSlug } = context;
-	const { isSingular } = getQueryContextFromTemplate( templateSlug );
+	const { templateSlug, postType } = context;
+	const { isSingular, templateType } =
+		getQueryContextFromTemplate( templateSlug );
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
@@ -77,6 +78,14 @@ export default function QueryContent( {
 				DEFAULTS_POSTS_PER_PAGE,
 		};
 	}, [] );
+
+	// Whether the "exclude current" filter applies: we're in a singular template
+	// and the post type matches the query.
+	const shouldExcludeCurrentPost =
+		isSingular &&
+		! inherit &&
+		( query.postType === postType || query.postType === templateType );
+
 	// There are some effects running where some initialization logic is
 	// happening and setting some values to some attributes (ex. queryId).
 	// These updates can cause an `undo trap` where undoing will result in
@@ -102,15 +111,21 @@ export default function QueryContent( {
 		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
-
+		// Remove the exclusion when it no longer applies, so the filters stay
+		// clean. We never force it on: enabling the exclusion is left to the user.
+		if ( ! shouldExcludeCurrentPost && query.excludeCurrent !== null ) {
+			newQuery.excludeCurrent = null;
+		}
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
 	}, [
 		query.perPage,
+		query.excludeCurrent,
 		inherit,
 		postsPerPage,
+		shouldExcludeCurrentPost,
 		__unstableMarkNextChangeAsNotPersistent,
 		updateQuery,
 	] );
@@ -150,6 +165,7 @@ export default function QueryContent( {
 					setAttributes={ setAttributes }
 					clientId={ clientId }
 					isSingular={ isSingular }
+					shouldExcludeCurrentPost={ shouldExcludeCurrentPost }
 				/>
 			</InspectorControls>
 			<InspectorControls group="advanced">

package/src/query/index.js

@@ -34,6 +34,7 @@ export const settings = {
 				search: '',
 				sticky: 'exclude',
 				inherit: false,
+				excludeCurrent: null,
 			},
 		},
 		innerBlocks: [

package/src/quote/README.md

@@ -29,6 +29,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#background):
   - `backgroundImage`: `true`
   - `backgroundSize`: `true`
+  - `gradient`: `true`
 - [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
   - `minHeight`: `true`
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):

package/src/quote/block.json

@@ -33,8 +33,10 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
-				"backgroundImage": true
+				"backgroundImage": true,
+				"gradient": true
 			}
 		},
 		"__experimentalBorder": {

package/src/quote/transforms.js

@@ -4,7 +4,7 @@
 import { RichText } from '@wordpress/block-editor';
 import {
 	createBlock,
-	__experimentalCloneSanitizedBlock,
+	cloneSanitizedBlock,
 	switchToBlockType,
 } from '@wordpress/blocks';
 
@@ -96,9 +96,7 @@ const transforms = {
 				createBlock(
 					'core/quote',
 					{},
-					blocks.map( ( block ) =>
-						__experimentalCloneSanitizedBlock( block )
-					)
+					blocks.map( ( block ) => cloneSanitizedBlock( block ) )
 				),
 		},
 	],

package/src/rss/edit.js

@@ -96,7 +96,6 @@ export default function RSSEdit( { attributes, setAttributes, name } ) {
 						className="wp-block-rss__placeholder-form"
 					>
 						<InputControl
-							__next40pxDefaultSize
 							label={ label }
 							type="url"
 							hideLabelFromVision

package/src/rss/index.php

@@ -97,7 +97,7 @@ function render_block_core_rss( $attributes ) {
 			$excerpt = esc_attr( wp_trim_words( $excerpt, $attributes['excerptLength'], ' […]' ) );
 
 			// Change existing [...] to […].
-			if ( '[...]' === substr( $excerpt, -5 ) ) {
+			if ( str_ends_with( $excerpt, '[...]' ) ) {
 				$excerpt = substr( $excerpt, 0, -5 ) . '[…]';
 			}
 

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",
@@ -26,6 +25,7 @@
 	},
 	"supports": {
 		"html": false,
+		"ariaLabel": true,
 		"visibility": false,
 		"lock": false,
 		"color": {
@@ -51,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,60 +16,88 @@ import {
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { 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 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, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( 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 ]
+	);
 
 	function selectTabPanel( tabIndex ) {
 		if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			updateBlockAttributes( tabsClientId, {
-				editorActiveTabIndex: tabIndex,
+			// 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,
+				} );
 			} );
 		}
 	}
@@ -137,6 +166,39 @@ function Edit( {
 
 	return (
 		<>
+			<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 ) => {

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-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/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",