@wordpress/block-library 9.48.1 → 10.0.1-next.v.202606191442.0

package/src/tab/edit.js

@@ -1,141 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	useBlockProps,
-	store as blockEditorStore,
-	RichText,
-} from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Controls from './controls';
-
-const EMPTY_ARRAY = [];
-
-function Edit( { context, clientId } ) {
-	const tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;
-	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ];
-	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
-
-	const effectiveActiveIndex = useMemo( () => {
-		return editorActiveTabIndex ?? activeTabIndex;
-	}, [ editorActiveTabIndex, activeTabIndex ] );
-
-	const { tabIndex, tabsClientId, selectedTabClientId } = useSelect(
-		( select ) => {
-			const {
-				getBlockOrder,
-				getBlockRootClientId,
-				getSelectedBlockClientIds,
-				hasSelectedInnerBlock,
-			} = select( blockEditorStore );
-
-			const _tabsListClientId = getBlockRootClientId( clientId );
-			const _tabsClientId = _tabsListClientId
-				? getBlockRootClientId( _tabsListClientId )
-				: null;
-
-			const siblings = getBlockOrder( _tabsListClientId );
-			const _tabIndex = siblings.indexOf( clientId );
-
-			// Find which tab panel block is currently selected.
-			const selectedIds = getSelectedBlockClientIds();
-			let _selectedTabClientId = null;
-			for ( const tab of tabsList ) {
-				if (
-					selectedIds.includes( tab.clientId ) ||
-					hasSelectedInnerBlock( tab.clientId, true )
-				) {
-					_selectedTabClientId = tab.clientId;
-					break;
-				}
-			}
-
-			return {
-				tabIndex: _tabIndex,
-				tabsClientId: _tabsClientId,
-				selectedTabClientId: _selectedTabClientId,
-			};
-		},
-		[ clientId, tabsList ]
-	);
-
-	const tab = tabsList[ tabIndex ] || {};
-
-	// tabListIndex is the tab's position in tabsList, used for active-state
-	// checks and click handling.
-	const tabListIndex = tab.index ?? tabIndex;
-
-	const tabClientId = tab.clientId || '';
-	const label = tab.label || '';
-
-	const isActive = tabListIndex === effectiveActiveIndex;
-	const isSelected = tabClientId === selectedTabClientId;
-
-	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
-		useDispatch( blockEditorStore );
-
-	const handleTabClick = useCallback(
-		( event ) => {
-			event.preventDefault();
-			if ( tabsClientId && tabListIndex !== effectiveActiveIndex ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				updateBlockAttributes( tabsClientId, {
-					editorActiveTabIndex: tabListIndex,
-				} );
-			}
-		},
-		[
-			tabsClientId,
-			tabListIndex,
-			effectiveActiveIndex,
-			updateBlockAttributes,
-			__unstableMarkNextChangeAsNotPersistent,
-		]
-	);
-
-	const handleLabelChange = useCallback(
-		( newLabel ) => {
-			if ( tabClientId ) {
-				updateBlockAttributes( tabClientId, { label: newLabel } );
-			}
-		},
-		[ tabClientId, updateBlockAttributes ]
-	);
-
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			'is-active': isActive,
-			'is-selected': isSelected,
-		} ),
-		tabIndex: -1,
-		onClick: handleTabClick,
-	} );
-
-	return (
-		<>
-			<Controls tabsClientId={ tabsClientId } />
-			<button { ...blockProps } type="button">
-				<RichText
-					tagName="span"
-					withoutInteractiveFormatting
-					placeholder={ __( 'Tab title' ) }
-					value={ label }
-					onChange={ handleLabelChange }
-				/>
-			</button>
-		</>
-	);
-}
-
-export default Edit;

package/src/tab/editor.scss

@@ -1,14 +0,0 @@
-.wp-block-tab {
-	&.is-selected {
-		outline-offset: 2px;
-	}
-}
-
-.block-editor-block-preview__live-content:has(.wp-block-tab) {
-	flex-basis: inherit !important;
-	flex-grow: inherit !important;
-
-	.wp-block-tab {
-		flex-basis: 100% !important;
-	}
-}

package/src/tab/index.js

@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { tab as icon } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import initBlock from '../utils/init-block';
-import edit from './edit';
-import save from './save';
-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/tab/index.php

@@ -1,70 +0,0 @@
-<?php
-/**
- * Tab Block
- *
- * @package WordPress
- */
-
-/**
- * Render callback for core/tab.
- *
- * Injects the tab label and IAPI directives into the saved button HTML.
- * Per-item context (index, id, label) is provided by the parent tab-list
- * render callback before this is called.
- *
- * @since 7.0.0
- *
- * @param array     $attributes Block attributes.
- * @param string    $content    Block content (styled button from save.js).
- * @param \WP_Block $block      WP_Block instance.
- *
- * @return string Updated HTML.
- */
-function block_core_tab_render_callback( array $attributes, string $content, \WP_Block $block ): string {
-	$tab_index = $block->context['core/tab-index'] ?? 0;
-	$tab_id    = $block->context['core/tab-id'] ?? '';
-	$tab_label = $block->context['core/tab-label'] ?? '';
-
-	if ( empty( $tab_id ) ) {
-		$tab_id = 'tab-' . $tab_index;
-	}
-
-	// Add Interactivity API directives and tab-specific attributes to the button.
-	$tag_processor = new WP_HTML_Tag_Processor( $content );
-
-	if ( $tag_processor->next_tag() ) {
-		$tag_processor->set_attribute( 'id', 'tab__' . $tab_id );
-		$tag_processor->set_attribute( 'aria-controls', $tab_id );
-		$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' );
-		$tag_processor->set_attribute(
-			'data-wp-context',
-			wp_json_encode( array( 'tabIndex' => $tab_index ) )
-		);
-	}
-
-	// Inject the tab label into the button.
-	return preg_replace(
-		'/(<button\b[^>]*>).*?(<\/button>)/s',
-		'$1<span>' . wp_kses_post( $tab_label ) . '</span>$2',
-		$tag_processor->get_updated_html(),
-		1
-	);
-}
-
-/**
- * Registers the `core/tab` block on the server.
- *
- * @since 7.0.0
- */
-function register_block_core_tab() {
-	register_block_type_from_metadata(
-		__DIR__ . '/tab',
-		array(
-			'render_callback' => 'block_core_tab_render_callback',
-		)
-	);
-}
-add_action( 'init', 'register_block_core_tab' );

package/src/tab/save.js

@@ -1,13 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useBlockProps } from '@wordpress/block-editor';
-
-export default function save() {
-	const blockProps = useBlockProps.save( {
-		type: 'button',
-		role: 'tab',
-	} );
-
-	return <button { ...blockProps } />;
-}

package/src/tab-panels/style.scss

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

package/src/tabs/use-tab-list-sync.js

@@ -1,237 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createBlock } from '@wordpress/blocks';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Keep tabs and tab panels in sync when the lists change due to direct
- * user actions (deletion, paste, duplicate, drag-and-drop).
- *
- * Deletion: when one side shrinks, remove the counterpart at the same index.
- * Insertion: when one side grows without the other, insert the missing
- * counterpart at the matching index.
- *
- * When both lists change simultaneously (e.g. the "Add Tab" toolbar button,
- * which inserts both at once), no action is needed and the effect exits early.
- *
- * @param {Object}      props
- * @param {Array}       props.tabs              Raw core/tab block objects.
- * @param {Array}       props.tabPanels         Raw core/tab-panel block objects.
- * @param {string|null} props.tabPanelsClientId Client ID of the core/tab-panels block.
- * @param {string|null} props.tabsListClientId  Client ID of the core/tab-list block.
- */
-export default function useTabListSync( {
-	tabPanels,
-	tabs,
-	tabPanelsClientId,
-	tabsListClientId,
-} ) {
-	const {
-		removeBlock,
-		insertBlocks,
-		replaceInnerBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-	} = useDispatch( blockEditorStore );
-
-	const prevSyncStateRef = useRef( null );
-	useEffect( () => {
-		if ( prevSyncStateRef.current === null ) {
-			prevSyncStateRef.current = {
-				tabPanels: [ ...tabPanels ],
-				tabs: [ ...tabs ],
-			};
-			return;
-		}
-
-		const { tabPanels: prevTabPanels, tabs: prevTabs } =
-			prevSyncStateRef.current;
-
-		const tabPanelCountChange = tabPanels.length - prevTabPanels.length;
-		const tabCountChange = tabs.length - prevTabs.length;
-
-		const tabPanelsInserted = tabPanelCountChange > 0;
-		const tabsInserted = tabCountChange > 0;
-
-		// Both sides changed by the same amount.
-		// Covers: no-op re-renders, "Add Tab" toolbar, and toolbar-remove.
-		// Also handles drag-and-drop reordering of tabs.
-		if ( tabPanelCountChange === tabCountChange ) {
-			// When lengths are equal but order changed, the user reordered tabs
-			// via drag-and-drop. Reorder the tab panel blocks to match.
-			if (
-				tabPanelCountChange === 0 &&
-				tabPanelsClientId &&
-				tabs.some( ( m, i ) => m.clientId !== prevTabs[ i ]?.clientId )
-			) {
-				const reorderedTabPanels = tabs
-					.map( ( tab ) => {
-						const oldIndex = prevTabs.findIndex(
-							( pm ) => pm.clientId === tab.clientId
-						);
-						return oldIndex !== -1 ? tabPanels[ oldIndex ] : null;
-					} )
-					.filter( Boolean );
-				if ( reorderedTabPanels.length === tabPanels.length ) {
-					__unstableMarkNextChangeAsNotPersistent();
-					replaceInnerBlocks(
-						tabPanelsClientId,
-						reorderedTabPanels,
-						false
-					);
-				}
-			}
-			prevSyncStateRef.current = {
-				tabPanels: [ ...tabPanels ],
-				tabs: [ ...tabs ],
-			};
-			return;
-		}
-
-		// Both sides changed in the same direction but by different amounts.
-		// Bail without making a partial fix.
-		if (
-			( tabPanelCountChange > 0 && tabCountChange > 0 ) ||
-			( tabPanelCountChange < 0 && tabCountChange < 0 )
-		) {
-			prevSyncStateRef.current = {
-				tabPanels: [ ...tabPanels ],
-				tabs: [ ...tabs ],
-			};
-			return;
-		}
-
-		// If the required container block isn't available yet, bail without
-		// updating the snapshot so the next render re-evaluates the same count change.
-		if ( tabPanelsInserted && ! tabsListClientId ) {
-			return;
-		}
-		if ( tabsInserted && ! tabPanelsClientId ) {
-			return;
-		}
-
-		// Update snapshot to the current state.
-		prevSyncStateRef.current = {
-			tabPanels: [ ...tabPanels ],
-			tabs: [ ...tabs ],
-		};
-
-		const currentTabPanelIds = new Set(
-			tabPanels.map( ( t ) => t.clientId )
-		);
-		const currentTabIds = new Set( tabs.map( ( m ) => m.clientId ) );
-
-		if ( tabPanelCountChange < 0 ) {
-			// Remove the tab at the same position as each deleted tab panel.
-			const removedIndices = prevTabPanels
-				.map( ( t, i ) =>
-					! currentTabPanelIds.has( t.clientId ) ? i : -1
-				)
-				.filter( ( i ) => i !== -1 );
-			const removedSet = new Set( removedIndices );
-			removedIndices.forEach( ( removedIndex ) => {
-				if ( tabs[ removedIndex ] ) {
-					__unstableMarkNextChangeAsNotPersistent();
-					removeBlock( tabs[ removedIndex ].clientId, false );
-				}
-			} );
-			prevSyncStateRef.current.tabs =
-				prevSyncStateRef.current.tabs.filter(
-					( _, i ) => ! removedSet.has( i )
-				);
-		} else if ( tabCountChange < 0 ) {
-			// Remove the tab panel at the same position as each deleted tab.
-			const removedIndices = prevTabs
-				.map( ( m, i ) =>
-					! currentTabIds.has( m.clientId ) ? i : -1
-				)
-				.filter( ( i ) => i !== -1 );
-			const removedSet = new Set( removedIndices );
-			removedIndices.forEach( ( removedIndex ) => {
-				if ( tabPanels[ removedIndex ] ) {
-					__unstableMarkNextChangeAsNotPersistent();
-					removeBlock( tabPanels[ removedIndex ].clientId, false );
-				}
-			} );
-			prevSyncStateRef.current.tabPanels =
-				prevSyncStateRef.current.tabPanels.filter(
-					( _, i ) => ! removedSet.has( i )
-				);
-		} else if ( tabPanelsInserted ) {
-			// A tab panel was pasted or duplicated — insert a matching tab.
-			const prevTabPanelIds = new Set(
-				prevTabPanels.map( ( t ) => t.clientId )
-			);
-			const newTabs = tabPanels
-				.map( ( tabPanel, tabPanelIndex ) =>
-					! prevTabPanelIds.has( tabPanel.clientId )
-						? {
-								tabPanelIndex,
-								block: createBlock( 'core/tab', {} ),
-						  }
-						: null
-				)
-				.filter( Boolean );
-
-			if ( newTabs.length > 0 ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				insertBlocks(
-					newTabs.map( ( { block } ) => block ),
-					newTabs[ 0 ].tabPanelIndex,
-					tabsListClientId,
-					false
-				);
-				newTabs.forEach( ( { tabPanelIndex, block } ) => {
-					prevSyncStateRef.current.tabs.splice( tabPanelIndex, 0, {
-						clientId: block.clientId,
-					} );
-				} );
-			}
-		} else if ( tabsInserted ) {
-			// A tab was pasted or duplicated — insert a matching tab panels,
-			// copying the label from the adjacent tab panel.
-			const prevTabIds = new Set( prevTabs.map( ( m ) => m.clientId ) );
-			const newTabPanels = tabs
-				.map( ( tab, tabIndex ) => {
-					if ( prevTabIds.has( tab.clientId ) ) {
-						return null;
-					}
-					const label =
-						tabPanels[ tabIndex - 1 ]?.attributes?.label ??
-						tabPanels[ tabIndex ]?.attributes?.label ??
-						'';
-					return {
-						tabIndex,
-						block: createBlock( 'core/tab-panel', { label } ),
-					};
-				} )
-				.filter( Boolean );
-
-			if ( newTabPanels.length > 0 ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				insertBlocks(
-					newTabPanels.map( ( { block } ) => block ),
-					newTabPanels[ 0 ].tabIndex,
-					tabPanelsClientId,
-					false
-				);
-				newTabPanels.forEach( ( { tabIndex, block } ) => {
-					prevSyncStateRef.current.tabPanels.splice( tabIndex, 0, {
-						clientId: block.clientId,
-					} );
-				} );
-			}
-		}
-	}, [
-		tabPanels,
-		tabs,
-		removeBlock,
-		insertBlocks,
-		replaceInnerBlocks,
-		__unstableMarkNextChangeAsNotPersistent,
-		tabsListClientId,
-		tabPanelsClientId,
-	] );
-}