@wordpress/block-library 9.40.2-next.v.202602241322.0 → 9.41.0

package/src/button/style.scss

@@ -55,16 +55,41 @@ $blocks-block__margin: 0.5em;
 		}
 	}
 
+	&[class*="wp-block-button__width"] {
+		width:
+			calc(var(--wp--block-button--width) * 1% -
+			(
+				var(--wp--style--block-gap, #{$blocks-block__margin}) *
+				( 1 - var(--wp--block-button--width) / 100 )
+			));
+	}
+
+	// Legacy width classes for backwards compatibility.
 	&.wp-block-button__width-25 {
-		width: calc(25% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.75));
+		width:
+			calc(25% -
+			(
+				var(--wp--style--block-gap, #{$blocks-block__margin}) *
+				0.75
+			));
 	}
 
 	&.wp-block-button__width-50 {
-		width: calc(50% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.5));
+		width:
+			calc(50% -
+			(
+				var(--wp--style--block-gap, #{$blocks-block__margin}) *
+				0.5
+			));
 	}
 
 	&.wp-block-button__width-75 {
-		width: calc(75% - (var(--wp--style--block-gap, #{$blocks-block__margin}) * 0.25));
+		width:
+			calc(75% -
+			(
+				var(--wp--style--block-gap, #{$blocks-block__margin}) *
+				0.25
+			));
 	}
 
 	&.wp-block-button__width-100 {
@@ -75,6 +100,11 @@ $blocks-block__margin: 0.5em;
 
 // For vertical buttons, gap is not factored into width calculations.
 .wp-block-buttons.is-vertical > .wp-block-button {
+	&[class*="wp-block-button__width"] {
+		width: calc(var(--wp--block-button--width) * 1%);
+	}
+
+	// Legacy width classes for backwards compatibility.
 	&.wp-block-button__width-25 {
 		width: 25%;
 	}
@@ -110,13 +140,25 @@ $blocks-block__margin: 0.5em;
 		padding: 0.667em 1.333em;
 	}
 
-	:where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)),
-	:where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)) {
+	:where(
+	.wp-block-button.is-style-outline
+	> .wp-block-button__link:not(.has-text-color)
+),
+	:where(
+	.wp-block-button
+	.wp-block-button__link.is-style-outline:not(.has-text-color)
+) {
 		color: currentColor;
 	}
 
-	:where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)),
-	:where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)) {
+	:where(
+	.wp-block-button.is-style-outline
+	> .wp-block-button__link:not(.has-background)
+),
+	:where(
+	.wp-block-button
+	.wp-block-button__link.is-style-outline:not(.has-background)
+) {
 		background-color: transparent;
 		// background-image is required to overwrite a gradient background
 		background-image: none;

package/src/button/test/utils.js

@@ -0,0 +1,84 @@
+/**
+ * Internal dependencies
+ */
+import { getWidthClasses, isPercentageWidth } from '../utils';
+
+describe( 'isPercentageWidth', () => {
+	it( 'should return true for percentage values', () => {
+		expect( isPercentageWidth( '50%' ) ).toBe( true );
+		expect( isPercentageWidth( '100%' ) ).toBe( true );
+		expect( isPercentageWidth( '33.5%' ) ).toBe( true );
+	} );
+
+	it( 'should return false for non-percentage values', () => {
+		expect( isPercentageWidth( '200px' ) ).toBe( false );
+		expect( isPercentageWidth( '10em' ) ).toBe( false );
+		expect( isPercentageWidth( undefined ) ).toBe( false );
+		expect( isPercentageWidth( null ) ).toBe( false );
+	} );
+
+	it( 'should return false for preset strings', () => {
+		expect( isPercentageWidth( 'var:preset|dimension|custom-width' ) ).toBe(
+			false
+		);
+	} );
+} );
+
+describe( 'getWidthClasses', () => {
+	it( 'should return empty object when no width is provided', () => {
+		expect( getWidthClasses( undefined ) ).toEqual( {} );
+		expect( getWidthClasses( '' ) ).toEqual( {} );
+		expect( getWidthClasses( null ) ).toEqual( {} );
+	} );
+
+	it( 'should return percentage classes for standard percentage widths', () => {
+		expect( getWidthClasses( '25%' ) ).toEqual( {
+			'has-custom-width': true,
+			'wp-block-button__width': true,
+			'wp-block-button__width-25': true,
+		} );
+
+		expect( getWidthClasses( '50%' ) ).toEqual( {
+			'has-custom-width': true,
+			'wp-block-button__width': true,
+			'wp-block-button__width-50': true,
+		} );
+
+		expect( getWidthClasses( '75%' ) ).toEqual( {
+			'has-custom-width': true,
+			'wp-block-button__width': true,
+			'wp-block-button__width-75': true,
+		} );
+
+		expect( getWidthClasses( '100%' ) ).toEqual( {
+			'has-custom-width': true,
+			'wp-block-button__width': true,
+			'wp-block-button__width-100': true,
+		} );
+	} );
+
+	it( 'should return generic percentage classes for non-standard percentage widths', () => {
+		expect( getWidthClasses( '33%' ) ).toEqual( {
+			'has-custom-width': true,
+			'wp-block-button__width': true,
+		} );
+	} );
+
+	it( 'should return only has-custom-width for non-percentage values', () => {
+		expect( getWidthClasses( '200px' ) ).toEqual( {
+			'has-custom-width': true,
+		} );
+
+		expect( getWidthClasses( '10em' ) ).toEqual( {
+			'has-custom-width': true,
+		} );
+	} );
+
+	it( 'should return only has-custom-width for resolved non-percentage preset values', () => {
+		// When a preset resolves to a non-percentage value (e.g., 200px),
+		// the resolved value is passed to getWidthClasses, not the preset string.
+		expect( getWidthClasses( '300px' ) ).toEqual( {
+			'has-custom-width': true,
+		} );
+	} );
+} );

package/src/button/utils.js

@@ -0,0 +1,42 @@
+/**
+ * Returns whether the given width value is a percentage.
+ *
+ * @param {string} width - The width value.
+ * @return {boolean} True if the width is a percentage value.
+ */
+export function isPercentageWidth( width ) {
+	return typeof width === 'string' && width.endsWith( '%' );
+}
+
+/**
+ * Returns the width classes for the button based on the width attribute.
+ *
+ * @param {string} width - The width value (e.g., '25%', '50%', '75%', '100%', or custom value).
+ * @return {Object} Object with width-related class names as keys and true as values.
+ */
+export function getWidthClasses( width ) {
+	if ( ! width ) {
+		return {};
+	}
+
+	if ( isPercentageWidth( width ) ) {
+		const legacyWidthClasses = {
+			'25%': 'wp-block-button__width-25',
+			'50%': 'wp-block-button__width-50',
+			'75%': 'wp-block-button__width-75',
+			'100%': 'wp-block-button__width-100',
+		};
+		return {
+			'has-custom-width': true,
+			'wp-block-button__width': true,
+			// Maintain legacy class for backwards compatibility.
+			...( legacyWidthClasses[ width ] && {
+				[ legacyWidthClasses[ width ] ]: true,
+			} ),
+		};
+	}
+
+	return {
+		'has-custom-width': true,
+	};
+}

package/src/cover/index.php

@@ -39,13 +39,13 @@ function render_block_core_cover( $attributes, $content ) {
 				$lower_src = strtolower( $iframe_src );
 				$provider  = null;
 
-				if ( strpos( $lower_src, 'youtube.com' ) !== false || strpos( $lower_src, 'youtu.be' ) !== false ) {
+				if ( str_contains( $lower_src, 'youtube.com' ) || str_contains( $lower_src, 'youtu.be' ) ) {
 					$provider = 'youtube';
-				} elseif ( strpos( $lower_src, 'vimeo.com' ) !== false ) {
+				} elseif ( str_contains( $lower_src, 'vimeo.com' ) ) {
 					$provider = 'vimeo';
-				} elseif ( strpos( $lower_src, 'videopress.com' ) !== false ) {
+				} elseif ( str_contains( $lower_src, 'videopress.com' ) ) {
 					$provider = 'videopress';
-				} elseif ( strpos( $lower_src, 'wordpress.tv' ) !== false ) {
+				} elseif ( str_contains( $lower_src, 'wordpress.tv' ) ) {
 					$provider = 'wordpress-tv';
 				}
 

package/src/image/image.js

@@ -1241,21 +1241,20 @@ export default function Image( {
 		} );
 	};
 
-	const featuredImageControl = (
-		<BlockSettingsMenuControls>
-			{ ( { selectedClientIds } ) =>
-				selectedClientIds.length === 1 &&
-				! isDescendentOfQueryLoop &&
-				postId &&
-				id &&
-				clientId === selectedClientIds[ 0 ] && (
-					<MenuItem onClick={ setPostFeatureImage }>
-						{ __( 'Set as featured image' ) }
-					</MenuItem>
-				)
-			}
-		</BlockSettingsMenuControls>
-	);
+	const featuredImageControl =
+		! isDescendentOfQueryLoop && postId && id ? (
+			<BlockSettingsMenuControls>
+				{ ( { canEdit, selectedClientIds } ) =>
+					canEdit &&
+					selectedClientIds.length === 1 &&
+					clientId === selectedClientIds[ 0 ] && (
+						<MenuItem onClick={ setPostFeatureImage }>
+							{ __( 'Set as featured image' ) }
+						</MenuItem>
+					)
+				}
+			</BlockSettingsMenuControls>
+		) : null;
 
 	return (
 		<>

package/src/image/index.php

@@ -218,7 +218,9 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
 		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
-		$img_srcset       = wp_get_attachment_image_srcset( $block['attrs']['id'] );
+		$has_dimensions   = ( $img_metadata['width'] ?? '' ) && ( $img_metadata['height'] ?? '' );
+		$srcset_size      = $has_dimensions ? array( $img_metadata['width'], $img_metadata['height'] ) : 'large';
+		$img_srcset       = wp_get_attachment_image_srcset( $block['attrs']['id'], $srcset_size );
 		$img_width        = $img_metadata['width'] ?? 'none';
 		$img_height       = $img_metadata['height'] ?? 'none';
 	}

package/src/navigation/edit/index.js

@@ -55,7 +55,6 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
-import useNavigationEntities from '../use-navigation-entities';
 import Placeholder from './placeholder';
 import ResponsiveWrapper from './responsive-wrapper';
 import NavigationInnerBlocks from './inner-blocks';
@@ -339,7 +338,10 @@ function Navigation( {
 
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
-	const { menus: classicMenus } = useNavigationEntities();
+	const { records: classicMenus } = useEntityRecords( 'root', 'menu', {
+		per_page: -1,
+		context: 'view',
+	} );
 
 	const [ showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice ] =
 		useNavigationNotice( {

package/src/navigation/edit/leaf-more-menu.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import {
+	createBlock,
+	hasBlockSupport,
+	store as blocksStore,
+} from '@wordpress/blocks';
 import {
 	addSubmenu,
 	chevronUp,
@@ -103,8 +107,14 @@ export default function LeafMoreMenu( props ) {
 	const { block } = props;
 	const { clientId } = block;
 
-	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
-		useDispatch( blockEditorStore );
+	const {
+		moveBlocksDown,
+		moveBlocksUp,
+		removeBlocks,
+		duplicateBlocks,
+		insertBeforeBlock,
+		insertAfterBlock,
+	} = useDispatch( blockEditorStore );
 
 	const removeLabel = sprintf(
 		/* translators: %s: block name */
@@ -112,14 +122,45 @@ export default function LeafMoreMenu( props ) {
 		BlockTitle( { clientId, maximumLength: 25 } )
 	);
 
-	const rootClientId = useSelect(
-		( select ) => {
-			const { getBlockRootClientId } = select( blockEditorStore );
-
-			return getBlockRootClientId( clientId );
-		},
-		[ clientId ]
-	);
+	const { rootClientId, canDuplicate, canInsertBlock, isFirst, isLast } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockRootClientId,
+					canInsertBlockType,
+					getDirectInsertBlock,
+					getBlockIndex,
+					getBlockCount,
+				} = select( blockEditorStore );
+				const { getDefaultBlockName } = select( blocksStore );
+
+				const _rootClientId = getBlockRootClientId( clientId );
+				const canInsertDefaultBlock = canInsertBlockType(
+					getDefaultBlockName(),
+					_rootClientId
+				);
+				const directInsertBlock = _rootClientId
+					? getDirectInsertBlock( _rootClientId )
+					: null;
+
+				return {
+					rootClientId: _rootClientId,
+					canDuplicate:
+						!! block &&
+						hasBlockSupport( block.name, 'multiple', true ) &&
+						canInsertBlockType( block.name, _rootClientId ),
+					canInsertBlock:
+						( canInsertDefaultBlock || !! directInsertBlock ) &&
+						!! block &&
+						canInsertBlockType( block.name, _rootClientId ),
+					isFirst: getBlockIndex( clientId ) === 0,
+					isLast:
+						getBlockIndex( clientId ) ===
+						getBlockCount( _rootClientId ) - 1,
+				};
+			},
+			[ clientId, block ]
+		);
 
 	return (
 		<DropdownMenu
@@ -135,6 +176,8 @@ export default function LeafMoreMenu( props ) {
 					<MenuGroup>
 						<MenuItem
 							icon={ chevronUp }
+							disabled={ isFirst }
+							accessibleWhenDisabled
 							onClick={ () => {
 								moveBlocksUp( [ clientId ], rootClientId );
 								onClose();
@@ -144,6 +187,8 @@ export default function LeafMoreMenu( props ) {
 						</MenuItem>
 						<MenuItem
 							icon={ chevronDown }
+							disabled={ isLast }
+							accessibleWhenDisabled
 							onClick={ () => {
 								moveBlocksDown( [ clientId ], rootClientId );
 								onClose();
@@ -158,6 +203,36 @@ export default function LeafMoreMenu( props ) {
 							expand={ props.expand }
 							setInsertedBlock={ props.setInsertedBlock }
 						/>
+						{ canDuplicate && (
+							<MenuItem
+								onClick={ () => {
+									duplicateBlocks( [ clientId ] );
+									onClose();
+								} }
+							>
+								{ __( 'Duplicate' ) }
+							</MenuItem>
+						) }
+						{ canInsertBlock && (
+							<>
+								<MenuItem
+									onClick={ () => {
+										insertBeforeBlock( clientId );
+										onClose();
+									} }
+								>
+									{ __( 'Add before' ) }
+								</MenuItem>
+								<MenuItem
+									onClick={ () => {
+										insertAfterBlock( clientId );
+										onClose();
+									} }
+								>
+									{ __( 'Add after' ) }
+								</MenuItem>
+							</>
+						) }
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem

package/src/navigation/edit/menu-inspector-controls.js

@@ -6,12 +6,7 @@ import {
 	InspectorControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import {
-	PanelBody,
-	Spinner,
-	__experimentalHStack as HStack,
-	__experimentalHeading as Heading,
-} from '@wordpress/components';
+import { PanelBody, Spinner } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
@@ -24,121 +19,18 @@ import { unlock } from '../../lock-unlock';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
 import LeafMoreMenu from './leaf-more-menu';
-import {
-	LinkUI,
-	updateAttributes,
-	useEntityBinding,
-} from '../../navigation-link/shared';
+import { NavigationLinkUI } from './navigation-link-ui';
+import NavigationListViewHeader from './navigation-list-view-header';
 
 const actionLabel =
 	/* translators: %s: The name of a menu. */ __( "Switch to '%s'" );
-const BLOCKS_WITH_LINK_UI_SUPPORT = [
-	'core/navigation-link',
-	'core/navigation-submenu',
-];
 const {
 	PrivateListView,
-	useBlockDisplayTitle,
 	PrivateBlockContext,
 	useListViewPanelState,
+	useBlockDisplayTitle,
 } = unlock( blockEditorPrivateApis );
 
-function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
-	const { updateBlockAttributes, removeBlock } =
-		useDispatch( blockEditorStore );
-
-	const supportsLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
-		insertedBlock?.name
-	);
-	const blockWasJustInserted = insertedBlock?.clientId === block.clientId;
-	const showLinkControls = supportsLinkControls && blockWasJustInserted;
-
-	// Get binding utilities for the inserted block
-	const { createBinding, clearBinding } = useEntityBinding( {
-		clientId: insertedBlock?.clientId,
-		attributes: insertedBlock?.attributes || {},
-	} );
-
-	if ( ! showLinkControls ) {
-		return null;
-	}
-
-	/**
-	 * Cleanup function for auto-inserted Navigation Link blocks.
-	 *
-	 * Removes the block if it has no URL and clears the inserted block state.
-	 * This ensures consistent cleanup behavior across different contexts.
-	 */
-	const cleanupInsertedBlock = () => {
-		// Prevent automatic block selection when removing blocks in list view context
-		// This avoids focus stealing that would close the list view and switch to canvas
-		const shouldAutoSelectBlock = false;
-
-		// Follows the exact same pattern as Navigation Link block's onClose handler
-		// If there is no URL then remove the auto-inserted block to avoid empty blocks
-		if ( ! insertedBlock?.attributes?.url && insertedBlock?.clientId ) {
-			// Remove the block entirely to avoid poor UX
-			// This matches the Navigation Link block's behavior
-			removeBlock( insertedBlock.clientId, shouldAutoSelectBlock );
-		}
-		setInsertedBlock( null );
-	};
-
-	const setInsertedBlockAttributes =
-		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
-			if ( ! _insertedBlockClientId ) {
-				return;
-			}
-			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
-		};
-
-	// Wrapper function to clean up original block when a new block is selected
-	const handleSetInsertedBlock = ( newBlock ) => {
-		// Prevent automatic block selection when removing blocks in list view context
-		// This avoids focus stealing that would close the list view and switch to canvas
-		const shouldAutoSelectBlock = false;
-
-		// If we have an existing inserted block and a new block is being set,
-		// remove the original block to avoid duplicates
-		if ( insertedBlock?.clientId && newBlock ) {
-			removeBlock( insertedBlock.clientId, shouldAutoSelectBlock );
-		}
-		setInsertedBlock( newBlock );
-	};
-
-	return (
-		<LinkUI
-			clientId={ insertedBlock?.clientId }
-			link={ insertedBlock?.attributes }
-			onBlockInsert={ handleSetInsertedBlock }
-			onClose={ () => {
-				// Use cleanup function
-				cleanupInsertedBlock();
-			} }
-			onChange={ ( updatedValue ) => {
-				// updateAttributes determines the final state and returns metadata
-				const { isEntityLink, attributes: updatedAttributes } =
-					updateAttributes(
-						updatedValue,
-						setInsertedBlockAttributes( insertedBlock?.clientId ),
-						insertedBlock?.attributes
-					);
-
-				// Handle URL binding based on the final computed state
-				// Only create bindings for entity links (posts, pages, taxonomies)
-				// Never create bindings for custom links (manual URLs)
-				if ( isEntityLink ) {
-					createBinding( updatedAttributes );
-				} else {
-					clearBinding();
-				}
-
-				setInsertedBlock( null );
-			} }
-		/>
-	);
-}
-
 const MainContent = ( {
 	clientId,
 	currentMenuId,
@@ -194,7 +86,7 @@ const MainContent = ( {
 				description={ description }
 				showAppender
 				blockSettingsMenu={ LeafMoreMenu }
-				additionalBlockContent={ AdditionalBlockContent }
+				additionalBlockContent={ NavigationLinkUI }
 				onSelect={ openListViewContentPanel }
 			/>
 		</div>
@@ -232,34 +124,23 @@ const MenuInspectorControls = ( props ) => {
 		return (
 			<InspectorControls group="list">
 				<PanelBody title={ null }>
-					<HStack className="wp-block-navigation-off-canvas-editor__header">
-						<Heading
-							className="wp-block-navigation-off-canvas-editor__title"
-							level={ 2 }
-						>
-							{ blockTitle }
-						</Heading>
-						{ blockEditingMode === 'default' && (
-							<NavigationMenuSelector
-								currentMenuId={ currentMenuId }
-								onSelectClassicMenu={ onSelectClassicMenu }
-								onSelectNavigationMenu={
-									onSelectNavigationMenu
-								}
-								onCreateNew={ onCreateNew }
-								createNavigationMenuIsSuccess={
-									createNavigationMenuIsSuccess
-								}
-								createNavigationMenuIsError={
-									createNavigationMenuIsError
-								}
-								actionLabel={ actionLabel }
-								isManageMenusButtonDisabled={
-									isManageMenusButtonDisabled
-								}
-							/>
-						) }
-					</HStack>
+					<NavigationListViewHeader
+						clientId={ clientId }
+						blockEditingMode={ blockEditingMode }
+						currentMenuId={ currentMenuId }
+						onSelectClassicMenu={ onSelectClassicMenu }
+						onSelectNavigationMenu={ onSelectNavigationMenu }
+						onCreateNew={ onCreateNew }
+						createNavigationMenuIsSuccess={
+							createNavigationMenuIsSuccess
+						}
+						createNavigationMenuIsError={
+							createNavigationMenuIsError
+						}
+						isManageMenusButtonDisabled={
+							isManageMenusButtonDisabled
+						}
+					/>
 					<MainContent
 						{ ...props }
 						expandRevision={ expandRevision }
@@ -273,7 +154,7 @@ const MenuInspectorControls = ( props ) => {
 	return (
 		<InspectorControls group="list">
 			<PanelBody
-				title={ __( 'Navigation' ) }
+				title={ blockTitle }
 				opened={ isOpened }
 				onToggle={ handleToggle }
 			>