@wordpress/block-library 9.41.1-next.v.202603102151.0 → 9.42.0

package/src/nextpage/block.json

@@ -9,7 +9,6 @@
 	"parent": [ "core/post-content" ],
 	"textdomain": "default",
 	"supports": {
-		"anchor": true,
 		"customClassName": false,
 		"className": false,
 		"html": false,

package/src/post-date/block.json

@@ -11,9 +11,6 @@
 			"type": "string",
 			"role": "content"
 		},
-		"textAlign": {
-			"type": "string"
-		},
 		"format": {
 			"type": "string"
 		},
@@ -46,6 +43,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

package/src/post-date/deprecated.js

@@ -7,6 +7,84 @@ import clsx from 'clsx';
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
+import migrateTextAlign from '../utils/migrate-text-align';
+
+const v4 = {
+	attributes: {
+		datetime: {
+			type: 'string',
+			role: 'content',
+		},
+		textAlign: {
+			type: 'string',
+		},
+		format: {
+			type: 'string',
+		},
+		isLink: {
+			type: 'boolean',
+			default: false,
+			role: 'content',
+		},
+	},
+	supports: {
+		anchor: true,
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+		__experimentalBorder: {
+			radius: true,
+			color: true,
+			width: true,
+			style: true,
+			__experimentalDefaultControls: {
+				radius: true,
+				color: true,
+				width: true,
+				style: true,
+			},
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate: migrateTextAlign,
+	isEligible( attributes ) {
+		return (
+			!! attributes.textAlign ||
+			!! attributes.className?.match(
+				/\bhas-text-align-(left|center|right)\b/
+			)
+		);
+	},
+};
 
 const v3 = {
 	attributes: {
@@ -87,7 +165,7 @@ const v3 = {
 		...otherAttributes
 	} ) {
 		// Change the block bindings source argument name from "key" to "field".
-		return {
+		return migrateTextAlign( {
 			metadata: {
 				bindings: {
 					datetime: {
@@ -99,7 +177,7 @@ const v3 = {
 				...otherMetadata,
 			},
 			...otherAttributes,
-		};
+		} );
 	},
 	isEligible( attributes ) {
 		return (
@@ -184,7 +262,7 @@ const v2 = {
 				);
 			}
 
-			return {
+			return migrateTextAlign( {
 				...otherAttributes,
 				className,
 				metadata: {
@@ -196,7 +274,7 @@ const v2 = {
 						},
 					},
 				},
-			};
+			} );
 		}
 	},
 	isEligible( attributes ) {
@@ -240,7 +318,9 @@ const v1 = {
 	save() {
 		return null;
 	},
-	migrate: migrateFontFamily,
+	migrate( attributes ) {
+		return migrateTextAlign( migrateFontFamily( attributes ) );
+	},
 	isEligible( { style } ) {
 		return style?.typography?.fontFamily;
 	},
@@ -254,4 +334,4 @@ const v1 = {
  *
  * See block-deprecation.md
  */
-export default [ v3, v2, v1 ];
+export default [ v4, v3, v2, v1 ];

package/src/post-date/edit.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -14,7 +9,6 @@ import {
 	getSettings as getDateSettings,
 } from '@wordpress/date';
 import {
-	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	store as blockEditorStore,
@@ -41,19 +35,18 @@ import { store as blocksStore } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
 
-export default function PostDateEdit( {
-	attributes,
-	context: { postType: postTypeSlug, queryId },
-	setAttributes,
-	name,
-} ) {
-	const { datetime, textAlign, format, isLink } = attributes;
-	const blockProps = useBlockProps( {
-		className: clsx( {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+export default function PostDateEdit( props ) {
+	const {
+		attributes,
+		context: { postType: postTypeSlug, queryId },
+		setAttributes,
+		name,
+	} = props;
+	useDeprecatedTextAlign( props );
+	const { datetime, format, isLink } = attributes;
+	const blockProps = useBlockProps();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	// Use internal state instead of a ref to make sure that the component
@@ -126,71 +119,61 @@ export default function PostDateEdit( {
 	}
 	return (
 		<>
-			{ ( blockEditingMode === 'default' ||
-				! isDescendentOfQueryLoop ) && (
-				<BlockControls group="block">
-					<AlignmentControl
-						value={ textAlign }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { textAlign: nextAlign } );
-						} }
-					/>
-
-					{ activeBlockVariationName !== 'post-date-modified' &&
-						( ! isDescendentOfQueryLoop ||
-							! activeBlockVariationName ) && (
-							<ToolbarGroup>
-								<Dropdown
-									popoverProps={ popoverProps }
-									renderContent={ ( { onClose } ) => (
-										<PublishDateTimePicker
-											title={
-												activeBlockVariationName ===
-												'post-date'
-													? __( 'Publish Date' )
-													: __( 'Date' )
-											}
-											currentDate={ datetime }
-											onChange={ ( newDatetime ) =>
-												setAttributes( {
-													datetime: newDatetime,
-												} )
-											}
-											is12Hour={ is12HourFormat(
-												siteTimeFormat
-											) }
-											onClose={ onClose }
-											dateOrder={
-												/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
-												_x( 'dmy', 'date order' )
-											}
+			{ ( blockEditingMode === 'default' || ! isDescendentOfQueryLoop ) &&
+				activeBlockVariationName !== 'post-date-modified' &&
+				( ! isDescendentOfQueryLoop || ! activeBlockVariationName ) && (
+					<BlockControls group="block">
+						<ToolbarGroup>
+							<Dropdown
+								popoverProps={ popoverProps }
+								renderContent={ ( { onClose } ) => (
+									<PublishDateTimePicker
+										title={
+											activeBlockVariationName ===
+											'post-date'
+												? __( 'Publish Date' )
+												: __( 'Date' )
+										}
+										currentDate={ datetime }
+										onChange={ ( newDatetime ) =>
+											setAttributes( {
+												datetime: newDatetime,
+											} )
+										}
+										is12Hour={ is12HourFormat(
+											siteTimeFormat
+										) }
+										onClose={ onClose }
+										dateOrder={
+											/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
+											_x( 'dmy', 'date order' )
+										}
+									/>
+								) }
+								renderToggle={ ( { isOpen, onToggle } ) => {
+									const openOnArrowDown = ( event ) => {
+										if (
+											! isOpen &&
+											event.keyCode === DOWN
+										) {
+											event.preventDefault();
+											onToggle();
+										}
+									};
+									return (
+										<ToolbarButton
+											aria-expanded={ isOpen }
+											icon={ pencil }
+											title={ __( 'Change Date' ) }
+											onClick={ onToggle }
+											onKeyDown={ openOnArrowDown }
 										/>
-									) }
-									renderToggle={ ( { isOpen, onToggle } ) => {
-										const openOnArrowDown = ( event ) => {
-											if (
-												! isOpen &&
-												event.keyCode === DOWN
-											) {
-												event.preventDefault();
-												onToggle();
-											}
-										};
-										return (
-											<ToolbarButton
-												aria-expanded={ isOpen }
-												icon={ pencil }
-												title={ __( 'Change Date' ) }
-												onClick={ onToggle }
-												onKeyDown={ openOnArrowDown }
-											/>
-										);
-									} }
-								/>
-							</ToolbarGroup>
-						) }
-				</BlockControls>
-			) }
+									);
+								} }
+							/>
+						</ToolbarGroup>
+					</BlockControls>
+				) }
 
 			<InspectorControls>
 				<ToolsPanel

package/src/site-logo/edit.js

@@ -620,7 +620,6 @@ export default function LogoEdit( {
 					>
 						<MediaControlPreview
 							url={ mediaItemData?.source_url }
-							alt={ mediaItemData?.alt_text }
 							filename={
 								mediaItemData?.media_details?.sizes?.full
 									?.file || mediaItemData?.slug
@@ -642,7 +641,6 @@ export default function LogoEdit( {
 						<MediaControl
 							mediaId={ siteLogoId }
 							mediaUrl={ logoUrl }
-							alt={ mediaItemData?.alt_text }
 							filename={
 								mediaItemData?.media_details?.sizes?.full
 									?.file || mediaItemData?.slug
@@ -652,7 +650,7 @@ export default function LogoEdit( {
 							onError={ onUploadError }
 							onReset={ onRemoveLogo }
 							isUploading={ !! temporaryURL }
-							emptyLabel={ __( 'Choose logo' ) }
+							emptyLabel={ __( 'Logo' ) }
 						/>
 					</ToolsPanelItem>
 				) }

package/src/site-title/index.js

@@ -20,7 +20,11 @@ export const settings = {
 	example: {
 		viewportWidth: 350,
 		attributes: {
-			textAlign: 'center',
+			style: {
+				typography: {
+					textAlign: 'center',
+				},
+			},
 		},
 	},
 	edit,

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

@@ -12,7 +12,8 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * "Add tab" button in the block toolbar for the tab block.
- * Inserts new tabs into the tab-panel block.
+ * Inserts a new core/tab into the tab-panel and a new core/tabs-menu-item
+ * into the tabs-menu, keeping both in sync.
  *
  * @param {Object} props
  * @param {string} props.tabsClientId The client ID of the parent tabs block.
@@ -21,39 +22,63 @@ import { useDispatch, useSelect } from '@wordpress/data';
 export default function AddTabToolbarControl( { tabsClientId } ) {
 	const { insertBlock } = useDispatch( blockEditorStore );
 
-	// Find the tab-panel block within the tabs block
-	const { tabPanelClientId, nextTabIndex } = useSelect(
-		( select ) => {
-			if ( ! tabsClientId ) {
+	const { tabPanelClientId, tabsMenuClientId, tabCount, existingAnchors } =
+		useSelect(
+			( select ) => {
+				if ( ! tabsClientId ) {
+					return {
+						tabPanelClientId: null,
+						tabsMenuClientId: null,
+						existingAnchors: [],
+					};
+				}
+				const { getBlocks } = select( blockEditorStore );
+				const innerBlocks = getBlocks( tabsClientId );
+				const tabPanel = innerBlocks.find(
+					( block ) => block.name === 'core/tab-panel'
+				);
+				const tabsMenu = innerBlocks.find(
+					( block ) => block.name === 'core/tabs-menu'
+				);
 				return {
-					tabPanelClientId: null,
-					nextTabIndex: 0,
+					tabPanelClientId: tabPanel?.clientId || null,
+					tabsMenuClientId: tabsMenu?.clientId || null,
+					tabCount: tabPanel?.innerBlocks?.length || 0,
+					existingAnchors: ( tabPanel?.innerBlocks || [] )
+						.map( ( block ) => block.attributes.anchor )
+						.filter( Boolean ),
 				};
-			}
-			const { getBlocks } = select( blockEditorStore );
-			const innerBlocks = getBlocks( tabsClientId );
-			const tabPanel = innerBlocks.find(
-				( block ) => block.name === 'core/tab-panel'
-			);
-			return {
-				tabPanelClientId: tabPanel?.clientId || null,
-				nextTabIndex: ( tabPanel?.innerBlocks.length || 0 ) + 1,
-			};
-		},
-		[ tabsClientId ]
-	);
+			},
+			[ tabsClientId ]
+		);
 
 	const addTab = () => {
 		if ( ! tabPanelClientId ) {
 			return;
 		}
+
+		// Start from count + 1 so the label stays sequential, then increment
+		// until the anchor slot is free.
+		const existingAnchorSet = new Set( existingAnchors );
+		let tabNumber = tabCount + 1;
+		while ( existingAnchorSet.has( `tab-${ tabNumber }` ) ) {
+			tabNumber++;
+		}
+
 		const newTabBlock = createBlock( 'core/tab', {
-			anchor: 'tab-' + nextTabIndex,
+			anchor: `tab-${ tabNumber }`,
 			/* translators: %d: tab number */
-			label: sprintf( __( 'Tab %d' ), nextTabIndex ),
+			label: sprintf( __( 'Tab %d' ), tabNumber ),
 		} );
 		insertBlock( newTabBlock, undefined, tabPanelClientId );
-		// @TODO: Possible select and focus the tabs-menu-item active tab RichText editor?
+
+		// Insert a corresponding menu item into the tabs-menu.
+		if ( tabsMenuClientId ) {
+			const newMenuItemBlock = createBlock( 'core/tabs-menu-item', {
+				anchor: `tab-${ tabNumber }-button`,
+			} );
+			insertBlock( newMenuItemBlock, undefined, tabsMenuClientId );
+		}
 	};
 
 	return (

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

@@ -11,7 +11,8 @@ import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * "Remove Tab" button in the block toolbar for the tab block.
- * Removes the currently active tab from the tab-panel block.
+ * Removes the currently active core/tab and its corresponding
+ * core/tabs-menu-item, keeping both in sync.
  *
  * @param {Object} props
  * @param {string} props.tabsClientId The client ID of the parent tabs block.
@@ -25,12 +26,17 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = useDispatch( blockEditorStore );
 
-	// Find the tab-panel block, active tab, and tab count within the tabs block
-	const { activeTabClientId, tabCount, editorActiveTabIndex } = useSelect(
+	const {
+		activeTabClientId,
+		activeMenuItemClientId,
+		tabCount,
+		editorActiveTabIndex,
+	} = useSelect(
 		( select ) => {
 			if ( ! tabsClientId ) {
 				return {
 					activeTabClientId: null,
+					activeMenuItemClientId: null,
 					tabCount: 0,
 					editorActiveTabIndex: 0,
 				};
@@ -46,10 +52,24 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 			const tabPanel = innerBlocks.find(
 				( block ) => block.name === 'core/tab-panel'
 			);
+			const tabsMenu = innerBlocks.find(
+				( block ) => block.name === 'core/tabs-menu'
+			);
 			const tabs = tabPanel?.innerBlocks || [];
+			const menuItems = tabsMenu?.innerBlocks || [];
 			const activeTab = tabs[ activeIndex ];
+			// Match menu item by anchor (e.g. "tab-1" → "tab-1-button").
+			const expectedMenuAnchor = activeTab?.attributes?.anchor
+				? `${ activeTab.attributes.anchor }-button`
+				: null;
+			const activeMenuItem = expectedMenuAnchor
+				? menuItems.find(
+						( m ) => m.attributes?.anchor === expectedMenuAnchor
+				  )
+				: menuItems[ activeIndex ];
 			return {
 				activeTabClientId: activeTab?.clientId || null,
+				activeMenuItemClientId: activeMenuItem?.clientId || null,
 				tabCount: tabs.length,
 				editorActiveTabIndex: activeIndex,
 			};
@@ -62,28 +82,28 @@ export default function RemoveTabToolbarControl( { tabsClientId } ) {
 			return;
 		}
 
-		// Calculate new active index after removal
+		// Calculate new active index after removal.
 		const newActiveIndex =
 			editorActiveTabIndex >= tabCount - 1
-				? tabCount - 2 // If removing last tab, select the previous one
-				: editorActiveTabIndex; // Otherwise keep the same index (next tab shifts into position)
+				? tabCount - 2
+				: editorActiveTabIndex;
 
-		// Update the active tab index before removing
 		__unstableMarkNextChangeAsNotPersistent();
 		updateBlockAttributes( tabsClientId, {
 			editorActiveTabIndex: newActiveIndex,
 		} );
 
-		// Remove the tab
+		// Remove the tab content block and the corresponding menu item.
 		removeBlock( activeTabClientId, false );
+		if ( activeMenuItemClientId ) {
+			removeBlock( activeMenuItemClientId, false );
+		}
 
-		// Select the tabs block after removal
 		if ( tabsClientId ) {
 			selectBlock( tabsClientId );
 		}
 	};
 
-	// Don't show the button if there's only one tab or no active tab
 	const isDisabled = tabCount <= 1 || ! activeTabClientId;
 
 	return (