@wordpress/block-library 9.44.1-next.v.202604201441.0 → 9.45.0

package/src/navigation-link/link-ui/index.js

@@ -5,7 +5,6 @@ import { __unstableStripHTML as stripHTML, focus } from '@wordpress/dom';
 import {
 	Popover,
 	Button,
-	VisuallyHidden,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -20,6 +19,7 @@ import {
 import { useResourcePermissions } from '@wordpress/core-data';
 import { plus } from '@wordpress/icons';
 import { useInstanceId } from '@wordpress/compose';
+import { VisuallyHidden } from '@wordpress/ui';
 import { isURL } from '@wordpress/url';
 
 /**

package/src/post-author/edit.js

@@ -20,7 +20,7 @@ import {
 	ComboboxControl,
 	SelectControl,
 	ToggleControl,
-	__experimentalText as Text,
+	__experimentalText as WCText,
 	__experimentalVStack as VStack,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -341,11 +341,11 @@ function PostAuthorEdit( {
 						alignment="left"
 						spacing={ 4 }
 					>
-						<Text as="p">
+						<WCText as="p">
 							{ __(
 								'This block is no longer supported. Recreate its design with the Avatar, Author Name and Author Biography blocks.'
 							) }
-						</Text>
+						</WCText>
 						<Button
 							variant="primary"
 							onClick={ transformBlock }
@@ -356,7 +356,6 @@ function PostAuthorEdit( {
 					</VStack>
 				</InspectorControlsLastItem>
 			) }
-
 			<BlockControls group="block">
 				<AlignmentControl
 					value={ textAlign }
@@ -365,7 +364,6 @@ function PostAuthorEdit( {
 					} }
 				/>
 			</BlockControls>
-
 			<div { ...blockProps }>
 				{ showAvatar && (
 					<div className="wp-block-post-author__avatar">

package/src/post-comments-form/edit.js

@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import { VisuallyHidden } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
+import { VisuallyHidden } from '@wordpress/ui';
 
 /**
  * Internal dependencies

package/src/query/edit/inspector-controls/author-control.js

@@ -75,7 +75,7 @@ function AuthorControl( { value, onChange } ) {
 			value={ sanitizedValue }
 			suggestions={ authorsInfo.names }
 			onChange={ onAuthorChange }
-			__experimentalShowHowTo={ false }
+			help=""
 			__next40pxDefaultSize
 		/>
 	);

package/src/query/edit/inspector-controls/format-controls.js

@@ -81,7 +81,7 @@ export default function FormatControls( { onChange, query: { format } } ) {
 					format: formatNamesToValues( newValues, formats ),
 				} );
 			} }
-			__experimentalShowHowTo={ false }
+			help=""
 			__experimentalExpandOnFocus
 			__next40pxDefaultSize
 		/>

package/src/query/edit/inspector-controls/parent-control.js

@@ -138,7 +138,7 @@ function ParentControl( { parents, postType, onChange } ) {
 			onInputChange={ debouncedSearch }
 			suggestions={ suggestions }
 			onChange={ onParentChange }
-			__experimentalShowHowTo={ false }
+			help=""
 		/>
 	);
 }

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -242,7 +242,7 @@ function TaxonomyItem( {
 				suggestions={ suggestions }
 				displayTransform={ decodeEntities }
 				onChange={ onTermsChange }
-				__experimentalShowHowTo={ false }
+				help=""
 				__next40pxDefaultSize
 			/>
 		</div>

package/src/site-logo/edit.js

@@ -51,7 +51,9 @@ import { unlock } from '../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const { mediaEditKey } = unlock( blockEditorPrivateApis );
+const { mediaEditKey, openMediaEditorModalKey } = unlock(
+	blockEditorPrivateApis
+);
 
 const SiteLogo = ( {
 	alt,
@@ -78,22 +80,26 @@ const SiteLogo = ( {
 	const blockEditingMode = useBlockEditingMode();
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 
-	const { imageEditing, maxWidth, title, editMediaEntity } = useSelect(
-		( select ) => {
-			const settings = select( blockEditorStore ).getSettings();
-			const siteEntities = select( coreStore ).getEntityRecord(
-				'root',
-				'__unstableBase'
-			);
-			return {
-				title: siteEntities?.name,
-				imageEditing: settings.imageEditing,
-				maxWidth: settings.maxWidth,
-				editMediaEntity: settings?.[ mediaEditKey ],
-			};
-		},
-		[]
-	);
+	const {
+		imageEditing,
+		maxWidth,
+		title,
+		editMediaEntity,
+		openMediaEditorModal,
+	} = useSelect( ( select ) => {
+		const settings = select( blockEditorStore ).getSettings();
+		const siteEntities = select( coreStore ).getEntityRecord(
+			'root',
+			'__unstableBase'
+		);
+		return {
+			title: siteEntities?.name,
+			imageEditing: settings.imageEditing,
+			maxWidth: settings.maxWidth,
+			editMediaEntity: settings?.[ mediaEditKey ],
+			openMediaEditorModal: settings?.[ openMediaEditorModalKey ],
+		};
+	}, [] );
 
 	useEffect( () => {
 		// Turn the `Use as site icon` toggle off if it is on but the logo and icon have
@@ -110,6 +116,12 @@ const SiteLogo = ( {
 		}
 	}, [ isSelected ] );
 
+	const handleMediaUpdate = ( { id: newId } ) => {
+		if ( typeof newId === 'number' && newId !== logoId ) {
+			setLogo( newId );
+		}
+	};
+
 	function onResizeStart() {
 		toggleSelection( false );
 	}
@@ -388,7 +400,15 @@ const SiteLogo = ( {
 				shouldShowCropAndDimensions && (
 					<BlockControls group="block">
 						<ToolbarButton
-							onClick={ () => setIsEditingImage( true ) }
+							onClick={
+								openMediaEditorModal && logoId
+									? () =>
+											openMediaEditorModal( {
+												id: logoId,
+												onUpdate: handleMediaUpdate,
+											} )
+									: () => setIsEditingImage( true )
+							}
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>

package/src/style.scss

@@ -76,10 +76,10 @@
 @use "./tag-cloud/style.scss" as *;
 @use "./tab/style.scss" as *;
 @use "./tab-panel/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-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/block.json

@@ -4,25 +4,23 @@
 	"apiVersion": 3,
 	"name": "core/tab",
 	"title": "Tab",
-	"description": "Content for a tab in a tabbed interface.",
+	"description": "A single tab button in the tab list.",
 	"category": "design",
 	"textdomain": "default",
-	"attributes": {
-		"label": {
-			"type": "string",
-			"default": ""
-		}
-	},
-	"parent": [ "core/tab-panel" ],
+	"parent": [ "core/tab-list" ],
 	"usesContext": [
+		"core/tabs-list",
 		"core/tabs-activeTabIndex",
 		"core/tabs-editorActiveTabIndex",
-		"core/tabs-id"
+		"core/tab-index",
+		"core/tab-id",
+		"core/tab-label"
 	],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"reusable": false,
+		"visibility": false,
+		"lock": false,
 		"color": {
 			"background": true,
 			"text": true,
@@ -31,26 +29,28 @@
 				"text": true
 			}
 		},
-		"layout": true,
-		"spacing": {
-			"blockGap": true,
-			"padding": true,
-			"margin": false
-		},
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true,
+			"textAlign": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"__experimentalFontFamily": true
+				"fontSize": true
 			}
 		},
-		"renaming": true,
-		"visibility": false
-	},
-	"providesContext": {
-		"core/tab-label": "label"
+		"spacing": {
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		}
 	},
 	"editorScript": "file:./index.js",
+	"editorStyle": "file:./editor.css",
 	"style": "file:./style-index.css"
 }

package/src/tab/controls.js

@@ -1,65 +1,19 @@
 /**
  * WordPress dependencies
  */
-import {
-	InspectorControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import {
-	CheckboxControl,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { BlockControls } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import AddTabToolbarControl from './add-tab-toolbar-control';
-import RemoveTabToolbarControl from './remove-tab-toolbar-control';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-
-export default function Controls( { tabsClientId, blockIndex, isDefaultTab } ) {
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
+import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
 
+export default function Controls( { tabsClientId } ) {
 	return (
-		<>
+		<BlockControls>
 			<AddTabToolbarControl tabsClientId={ tabsClientId } />
 			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
-			<InspectorControls>
-				<ToolsPanel
-					label={ __( 'Settings' ) }
-					resetAll={ () => {
-						updateBlockAttributes( tabsClientId, {
-							activeTabIndex: 0,
-						} );
-					} }
-					dropdownMenuProps={ dropdownMenuProps }
-				>
-					<ToolsPanelItem
-						label={ __( 'Default tab' ) }
-						hasValue={ () => isDefaultTab && blockIndex !== 0 }
-						onDeselect={ () => {
-							updateBlockAttributes( tabsClientId, {
-								activeTabIndex: 0,
-							} );
-						} }
-						isShownByDefault
-					>
-						<CheckboxControl
-							label={ __( 'Default tab' ) }
-							checked={ isDefaultTab }
-							onChange={ ( value ) => {
-								updateBlockAttributes( tabsClientId, {
-									activeTabIndex: value ? blockIndex : 0,
-								} );
-							} }
-						/>
-					</ToolsPanelItem>
-				</ToolsPanel>
-			</InspectorControls>
-		</>
+		</BlockControls>
 	);
 }

package/src/tab/edit.js

@@ -1,145 +1,141 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
-	useInnerBlocksProps,
 	store as blockEditorStore,
+	RichText,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useMemo, useRef, useEffect } from '@wordpress/element';
+import { useMemo, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Controls from './controls';
 
-const TEMPLATE = [
-	[
-		'core/paragraph',
-		{
-			placeholder: __( 'Type / to choose a block' ),
-		},
-	],
-];
-
-const { cancelAnimationFrame } = window;
-
-export default function Edit( { clientId, context, isSelected } ) {
-	const focusRef = useRef();
+const EMPTY_ARRAY = [];
 
-	// Consume tab indices from context
+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 = editorActiveTabIndex ?? activeTabIndex;
 
-	// Clean up animation frames on unmount.
-	useEffect( () => {
-		return () => {
-			if ( focusRef.current ) {
-				cancelAnimationFrame( focusRef.current );
-			}
-		};
-	}, [] );
+	const effectiveActiveIndex = useMemo( () => {
+		return editorActiveTabIndex ?? activeTabIndex;
+	}, [ editorActiveTabIndex, activeTabIndex ] );
 
-	const { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(
+	const { tabIndex, tabsClientId, selectedTabClientId } = useSelect(
 		( select ) => {
 			const {
+				getBlockOrder,
 				getBlockRootClientId,
-				getBlockIndex,
+				getSelectedBlockClientIds,
 				hasSelectedInnerBlock,
 			} = select( blockEditorStore );
 
-			// Get the tab-panel parent first
-			const tabPanelClientId = getBlockRootClientId( clientId );
-			// Then get the tabs parent
-			const _tabsClientId = getBlockRootClientId( tabPanelClientId );
-
-			// Get data about this instance of core/tab.
-			const _blockIndex = getBlockIndex( clientId );
-			const _hasInnerBlocksSelected = hasSelectedInnerBlock(
-				clientId,
-				true
-			);
+			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 {
-				blockIndex: _blockIndex,
-				hasInnerBlocksSelected: _hasInnerBlocksSelected,
+				tabIndex: _tabIndex,
 				tabsClientId: _tabsClientId,
+				selectedTabClientId: _selectedTabClientId,
 			};
 		},
-		[ clientId ]
+		[ clientId, tabsList ]
 	);
 
-	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+	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 );
 
-	// 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 panel should be visible.
-	 * This is true if it is the editor active tab, or if it is selected directly.
-	 */
-	const isSelectedTab = useMemo( () => {
-		// Show if this tab is directly selected or has selected inner blocks
-		if ( isSelected || hasInnerBlocksSelected ) {
-			return true;
-		}
-		// 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, isActiveTab ] );
+	const handleTabClick = useCallback(
+		( event ) => {
+			event.preventDefault();
+			if ( tabsClientId && tabListIndex !== effectiveActiveIndex ) {
+				__unstableMarkNextChangeAsNotPersistent();
+				updateBlockAttributes( tabsClientId, {
+					editorActiveTabIndex: tabListIndex,
+				} );
+			}
+		},
+		[
+			tabsClientId,
+			tabListIndex,
+			effectiveActiveIndex,
+			updateBlockAttributes,
+			__unstableMarkNextChangeAsNotPersistent,
+		]
+	);
 
-	const blockProps = useBlockProps( {
-		hidden: ! isSelectedTab,
-		tabIndex: isSelectedTab ? 0 : -1,
-	} );
+	const handleLabelChange = useCallback(
+		( newLabel ) => {
+			if ( tabClientId ) {
+				updateBlockAttributes( tabClientId, { label: newLabel } );
+			}
+		},
+		[ tabClientId, updateBlockAttributes ]
+	);
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		template: TEMPLATE,
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			'is-active': isActive,
+			'is-selected': isSelected,
+		} ),
+		tabIndex: -1,
+		onClick: handleTabClick,
 	} );
 
 	return (
-		<section { ...innerBlocksProps }>
-			<Controls
-				tabsClientId={ tabsClientId }
-				blockIndex={ blockIndex }
-				isDefaultTab={ isDefaultTab }
-			/>
-			{ isSelectedTab && innerBlocksProps.children }
-		</section>
+		<>
+			<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 → tab}/editor.scss

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