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

package/build-module/playlist/view.mjs

@@ -1,7 +1,13 @@
 // packages/block-library/src/playlist/view.js
 import { store, getContext, getElement } from "@wordpress/interactivity";
-import { initWaveformPlayer, logPlayError } from "../utils/waveform-utils.mjs";
+import {
+  initWaveformPlayer,
+  logPlayError,
+  setupPlayButtonArtwork,
+  updateSeekControlLabel
+} from "../utils/waveform-utils.mjs";
 var playerState = /* @__PURE__ */ new WeakMap();
+var playlistPlayerState = /* @__PURE__ */ new Map();
 var { state } = store(
   "core/playlist",
   {
@@ -10,11 +16,32 @@ var { state } = store(
       get isCurrentTrack() {
         const { currentId, trackId } = getContext();
         return currentId === trackId;
+      },
+      get isCurrentTrackPlaying() {
+        const { currentId, isPlaying, trackId } = getContext();
+        return currentId === trackId && !!isPlaying;
+      },
+      get trackButtonActionLabel() {
+        const { labelPauseTrack, labelSelectTrack } = getContext();
+        return state.isCurrentTrackPlaying ? labelPauseTrack : labelSelectTrack;
       }
     },
     actions: {
       changeTrack() {
         const context = getContext();
+        if (context.currentId === context.trackId) {
+          const player = playlistPlayerState.get(
+            context.playlistId
+          )?.instance;
+          if (player?.isPlaying) {
+            context.isPlaying = false;
+            player.pause();
+          } else {
+            player?.play()?.catch(logPlayError);
+          }
+          return;
+        }
+        context.isPlaying = false;
         context.currentId = context.trackId;
       }
     },
@@ -42,29 +69,60 @@ var { state } = store(
 );
 function initPlayer(ref, track, shouldAutoPlay, context) {
   const existing = playerState.get(ref);
+  const showPlayButtonArtwork = context.showPlayButtonArtwork === true;
+  const playerArtwork = showPlayButtonArtwork ? "" : track.image;
   if (existing?.instance) {
-    existing.instance.loadTrack(track.url, track.title, track.artist, {
-      artwork: track.image
-    }).then(() => {
-      existing.url = track.url;
-      if (shouldAutoPlay) {
-        existing.instance.play()?.catch(logPlayError);
-      }
-    }).catch(logPlayError);
-    return;
+    const shouldRecreatePlayer = !!existing.instance.artworkEl !== !!playerArtwork;
+    if (shouldRecreatePlayer) {
+      existing.destroy?.();
+      playerState.delete(ref);
+    } else {
+      playlistPlayerState.set(context.playlistId, existing);
+      existing.instance.loadTrack(track.url, track.title, track.artist, {
+        artwork: playerArtwork,
+        artworkAlt: playerArtwork ? track.imageAlt : ""
+      }).then(() => {
+        existing.url = track.url;
+        if (existing.instance.artworkEl) {
+          existing.instance.artworkEl.alt = track.imageAlt || "";
+        }
+        updateSeekControlLabel(
+          existing.instance,
+          track.title || ref.dataset.labelSeek
+        );
+        if (showPlayButtonArtwork) {
+          setupPlayButtonArtwork(
+            existing.container,
+            track.image
+          );
+        }
+        if (shouldAutoPlay) {
+          existing.instance.play()?.catch(logPlayError);
+        }
+      }).catch(logPlayError);
+      return;
+    }
   }
   const labels = {
     play: ref.dataset.labelPlay,
-    pause: ref.dataset.labelPause
+    pause: ref.dataset.labelPause,
+    seek: ref.dataset.labelSeek,
+    seekValueText: ref.dataset.labelSeekValue
   };
   const player = initWaveformPlayer(ref, {
     src: track.url,
     title: track.title,
     artist: track.artist,
     image: track.image,
+    imageAlt: track.imageAlt,
+    waveformColor: ref.dataset.waveformPlayerColor,
+    waveformGradient: ref.dataset.waveformPlayerGradient,
+    backgroundColor: ref.dataset.waveformPlayerBackgroundColor,
+    backgroundGradient: ref.dataset.waveformPlayerBackgroundGradient,
     autoPlay: shouldAutoPlay,
     labels,
     waveformStyle: context.waveformStyle,
+    showPlayButtonArtwork,
     onEnded: () => {
       const currentIndex = context.tracks.findIndex(
         (trackId) => trackId === context.currentId
@@ -75,10 +133,27 @@ function initPlayer(ref, track, shouldAutoPlay, context) {
       }
     }
   });
-  playerState.set(ref, {
+  const setIsPlaying = (isPlaying) => {
+    context.isPlaying = isPlaying;
+  };
+  const onPlay = () => setIsPlaying(true);
+  const onPause = () => setIsPlaying(false);
+  player.container.addEventListener("waveformplayer:play", onPlay);
+  player.container.addEventListener("waveformplayer:pause", onPause);
+  player.container.addEventListener("waveformplayer:ended", onPause);
+  const destroy = () => {
+    player.container.removeEventListener("waveformplayer:play", onPlay);
+    player.container.removeEventListener("waveformplayer:pause", onPause);
+    player.container.removeEventListener("waveformplayer:ended", onPause);
+    player.destroy();
+  };
+  const nextState = {
     url: track.url,
     instance: player.instance,
-    destroy: player.destroy
-  });
+    container: player.container,
+    destroy
+  };
+  playerState.set(ref, nextState);
+  playlistPlayerState.set(context.playlistId, nextState);
 }
 //# sourceMappingURL=view.mjs.map

package/build-module/playlist/view.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/playlist/view.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store, getContext, getElement } from '@wordpress/interactivity';\n\n/**\n * Internal dependencies\n */\nimport { initWaveformPlayer, logPlayError } from '../utils/waveform-utils';\n\n/**\n * Store player state for each element.\n */\nconst playerState = new WeakMap();\n\nconst { state } = store(\n\t'core/playlist',\n\t{\n\t\tstate: {\n\t\t\tplaylists: {},\n\t\t\tget isCurrentTrack() {\n\t\t\t\tconst { currentId, trackId } = getContext();\n\t\t\t\treturn currentId === trackId;\n\t\t\t},\n\t\t},\n\t\tactions: {\n\t\t\tchangeTrack() {\n\t\t\t\tconst context = getContext();\n\t\t\t\tcontext.currentId = context.trackId;\n\t\t\t},\n\t\t},\n\t\tcallbacks: {\n\t\t\tinitWaveformPlayer() {\n\t\t\t\tconst context = getContext();\n\t\t\t\tconst { ref } = getElement();\n\n\t\t\t\tif ( ! context.currentId || ! ref ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst track =\n\t\t\t\t\tstate.playlists[ context.playlistId ]?.tracks[\n\t\t\t\t\t\tcontext.currentId\n\t\t\t\t\t];\n\t\t\t\tif ( ! track?.url ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst existing = playerState.get( ref );\n\n\t\t\t\t// Skip if we already initialized with this exact URL.\n\t\t\t\tif ( existing?.url === track.url ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Autoplay if we're switching from a different track (user action),\n\t\t\t\t// but not on initial page load (when existing has no URL).\n\t\t\t\tconst shouldAutoPlay = !! existing?.url;\n\n\t\t\t\tinitPlayer( ref, track, shouldAutoPlay, context );\n\t\t\t},\n\t\t},\n\t},\n\t{ lock: true }\n);\n\n/**\n * Initialize the waveform player for a given element.\n *\n * @param {Element} ref            - The container element.\n * @param {Object}  track          - The track data.\n * @param {boolean} shouldAutoPlay - Whether to auto-play after initialization.\n * @param {Object}  context        - The Interactivity API context.\n */\nfunction initPlayer( ref, track, shouldAutoPlay, context ) {\n\tconst existing = playerState.get( ref );\n\n\t// If a player already exists, load the new track without recreating.\n\tif ( existing?.instance ) {\n\t\texisting.instance\n\t\t\t.loadTrack( track.url, track.title, track.artist, {\n\t\t\t\tartwork: track.image,\n\t\t\t} )\n\t\t\t.then( () => {\n\t\t\t\texisting.url = track.url;\n\t\t\t\tif ( shouldAutoPlay ) {\n\t\t\t\t\texisting.instance.play()?.catch( logPlayError );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( logPlayError );\n\t\treturn;\n\t}\n\n\t// Read translated labels from server-rendered data attributes.\n\tconst labels = {\n\t\tplay: ref.dataset.labelPlay,\n\t\tpause: ref.dataset.labelPause,\n\t};\n\n\t// Initialize using the shared core.\n\tconst player = initWaveformPlayer( ref, {\n\t\tsrc: track.url,\n\t\ttitle: track.title,\n\t\tartist: track.artist,\n\t\timage: track.image,\n\t\tautoPlay: shouldAutoPlay,\n\t\tlabels,\n\t\twaveformStyle: context.waveformStyle,\n\t\tonEnded: () => {\n\t\t\t// Advance to next track (autoPlay handles playback).\n\t\t\tconst currentIndex = context.tracks.findIndex(\n\t\t\t\t( trackId ) => trackId === context.currentId\n\t\t\t);\n\t\t\tconst nextTrack = context.tracks[ currentIndex + 1 ];\n\t\t\tif ( nextTrack ) {\n\t\t\t\tcontext.currentId = nextTrack;\n\t\t\t}\n\t\t},\n\t} );\n\n\t// Store state for cleanup, including instance for loadTrack reuse.\n\tplayerState.set( ref, {\n\t\turl: track.url,\n\t\tinstance: player.instance,\n\t\tdestroy: player.destroy,\n\t} );\n}\n"],
-  "mappings": ";AAGA,SAAS,OAAO,YAAY,kBAAkB;AAK9C,SAAS,oBAAoB,oBAAoB;AAKjD,IAAM,cAAc,oBAAI,QAAQ;AAEhC,IAAM,EAAE,MAAM,IAAI;AAAA,EACjB;AAAA,EACA;AAAA,IACC,OAAO;AAAA,MACN,WAAW,CAAC;AAAA,MACZ,IAAI,iBAAiB;AACpB,cAAM,EAAE,WAAW,QAAQ,IAAI,WAAW;AAC1C,eAAO,cAAc;AAAA,MACtB;AAAA,IACD;AAAA,IACA,SAAS;AAAA,MACR,cAAc;AACb,cAAM,UAAU,WAAW;AAC3B,gBAAQ,YAAY,QAAQ;AAAA,MAC7B;AAAA,IACD;AAAA,IACA,WAAW;AAAA,MACV,qBAAqB;AACpB,cAAM,UAAU,WAAW;AAC3B,cAAM,EAAE,IAAI,IAAI,WAAW;AAE3B,YAAK,CAAE,QAAQ,aAAa,CAAE,KAAM;AACnC;AAAA,QACD;AAEA,cAAM,QACL,MAAM,UAAW,QAAQ,UAAW,GAAG,OACtC,QAAQ,SACT;AACD,YAAK,CAAE,OAAO,KAAM;AACnB;AAAA,QACD;AAEA,cAAM,WAAW,YAAY,IAAK,GAAI;AAGtC,YAAK,UAAU,QAAQ,MAAM,KAAM;AAClC;AAAA,QACD;AAIA,cAAM,iBAAiB,CAAC,CAAE,UAAU;AAEpC,mBAAY,KAAK,OAAO,gBAAgB,OAAQ;AAAA,MACjD;AAAA,IACD;AAAA,EACD;AAAA,EACA,EAAE,MAAM,KAAK;AACd;AAUA,SAAS,WAAY,KAAK,OAAO,gBAAgB,SAAU;AAC1D,QAAM,WAAW,YAAY,IAAK,GAAI;AAGtC,MAAK,UAAU,UAAW;AACzB,aAAS,SACP,UAAW,MAAM,KAAK,MAAM,OAAO,MAAM,QAAQ;AAAA,MACjD,SAAS,MAAM;AAAA,IAChB,CAAE,EACD,KAAM,MAAM;AACZ,eAAS,MAAM,MAAM;AACrB,UAAK,gBAAiB;AACrB,iBAAS,SAAS,KAAK,GAAG,MAAO,YAAa;AAAA,MAC/C;AAAA,IACD,CAAE,EACD,MAAO,YAAa;AACtB;AAAA,EACD;AAGA,QAAM,SAAS;AAAA,IACd,MAAM,IAAI,QAAQ;AAAA,IAClB,OAAO,IAAI,QAAQ;AAAA,EACpB;AAGA,QAAM,SAAS,mBAAoB,KAAK;AAAA,IACvC,KAAK,MAAM;AAAA,IACX,OAAO,MAAM;AAAA,IACb,QAAQ,MAAM;AAAA,IACd,OAAO,MAAM;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA,eAAe,QAAQ;AAAA,IACvB,SAAS,MAAM;AAEd,YAAM,eAAe,QAAQ,OAAO;AAAA,QACnC,CAAE,YAAa,YAAY,QAAQ;AAAA,MACpC;AACA,YAAM,YAAY,QAAQ,OAAQ,eAAe,CAAE;AACnD,UAAK,WAAY;AAChB,gBAAQ,YAAY;AAAA,MACrB;AAAA,IACD;AAAA,EACD,CAAE;AAGF,cAAY,IAAK,KAAK;AAAA,IACrB,KAAK,MAAM;AAAA,IACX,UAAU,OAAO;AAAA,IACjB,SAAS,OAAO;AAAA,EACjB,CAAE;AACH;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store, getContext, getElement } from '@wordpress/interactivity';\n\n/**\n * Internal dependencies\n */\nimport {\n\tinitWaveformPlayer,\n\tlogPlayError,\n\tsetupPlayButtonArtwork,\n\tupdateSeekControlLabel,\n} from '../utils/waveform-utils';\n\n/**\n * Store player state for each element.\n */\nconst playerState = new WeakMap();\nconst playlistPlayerState = new Map();\n\nconst { state } = store(\n\t'core/playlist',\n\t{\n\t\tstate: {\n\t\t\tplaylists: {},\n\t\t\tget isCurrentTrack() {\n\t\t\t\tconst { currentId, trackId } = getContext();\n\t\t\t\treturn currentId === trackId;\n\t\t\t},\n\t\t\tget isCurrentTrackPlaying() {\n\t\t\t\tconst { currentId, isPlaying, trackId } = getContext();\n\t\t\t\treturn currentId === trackId && !! isPlaying;\n\t\t\t},\n\t\t\tget trackButtonActionLabel() {\n\t\t\t\tconst { labelPauseTrack, labelSelectTrack } = getContext();\n\t\t\t\treturn state.isCurrentTrackPlaying\n\t\t\t\t\t? labelPauseTrack\n\t\t\t\t\t: labelSelectTrack;\n\t\t\t},\n\t\t},\n\t\tactions: {\n\t\t\tchangeTrack() {\n\t\t\t\tconst context = getContext();\n\t\t\t\tif ( context.currentId === context.trackId ) {\n\t\t\t\t\tconst player = playlistPlayerState.get(\n\t\t\t\t\t\tcontext.playlistId\n\t\t\t\t\t)?.instance;\n\t\t\t\t\tif ( player?.isPlaying ) {\n\t\t\t\t\t\tcontext.isPlaying = false;\n\t\t\t\t\t\tplayer.pause();\n\t\t\t\t\t} else {\n\t\t\t\t\t\tplayer?.play()?.catch( logPlayError );\n\t\t\t\t\t}\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tcontext.isPlaying = false;\n\t\t\t\tcontext.currentId = context.trackId;\n\t\t\t},\n\t\t},\n\t\tcallbacks: {\n\t\t\tinitWaveformPlayer() {\n\t\t\t\tconst context = getContext();\n\t\t\t\tconst { ref } = getElement();\n\n\t\t\t\tif ( ! context.currentId || ! ref ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst track =\n\t\t\t\t\tstate.playlists[ context.playlistId ]?.tracks[\n\t\t\t\t\t\tcontext.currentId\n\t\t\t\t\t];\n\t\t\t\tif ( ! track?.url ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst existing = playerState.get( ref );\n\n\t\t\t\t// Skip if we already initialized with this exact URL.\n\t\t\t\tif ( existing?.url === track.url ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Autoplay if we're switching from a different track (user action),\n\t\t\t\t// but not on initial page load (when existing has no URL).\n\t\t\t\tconst shouldAutoPlay = !! existing?.url;\n\n\t\t\t\tinitPlayer( ref, track, shouldAutoPlay, context );\n\t\t\t},\n\t\t},\n\t},\n\t{ lock: true }\n);\n\n/**\n * Initialize the waveform player for a given element.\n *\n * @param {Element} ref            - The container element.\n * @param {Object}  track          - The track data.\n * @param {boolean} shouldAutoPlay - Whether to auto-play after initialization.\n * @param {Object}  context        - The Interactivity API context.\n */\nfunction initPlayer( ref, track, shouldAutoPlay, context ) {\n\tconst existing = playerState.get( ref );\n\tconst showPlayButtonArtwork = context.showPlayButtonArtwork === true;\n\tconst playerArtwork = showPlayButtonArtwork ? '' : track.image;\n\n\t// If a player already exists, load the new track without recreating.\n\tif ( existing?.instance ) {\n\t\tconst shouldRecreatePlayer =\n\t\t\t!! existing.instance.artworkEl !== !! playerArtwork;\n\n\t\tif ( shouldRecreatePlayer ) {\n\t\t\texisting.destroy?.();\n\t\t\tplayerState.delete( ref );\n\t\t} else {\n\t\t\tplaylistPlayerState.set( context.playlistId, existing );\n\t\t\texisting.instance\n\t\t\t\t.loadTrack( track.url, track.title, track.artist, {\n\t\t\t\t\tartwork: playerArtwork,\n\t\t\t\t\tartworkAlt: playerArtwork ? track.imageAlt : '',\n\t\t\t\t} )\n\t\t\t\t.then( () => {\n\t\t\t\t\texisting.url = track.url;\n\t\t\t\t\tif ( existing.instance.artworkEl ) {\n\t\t\t\t\t\texisting.instance.artworkEl.alt = track.imageAlt || '';\n\t\t\t\t\t}\n\t\t\t\t\t// loadTrack() preserves the previous explicit seekLabel option.\n\t\t\t\t\tupdateSeekControlLabel(\n\t\t\t\t\t\texisting.instance,\n\t\t\t\t\t\ttrack.title || ref.dataset.labelSeek\n\t\t\t\t\t);\n\t\t\t\t\tif ( showPlayButtonArtwork ) {\n\t\t\t\t\t\tsetupPlayButtonArtwork(\n\t\t\t\t\t\t\texisting.container,\n\t\t\t\t\t\t\ttrack.image\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif ( shouldAutoPlay ) {\n\t\t\t\t\t\texisting.instance.play()?.catch( logPlayError );\n\t\t\t\t\t}\n\t\t\t\t} )\n\t\t\t\t.catch( logPlayError );\n\t\t\treturn;\n\t\t}\n\t}\n\n\t// Read translated labels from server-rendered data attributes.\n\tconst labels = {\n\t\tplay: ref.dataset.labelPlay,\n\t\tpause: ref.dataset.labelPause,\n\t\tseek: ref.dataset.labelSeek,\n\t\tseekValueText: ref.dataset.labelSeekValue,\n\t};\n\n\t// Initialize using the shared core.\n\tconst player = initWaveformPlayer( ref, {\n\t\tsrc: track.url,\n\t\ttitle: track.title,\n\t\tartist: track.artist,\n\t\timage: track.image,\n\t\timageAlt: track.imageAlt,\n\t\twaveformColor: ref.dataset.waveformPlayerColor,\n\t\twaveformGradient: ref.dataset.waveformPlayerGradient,\n\t\tbackgroundColor: ref.dataset.waveformPlayerBackgroundColor,\n\t\tbackgroundGradient: ref.dataset.waveformPlayerBackgroundGradient,\n\t\tautoPlay: shouldAutoPlay,\n\t\tlabels,\n\t\twaveformStyle: context.waveformStyle,\n\t\tshowPlayButtonArtwork,\n\t\tonEnded: () => {\n\t\t\t// Advance to next track (autoPlay handles playback).\n\t\t\tconst currentIndex = context.tracks.findIndex(\n\t\t\t\t( trackId ) => trackId === context.currentId\n\t\t\t);\n\t\t\tconst nextTrack = context.tracks[ currentIndex + 1 ];\n\t\t\tif ( nextTrack ) {\n\t\t\t\tcontext.currentId = nextTrack;\n\t\t\t}\n\t\t},\n\t} );\n\tconst setIsPlaying = ( isPlaying ) => {\n\t\tcontext.isPlaying = isPlaying;\n\t};\n\tconst onPlay = () => setIsPlaying( true );\n\tconst onPause = () => setIsPlaying( false );\n\tplayer.container.addEventListener( 'waveformplayer:play', onPlay );\n\tplayer.container.addEventListener( 'waveformplayer:pause', onPause );\n\tplayer.container.addEventListener( 'waveformplayer:ended', onPause );\n\tconst destroy = () => {\n\t\tplayer.container.removeEventListener( 'waveformplayer:play', onPlay );\n\t\tplayer.container.removeEventListener( 'waveformplayer:pause', onPause );\n\t\tplayer.container.removeEventListener( 'waveformplayer:ended', onPause );\n\t\tplayer.destroy();\n\t};\n\n\t// Store state for cleanup, including instance for loadTrack reuse.\n\tconst nextState = {\n\t\turl: track.url,\n\t\tinstance: player.instance,\n\t\tcontainer: player.container,\n\t\tdestroy,\n\t};\n\tplayerState.set( ref, nextState );\n\tplaylistPlayerState.set( context.playlistId, nextState );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/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",
@@ -9,7 +8,7 @@
 	"description": "Playlist track.",
 	"keywords": [ "music", "sound" ],
 	"textdomain": "default",
-	"usesContext": [ "showArtists" ],
+	"usesContext": [ "showArtists", "showImages" ],
 	"attributes": {
 		"blob": {
 			"type": "string",
@@ -34,6 +33,9 @@
 		"image": {
 			"type": "string"
 		},
+		"imageAlt": {
+			"type": "string"
+		},
 		"length": {
 			"type": "string"
 		},

package/build-module/playlist-track/edit.mjs

@@ -10,25 +10,28 @@ import {
   useBlockProps,
   BlockControls,
   InspectorControls,
-  RichText
+  PlainText
 } from "@wordpress/block-editor";
 import {
   Button,
   PanelBody,
   TextControl,
+  TextareaControl,
   BaseControl,
   Spinner
 } from "@wordpress/components";
+import { Link } from "@wordpress/ui";
 import { useDispatch } from "@wordpress/data";
 import { store as noticesStore } from "@wordpress/notices";
 import { __ } from "@wordpress/i18n";
 import { audio as icon } from "@wordpress/icons";
 import { __unstableStripHTML as stripHTML } from "@wordpress/dom";
 import { PlaylistContext } from "../playlist/context.mjs";
+import { getTrackAttributes, getTrackImageAttributes } from "../playlist/utils.mjs";
 import { useUploadMediaFromBlobURL } from "../utils/hooks.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ALLOWED_MEDIA_TYPES = ["audio"];
-var ALBUM_COVER_ALLOWED_MEDIA_TYPES = ["image"];
+var TRACK_IMAGE_ALLOWED_MEDIA_TYPES = ["image"];
 var PlaylistTrackEdit = ({
   attributes,
   setAttributes,
@@ -36,9 +39,10 @@ var PlaylistTrackEdit = ({
   clientId,
   isSelected
 }) => {
-  const { id, src, album, artist, image, length, title } = attributes;
+  const { id, src, album, artist, image, imageAlt, length, title } = attributes;
   const [temporaryURL, setTemporaryURL] = useState(attributes.blob);
   const showArtists = context?.showArtists;
+  const showImages = context?.showImages ?? true;
   const imageButton = useRef();
   const blockProps = useBlockProps();
   const { currentTrackClientId, setCurrentTrackClientId } = useContext(PlaylistContext);
@@ -46,12 +50,14 @@ var PlaylistTrackEdit = ({
   function onUploadError(message) {
     createErrorNotice(message, { type: "snackbar" });
   }
+  const hasTrackSource = !!src || !!temporaryURL;
   useEffect(() => {
-    if (isSelected && currentTrackClientId !== clientId) {
+    if (isSelected && hasTrackSource && currentTrackClientId !== clientId) {
       setCurrentTrackClientId(clientId);
     }
   }, [
     isSelected,
+    hasTrackSource,
     clientId,
     currentTrackClientId,
     setCurrentTrackClientId
@@ -70,6 +76,7 @@ var PlaylistTrackEdit = ({
         artist: void 0,
         album: void 0,
         image: void 0,
+        imageAlt: void 0,
         length: void 0,
         title: void 0,
         url: void 0
@@ -83,25 +90,18 @@ var PlaylistTrackEdit = ({
     }
     setAttributes({
       blob: void 0,
-      id: media.id,
-      src: media.url,
-      artist: media.artist || media?.meta?.artist || media?.media_details?.artist || __("Unknown artist"),
-      album: media.album || media?.meta?.album || media?.media_details?.album || __("Unknown album"),
-      // Prevent using the default media attachment icon as the track image.
-      image: media?.image?.src && media?.image?.src.endsWith("/images/media/audio.svg") ? "" : media?.image?.src,
-      length: media?.fileLength || media?.media_details?.length_formatted,
-      title: media.title
+      ...getTrackAttributes(media)
     });
     setTemporaryURL();
   }
-  function onSelectAlbumCoverImage(coverImage) {
-    setAttributes({ image: coverImage.url });
+  function onSelectTrackImage(trackImage) {
+    setAttributes(getTrackImageAttributes(trackImage));
   }
-  function onRemoveAlbumCoverImage() {
-    setAttributes({ image: void 0 });
+  function onRemoveTrackImage() {
+    setAttributes({ image: void 0, imageAlt: void 0 });
     imageButton.current.focus();
   }
-  if (!src && !temporaryURL) {
+  if (!hasTrackSource) {
     return /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx(
       MediaPlaceholder,
       {
@@ -164,45 +164,70 @@ var PlaylistTrackEdit = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsxs("div", { className: "editor-video-poster-control", children: [
-        /* @__PURE__ */ jsx(BaseControl.VisualLabel, { children: __("Album cover image") }),
-        !!image && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: image,
-            alt: __(
-              "Preview of the album cover image"
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          MediaUpload,
-          {
-            title: __("Select image"),
-            onSelect: onSelectAlbumCoverImage,
-            allowedTypes: ALBUM_COVER_ALLOWED_MEDIA_TYPES,
-            render: ({ open }) => /* @__PURE__ */ jsx(
-              Button,
-              {
-                __next40pxDefaultSize: true,
-                variant: "primary",
-                onClick: open,
-                ref: imageButton,
-                children: !image ? __("Select") : __("Replace")
-              }
-            )
-          }
-        ),
-        !!image && /* @__PURE__ */ jsx(
-          Button,
-          {
-            __next40pxDefaultSize: true,
-            onClick: onRemoveAlbumCoverImage,
-            variant: "tertiary",
-            children: __("Remove")
-          }
-        )
-      ] }) })
+      /* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsxs(BaseControl, { children: [
+        /* @__PURE__ */ jsx(BaseControl.VisualLabel, { children: __("Track image") }),
+        /* @__PURE__ */ jsxs("div", { className: "editor-video-poster-control", children: [
+          !!image && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: image,
+              alt: __(
+                "Preview of the track image"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MediaUpload,
+            {
+              title: __("Select image"),
+              onSelect: onSelectTrackImage,
+              allowedTypes: TRACK_IMAGE_ALLOWED_MEDIA_TYPES,
+              render: ({ open }) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  __next40pxDefaultSize: true,
+                  variant: "primary",
+                  onClick: open,
+                  ref: imageButton,
+                  children: !image ? __("Select") : __("Replace")
+                }
+              )
+            }
+          ),
+          !!image && /* @__PURE__ */ jsx(
+            Button,
+            {
+              __next40pxDefaultSize: true,
+              onClick: onRemoveTrackImage,
+              variant: "tertiary",
+              children: __("Remove")
+            }
+          )
+        ] })
+      ] }) }),
+      !!image && /* @__PURE__ */ jsx(
+        TextareaControl,
+        {
+          label: __("Alternative text"),
+          value: imageAlt || "",
+          onChange: (value) => setAttributes({ imageAlt: value }),
+          help: /* @__PURE__ */ jsx(
+            Link,
+            {
+              openInNewTab: true,
+              href: (
+                // translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+                __(
+                  "https://www.w3.org/WAI/tutorials/images/decision-tree/"
+                )
+              ),
+              children: __(
+                "Describe the purpose of the image."
+              )
+            }
+          )
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxs("li", { ...blockProps, children: [
       !!temporaryURL && /* @__PURE__ */ jsx(Spinner, {}),
@@ -213,9 +238,17 @@ var PlaylistTrackEdit = ({
           onClick: () => setCurrentTrackClientId(clientId),
           "aria-current": currentTrackClientId === clientId ? "true" : "false",
           children: [
+            showImages && !!image && /* @__PURE__ */ jsx(
+              "img",
+              {
+                className: "wp-block-playlist-track__image",
+                src: image,
+                alt: imageAlt || ""
+              }
+            ),
             /* @__PURE__ */ jsxs("span", { className: "wp-block-playlist-track__content", children: [
               /* @__PURE__ */ jsx(
-                RichText,
+                PlainText,
                 {
                   tagName: "span",
                   className: "wp-block-playlist-track__title",
@@ -224,32 +257,30 @@ var PlaylistTrackEdit = ({
                   onChange: (value) => {
                     setAttributes({ title: value });
                   },
-                  allowedFormats: [],
-                  withoutInteractiveFormatting: true
+                  __experimentalVersion: 2
                 }
               ),
               showArtists && /* @__PURE__ */ jsx(
-                RichText,
+                PlainText,
                 {
                   tagName: "span",
                   className: "wp-block-playlist-track__artist",
                   value: artist,
                   placeholder: __("Add artist"),
                   onChange: (value) => setAttributes({ artist: value }),
-                  allowedFormats: [],
-                  withoutInteractiveFormatting: true
+                  __experimentalVersion: 2
                 }
               )
             ] }),
             /* @__PURE__ */ jsxs("span", { className: "wp-block-playlist-track__length", children: [
               length && /* @__PURE__ */ jsx("span", {
                 className: "screen-reader-text",
-                /* translators: %s: Visually hidden label for the track length (screen reader text). */
-                children: __("Length:")
+                /* translators: Visually hidden label for the track duration (screen reader text). */
+                children: __("Duration:")
               }),
               length
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "screen-reader-text", children: __("Select to play this track") })
+            /* @__PURE__ */ jsx("span", { className: "screen-reader-text", children: __("Play") })
           ]
         }
       )

package/build-module/playlist-track/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/playlist-track/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { isBlobURL } from '@wordpress/blob';\nimport { useContext, useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\tMediaPlaceholder,\n\tMediaReplaceFlow,\n\tMediaUpload,\n\tMediaUploadCheck,\n\tBlockIcon,\n\tuseBlockProps,\n\tBlockControls,\n\tInspectorControls,\n\tRichText,\n} from '@wordpress/block-editor';\nimport {\n\tButton,\n\tPanelBody,\n\tTextControl,\n\tBaseControl,\n\tSpinner,\n} from '@wordpress/components';\nimport { useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { __ } from '@wordpress/i18n';\nimport { audio as icon } from '@wordpress/icons';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { PlaylistContext } from '../playlist/context';\nimport { useUploadMediaFromBlobURL } from '../utils/hooks';\n\nconst ALLOWED_MEDIA_TYPES = [ 'audio' ];\nconst ALBUM_COVER_ALLOWED_MEDIA_TYPES = [ 'image' ];\n\nconst PlaylistTrackEdit = ( {\n\tattributes,\n\tsetAttributes,\n\tcontext,\n\tclientId,\n\tisSelected,\n} ) => {\n\tconst { id, src, album, artist, image, length, title } = attributes;\n\tconst [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );\n\tconst showArtists = context?.showArtists;\n\tconst imageButton = useRef();\n\tconst blockProps = useBlockProps();\n\tconst { currentTrackClientId, setCurrentTrackClientId } =\n\t\tuseContext( PlaylistContext );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tfunction onUploadError( message ) {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t}\n\n\tuseEffect( () => {\n\t\tif ( isSelected && currentTrackClientId !== clientId ) {\n\t\t\tsetCurrentTrackClientId( clientId );\n\t\t}\n\t}, [\n\t\tisSelected,\n\t\tclientId,\n\t\tcurrentTrackClientId,\n\t\tsetCurrentTrackClientId,\n\t] );\n\n\tuseUploadMediaFromBlobURL( {\n\t\tsrc: temporaryURL,\n\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\tonChange: onSelectTrack,\n\t\tonError: onUploadError,\n\t} );\n\n\tfunction onSelectTrack( media ) {\n\t\tif ( ! media || ! media.url ) {\n\t\t\t// In this case there was an error and we should continue in the editing state\n\t\t\t// previous attributes should be removed because they may be temporary blob urls.\n\t\t\tsetAttributes( {\n\t\t\t\tblob: undefined,\n\t\t\t\tid: undefined,\n\t\t\t\tartist: undefined,\n\t\t\t\talbum: undefined,\n\t\t\t\timage: undefined,\n\t\t\t\tlength: undefined,\n\t\t\t\ttitle: undefined,\n\t\t\t\turl: undefined,\n\t\t\t} );\n\t\t\tsetTemporaryURL();\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\tsetTemporaryURL( media.url );\n\t\t\treturn;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tblob: undefined,\n\t\t\tid: media.id,\n\t\t\tsrc: media.url,\n\t\t\tartist:\n\t\t\t\tmedia.artist ||\n\t\t\t\tmedia?.meta?.artist ||\n\t\t\t\tmedia?.media_details?.artist ||\n\t\t\t\t__( 'Unknown artist' ),\n\t\t\talbum:\n\t\t\t\tmedia.album ||\n\t\t\t\tmedia?.meta?.album ||\n\t\t\t\tmedia?.media_details?.album ||\n\t\t\t\t__( 'Unknown album' ),\n\t\t\t// Prevent using the default media attachment icon as the track image.\n\t\t\timage:\n\t\t\t\tmedia?.image?.src &&\n\t\t\t\tmedia?.image?.src.endsWith( '/images/media/audio.svg' )\n\t\t\t\t\t? ''\n\t\t\t\t\t: media?.image?.src,\n\t\t\tlength: media?.fileLength || media?.media_details?.length_formatted,\n\t\t\ttitle: media.title,\n\t\t} );\n\t\tsetTemporaryURL();\n\t}\n\n\tfunction onSelectAlbumCoverImage( coverImage ) {\n\t\tsetAttributes( { image: coverImage.url } );\n\t}\n\n\tfunction onRemoveAlbumCoverImage() {\n\t\tsetAttributes( { image: undefined } );\n\n\t\t// Move focus back to the Media Upload button.\n\t\timageButton.current.focus();\n\t}\n\n\tif ( ! src && ! temporaryURL ) {\n\t\treturn (\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<MediaPlaceholder\n\t\t\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\t\t\tlabels={ {\n\t\t\t\t\t\ttitle: __( 'Track' ),\n\t\t\t\t\t\tinstructions: __(\n\t\t\t\t\t\t\t'Upload an audio file or pick one from your media library.'\n\t\t\t\t\t\t),\n\t\t\t\t\t} }\n\t\t\t\t\tonSelect={ onSelectTrack }\n\t\t\t\t\taccept=\"audio/*\"\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tvalue={ attributes }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls group=\"other\">\n\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\tname={ __( 'Replace' ) }\n\t\t\t\t\tonSelect={ onSelectTrack }\n\t\t\t\t\taccept=\"audio/*\"\n\t\t\t\t\tmediaId={ id }\n\t\t\t\t\tmediaURL={ src }\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Artist' ) }\n\t\t\t\t\t\tvalue={ artist ? stripHTML( artist ) : '' }\n\t\t\t\t\t\tonChange={ ( artistValue ) => {\n\t\t\t\t\t\t\tsetAttributes( { artist: artistValue } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Album' ) }\n\t\t\t\t\t\tvalue={ album ? stripHTML( album ) : '' }\n\t\t\t\t\t\tonChange={ ( albumValue ) => {\n\t\t\t\t\t\t\tsetAttributes( { album: albumValue } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Title' ) }\n\t\t\t\t\t\tvalue={ title ? stripHTML( title ) : '' }\n\t\t\t\t\t\tonChange={ ( titleValue ) => {\n\t\t\t\t\t\t\tsetAttributes( { title: titleValue } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t<div className=\"editor-video-poster-control\">\n\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t{ __( 'Album cover image' ) }\n\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t{ !! image && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={ image }\n\t\t\t\t\t\t\t\t\talt={ __(\n\t\t\t\t\t\t\t\t\t\t'Preview of the album cover image'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\t\t\ttitle={ __( 'Select image' ) }\n\t\t\t\t\t\t\t\tonSelect={ onSelectAlbumCoverImage }\n\t\t\t\t\t\t\t\tallowedTypes={ ALBUM_COVER_ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t\t\t\tref={ imageButton }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ ! image\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Select' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Replace' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{ !! image && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tonClick={ onRemoveAlbumCoverImage }\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\t\t\t<li { ...blockProps }>\n\t\t\t\t{ !! temporaryURL && <Spinner /> }\n\t\t\t\t<button\n\t\t\t\t\tclassName=\"wp-block-playlist-track__button\"\n\t\t\t\t\tonClick={ () => setCurrentTrackClientId( clientId ) }\n\t\t\t\t\taria-current={\n\t\t\t\t\t\tcurrentTrackClientId === clientId ? 'true' : 'false'\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"wp-block-playlist-track__content\">\n\t\t\t\t\t\t<RichText\n\t\t\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\t\t\tclassName=\"wp-block-playlist-track__title\"\n\t\t\t\t\t\t\tvalue={ title }\n\t\t\t\t\t\t\tplaceholder={ __( 'Add title' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( { title: value } );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tallowedFormats={ [] }\n\t\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ showArtists && (\n\t\t\t\t\t\t\t<RichText\n\t\t\t\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"wp-block-playlist-track__artist\"\n\t\t\t\t\t\t\t\tvalue={ artist }\n\t\t\t\t\t\t\t\tplaceholder={ __( 'Add artist' ) }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( { artist: value } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tallowedFormats={ [] }\n\t\t\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"wp-block-playlist-track__length\">\n\t\t\t\t\t\t{ length && (\n\t\t\t\t\t\t\t<span className=\"screen-reader-text\">\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t/* translators: %s: Visually hidden label for the track length (screen reader text). */\n\t\t\t\t\t\t\t\t\t__( 'Length:' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ length }\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"screen-reader-text\">\n\t\t\t\t\t\t{ __( 'Select to play this track' ) }\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</>\n\t);\n};\n\nexport default PlaylistTrackEdit;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { isBlobURL } from '@wordpress/blob';\nimport { useContext, useEffect, useRef, useState } from '@wordpress/element';\nimport {\n\tMediaPlaceholder,\n\tMediaReplaceFlow,\n\tMediaUpload,\n\tMediaUploadCheck,\n\tBlockIcon,\n\tuseBlockProps,\n\tBlockControls,\n\tInspectorControls,\n\tPlainText,\n} from '@wordpress/block-editor';\nimport {\n\tButton,\n\tPanelBody,\n\tTextControl,\n\tTextareaControl,\n\tBaseControl,\n\tSpinner,\n} from '@wordpress/components';\nimport { Link } from '@wordpress/ui';\nimport { useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { __ } from '@wordpress/i18n';\nimport { audio as icon } from '@wordpress/icons';\nimport { __unstableStripHTML as stripHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { PlaylistContext } from '../playlist/context';\nimport { getTrackAttributes, getTrackImageAttributes } from '../playlist/utils';\nimport { useUploadMediaFromBlobURL } from '../utils/hooks';\n\nconst ALLOWED_MEDIA_TYPES = [ 'audio' ];\nconst TRACK_IMAGE_ALLOWED_MEDIA_TYPES = [ 'image' ];\n\nconst PlaylistTrackEdit = ( {\n\tattributes,\n\tsetAttributes,\n\tcontext,\n\tclientId,\n\tisSelected,\n} ) => {\n\tconst { id, src, album, artist, image, imageAlt, length, title } =\n\t\tattributes;\n\tconst [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );\n\tconst showArtists = context?.showArtists;\n\tconst showImages = context?.showImages ?? true;\n\tconst imageButton = useRef();\n\tconst blockProps = useBlockProps();\n\tconst { currentTrackClientId, setCurrentTrackClientId } =\n\t\tuseContext( PlaylistContext );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tfunction onUploadError( message ) {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t}\n\tconst hasTrackSource = !! src || !! temporaryURL;\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\tisSelected &&\n\t\t\thasTrackSource &&\n\t\t\tcurrentTrackClientId !== clientId\n\t\t) {\n\t\t\tsetCurrentTrackClientId( clientId );\n\t\t}\n\t}, [\n\t\tisSelected,\n\t\thasTrackSource,\n\t\tclientId,\n\t\tcurrentTrackClientId,\n\t\tsetCurrentTrackClientId,\n\t] );\n\n\tuseUploadMediaFromBlobURL( {\n\t\tsrc: temporaryURL,\n\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\tonChange: onSelectTrack,\n\t\tonError: onUploadError,\n\t} );\n\n\tfunction onSelectTrack( media ) {\n\t\tif ( ! media || ! media.url ) {\n\t\t\t// In this case there was an error and we should continue in the editing state\n\t\t\t// previous attributes should be removed because they may be temporary blob urls.\n\t\t\tsetAttributes( {\n\t\t\t\tblob: undefined,\n\t\t\t\tid: undefined,\n\t\t\t\tartist: undefined,\n\t\t\t\talbum: undefined,\n\t\t\t\timage: undefined,\n\t\t\t\timageAlt: undefined,\n\t\t\t\tlength: undefined,\n\t\t\t\ttitle: undefined,\n\t\t\t\turl: undefined,\n\t\t\t} );\n\t\t\tsetTemporaryURL();\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\tsetTemporaryURL( media.url );\n\t\t\treturn;\n\t\t}\n\n\t\tsetAttributes( {\n\t\t\tblob: undefined,\n\t\t\t...getTrackAttributes( media ),\n\t\t} );\n\t\tsetTemporaryURL();\n\t}\n\n\tfunction onSelectTrackImage( trackImage ) {\n\t\tsetAttributes( getTrackImageAttributes( trackImage ) );\n\t}\n\n\tfunction onRemoveTrackImage() {\n\t\tsetAttributes( { image: undefined, imageAlt: undefined } );\n\n\t\t// Move focus back to the Media Upload button.\n\t\timageButton.current.focus();\n\t}\n\n\tif ( ! hasTrackSource ) {\n\t\treturn (\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<MediaPlaceholder\n\t\t\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\t\t\tlabels={ {\n\t\t\t\t\t\ttitle: __( 'Track' ),\n\t\t\t\t\t\tinstructions: __(\n\t\t\t\t\t\t\t'Upload an audio file or pick one from your media library.'\n\t\t\t\t\t\t),\n\t\t\t\t\t} }\n\t\t\t\t\tonSelect={ onSelectTrack }\n\t\t\t\t\taccept=\"audio/*\"\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tvalue={ attributes }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls group=\"other\">\n\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\tname={ __( 'Replace' ) }\n\t\t\t\t\tonSelect={ onSelectTrack }\n\t\t\t\t\taccept=\"audio/*\"\n\t\t\t\t\tmediaId={ id }\n\t\t\t\t\tmediaURL={ src }\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Artist' ) }\n\t\t\t\t\t\tvalue={ artist ? stripHTML( artist ) : '' }\n\t\t\t\t\t\tonChange={ ( artistValue ) => {\n\t\t\t\t\t\t\tsetAttributes( { artist: artistValue } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Album' ) }\n\t\t\t\t\t\tvalue={ album ? stripHTML( album ) : '' }\n\t\t\t\t\t\tonChange={ ( albumValue ) => {\n\t\t\t\t\t\t\tsetAttributes( { album: albumValue } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Title' ) }\n\t\t\t\t\t\tvalue={ title ? stripHTML( title ) : '' }\n\t\t\t\t\t\tonChange={ ( titleValue ) => {\n\t\t\t\t\t\t\tsetAttributes( { title: titleValue } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t<BaseControl>\n\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t{ __( 'Track image' ) }\n\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t<div className=\"editor-video-poster-control\">\n\t\t\t\t\t\t\t\t{ !! image && (\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tsrc={ image }\n\t\t\t\t\t\t\t\t\t\talt={ __(\n\t\t\t\t\t\t\t\t\t\t\t'Preview of the track image'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\t\t\t\ttitle={ __( 'Select image' ) }\n\t\t\t\t\t\t\t\t\tonSelect={ onSelectTrackImage }\n\t\t\t\t\t\t\t\t\tallowedTypes={\n\t\t\t\t\t\t\t\t\t\tTRACK_IMAGE_ALLOWED_MEDIA_TYPES\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t\t\t\t\tref={ imageButton }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ ! image\n\t\t\t\t\t\t\t\t\t\t\t\t? __( 'Select' )\n\t\t\t\t\t\t\t\t\t\t\t\t: __( 'Replace' ) }\n\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{ !! image && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\t\tonClick={ onRemoveTrackImage }\n\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Remove' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</BaseControl>\n\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t\t{ !! image && (\n\t\t\t\t\t\t<TextareaControl\n\t\t\t\t\t\t\tlabel={ __( 'Alternative text' ) }\n\t\t\t\t\t\t\tvalue={ imageAlt || '' }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( { imageAlt: value } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\thelp={\n\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\topenInNewTab\n\t\t\t\t\t\t\t\t\thref={\n\t\t\t\t\t\t\t\t\t\t// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.\n\t\t\t\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t\t\t\t'https://www.w3.org/WAI/tutorials/images/decision-tree/'\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t'Describe the purpose of the image.'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\t\t\t<li { ...blockProps }>\n\t\t\t\t{ !! temporaryURL && <Spinner /> }\n\t\t\t\t<button\n\t\t\t\t\tclassName=\"wp-block-playlist-track__button\"\n\t\t\t\t\tonClick={ () => setCurrentTrackClientId( clientId ) }\n\t\t\t\t\taria-current={\n\t\t\t\t\t\tcurrentTrackClientId === clientId ? 'true' : 'false'\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{ showImages && !! image && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tclassName=\"wp-block-playlist-track__image\"\n\t\t\t\t\t\t\tsrc={ image }\n\t\t\t\t\t\t\talt={ imageAlt || '' }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<span className=\"wp-block-playlist-track__content\">\n\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\t\t\tclassName=\"wp-block-playlist-track__title\"\n\t\t\t\t\t\t\tvalue={ title }\n\t\t\t\t\t\t\tplaceholder={ __( 'Add title' ) }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tsetAttributes( { title: value } );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t__experimentalVersion={ 2 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ showArtists && (\n\t\t\t\t\t\t\t<PlainText\n\t\t\t\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\t\t\t\tclassName=\"wp-block-playlist-track__artist\"\n\t\t\t\t\t\t\t\tvalue={ artist }\n\t\t\t\t\t\t\t\tplaceholder={ __( 'Add artist' ) }\n\t\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\t\tsetAttributes( { artist: value } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__experimentalVersion={ 2 }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"wp-block-playlist-track__length\">\n\t\t\t\t\t\t{ length && (\n\t\t\t\t\t\t\t<span className=\"screen-reader-text\">\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t/* translators: Visually hidden label for the track duration (screen reader text). */\n\t\t\t\t\t\t\t\t\t__( 'Duration:' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ length }\n\t\t\t\t\t</span>\n\t\t\t\t\t<span className=\"screen-reader-text\">{ __( 'Play' ) }</span>\n\t\t\t\t</button>\n\t\t\t</li>\n\t\t</>\n\t);\n};\n\nexport default PlaylistTrackEdit;\n"],
+  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,YAAY,WAAW,QAAQ,gBAAgB;AACxD;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,SAAS,oBAAoB;AACtC,SAAS,UAAU;AACnB,SAAS,SAAS,YAAY;AAC9B,SAAS,uBAAuB,iBAAiB;AAKjD,SAAS,uBAAuB;AAChC,SAAS,oBAAoB,+BAA+B;AAC5D,SAAS,iCAAiC;AAgG9B,SAkBV,UAlBU,KA0DL,YA1DK;AA9FZ,IAAM,sBAAsB,CAAE,OAAQ;AACtC,IAAM,kCAAkC,CAAE,OAAQ;AAElD,IAAM,oBAAoB,CAAE;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,MAAO;AACN,QAAM,EAAE,IAAI,KAAK,OAAO,QAAQ,OAAO,UAAU,QAAQ,MAAM,IAC9D;AACD,QAAM,CAAE,cAAc,eAAgB,IAAI,SAAU,WAAW,IAAK;AACpE,QAAM,cAAc,SAAS;AAC7B,QAAM,aAAa,SAAS,cAAc;AAC1C,QAAM,cAAc,OAAO;AAC3B,QAAM,aAAa,cAAc;AACjC,QAAM,EAAE,sBAAsB,wBAAwB,IACrD,WAAY,eAAgB;AAC7B,QAAM,EAAE,kBAAkB,IAAI,YAAa,YAAa;AACxD,WAAS,cAAe,SAAU;AACjC,sBAAmB,SAAS,EAAE,MAAM,WAAW,CAAE;AAAA,EAClD;AACA,QAAM,iBAAiB,CAAC,CAAE,OAAO,CAAC,CAAE;AAEpC,YAAW,MAAM;AAChB,QACC,cACA,kBACA,yBAAyB,UACxB;AACD,8BAAyB,QAAS;AAAA,IACnC;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,4BAA2B;AAAA,IAC1B,KAAK;AAAA,IACL,cAAc;AAAA,IACd,UAAU;AAAA,IACV,SAAS;AAAA,EACV,CAAE;AAEF,WAAS,cAAe,OAAQ;AAC/B,QAAK,CAAE,SAAS,CAAE,MAAM,KAAM;AAG7B,oBAAe;AAAA,QACd,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,OAAO;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,KAAK;AAAA,MACN,CAAE;AACF,sBAAgB;AAChB;AAAA,IACD;AAEA,QAAK,UAAW,MAAM,GAAI,GAAI;AAC7B,sBAAiB,MAAM,GAAI;AAC3B;AAAA,IACD;AAEA,kBAAe;AAAA,MACd,MAAM;AAAA,MACN,GAAG,mBAAoB,KAAM;AAAA,IAC9B,CAAE;AACF,oBAAgB;AAAA,EACjB;AAEA,WAAS,mBAAoB,YAAa;AACzC,kBAAe,wBAAyB,UAAW,CAAE;AAAA,EACtD;AAEA,WAAS,qBAAqB;AAC7B,kBAAe,EAAE,OAAO,QAAW,UAAU,OAAU,CAAE;AAGzD,gBAAY,QAAQ,MAAM;AAAA,EAC3B;AAEA,MAAK,CAAE,gBAAiB;AACvB,WACC,oBAAC,SAAM,GAAG,YACT;AAAA,MAAC;AAAA;AAAA,QACA,MAAO,oBAAC,aAAU,MAAc;AAAA,QAChC,QAAS;AAAA,UACR,OAAO,GAAI,OAAQ;AAAA,UACnB,cAAc;AAAA,YACb;AAAA,UACD;AAAA,QACD;AAAA,QACA,UAAW;AAAA,QACX,QAAO;AAAA,QACP,cAAe;AAAA,QACf,OAAQ;AAAA,QACR,SAAU;AAAA;AAAA,IACX,GACD;AAAA,EAEF;AAEA,SACC,iCACC;AAAA,wBAAC,iBAAc,OAAM,SACpB;AAAA,MAAC;AAAA;AAAA,QACA,MAAO,GAAI,SAAU;AAAA,QACrB,UAAW;AAAA,QACX,QAAO;AAAA,QACP,SAAU;AAAA,QACV,UAAW;AAAA,QACX,cAAe;AAAA,QACf,SAAU;AAAA;AAAA,IACX,GACD;AAAA,IACA,oBAAC,qBACA,+BAAC,aAAU,OAAQ,GAAI,UAAW,GACjC;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,GAAI,QAAS;AAAA,UACrB,OAAQ,SAAS,UAAW,MAAO,IAAI;AAAA,UACvC,UAAW,CAAE,gBAAiB;AAC7B,0BAAe,EAAE,QAAQ,YAAY,CAAE;AAAA,UACxC;AAAA;AAAA,MACD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,GAAI,OAAQ;AAAA,UACpB,OAAQ,QAAQ,UAAW,KAAM,IAAI;AAAA,UACrC,UAAW,CAAE,eAAgB;AAC5B,0BAAe,EAAE,OAAO,WAAW,CAAE;AAAA,UACtC;AAAA;AAAA,MACD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,GAAI,OAAQ;AAAA,UACpB,OAAQ,QAAQ,UAAW,KAAM,IAAI;AAAA,UACrC,UAAW,CAAE,eAAgB;AAC5B,0BAAe,EAAE,OAAO,WAAW,CAAE;AAAA,UACtC;AAAA;AAAA,MACD;AAAA,MACA,oBAAC,oBACA,+BAAC,eACA;AAAA,4BAAC,YAAY,aAAZ,EACE,aAAI,aAAc,GACrB;AAAA,QACA,qBAAC,SAAI,WAAU,+BACZ;AAAA,WAAC,CAAE,SACJ;AAAA,YAAC;AAAA;AAAA,cACA,KAAM;AAAA,cACN,KAAM;AAAA,gBACL;AAAA,cACD;AAAA;AAAA,UACD;AAAA,UAED;AAAA,YAAC;AAAA;AAAA,cACA,OAAQ,GAAI,cAAe;AAAA,cAC3B,UAAW;AAAA,cACX,cACC;AAAA,cAED,QAAS,CAAE,EAAE,KAAK,MACjB;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,SAAQ;AAAA,kBACR,SAAU;AAAA,kBACV,KAAM;AAAA,kBAEJ,WAAE,QACD,GAAI,QAAS,IACb,GAAI,SAAU;AAAA;AAAA,cAClB;AAAA;AAAA,UAEF;AAAA,UACE,CAAC,CAAE,SACJ;AAAA,YAAC;AAAA;AAAA,cACA,uBAAqB;AAAA,cACrB,SAAU;AAAA,cACV,SAAQ;AAAA,cAEN,aAAI,QAAS;AAAA;AAAA,UAChB;AAAA,WAEF;AAAA,SACD,GACD;AAAA,MACE,CAAC,CAAE,SACJ;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,GAAI,kBAAmB;AAAA,UAC/B,OAAQ,YAAY;AAAA,UACpB,UAAW,CAAE,UACZ,cAAe,EAAE,UAAU,MAAM,CAAE;AAAA,UAEpC,MACC;AAAA,YAAC;AAAA;AAAA,cACA,cAAY;AAAA,cACZ;AAAA;AAAA,gBAEC;AAAA,kBACC;AAAA,gBACD;AAAA;AAAA,cAGC;AAAA,gBACD;AAAA,cACD;AAAA;AAAA,UACD;AAAA;AAAA,MAEF;AAAA,OAEF,GACD;AAAA,IACA,qBAAC,QAAK,GAAG,YACN;AAAA,OAAC,CAAE,gBAAgB,oBAAC,WAAQ;AAAA,MAC9B;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,SAAU,MAAM,wBAAyB,QAAS;AAAA,UAClD,gBACC,yBAAyB,WAAW,SAAS;AAAA,UAG5C;AAAA,0BAAc,CAAC,CAAE,SAClB;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,KAAM;AAAA,gBACN,KAAM,YAAY;AAAA;AAAA,YACnB;AAAA,YAED,qBAAC,UAAK,WAAU,oCACf;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,OAAQ;AAAA,kBACR,aAAc,GAAI,WAAY;AAAA,kBAC9B,UAAW,CAAE,UAAW;AACvB,kCAAe,EAAE,OAAO,MAAM,CAAE;AAAA,kBACjC;AAAA,kBACA,uBAAwB;AAAA;AAAA,cACzB;AAAA,cACE,eACD;AAAA,gBAAC;AAAA;AAAA,kBACA,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,OAAQ;AAAA,kBACR,aAAc,GAAI,YAAa;AAAA,kBAC/B,UAAW,CAAE,UACZ,cAAe,EAAE,QAAQ,MAAM,CAAE;AAAA,kBAElC,uBAAwB;AAAA;AAAA,cACzB;AAAA,eAEF;AAAA,YACA,qBAAC,UAAK,WAAU,mCACb;AAAA,wBACD,oBAAC;AAAA,gBAAK,WAAU;AAAA;AAAA,gBAGd,aAAI,WAAY;AAAA,eAElB;AAAA,cAEC;AAAA,eACH;AAAA,YACA,oBAAC,UAAK,WAAU,sBAAuB,aAAI,MAAO,GAAG;AAAA;AAAA;AAAA,MACtD;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,eAAQ;",
   "names": []
 }

package/build-module/post-content/block.json

@@ -24,6 +24,7 @@
 		"background": {
 			"backgroundImage": true,
 			"backgroundSize": true,
+			"gradient": true,
 			"__experimentalDefaultControls": {
 				"backgroundImage": true
 			}

package/build-module/post-template/block.json

@@ -14,7 +14,8 @@
 		"templateSlug",
 		"previewPostType",
 		"enhancedPagination",
-		"postType"
+		"postType",
+		"postId"
 	],
 	"supports": {
 		"anchor": true,

package/build-module/post-template/edit.mjs

@@ -90,6 +90,7 @@ function PostTemplateEdit({
       parents,
       pages,
       format,
+      excludeCurrent,
       // We gather extra query args to pass to the REST API call.
       // This way extenders of Query Loop can add their own query args,
       // and have accurate previews in the editor.
@@ -98,7 +99,8 @@ function PostTemplateEdit({
       ...restQueryArgs
     } = {},
     templateSlug,
-    previewPostType
+    previewPostType,
+    postId
   },
   attributes: { layout },
   __unstableLayoutClassNames
@@ -179,6 +181,13 @@ function PostTemplateEdit({
       if (format?.length) {
         query.format = format;
       }
+      if (excludeCurrent && postId) {
+        if (query.exclude) {
+          query.exclude = [...query.exclude, postId];
+        } else {
+          query.exclude = [postId];
+        }
+      }
       if (["exclude", "only"].includes(sticky)) {
         query.sticky = sticky === "only";
       }