@wordpress/block-library 9.44.0 → 9.45.0

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

@@ -1,150 +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,
-	__unstableLayoutClassNames: layoutClassNames,
-} ) {
-	const tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;
-	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;
-	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
-
-	const effectiveActiveIndex = useMemo( () => {
-		return editorActiveTabIndex ?? activeTabIndex;
-	}, [ editorActiveTabIndex, activeTabIndex ] );
-
-	const { menuItemIndex, tabsClientId, selectedTabClientId } = useSelect(
-		( select ) => {
-			const {
-				getBlockOrder,
-				getBlockRootClientId,
-				getSelectedBlockClientIds,
-				hasSelectedInnerBlock,
-			} = select( blockEditorStore );
-
-			const _tabsMenuClientId = getBlockRootClientId( clientId );
-			const _tabsClientId = _tabsMenuClientId
-				? getBlockRootClientId( _tabsMenuClientId )
-				: null;
-
-			const siblings = getBlockOrder( _tabsMenuClientId );
-			const _menuItemIndex = 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 {
-				menuItemIndex: _menuItemIndex,
-				tabsClientId: _tabsClientId,
-				selectedTabClientId: _selectedTabClientId,
-			};
-		},
-		[ clientId, tabsList ]
-	);
-
-	const tab = tabsList[ menuItemIndex ] || {};
-
-	// tabListIndex is the tab's position in tabsList, used for active-state
-	// checks and click handling.
-	const tabListIndex = tab.index ?? menuItemIndex;
-
-	const tabId = tab.id || `tab-${ menuItemIndex }`;
-	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( layoutClassNames, {
-			'is-active': isActive,
-			'is-selected': isSelected,
-		} ),
-		'aria-controls': tabId,
-		'aria-selected': isActive,
-		id: `${ tabId }--tab`,
-		role: 'tab',
-		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/tabs-menu-item/index.php

@@ -1,70 +0,0 @@
-<?php
-/**
- * Tabs Menu Item Block
- *
- * @package WordPress
- */
-
-/**
- * Render callback for core/tabs-menu-item.
- *
- * Injects the tab label and IAPI directives into the saved button HTML.
- * Per-item context (index, id, label) is provided by the parent tabs-menu
- * 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_tabs_menu_item_render_callback( array $attributes, string $content, \WP_Block $block ): string {
-	$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;
-	}
-
-	// 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/tabs-menu-item` block on the server.
- *
- * @since 7.0.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' );

package/src/tabs-menu-item/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/tabs-menu-item/style.scss

@@ -1,40 +0,0 @@
-.wp-block-tabs-menu-item {
-	box-sizing: border-box;
-	color: inherit;
-	display: block;
-	width: max-content;
-	text-decoration: none;
-	cursor: pointer;
-	flex-basis: inherit !important;
-	flex-grow: inherit !important;
-	position: relative;
-
-	// Button reset
-	border: none;
-	background: none;
-	appearance: none;
-	-webkit-appearance: none;
-
-	margin: 0;
-	padding: var(--wp--preset--spacing--20, 0.5em) var(--wp--preset--spacing--30, 1em);
-
-	// Inherit typography from parent
-	font-size: inherit;
-	font-family: inherit;
-	font-weight: inherit;
-	line-height: inherit;
-	letter-spacing: inherit;
-	text-transform: inherit;
-	text-align: inherit;
-
-	&[aria-selected="true"]::before,
-	&.is-active::before {
-		content: "";
-		position: absolute;
-		border-bottom: 2px solid currentColor;
-		pointer-events: none;
-		left: 0;
-		width: 100%;
-		bottom: 0;
-	}
-}