New Block: core/tabs

packages/block-library/src/tab/edit.js

@@ -13,7 +13,6 @@ import {
 	getTypographyClassesAndStyles as useTypographyProps,
 	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
-	RichText,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -23,13 +22,12 @@ import {
 	useCallback,
 	useState,
 } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
-import { TabFill, TabsListSlot } from './slotfill';
 import Controls from './controls';
 import slugFromLabel from './slug-from-label';
+import TabsList from './tabs-list';
 
 const TEMPLATE = [
 	[
@@ -107,6 +105,7 @@ export default function Edit( {
 		forceDisplay,
 		isTabsClientSelected,
 		isDefaultTab,
+		siblingTabs,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -115,6 +114,7 @@ export default function Edit( {
 				isBlockSelected,
 				hasSelectedInnerBlock,
 				getBlockAttributes,
+				getBlocks,
 			} = select( blockEditorStore );
 
 			// Get data from core/tabs.
@@ -132,6 +132,9 @@ export default function Edit( {
 				true
 			);
 
+			// Get all sibling tabs from parent.
+			const _siblingTabs = getBlocks( rootClientId );
+
 			return {
 				blockIndex: _blockIndex,
 				hasInnerBlocksSelected: _hasInnerBlocksSelected,
@@ -141,6 +144,7 @@ export default function Edit( {
 				isTabsClientSelected: _isTabsClientSelected,
 				isDefaultTab: _isDefaultTab,
 				tabsAttributes: rootAttributes,
+				siblingTabs: _siblingTabs,
 			};
 		},
 		[ clientId ]
@@ -216,61 +220,25 @@ export default function Edit( {
 					blockIndex={ blockIndex }
 					isDefaultTab={ isDefaultTab }
 				/>
-				<TabFill tabsClientId={ tabsClientId }>
-					<button
-						aria-controls={ tabPanelId }
-						aria-selected={ isSelectedTab }
-						id={ tabLabelId }
-						role="tab"
-						className={ clsx(
-							'tabs__tab-label',
-							tabItemColorProps.className
-						) }
-						style={ {
-							...tabItemColorProps.style,
-						} }
-						tabIndex={ -1 }
-						onClick={ ( event ) => {
-							event.preventDefault();
-							selectBlock( clientId );
-						} }
-						onKeyDown={ ( event ) => {
-							// If shift is also pressed, do not select the block.
-							if ( event.key === 'Enter' && ! event.shiftKey ) {
-								event.preventDefault();
-								selectBlock( clientId );
-								focusRef.current = requestAnimationFrame(
-									() => {
-										labelElementRef.current?.focus();
-									}
-								);
-							}
-						} }
-					>
-						<RichText
-							ref={ labelRef }
-							tagName="span"
-							allowedFormats={ [
-								'core/bold',
-								'core/italic',
-								'core/strikethrough',
-							] }
-							placeholder={
-								__( 'Tab' ) + ` ${ blockIndex + 1 }…`
-							}
-							value={ decodeEntities( label ) }
-							onChange={ ( value ) =>
+				{ isSelectedTab && (
+					<>
+						<TabsList
+							siblingTabs={ siblingTabs }
+							currentClientId={ clientId }
+							currentBlockIndex={ blockIndex }
+							currentLabel={ label }
+							tabItemColorProps={ tabItemColorProps }
+							onSelectTab={ selectBlock }
+							onLabelChange={ ( value ) =>
 								setAttributes( {
 									label: value,
 									anchor: slugFromLabel( value, blockIndex ),
 								} )
 							}
+							labelRef={ labelRef }
+							focusRef={ focusRef }
+							labelElementRef={ labelElementRef }
 						/>
-					</button>
-				</TabFill>
-				{ isSelectedTab && (
-					<>
-						<TabsListSlot tabsClientId={ tabsClientId } />
 						<section { ...innerBlocksProps } />
 					</>
 				) }

packages/block-library/src/tab/tabs-list.js

@@ -0,0 +1,104 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import slugFromLabel from './slug-from-label';
+
+export default function TabsList( {
+	siblingTabs,
+	currentClientId,
+	currentBlockIndex,
+	currentLabel,
+	tabItemColorProps,
+	onSelectTab,
+	onLabelChange,
+	labelRef,
+	focusRef,
+	labelElementRef,
+} ) {
+	return (
+		<div role="tablist" className="tabs__list">
+			{ siblingTabs.map( ( tab, index ) => {
+				const isCurrentTab = tab.clientId === currentClientId;
+				const isSiblingTabActive = index === currentBlockIndex;
+				const tabAttributes = tab.attributes || {};
+				const siblingLabel = tabAttributes.label || '';
+				const siblingAnchor =
+					tabAttributes.anchor ||
+					slugFromLabel( siblingLabel, index );
+				const siblingTabPanelId = siblingAnchor;
+				const siblingTabLabelId = `${ siblingTabPanelId }--tab`;
+
+				return (
+					<button
+						key={ tab.clientId }
+						aria-controls={ siblingTabPanelId }
+						aria-selected={ isSiblingTabActive }
+						id={ siblingTabLabelId }
+						role="tab"
+						className={ clsx(
+							'tabs__tab-label',
+							tabItemColorProps.className
+						) }
+						style={ {
+							...tabItemColorProps.style,
+						} }
+						tabIndex={ isSiblingTabActive ? 0 : -1 }
+						onClick={ ( event ) => {
+							event.preventDefault();
+							onSelectTab( tab.clientId );
+						} }
+						onKeyDown={ ( event ) => {
+							// If shift is also pressed, do not select the block.
+							if ( event.key === 'Enter' && ! event.shiftKey ) {
+								event.preventDefault();
+								onSelectTab( tab.clientId );
+								if ( isCurrentTab ) {
+									const { requestAnimationFrame } = window;
+									focusRef.current = requestAnimationFrame(
+										() => {
+											labelElementRef.current?.focus();
+										}
+									);
+								}
+							}
+						} }
+					>
+						{ isCurrentTab ? (
+							<RichText
+								ref={ labelRef }
+								tagName="span"
+								allowedFormats={ [
+									'core/bold',
+									'core/italic',
+									'core/strikethrough',
+								] }
+								placeholder={
+									__( 'Tab' ) + ` ${ currentBlockIndex + 1 }…`
+								}
+								value={ decodeEntities( currentLabel ) }
+								onChange={ onLabelChange }
+							/>
+						) : (
+							<span>
+								{ decodeEntities( siblingLabel ) ||
+									__( 'Tab' ) + ` ${ index + 1 }` }
+							</span>
+						) }
+					</button>
+				);
+			} ) }
+		</div>
+	);
+}

packages/block-library/src/tabs/controls.js

@@ -11,6 +11,11 @@ import {
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
+
 function ContrastCheckerMatrix( { attributes } ) {
 	const {
 		className,
@@ -134,6 +139,10 @@ export default function Controls( {
 
 	return (
 		<>
+			<AddTabToolbarControl
+				tabsClientId={ clientId }
+				attributes={ attributes }
+			/>
 			<InspectorControls>
 				<PanelBody title={ __( 'Tabs Settings' ) }>
 					<ToggleControl

packages/block-library/src/tabs/edit.js

@@ -9,14 +9,12 @@ import clsx from 'clsx';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
-	InnerBlocks,
 	withColors,
 } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { TabFill } from '../tab/slotfill';
 import StyleEngine from './style-engine';
 import Controls from './controls';
 
@@ -68,18 +66,13 @@ function Edit( {
 		clientId,
 		orientation,
 		template: TABS_TEMPLATE,
-		renderAppender: false, // We handle this via a slotfill.
+		renderAppender: false, // Appender is rendered by individual tab blocks.
 	} );
 
 	return (
 		<>
 			<div { ...innerBlockProps }>
 				{ innerBlockProps.children }
-				<TabFill tabsClientId={ clientId }>
-					<div className="wp-block-tabs__tab-item__inserter">
-						<InnerBlocks.ButtonBlockAppender />
-					</div>
-				</TabFill>
 				<StyleEngine attributes={ attributes } clientId={ clientId } />
 				<Controls
 					{ ...{