@wordpress/block-library 10.1.0 → 10.1.1-next.v.202607070741.0

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

@@ -33,7 +33,6 @@ function OrderControl( {
 } ) {
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
 			options={ orderByOptions }

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

@@ -132,7 +132,6 @@ function ParentControl( { parents, postType, onChange } ) {
 	};
 	return (
 		<FormTokenField
-			__next40pxDefaultSize
 			label={ __( 'Parents' ) }
 			value={ value }
 			onInputChange={ debouncedSearch }

package/src/query/edit/inspector-controls/per-page-control.js

@@ -10,7 +10,6 @@ const MAX_POSTS_PER_PAGE = 100;
 const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
 	return (
 		<RangeControl
-			__next40pxDefaultSize
 			label={ __( 'Items per page' ) }
 			min={ MIN_POSTS_PER_PAGE }
 			max={ MAX_POSTS_PER_PAGE }

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

@@ -14,7 +14,6 @@ const stickyOptions = [
 export default function StickyControl( { value, onChange } ) {
 	return (
 		<SelectControl
-			__next40pxDefaultSize
 			label={ __( 'Sticky posts' ) }
 			options={ stickyOptions }
 			value={ value }

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

@@ -243,7 +243,6 @@ function TaxonomyItem( {
 				displayTransform={ decodeEntities }
 				onChange={ onTermsChange }
 				help=""
-				__next40pxDefaultSize
 			/>
 		</div>
 	);

package/src/query-pagination/query-pagination-arrow-controls.js

@@ -10,7 +10,6 @@ import {
 export function QueryPaginationArrowControls( { value, onChange } ) {
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Arrow' ) }
 			value={ value }
 			onChange={ onChange }

package/src/query-pagination-numbers/edit.js

@@ -72,7 +72,6 @@ export default function QueryPaginationNumbersEdit( {
 						isShownByDefault
 					>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ __( 'Number of links' ) }
 							help={ __(
 								'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'

package/src/quote/transforms.js

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { RichText } from '@wordpress/block-editor';
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import {
+	createBlock,
+	__experimentalCloneSanitizedBlock,
+	switchToBlockType,
+} from '@wordpress/blocks';
 
 const transforms = {
 	from: [
@@ -93,11 +97,7 @@ const transforms = {
 					'core/quote',
 					{},
 					blocks.map( ( block ) =>
-						createBlock(
-							block.name,
-							block.attributes,
-							block.innerBlocks
-						)
+						__experimentalCloneSanitizedBlock( block )
 					)
 				),
 		},

package/src/rss/edit.js

@@ -168,7 +168,6 @@ export default function RSSEdit( { attributes, setAttributes, name } ) {
 						isShownByDefault
 					>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ __( 'Number of items' ) }
 							value={ itemsToShow }
 							onChange={ ( value ) =>
@@ -235,7 +234,6 @@ export default function RSSEdit( { attributes, setAttributes, name } ) {
 							isShownByDefault
 						>
 							<RangeControl
-								__next40pxDefaultSize
 								label={ __( 'Max number of words in excerpt' ) }
 								value={ excerptLength }
 								onChange={ ( value ) =>
@@ -256,7 +254,6 @@ export default function RSSEdit( { attributes, setAttributes, name } ) {
 							isShownByDefault
 						>
 							<RangeControl
-								__next40pxDefaultSize
 								label={ __( 'Columns' ) }
 								value={ columns }
 								onChange={ ( value ) =>

package/src/search/edit.js

@@ -376,7 +376,6 @@ export default function SearchEdit( {
 					>
 						<SelectControl
 							value={ buttonPosition }
-							__next40pxDefaultSize
 							label={ __( 'Button position' ) }
 							onChange={ ( value ) => {
 								setAttributes( {
@@ -421,7 +420,6 @@ export default function SearchEdit( {
 					>
 						<VStack>
 							<UnitControl
-								__next40pxDefaultSize
 								label={ __( 'Width' ) }
 								id={ unitControlInputId } // Unused, kept for backwards compatibility
 								min={
@@ -473,7 +471,6 @@ export default function SearchEdit( {
 									} );
 								} }
 								isBlock
-								__next40pxDefaultSize
 							>
 								{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {
 									return (
@@ -495,7 +492,6 @@ export default function SearchEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
-					__next40pxDefaultSize
 					label={ __( 'HTML element' ) }
 					value={ tagName ?? '' }
 					options={ [

package/src/separator/edit.js

@@ -39,7 +39,6 @@ const HtmlElementControl = ( { tagName, setAttributes } ) => {
 							'The <div> element should only be used if the block is a design element with no semantic meaning.'
 					  )
 			}
-			__next40pxDefaultSize
 		/>
 	);
 };

package/src/site-logo/edit.js

@@ -34,7 +34,6 @@ import {
 	MediaReplaceFlow,
 	useBlockProps,
 	store as blockEditorStore,
-	__experimentalImageEditor as ImageEditor,
 	useBlockEditingMode,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
@@ -73,7 +72,6 @@ const SiteLogo = ( {
 	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const isResizable = ! isWideAligned && isLargeViewport;
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
-	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const cropButtonRef = useRef();
 	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -114,12 +112,6 @@ const SiteLogo = ( {
 		}
 	}, [] );
 
-	useEffect( () => {
-		if ( ! isSelected ) {
-			setIsEditingImage( false );
-		}
-	}, [ isSelected ] );
-
 	// Always apply modal updates as snackbar Undo may restore the original id.
 	const handleMediaUpdate = ( { id: newId } ) => {
 		if ( typeof newId === 'number' ) {
@@ -233,58 +225,6 @@ const SiteLogo = ( {
 	// Hide crop and dimensions editing in write mode
 	const shouldShowCropAndDimensions = ! isContentOnlyMode;
 
-	let imgEdit;
-	if ( canEditImage && isEditingImage ) {
-		imgEdit = (
-			<ImageEditor
-				id={ logoId }
-				url={ logoUrl }
-				width={ currentWidth }
-				height={ currentHeight }
-				naturalHeight={ naturalHeight }
-				naturalWidth={ naturalWidth }
-				onSaveImage={ ( imageAttributes ) => {
-					setLogo( imageAttributes.id );
-				} }
-				onFinishEditing={ () => {
-					setIsEditingImage( false );
-				} }
-			/>
-		);
-	} else {
-		// Always render ResizableBox but disable resize functionality in contentOnly mode
-		imgEdit = (
-			<ResizableBox
-				size={ {
-					width: currentWidth,
-					height: currentHeight,
-				} }
-				showHandle={ isSelected && shouldShowCropAndDimensions }
-				minWidth={ minWidth }
-				maxWidth={ maxWidthBuffer }
-				minHeight={ minHeight }
-				maxHeight={ maxWidthBuffer / ratio }
-				lockAspectRatio
-				enable={ {
-					top: false,
-					right: showRightHandle,
-					bottom: true,
-					left: showLeftHandle,
-				} }
-				onResizeStart={ onResizeStart }
-				onResizeStop={ ( event, direction, elt, delta ) => {
-					onResizeStop();
-					setAttributes( {
-						width: parseInt( currentWidth + delta.width, 10 ),
-						height: parseInt( currentHeight + delta.height, 10 ),
-					} );
-				} }
-			>
-				{ imgWrapper }
-			</ResizableBox>
-		);
-	}
-
 	// Support the previous location for the Site Icon settings. To be removed
 	// when the required WP core version for Gutenberg is >= 6.5.0.
 	const shouldUseNewUrl = ! window?.__experimentalUseCustomizerSiteLogoUrl;
@@ -325,7 +265,6 @@ const SiteLogo = ( {
 						}
 					>
 						<RangeControl
-							__next40pxDefaultSize
 							label={ __( 'Image width' ) }
 							onChange={ ( newWidth ) =>
 								setAttributes( { width: newWidth } )
@@ -401,33 +340,54 @@ const SiteLogo = ( {
 				</ToolsPanel>
 			</InspectorControls>
 			{ canEditImage &&
-				! isEditingImage &&
+				openMediaEditorModal &&
 				shouldShowCropAndDimensions && (
 					<BlockControls group="block">
 						<ToolbarButton
 							ref={ cropButtonRef }
-							onClick={
-								openMediaEditorModal && logoId
-									? () =>
-											openMediaEditorModal( {
-												id: logoId,
-												onUpdate: handleMediaUpdate,
-												onClose: () =>
-													cropButtonRef.current?.focus(),
-											} )
-									: () => setIsEditingImage( true )
-							}
-							aria-haspopup={
-								openMediaEditorModal && logoId
-									? 'dialog'
-									: undefined
+							onClick={ () =>
+								openMediaEditorModal( {
+									id: logoId,
+									onUpdate: handleMediaUpdate,
+									onClose: () =>
+										cropButtonRef.current?.focus(),
+								} )
 							}
+							aria-haspopup="dialog"
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>
 					</BlockControls>
 				) }
-			{ imgEdit }
+			{ /* Always render ResizableBox but disable resize functionality in contentOnly mode */ }
+			<ResizableBox
+				size={ {
+					width: currentWidth,
+					height: currentHeight,
+				} }
+				showHandle={ isSelected && shouldShowCropAndDimensions }
+				minWidth={ minWidth }
+				maxWidth={ maxWidthBuffer }
+				minHeight={ minHeight }
+				maxHeight={ maxWidthBuffer / ratio }
+				lockAspectRatio
+				enable={ {
+					top: false,
+					right: showRightHandle,
+					bottom: true,
+					left: showLeftHandle,
+				} }
+				onResizeStart={ onResizeStart }
+				onResizeStop={ ( event, direction, elt, delta ) => {
+					onResizeStop();
+					setAttributes( {
+						width: parseInt( currentWidth + delta.width, 10 ),
+						height: parseInt( currentHeight + delta.height, 10 ),
+					} );
+				} }
+			>
+				{ imgWrapper }
+			</ResizableBox>
 		</>
 	);
 };

package/src/social-links/edit.js

@@ -181,7 +181,6 @@ export function SocialLinksEdit( props ) {
 						}
 					>
 						<SelectControl
-							__next40pxDefaultSize
 							label={ __( 'Icon size' ) }
 							onChange={ ( newSize ) => {
 								setAttributes( {

package/src/spacer/controls.js

@@ -17,7 +17,6 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -62,10 +61,9 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 					value={ computedValue }
 					units={ units }
 					label={ label }
-					__next40pxDefaultSize
 				/>
 			) : (
-				<View className="tools-panel-item-spacing">
+				<div className="tools-panel-item-spacing">
 					<SpacingSizesControl
 						values={ { all: computedValue } }
 						onChange={ ( { all } ) => {
@@ -78,7 +76,7 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 						splitOnAxis={ false }
 						showSideInLabel={ false }
 					/>
-				</View>
+				</div>
 			) }
 		</>
 	);

package/src/spacer/edit.js

@@ -16,7 +16,6 @@ import {
 } from '@wordpress/block-editor';
 import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
-import { View } from '@wordpress/primitives';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -351,7 +350,7 @@ const SpacerEdit = ( {
 
 	return (
 		<>
-			<View
+			<div
 				{ ...useBlockProps( {
 					style,
 					className: clsx( className, {
@@ -361,7 +360,7 @@ const SpacerEdit = ( {
 			>
 				{ blockEditingMode === 'default' &&
 					resizableBoxWithOrientation( inheritedOrientation ) }
-			</View>
+			</div>
 			{ ! isFlexLayout && (
 				<SpacerControls
 					setAttributes={ setAttributes }

package/src/tab-list/block.json

@@ -16,8 +16,9 @@
 			"selector": "button",
 			"query": {
 				"label": {
-					"type": "string",
-					"source": "html"
+					"type": "rich-text",
+					"source": "rich-text",
+					"role": "content"
 				}
 			},
 			"default": []

package/src/tab-list/edit.js

@@ -16,13 +16,13 @@ import {
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
-import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
+import TabToolbarControls from '../tabs/tab-toolbar-controls';
+import useTabActions from '../tabs/use-tab-actions';
 
 const EMPTY_ARRAY = [];
 
@@ -56,38 +56,29 @@ function Edit( {
 		},
 		[ clientId ]
 	);
+	const { isBlockSelected, hasSelectedInnerBlock } =
+		useSelect( blockEditorStore );
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { insertTab, removeTab } = useTabActions( tabsClientId );
 
 	const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
 
-	const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =
-		useDispatch( blockEditorStore );
-
-	const handleTabClick = useCallback(
-		( tabIndex ) => {
-			if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
-				__unstableMarkNextChangeAsNotPersistent();
-				updateBlockAttributes( tabsClientId, {
-					editorActiveTabIndex: tabIndex,
-				} );
-			}
-		},
-		[
-			tabsClientId,
-			effectiveActiveIndex,
-			updateBlockAttributes,
-			__unstableMarkNextChangeAsNotPersistent,
-		]
-	);
+	function selectTabPanel( tabIndex ) {
+		if ( tabsClientId && tabIndex !== effectiveActiveIndex ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( tabsClientId, {
+				editorActiveTabIndex: tabIndex,
+			} );
+		}
+	}
 
-	const handleLabelChange = useCallback(
-		( tabIndex, newLabel ) => {
-			const tab = tabsList[ tabIndex ];
-			if ( tab?.clientId ) {
-				updateBlockAttributes( tab.clientId, { label: newLabel } );
-			}
-		},
-		[ tabsList, updateBlockAttributes ]
-	);
+	function handleLabelChange( tabIndex, newLabel ) {
+		const tab = tabsList[ tabIndex ];
+		if ( tab?.clientId ) {
+			updateBlockAttributes( tab.clientId, { label: newLabel } );
+		}
+	}
 
 	const menuRef = useRef();
 	const prevTabCountRef = useRef( tabsList.length );
@@ -101,30 +92,32 @@ function Edit( {
 			return;
 		}
 
+		// Only move focus during active editing, not external data changes.
+		if (
+			! isBlockSelected( tabsClientId ) &&
+			! hasSelectedInnerBlock( tabsClientId, true )
+		) {
+			return;
+		}
+
 		const focusButtonAt = ( index ) => {
 			window.requestAnimationFrame( () => {
-				const buttons = menuRef.current?.querySelectorAll( 'button' );
-				const target = buttons?.[ index ];
-				if ( ! target ) {
-					return;
-				}
-				const richText = target.querySelector( '[contenteditable]' );
-				if ( richText ) {
-					richText.focus();
-				} else {
-					target.focus();
-				}
+				const button =
+					menuRef.current?.querySelectorAll( 'button' )?.[ index ];
+				(
+					button?.querySelector( '[contenteditable]' ) ?? button
+				)?.focus();
 			} );
 		};
 
-		if ( tabsList.length > prevCount ) {
-			// Tab added — focus the last (newly added) button.
-			focusButtonAt( tabsList.length - 1 );
-		} else {
-			// Tab removed — focus the new active button.
-			focusButtonAt( effectiveActiveIndex );
-		}
-	}, [ tabsList.length, effectiveActiveIndex ] );
+		focusButtonAt( effectiveActiveIndex );
+	}, [
+		effectiveActiveIndex,
+		hasSelectedInnerBlock,
+		isBlockSelected,
+		tabsClientId,
+		tabsList.length,
+	] );
 
 	const blockProps = useBlockProps( {
 		role: 'tablist',
@@ -144,8 +137,7 @@ function Edit( {
 
 	return (
 		<>
-			<AddTabToolbarControl tabsClientId={ tabsClientId } />
-			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+			<TabToolbarControls tabsClientId={ tabsClientId } />
 			<div { ...blockProps }>
 				{ tabsList.map( ( tab, index ) => {
 					const isActive = index === effectiveActiveIndex;
@@ -158,9 +150,11 @@ function Edit( {
 							className={ buttonClassName || undefined }
 							style={ buttonStyle }
 							tabIndex={ -1 }
-							onClick={ ( event ) => {
-								event.preventDefault();
-								handleTabClick( index );
+							// Activate the matching panel whenever this tab
+							// receives focus — whether from a click or the caret
+							// moving into the label via the keyboard.
+							onFocus={ () => {
+								selectTabPanel( index );
 							} }
 						>
 							<RichText
@@ -171,6 +165,10 @@ function Edit( {
 								onChange={ ( newLabel ) =>
 									handleLabelChange( index, newLabel )
 								}
+								__unstableOnSplitAtEnd={ () =>
+									insertTab( index + 1 )
+								}
+								onRemove={ () => removeTab( index ) }
 							/>
 						</button>
 					);

package/src/tab-list/save.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import {
+	RichText,
 	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
@@ -34,15 +35,15 @@ export default function save( { attributes } ) {
 	return (
 		<div { ...blockProps }>
 			{ tabs.map( ( tab, index ) => (
-				<button
+				<RichText.Content
 					key={ index }
 					className={ buttonClassName || undefined }
 					style={ buttonStyle }
+					tagName="button"
+					value={ tab.label }
 					type="button"
 					role="tab"
-				>
-					{ tab.label }
-				</button>
+				/>
 			) ) }
 		</div>
 	);

package/src/tab-panel/controls.js

@@ -16,8 +16,7 @@ import { useDispatch } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import AddTabToolbarControl from './add-tab-toolbar-control';
-import RemoveTabToolbarControl from './remove-tab-toolbar-control';
+import TabToolbarControls from '../tabs/tab-toolbar-controls';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function Controls( { tabsClientId, blockIndex, isDefaultTab } ) {
@@ -26,8 +25,7 @@ export default function Controls( { tabsClientId, blockIndex, isDefaultTab } ) {
 
 	return (
 		<>
-			<AddTabToolbarControl tabsClientId={ tabsClientId } />
-			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+			<TabToolbarControls tabsClientId={ tabsClientId } />
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }

package/src/tab-panels/edit.js

@@ -12,8 +12,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';
-import RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';
+import TabToolbarControls from '../tabs/tab-toolbar-controls';
 
 /**
  * Initial template applied only when the block is first inserted (i.e. when
@@ -43,8 +42,7 @@ export default function Edit( { clientId } ) {
 
 	return (
 		<>
-			<AddTabToolbarControl tabsClientId={ tabsClientId } />
-			<RemoveTabToolbarControl tabsClientId={ tabsClientId } />
+			<TabToolbarControls tabsClientId={ tabsClientId } />
 			<div { ...innerBlocksProps } />
 		</>
 	);

package/src/table-of-contents/edit.js

@@ -190,7 +190,6 @@ export default function TableOfContentsEdit( {
 					isShownByDefault
 				>
 					<SelectControl
-						__next40pxDefaultSize
 						label={ __( 'Include headings down to level' ) }
 						value={ maxLevel || '' }
 						options={ [

package/src/tabs/edit.js

@@ -13,7 +13,7 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Controls from './controls';
+import TabToolbarControls from './tab-toolbar-controls';
 import useTabListItemsSync from './use-tab-list-items-sync';
 
 const EMPTY_ARRAY = [];
@@ -93,7 +93,7 @@ function Edit( { clientId, attributes } ) {
 	return (
 		<BlockContextProvider value={ contextValue }>
 			<div { ...innerBlockProps }>
-				<Controls clientId={ clientId } />
+				<TabToolbarControls tabsClientId={ clientId } />
 				{ innerBlockProps.children }
 			</div>
 		</BlockContextProvider>