@wordpress/block-library 9.38.0 → 9.39.0

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

@@ -1,42 +1,67 @@
 /**
  * WordPress dependencies
  */
+import { sprintf, __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import {
 	BlockControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * "Add Tab" button in the block toolbar for the tab block.
+ * Inserts new tabs into the tab-panels block.
+ *
  * @param {Object} props
- * @param {Object} props.attributes   The block attributes.
  * @param {string} props.tabsClientId The client ID of the parent tabs block.
  * @return {JSX.Element} The toolbar control element.
  */
-export default function AddTabToolbarControl( { attributes, tabsClientId } ) {
+export default function AddTabToolbarControl( { tabsClientId } ) {
 	const { insertBlock } = useDispatch( blockEditorStore );
 
-	const { className, fontFamily, fontSize } = attributes;
+	// Find the tab-panels block within the tabs block
+	const { tabPanelsClientId, nextTabIndex } = useSelect(
+		( select ) => {
+			if ( ! tabsClientId ) {
+				return {
+					tabPanelsClientId: null,
+					nextTabIndex: 0,
+				};
+			}
+			const { getBlocks } = select( blockEditorStore );
+			const innerBlocks = getBlocks( tabsClientId );
+			const tabPanels = innerBlocks.find(
+				( block ) => block.name === 'core/tab-panels'
+			);
+			return {
+				tabPanelsClientId: tabPanels?.clientId || null,
+				nextTabIndex: ( tabPanels?.innerBlocks.length || 0 ) + 1,
+			};
+		},
+		[ tabsClientId ]
+	);
 
 	const addTab = () => {
+		if ( ! tabPanelsClientId ) {
+			return;
+		}
 		const newTabBlock = createBlock( 'core/tab', {
-			className,
-			fontFamily,
-			fontSize,
+			anchor: 'tab-' + nextTabIndex,
+			/* translators: %d: tab number */
+			label: sprintf( __( 'Tab %d' ), nextTabIndex ),
 		} );
-		insertBlock( newTabBlock, undefined, tabsClientId );
+		insertBlock( newTabBlock, undefined, tabPanelsClientId );
+		// @TODO: Possible select and focus the tabs-menu-item active tab RichText editor?
 	};
 
 	return (
-		<BlockControls group="block">
+		<BlockControls group="other">
 			<ToolbarGroup>
 				<ToolbarButton
 					className="components-toolbar__control"
-					label={ __( 'Add Tab' ) }
+					label={ __( 'Add a new tab' ) }
 					onClick={ addTab }
 					showTooltip
 					text={ __( 'Add Tab' ) }

package/src/tab/block.json

@@ -14,11 +14,25 @@
 			"default": ""
 		}
 	},
-	"parent": [ "core/tabs" ],
+	"parent": [
+		"core/tab-panels"
+	],
+	"usesContext": [
+		"core/tabs-activeTabIndex",
+		"core/tabs-editorActiveTabIndex"
+	],
 	"supports": {
 		"anchor": true,
 		"html": false,
 		"reusable": false,
+		"color": {
+			"background": true,
+			"text": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"layout": {
 			"allowSwitching": true,
 			"allowInheriting": false,
@@ -38,9 +52,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true,
 				"__experimentalFontFamily": true
-			},
-			"__experimentalSkipSerialization": true
-		}
+			}
+		},
+		"renaming": true
 	},
 	"providesContext": {
 		"core/tab-label": "label"

package/src/tab/controls.js

@@ -14,6 +14,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import AddTabToolbarControl from './add-tab-toolbar-control';
+import RemoveTabToolbarControl from './remove-tab-toolbar-control';
 import slugFromLabel from './slug-from-label';
 
 export default function Controls( {
@@ -29,12 +30,10 @@ export default function Controls( {
 
 	return (
 		<>
-			<AddTabToolbarControl
-				tabsClientId={ tabsClientId }
-				attributes={ attributes }
-			/>
+			<AddTabToolbarControl tabsClientId={ tabsClientId } />
+			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
 			<InspectorControls>
-				<PanelBody title={ __( 'Tab Settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						label={ __( 'Tab Label' ) }
 						value={ decodeEntities( label ) }

package/src/tab/edit.js

@@ -10,82 +10,44 @@ import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
-	getTypographyClassesAndStyles as useTypographyProps,
-	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	useMemo,
-	useRef,
-	useEffect,
-	useCallback,
-	useState,
-} from '@wordpress/element';
+import { useMemo, useRef, useEffect } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import Controls from './controls';
 import slugFromLabel from './slug-from-label';
-import TabsList from './tabs-list';
 
 const TEMPLATE = [
 	[
 		'core/paragraph',
 		{
-			placeholder: __( 'Type / to add a block to tab' ),
+			placeholder: __( 'Type / to choose a block' ),
 		},
 	],
 ];
 
-const { requestAnimationFrame, cancelAnimationFrame } = window;
+const { cancelAnimationFrame } = window;
 
 export default function Edit( {
 	attributes,
 	clientId,
+	context,
 	isSelected,
 	setAttributes,
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
-	const { selectBlock } = useDispatch( blockEditorStore );
-
-	const innerBlocksRef = useRef( null );
 	const focusRef = useRef();
-	const [ isInitialMount, setIsInitialMount ] = useState( true );
-	const labelElementRef = useRef( null );
 
 	const { anchor, label } = attributes;
 
-	// Callback ref that stores the element and focuses on initial mount.
-	const labelRef = useCallback(
-		( node ) => {
-			labelElementRef.current = node;
-			if ( node && isInitialMount ) {
-				// Focus immediately when ref is set on initial mount.
-				const animationId = requestAnimationFrame( () => {
-					if ( node ) {
-						node.focus();
-					}
-				} );
-				focusRef.current = animationId;
-				setIsInitialMount( false );
-			}
-		},
-		[ isInitialMount ]
-	);
-
-	// Focus the label RichText component when no label exists (after initial mount).
-	useEffect( () => {
-		if ( ! label && ! isInitialMount && labelElementRef.current ) {
-			const animationId = requestAnimationFrame( () => {
-				if ( labelElementRef.current ) {
-					labelElementRef.current.focus();
-				}
-			} );
-			focusRef.current = animationId;
-			return () => cancelAnimationFrame( focusRef.current );
-		}
-	}, [ label, isInitialMount ] );
+	// Consume tab indices from context
+	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;
+	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
+	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
 
 	// Clean up animation frames on unmount.
 	useEffect( () => {
@@ -96,84 +58,85 @@ export default function Edit( {
 		};
 	}, [] );
 
-	const {
-		blockIndex,
-		hasInnerBlocksSelected,
-		tabsHasSelectedBlock,
-		tabsClientId,
-		tabsAttributes,
-		forceDisplay,
-		isTabsClientSelected,
-		isDefaultTab,
-		siblingTabs,
-	} = useSelect(
+	const { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(
 		( select ) => {
 			const {
 				getBlockRootClientId,
 				getBlockIndex,
-				isBlockSelected,
 				hasSelectedInnerBlock,
-				getBlockAttributes,
-				getBlocks,
 			} = select( blockEditorStore );
 
-			// Get data from core/tabs.
-			const rootClientId = getBlockRootClientId( clientId );
-			const hasTabSelected = hasSelectedInnerBlock( rootClientId, true );
-			const rootAttributes = getBlockAttributes( rootClientId );
-			const { activeTabIndex } = rootAttributes;
-			const _isTabsClientSelected = isBlockSelected( rootClientId );
+			// Get the tab-panels parent first
+			const tabPanelsClientId = getBlockRootClientId( clientId );
+			// Then get the tabs parent
+			const _tabsClientId = getBlockRootClientId( tabPanelsClientId );
 
 			// Get data about this instance of core/tab.
 			const _blockIndex = getBlockIndex( clientId );
-			const _isDefaultTab = activeTabIndex === _blockIndex;
 			const _hasInnerBlocksSelected = hasSelectedInnerBlock(
 				clientId,
 				true
 			);
 
-			// Get all sibling tabs from parent.
-			const _siblingTabs = getBlocks( rootClientId );
-
 			return {
 				blockIndex: _blockIndex,
 				hasInnerBlocksSelected: _hasInnerBlocksSelected,
-				tabsClientId: rootClientId,
-				forceDisplay: _isDefaultTab && _isTabsClientSelected,
-				tabsHasSelectedBlock: hasTabSelected,
-				isTabsClientSelected: _isTabsClientSelected,
-				isDefaultTab: _isDefaultTab,
-				tabsAttributes: rootAttributes,
-				siblingTabs: _siblingTabs,
+				tabsClientId: _tabsClientId,
 			};
 		},
 		[ clientId ]
 	);
 
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	// Sync editorActiveTabIndex when this tab is selected directly
+	useEffect( () => {
+		// Only update if this tab is selected and not already the active index
+		const isTabSelected = isSelected || hasInnerBlocksSelected;
+		if (
+			isTabSelected &&
+			tabsClientId &&
+			effectiveActiveIndex !== blockIndex
+		) {
+			// Mark as non-persistent so it doesn't add to undo history
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( tabsClientId, {
+				editorActiveTabIndex: blockIndex,
+			} );
+		}
+	}, [
+		isSelected,
+		hasInnerBlocksSelected,
+		tabsClientId,
+		effectiveActiveIndex,
+		blockIndex,
+		updateBlockAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+
+	// Determine if this is the currently active tab (for editor visibility)
+	const isActiveTab = effectiveActiveIndex === blockIndex;
+
+	// 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 is selected. This is true if it is the active tab, or if it is selected directly.
+	 * 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( () => {
-		if ( isSelected || hasInnerBlocksSelected || forceDisplay ) {
+		// Show if this tab is directly selected or has selected inner blocks
+		if ( isSelected || hasInnerBlocksSelected ) {
 			return true;
 		}
-		if (
-			isDefaultTab &&
-			! isTabsClientSelected &&
-			! isSelected &&
-			! tabsHasSelectedBlock
-		) {
+		// Always show the active tab (at effectiveActiveIndex) regardless of other selection state.
+		// This ensures the tab panel remains visible when editing labels in tabs-menu.
+		if ( isActiveTab ) {
 			return true;
 		}
 		return false;
-	}, [
-		isSelected,
-		hasInnerBlocksSelected,
-		forceDisplay,
-		isDefaultTab,
-		isTabsClientSelected,
-		tabsHasSelectedBlock,
-	] );
+	}, [ isSelected, hasInnerBlocksSelected, isActiveTab ] );
 
 	// Use a custom anchor, if set. Otherwise fall back to the slug generated from the label text.
 	const tabPanelId = useMemo(
@@ -182,67 +145,29 @@ export default function Edit( {
 	);
 	const tabLabelId = useMemo( () => `${ tabPanelId }--tab`, [ tabPanelId ] );
 
-	const tabItemColorProps = useColorProps( tabsAttributes );
-	const tabContentTypographyProps = useTypographyProps( attributes );
-
 	const blockProps = useBlockProps( {
 		hidden: ! isSelectedTab,
+		'aria-labelledby': tabLabelId,
+		id: tabPanelId,
+		role: 'tabpanel',
+		tabIndex: isSelectedTab ? 0 : -1,
+		className: clsx( 'wp-block-tab__editor-content', layoutClassNames ),
 	} );
 
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			'aria-labelledby': tabLabelId,
-			id: tabPanelId,
-			role: 'tabpanel',
-			ref: innerBlocksRef,
-			tabIndex: isSelectedTab ? 0 : -1,
-			className: clsx(
-				tabContentTypographyProps.className,
-				'tabs__tab-editor-content',
-				layoutClassNames
-			),
-			style: {
-				...tabContentTypographyProps.style,
-			},
-		},
-		{
-			template: TEMPLATE,
-		}
-	);
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
 
 	return (
-		<>
-			<div { ...blockProps }>
-				<Controls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					tabsClientId={ tabsClientId }
-					blockIndex={ blockIndex }
-					isDefaultTab={ isDefaultTab }
-				/>
-				{ 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 }
-						/>
-						<section { ...innerBlocksProps } />
-					</>
-				) }
-			</div>
-		</>
+		<section { ...innerBlocksProps }>
+			<Controls
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				tabsClientId={ tabsClientId }
+				blockIndex={ blockIndex }
+				isDefaultTab={ isDefaultTab }
+			/>
+			{ isSelectedTab && innerBlocksProps.children }
+		</section>
 	);
 }

package/src/tab/index.php

@@ -5,55 +5,6 @@
  * @package WordPress
  */
 
-/**
- * Build typography classnames from named size/family.
- *
- * @param array $attributes Block attributes.
- * @return string Classnames.
- */
-function block_core_tab_get_typography_classes( array $attributes ): string {
-	$typography_classes    = array();
-	$has_named_font_family = ! empty( $attributes['fontFamily'] );
-	$has_named_font_size   = ! empty( $attributes['fontSize'] );
-
-	if ( $has_named_font_size ) {
-		$typography_classes[] = sprintf( 'has-%s-font-size', esc_attr( (string) $attributes['fontSize'] ) );
-	}
-
-	if ( $has_named_font_family ) {
-		$typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( (string) $attributes['fontFamily'] ) );
-	}
-
-	return implode( ' ', $typography_classes );
-}
-
-/**
- * Build inline typography styles.
- *
- * @param array $attributes Block attributes.
- * @return string Inline CSS.
- */
-function block_core_tab_get_typography_styles( array $attributes ): string {
-	$typography_styles = array();
-
-	if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) {
-		$typography_styles[] = sprintf(
-			'font-size: %s;',
-			wp_get_typography_font_size_value(
-				array(
-					'size' => $attributes['style']['typography']['fontSize'],
-				)
-			)
-		);
-	}
-
-	if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) {
-		$typography_styles[] = sprintf( 'font-family: %s;', $attributes['style']['typography']['fontFamily'] );
-	}
-
-	return implode( '', $typography_styles );
-}
-
 /**
  * Render callback for core/tab.
  *
@@ -66,6 +17,11 @@ function block_core_tab_render( array $attributes, string $content ): string {
 	$tag_processor = new WP_HTML_Tag_Processor( $content );
 	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tab' ) );
 	$tab_id = (string) $tag_processor->get_attribute( 'id' );
+	// If no id, generate a unique one
+	if ( empty( $tab_id ) ) {
+		$tab_id = sanitize_title( $attributes['label'] );
+		$tag_processor->set_attribute( 'id', $tab_id );
+	}
 
 	/**
 	 * Add interactivity to the tab element.
@@ -85,13 +41,6 @@ function block_core_tab_render( array $attributes, string $content ): string {
 		)
 	);
 
-	/**
-	 * Process style classnames.
-	 */
-	$classname  = (string) $tag_processor->get_attribute( 'class' );
-	$classname .= ' ' . block_core_tab_get_typography_classes( $attributes );
-	$tag_processor->set_attribute( 'class', $classname );
-
 	/**
 	 * Process accessibility and interactivity attributes.
 	 */
@@ -100,13 +49,6 @@ function block_core_tab_render( array $attributes, string $content ): string {
 	$tag_processor->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
 	$tag_processor->set_attribute( 'data-wp-bind--tabindex', 'state.tabIndexAttribute' );
 
-	/**
-	 * Process style attribute.
-	 */
-	$style  = (string) $tag_processor->get_attribute( 'style' );
-	$style .= block_core_tab_get_typography_styles( $attributes );
-	$tag_processor->set_attribute( 'style', $style );
-
 	return (string) $tag_processor->get_updated_html();
 }
 

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

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * "Remove Tab" button in the block toolbar for the tab block.
+ * Removes the currently active tab from the tab-panels block.
+ *
+ * @param {Object} props
+ * @param {string} props.tabsClientId The client ID of the parent tabs block.
+ * @return {JSX.Element} The toolbar control element.
+ */
+export default function RemoveTabToolbarControl( { tabsClientId } ) {
+	const {
+		removeBlock,
+		updateBlockAttributes,
+		selectBlock,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	// Find the tab-panels block, active tab, and tab count within the tabs block
+	const { activeTabClientId, tabCount, editorActiveTabIndex } = useSelect(
+		( select ) => {
+			if ( ! tabsClientId ) {
+				return {
+					activeTabClientId: null,
+					tabCount: 0,
+					editorActiveTabIndex: 0,
+				};
+			}
+			const { getBlocks, getBlockAttributes } =
+				select( blockEditorStore );
+			const tabsAttributes = getBlockAttributes( tabsClientId );
+			const activeIndex =
+				tabsAttributes?.editorActiveTabIndex ??
+				tabsAttributes?.activeTabIndex ??
+				0;
+			const innerBlocks = getBlocks( tabsClientId );
+			const tabPanels = innerBlocks.find(
+				( block ) => block.name === 'core/tab-panels'
+			);
+			const tabs = tabPanels?.innerBlocks || [];
+			const activeTab = tabs[ activeIndex ];
+			return {
+				activeTabClientId: activeTab?.clientId || null,
+				tabCount: tabs.length,
+				editorActiveTabIndex: activeIndex,
+			};
+		},
+		[ tabsClientId ]
+	);
+
+	const removeTab = () => {
+		if ( ! activeTabClientId || tabCount <= 1 ) {
+			return;
+		}
+
+		// Calculate new active index after removal
+		const newActiveIndex =
+			editorActiveTabIndex >= tabCount - 1
+				? tabCount - 2 // If removing last tab, select the previous one
+				: editorActiveTabIndex; // Otherwise keep the same index (next tab shifts into position)
+
+		// Update the active tab index before removing
+		__unstableMarkNextChangeAsNotPersistent();
+		updateBlockAttributes( tabsClientId, {
+			editorActiveTabIndex: newActiveIndex,
+		} );
+
+		// Remove the tab
+		removeBlock( activeTabClientId, false );
+
+		// Select the tabs block after removal
+		if ( tabsClientId ) {
+			selectBlock( tabsClientId );
+		}
+	};
+
+	// Don't show the button if there's only one tab or no active tab
+	const isDisabled = tabCount <= 1 || ! activeTabClientId;
+
+	return (
+		<BlockControls group="other">
+			<ToolbarGroup>
+				<ToolbarButton
+					className="components-toolbar__control"
+					label={ __( 'Remove the current tab' ) }
+					onClick={ removeTab }
+					showTooltip
+					text={ __( 'Remove Tab' ) }
+					disabled={ isDisabled }
+				/>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}

package/src/tab/save.js

@@ -3,14 +3,12 @@
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function Save( { attributes } ) {
+export default function save( { attributes } ) {
 	const { anchor } = attributes;
 
 	const tabPanelId = anchor;
 
-	// eslint-disable-next-line react-compiler/react-compiler
 	const blockProps = useBlockProps.save();
-	// eslint-disable-next-line react-compiler/react-compiler
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
 	return <section { ...innerBlocksProps } id={ tabPanelId } />;

package/src/tab/style.scss

@@ -4,6 +4,13 @@
 	flex-grow: 1;
 	box-sizing: border-box;
 
+	& > *:first-child {
+		margin-top: 0;
+	}
+	& > *:last-child {
+		margin-bottom: 0;
+	}
+
 	&[hidden],
 	&:empty {
 		display: none !important;
@@ -13,7 +20,7 @@
 	}
 }
 
-.wp-block-tab.wp-block section.has-background,
+.wp-block-tab.wp-block.has-background,
 .wp-block-tab:not(.wp-block).has-background {
 	padding: var(--wp--preset--spacing--30);
 }