@wordpress/block-library 9.48.0 → 10.0.1-next.v.202606191442.0

package/src/tab-list/block.json

@@ -8,23 +8,29 @@
 	"category": "design",
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
-	"allowedBlocks": [ "core/tab" ],
 	"usesContext": [ "core/tabs-list" ],
-	"attributes": {},
+	"attributes": {
+		"tabs": {
+			"type": "array",
+			"source": "query",
+			"selector": "button",
+			"query": {
+				"label": {
+					"type": "string",
+					"source": "html"
+				}
+			},
+			"default": []
+		}
+	},
 	"supports": {
 		"html": false,
-		"reusable": false,
 		"visibility": false,
 		"lock": false,
-		"dimensions": {
-			"aspectRatio": false,
-			"height": false,
-			"minHeight": false,
-			"width": false
-		},
 		"color": {
 			"background": true,
 			"text": true,
+			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
@@ -38,30 +44,37 @@
 			"color": true,
 			"radius": true,
 			"style": true,
-			"width": true
+			"width": true,
+			"__experimentalSkipSerialization": true
 		},
 		"layout": {
 			"default": {
-				"type": "flex",
-				"flexWrap": "nowrap",
-				"orientation": "horizontal"
+				"type": "flex"
 			},
-			"allowSwitching": false,
-			"allowVerticalAlignment": true,
-			"allowJustification": true,
-			"allowOrientation": true
+			"allowVerticalAlignment": false,
+			"allowOrientation": false,
+			"allowWrap": false
 		},
 		"spacing": {
 			"padding": true,
-			"margin": true,
 			"blockGap": true,
+			"__experimentalSkipSerialization": [ "padding" ],
 			"__experimentalDefaultControls": {
 				"padding": true,
-				"margin": true,
 				"blockGap": true
 			}
 		}
 	},
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./editor.css"
+	"selectors": {
+		"border": ".wp-block-tab-list button",
+		"color": {
+			"background": ".wp-block-tab-list button",
+			"text": ".wp-block-tab-list button"
+		},
+		"spacing": {
+			"padding": ".wp-block-tab-list button"
+		}
+	},
+	"editorStyle": "wp-block-tab-list-editor",
+	"style": "wp-block-tab-list"
 }

package/src/tab-list/edit.js

@@ -1,12 +1,22 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
-	useInnerBlocksProps,
 	store as blockEditorStore,
+	RichText,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useMemo, useCallback, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -14,30 +24,152 @@ import { useSelect } from '@wordpress/data';
 import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
 import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
 
-const TAB_LIST_TEMPLATE = [ [ 'core/tab' ], [ 'core/tab' ] ];
+const EMPTY_ARRAY = [];
+
+function Edit( { attributes, clientId, context } ) {
+	const tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;
+
+	const colorProps = useColorProps( attributes );
+	const borderProps = useBorderProps( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
 
-function Edit( { clientId } ) {
-	const tabsClientId = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockRootClientId( clientId ),
+	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 blockProps = useBlockProps();
+	const effectiveActiveIndex = useMemo( () => {
+		return editorActiveTabIndex ?? activeTabIndex;
+	}, [ editorActiveTabIndex, activeTabIndex ] );
+
+	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
+		useDispatch( blockEditorStore );
+
+	const handleTabClick = useCallback(
+		( tabIndex ) => {
+			if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
+				__unstableMarkNextChangeAsNotPersistent();
+				updateBlockAttributes( tabsClientId, {
+					editorActiveTabIndex: tabIndex,
+				} );
+			}
+		},
+		[
+			tabsClientId,
+			effectiveActiveIndex,
+			updateBlockAttributes,
+			__unstableMarkNextChangeAsNotPersistent,
+		]
+	);
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/tab' ],
-		orientation: 'horizontal',
-		template: TAB_LIST_TEMPLATE,
-		templateLock: false,
-		renderAppender: false,
+	const handleLabelChange = useCallback(
+		( tabIndex, newLabel ) => {
+			const tab = tabsList[ tabIndex ];
+			if ( tab?.clientId ) {
+				updateBlockAttributes( tab.clientId, { label: newLabel } );
+			}
+		},
+		[ tabsList, updateBlockAttributes ]
+	);
+
+	const menuRef = useRef();
+	const prevTabCountRef = useRef( tabsList.length );
+
+	// When tabs are added or removed, focus the appropriate button.
+	useEffect( () => {
+		const prevCount = prevTabCountRef.current;
+		prevTabCountRef.current = tabsList.length;
+
+		if ( ! menuRef.current || tabsList.length === prevCount ) {
+			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();
+				}
+			} );
+		};
+
+		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 ] );
+
+	const blockProps = useBlockProps( {
+		role: 'tablist',
+		ref: menuRef,
 	} );
 
+	const buttonClassName = clsx( colorProps.className, borderProps.className );
+
+	const buttonStyle = {
+		...colorProps.style,
+		...borderProps.style,
+		...spacingProps.style,
+	};
+
 	return (
 		<>
 			<AddTabToolbarControl tabsClientId={ tabsClientId } />
 			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-			<div { ...innerBlocksProps } />
+			<div { ...blockProps }>
+				{ tabsList.map( ( tab, index ) => {
+					const isActive = index === effectiveActiveIndex;
+					return (
+						<button
+							key={ tab.clientId || index }
+							type="button"
+							className={ clsx( buttonClassName, {
+								'is-active': isActive,
+							} ) }
+							style={ buttonStyle }
+							tabIndex={ -1 }
+							onClick={ ( event ) => {
+								event.preventDefault();
+								handleTabClick( index );
+							} }
+						>
+							<RichText
+								tagName="span"
+								withoutInteractiveFormatting
+								placeholder={ __( 'Tab title' ) }
+								value={ tab.label }
+								onChange={ ( newLabel ) =>
+									handleLabelChange( index, newLabel )
+								}
+							/>
+						</button>
+					);
+				} ) }
+			</div>
 		</>
 	);
 }

package/src/tab-list/editor.scss

@@ -1,10 +1,17 @@
 .wp-block-tab-list {
-	// Allow the inner block list to be displayed in the flex layout, so the tab buttons appear as direct flex children in the editor.
-	> .block-editor-block-list__layout {
-		display: contents;
-	}
+	display: flex;
+	flex-wrap: nowrap;
+	gap: 0.5em;
 
-	.block-editor-block-list__block:has(> .wp-block-tab) {
-		display: contents;
+	button {
+		&.is-active::before {
+			content: "";
+			position: absolute;
+			border-bottom: 2px solid currentColor;
+			pointer-events: none;
+			left: 0;
+			width: 100%;
+			bottom: 0;
+		}
 	}
 }

package/src/tab-list/index.php

@@ -8,14 +8,15 @@
 /**
  * Render callback for core/tab-list.
  *
- * Re-renders each tab inner block with per-item context (index, id,
- * label) injected from the tabs-list, so the tab render callback
- * can add the correct IAPI directives for each button.
+ * Injects IAPI directives into the saved button HTML. The buttons already
+ * carry color/border/padding styles from save.js; this callback adds
+ * tab-specific attributes (id, aria-controls, context) and interactivity
+ * directives using data from the tabs-list context.
  *
  * @since 7.0.0
  *
  * @param array     $attributes Block attributes.
- * @param string    $content    Block content (rendered inner blocks from save.js).
+ * @param string    $content    Block content (rendered buttons from save.js).
  * @param \WP_Block $block      WP_Block instance.
  *
  * @return string Updated HTML.
@@ -27,41 +28,33 @@ function block_core_tab_list_render_callback( array $attributes, string $content
 		return $content;
 	}
 
-	// Re-render each tab with per-item context (index, id, label).
-	// Match by position so items align with their corresponding tabs.
-	$buttons_html = '';
-	$tab_position = 0;
+	$tag_processor = new WP_HTML_Tag_Processor( $content );
+	$tab_index     = 0;
 
-	foreach ( $block->parsed_block['innerBlocks'] ?? array() as $parsed_tab ) {
-		if ( 'core/tab' !== ( $parsed_tab['blockName'] ?? '' ) ) {
-			continue;
-		}
-
-		$tab       = $tabs_list[ $tab_position ] ?? null;
-		$tab_index = $tab_position;
-		++$tab_position;
+	while ( $tag_processor->next_tag( 'button' ) ) {
+		$tab = $tabs_list[ $tab_index ] ?? null;
 
-		// Skip tabs with no matching tab panel.
 		if ( null === $tab ) {
-			continue;
+			break;
 		}
 
-		$item_context = array_merge(
-			$block->context,
-			array(
-				'core/tab-index' => $tab_index,
-				'core/tab-id'    => $tab['id'] ?? '',
-				'core/tab-label' => $tab['label'] ?? '',
-			)
+		$tab_id = $tab['id'] ?? 'tab-' . $tab_index;
+
+		$tag_processor->set_attribute( 'id', 'tab__' . $tab_id );
+		$tag_processor->set_attribute( 'aria-controls', $tab_id );
+		$tag_processor->set_attribute( 'data-wp-on--click', 'actions.handleTabClick' );
+		$tag_processor->set_attribute( 'data-wp-on--keydown', 'actions.handleTabKeyDown' );
+		$tag_processor->set_attribute( 'data-wp-bind--aria-selected', 'state.isActiveTab' );
+		$tag_processor->set_attribute( 'data-wp-bind--tabindex', 'state.tabIndexAttribute' );
+		$tag_processor->set_attribute(
+			'data-wp-context',
+			wp_json_encode( array( 'tabIndex' => $tab_index ) )
 		);
 
-		$tab_block     = new WP_Block( $parsed_tab, $item_context );
-		$buttons_html .= $tab_block->render();
+		++$tab_index;
 	}
 
-	// Rebuild the wrapper using get_block_wrapper_attributes().
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'role' => 'tablist' ) );
-	return sprintf( '<div %s>%s</div>', $wrapper_attributes, $buttons_html );
+	return $tag_processor->get_updated_html();
 }
 
 /**

package/src/tab-list/save.js

@@ -1,14 +1,49 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+} from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( { attributes } ) {
+	const { tabs } = attributes;
 	const blockProps = useBlockProps.save( {
 		role: 'tablist',
 	} );
 
-	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+	const colorProps = getColorClassesAndStyles( attributes );
+	const borderProps = getBorderClassesAndStyles( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
+
+	const buttonClassName = clsx( colorProps.className, borderProps.className );
+
+	const buttonStyle = {
+		...colorProps.style,
+		...borderProps.style,
+		...spacingProps.style,
+	};
 
-	return <div { ...innerBlocksProps } />;
+	return (
+		<div { ...blockProps }>
+			{ tabs.map( ( tab, index ) => (
+				<button
+					key={ index }
+					className={ buttonClassName || undefined }
+					style={ buttonStyle }
+					type="button"
+					role="tab"
+				>
+					{ tab.label }
+				</button>
+			) ) }
+		</div>
+	);
 }

package/src/{tab → tab-list}/style.scss

@@ -1,4 +1,4 @@
-.wp-block-tab {
+:where(.wp-block-tab-list button) {
 	box-sizing: border-box;
 	color: inherit;
 	display: block;

package/src/tab-panel/README.md

@@ -0,0 +1,72 @@
+# 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`
+- **Category:** [design](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/)
+- **API Version:** [3](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-api-versions/)
+- **Block Type:** [Hybrid](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/) (static save + server enhancements)
+
+## Block Relationships
+
+**[Parent](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#parent) blocks (direct):**
+- [`core/tab-panels`](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-design/core-block-tab-panels/)
+
+## Attributes
+
+_Defined via the [`attributes`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/) property in block.json._
+
+| Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
+|-----------|------|---------|-------------|
+| `label` | `string` | `""` | — |
+
+## Supports
+
+_Defined via the [`supports`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/) property in block.json._
+
+- [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
+- [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
+- [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):
+  - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `true`
+  - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
+- [`layout`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout): `true`
+- [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
+  - `blockGap`: `true`
+  - `padding`: `true`
+- [`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`
+- [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`
+
+## Context
+
+_Defined via the [`usesContext` and `providesContext`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-context/) properties in block.json._
+
+**Uses context:**
+
+- `core/tabs-activeTabIndex`
+- `core/tabs-editorActiveTabIndex`
+- `core/tabs-id`
+
+**Provides context:**
+
+- `core/tab-label` → attribute `label`
+
+## Block Markup
+
+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 -->
+```
+
+## Source
+
+- [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tab-panel/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/tab-panel/) — browse `edit.js`, `save.js`, `index.php`, and more.
+
+<!-- END TOKEN(Autogenerated block API docs) -->

package/src/tab-panel/add-tab-toolbar-control.js

@@ -12,22 +12,28 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * "Add tab" button in the block toolbar for the tabs block.
- * Inserts a new core/tab-panel into the tab-panels and a new core/tab
- * into the tab-list, keeping both in sync.
+ * Inserts a new core/tab-panel into the tab-panels. The tab-list items
+ * attribute is kept in sync automatically via useTabListItemsSync.
  *
  * @param {Object} props
  * @param {string} props.tabsClientId The client ID of the parent tabs block.
  * @return {React.JSX.Element} The toolbar control element.
  */
 export default function AddTabToolbarControl( { tabsClientId } ) {
-	const { insertBlock } = useDispatch( blockEditorStore );
+	const {
+		insertBlock,
+		updateBlockAttributes,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
 
-	const { tabPanelsClientId, tabsListClientId } = useSelect(
+	const { tabPanelsClientId, tabCount, tabListClientId } = useSelect(
 		( select ) => {
 			if ( ! tabsClientId ) {
 				return {
 					tabPanelsClientId: null,
-					tabsListClientId: null,
+					tabCount: 0,
+					tabListClientId: null,
 				};
 			}
 			const { getBlocks } = select( blockEditorStore );
@@ -40,7 +46,8 @@ export default function AddTabToolbarControl( { tabsClientId } ) {
 			);
 			return {
 				tabPanelsClientId: tabPanels?.clientId || null,
-				tabsListClientId: tabList?.clientId || null,
+				tabCount: tabPanels?.innerBlocks?.length || 0,
+				tabListClientId: tabList?.clientId || null,
 			};
 		},
 		[ tabsClientId ]
@@ -54,12 +61,18 @@ export default function AddTabToolbarControl( { tabsClientId } ) {
 		const newTabPanelBlock = createBlock( 'core/tab-panel', {
 			label: __( 'Tab' ),
 		} );
-		insertBlock( newTabPanelBlock, undefined, tabPanelsClientId );
+		insertBlock( newTabPanelBlock, undefined, tabPanelsClientId, false );
 
-		// Insert a corresponding tab into the tab-list.
-		if ( tabsListClientId ) {
-			const newTabBlock = createBlock( 'core/tab', {} );
-			insertBlock( newTabBlock, undefined, tabsListClientId );
+		// Switch editor active tab to the new tab.
+		const newIndex = tabCount;
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabsClientId, {
+			editorActiveTabIndex: newIndex,
+		} );
+
+		// Select the tab-list block so focus stays in the menu area.
+		if ( tabListClientId ) {
+			selectBlock( tabListClientId );
 		}
 	};
 

package/src/tab-panel/block.json

@@ -22,7 +22,6 @@
 	"supports": {
 		"anchor": true,
 		"html": false,
-		"reusable": false,
 		"color": {
 			"background": true,
 			"text": true,
@@ -34,8 +33,7 @@
 		"layout": true,
 		"spacing": {
 			"blockGap": true,
-			"padding": true,
-			"margin": false
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
@@ -45,12 +43,10 @@
 				"__experimentalFontFamily": true
 			}
 		},
-		"renaming": true,
 		"visibility": false
 	},
 	"providesContext": {
 		"core/tab-label": "label"
 	},
-	"editorScript": "file:./index.js",
-	"style": "file:./style-index.css"
+	"style": "wp-block-tab-panel"
 }