@wordpress/block-library 9.38.1-next.v.0 → 9.39.0

package/src/tabs/controls.js

@@ -2,161 +2,28 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, PanelBody, TextControl } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
-import {
-	ContrastChecker,
-	InspectorControls,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
-} from '@wordpress/block-editor';
+import { PanelBody, TextControl } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
 
-function ContrastCheckerMatrix( { attributes } ) {
+export default function Controls( { attributes, setAttributes, clientId } ) {
 	const {
-		className,
-		fontSize,
-		tabActiveColor,
-		customTabActiveColor,
-		tabActiveTextColor,
-		customTabActiveTextColor,
-		tabInactiveColor,
-		customTabInactiveColor,
-		tabTextColor,
-		customTabTextColor,
-		tabHoverColor,
-		customTabHoverColor,
-		tabHoverTextColor,
-		customTabHoverTextColor,
-	} = attributes;
-
-	const activeBackground = useMemo( () => {
-		if ( className?.includes( 'is-style-links' ) ) {
-			return '#fff';
-		}
-		if ( tabActiveColor?.color ) {
-			return tabActiveColor.color;
-		}
-		return customTabActiveColor;
-	}, [ tabActiveColor, customTabActiveColor, className ] );
-
-	const activeText = useMemo( () => {
-		if ( tabActiveTextColor?.color ) {
-			return tabActiveTextColor.color;
-		}
-		return customTabActiveTextColor;
-	}, [ tabActiveTextColor, customTabActiveTextColor ] );
-
-	const inactiveBackground = useMemo( () => {
-		if ( className?.includes( 'is-style-links' ) ) {
-			return '#fff';
-		}
-		if ( tabInactiveColor?.color ) {
-			return tabInactiveColor.color;
-		}
-		return customTabInactiveColor;
-	}, [ tabInactiveColor, customTabInactiveColor, className ] );
-
-	const inactiveText = useMemo( () => {
-		if ( tabTextColor?.color ) {
-			return tabTextColor.color;
-		}
-		return customTabTextColor;
-	}, [ tabTextColor, customTabTextColor ] );
-
-	const hoverBackground = useMemo( () => {
-		if ( tabHoverColor?.color ) {
-			return tabHoverColor.color;
-		}
-		return customTabHoverColor;
-	}, [ tabHoverColor, customTabHoverColor ] );
-
-	const hoverText = useMemo( () => {
-		if ( tabHoverTextColor?.color ) {
-			return tabHoverTextColor.color;
-		}
-		return customTabHoverTextColor;
-	}, [ tabHoverTextColor, customTabHoverTextColor ] );
-
-	return (
-		<>
-			<ContrastChecker
-				backgroundColor={ activeBackground }
-				fontSize={ fontSize }
-				textColor={ activeText }
-			/>
-			<ContrastChecker
-				backgroundColor={ inactiveBackground }
-				fontSize={ fontSize }
-				textColor={ inactiveText }
-			/>
-			<ContrastChecker
-				backgroundColor={ hoverBackground }
-				fontSize={ fontSize }
-				textColor={ hoverText }
-			/>
-		</>
-	);
-}
-
-export default function Controls( {
-	attributes,
-	setAttributes,
-	clientId,
-	tabInactiveColor,
-	setTabInactiveColor,
-	tabHoverColor,
-	setTabHoverColor,
-	tabActiveColor,
-	setTabActiveColor,
-	tabTextColor,
-	setTabTextColor,
-	tabActiveTextColor,
-	setTabActiveTextColor,
-	tabHoverTextColor,
-	setTabHoverTextColor,
-} ) {
-	const {
-		customTabInactiveColor,
-		customTabActiveColor,
-		customTabHoverColor,
-		customTabTextColor,
-		customTabActiveTextColor,
-		customTabHoverTextColor,
-		orientation,
 		metadata = {
 			name: '',
 		},
 	} = attributes;
-	/**
-	 * Get the color settings for the block.
-	 */
-	const colorSettings = useMultipleOriginColorsAndGradients();
 
 	return (
 		<>
-			<AddTabToolbarControl
-				tabsClientId={ clientId }
-				attributes={ attributes }
-			/>
+			<AddTabToolbarControl tabsClientId={ clientId } />
+			<RemoveTabToolbarControl tabsClientId={ clientId } />
 			<InspectorControls>
-				<PanelBody title={ __( 'Tabs Settings' ) }>
-					<ToggleControl
-						label={ __( 'Vertical Tabs' ) }
-						checked={ 'vertical' === orientation }
-						onChange={ () =>
-							setAttributes( {
-								orientation:
-									'vertical' === orientation
-										? 'horizontal'
-										: 'vertical',
-							} )
-						}
-					/>
+				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						label={ __( 'Tabs Title' ) }
 						help={ __(
@@ -173,87 +40,6 @@ export default function Controls( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<InspectorControls group="color">
-				<ColorGradientSettingsDropdown
-					settings={ [
-						{
-							label: __( 'Tab Active Background' ),
-							colorValue:
-								tabActiveColor?.color ?? customTabActiveColor,
-							onColorChange: ( value ) => {
-								setTabActiveColor( value );
-								setAttributes( {
-									customTabActiveColor: value,
-								} );
-							},
-						},
-						{
-							label: __( 'Tab Active Text' ),
-							colorValue:
-								tabActiveTextColor?.color ??
-								customTabActiveTextColor,
-							onColorChange: ( value ) => {
-								setTabActiveTextColor( value );
-								setAttributes( {
-									customTabActiveTextColor: value,
-								} );
-							},
-						},
-						{
-							label: __( 'Tab Inactive Background' ),
-							colorValue:
-								tabInactiveColor?.color ??
-								customTabInactiveColor,
-							onColorChange: ( value ) => {
-								setTabInactiveColor( value );
-								setAttributes( {
-									customTabInactiveColor: value,
-								} );
-							},
-						},
-						{
-							label: __( 'Tab Inactive Text' ),
-							colorValue:
-								tabTextColor?.color ?? customTabTextColor,
-							onColorChange: ( value ) => {
-								setTabTextColor( value );
-								setAttributes( {
-									customTabTextColor: value,
-								} );
-							},
-						},
-						{
-							label: __( 'Tab Hover Background' ),
-							colorValue:
-								tabHoverColor?.color ?? customTabHoverColor,
-							onColorChange: ( value ) => {
-								setTabHoverColor( value );
-								setAttributes( {
-									customTabHoverColor: value,
-								} );
-							},
-						},
-						{
-							label: __( 'Tab Hover Text' ),
-							colorValue:
-								tabHoverTextColor?.color ??
-								customTabHoverTextColor,
-							onColorChange: ( value ) => {
-								setTabHoverTextColor( value );
-								setAttributes( {
-									customTabHoverTextColor: value,
-								} );
-							},
-						},
-					] }
-					panelId={ clientId }
-					disableCustomColors={ false }
-					__experimentalIsRenderedInSidebar
-					__next40pxDefaultSize
-					{ ...colorSettings }
-				/>
-				<ContrastCheckerMatrix attributes={ attributes } />
-			</InspectorControls>
 		</>
 	);
 }

package/src/tabs/deprecated.js

@@ -0,0 +1,214 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * The old attributes before restructuring.
+ * Maintain during experimental phase to allow for migration.
+ *
+ * TODO: Should be removed after the experimental phase before release into main block library.
+ */
+const v1Attributes = {
+	tabsId: {
+		type: 'string',
+		default: '',
+	},
+	orientation: {
+		type: 'string',
+		default: 'horizontal',
+		enum: [ 'horizontal', 'vertical' ],
+	},
+	activeTabIndex: {
+		type: 'number',
+		default: 0,
+	},
+	tabInactiveColor: {
+		type: 'string',
+	},
+	customTabInactiveColor: {
+		type: 'string',
+	},
+	tabHoverColor: {
+		type: 'string',
+	},
+	customTabHoverColor: {
+		type: 'string',
+	},
+	tabActiveColor: {
+		type: 'string',
+	},
+	customTabActiveColor: {
+		type: 'string',
+	},
+	tabTextColor: {
+		type: 'string',
+	},
+	customTabTextColor: {
+		type: 'string',
+	},
+	tabActiveTextColor: {
+		type: 'string',
+	},
+	customTabActiveTextColor: {
+		type: 'string',
+	},
+	tabHoverTextColor: {
+		type: 'string',
+	},
+	customTabHoverTextColor: {
+		type: 'string',
+	},
+};
+
+/**
+ * The old save function before restructuring.
+ * This renders the tab blocks directly as children with a tabs list placeholder.
+ *
+ * @param {Object} root0            Component props.
+ * @param {Object} root0.attributes Block attributes.
+ */
+function v1Save( { attributes } ) {
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( {} );
+	const title = attributes?.metadata?.name || 'Tab Contents';
+
+	return (
+		<div { ...blockProps }>
+			<h3 className="tabs__title">{ title }</h3>
+			<ul className="tabs__list"></ul>
+			{ innerBlocksProps.children }
+		</div>
+	);
+}
+
+/**
+ * Migration function to convert old tabs structure to new structure.
+ *
+ * Old structure:
+ * - core/tabs (with color attributes and tab innerblocks)
+ *   - core/tab
+ *   - core/tab
+ *
+ * New structure:
+ * - core/tabs (orientation only)
+ *   - core/tabs-menu (with color attributes)
+ *   - core/tab-panels
+ *     - core/tab
+ *     - core/tab
+ *
+ * @param {Object} attributes  Block attributes.
+ * @param {Array}  innerBlocks Inner blocks array.
+ */
+function v1Migrate( attributes, innerBlocks ) {
+	// Extract color attributes for tabs-menu
+	const tabsMenuAttributes = {
+		// Map inactive colors to core background/text supports
+		backgroundColor: attributes.tabInactiveColor,
+		textColor: attributes.tabTextColor,
+		// Map custom inactive colors
+		style: {
+			color: {
+				background: attributes.customTabInactiveColor,
+				text: attributes.customTabTextColor,
+			},
+		},
+		// Active colors
+		activeBackgroundColor: attributes.tabActiveColor,
+		customActiveBackgroundColor: attributes.customTabActiveColor,
+		activeTextColor: attributes.tabActiveTextColor,
+		customActiveTextColor: attributes.customTabActiveTextColor,
+		// Hover colors
+		hoverBackgroundColor: attributes.tabHoverColor,
+		customHoverBackgroundColor: attributes.customTabHoverColor,
+		hoverTextColor: attributes.tabHoverTextColor,
+		customHoverTextColor: attributes.customTabHoverTextColor,
+	};
+
+	// Clean up undefined values from style object
+	if ( tabsMenuAttributes.style?.color ) {
+		if ( ! tabsMenuAttributes.style.color.background ) {
+			delete tabsMenuAttributes.style.color.background;
+		}
+		if ( ! tabsMenuAttributes.style.color.text ) {
+			delete tabsMenuAttributes.style.color.text;
+		}
+		if ( Object.keys( tabsMenuAttributes.style.color ).length === 0 ) {
+			delete tabsMenuAttributes.style.color;
+		}
+		if ( Object.keys( tabsMenuAttributes.style ).length === 0 ) {
+			delete tabsMenuAttributes.style;
+		}
+	}
+
+	// Clean up undefined top-level attributes
+	Object.keys( tabsMenuAttributes ).forEach( ( key ) => {
+		if ( tabsMenuAttributes[ key ] === undefined ) {
+			delete tabsMenuAttributes[ key ];
+		}
+	} );
+
+	// Create tabs-menu block
+	const tabsMenuBlock = createBlock( 'core/tabs-menu', tabsMenuAttributes );
+
+	// Create tab-panels block with existing tab innerblocks
+	const tabPanelsBlock = createBlock( 'core/tab-panels', {}, innerBlocks );
+
+	// Return new attributes (stripped of color attrs) and new innerblocks structure
+	const newAttributes = {
+		tabsId: attributes.tabsId,
+		orientation: attributes.orientation,
+		activeTabIndex: attributes.activeTabIndex,
+		metadata: attributes.metadata,
+	};
+
+	return [ newAttributes, [ tabsMenuBlock, tabPanelsBlock ] ];
+}
+
+/**
+ * Check if block is using old structure (tab blocks directly as children).
+ *
+ * @param {Object} attributes  Block attributes.
+ * @param {Array}  innerBlocks Inner blocks array.
+ */
+function v1IsEligible( attributes, innerBlocks ) {
+	// If there are any direct tab children (not wrapped in tab-panels), this is old structure
+	return innerBlocks.some( ( block ) => block.name === 'core/tab' );
+}
+
+const deprecated = [
+	{
+		attributes: v1Attributes,
+		supports: {
+			align: true,
+			color: {
+				text: false,
+				background: false,
+			},
+			html: false,
+			interactivity: true,
+			spacing: {
+				blockGap: [ 'horizontal', 'vertical' ],
+				margin: true,
+				padding: false,
+			},
+			typography: {
+				fontSize: true,
+				__experimentalFontFamily: true,
+			},
+			__experimentalBorder: {
+				radius: true,
+				__experimentalSkipSerialization: true,
+				__experimentalDefaultControls: {
+					radius: true,
+				},
+			},
+		},
+		isEligible: v1IsEligible,
+		migrate: v1Migrate,
+		save: v1Save,
+	},
+];
+
+export default deprecated;

package/src/tabs/edit.js

@@ -1,108 +1,148 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
-	withColors,
+	BlockContextProvider,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useMemo, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import StyleEngine from './style-engine';
 import Controls from './controls';
 
-const TABS_TEMPLATE = [ [ 'core/tab', {} ] ];
-
-const DEFAULT_BLOCK = {
-	name: 'core/tab',
-	attributesToCopy: [ 'className', 'fontFamily', 'fontSize' ],
-};
+const TABS_TEMPLATE = [
+	[
+		'core/tabs-menu',
+		{
+			lock: {
+				remove: true,
+			},
+		},
+	],
+	[
+		'core/tab-panels',
+		{
+			lock: {
+				remove: true,
+			},
+		},
+		[
+			[
+				'core/tab',
+				{
+					anchor: 'tab-1',
+					label: 'Tab 1',
+				},
+				[
+					[
+						'core/paragraph',
+						{
+							placeholder: __( 'Type / to add a block to tab' ),
+						},
+					],
+				],
+			],
+		],
+	],
+];
 
 function Edit( {
 	clientId,
 	attributes,
 	setAttributes,
-	tabInactiveColor,
-	setTabInactiveColor,
-	tabHoverColor,
-	setTabHoverColor,
-	tabActiveColor,
-	setTabActiveColor,
-	tabTextColor,
-	setTabTextColor,
-	tabActiveTextColor,
-	setTabActiveTextColor,
-	tabHoverTextColor,
-	setTabHoverTextColor,
+	__unstableLayoutClassNames: layoutClassNames,
 } ) {
-	const { style, orientation } = attributes;
+	const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;
+
+	/**
+	 * Initialize editorActiveTabIndex to activeTabIndex on mount.
+	 * This ensures the ephemeral editor state starts at the persisted default.
+	 */
+	useEffect( () => {
+		if ( editorActiveTabIndex === undefined ) {
+			setAttributes( { editorActiveTabIndex: activeTabIndex } );
+		}
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
+
+	/**
+	 * Compute tabs list from innerblocks to provide via context.
+	 * This traverses the tab-panels block to find all tab blocks
+	 * and extracts their label and anchor for the tabs-menu to consume.
+	 */
+	const tabsList = useSelect(
+		( select ) => {
+			const { getBlocks } = select( blockEditorStore );
+			const innerBlocks = getBlocks( clientId );
+
+			// Find tab-panels block and extract tab data
+			const tabPanels = innerBlocks.find(
+				( block ) => block.name === 'core/tab-panels'
+			);
+
+			if ( ! tabPanels ) {
+				return [];
+			}
+
+			return tabPanels.innerBlocks
+				.filter( ( block ) => block.name === 'core/tab' )
+				.map( ( tab, index ) => ( {
+					id: tab.attributes.anchor || `tab-${ index }`,
+					label: tab.attributes.label || '',
+					clientId: tab.clientId,
+					index,
+				} ) );
+		},
+		[ clientId ]
+	);
+
+	/**
+	 * Memoize context value to prevent unnecessary re-renders.
+	 */
+	const contextValue = useMemo(
+		() => ( {
+			'core/tabs-list': tabsList,
+			'core/tabs-id': anchor,
+			'core/tabs-activeTabIndex': activeTabIndex,
+			'core/tabs-editorActiveTabIndex': editorActiveTabIndex,
+		} ),
+		[ tabsList, anchor, activeTabIndex, editorActiveTabIndex ]
+	);
 
 	/**
 	 * Block props for the tabs container.
 	 */
 	const blockProps = useBlockProps( {
-		className: clsx(
-			'vertical' === orientation ? 'is-vertical' : 'is-horizontal'
-		),
-		style: {
-			...style,
-		},
+		className: layoutClassNames,
 	} );
 
 	/**
-	 * Innerblocks props for the tabs list.
+	 * Innerblocks props for the tabs container.
 	 */
 	const innerBlockProps = useInnerBlocksProps( blockProps, {
-		defaultBlock: DEFAULT_BLOCK,
-		directInsert: true,
-		__experimentalCaptureToolbars: true,
-		clientId,
-		orientation,
 		template: TABS_TEMPLATE,
-		renderAppender: false, // Appender is rendered by individual tab blocks.
+		templateLock: false,
+		renderAppender: false,
+		__experimentalCaptureToolbars: true,
 	} );
 
 	return (
-		<>
+		<BlockContextProvider value={ contextValue }>
 			<div { ...innerBlockProps }>
-				{ innerBlockProps.children }
-				<StyleEngine attributes={ attributes } clientId={ clientId } />
 				<Controls
-					{ ...{
-						clientId,
-						attributes,
-						setAttributes,
-						tabInactiveColor,
-						setTabInactiveColor,
-						tabHoverColor,
-						setTabHoverColor,
-						tabActiveColor,
-						setTabActiveColor,
-						tabTextColor,
-						setTabTextColor,
-						tabActiveTextColor,
-						setTabActiveTextColor,
-						tabHoverTextColor,
-						setTabHoverTextColor,
-					} }
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
 				/>
+				{ innerBlockProps.children }
 			</div>
-		</>
+		</BlockContextProvider>
 	);
 }
 
-export default withColors(
-	'tabInactiveColor',
-	'tabHoverColor',
-	'tabActiveColor',
-	'tabTextColor',
-	'tabActiveTextColor',
-	'tabHoverTextColor'
-)( Edit );
+export default Edit;

package/src/tabs/index.js

@@ -5,6 +5,7 @@ import initBlock from '../utils/init-block';
 import edit from './edit';
 import save from './save';
 import icon from './icon';
+import deprecated from './deprecated';
 
 import metadata from './block.json';
 
@@ -16,6 +17,7 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	deprecated,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );