@wordpress/block-library 9.40.2-next.v.202602271551.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/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-link/shared/test/use-link-preview.test.js

@@ -105,6 +105,15 @@ describe( 'computeDisplayUrl', () => {
 			expect( result.isExternal ).toBe( false );
 			expect( result.displayUrl ).toBe( '/my-page' );
 		} );
+
+		it( 'should treat http and https to same host as internal (compare by host, not origin)', () => {
+			const result = computeDisplayUrl( {
+				linkUrl: 'http://example.com/my-page',
+				homeUrl: 'https://example.com',
+			} );
+			expect( result.isExternal ).toBe( false );
+			expect( result.displayUrl ).toBe( '/my-page' );
+		} );
 	} );
 
 	describe( 'special protocols and edge cases', () => {

package/src/navigation-link/shared/use-link-preview.js

@@ -31,7 +31,7 @@ function capitalize( str ) {
  *
  * @param {Object} options         - Parameters object
  * @param {string} options.linkUrl - The URL to process
- * @param {string} options.homeUrl - The WordPress site URL (falls back to window.location.origin)
+ * @param {string} options.homeUrl - The WordPress site URL (required for internal/external detection)
  * @return {Object} Object with displayUrl and isExternal flag
  */
 export function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {
@@ -51,12 +51,10 @@ export function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {
 	// This must happen before trusting the type attribute
 	try {
 		const parsedUrl = new URL( linkUrl );
-		// Use provided homeUrl or fall back to window.location.origin
-		const siteDomain = homeUrl
-			? new URL( homeUrl ).origin
-			: window.location.origin;
+		// Compare by host (not origin) so http/https to same site both count as internal
+		const siteHost = new URL( homeUrl ).host;
 
-		if ( parsedUrl.origin === siteDomain ) {
+		if ( parsedUrl.host === siteHost ) {
 			// Show only the pathname (and search/hash if present)
 			let path = parsedUrl.pathname + parsedUrl.search + parsedUrl.hash;
 			// Remove trailing slash
@@ -65,12 +63,11 @@ export function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {
 			}
 			displayUrl = path;
 		} else {
-			// Different origin - this is an external link
+			// Different host - this is an external link
 			isExternal = true;
 		}
 	} catch ( e ) {
-		// URL parsing failed - this means it's likely a URL without a protocol (e.g., "www.example.com")
-		// Since we already checked for relative paths and hash links above, treat as external
+		// URL parsing failed - treat as external (e.g. no homeUrl, or URL without protocol)
 		isExternal = true;
 	}
 

package/src/playlist/edit.js

@@ -7,7 +7,7 @@ import { v4 as uuid } from 'uuid';
 /**
  * WordPress dependencies
  */
-import { useState, useCallback, useEffect } from '@wordpress/element';
+import { useCallback, useEffect } from '@wordpress/element';
 import {
 	store as blockEditorStore,
 	MediaPlaceholder,
@@ -23,15 +23,13 @@ import {
 	ToggleControl,
 	Disabled,
 	SelectControl,
-	Spinner,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
-import { __, _x, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { audio as icon } from '@wordpress/icons';
-import { safeHTML, __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -39,99 +37,42 @@ import { createBlock } from '@wordpress/blocks';
  */
 import { Caption } from '../utils/caption';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { WaveformPlayer } from '../utils/waveform-player';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
-const CurrentTrack = ( { track, showImages, onTrackEnd } ) => {
-	/**
-	 * dangerouslySetInnerHTML and safeHTML are used because
-	 * the media library allows using some HTML tags in the title, artist, and album fields.
-	 */
-	const trackTitle = {
-		dangerouslySetInnerHTML: {
-			__html: safeHTML( track?.title ? track.title : __( 'Untitled' ) ),
-		},
-	};
-	const trackArtist = {
-		dangerouslySetInnerHTML: {
-			__html: safeHTML(
-				track?.artist ? track.artist : __( 'Unknown artist' )
-			),
-		},
-	};
-	const trackAlbum = {
-		dangerouslySetInnerHTML: {
-			__html: safeHTML(
-				track?.album ? track.album : __( 'Unknown album' )
-			),
-		},
+/**
+ * Transform media library data into track block attributes.
+ *
+ * @param {Object} media - Media object from the media library.
+ * @return {Object} Track attributes for the playlist-track block.
+ */
+function getTrackAttributes( media ) {
+	return {
+		id: media.id || media.url, // Attachment ID or URL.
+		uniqueId: uuid(), // Unique ID for the track.
+		src: media.url,
+		title: media.title,
+		artist:
+			media.artist ||
+			media?.meta?.artist ||
+			media?.media_details?.artist ||
+			__( 'Unknown artist' ),
+		album:
+			media.album ||
+			media?.meta?.album ||
+			media?.media_details?.album ||
+			__( 'Unknown album' ),
+		length: media?.fileLength || media?.media_details?.length_formatted,
+		// Prevent using the default media attachment icon as the track image.
+		// Note: Image is not available when a new track is uploaded.
+		image:
+			media?.image?.src &&
+			media?.image?.src.endsWith( '/images/media/audio.svg' )
+				? ''
+				: media?.image?.src,
 	};
-
-	let ariaLabel;
-	if ( track?.title && track?.artist && track?.album ) {
-		ariaLabel = stripHTML(
-			sprintf(
-				/* translators: %1$s: track title, %2$s artist name, %3$s: album name. */
-				_x(
-					'%1$s by %2$s from the album %3$s',
-					'track title, artist name, album name'
-				),
-				track?.title,
-				track?.artist,
-				track?.album
-			)
-		);
-	} else if ( track?.title ) {
-		ariaLabel = stripHTML( track.title );
-	} else {
-		ariaLabel = stripHTML( __( 'Untitled' ) );
-	}
-
-	return (
-		<>
-			<div className="wp-block-playlist__current-item">
-				{ showImages && track?.image && (
-					<img
-						className="wp-block-playlist__item-image"
-						src={ track.image }
-						alt=""
-						width="70px"
-						height="70px"
-					/>
-				) }
-				<div>
-					{ ! track?.title ? (
-						<span className="wp-block-playlist__item-title">
-							<Spinner />
-						</span>
-					) : (
-						<span
-							className="wp-block-playlist__item-title"
-							{ ...trackTitle }
-						/>
-					) }
-					<div className="wp-block-playlist__current-item-artist-album">
-						<span
-							className="wp-block-playlist__item-artist"
-							{ ...trackArtist }
-						/>
-						<span
-							className="wp-block-playlist__item-album"
-							{ ...trackAlbum }
-						/>
-					</div>
-				</div>
-			</div>
-			<audio
-				controls="controls"
-				src={ track?.url ? track.url : '' }
-				onEnded={ onTrackEnd }
-				aria-label={ ariaLabel }
-				tabIndex={ 0 }
-			/>
-		</>
-	);
-};
+}
 
 const PlaylistEdit = ( {
 	attributes,
@@ -148,7 +89,6 @@ const PlaylistEdit = ( {
 		showArtists,
 		currentTrack,
 	} = attributes;
-	const [ trackListIndex, setTrackListIndex ] = useState( 0 );
 	const blockProps = useBlockProps();
 	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
@@ -235,33 +175,7 @@ const PlaylistEdit = ( {
 				media = [ media ];
 			}
 
-			const trackAttributes = ( track ) => ( {
-				id: track.id || track.url, // Attachment ID or URL.
-				uniqueId: uuid(), // Unique ID for the track.
-				src: track.url,
-				title: track.title,
-				artist:
-					track.artist ||
-					track?.meta?.artist ||
-					track?.media_details?.artist ||
-					__( 'Unknown artist' ),
-				album:
-					track.album ||
-					track?.meta?.album ||
-					track?.media_details?.album ||
-					__( 'Unknown album' ),
-				length:
-					track?.fileLength || track?.media_details?.length_formatted,
-				// Prevent using the default media attachment icon as the track image.
-				// Note: Image is not available when a new track is uploaded.
-				image:
-					track?.image?.src &&
-					track?.image?.src.endsWith( '/images/media/audio.svg' )
-						? ''
-						: track?.image?.src,
-			} );
-
-			const trackList = media.map( trackAttributes );
+			const trackList = media.map( getTrackAttributes );
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( {
 				currentTrack:
@@ -282,29 +196,21 @@ const PlaylistEdit = ( {
 		]
 	);
 
-	const onTrackEnd = useCallback( () => {
-		/* If there are tracks left, play the next track */
-		if ( trackListIndex < tracks.length - 1 ) {
-			if ( tracks[ trackListIndex + 1 ]?.uniqueId ) {
-				setTrackListIndex( trackListIndex + 1 );
-				setAttributes( {
-					currentTrack: tracks[ trackListIndex + 1 ].uniqueId,
-				} );
-			}
-		} else {
-			setTrackListIndex( 0 );
-			if ( tracks[ 0 ].uniqueId ) {
-				setAttributes( { currentTrack: tracks[ 0 ].uniqueId } );
-			} else if ( tracks.length > 0 ) {
-				const validTrack = tracks.find(
-					( track ) => track.uniqueId !== undefined
-				);
-				if ( validTrack ) {
-					setAttributes( { currentTrack: validTrack.uniqueId } );
-				}
-			}
+	// Get current track data by finding the track with matching uniqueId.
+	const currentTrackData = tracks.find(
+		( track ) => track.uniqueId === currentTrack
+	);
+
+	// Handle track end - advance to next track or loop to first.
+	const onTrackEnded = useCallback( () => {
+		const currentIndex = tracks.findIndex(
+			( track ) => track.uniqueId === currentTrack
+		);
+		const nextTrack = tracks[ currentIndex + 1 ] || tracks[ 0 ];
+		if ( nextTrack?.uniqueId ) {
+			setAttributes( { currentTrack: nextTrack.uniqueId } );
 		}
-	}, [ setAttributes, trackListIndex, tracks ] );
+	}, [ currentTrack, tracks, setAttributes ] );
 
 	const onChangeOrder = useCallback(
 		( trackOrder ) => {
@@ -317,16 +223,13 @@ const PlaylistEdit = ( {
 				}
 				return titleB.localeCompare( titleA );
 			} );
-			const sortedTracks = sortedBlocks.map(
-				( block ) => block.attributes
-			);
+			const firstUniqueId = sortedBlocks[ 0 ]?.attributes?.uniqueId;
 			replaceInnerBlocks( clientId, sortedBlocks );
 			setAttributes( {
 				order: trackOrder,
 				currentTrack:
-					sortedTracks.length > 0 &&
-					sortedTracks[ 0 ].uniqueId !== currentTrack
-						? sortedTracks[ 0 ].uniqueId
+					firstUniqueId && firstUniqueId !== currentTrack
+						? firstUniqueId
 						: currentTrack,
 			} );
 		},
@@ -358,7 +261,7 @@ const PlaylistEdit = ( {
 		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
 	} );
 
-	if ( ! tracks || ( Array.isArray( tracks ) && tracks.length === 0 ) ) {
+	if ( tracks.length === 0 ) {
 		return (
 			<div
 				{ ...blockProps }
@@ -498,10 +401,12 @@ const PlaylistEdit = ( {
 			</InspectorControls>
 			<figure { ...blockProps }>
 				<Disabled isDisabled={ ! isSelected }>
-					<CurrentTrack
-						track={ tracks[ trackListIndex ] }
-						showImages={ showImages }
-						onTrackEnd={ onTrackEnd }
+					<WaveformPlayer
+						src={ currentTrackData?.src }
+						title={ currentTrackData?.title }
+						artist={ currentTrackData?.artist }
+						image={ currentTrackData?.image }
+						onEnded={ onTrackEnded }
 					/>
 				</Disabled>
 				{ showTracklist && (
@@ -529,3 +434,4 @@ const PlaylistEdit = ( {
 };
 
 export default PlaylistEdit;
+export { getTrackAttributes };

package/src/playlist/editor.scss

@@ -1,6 +1,6 @@
 .wp-block-playlist {
-	&.is-placeholder {
-		padding: 0;
-		border: none;
+	li.block-list-appender.block-list-appender {
+		position: initial;
+		margin-top: var(--wp--preset--spacing--30, 1em);
 	}
 }