@wordpress/block-library 9.38.0 → 9.39.0

package/src/tabs-menu-item/controls.js

@@ -0,0 +1,262 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	BlockControls,
+	InspectorControls,
+	store as blockEditorStore,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
+import {
+	chevronLeft,
+	chevronRight,
+	chevronUp,
+	chevronDown,
+} from '@wordpress/icons';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
+
+function TabBlockMover( {
+	tabClientId,
+	tabIndex,
+	tabsCount,
+	tabsMenuClientId,
+	tabsClientId,
+} ) {
+	const {
+		moveBlocksUp,
+		moveBlocksDown,
+		updateBlockAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	const { tabPanelsClientId, orientation } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId, getBlockAttributes } =
+				select( blockEditorStore );
+			// Get orientation directly from the tabs-menu block's layout attribute.
+			// This is more reliable than getBlockListSettings which is set asynchronously.
+			const tabsMenuAttributes = tabsMenuClientId
+				? getBlockAttributes( tabsMenuClientId )
+				: null;
+			return {
+				tabPanelsClientId: getBlockRootClientId( tabClientId ),
+				orientation:
+					tabsMenuAttributes?.layout?.orientation || 'horizontal',
+			};
+		},
+		[ tabClientId, tabsMenuClientId ]
+	);
+
+	const isFirst = tabIndex === 0;
+	const isLast = tabIndex === tabsCount - 1;
+	const isHorizontal = orientation === 'horizontal';
+
+	// Icons and labels based on orientation (respects RTL for horizontal)
+	let upIcon, downIcon, upLabel, downLabel;
+	if ( isHorizontal ) {
+		if ( isRTL() ) {
+			upIcon = chevronRight;
+			downIcon = chevronLeft;
+			upLabel = __( 'Move tab right' );
+			downLabel = __( 'Move tab left' );
+		} else {
+			upIcon = chevronLeft;
+			downIcon = chevronRight;
+			upLabel = __( 'Move tab left' );
+			downLabel = __( 'Move tab right' );
+		}
+	} else {
+		upIcon = chevronUp;
+		downIcon = chevronDown;
+		upLabel = __( 'Move tab up' );
+		downLabel = __( 'Move tab down' );
+	}
+
+	// Handle moving tab and updating active index to follow the moved tab
+	const handleMoveUp = () => {
+		moveBlocksUp( [ tabClientId ], tabPanelsClientId );
+		// Update editorActiveTabIndex to follow the moved tab
+		if ( tabsClientId ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( tabsClientId, {
+				editorActiveTabIndex: tabIndex - 1,
+			} );
+		}
+	};
+
+	const handleMoveDown = () => {
+		moveBlocksDown( [ tabClientId ], tabPanelsClientId );
+		// Update editorActiveTabIndex to follow the moved tab
+		if ( tabsClientId ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( tabsClientId, {
+				editorActiveTabIndex: tabIndex + 1,
+			} );
+		}
+	};
+
+	// Don't render if only one tab
+	if ( tabsCount <= 1 ) {
+		return null;
+	}
+
+	return (
+		<BlockControls group="parent">
+			<ToolbarGroup
+				className={ clsx( 'block-editor-block-mover', {
+					'is-horizontal': isHorizontal,
+				} ) }
+			>
+				<div className="block-editor-block-mover__move-button-container">
+					<ToolbarItem>
+						{ ( itemProps ) => (
+							<Button
+								className={ clsx(
+									'block-editor-block-mover-button',
+									'is-up-button'
+								) }
+								icon={ upIcon }
+								label={ upLabel }
+								disabled={ isFirst }
+								accessibleWhenDisabled
+								onClick={ handleMoveUp }
+								__next40pxDefaultSize
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+					<ToolbarItem>
+						{ ( itemProps ) => (
+							<Button
+								className={ clsx(
+									'block-editor-block-mover-button',
+									'is-down-button'
+								) }
+								icon={ downIcon }
+								label={ downLabel }
+								disabled={ isLast }
+								accessibleWhenDisabled
+								onClick={ handleMoveDown }
+								__next40pxDefaultSize
+								{ ...itemProps }
+							/>
+						) }
+					</ToolbarItem>
+				</div>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
+
+export default function Controls( {
+	attributes,
+	setAttributes,
+	clientId,
+	tabsClientId,
+	tabClientId,
+	tabIndex,
+	tabsCount,
+	tabsMenuClientId,
+	activeBackgroundColor,
+	setActiveBackgroundColor,
+	activeTextColor,
+	setActiveTextColor,
+	hoverBackgroundColor,
+	setHoverBackgroundColor,
+	hoverTextColor,
+	setHoverTextColor,
+} ) {
+	const {
+		customActiveBackgroundColor,
+		customActiveTextColor,
+		customHoverBackgroundColor,
+		customHoverTextColor,
+	} = attributes;
+
+	const colorSettings = useMultipleOriginColorsAndGradients();
+
+	return (
+		<>
+			<TabBlockMover
+				tabClientId={ tabClientId }
+				tabIndex={ tabIndex }
+				tabsCount={ tabsCount }
+				tabsMenuClientId={ tabsMenuClientId }
+				tabsClientId={ tabsClientId }
+			/>
+			<AddTabToolbarControl tabsClientId={ tabsClientId } />
+			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+			<InspectorControls group="color">
+				<ColorGradientSettingsDropdown
+					settings={ [
+						{
+							label: __( 'Active Background' ),
+							colorValue:
+								activeBackgroundColor?.color ??
+								customActiveBackgroundColor,
+							onColorChange: ( value ) => {
+								setActiveBackgroundColor( value );
+								setAttributes( {
+									customActiveBackgroundColor: value,
+								} );
+							},
+						},
+						{
+							label: __( 'Active Text' ),
+							colorValue:
+								activeTextColor?.color ?? customActiveTextColor,
+							onColorChange: ( value ) => {
+								setActiveTextColor( value );
+								setAttributes( {
+									customActiveTextColor: value,
+								} );
+							},
+						},
+						{
+							label: __( 'Hover Background' ),
+							colorValue:
+								hoverBackgroundColor?.color ??
+								customHoverBackgroundColor,
+							onColorChange: ( value ) => {
+								setHoverBackgroundColor( value );
+								setAttributes( {
+									customHoverBackgroundColor: value,
+								} );
+							},
+						},
+						{
+							label: __( 'Hover Text' ),
+							colorValue:
+								hoverTextColor?.color ?? customHoverTextColor,
+							onColorChange: ( value ) => {
+								setHoverTextColor( value );
+								setAttributes( {
+									customHoverTextColor: value,
+								} );
+							},
+						},
+					] }
+					panelId={ clientId }
+					disableCustomColors={ false }
+					__experimentalIsRenderedInSidebar
+					__next40pxDefaultSize
+					{ ...colorSettings }
+				/>
+			</InspectorControls>
+		</>
+	);
+}

package/src/tabs-menu-item/edit.js

@@ -0,0 +1,322 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	withColors,
+	store as blockEditorStore,
+	RichText,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	RawHTML,
+	useRef,
+	useCallback,
+	useState,
+	useEffect,
+	useMemo,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import slugFromLabel from '../tab/slug-from-label';
+import Controls from './controls';
+
+const { requestAnimationFrame, cancelAnimationFrame } = window;
+
+function StaticLabel( { label, index } ) {
+	if ( label ) {
+		return (
+			<span>
+				<RawHTML>{ decodeEntities( label ) }</RawHTML>
+			</span>
+		);
+	}
+	return (
+		<span>
+			{ sprintf(
+				/* translators: %d is the tab index + 1 */
+				__( 'Tab %d' ),
+				index + 1
+			) }
+		</span>
+	);
+}
+
+function Edit( {
+	attributes,
+	setAttributes,
+	context,
+	clientId,
+	activeBackgroundColor,
+	setActiveBackgroundColor,
+	activeTextColor,
+	setActiveTextColor,
+	hoverBackgroundColor,
+	setHoverBackgroundColor,
+	hoverTextColor,
+	setHoverTextColor,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
+	// Context from tabs-menu (per-item context via BlockContextProvider)
+	const tabIndex = context[ 'core/tabs-menu-item-index' ] ?? 0;
+	const tabId = context[ 'core/tabs-menu-item-id' ] ?? '';
+	const tabLabel = context[ 'core/tabs-menu-item-label' ] ?? '';
+	const tabClientId = context[ 'core/tabs-menu-item-clientId' ] ?? '';
+
+	// Context from parent tabs block, memoized to prevent unnecessary re-renders.
+	const contextTabsList = context[ 'core/tabs-list' ];
+	const tabsList = useMemo(
+		() => contextTabsList || [],
+		[ contextTabsList ]
+	);
+	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;
+	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
+
+	// Memoize effectiveActiveIndex to ensure it updates when context changes
+	const effectiveActiveIndex = useMemo( () => {
+		return editorActiveTabIndex ?? activeTabIndex;
+	}, [ editorActiveTabIndex, activeTabIndex ] );
+
+	const isActiveTab = tabIndex === effectiveActiveIndex;
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const focusRef = useRef();
+	const labelElementRef = useRef( null );
+	const [ isEditing, setIsEditing ] = useState( false );
+	const [ editingLabel, setEditingLabel ] = useState( '' );
+
+	// Get parent tabs clientId for updating editorActiveTabIndex
+	const { tabsClientId, tabsMenuClientId, selectedTabClientId } = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getSelectedBlockClientIds,
+				hasSelectedInnerBlock,
+			} = select( blockEditorStore );
+			// tabs-menu-item -> tabs-menu -> tabs
+			const _tabsMenuClientId = getBlockRootClientId( clientId );
+			const _tabsClientId = _tabsMenuClientId
+				? getBlockRootClientId( _tabsMenuClientId )
+				: null;
+
+			const selectedIds = getSelectedBlockClientIds();
+
+			// Find if any tab is selected
+			let selectedTab = null;
+			for ( const tab of tabsList ) {
+				if (
+					selectedIds.includes( tab.clientId ) ||
+					hasSelectedInnerBlock( tab.clientId, true )
+				) {
+					selectedTab = tab.clientId;
+					break;
+				}
+			}
+
+			return {
+				tabsClientId: _tabsClientId,
+				tabsMenuClientId: _tabsMenuClientId,
+				selectedTabClientId: selectedTab,
+			};
+		},
+		[ clientId, tabsList ]
+	);
+
+	const isSelectedTab = tabClientId === selectedTabClientId;
+
+	// Update tab label in the tab block
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const handleLabelChange = useCallback(
+		( newLabel ) => {
+			if ( tabClientId ) {
+				updateBlockAttributes( tabClientId, {
+					label: newLabel,
+					anchor: slugFromLabel( newLabel, tabIndex ),
+				} );
+			}
+		},
+		[ updateBlockAttributes, tabClientId, tabIndex ]
+	);
+
+	// Update editor active tab index on parent tabs block when tab is clicked
+	const handleTabClick = useCallback(
+		( event ) => {
+			event.preventDefault();
+
+			// Update the parent tabs block's editorActiveTabIndex (ephemeral, not persisted)
+			if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
+				__unstableMarkNextChangeAsNotPersistent();
+				updateBlockAttributes( tabsClientId, {
+					editorActiveTabIndex: tabIndex,
+				} );
+			}
+
+			// Don't select block if we're editing this tab's label
+			if ( isEditing ) {
+			}
+		},
+		[
+			isEditing,
+			tabsClientId,
+			tabIndex,
+			effectiveActiveIndex,
+			updateBlockAttributes,
+			__unstableMarkNextChangeAsNotPersistent,
+		]
+	);
+
+	// Callback ref for label RichText
+	const labelRef = useCallback(
+		( node ) => {
+			labelElementRef.current = node;
+			if ( node && isEditing ) {
+				const animationId = requestAnimationFrame( () => {
+					if ( node ) {
+						node.focus();
+					}
+				} );
+				focusRef.current = animationId;
+			}
+		},
+		[ isEditing ]
+	);
+
+	// Cleanup animation frames
+	useEffect( () => {
+		return () => {
+			if ( focusRef.current ) {
+				cancelAnimationFrame( focusRef.current );
+			}
+		};
+	}, [] );
+
+	// Build CSS custom properties for active/hover color states
+	const customColorStyles = useMemo( () => {
+		const styles = {};
+
+		// Active/hover colors from custom attributes
+		const activeBg =
+			activeBackgroundColor?.color ||
+			attributes.customActiveBackgroundColor;
+		const activeText =
+			activeTextColor?.color || attributes.customActiveTextColor;
+		const hoverBg =
+			hoverBackgroundColor?.color ||
+			attributes.customHoverBackgroundColor;
+		const hoverText =
+			hoverTextColor?.color || attributes.customHoverTextColor;
+
+		if ( activeBg ) {
+			styles[ '--custom-tab-active-color' ] = activeBg;
+		}
+		if ( activeText ) {
+			styles[ '--custom-tab-active-text-color' ] = activeText;
+		}
+		if ( hoverBg ) {
+			styles[ '--custom-tab-hover-color' ] = hoverBg;
+		}
+		if ( hoverText ) {
+			styles[ '--custom-tab-hover-text-color' ] = hoverText;
+		}
+
+		return styles;
+	}, [
+		activeBackgroundColor?.color,
+		attributes.customActiveBackgroundColor,
+		activeTextColor?.color,
+		attributes.customActiveTextColor,
+		hoverBackgroundColor?.color,
+		attributes.customHoverBackgroundColor,
+		hoverTextColor?.color,
+		attributes.customHoverTextColor,
+	] );
+
+	const tabPanelId = tabId || `tab-${ tabIndex }`;
+	const tabLabelId = `${ tabPanelId }--tab`;
+
+	// Use blockProps for core style engine support
+	const blockProps = useBlockProps( {
+		className: clsx( layoutClassNames, {
+			'is-active': isActiveTab,
+			'is-selected': isSelectedTab,
+		} ),
+		style: customColorStyles,
+		'aria-controls': tabPanelId,
+		'aria-selected': isActiveTab,
+		id: tabLabelId,
+		role: 'tab',
+		tabIndex: isActiveTab ? 0 : -1,
+		onClick: handleTabClick,
+		onDoubleClick: () => {
+			setIsEditing( true );
+			setEditingLabel( tabLabel || '' );
+		},
+	} );
+
+	return (
+		<>
+			<Controls
+				{ ...{
+					attributes,
+					setAttributes,
+					clientId,
+					tabsClientId,
+					tabClientId,
+					tabIndex,
+					tabsCount: tabsList.length,
+					tabsMenuClientId,
+					activeBackgroundColor,
+					setActiveBackgroundColor,
+					activeTextColor,
+					setActiveTextColor,
+					hoverBackgroundColor,
+					setHoverBackgroundColor,
+					hoverTextColor,
+					setHoverTextColor,
+				} }
+			/>
+			<div { ...blockProps }>
+				{ isEditing ? (
+					<RichText
+						ref={ labelRef }
+						tagName="span"
+						withoutInteractiveFormatting
+						placeholder={ sprintf(
+							/* translators: %d is the tab index + 1 */
+							__( 'Tab %d…' ),
+							tabIndex + 1
+						) }
+						value={ decodeEntities( editingLabel ) }
+						onChange={ ( value ) => {
+							setEditingLabel( value );
+							handleLabelChange( value );
+						} }
+						onBlur={ () => {
+							setIsEditing( false );
+						} }
+					/>
+				) : (
+					<StaticLabel label={ tabLabel } index={ tabIndex } />
+				) }
+			</div>
+		</>
+	);
+}
+
+export default withColors(
+	'activeBackgroundColor',
+	'activeTextColor',
+	'hoverBackgroundColor',
+	'hoverTextColor'
+)( Edit );

package/src/tabs-menu-item/editor.scss

@@ -0,0 +1,20 @@
+.wp-block-tabs-menu-item {
+	&.is-selected {
+		outline: 2px solid var(--wp-admin-theme-color, #007cba);
+		outline-offset: 2px;
+	}
+}
+
+.block-editor-block-preview__live-content:has(.wp-block-tabs-menu-item) {
+	flex-basis: inherit !important;
+	flex-grow: inherit !important;
+
+	.wp-block-tabs-menu-item {
+		flex-basis: 100% !important;
+	}
+
+	&:hover > .wp-block-tabs-menu-item {
+		background-color: var(--custom-tab-hover-color, #eaeaea) !important;
+		color: var(--custom-tab-hover-text-color, #000) !important;
+	}
+}

package/src/tabs-menu-item/icon.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4 6h5v2H4V6zm0 4h5v2H4v-2zm0 4h5v2H4v-2zm10-8h6v2h-6V6zm0 4h6v2h-6v-2zm0 4h6v2h-6v-2z" />
+	</SVG>
+);

package/src/tabs-menu-item/index.js

@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import save from './save';
+import icon from './icon';
+
+import metadata from './block.json';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/tabs-menu-item/index.php

@@ -0,0 +1,82 @@
+<?php
+/**
+ * Tabs Menu Item Block
+ *
+ * @package WordPress
+ */
+
+/**
+ * Render callback for core/tabs-menu-item.
+ *
+ * Applies IAPI directives and tab-specific attributes to the saved content.
+ *
+ * @param array     $attributes Block attributes.
+ * @param string    $content    Block content.
+ * @param \WP_Block $block      WP_Block instance.
+ *
+ * @return string Updated HTML.
+ */
+function block_core_tabs_menu_item_render_callback( array $attributes, string $content, \WP_Block $block ): string {
+	// Get tab-specific context
+	$tab_index = $block->context['core/tabs-menu-item-index'] ?? 0;
+	$tab_id    = $block->context['core/tabs-menu-item-id'] ?? '';
+	$tab_label = $block->context['core/tabs-menu-item-label'] ?? '';
+
+	if ( empty( $tab_id ) ) {
+		$tab_id = 'tab-' . $tab_index;
+	}
+
+	// Process the content to add IAPI directives
+	$tag_processor = new WP_HTML_Tag_Processor( $content );
+
+	if ( $tag_processor->next_tag() ) {
+		// Remove hidden attribute and template class (from save.js)
+		$tag_processor->remove_attribute( 'hidden' );
+
+		// Set tab-specific attributes
+		$tag_processor->set_attribute( 'id', 'tab__' . $tab_id );
+		$tag_processor->set_attribute( 'href', '#' . $tab_id );
+		$tag_processor->set_attribute( 'role', 'tab' );
+		$tag_processor->set_attribute( 'aria-controls', $tab_id );
+
+		// Add IAPI directives
+		$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' );
+
+		// Add context for this specific tab item
+		$tag_processor->set_attribute(
+			'data-wp-context',
+			wp_json_encode( array( 'tabIndex' => $tab_index ) )
+		);
+	}
+
+	// Get updated HTML and inject the label
+	$output = $tag_processor->get_updated_html();
+
+	// The save.js outputs <a><span class="screen-reader-text">...</span></a>
+	// Replace the anchor content with the actual tab label
+	$output = preg_replace(
+		'/(<a[^>]*>).*?(<\/a>)/s',
+		'$1' . '<span>' . esc_html( html_entity_decode( $tab_label ) ) . '</span>' . '$2',
+		$output
+	);
+
+	return $output;
+}
+
+/**
+ * Registers the `core/tabs-menu-item` block on the server.
+ *
+ * @since 6.9.0
+ */
+function register_block_core_tabs_menu_item() {
+	register_block_type_from_metadata(
+		__DIR__ . '/tabs-menu-item',
+		array(
+			'render_callback' => 'block_core_tabs_menu_item_render_callback',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_tabs_menu_item' );