@wordpress/block-library 9.38.1-next.v.0 → 9.39.0

package/src/navigation-submenu/index.js

@@ -33,10 +33,13 @@ export const settings = {
 
 		const customName = attributes?.metadata?.name;
 
-		// In the list view, use the block's menu label as the label.
+		// In the list view and breadcrumb, use the block's menu label as the label.
 		// If the menu label is empty, fall back to the default label.
-		if ( context === 'list-view' && ( customName || label ) ) {
-			return attributes?.metadata?.name || label;
+		if (
+			( context === 'list-view' || context === 'breadcrumb' ) &&
+			customName
+		) {
+			return customName;
 		}
 
 		return label;

package/src/paragraph/index.js

@@ -34,7 +34,10 @@ export const settings = {
 	__experimentalLabel( attributes, { context } ) {
 		const customName = attributes?.metadata?.name;
 
-		if ( context === 'list-view' && customName ) {
+		if (
+			( context === 'list-view' || context === 'breadcrumb' ) &&
+			customName
+		) {
 			return customName;
 		}
 

package/src/post-excerpt/edit.js

@@ -169,7 +169,7 @@ export default function PostExcerptEditor( {
 	let trimmedExcerpt = '';
 	if ( wordCountType === 'words' ) {
 		trimmedExcerpt = rawOrRenderedExcerpt
-			.split( ' ', excerptLength )
+			.split( /\s+/, excerptLength )
 			.join( ' ' );
 	} else if ( wordCountType === 'characters_excluding_spaces' ) {
 		/*

package/src/post-excerpt/index.php

@@ -39,13 +39,23 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	add_filter( 'excerpt_more', $filter_excerpt_more );
 
 	/*
-	* The purpose of the excerpt length setting is to limit the length of both
-	* automatically generated and user-created excerpts.
-	* Because the excerpt_length filter only applies to auto generated excerpts,
-	* wp_trim_words is used instead.
-	*/
+	 * The purpose of the excerpt length setting is to limit the length of both
+	 * automatically generated and user-created excerpts.
+	 * Because the excerpt_length filter only applies to auto generated excerpts,
+	 * wp_trim_words is used instead.
+	 *
+	 * To ensure the block's excerptLength setting works correctly for auto-generated
+	 * excerpts, we temporarily override excerpt_length to 101 (the max block setting)
+	 * so that wp_trim_excerpt doesn't pre-trim the content before wp_trim_words can
+	 * apply the user's desired length.
+	 */
 	$excerpt_length = $attributes['excerptLength'];
-	$excerpt        = get_the_excerpt( $block->context['postId'] );
+	add_filter( 'excerpt_length', 'block_core_post_excerpt_excerpt_length', PHP_INT_MAX );
+
+	$excerpt = get_the_excerpt( $block->context['postId'] );
+
+	remove_filter( 'excerpt_length', 'block_core_post_excerpt_excerpt_length', PHP_INT_MAX );
+
 	if ( isset( $excerpt_length ) ) {
 		$excerpt = wp_trim_words( $excerpt, $excerpt_length );
 	}
@@ -86,18 +96,31 @@ function register_block_core_post_excerpt() {
 add_action( 'init', 'register_block_core_post_excerpt' );
 
 /**
+ * Callback for the excerpt_length filter to override the excerpt length.
+ *
  * If themes or plugins filter the excerpt_length, we need to
  * override the filter in the editor, otherwise
  * the excerpt length block setting has no effect.
- * Returns 100 because 100 is the max length in the setting.
+ * Returns 101 (one more than the max block setting of 100) to ensure
+ * wp_trim_words can detect when trimming is needed and add the ellipsis.
+ *
+ * For REST API requests, the filter is added on 'rest_api_init'
+ * because REST_REQUEST is not defined until 'parse_request'.
+ *
+ * @since 7.0.0
+ *
+ * @return int The excerpt length.
  */
-if ( is_admin() ||
-	defined( 'REST_REQUEST' ) && REST_REQUEST ) {
-	add_filter(
-		'excerpt_length',
-		static function () {
-			return 100;
-		},
-		PHP_INT_MAX
-	);
+function block_core_post_excerpt_excerpt_length() {
+	return 101;
 }
+
+if ( is_admin() ) {
+	add_filter( 'excerpt_length', 'block_core_post_excerpt_excerpt_length', PHP_INT_MAX );
+}
+add_action(
+	'rest_api_init',
+	static function () {
+		add_filter( 'excerpt_length', 'block_core_post_excerpt_excerpt_length', PHP_INT_MAX );
+	}
+);

package/src/style.scss

@@ -72,9 +72,12 @@
 @use "./spacer/style.scss" as *;
 @use "./tag-cloud/style.scss" as *;
 @use "./tab/style.scss" as *;
+@use "./tab-panels/style.scss" as *;
 @use "./table/style.scss" as *;
 @use "./table-of-contents/style.scss" as *;
 @use "./tabs/style.scss" as *;
+@use "./tabs-menu/style.scss" as *;
+@use "./tabs-menu-item/style.scss" as *;
 @use "./term-count/style.scss" as *;
 @use "./term-description/style.scss" as *;
 @use "./term-name/style.scss" as *;

package/src/tab/add-tab-toolbar-control.js

@@ -1,42 +1,67 @@
 /**
  * WordPress dependencies
  */
+import { sprintf, __ } from '@wordpress/i18n';
 import { createBlock } from '@wordpress/blocks';
 import {
 	BlockControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * "Add Tab" button in the block toolbar for the tab block.
+ * Inserts new tabs into the tab-panels block.
+ *
  * @param {Object} props
- * @param {Object} props.attributes   The block attributes.
  * @param {string} props.tabsClientId The client ID of the parent tabs block.
  * @return {JSX.Element} The toolbar control element.
  */
-export default function AddTabToolbarControl( { attributes, tabsClientId } ) {
+export default function AddTabToolbarControl( { tabsClientId } ) {
 	const { insertBlock } = useDispatch( blockEditorStore );
 
-	const { className, fontFamily, fontSize } = attributes;
+	// Find the tab-panels block within the tabs block
+	const { tabPanelsClientId, nextTabIndex } = useSelect(
+		( select ) => {
+			if ( ! tabsClientId ) {
+				return {
+					tabPanelsClientId: null,
+					nextTabIndex: 0,
+				};
+			}
+			const { getBlocks } = select( blockEditorStore );
+			const innerBlocks = getBlocks( tabsClientId );
+			const tabPanels = innerBlocks.find(
+				( block ) => block.name === 'core/tab-panels'
+			);
+			return {
+				tabPanelsClientId: tabPanels?.clientId || null,
+				nextTabIndex: ( tabPanels?.innerBlocks.length || 0 ) + 1,
+			};
+		},
+		[ tabsClientId ]
+	);
 
 	const addTab = () => {
+		if ( ! tabPanelsClientId ) {
+			return;
+		}
 		const newTabBlock = createBlock( 'core/tab', {
-			className,
-			fontFamily,
-			fontSize,
+			anchor: 'tab-' + nextTabIndex,
+			/* translators: %d: tab number */
+			label: sprintf( __( 'Tab %d' ), nextTabIndex ),
 		} );
-		insertBlock( newTabBlock, undefined, tabsClientId );
+		insertBlock( newTabBlock, undefined, tabPanelsClientId );
+		// @TODO: Possible select and focus the tabs-menu-item active tab RichText editor?
 	};
 
 	return (
-		<BlockControls group="block">
+		<BlockControls group="other">
 			<ToolbarGroup>
 				<ToolbarButton
 					className="components-toolbar__control"
-					label={ __( 'Add Tab' ) }
+					label={ __( 'Add a new tab' ) }
 					onClick={ addTab }
 					showTooltip
 					text={ __( 'Add Tab' ) }

package/src/tab/block.json

@@ -14,11 +14,25 @@
 			"default": ""
 		}
 	},
-	"parent": [ "core/tabs" ],
+	"parent": [
+		"core/tab-panels"
+	],
+	"usesContext": [
+		"core/tabs-activeTabIndex",
+		"core/tabs-editorActiveTabIndex"
+	],
 	"supports": {
 		"anchor": true,
 		"html": false,
 		"reusable": false,
+		"color": {
+			"background": true,
+			"text": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
 		"layout": {
 			"allowSwitching": true,
 			"allowInheriting": false,
@@ -38,9 +52,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true,
 				"__experimentalFontFamily": true
-			},
-			"__experimentalSkipSerialization": true
-		}
+			}
+		},
+		"renaming": true
 	},
 	"providesContext": {
 		"core/tab-label": "label"

package/src/tab/controls.js

@@ -14,6 +14,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  * Internal dependencies
  */
 import AddTabToolbarControl from './add-tab-toolbar-control';
+import RemoveTabToolbarControl from './remove-tab-toolbar-control';
 import slugFromLabel from './slug-from-label';
 
 export default function Controls( {
@@ -29,12 +30,10 @@ export default function Controls( {
 
 	return (
 		<>
-			<AddTabToolbarControl
-				tabsClientId={ tabsClientId }
-				attributes={ attributes }
-			/>
+			<AddTabToolbarControl tabsClientId={ tabsClientId } />
+			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
 			<InspectorControls>
-				<PanelBody title={ __( 'Tab Settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						label={ __( 'Tab Label' ) }
 						value={ decodeEntities( label ) }

package/src/tab/edit.js

@@ -10,82 +10,44 @@ import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
-	getTypographyClassesAndStyles as useTypographyProps,
-	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	useMemo,
-	useRef,
-	useEffect,
-	useCallback,
-	useState,
-} from '@wordpress/element';
+import { useMemo, useRef, useEffect } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import Controls from './controls';
 import slugFromLabel from './slug-from-label';
-import TabsList from './tabs-list';
 
 const TEMPLATE = [
 	[
 		'core/paragraph',
 		{
-			placeholder: __( 'Type / to add a block to tab' ),
+			placeholder: __( 'Type / to choose a block' ),
 		},
 	],
 ];
 
-const { requestAnimationFrame, cancelAnimationFrame } = window;
+const { cancelAnimationFrame } = window;
 
 export default function Edit( {
 	attributes,
 	clientId,
+	context,
 	isSelected,
 	setAttributes,
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
-	const { selectBlock } = useDispatch( blockEditorStore );
-
-	const innerBlocksRef = useRef( null );
 	const focusRef = useRef();
-	const [ isInitialMount, setIsInitialMount ] = useState( true );
-	const labelElementRef = useRef( null );
 
 	const { anchor, label } = attributes;
 
-	// Callback ref that stores the element and focuses on initial mount.
-	const labelRef = useCallback(
-		( node ) => {
-			labelElementRef.current = node;
-			if ( node && isInitialMount ) {
-				// Focus immediately when ref is set on initial mount.
-				const animationId = requestAnimationFrame( () => {
-					if ( node ) {
-						node.focus();
-					}
-				} );
-				focusRef.current = animationId;
-				setIsInitialMount( false );
-			}
-		},
-		[ isInitialMount ]
-	);
-
-	// Focus the label RichText component when no label exists (after initial mount).
-	useEffect( () => {
-		if ( ! label && ! isInitialMount && labelElementRef.current ) {
-			const animationId = requestAnimationFrame( () => {
-				if ( labelElementRef.current ) {
-					labelElementRef.current.focus();
-				}
-			} );
-			focusRef.current = animationId;
-			return () => cancelAnimationFrame( focusRef.current );
-		}
-	}, [ label, isInitialMount ] );
+	// Consume tab indices from context
+	const activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;
+	const editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];
+	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
 
 	// Clean up animation frames on unmount.
 	useEffect( () => {
@@ -96,84 +58,85 @@ export default function Edit( {
 		};
 	}, [] );
 
-	const {
-		blockIndex,
-		hasInnerBlocksSelected,
-		tabsHasSelectedBlock,
-		tabsClientId,
-		tabsAttributes,
-		forceDisplay,
-		isTabsClientSelected,
-		isDefaultTab,
-		siblingTabs,
-	} = useSelect(
+	const { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(
 		( select ) => {
 			const {
 				getBlockRootClientId,
 				getBlockIndex,
-				isBlockSelected,
 				hasSelectedInnerBlock,
-				getBlockAttributes,
-				getBlocks,
 			} = select( blockEditorStore );
 
-			// Get data from core/tabs.
-			const rootClientId = getBlockRootClientId( clientId );
-			const hasTabSelected = hasSelectedInnerBlock( rootClientId, true );
-			const rootAttributes = getBlockAttributes( rootClientId );
-			const { activeTabIndex } = rootAttributes;
-			const _isTabsClientSelected = isBlockSelected( rootClientId );
+			// Get the tab-panels parent first
+			const tabPanelsClientId = getBlockRootClientId( clientId );
+			// Then get the tabs parent
+			const _tabsClientId = getBlockRootClientId( tabPanelsClientId );
 
 			// Get data about this instance of core/tab.
 			const _blockIndex = getBlockIndex( clientId );
-			const _isDefaultTab = activeTabIndex === _blockIndex;
 			const _hasInnerBlocksSelected = hasSelectedInnerBlock(
 				clientId,
 				true
 			);
 
-			// Get all sibling tabs from parent.
-			const _siblingTabs = getBlocks( rootClientId );
-
 			return {
 				blockIndex: _blockIndex,
 				hasInnerBlocksSelected: _hasInnerBlocksSelected,
-				tabsClientId: rootClientId,
-				forceDisplay: _isDefaultTab && _isTabsClientSelected,
-				tabsHasSelectedBlock: hasTabSelected,
-				isTabsClientSelected: _isTabsClientSelected,
-				isDefaultTab: _isDefaultTab,
-				tabsAttributes: rootAttributes,
-				siblingTabs: _siblingTabs,
+				tabsClientId: _tabsClientId,
 			};
 		},
 		[ clientId ]
 	);
 
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	// Sync editorActiveTabIndex when this tab is selected directly
+	useEffect( () => {
+		// Only update if this tab is selected and not already the active index
+		const isTabSelected = isSelected || hasInnerBlocksSelected;
+		if (
+			isTabSelected &&
+			tabsClientId &&
+			effectiveActiveIndex !== blockIndex
+		) {
+			// Mark as non-persistent so it doesn't add to undo history
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( tabsClientId, {
+				editorActiveTabIndex: blockIndex,
+			} );
+		}
+	}, [
+		isSelected,
+		hasInnerBlocksSelected,
+		tabsClientId,
+		effectiveActiveIndex,
+		blockIndex,
+		updateBlockAttributes,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+
+	// Determine if this is the currently active tab (for editor visibility)
+	const isActiveTab = effectiveActiveIndex === blockIndex;
+
+	// Determine if this is the default tab (for the "Default Tab" toggle in controls)
+	const isDefaultTab = activeTabIndex === blockIndex;
+
 	/**
-	 * This hook determines if the current tab is selected. This is true if it is the active tab, or if it is selected directly.
+	 * This hook determines if the current tab panel should be visible.
+	 * This is true if it is the editor active tab, or if it is selected directly.
 	 */
 	const isSelectedTab = useMemo( () => {
-		if ( isSelected || hasInnerBlocksSelected || forceDisplay ) {
+		// Show if this tab is directly selected or has selected inner blocks
+		if ( isSelected || hasInnerBlocksSelected ) {
 			return true;
 		}
-		if (
-			isDefaultTab &&
-			! isTabsClientSelected &&
-			! isSelected &&
-			! tabsHasSelectedBlock
-		) {
+		// Always show the active tab (at effectiveActiveIndex) regardless of other selection state.
+		// This ensures the tab panel remains visible when editing labels in tabs-menu.
+		if ( isActiveTab ) {
 			return true;
 		}
 		return false;
-	}, [
-		isSelected,
-		hasInnerBlocksSelected,
-		forceDisplay,
-		isDefaultTab,
-		isTabsClientSelected,
-		tabsHasSelectedBlock,
-	] );
+	}, [ isSelected, hasInnerBlocksSelected, isActiveTab ] );
 
 	// Use a custom anchor, if set. Otherwise fall back to the slug generated from the label text.
 	const tabPanelId = useMemo(
@@ -182,67 +145,29 @@ export default function Edit( {
 	);
 	const tabLabelId = useMemo( () => `${ tabPanelId }--tab`, [ tabPanelId ] );
 
-	const tabItemColorProps = useColorProps( tabsAttributes );
-	const tabContentTypographyProps = useTypographyProps( attributes );
-
 	const blockProps = useBlockProps( {
 		hidden: ! isSelectedTab,
+		'aria-labelledby': tabLabelId,
+		id: tabPanelId,
+		role: 'tabpanel',
+		tabIndex: isSelectedTab ? 0 : -1,
+		className: clsx( 'wp-block-tab__editor-content', layoutClassNames ),
 	} );
 
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			'aria-labelledby': tabLabelId,
-			id: tabPanelId,
-			role: 'tabpanel',
-			ref: innerBlocksRef,
-			tabIndex: isSelectedTab ? 0 : -1,
-			className: clsx(
-				tabContentTypographyProps.className,
-				'tabs__tab-editor-content',
-				layoutClassNames
-			),
-			style: {
-				...tabContentTypographyProps.style,
-			},
-		},
-		{
-			template: TEMPLATE,
-		}
-	);
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
 
 	return (
-		<>
-			<div { ...blockProps }>
-				<Controls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					tabsClientId={ tabsClientId }
-					blockIndex={ blockIndex }
-					isDefaultTab={ isDefaultTab }
-				/>
-				{ isSelectedTab && (
-					<>
-						<TabsList
-							siblingTabs={ siblingTabs }
-							currentClientId={ clientId }
-							currentBlockIndex={ blockIndex }
-							currentLabel={ label }
-							tabItemColorProps={ tabItemColorProps }
-							onSelectTab={ selectBlock }
-							onLabelChange={ ( value ) =>
-								setAttributes( {
-									label: value,
-									anchor: slugFromLabel( value, blockIndex ),
-								} )
-							}
-							labelRef={ labelRef }
-							focusRef={ focusRef }
-							labelElementRef={ labelElementRef }
-						/>
-						<section { ...innerBlocksProps } />
-					</>
-				) }
-			</div>
-		</>
+		<section { ...innerBlocksProps }>
+			<Controls
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				tabsClientId={ tabsClientId }
+				blockIndex={ blockIndex }
+				isDefaultTab={ isDefaultTab }
+			/>
+			{ isSelectedTab && innerBlocksProps.children }
+		</section>
 	);
 }

package/src/tab/index.php

@@ -5,55 +5,6 @@
  * @package WordPress
  */
 
-/**
- * Build typography classnames from named size/family.
- *
- * @param array $attributes Block attributes.
- * @return string Classnames.
- */
-function block_core_tab_get_typography_classes( array $attributes ): string {
-	$typography_classes    = array();
-	$has_named_font_family = ! empty( $attributes['fontFamily'] );
-	$has_named_font_size   = ! empty( $attributes['fontSize'] );
-
-	if ( $has_named_font_size ) {
-		$typography_classes[] = sprintf( 'has-%s-font-size', esc_attr( (string) $attributes['fontSize'] ) );
-	}
-
-	if ( $has_named_font_family ) {
-		$typography_classes[] = sprintf( 'has-%s-font-family', esc_attr( (string) $attributes['fontFamily'] ) );
-	}
-
-	return implode( ' ', $typography_classes );
-}
-
-/**
- * Build inline typography styles.
- *
- * @param array $attributes Block attributes.
- * @return string Inline CSS.
- */
-function block_core_tab_get_typography_styles( array $attributes ): string {
-	$typography_styles = array();
-
-	if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) {
-		$typography_styles[] = sprintf(
-			'font-size: %s;',
-			wp_get_typography_font_size_value(
-				array(
-					'size' => $attributes['style']['typography']['fontSize'],
-				)
-			)
-		);
-	}
-
-	if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) {
-		$typography_styles[] = sprintf( 'font-family: %s;', $attributes['style']['typography']['fontFamily'] );
-	}
-
-	return implode( '', $typography_styles );
-}
-
 /**
  * Render callback for core/tab.
  *
@@ -66,6 +17,11 @@ function block_core_tab_render( array $attributes, string $content ): string {
 	$tag_processor = new WP_HTML_Tag_Processor( $content );
 	$tag_processor->next_tag( array( 'class_name' => 'wp-block-tab' ) );
 	$tab_id = (string) $tag_processor->get_attribute( 'id' );
+	// If no id, generate a unique one
+	if ( empty( $tab_id ) ) {
+		$tab_id = sanitize_title( $attributes['label'] );
+		$tag_processor->set_attribute( 'id', $tab_id );
+	}
 
 	/**
 	 * Add interactivity to the tab element.
@@ -85,13 +41,6 @@ function block_core_tab_render( array $attributes, string $content ): string {
 		)
 	);
 
-	/**
-	 * Process style classnames.
-	 */
-	$classname  = (string) $tag_processor->get_attribute( 'class' );
-	$classname .= ' ' . block_core_tab_get_typography_classes( $attributes );
-	$tag_processor->set_attribute( 'class', $classname );
-
 	/**
 	 * Process accessibility and interactivity attributes.
 	 */
@@ -100,13 +49,6 @@ function block_core_tab_render( array $attributes, string $content ): string {
 	$tag_processor->set_attribute( 'data-wp-bind--hidden', '!state.isActiveTab' );
 	$tag_processor->set_attribute( 'data-wp-bind--tabindex', 'state.tabIndexAttribute' );
 
-	/**
-	 * Process style attribute.
-	 */
-	$style  = (string) $tag_processor->get_attribute( 'style' );
-	$style .= block_core_tab_get_typography_styles( $attributes );
-	$tag_processor->set_attribute( 'style', $style );
-
 	return (string) $tag_processor->get_updated_html();
 }