@wordpress/block-library 10.2.0 → 10.3.0

package/src/navigation-link/index.php

@@ -80,6 +80,66 @@ function block_core_navigation_link_build_css_colors( $context, $attributes, $is
 	return $colors;
 }
 
+/**
+ * Build an array with CSS classes and inline styles defining the font sizes
+ * which will be applied to the navigation markup in the front-end.
+ *
+ * This function is no longer used internally and is kept only for backward
+ * compatibility with third-party code that may call it directly.
+ *
+ * @since 5.9.0
+ * @deprecated 7.0.0
+ *
+ * @param  array $context Navigation block context.
+ * @return array Font size CSS classes and inline styles.
+ */
+function block_core_navigation_link_build_css_font_sizes( $context ) {
+	_deprecated_function( __FUNCTION__, '7.0.0' );
+
+	// CSS classes.
+	$font_sizes = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	$has_named_font_size  = array_key_exists( 'fontSize', $context );
+	$has_custom_font_size = isset( $context['style']['typography']['fontSize'] );
+
+	if ( $has_named_font_size ) {
+		// Add the font size class.
+		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
+	} elseif ( $has_custom_font_size ) {
+		// Add the custom font size inline style.
+		$font_sizes['inline_styles'] = sprintf(
+			'font-size: %s;',
+			wp_get_typography_font_size_value(
+				array(
+					'size' => $context['style']['typography']['fontSize'],
+				)
+			)
+		);
+	}
+
+	return $font_sizes;
+}
+
+/**
+ * Returns the top-level submenu SVG chevron icon.
+ *
+ * @since 5.9.0
+ * @deprecated 7.0.0 Use block_core_shared_navigation_render_submenu_icon() instead.
+ *
+ * @return string
+ */
+function block_core_navigation_link_render_submenu_icon() {
+	_deprecated_function(
+		__FUNCTION__,
+		'7.0.0',
+		'block_core_shared_navigation_render_submenu_icon()'
+	);
+	return block_core_shared_navigation_render_submenu_icon();
+}
+
 /**
  * Decodes a url if it's encoded, returning the same url if not.
  *
@@ -90,6 +150,10 @@ function block_core_navigation_link_build_css_colors( $context, $attributes, $is
  * @return string $url Returns the decoded url.
  */
 function block_core_navigation_link_maybe_urldecode( $url ) {
+	if ( ! is_string( $url ) ) {
+		return '';
+	}
+
 	$is_url_encoded = false;
 	$query          = parse_url( $url, PHP_URL_QUERY );
 	$query_params   = wp_parse_args( $query );

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

@@ -248,11 +248,12 @@ function UnforwardedLinkUI( props, ref ) {
 										setAddingPage( true );
 									} }
 									canAddPage={
+										blockEditingMode !== 'disabled' &&
 										permissions?.canCreate &&
 										type === 'page'
 									}
 									canAddBlock={
-										blockEditingMode === 'default'
+										blockEditingMode !== 'disabled'
 									}
 								/>
 							);

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and isActive functions 1`] = `
 {

package/src/page-list/index.php

@@ -9,7 +9,7 @@
  * Returns the submenu visibility value with backward compatibility
  * for the deprecated openSubmenusOnClick attribute.
  *
- * @since 6.9.0
+ * @since 7.0.0
  *
  * @param array $context Block context from parent Navigation block.
  * @return string The visibility mode: 'hover', 'click', or 'always'.
@@ -258,8 +258,9 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	static $block_id = 0;
 	++$block_id;
 
-	$parent_page_id = $attributes['parentPageID'];
-	$is_nested      = ! empty( $block->context['core/isInsideSubmenu'] );
+	$parent_page_id_attr = $attributes['parentPageID'] ?? null;
+	$parent_page_id      = is_scalar( $parent_page_id_attr ) ? (int) $parent_page_id_attr : 0;
+	$is_nested           = ! empty( $block->context['core/isInsideSubmenu'] );
 
 	$all_pages = get_pages(
 		array(

package/src/paragraph/README.md

@@ -26,7 +26,6 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 
 - [`align`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#align): `"wide"`, `"full"`
 - [`splitting`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#splitting): `true`
-- [`editableRoot`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#editableroot): `true`
 - [`anchor`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#anchor): `true`
 - [`className`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#classname): `false`
 - [`color`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color):

package/src/paragraph/block.json

@@ -29,7 +29,6 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"splitting": true,
-		"editableRoot": true,
 		"anchor": true,
 		"className": false,
 		"__experimentalBorder": {

package/src/paragraph/edit.js

@@ -19,11 +19,14 @@ import {
 	useBlockProps,
 	useSettings,
 	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import { formatLTR } from '@wordpress/icons';
+import { useContext } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -31,6 +34,8 @@ import { useOnEnter } from './use-enter';
 import useDeprecatedAlign from './deprecated-attributes';
 import { unlock } from '../lock-unlock';
 
+const { PrivateBlockContext } = unlock( blockEditorPrivateApis );
+
 function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
 		isRTL() && (
@@ -131,6 +136,7 @@ function ParagraphBlock( {
 		style: { direction },
 	} );
 	const blockEditingMode = useBlockEditingMode();
+	const { ariaLabel } = useContext( PrivateBlockContext );
 
 	return (
 		<>
@@ -164,11 +170,12 @@ function ParagraphBlock( {
 				onReplace={ onReplace }
 				onRemove={ onRemove }
 				aria-label={
-					RichText.isEmpty( content )
+					ariaLabel ??
+					( RichText.isEmpty( content )
 						? __(
 								'Empty block; start writing or type forward slash to choose a block'
 						  )
-						: __( 'Block: Paragraph' )
+						: __( 'Block: Paragraph' ) )
 				}
 				data-empty={ RichText.isEmpty( content ) }
 				placeholder={ placeholder || __( 'Type / to choose a block' ) }

package/src/paragraph/index.js

@@ -16,7 +16,7 @@ import save from './save';
 import transforms from './transforms';
 import { unlock } from '../lock-unlock';
 
-const { fieldsKey, formKey } = unlock( blocksPrivateApis );
+const { fieldsKey, formKey, editableRootKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -24,6 +24,9 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	// Opt into the editing host behaviour privately. It's a Symbol setting
+	// rather than a public `supports` key so it stays an internal detail.
+	[ editableRootKey ]: true,
 	example: {
 		attributes: {
 			content: __(

package/src/pattern/index.php

@@ -33,18 +33,18 @@ function register_block_core_pattern() {
 function render_block_core_pattern( $attributes ) {
 	static $seen_refs = array();
 
-	if ( empty( $attributes['slug'] ) ) {
+	$slug = $attributes['slug'] ?? null;
+	if ( empty( $slug ) || ! is_string( $slug ) ) {
 		return '';
 	}
 
-	$slug     = $attributes['slug'];
 	$registry = WP_Block_Patterns_Registry::get_instance();
 
 	if ( ! $registry->is_registered( $slug ) ) {
 		return '';
 	}
 
-	if ( isset( $seen_refs[ $attributes['slug'] ] ) ) {
+	if ( isset( $seen_refs[ $slug ] ) ) {
 		// WP_DEBUG_DISPLAY must only be honored when WP_DEBUG. This precedent
 		// is set in `wp_debug_mode()`.
 		$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
@@ -58,14 +58,14 @@ function render_block_core_pattern( $attributes ) {
 	$pattern = $registry->get_registered( $slug );
 	$content = $pattern['content'];
 
-	$seen_refs[ $attributes['slug'] ] = true;
+	$seen_refs[ $slug ] = true;
 
 	$content = do_blocks( $content );
 
 	global $wp_embed;
 	$content = $wp_embed->autoembed( $content );
 
-	unset( $seen_refs[ $attributes['slug'] ] );
+	unset( $seen_refs[ $slug ] );
 	return $content;
 }
 

package/src/playlist/context.js

@@ -6,4 +6,5 @@ import { createContext } from '@wordpress/element';
 export const PlaylistContext = createContext( {
 	currentTrackClientId: null,
 	setCurrentTrackClientId: () => {},
+	addTracks: undefined,
 } );

package/src/playlist/edit.js

@@ -16,7 +16,6 @@ import {
 	useInnerBlocksProps,
 	BlockControls,
 	InspectorControls,
-	InnerBlocks,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
@@ -32,6 +31,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { __, _x } from '@wordpress/i18n';
 import { playlist as icon } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
+import { createBlobURL } from '@wordpress/blob';
 
 /**
  * Internal dependencies
@@ -43,7 +43,10 @@ import { PlaylistContext } from './context';
 import { getTrackAttributes } from './utils';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
+const AUDIO_FILE_EXTENSION =
+	/\.(aac|aif|aiff|flac|m4a|m4b|mp3|oga|ogg|opus|wav|weba)$/i;
 const DEFAULT_WAVEFORM_STYLE = 'bars';
+const FILE_LIST_OBJECT_NAME = '[object FileList]';
 const WAVEFORM_STYLE_OPTIONS = [
 	{ label: _x( 'Bars', 'waveform style option' ), value: 'bars' },
 	{ label: _x( 'Mirror', 'waveform style option' ), value: 'mirror' },
@@ -53,6 +56,23 @@ const WAVEFORM_STYLE_OPTIONS = [
 	{ label: _x( 'Seekbar', 'waveform style option' ), value: 'seekbar' },
 ];
 
+function isFile( value ) {
+	return (
+		Object.prototype.toString.call( value ) === '[object File]' ||
+		( typeof File !== 'undefined' && value instanceof File )
+	);
+}
+
+function isAudioFile( file ) {
+	return file.type
+		? file.type.startsWith( 'audio/' )
+		: AUDIO_FILE_EXTENSION.test( file.name );
+}
+
+function getTrackIdentifier( track ) {
+	return track.id ?? track.src ?? track.blob;
+}
+
 const PlaylistEdit = ( {
 	attributes,
 	setAttributes,
@@ -77,7 +97,7 @@ const PlaylistEdit = ( {
 
 	const blockProps = useBlockProps();
 	const waveformPanelId = `${ clientId }-waveform`;
-	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+	const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
@@ -103,9 +123,12 @@ const PlaylistEdit = ( {
 	const waveformBackgroundGradientValue = waveformBackgroundGradient;
 	let waveformColorGradientChange;
 	let waveformBackgroundColorGradientChange;
-	function onUploadError( message ) {
-		createErrorNotice( message, { type: 'snackbar' } );
-	}
+	const onUploadError = useCallback(
+		( message ) => {
+			createErrorNotice( message, { type: 'snackbar' } );
+		},
+		[ createErrorNotice ]
+	);
 	const [ currentTrackClientId, setCurrentTrackClientId ] = useState( null );
 
 	const { innerBlockTracks } = useSelect(
@@ -152,31 +175,112 @@ const PlaylistEdit = ( {
 		}
 	}, [ currentTrackClientId, setCurrentTrackClientId, validTracks ] );
 
-	const playlistContext = useMemo(
-		() => ( { currentTrackClientId, setCurrentTrackClientId } ),
-		[ currentTrackClientId, setCurrentTrackClientId ]
-	);
-
-	const onSelectTracks = useCallback(
+	const createTrackBlocks = useCallback(
 		( media ) => {
 			if ( ! media ) {
-				return;
+				return [];
 			}
 
-			if ( ! Array.isArray( media ) ) {
-				media = [ media ];
+			let mediaItems = [ media ];
+			if (
+				Object.prototype.toString.call( media ) ===
+				FILE_LIST_OBJECT_NAME
+			) {
+				mediaItems = Array.from( media );
+			} else if ( Array.isArray( media ) ) {
+				mediaItems = media;
 			}
+			let hasInvalidFile = false;
+
+			const blocks = mediaItems
+				.map( ( mediaItem ) => {
+					if ( isFile( mediaItem ) ) {
+						if ( ! isAudioFile( mediaItem ) ) {
+							hasInvalidFile = true;
+							return null;
+						}
 
-			const trackList = media.map( getTrackAttributes );
+						return createBlock( 'core/playlist-track', {
+							blob: createBlobURL( mediaItem ),
+							title: mediaItem.name,
+						} );
+					}
+
+					const track = getTrackAttributes( mediaItem );
+
+					return track.src
+						? createBlock( 'core/playlist-track', track )
+						: null;
+				} )
+				.filter( Boolean );
+
+			if ( hasInvalidFile ) {
+				onUploadError(
+					__( 'Only audio files can be added to a playlist.' )
+				);
+			}
+
+			return blocks;
+		},
+		[ onUploadError ]
+	);
+
+	const onSelectTracks = useCallback(
+		( media ) => {
+			const newBlocks = createTrackBlocks( media );
+			if ( newBlocks.length === 0 ) {
+				return;
+			}
 
-			const newBlocks = trackList.map( ( track ) =>
-				createBlock( 'core/playlist-track', track )
-			);
 			setCurrentTrackClientId( newBlocks[ 0 ]?.clientId ?? null );
 			// Replace the inner blocks with the new tracks.
 			replaceInnerBlocks( clientId, newBlocks );
 		},
-		[ replaceInnerBlocks, clientId, setCurrentTrackClientId ]
+		[
+			clientId,
+			createTrackBlocks,
+			replaceInnerBlocks,
+			setCurrentTrackClientId,
+		]
+	);
+
+	const onAddTracks = useCallback(
+		( media ) => {
+			const existingIds = new Set(
+				validTracks
+					.map( ( block ) => getTrackIdentifier( block.attributes ) )
+					.filter( Boolean )
+			);
+			const newBlocks = createTrackBlocks( media ).filter(
+				( block ) =>
+					! existingIds.has( getTrackIdentifier( block.attributes ) )
+			);
+			if ( newBlocks.length === 0 ) {
+				return;
+			}
+
+			const nextBlocks = [ ...validTracks, ...newBlocks ];
+			setCurrentTrackClientId( newBlocks[ 0 ].clientId );
+			replaceInnerBlocks( clientId, nextBlocks );
+			selectBlock( newBlocks[ 0 ].clientId );
+		},
+		[
+			clientId,
+			createTrackBlocks,
+			replaceInnerBlocks,
+			selectBlock,
+			setCurrentTrackClientId,
+			validTracks,
+		]
+	);
+
+	const playlistContext = useMemo(
+		() => ( {
+			currentTrackClientId,
+			setCurrentTrackClientId,
+			addTracks: onAddTracks,
+		} ),
+		[ currentTrackClientId, onAddTracks, setCurrentTrackClientId ]
 	);
 
 	// Get current track data by finding the track with matching client ID.
@@ -305,14 +409,6 @@ const PlaylistEdit = ( {
 		} );
 	}
 
-	const hasSelectedChild = useSelect(
-		( select ) =>
-			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
-		[ clientId ]
-	);
-
-	const hasAnySelected = isSelected || hasSelectedChild;
-
 	const colorSettings = [];
 	if ( hasColors || hasGradients ) {
 		colorSettings.push(
@@ -357,7 +453,7 @@ const PlaylistEdit = ( {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		__experimentalAppenderTagName: 'li',
-		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
+		renderAppender: false,
 	} );
 
 	if ( tracks.length === 0 ) {
@@ -377,6 +473,7 @@ const PlaylistEdit = ( {
 					onSelect={ onSelectTracks }
 					accept="audio/*"
 					multiple
+					handleUpload={ false }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					onError={ onUploadError }
 				/>
@@ -388,13 +485,11 @@ const PlaylistEdit = ( {
 		<>
 			<BlockControls group="other">
 				<MediaReplaceFlow
-					name={ __( 'Edit' ) }
-					onSelect={ onSelectTracks }
+					name={ __( 'Add' ) }
+					onSelect={ onAddTracks }
 					accept="audio/*"
 					multiple
-					mediaIds={ tracks
-						.filter( ( track ) => track.id )
-						.map( ( track ) => track.id ) }
+					handleUpload={ false }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					onError={ onUploadError }
 				/>
@@ -585,6 +680,15 @@ const PlaylistEdit = ( {
 				</ToolsPanel>
 			</InspectorControls>
 			<figure { ...blockProps }>
+				<MediaPlaceholder
+					onSelect={ onAddTracks }
+					accept="audio/*"
+					multiple
+					handleUpload={ false }
+					disableMediaButtons
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					onError={ onUploadError }
+				/>
 				<Disabled isDisabled={ ! isSelected }>
 					<WaveformPlayer
 						src={ currentTrackData?.src }
@@ -601,20 +705,20 @@ const PlaylistEdit = ( {
 						showPlayButtonArtwork={ showPlayButtonArtwork === true }
 					/>
 				</Disabled>
-				{ showTracklist && (
-					<ol
-						className={ clsx( 'wp-block-playlist__tracklist', {
-							'wp-block-playlist__tracklist-show-numbers':
-								showNumbers,
-							'wp-block-playlist__tracklist-length-is-hidden':
-								! showTrackLength,
-						} ) }
-					>
-						<PlaylistContext.Provider value={ playlistContext }>
-							{ innerBlocksProps.children }
-						</PlaylistContext.Provider>
-					</ol>
-				) }
+				<ol
+					className={ clsx( 'wp-block-playlist__tracklist', {
+						'wp-block-playlist__tracklist-is-hidden':
+							! showTracklist,
+						'wp-block-playlist__tracklist-show-numbers':
+							showNumbers,
+						'wp-block-playlist__tracklist-length-is-hidden':
+							! showTrackLength,
+					} ) }
+				>
+					<PlaylistContext.Provider value={ playlistContext }>
+						{ innerBlocksProps.children }
+					</PlaylistContext.Provider>
+				</ol>
 				<Caption
 					attributes={ attributes }
 					setAttributes={ setAttributes }

package/src/playlist/editor.scss

@@ -1,10 +1,3 @@
-.wp-block-playlist {
-	li.block-list-appender.block-list-appender {
-		position: initial;
-		margin-top: var(--wp--preset--spacing--30, 1em);
-	}
-}
-
 .wp-block-playlist__waveform-color-controls {
 	display: grid;
 	grid-column: 1 / -1;

package/src/playlist/index.php

@@ -8,7 +8,7 @@
 /**
  * Renders the `core/playlist` block on server.
  *
- * @since 6.9.0
+ * @since 7.1.0
  *
  * @param array    $attributes The block attributes.
  * @param string   $content    The block content.
@@ -37,13 +37,18 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 				$playlist_tracks[] = $track_id;
 
 				// Extract track metadata from block attributes.
-				$title      = isset( $track_attributes['title'] ) && ! empty( $track_attributes['title'] ) ? $track_attributes['title'] : __( 'Unknown title' );
-				$artist     = $track_attributes['artist'] ?? '';
-				$album      = $track_attributes['album'] ?? '';
-				$image      = $track_attributes['image'] ?? '';
-				$image_alt  = $track_attributes['imageAlt'] ?? '';
-				$url        = $track_attributes['src'] ?? '';
-				$aria_label = $title;
+				$track_title_attr = $track_attributes['title'] ?? null;
+				$track_artist     = $track_attributes['artist'] ?? null;
+				$track_album      = $track_attributes['album'] ?? null;
+				$track_image      = $track_attributes['image'] ?? null;
+				$track_src        = $track_attributes['src'] ?? null;
+				$title            = ! empty( $track_title_attr ) && is_string( $track_title_attr ) ? $track_title_attr : __( 'Unknown title' );
+				$artist           = is_string( $track_artist ) ? $track_artist : '';
+				$album            = is_string( $track_album ) ? $track_album : '';
+				$image            = is_string( $track_image ) ? $track_image : '';
+				$image_alt        = $track_attributes['imageAlt'] ?? '';
+				$url              = is_string( $track_src ) ? $track_src : '';
+				$aria_label       = $title;
 
 				if ( $title && $artist && $album ) {
 					$aria_label = sprintf(
@@ -197,7 +202,7 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 /**
  * Registers the `core/playlist` block on server.
  *
- * @since 6.9.0
+ * @since 7.1.0
  */
 function register_block_core_playlist() {
 	register_block_type_from_metadata(

package/src/playlist/style.scss

@@ -4,6 +4,9 @@
 $waveform-player-height: 100px;
 
 .wp-block-playlist {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	// Main waveform player container.
 	.wp-block-playlist__waveform-player {
 		width: 100%;