@wordpress/block-library 10.1.0 → 10.2.0

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`
@@ -22,14 +20,19 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 
 | Attribute | [Type](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#type-validation) | [Default](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#default-value) | Description |
 |-----------|------|---------|-------------|
-| `currentTrack` | `string` | — | — |
 | `type` | `string` | `"audio"` | — |
 | `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
@@ -45,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
 
@@ -53,29 +58,21 @@ _Defined via the [`usesContext` and `providesContext`](https://developer.wordpre
 **Provides context:**
 
 - `showArtists` → attribute `showArtists`
-- `currentTrack` → attribute `currentTrack`
-
-## 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",
@@ -10,9 +9,6 @@
 	"textdomain": "default",
 	"allowedBlocks": [ "core/playlist-track" ],
 	"attributes": {
-		"currentTrack": {
-			"type": "string"
-		},
 		"type": {
 			"type": "string",
 			"default": "audio"
@@ -29,6 +25,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"showPlayButtonArtwork": {
+			"type": "boolean",
+			"default": false
+		},
 		"showArtists": {
 			"type": "boolean",
 			"default": true
@@ -41,13 +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",
-		"currentTrack": "currentTrack"
+		"showImages": "showImages"
 	},
 	"supports": {
 		"anchor": true,
@@ -62,12 +79,10 @@
 		},
 		"__experimentalBorder": {
 			"color": true,
-			"radius": true,
 			"style": true,
 			"width": true,
 			"__experimentalDefaultControls": {
 				"color": true,
-				"radius": true,
 				"style": true,
 				"width": true
 			}
@@ -76,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/context.js

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const PlaylistContext = createContext( {
+	currentTrackClientId: null,
+	setCurrentTrackClientId: () => {},
+} );