@wordpress/block-library 9.48.1 → 10.0.1-next.v.202606191442.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

@@ -29,7 +29,6 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`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`
-- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `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`
@@ -37,10 +36,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `blockGap`: `true`
   - `padding`: `true`
-  - `margin`: `false`
 - [`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`
-- [`renaming`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#renaming): `true`
 - [`visibility`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#visibility): `false`
 
 ## Context

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"
 }

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

@@ -11,8 +11,8 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * "Remove Tab" button in the block toolbar for the tabs block.
- * Removes the currently active core/tab-panel and its corresponding
- * core/tab, keeping both in sync.
+ * Removes the currently active core/tab-panel. 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.
@@ -28,17 +28,17 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 
 	const {
 		activeTabPanelClientId,
-		activeTabClientId,
 		tabCount,
 		editorActiveTabIndex,
+		tabListClientId,
 	} = useSelect(
 		( select ) => {
 			if ( ! tabsClientId ) {
 				return {
 					activeTabPanelClientId: null,
-					activeTabClientId: null,
 					tabCount: 0,
 					editorActiveTabIndex: 0,
+					tabListClientId: null,
 				};
 			}
 			const { getBlocks, getBlockAttributes } =
@@ -56,15 +56,13 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 				( block ) => block.name === 'core/tab-list'
 			);
 			const tabPanelBlocks = tabPanels?.innerBlocks || [];
-			const tabs = tabList?.innerBlocks || [];
 			const activeTabPanel = tabPanelBlocks[ activeIndex ];
-			const activeTab = tabs[ activeIndex ];
 
 			return {
 				activeTabPanelClientId: activeTabPanel?.clientId || null,
-				activeTabClientId: activeTab?.clientId || null,
-				tabCount: tabs.length,
+				tabCount: tabPanelBlocks.length,
 				editorActiveTabIndex: activeIndex,
+				tabListClientId: tabList?.clientId || null,
 			};
 		},
 		[ tabsClientId ]
@@ -86,14 +84,12 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 			editorActiveTabIndex: newActiveIndex,
 		} );
 
-		// Remove the tab panel and corresponding tab
+		// Remove the tab panel.
 		removeBlock( activeTabPanelClientId, false );
-		if ( activeTabClientId ) {
-			removeBlock( activeTabClientId, false );
-		}
 
-		if ( tabsClientId ) {
-			selectBlock( tabsClientId );
+		// Select the tab-list so focus moves to the new active tab button.
+		if ( tabListClientId ) {
+			selectBlock( tabListClientId );
 		}
 	};
 

package/src/tab-panel/style.scss

@@ -1,23 +1,6 @@
 .wp-block-tab-panel {
-	max-width: 100%;
-	flex-basis: 100%;
-	flex-grow: 1;
-	box-sizing: border-box;
-
-	& > *:first-child {
-		margin-top: 0;
-	}
-	& > *:last-child {
-		margin-bottom: 0;
-	}
-
 	&[hidden],
 	&:empty {
 		display: none !important;
 	}
 }
-
-.wp-block-tab-panel.wp-block.has-background,
-.wp-block-tab-panel:not(.wp-block).has-background {
-	padding: var(--wp--preset--spacing--30);
-}

package/src/tab-panels/README.md

@@ -28,34 +28,18 @@ _This block has no custom attributes._
 
 _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): `false`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
-- [`reusable`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#reusable): `false`
 - [`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`
-- [`dimensions`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#dimensions):
-  - `aspectRatio`: `false`
-  - `height`: `false`
-  - `minHeight`: `false`
-  - `width`: `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`
   - [`heading`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-heading): `true`
   - [`link`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-link): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
-  - `blockGap`: `false`
   - `padding`: `true`
-  - `margin`: `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`
-- [`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","justifyContent":"stretch","orientation":"vertical"}`
-  - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
-  - [`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`
-  - [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `true`
-  - [`allowSizingOnChildren`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowsizingonchildren): `false`
 
 ## Block Markup
 

package/src/tab-panels/block.json

@@ -11,17 +11,9 @@
 	"allowedBlocks": [ "core/tab-panel" ],
 	"attributes": {},
 	"supports": {
-		"anchor": false,
 		"html": false,
-		"reusable": false,
 		"visibility": false,
 		"lock": false,
-		"dimensions": {
-			"aspectRatio": false,
-			"height": false,
-			"minHeight": false,
-			"width": false
-		},
 		"color": {
 			"background": true,
 			"text": true,
@@ -33,34 +25,17 @@
 			}
 		},
 		"spacing": {
-			"blockGap": false,
-			"padding": true,
-			"margin": true
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true
 		},
-		"layout": {
-			"default": {
-				"type": "flex",
-				"flexWrap": "nowrap",
-				"justifyContent": "stretch",
-				"orientation": "vertical"
-			},
-			"allowSwitching": false,
-			"allowVerticalAlignment": false,
-			"allowOrientation": false,
-			"allowJustification": true,
-			"allowSizingOnChildren": false
-		},
 		"__experimentalBorder": {
 			"radius": true,
 			"color": true,
 			"width": true,
 			"style": true
 		}
-	},
-	"editorScript": "file:./index.js",
-	"style": "file:./style-index.css"
+	}
 }

package/src/tabs/README.md

@@ -35,12 +35,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - [`text`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-text): `true`
   - [`background`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color-background): `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","justifyContent":"stretch","verticalAlignment":"stretch","orientation":"vertical"}`
-  - [`allowSwitching`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowswitching): `false`
-  - [`allowVerticalAlignment`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowverticalalignment): `true`
-  - [`allowJustification`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowjustification): `true`
-  - [`allowOrientation`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-alloworientation): `true`
-  - [`allowSizingOnChildren`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowsizingonchildren): `true`
+  - [`allowEditing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#layout-allowediting): `false`
 - [`html`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#html): `false`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity): `true`
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
@@ -49,7 +44,6 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
   - `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`
-- [`renaming`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#renaming): `true`
 
 ## Context
 

package/src/tabs/block.json

@@ -30,18 +30,7 @@
 			}
 		},
 		"layout": {
-			"default": {
-				"type": "flex",
-				"flexWrap": "nowrap",
-				"justifyContent": "stretch",
-				"verticalAlignment": "stretch",
-				"orientation": "vertical"
-			},
-			"allowSwitching": false,
-			"allowVerticalAlignment": true,
-			"allowJustification": true,
-			"allowOrientation": true,
-			"allowSizingOnChildren": true
+			"allowEditing": false
 		},
 		"html": false,
 		"interactivity": true,
@@ -53,16 +42,13 @@
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true
-		},
-		"renaming": true
+		}
 	},
 	"providesContext": {
 		"core/tabs-activeTabIndex": "activeTabIndex",
 		"core/tabs-editorActiveTabIndex": "editorActiveTabIndex"
 	},
 	"usesContext": [ "core/tabs-list", "core/tabs-id" ],
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./index.css",
-	"style": "file:./style-index.css",
+	"style": "wp-block-tabs",
 	"viewScriptModule": "@wordpress/block-library/tabs/view"
 }

package/src/tabs/edit.js

@@ -14,7 +14,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import Controls from './controls';
-import useTabListSync from './use-tab-list-sync';
+import useTabListItemsSync from './use-tab-list-items-sync';
 
 const EMPTY_ARRAY = [];
 
@@ -32,15 +32,15 @@ const EMPTY_ARRAY = [];
  */
 const TABS_TEMPLATE = [ [ 'core/tab-list' ], [ 'core/tab-panels' ] ];
 
-function Edit( { clientId, attributes, setAttributes } ) {
+function Edit( { clientId, attributes } ) {
 	const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;
 
-	const { tabPanels, tabPanelsClientId, tabs, tabListClientId } = useSelect(
+	const { tabPanels, tabListClientId } = useSelect(
 		( select ) => {
 			const { getBlocks } = select( blockEditorStore );
 			const innerBlocks = getBlocks( clientId );
 
-			const tabPanelBlocks = innerBlocks.find(
+			const tabPanelsBlock = innerBlocks.find(
 				( block ) => block.name === 'core/tab-panels'
 			);
 			const tabList = innerBlocks.find(
@@ -48,21 +48,14 @@ function Edit( { clientId, attributes, setAttributes } ) {
 			);
 
 			return {
-				tabPanels: tabPanelBlocks?.innerBlocks ?? EMPTY_ARRAY,
-				tabPanelsClientId: tabPanelBlocks?.clientId ?? null,
-				tabs: tabList?.innerBlocks ?? EMPTY_ARRAY,
+				tabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,
 				tabListClientId: tabList?.clientId ?? null,
 			};
 		},
 		[ clientId ]
 	);
 
-	useTabListSync( {
-		tabPanels,
-		tabs,
-		tabPanelsClientId,
-		tabListClientId,
-	} );
+	useTabListItemsSync( { tabPanels, tabListClientId } );
 
 	/**
 	 * Memoize context value to prevent unnecessary re-renders.
@@ -70,7 +63,7 @@ function Edit( { clientId, attributes, setAttributes } ) {
 	const contextValue = useMemo( () => {
 		/**
 		 * Compute tabs list from innerblocks to provide via context.
-		 * This traverses the tab-panel block to find all tab blocks
+		 * This traverses the tab-panels block to find all tab-panel blocks
 		 * and extracts their label and anchor for the tab-list to consume.
 		 */
 		const tabList = tabPanels.map( ( tab, index ) => ( {
@@ -100,11 +93,7 @@ function Edit( { clientId, attributes, setAttributes } ) {
 	return (
 		<BlockContextProvider value={ contextValue }>
 			<div { ...innerBlockProps }>
-				<Controls
-					clientId={ clientId }
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-				/>
+				<Controls clientId={ clientId } />
 				{ innerBlockProps.children }
 			</div>
 		</BlockContextProvider>

package/src/tabs/index.js

@@ -22,16 +22,12 @@ export const settings = {
 		innerBlocks: [
 			{
 				name: 'core/tab-list',
-				innerBlocks: [
-					{
-						name: 'core/tab',
-						attributes: { anchor: 'tab-1-button' },
-					},
-					{
-						name: 'core/tab',
-						attributes: { anchor: 'tab-2-button' },
-					},
-				],
+				attributes: {
+					tabs: [
+						{ label: __( 'Tab 1' ) },
+						{ label: __( 'Tab 2' ) },
+					],
+				},
 			},
 			{
 				name: 'core/tab-panels',

package/src/tabs/index.php

@@ -96,30 +96,17 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 		return '';
 	}
 
-	$is_vertical = false;
-
 	$tag_processor = new WP_HTML_Tag_Processor( $content );
 
 	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) );
 	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs/private' );
 
-	// Inspect inside the tab-list to see if its vertical or not.
-	$tag_processor->set_bookmark( 'core/tabs_wrapper' );
-	while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs-list' ) ) ) {
-		if ( $tag_processor->has_class( 'is-vertical' ) ) {
-			$is_vertical = true;
-			break;
-		}
-	}
-	$tag_processor->seek( 'core/tabs_wrapper' );
-
 	$tag_processor->set_attribute(
 		'data-wp-context',
 		wp_json_encode(
 			array(
 				'tabsId'         => $tabs_id,
 				'activeTabIndex' => $active_tab_index,
-				'isVertical'     => $is_vertical,
 			)
 		)
 	);