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

package/src/paragraph/use-enter.js

@@ -2,10 +2,8 @@
  * WordPress dependencies
  */
 import { useRef } from '@wordpress/element';
-import {
-	useRefEffect,
-	privateApis as composePrivateApis,
-} from '@wordpress/compose';
+import { useRefEffect } from '@wordpress/compose';
+import { privateApis as richTextPrivateApis } from '@wordpress/rich-text';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -21,7 +19,7 @@ import {
  */
 import { unlock } from '../lock-unlock';
 
-const { subscribeDelegatedListener } = unlock( composePrivateApis );
+const { subscribeOwnedListener } = unlock( richTextPrivateApis );
 
 export function useOnEnter( props ) {
 	const { batch } = useRegistry();
@@ -131,11 +129,6 @@ export function useOnEnter( props ) {
 
 		// Capture phase so we run before writing-flow's ancestor-bubble
 		// keydown handlers that gate on `event.defaultPrevented`.
-		return subscribeDelegatedListener(
-			element,
-			'keydown',
-			onKeyDown,
-			true
-		);
+		return subscribeOwnedListener( element, 'keydown', onKeyDown, true );
 	}, [] );
 }

package/src/playlist/README.md

@@ -1,8 +1,6 @@
 # Playlist
 
 <!-- START TOKEN(Autogenerated block API docs) -->
-<div class="callout callout-warning">This block is <strong>experimental</strong> and may change or be removed without notice.</div>
-
 Embed a simple playlist.
 
 - **Name:** `core/playlist`
@@ -26,9 +24,15 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 | `order` | `string` | `"asc"` | — |
 | `showTracklist` | `boolean` | `true` | — |
 | `showImages` | `boolean` | `true` | — |
+| `showPlayButtonArtwork` | `boolean` | `false` | — |
 | `showArtists` | `boolean` | `true` | — |
 | `showNumbers` | `boolean` | `true` | — |
 | `showTrackLength` | `boolean` | `true` | — |
+| `waveformStyle` | `string` | `"bars"` | [Enum](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#enum-validation): `bars`, `mirror`, `line`, `blocks`, `dots`, `seekbar` |
+| `waveformColor` | `string` | — | — |
+| `waveformGradient` | `string` | — | — |
+| `waveformBackgroundColor` | `string` | — | — |
+| `waveformBackgroundGradient` | `string` | — | — |
 | `caption` | `string` | — | — |
 
 ## Supports
@@ -44,6 +48,8 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`spacing`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#spacing):
   - `margin`: `true`
   - `padding`: `true`
+- [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
+  - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
 
 ## Context
 
@@ -52,28 +58,21 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 **Provides context:**
 
 - `showArtists` → attribute `showArtists`
-
-## Block Styles
-
-_Defined via the [`styles`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/) property in block.json._
-
-| Style Name | Label | Default |
-|------------|-------|---------|
-| `bars` | Bars | Yes |
-| `mirror` | Mirror | No |
-| `line` | Line | No |
-| `blocks` | Blocks | No |
-| `dots` | Dots | No |
-| `seekbar` | Seekbar | No |
+- `showImages` → attribute `showImages`
 
 ## Block Markup
 
 This is a [**hybrid block**](https://developer.wordpress.org/block-editor/getting-started/fundamentals/static-dynamic-rendering/). It saves static markup that the server may enhance during rendering.
 
 ```html
-<!-- wp:playlist {"type":"audio","order":"asc","showTracklist":true,"showImages":true,"showArtists":true,"showNumbers":true,"showTrackLength":true} -->
-<!-- Content... -->
-<!-- /wp:playlist -->
+<!-- wp:core/playlist {"caption":"Sample playlist"} -->
+<figure class="wp-block-playlist">
+	<ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers">
+		<!-- wp:core/playlist-track {"id":123,"src":"https://example.com/audio.mp3","album":"Example album","artist":"Example creator","image":"https://example.com/track-image.jpg","imageAlt":"Track image","length":"3:21","title":"Sample track"} /-->
+	</ol>
+	<figcaption class="wp-element-caption">Sample playlist</figcaption>
+</figure>
+<!-- /wp:core/playlist -->
 ```
 
 ## Source

package/src/playlist/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": true,
 	"name": "core/playlist",
 	"title": "Playlist",
 	"category": "media",
@@ -26,6 +25,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"showPlayButtonArtwork": {
+			"type": "boolean",
+			"default": false
+		},
 		"showArtists": {
 			"type": "boolean",
 			"default": true
@@ -38,12 +41,30 @@
 			"type": "boolean",
 			"default": true
 		},
+		"waveformStyle": {
+			"type": "string",
+			"enum": [ "bars", "mirror", "line", "blocks", "dots", "seekbar" ],
+			"default": "bars"
+		},
+		"waveformColor": {
+			"type": "string"
+		},
+		"waveformGradient": {
+			"type": "string"
+		},
+		"waveformBackgroundColor": {
+			"type": "string"
+		},
+		"waveformBackgroundGradient": {
+			"type": "string"
+		},
 		"caption": {
 			"type": "string"
 		}
 	},
 	"providesContext": {
-		"showArtists": "showArtists"
+		"showArtists": "showArtists",
+		"showImages": "showImages"
 	},
 	"supports": {
 		"anchor": true,
@@ -70,16 +91,14 @@
 		"spacing": {
 			"margin": true,
 			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
-	"styles": [
-		{ "name": "bars", "label": "Bars", "isDefault": true },
-		{ "name": "mirror", "label": "Mirror" },
-		{ "name": "line", "label": "Line" },
-		{ "name": "blocks", "label": "Blocks" },
-		{ "name": "dots", "label": "Dots" },
-		{ "name": "seekbar", "label": "Seekbar" }
-	],
 	"editorStyle": "wp-block-playlist-editor",
 	"style": "wp-block-playlist"
 }

package/src/playlist/edit.js

@@ -17,6 +17,8 @@ import {
 	BlockControls,
 	InspectorControls,
 	InnerBlocks,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
@@ -27,8 +29,8 @@ import {
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
-import { audio as icon } from '@wordpress/icons';
+import { __, _x } from '@wordpress/i18n';
+import { playlist as icon } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -41,6 +43,15 @@ import { PlaylistContext } from './context';
 import { getTrackAttributes } from './utils';
 
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
+const DEFAULT_WAVEFORM_STYLE = 'bars';
+const WAVEFORM_STYLE_OPTIONS = [
+	{ label: _x( 'Bars', 'waveform style option' ), value: 'bars' },
+	{ label: _x( 'Mirror', 'waveform style option' ), value: 'mirror' },
+	{ label: _x( 'Line', 'waveform style option' ), value: 'line' },
+	{ label: _x( 'Blocks', 'waveform style option' ), value: 'blocks' },
+	{ label: _x( 'Dots', 'waveform style option' ), value: 'dots' },
+	{ label: _x( 'Seekbar', 'waveform style option' ), value: 'seekbar' },
+];
 
 const PlaylistEdit = ( {
 	attributes,
@@ -54,17 +65,44 @@ const PlaylistEdit = ( {
 		showTracklist,
 		showNumbers,
 		showImages,
+		showPlayButtonArtwork,
 		showArtists,
 		showTrackLength,
+		waveformStyle = DEFAULT_WAVEFORM_STYLE,
+		waveformColor,
+		waveformGradient,
+		waveformBackgroundColor,
+		waveformBackgroundGradient,
 	} = attributes;
 
-	// Extract the waveform style from the block style variation class.
-	const waveformStyle =
-		attributes.className?.match( /is-style-([\w-]+)/ )?.[ 1 ] || 'bars';
 	const blockProps = useBlockProps();
+	const waveformPanelId = `${ clientId }-waveform`;
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const colors = useMemo(
+		() =>
+			colorGradientSettings.colors.flatMap(
+				( origin ) => origin?.colors ?? []
+			),
+		[ colorGradientSettings.colors ]
+	);
+	const gradients = useMemo(
+		() =>
+			colorGradientSettings.gradients.flatMap(
+				( origin ) => origin?.gradients ?? []
+			),
+		[ colorGradientSettings.gradients ]
+	);
+	const hasColors =
+		colors.length > 0 || ! colorGradientSettings.disableCustomColors;
+	const hasGradients =
+		gradients.length > 0 || ! colorGradientSettings.disableCustomGradients;
+	const waveformGradientValue = waveformGradient;
+	const waveformBackgroundGradientValue = waveformBackgroundGradient;
+	let waveformColorGradientChange;
+	let waveformBackgroundColorGradientChange;
 	function onUploadError( message ) {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
@@ -189,6 +227,84 @@ const PlaylistEdit = ( {
 		};
 	}
 
+	const onChangeWaveformStyle = useCallback(
+		( newWaveformStyle ) => {
+			setAttributes( {
+				waveformStyle:
+					newWaveformStyle === DEFAULT_WAVEFORM_STYLE
+						? undefined
+						: newWaveformStyle,
+			} );
+		},
+		[ setAttributes ]
+	);
+
+	function updateWaveformColor( colorValue ) {
+		const isSettingColor = colorValue !== undefined;
+		if ( ! isSettingColor && waveformColorGradientChange === 'gradient' ) {
+			waveformColorGradientChange = undefined;
+			return;
+		}
+
+		waveformColorGradientChange = 'color';
+
+		setAttributes( {
+			waveformColor: colorValue,
+			waveformGradient: undefined,
+		} );
+	}
+
+	function updateWaveformGradient( gradientValue ) {
+		const isSettingGradient = gradientValue !== undefined;
+		if ( ! isSettingGradient && waveformColorGradientChange === 'color' ) {
+			waveformColorGradientChange = undefined;
+			return;
+		}
+
+		waveformColorGradientChange = 'gradient';
+
+		setAttributes( {
+			waveformGradient: gradientValue,
+			waveformColor: undefined,
+		} );
+	}
+
+	function updateWaveformBackgroundColor( colorValue ) {
+		const isSettingColor = colorValue !== undefined;
+		if (
+			! isSettingColor &&
+			waveformBackgroundColorGradientChange === 'gradient'
+		) {
+			waveformBackgroundColorGradientChange = undefined;
+			return;
+		}
+
+		waveformBackgroundColorGradientChange = 'color';
+
+		setAttributes( {
+			waveformBackgroundColor: colorValue,
+			waveformBackgroundGradient: undefined,
+		} );
+	}
+
+	function updateWaveformBackgroundGradient( gradientValue ) {
+		const isSettingGradient = gradientValue !== undefined;
+		if (
+			! isSettingGradient &&
+			waveformBackgroundColorGradientChange === 'color'
+		) {
+			waveformBackgroundColorGradientChange = undefined;
+			return;
+		}
+
+		waveformBackgroundColorGradientChange = 'gradient';
+
+		setAttributes( {
+			waveformBackgroundGradient: gradientValue,
+			waveformBackgroundColor: undefined,
+		} );
+	}
+
 	const hasSelectedChild = useSelect(
 		( select ) =>
 			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
@@ -197,6 +313,48 @@ const PlaylistEdit = ( {
 
 	const hasAnySelected = isSelected || hasSelectedChild;
 
+	const colorSettings = [];
+	if ( hasColors || hasGradients ) {
+		colorSettings.push(
+			{
+				colorValue: hasColors ? waveformColor : undefined,
+				gradientValue: hasGradients ? waveformGradientValue : undefined,
+				label: __( 'Waveform & Play button' ),
+				onColorChange: hasColors ? updateWaveformColor : undefined,
+				onGradientChange: hasGradients
+					? updateWaveformGradient
+					: undefined,
+				isShownByDefault: true,
+				clearable: true,
+				enableAlpha: true,
+				resetAllFilter: () => ( {
+					waveformColor: undefined,
+					waveformGradient: undefined,
+				} ),
+			},
+			{
+				colorValue: hasColors ? waveformBackgroundColor : undefined,
+				gradientValue: hasGradients
+					? waveformBackgroundGradientValue
+					: undefined,
+				label: __( 'Waveform background' ),
+				onColorChange: hasColors
+					? updateWaveformBackgroundColor
+					: undefined,
+				onGradientChange: hasGradients
+					? updateWaveformBackgroundGradient
+					: undefined,
+				isShownByDefault: true,
+				clearable: true,
+				enableAlpha: true,
+				resetAllFilter: () => ( {
+					waveformBackgroundColor: undefined,
+					waveformBackgroundGradient: undefined,
+				} ),
+			}
+		);
+	}
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		__experimentalAppenderTagName: 'li',
 		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
@@ -251,13 +409,14 @@ const PlaylistEdit = ( {
 							showNumbers: true,
 							showTrackLength: true,
 							showImages: true,
+							showPlayButtonArtwork: false,
 							order: 'asc',
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
-						label={ __( 'Show Tracklist' ) }
+						label={ __( 'Show tracklist' ) }
 						isShownByDefault
 						hasValue={ () => showTracklist !== true }
 						onDeselect={ () =>
@@ -265,7 +424,7 @@ const PlaylistEdit = ( {
 						}
 					>
 						<ToggleControl
-							label={ __( 'Show Tracklist' ) }
+							label={ __( 'Show tracklist' ) }
 							onChange={ toggleAttribute( 'showTracklist' ) }
 							checked={ showTracklist }
 						/>
@@ -273,7 +432,7 @@ const PlaylistEdit = ( {
 					{ showTracklist && (
 						<>
 							<ToolsPanelItem
-								label={ __( 'Show artist name in Tracklist' ) }
+								label={ __( 'Show artist name in tracklist' ) }
 								isShownByDefault
 								hasValue={ () => showArtists !== true }
 								onDeselect={ () =>
@@ -282,7 +441,7 @@ const PlaylistEdit = ( {
 							>
 								<ToggleControl
 									label={ __(
-										'Show artist name in Tracklist'
+										'Show artist name in tracklist'
 									) }
 									onChange={ toggleAttribute(
 										'showArtists'
@@ -291,7 +450,9 @@ const PlaylistEdit = ( {
 								/>
 							</ToolsPanelItem>
 							<ToolsPanelItem
-								label={ __( 'Show number in Tracklist' ) }
+								label={ __(
+									'Show track numbers in tracklist'
+								) }
 								isShownByDefault
 								hasValue={ () => showNumbers !== true }
 								onDeselect={ () =>
@@ -299,7 +460,9 @@ const PlaylistEdit = ( {
 								}
 							>
 								<ToggleControl
-									label={ __( 'Show number in Tracklist' ) }
+									label={ __(
+										'Show track numbers in tracklist'
+									) }
 									onChange={ toggleAttribute(
 										'showNumbers'
 									) }
@@ -307,7 +470,9 @@ const PlaylistEdit = ( {
 								/>
 							</ToolsPanelItem>
 							<ToolsPanelItem
-								label={ __( 'Show track length in Tracklist' ) }
+								label={ __(
+									'Show track duration in tracklist'
+								) }
 								isShownByDefault
 								hasValue={ () => showTrackLength !== true }
 								onDeselect={ () =>
@@ -316,7 +481,7 @@ const PlaylistEdit = ( {
 							>
 								<ToggleControl
 									label={ __(
-										'Show track length in Tracklist'
+										'Show track duration in tracklist'
 									) }
 									onChange={ toggleAttribute(
 										'showTrackLength'
@@ -327,7 +492,7 @@ const PlaylistEdit = ( {
 						</>
 					) }
 					<ToolsPanelItem
-						label={ __( 'Show images' ) }
+						label={ __( 'Show tracklist images' ) }
 						isShownByDefault
 						hasValue={ () => showImages !== true }
 						onDeselect={ () =>
@@ -335,11 +500,27 @@ const PlaylistEdit = ( {
 						}
 					>
 						<ToggleControl
-							label={ __( 'Show images' ) }
+							label={ __( 'Show tracklist images' ) }
 							onChange={ toggleAttribute( 'showImages' ) }
 							checked={ showImages }
 						/>
 					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Show track image on play button' ) }
+						isShownByDefault
+						hasValue={ () => showPlayButtonArtwork === true }
+						onDeselect={ () =>
+							setAttributes( { showPlayButtonArtwork: false } )
+						}
+					>
+						<ToggleControl
+							label={ __( 'Show track image on play button' ) }
+							onChange={ toggleAttribute(
+								'showPlayButtonArtwork'
+							) }
+							checked={ showPlayButtonArtwork === true }
+						/>
+					</ToolsPanelItem>
 					<ToolsPanelItem
 						label={ __( 'Order' ) }
 						isShownByDefault
@@ -358,6 +539,51 @@ const PlaylistEdit = ( {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
+			<InspectorControls group="styles">
+				<ToolsPanel
+					label={ __( 'Waveform' ) }
+					resetAll={ () => {
+						setAttributes( {
+							waveformStyle: undefined,
+							waveformColor: undefined,
+							waveformGradient: undefined,
+							waveformBackgroundColor: undefined,
+							waveformBackgroundGradient: undefined,
+						} );
+					} }
+					panelId={ waveformPanelId }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					{ colorSettings.length > 0 && (
+						<div className="wp-block-playlist__waveform-color-controls">
+							<ColorGradientSettingsDropdown
+								__experimentalIsRenderedInSidebar
+								settings={ colorSettings }
+								panelId={ waveformPanelId }
+								{ ...colorGradientSettings }
+							/>
+						</div>
+					) }
+					<ToolsPanelItem
+						label={ __( 'Shape' ) }
+						isShownByDefault
+						hasValue={ () =>
+							waveformStyle !== DEFAULT_WAVEFORM_STYLE
+						}
+						onDeselect={ () =>
+							onChangeWaveformStyle( DEFAULT_WAVEFORM_STYLE )
+						}
+						panelId={ waveformPanelId }
+					>
+						<SelectControl
+							label={ __( 'Shape' ) }
+							value={ waveformStyle }
+							options={ WAVEFORM_STYLE_OPTIONS }
+							onChange={ onChangeWaveformStyle }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			</InspectorControls>
 			<figure { ...blockProps }>
 				<Disabled isDisabled={ ! isSelected }>
 					<WaveformPlayer
@@ -365,8 +591,14 @@ const PlaylistEdit = ( {
 						title={ currentTrackData?.title }
 						artist={ currentTrackData?.artist }
 						image={ currentTrackData?.image }
+						imageAlt={ currentTrackData?.imageAlt }
 						waveformStyle={ waveformStyle }
+						color={ waveformColor }
+						gradient={ waveformGradientValue }
+						backgroundColor={ waveformBackgroundColor }
+						backgroundGradient={ waveformBackgroundGradientValue }
 						onEnded={ onTrackEnded }
+						showPlayButtonArtwork={ showPlayButtonArtwork === true }
 					/>
 				</Disabled>
 				{ showTracklist && (

package/src/playlist/editor.scss

@@ -4,3 +4,9 @@
 		margin-top: var(--wp--preset--spacing--30, 1em);
 	}
 }
+
+.wp-block-playlist__waveform-color-controls {
+	display: grid;
+	grid-column: 1 / -1;
+	row-gap: 0;
+}

package/src/playlist/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { audio as icon } from '@wordpress/icons';
+import { playlist as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies