@wordpress/block-library 9.48.1 → 10.0.0

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-list/editor.scss

@@ -1,10 +0,0 @@
-.wp-block-tab-list {
-	// Allow the inner block list to be displayed in the flex layout, so the tab buttons appear as direct flex children in the editor.
-	> .block-editor-block-list__layout {
-		display: contents;
-	}
-
-	.block-editor-block-list__block:has(> .wp-block-tab) {
-		display: contents;
-	}
-}

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,
-	] );
-}