Playlist: Add repeat toggle

packages/block-library/src/playlist/block.json

@@ -37,6 +37,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"repeat": {
+			"type": "boolean",
+			"default": false
+		},
 		"caption": {
 			"type": "string"
 		}

packages/block-library/src/playlist/edit.js

@@ -88,6 +88,7 @@ const PlaylistEdit = ( {
 		showImages,
 		showArtists,
 		currentTrack,
+		repeat,
 	} = attributes;
 	const blockProps = useBlockProps();
 	const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =
@@ -201,16 +202,17 @@ const PlaylistEdit = ( {
 		( track ) => track.uniqueId === currentTrack
 	);
 
-	// Handle track end - advance to next track or loop to first.
+	// Handle track end - advance to next track, or loop to first if repeat is enabled.
 	const onTrackEnded = useCallback( () => {
 		const currentIndex = tracks.findIndex(
 			( track ) => track.uniqueId === currentTrack
 		);
-		const nextTrack = tracks[ currentIndex + 1 ] || tracks[ 0 ];
+		const nextTrack =
+			tracks[ currentIndex + 1 ] || ( repeat ? tracks[ 0 ] : null );
 		if ( nextTrack?.uniqueId ) {
 			setAttributes( { currentTrack: nextTrack.uniqueId } );
 		}
-	}, [ currentTrack, tracks, setAttributes ] );
+	}, [ currentTrack, tracks, repeat, setAttributes ] );
 
 	const onChangeOrder = useCallback(
 		( trackOrder ) => {
@@ -310,6 +312,7 @@ const PlaylistEdit = ( {
 							showNumbers: true,
 							showImages: true,
 							order: 'asc',
+							repeat: false,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
@@ -397,6 +400,20 @@ const PlaylistEdit = ( {
 							onChange={ ( value ) => onChangeOrder( value ) }
 						/>
 					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Repeat' ) }
+						isShownByDefault
+						hasValue={ () => repeat !== false }
+						onDeselect={ () =>
+							setAttributes( { repeat: false } )
+						}
+					>
+						<ToggleControl
+							label={ __( 'Repeat' ) }
+							onChange={ toggleAttribute( 'repeat' ) }
+							checked={ repeat }
+						/>
+					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
 			<figure { ...blockProps }>

packages/block-library/src/playlist/index.php

@@ -125,6 +125,7 @@ function render_block_core_playlist( $attributes, $content, $block ) {
 				'playlistId' => $playlist_id,
 				'currentId'  => $current_unique_id,
 				'tracks'     => $playlist_tracks,
+				'repeat'     => ! empty( $attributes['repeat'] ),
 			)
 		)
 	);

packages/block-library/src/playlist/view.js

@@ -110,7 +110,9 @@ function initPlayer( ref, track, shouldAutoPlay, context ) {
 			const currentIndex = context.tracks.findIndex(
 				( uniqueId ) => uniqueId === context.currentId
 			);
-			const nextTrack = context.tracks[ currentIndex + 1 ];
+			const nextTrack =
+				context.tracks[ currentIndex + 1 ] ||
+				( context.repeat ? context.tracks[ 0 ] : null );
 			if ( nextTrack ) {
 				context.currentId = nextTrack;
 			}