@wordpress/block-library 9.44.0 → 9.45.0

package/src/tab-panels/block.json

@@ -0,0 +1,66 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"__experimental": true,
+	"apiVersion": 3,
+	"name": "core/tab-panels",
+	"title": "Tab Panels",
+	"description": "Container for tab panel content in a tabbed interface.",
+	"category": "design",
+	"textdomain": "default",
+	"parent": [ "core/tabs" ],
+	"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,
+			"heading": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"blockGap": false,
+			"padding": true,
+			"margin": 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/tab-panels/edit.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
+
+const TAB_PANELS_TEMPLATE = [ [ 'core/tab-panel', {} ] ];
+
+export default function Edit( { clientId } ) {
+	const blockProps = useBlockProps();
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TAB_PANELS_TEMPLATE,
+		templateLock: false,
+		renderAppender: false, // Appender handled by individual tab blocks
+	} );
+
+	// Get the parent tabs block clientId
+	const tabsClientId = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockRootClientId( clientId ),
+		[ clientId ]
+	);
+
+	return (
+		<>
+			<AddTabToolbarControl tabsClientId={ tabsClientId } />
+			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/{tabs-menu-item → tab-panels}/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { tabsMenuItem as icon } from '@wordpress/icons';
+import { contents as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies

package/src/tab-panels/save.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+export default function save() {
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <div { ...innerBlocksProps } />;
+}

package/src/tab-panels/style.scss

@@ -0,0 +1,4 @@
+.wp-block-tab-panels {
+	flex-grow: 1;
+	min-width: 0;
+}

package/src/tabs/block.json

@@ -5,10 +5,9 @@
 	"name": "core/tabs",
 	"title": "Tabs",
 	"description": "Display content in a tabbed interface to help users navigate detailed content with ease.",
-	"version": "1.0.0",
 	"category": "design",
 	"textdomain": "default",
-	"allowedBlocks": [ "core/tabs-menu", "core/tab-panel" ],
+	"allowedBlocks": [ "core/tab-list", "core/tab-panels" ],
 	"attributes": {
 		"activeTabIndex": {
 			"type": "number",

package/src/tabs/controls.js

@@ -1,8 +1,8 @@
 /**
  * Internal dependencies
  */
-import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
-import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
+import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
 
 export default function Controls( { clientId } ) {
 	return (

package/src/tabs/edit.js

@@ -7,47 +7,40 @@ import {
 	BlockContextProvider,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useEffect, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { useMemo, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Controls from './controls';
+import useTabListSync from './use-tab-list-sync';
 
 const EMPTY_ARRAY = [];
 
 const TABS_TEMPLATE = [
 	[
-		'core/tabs-menu',
-		{
-			lock: {
-				remove: true,
-			},
-		},
+		'core/tab-list',
+		{},
 		[
-			[ 'core/tabs-menu-item', {} ],
-			[ 'core/tabs-menu-item', {} ],
+			[ 'core/tab', {} ],
+			[ 'core/tab', {} ],
 		],
 	],
 	[
-		'core/tab-panel',
-		{
-			lock: {
-				remove: true,
-			},
-		},
+		'core/tab-panels',
+		{},
 		[
 			[
-				'core/tab',
+				'core/tab-panel',
 				{
 					label: __( 'Tab' ),
 				},
 				[ [ 'core/paragraph' ] ],
 			],
 			[
-				'core/tab',
+				'core/tab-panel',
 				{
 					label: __( 'Tab' ),
 				},
@@ -57,12 +50,7 @@ const TABS_TEMPLATE = [
 	],
 ];
 
-function Edit( {
-	clientId,
-	attributes,
-	setAttributes,
-	__unstableLayoutClassNames: layoutClassNames,
-} ) {
+function Edit( { clientId, attributes, setAttributes } ) {
 	const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;
 
 	/**
@@ -75,132 +63,34 @@ function Edit( {
 		}
 	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
 
-	const { removeBlock, replaceInnerBlocks } = useDispatch( blockEditorStore );
-
-	const { tabs, tabPanelClientId, menuItems } = useSelect(
+	const { tabPanels, tabPanelsClientId, tabs, tabListClientId } = useSelect(
 		( select ) => {
 			const { getBlocks } = select( blockEditorStore );
 			const innerBlocks = getBlocks( clientId );
 
-			const tabPanel = innerBlocks.find(
-				( block ) => block.name === 'core/tab-panel'
+			const tabPanelBlocks = innerBlocks.find(
+				( block ) => block.name === 'core/tab-panels'
 			);
-			const tabsMenu = innerBlocks.find(
-				( block ) => block.name === 'core/tabs-menu'
+			const tabList = innerBlocks.find(
+				( block ) => block.name === 'core/tab-list'
 			);
 
 			return {
-				tabs: tabPanel?.innerBlocks ?? EMPTY_ARRAY,
-				tabPanelClientId: tabPanel?.clientId ?? null,
-				menuItems: tabsMenu?.innerBlocks ?? EMPTY_ARRAY,
+				tabPanels: tabPanelBlocks?.innerBlocks ?? EMPTY_ARRAY,
+				tabPanelsClientId: tabPanelBlocks?.clientId ?? null,
+				tabs: tabList?.innerBlocks ?? EMPTY_ARRAY,
+				tabListClientId: tabList?.clientId ?? null,
 			};
 		},
 		[ clientId ]
 	);
 
-	/**
-	 * Keep tabs and menu items in sync when either is deleted directly (e.g.
-	 * via the Backspace key or List View).
-	 *
-	 * TODO: This effect only handles deletions. The two lists can get out of
-	 * sync in other cases: if a user pastes a core/tab block into the tab-panel
-	 * (or duplicates one), no corresponding tabs-menu-item is created; if a
-	 * user drags and drops a tabs-menu-item, the tab panel is not copied with
-	 * it. We should extend this effect to handle insertions, detecting when
-	 * tabs.length > menuItems.length and inserting the missing menu
-	 * item(s) at the correct index.
-	 */
-	const prevSyncStateRef = useRef( null );
-	useEffect( () => {
-		const currentTabs = tabs.map( ( tab ) => ( {
-			clientId: tab.clientId,
-		} ) );
-
-		if ( prevSyncStateRef.current === null ) {
-			prevSyncStateRef.current = {
-				tabs: currentTabs,
-				menuItems: [ ...menuItems ],
-			};
-			return;
-		}
-
-		const { tabs: prevTabs, menuItems: prevMenuItems } =
-			prevSyncStateRef.current;
-
-		const tabsRemoved = currentTabs.length < prevTabs.length;
-		const menuItemsRemoved = menuItems.length < prevMenuItems.length;
-		const menuItemsReordered =
-			! tabsRemoved &&
-			! menuItemsRemoved &&
-			menuItems.length === prevMenuItems.length &&
-			menuItems.some(
-				( m, i ) => m.clientId !== prevMenuItems[ i ]?.clientId
-			);
-
-		// Update snapshot to the current state.
-		// Snapshot is updated eagerly; post-removal mutations keep it consistent
-		// so the next effect invocation sees a stable baseline.
-		prevSyncStateRef.current = {
-			tabs: currentTabs,
-			menuItems: [ ...menuItems ],
-		};
-
-		// When menu items are reordered, move the corresponding tab content
-		// blocks to match the new order.
-		if ( menuItemsReordered && tabPanelClientId ) {
-			const reorderedTabs = menuItems
-				.map( ( menuItem ) => {
-					const oldIndex = prevMenuItems.findIndex(
-						( pm ) => pm.clientId === menuItem.clientId
-					);
-					return oldIndex !== -1 ? tabs[ oldIndex ] : null;
-				} )
-				.filter( Boolean );
-			if ( reorderedTabs.length === tabs.length ) {
-				replaceInnerBlocks( tabPanelClientId, reorderedTabs, false );
-			}
-			return;
-		}
-
-		// Lists are in sync, nothing changed, or toolbar already removed both.
-		if (
-			( ! tabsRemoved && ! menuItemsRemoved ) ||
-			( tabsRemoved && menuItemsRemoved )
-		) {
-			return;
-		}
-
-		const currentTabIds = new Set( currentTabs.map( ( t ) => t.clientId ) );
-		const currentMenuItemIds = new Set(
-			menuItems.map( ( m ) => m.clientId )
-		);
-
-		if ( tabsRemoved ) {
-			// Remove the menu item at the same position.
-			const removedIndex = prevTabs.findIndex(
-				( t ) => ! currentTabIds.has( t.clientId )
-			);
-			if ( removedIndex >= 0 && menuItems[ removedIndex ] ) {
-				removeBlock( menuItems[ removedIndex ].clientId, false );
-				prevSyncStateRef.current.menuItems =
-					prevSyncStateRef.current.menuItems.filter(
-						( _, i ) => i !== removedIndex
-					);
-			}
-		} else {
-			// Remove the tab at the same position.
-			const removedIndex = prevMenuItems.findIndex(
-				( m ) => ! currentMenuItemIds.has( m.clientId )
-			);
-			if ( removedIndex >= 0 && tabs[ removedIndex ] ) {
-				removeBlock( tabs[ removedIndex ].clientId, false );
-				prevSyncStateRef.current.tabs =
-					prevSyncStateRef.current.tabs.filter(
-						( _, i ) => i !== removedIndex
-					);
-			}
-		}
-	}, [ tabs, tabPanelClientId, menuItems, removeBlock, replaceInnerBlocks ] );
+	useTabListSync( {
+		tabPanels,
+		tabs,
+		tabPanelsClientId,
+		tabListClientId,
+	} );
 
 	/**
 	 * Memoize context value to prevent unnecessary re-renders.
@@ -209,9 +99,9 @@ function Edit( {
 		/**
 		 * Compute tabs list from innerblocks to provide via context.
 		 * This traverses the tab-panel block to find all tab blocks
-		 * and extracts their label and anchor for the tabs-menu to consume.
+		 * and extracts their label and anchor for the tab-list to consume.
 		 */
-		const tabList = tabs.map( ( tab, index ) => ( {
+		const tabList = tabPanels.map( ( tab, index ) => ( {
 			id: tab.attributes.anchor || `tab-${ index }`,
 			label: tab.attributes.label || '',
 			clientId: tab.clientId,
@@ -224,22 +114,14 @@ function Edit( {
 			'core/tabs-activeTabIndex': activeTabIndex,
 			'core/tabs-editorActiveTabIndex': editorActiveTabIndex,
 		};
-	}, [ tabs, anchor, activeTabIndex, editorActiveTabIndex ] );
+	}, [ tabPanels, anchor, activeTabIndex, editorActiveTabIndex ] );
 
-	/**
-	 * Block props for the tabs container.
-	 */
-	const blockProps = useBlockProps( {
-		className: layoutClassNames,
-	} );
+	const blockProps = useBlockProps();
 
-	/**
-	 * Innerblocks props for the tabs container.
-	 */
 	const innerBlockProps = useInnerBlocksProps( blockProps, {
 		__experimentalCaptureToolbars: true,
 		template: TABS_TEMPLATE,
-		templateLock: false,
+		templateLock: 'all',
 		renderAppender: false,
 	} );
 

package/src/tabs/index.js

@@ -21,22 +21,22 @@ export const settings = {
 	example: {
 		innerBlocks: [
 			{
-				name: 'core/tabs-menu',
+				name: 'core/tab-list',
 				innerBlocks: [
 					{
-						name: 'core/tabs-menu-item',
+						name: 'core/tab',
 						attributes: { anchor: 'tab-1-button' },
 					},
 					{
-						name: 'core/tabs-menu-item',
+						name: 'core/tab',
 						attributes: { anchor: 'tab-2-button' },
 					},
 				],
 			},
 			{
-				name: 'core/tab-panel',
+				name: 'core/tab-panels',
 				innerBlocks: [ 1, 2 ].map( ( index ) => ( {
-					name: 'core/tab',
+					name: 'core/tab-panel',
 					attributes: {
 						anchor: `tab-${ index }`,
 						label: sprintf(

package/src/tabs/index.php

@@ -20,10 +20,10 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array(), strin
 
 	// Find tab-panel block
 	foreach ( $innerblocks as $inner_block ) {
-		if ( 'core/tab-panel' === ( $inner_block['blockName'] ?? '' ) ) {
+		if ( 'core/tab-panels' === ( $inner_block['blockName'] ?? '' ) ) {
 			$tab_index = 0;
 			foreach ( $inner_block['innerBlocks'] ?? array() as $tab_block ) {
-				if ( 'core/tab' === ( $tab_block['blockName'] ?? '' ) ) {
+				if ( 'core/tab-panel' === ( $tab_block['blockName'] ?? '' ) ) {
 					$attrs     = $tab_block['attrs'] ?? array();
 					$tab_label = $attrs['label'] ?? '';
 
@@ -49,7 +49,7 @@ function block_core_tabs_generate_tabs_list( array $innerblocks = array(), strin
 }
 
 /**
- * Filter to provide tabs list context to core/tabs and core/tabs-menu blocks.
+ * Filter to provide tabs list context to core/tabs and core/tab-list blocks.
  * It is more performant to do this here, once, rather than in the tabs render and tabs context filters.
  * In this way core/tabs is both a provider and a consumer of the core/tabs-list context.
  *
@@ -103,9 +103,9 @@ function block_core_tabs_render_block_callback( array $attributes, string $conte
 	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs' ) );
 	$tag_processor->set_attribute( 'data-wp-interactive', 'core/tabs/private' );
 
-	// Inspect inside the tabs-menu to see if its vertical or not.
+	// 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-menu' ) ) ) {
+	while ( $tag_processor->next_tag( array( 'class_name' => 'wp-block-tabs-list' ) ) ) {
 		if ( $tag_processor->has_class( 'is-vertical' ) ) {
 			$is_vertical = true;
 			break;

package/src/tabs/style.scss

@@ -1,6 +1,3 @@
 .wp-block-tabs {
 	box-sizing: border-box;
-	.wp-block-tabs__title {
-		display: none;
-	}
 }