@wordpress/block-library 9.38.0 → 9.39.0

package/src/tabs-menu/edit.js

@@ -0,0 +1,251 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	BlockContextProvider,
+	__experimentalUseBlockPreview as useBlockPreview,
+	store as blockEditorStore,
+	useBlockEditContext,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	memo,
+	useMemo,
+	useState,
+	useEffect,
+	useCallback,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import AddTabToolbarControl from '../tab/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';
+
+const TABS_MENU_ITEM_TEMPLATE = [ [ 'core/tabs-menu-item', {} ] ];
+
+/**
+ * Preview component for non-active tab menu items.
+ * Uses useBlockPreview to cache the rendering.
+ *
+ * @param {Object}   props                         Component props.
+ * @param {Array}    props.blocks                  The blocks to preview.
+ * @param {string}   props.blockContextId          The context ID for this block.
+ * @param {boolean}  props.isHidden                Whether the preview is hidden.
+ * @param {Function} props.setActiveBlockContextId Callback to set the active context ID.
+ */
+function TabsMenuItemPreview( {
+	blocks,
+	blockContextId,
+	isHidden,
+	setActiveBlockContextId,
+} ) {
+	const blockPreviewProps = useBlockPreview( { blocks } );
+
+	const handleOnClick = () => {
+		setActiveBlockContextId( blockContextId );
+	};
+
+	const style = {
+		display: isHidden ? 'none' : 'flex',
+	};
+
+	return (
+		<div
+			{ ...blockPreviewProps }
+			tabIndex={ 0 }
+			role="button"
+			onClick={ handleOnClick }
+			onKeyDown={ handleOnClick }
+			style={ style }
+		/>
+	);
+}
+
+const MemoizedTabsMenuItemPreview = memo( TabsMenuItemPreview );
+
+/**
+ * The actual editable inner blocks for the active tab item.
+ *
+ * @param {Object} props              Component props.
+ * @param {Object} props.wrapperProps Props to pass to the wrapper element.
+ * @param {Object} props.layout       The layout object to pass to inner blocks.
+ */
+function TabsMenuItemTemplateBlocks( { wrapperProps = {}, layout } ) {
+	const innerBlocksProps = useInnerBlocksProps( wrapperProps, {
+		template: TABS_MENU_ITEM_TEMPLATE,
+		templateLock: 'all',
+		renderAppender: false,
+		layout,
+	} );
+	return innerBlocksProps.children;
+}
+
+function Edit( {
+	context,
+	clientId,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
+	// Get the layout from block edit context to pass to inner blocks.
+	// This ensures the correct orientation is used from the start.
+	const { layout } = useBlockEditContext();
+
+	const tabsId = context[ 'core/tabs-id' ] || null;
+	const tabsList = context[ 'core/tabs-list' ] || [];
+	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 { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	// Track which tab context is "active" for editing (shows real inner blocks)
+	const [ activeBlockContextId, setActiveBlockContextId ] = useState( null );
+
+	// Get the inner blocks (the single tabs-menu-item template)
+	const { blocks, tabsClientId } = useSelect(
+		( select ) => {
+			const { getBlocks, getBlockRootClientId } =
+				select( blockEditorStore );
+			return {
+				blocks: getBlocks( clientId ),
+				tabsClientId: getBlockRootClientId( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	// Build block contexts for each tab
+	const blockContexts = useMemo( () => {
+		return tabsList.map( ( tab, index ) => ( {
+			'core/tabs-menu-item-index': index,
+			'core/tabs-menu-item-id': tab.id || `tab-${ index }`,
+			'core/tabs-menu-item-label': tab.label || '',
+			'core/tabs-menu-item-clientId': tab.clientId,
+			// Pass through parent context
+			'core/tabs-id': tabsId,
+			'core/tabs-list': tabsList,
+			'core/tabs-activeTabIndex': activeTabIndex,
+			'core/tabs-editorActiveTabIndex': editorActiveTabIndex,
+		} ) );
+	}, [ tabsList, tabsId, activeTabIndex, editorActiveTabIndex ] );
+
+	// Generate a unique ID for each block context
+	const getContextId = useCallback( ( blockContext ) => {
+		return `tab-context-${ blockContext[ 'core/tabs-menu-item-index' ] }`;
+	}, [] );
+
+	// Set the first tab as active by default
+	useEffect( () => {
+		if ( blockContexts.length > 0 && activeBlockContextId === null ) {
+			setActiveBlockContextId( getContextId( blockContexts[ 0 ] ) );
+		}
+	}, [ blockContexts, activeBlockContextId, getContextId ] );
+
+	// Update active context when editorActiveTabIndex changes
+	useEffect( () => {
+		if (
+			blockContexts.length > 0 &&
+			effectiveActiveIndex < blockContexts.length
+		) {
+			const newContextId = getContextId(
+				blockContexts[ effectiveActiveIndex ]
+			);
+			setActiveBlockContextId( ( prevId ) =>
+				prevId !== newContextId ? newContextId : prevId
+			);
+		}
+	}, [ effectiveActiveIndex, blockContexts, getContextId ] );
+
+	// Handle tab click to update parent tabs block's editorActiveTabIndex
+	const handleTabContextClick = useCallback(
+		( index ) => {
+			if ( tabsClientId && index !== effectiveActiveIndex ) {
+				__unstableMarkNextChangeAsNotPersistent();
+				updateBlockAttributes( tabsClientId, {
+					editorActiveTabIndex: index,
+				} );
+			}
+		},
+		[
+			tabsClientId,
+			effectiveActiveIndex,
+			updateBlockAttributes,
+			__unstableMarkNextChangeAsNotPersistent,
+		]
+	);
+
+	const blockProps = useBlockProps( {
+		className: clsx( layoutClassNames ),
+		role: 'tablist',
+	} );
+
+	// If no tabs exist yet, show placeholder
+	if ( tabsList.length === 0 ) {
+		return (
+			<>
+				<AddTabToolbarControl tabsClientId={ tabsClientId } />
+				<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+				<div { ...blockProps }>
+					<span className="tabs__tab-label tabs__tab-label--placeholder">
+						{ __( 'Add tabs to display menu' ) }
+					</span>
+				</div>
+			</>
+		);
+	}
+
+	return (
+		<>
+			<AddTabToolbarControl tabsClientId={ tabsClientId } />
+			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+			<div { ...blockProps }>
+				{ blockContexts.map( ( blockContext, index ) => {
+					const contextId = getContextId( blockContext );
+					const isVisible = contextId === activeBlockContextId;
+
+					return (
+						<BlockContextProvider
+							key={ contextId }
+							value={ blockContext }
+						>
+							{ isVisible ? (
+								<TabsMenuItemTemplateBlocks
+									wrapperProps={ {
+										onClick: () =>
+											handleTabContextClick( index ),
+									} }
+									layout={ layout }
+								/>
+							) : null }
+							<MemoizedTabsMenuItemPreview
+								blocks={ blocks }
+								blockContextId={ contextId }
+								setActiveBlockContextId={ ( id ) => {
+									setActiveBlockContextId( id );
+									handleTabContextClick( index );
+								} }
+								isHidden={ isVisible }
+							/>
+						</BlockContextProvider>
+					);
+				} ) }
+			</div>
+		</>
+	);
+}
+
+export default Edit;

package/src/tabs-menu/editor.scss

@@ -0,0 +1,6 @@
+.wp-block-tabs-menu {
+	.tabs__tab-label--placeholder {
+		opacity: 0.5;
+		font-style: italic;
+	}
+}

package/src/tabs-menu/icon.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M4 5.5H20V7H4V5.5ZM4 11.5H12V13H4V11.5ZM20 11.5H14V13H20V11.5ZM4 17.5H20V19H4V17.5Z" />
+	</SVG>
+);

package/src/tabs-menu/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/index.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * Tabs Menu Block
+ *
+ * @package WordPress
+ */
+
+/**
+ * Render callback for core/tabs-menu.
+ *
+ * @param array     $attributes Block attributes.
+ * @param string    $content    Block content (contains the tabs-menu-item template).
+ * @param \WP_Block $block      WP_Block instance.
+ *
+ * @return string Updated HTML.
+ */
+function block_core_tabs_menu_render_callback( array $attributes, string $content, \WP_Block $block ): string {
+	$tabs_list = $block->context['core/tabs-list'] ?? array();
+
+	if ( empty( $tabs_list ) ) {
+		return '';
+	}
+
+	// Get the first inner block as template (tabs-menu-item)
+	$inner_blocks = $block->parsed_block['innerBlocks'] ?? array();
+	if ( empty( $inner_blocks ) ) {
+		return '';
+	}
+	$template_block = $inner_blocks[0];
+
+	// Build rendered tab items
+	$tabs_markup = '';
+	foreach ( $tabs_list as $index => $tab ) {
+		// Create context for this specific tab
+		$tab_context = array_merge(
+			$block->context,
+			array(
+				'core/tabs-menu-item-index' => $index,
+				'core/tabs-menu-item-id'    => $tab['id'] ?? '',
+				'core/tabs-menu-item-label' => $tab['label'] ?? '',
+			)
+		);
+
+		// Create new WP_Block instance with template and context
+		$tab_block = new WP_Block( $template_block, $tab_context );
+
+		// Render the block
+		$tabs_markup .= $tab_block->render();
+	}
+
+	// Find the template block and replace it in $content with $tabs_markup
+	$content = preg_replace(
+		'/<a\b[^>]*\bwp-block-tabs-menu-item__template\b[^>]*>.*?<\/a>/si',
+		$tabs_markup,
+		$content
+	);
+
+	return $content;
+}
+
+/**
+ * Registers the `core/tabs-menu` block on the server.
+ *
+ * @since 6.9.0
+ */
+function register_block_core_tabs_menu() {
+	register_block_type_from_metadata(
+		__DIR__ . '/tabs-menu',
+		array(
+			'render_callback' => 'block_core_tabs_menu_render_callback',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_tabs_menu' );

package/src/tabs-menu/save.js

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

package/src/tabs-menu/style.scss

@@ -0,0 +1,8 @@
+.wp-block-tabs-menu {
+	display: flex;
+	align-items: flex-end;
+	min-width: fit-content;
+	border-bottom-width: 1px; // A default border divider between the tabs-menu and the tab-panels
+	border-bottom-style: solid;
+	border-bottom-color: #000;
+}

package/src/tabs-menu-item/block.json

@@ -0,0 +1,98 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"__experimental": true,
+	"apiVersion": 3,
+	"name": "core/tabs-menu-item",
+	"title": "Tab Menu Item",
+	"description": "A single tab button in the tabs menu. Used as a template for styling all tab buttons.",
+	"version": "1.0.0",
+	"category": "design",
+	"textdomain": "default",
+	"parent": [
+		"core/tabs-menu"
+	],
+	"usesContext": [
+		"core/tabs-menu-item-index",
+		"core/tabs-menu-item-id",
+		"core/tabs-menu-item-label",
+		"core/tabs-menu-item-clientId",
+		"core/tabs-list",
+		"core/tabs-activeTabIndex",
+		"core/tabs-editorActiveTabIndex"
+	],
+	"attributes": {
+		"activeBackgroundColor": {
+			"type": "string"
+		},
+		"customActiveBackgroundColor": {
+			"type": "string"
+		},
+		"activeTextColor": {
+			"type": "string"
+		},
+		"customActiveTextColor": {
+			"type": "string"
+		},
+		"hoverBackgroundColor": {
+			"type": "string"
+		},
+		"customHoverBackgroundColor": {
+			"type": "string"
+		},
+		"hoverTextColor": {
+			"type": "string"
+		},
+		"customHoverTextColor": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"reusable": false,
+		"lock": false,
+		"color": {
+			"background": true,
+			"text": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"shadow": true,
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true,
+			"textAlign": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"layout": {
+			"default": {
+				"type": "flex",
+				"orientation": "vertical",
+				"flexWrap": "nowrap"
+			},
+			"allowVerticalAlignment": true,
+			"allowJustification": true,
+			"allowSwitching": false,
+			"allowOrientation": false,
+			"allowWrap": false
+		},
+		"spacing": {
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		}
+	},
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./editor.css",
+	"style": "file:./style-index.css"
+}