Make the Playlist blocks stable

docs/reference-guides/core-blocks/README.md

@@ -633,7 +633,6 @@ Show a block pattern.
 Embed a simple playlist.
 
 -	**Name:** [core/playlist](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/core-block-playlist/)
--	**Experimental:** true
 -	**Category:** [media](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/)
 -	**Allowed Blocks:** core/playlist-track
 -	**Supports:** align, anchor, color (background, gradients, link, text), interactivity, spacing (margin, padding), typography (fontSize)
@@ -644,7 +643,6 @@ Embed a simple playlist.
 Playlist track.
 
 -	**Name:** [core/playlist-track](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/core-block-playlist-track/)
--	**Experimental:** true
 -	**Category:** [media](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/core-blocks-media/)
 -	**Parent:** core/playlist
 -	**Supports:** interactivity (clientNavigation), ~~html~~, ~~reusable~~

packages/block-library/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Enhancements
 
+-   Make the Playlist and Playlist Track blocks stable ([#80203](https://github.com/WordPress/gutenberg/pull/80203)).
 -   Use the emphasis font-weight token for UI emphasis ([#80093](https://github.com/WordPress/gutenberg/pull/80093)).
 -   Widen React peer dependency ranges to `^18 || ^19` to support both React 18 and React 19 environments ([#80024](https://github.com/WordPress/gutenberg/pull/80024)).
 

packages/block-library/src/index.js

@@ -197,6 +197,8 @@ const getAllBlocks = () => {
 		pageList,
 		pageListItem,
 		pattern,
+		playlist,
+		playlistTrack,
 		preformatted,
 		pullquote,
 		reusableBlock,
@@ -285,8 +287,6 @@ const getAllBlocks = () => {
 		blocks.push( tabs );
 		blocks.push( tabPanel );
 		blocks.push( tabPanels );
-		blocks.push( playlist );
-		blocks.push( playlistTrack );
 	}
 
 	blocks.push( classic );

packages/block-library/src/playlist-track/README.md

@@ -1,8 +1,6 @@
 # Playlist track
 
 <!-- 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>
-
 Playlist track.
 
 - **Name:** `core/playlist-track`

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

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": true,
 	"name": "core/playlist-track",
 	"title": "Playlist track",
 	"category": "media",

packages/block-library/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`

packages/block-library/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",

test/integration/fixtures/blocks/core__playlist-track.html

@@ -0,0 +1 @@
+<!-- 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"} /-->

test/integration/fixtures/blocks/core__playlist-track.json

@@ -0,0 +1,18 @@
+[
+	{
+		"name": "core/playlist-track",
+		"isValid": true,
+		"attributes": {
+			"id": 123,
+			"src": "https://example.com/audio.mp3",
+			"type": "audio",
+			"album": "Example album",
+			"artist": "Example creator",
+			"image": "https://example.com/track-image.jpg",
+			"imageAlt": "Track image",
+			"length": "3:21",
+			"title": "Sample track"
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__playlist-track.parsed.json

@@ -0,0 +1,18 @@
+[
+	{
+		"blockName": "core/playlist-track",
+		"attrs": {
+			"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"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

test/integration/fixtures/blocks/core__playlist-track.serialized.html

@@ -0,0 +1 @@
+<!-- wp: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"} /-->

test/integration/fixtures/blocks/core__playlist.html

@@ -0,0 +1,8 @@
+<!-- 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 -->

test/integration/fixtures/blocks/core__playlist.json

@@ -0,0 +1,35 @@
+[
+	{
+		"name": "core/playlist",
+		"isValid": true,
+		"attributes": {
+			"type": "audio",
+			"order": "asc",
+			"showTracklist": true,
+			"showImages": true,
+			"showArtists": true,
+			"showNumbers": true,
+			"showTrackLength": true,
+			"waveformStyle": "bars",
+			"caption": "Sample playlist"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/playlist-track",
+				"isValid": true,
+				"attributes": {
+					"id": 123,
+					"src": "https://example.com/audio.mp3",
+					"type": "audio",
+					"album": "Example album",
+					"artist": "Example creator",
+					"image": "https://example.com/track-image.jpg",
+					"imageAlt": "Track image",
+					"length": "3:21",
+					"title": "Sample track"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]

test/integration/fixtures/blocks/core__playlist.parsed.json

@@ -0,0 +1,32 @@
+[
+	{
+		"blockName": "core/playlist",
+		"attrs": {
+			"caption": "Sample playlist"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/playlist-track",
+				"attrs": {
+					"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"
+				},
+				"innerBlocks": [],
+				"innerHTML": "",
+				"innerContent": []
+			}
+		],
+		"innerHTML": "\n<figure class=\"wp-block-playlist\">\n\t<ol class=\"wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers\">\n\t\t\n\t</ol>\n\t<figcaption class=\"wp-element-caption\">Sample playlist</figcaption>\n</figure>\n",
+		"innerContent": [
+			"\n<figure class=\"wp-block-playlist\">\n\t<ol class=\"wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers\">\n\t\t",
+			null,
+			"\n\t</ol>\n\t<figcaption class=\"wp-element-caption\">Sample playlist</figcaption>\n</figure>\n"
+		]
+	}
+]

test/integration/fixtures/blocks/core__playlist.serialized.html

@@ -0,0 +1,3 @@
+<!-- wp:playlist {"caption":"Sample playlist"} -->
+<figure class="wp-block-playlist"><ol class="wp-block-playlist__tracklist wp-block-playlist__tracklist-show-numbers"><!-- wp: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:playlist -->