@wordpress/block-library 10.1.0 → 10.2.0

package/build/playlist/context.cjs

@@ -0,0 +1,36 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-library/src/playlist/context.js
+var context_exports = {};
+__export(context_exports, {
+  PlaylistContext: () => PlaylistContext
+});
+module.exports = __toCommonJS(context_exports);
+var import_element = require("@wordpress/element");
+var PlaylistContext = (0, import_element.createContext)({
+  currentTrackClientId: null,
+  setCurrentTrackClientId: () => {
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PlaylistContext
+});
+//# sourceMappingURL=context.cjs.map

package/build/playlist/context.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/playlist/context.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nexport const PlaylistContext = createContext( {\n\tcurrentTrackClientId: null,\n\tsetCurrentTrackClientId: () => {},\n} );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAEvB,IAAM,sBAAkB,8BAAe;AAAA,EAC7C,sBAAsB;AAAA,EACtB,yBAAyB,MAAM;AAAA,EAAC;AACjC,CAAE;",
+  "names": []
+}

package/build/playlist/edit.cjs

@@ -34,7 +34,6 @@ __export(edit_exports, {
 });
 module.exports = __toCommonJS(edit_exports);
 var import_clsx = __toESM(require("clsx"));
-var import_uuid = require("uuid");
 var import_element = require("@wordpress/element");
 var import_block_editor = require("@wordpress/block-editor");
 var import_components = require("@wordpress/components");
@@ -46,9 +45,19 @@ var import_blocks = require("@wordpress/blocks");
 var import_caption = require("../utils/caption.cjs");
 var import_hooks = require("../utils/hooks.cjs");
 var import_waveform_player = require("../utils/waveform-player.cjs");
+var import_context = require("./context.cjs");
 var import_utils = require("./utils.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 var ALLOWED_MEDIA_TYPES = ["audio"];
+var DEFAULT_WAVEFORM_STYLE = "bars";
+var WAVEFORM_STYLE_OPTIONS = [
+  { label: (0, import_i18n._x)("Bars", "waveform style option"), value: "bars" },
+  { label: (0, import_i18n._x)("Mirror", "waveform style option"), value: "mirror" },
+  { label: (0, import_i18n._x)("Line", "waveform style option"), value: "line" },
+  { label: (0, import_i18n._x)("Blocks", "waveform style option"), value: "blocks" },
+  { label: (0, import_i18n._x)("Dots", "waveform style option"), value: "dots" },
+  { label: (0, import_i18n._x)("Seekbar", "waveform style option"), value: "seekbar" }
+];
 var PlaylistEdit = ({
   attributes,
   setAttributes,
@@ -61,19 +70,43 @@ var PlaylistEdit = ({
     showTracklist,
     showNumbers,
     showImages,
+    showPlayButtonArtwork,
     showArtists,
     showTrackLength,
-    currentTrack
+    waveformStyle = DEFAULT_WAVEFORM_STYLE,
+    waveformColor,
+    waveformGradient,
+    waveformBackgroundColor,
+    waveformBackgroundGradient
   } = attributes;
-  const waveformStyle = attributes.className?.match(/is-style-([\w-]+)/)?.[1] || "bars";
   const blockProps = (0, import_block_editor.useBlockProps)();
-  const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } = (0, import_data.useDispatch)(import_block_editor.store);
+  const waveformPanelId = `${clientId}-waveform`;
+  const { replaceInnerBlocks } = (0, import_data.useDispatch)(import_block_editor.store);
   const { createErrorNotice } = (0, import_data.useDispatch)(import_notices.store);
   const dropdownMenuProps = (0, import_hooks.useToolsPanelDropdownMenuProps)();
+  const colorGradientSettings = (0, import_block_editor.__experimentalUseMultipleOriginColorsAndGradients)();
+  const colors = (0, import_element.useMemo)(
+    () => colorGradientSettings.colors.flatMap(
+      (origin) => origin?.colors ?? []
+    ),
+    [colorGradientSettings.colors]
+  );
+  const gradients = (0, import_element.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" });
   }
-  const { updateBlockAttributes } = (0, import_data.useDispatch)(import_block_editor.store);
+  const [currentTrackClientId, setCurrentTrackClientId] = (0, import_element.useState)(null);
   const { innerBlockTracks } = (0, import_data.useSelect)(
     (select) => {
       const { getBlock: _getBlock } = select(import_block_editor.store);
@@ -83,50 +116,37 @@ var PlaylistEdit = ({
     },
     [clientId]
   );
-  (0, import_element.useEffect)(() => {
-    const seen = /* @__PURE__ */ new Set();
-    let hasDuplicates = false;
-    const updatedBlocks = innerBlockTracks.map((block) => {
-      if (seen.has(block.attributes.uniqueId)) {
-        hasDuplicates = true;
-        return {
-          ...block,
-          attributes: {
-            ...block.attributes,
-            uniqueId: (0, import_uuid.v4)()
-          }
-        };
-      }
-      seen.add(block.attributes.uniqueId);
-      return block;
-    });
-    if (hasDuplicates) {
-      replaceInnerBlocks(clientId, updatedBlocks);
-    }
-  }, [innerBlockTracks, clientId, replaceInnerBlocks]);
-  const validTracks = innerBlockTracks.filter(
-    (block) => !!block.attributes.uniqueId
+  const validTracks = (0, import_element.useMemo)(
+    () => innerBlockTracks.filter(
+      (block) => !!block.attributes.src || !!block.attributes.blob
+    ),
+    [innerBlockTracks]
+  );
+  const tracks = (0, import_element.useMemo)(
+    () => validTracks.map((block) => ({
+      ...block.attributes,
+      clientId: block.clientId
+    })),
+    [validTracks]
   );
-  const tracks = validTracks.map((block) => block.attributes);
-  const firstTrackId = validTracks[0]?.attributes?.uniqueId;
   (0, import_element.useEffect)(() => {
-    if (tracks.length === 0) {
-      if (currentTrack !== null) {
-        updateBlockAttributes(clientId, { currentTrack: null });
+    if (validTracks.length === 0) {
+      if (currentTrackClientId !== null) {
+        setCurrentTrackClientId(null);
       }
-    } else if (
-      // If the currentTrack is not the first track, update it to the first track.
-      firstTrackId && firstTrackId !== currentTrack
-    ) {
-      updateBlockAttributes(clientId, { currentTrack: firstTrackId });
+      return;
+    }
+    const currentTrackExists = validTracks.some(
+      (block) => block.clientId === currentTrackClientId
+    );
+    if (!currentTrackExists) {
+      setCurrentTrackClientId(validTracks[0].clientId);
     }
-  }, [
-    tracks,
-    currentTrack,
-    firstTrackId,
-    clientId,
-    updateBlockAttributes
-  ]);
+  }, [currentTrackClientId, setCurrentTrackClientId, validTracks]);
+  const playlistContext = (0, import_element.useMemo)(
+    () => ({ currentTrackClientId, setCurrentTrackClientId }),
+    [currentTrackClientId, setCurrentTrackClientId]
+  );
   const onSelectTracks = (0, import_element.useCallback)(
     (media) => {
       if (!media) {
@@ -136,34 +156,24 @@ var PlaylistEdit = ({
         media = [media];
       }
       const trackList = media.map(import_utils.getTrackAttributes);
-      __unstableMarkNextChangeAsNotPersistent();
-      setAttributes({
-        currentTrack: trackList.length > 0 ? trackList[0].uniqueId : null
-      });
       const newBlocks = trackList.map(
         (track) => (0, import_blocks.createBlock)("core/playlist-track", track)
       );
+      setCurrentTrackClientId(newBlocks[0]?.clientId ?? null);
       replaceInnerBlocks(clientId, newBlocks);
     },
-    [
-      __unstableMarkNextChangeAsNotPersistent,
-      setAttributes,
-      replaceInnerBlocks,
-      clientId
-    ]
-  );
-  const currentTrackData = tracks.find(
-    (track) => track.uniqueId === currentTrack
+    [replaceInnerBlocks, clientId, setCurrentTrackClientId]
   );
+  const currentTrackData = tracks.find((track) => track.clientId === currentTrackClientId) ?? tracks[0];
   const onTrackEnded = (0, import_element.useCallback)(() => {
     const currentIndex = tracks.findIndex(
-      (track) => track.uniqueId === currentTrack
+      (track) => track.clientId === currentTrackClientId
     );
     const nextTrack = tracks[currentIndex + 1] || tracks[0];
-    if (nextTrack?.uniqueId) {
-      setAttributes({ currentTrack: nextTrack.uniqueId });
+    if (nextTrack?.clientId) {
+      setCurrentTrackClientId(nextTrack.clientId);
     }
-  }, [currentTrack, tracks, setAttributes]);
+  }, [currentTrackClientId, setCurrentTrackClientId, tracks]);
   const onChangeOrder = (0, import_element.useCallback)(
     (trackOrder) => {
       const sortedBlocks = [...innerBlockTracks].sort((a, b) => {
@@ -174,19 +184,18 @@ var PlaylistEdit = ({
         }
         return titleB.localeCompare(titleA);
       });
-      const firstUniqueId = sortedBlocks[0]?.attributes?.uniqueId;
       replaceInnerBlocks(clientId, sortedBlocks);
+      setCurrentTrackClientId(sortedBlocks[0]?.clientId ?? null);
       setAttributes({
-        order: trackOrder,
-        currentTrack: firstUniqueId && firstUniqueId !== currentTrack ? firstUniqueId : currentTrack
+        order: trackOrder
       });
     },
     [
       clientId,
-      currentTrack,
       innerBlockTracks,
       replaceInnerBlocks,
-      setAttributes
+      setAttributes,
+      setCurrentTrackClientId
     ]
   );
   function toggleAttribute(attribute) {
@@ -194,11 +203,100 @@ var PlaylistEdit = ({
       setAttributes({ [attribute]: newValue });
     };
   }
+  const onChangeWaveformStyle = (0, import_element.useCallback)(
+    (newWaveformStyle) => {
+      setAttributes({
+        waveformStyle: newWaveformStyle === DEFAULT_WAVEFORM_STYLE ? void 0 : newWaveformStyle
+      });
+    },
+    [setAttributes]
+  );
+  function updateWaveformColor(colorValue) {
+    const isSettingColor = colorValue !== void 0;
+    if (!isSettingColor && waveformColorGradientChange === "gradient") {
+      waveformColorGradientChange = void 0;
+      return;
+    }
+    waveformColorGradientChange = "color";
+    setAttributes({
+      waveformColor: colorValue,
+      waveformGradient: void 0
+    });
+  }
+  function updateWaveformGradient(gradientValue) {
+    const isSettingGradient = gradientValue !== void 0;
+    if (!isSettingGradient && waveformColorGradientChange === "color") {
+      waveformColorGradientChange = void 0;
+      return;
+    }
+    waveformColorGradientChange = "gradient";
+    setAttributes({
+      waveformGradient: gradientValue,
+      waveformColor: void 0
+    });
+  }
+  function updateWaveformBackgroundColor(colorValue) {
+    const isSettingColor = colorValue !== void 0;
+    if (!isSettingColor && waveformBackgroundColorGradientChange === "gradient") {
+      waveformBackgroundColorGradientChange = void 0;
+      return;
+    }
+    waveformBackgroundColorGradientChange = "color";
+    setAttributes({
+      waveformBackgroundColor: colorValue,
+      waveformBackgroundGradient: void 0
+    });
+  }
+  function updateWaveformBackgroundGradient(gradientValue) {
+    const isSettingGradient = gradientValue !== void 0;
+    if (!isSettingGradient && waveformBackgroundColorGradientChange === "color") {
+      waveformBackgroundColorGradientChange = void 0;
+      return;
+    }
+    waveformBackgroundColorGradientChange = "gradient";
+    setAttributes({
+      waveformBackgroundGradient: gradientValue,
+      waveformBackgroundColor: void 0
+    });
+  }
   const hasSelectedChild = (0, import_data.useSelect)(
     (select) => select(import_block_editor.store).hasSelectedInnerBlock(clientId),
     [clientId]
   );
   const hasAnySelected = isSelected || hasSelectedChild;
+  const colorSettings = [];
+  if (hasColors || hasGradients) {
+    colorSettings.push(
+      {
+        colorValue: hasColors ? waveformColor : void 0,
+        gradientValue: hasGradients ? waveformGradientValue : void 0,
+        label: (0, import_i18n.__)("Waveform & Play button"),
+        onColorChange: hasColors ? updateWaveformColor : void 0,
+        onGradientChange: hasGradients ? updateWaveformGradient : void 0,
+        isShownByDefault: true,
+        clearable: true,
+        enableAlpha: true,
+        resetAllFilter: () => ({
+          waveformColor: void 0,
+          waveformGradient: void 0
+        })
+      },
+      {
+        colorValue: hasColors ? waveformBackgroundColor : void 0,
+        gradientValue: hasGradients ? waveformBackgroundGradientValue : void 0,
+        label: (0, import_i18n.__)("Waveform background"),
+        onColorChange: hasColors ? updateWaveformBackgroundColor : void 0,
+        onGradientChange: hasGradients ? updateWaveformBackgroundGradient : void 0,
+        isShownByDefault: true,
+        clearable: true,
+        enableAlpha: true,
+        resetAllFilter: () => ({
+          waveformBackgroundColor: void 0,
+          waveformBackgroundGradient: void 0
+        })
+      }
+    );
+  }
   const innerBlocksProps = (0, import_block_editor.useInnerBlocksProps)(blockProps, {
     __experimentalAppenderTagName: "li",
     renderAppender: hasAnySelected && import_block_editor.InnerBlocks.ButtonBlockAppender
@@ -212,7 +310,7 @@ var PlaylistEdit = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_block_editor.MediaPlaceholder,
           {
-            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockIcon, { icon: import_icons.audio }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockIcon, { icon: import_icons.playlist }),
             labels: {
               title: (0, import_i18n.__)("Playlist"),
               instructions: (0, import_i18n.__)(
@@ -253,6 +351,7 @@ var PlaylistEdit = ({
             showNumbers: true,
             showTrackLength: true,
             showImages: true,
+            showPlayButtonArtwork: false,
             order: "asc"
           });
         },
@@ -261,14 +360,14 @@ var PlaylistEdit = ({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_components.__experimentalToolsPanelItem,
             {
-              label: (0, import_i18n.__)("Show Tracklist"),
+              label: (0, import_i18n.__)("Show tracklist"),
               isShownByDefault: true,
               hasValue: () => showTracklist !== true,
               onDeselect: () => setAttributes({ showTracklist: true }),
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_components.ToggleControl,
                 {
-                  label: (0, import_i18n.__)("Show Tracklist"),
+                  label: (0, import_i18n.__)("Show tracklist"),
                   onChange: toggleAttribute("showTracklist"),
                   checked: showTracklist
                 }
@@ -279,7 +378,7 @@ var PlaylistEdit = ({
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_components.__experimentalToolsPanelItem,
               {
-                label: (0, import_i18n.__)("Show artist name in Tracklist"),
+                label: (0, import_i18n.__)("Show artist name in tracklist"),
                 isShownByDefault: true,
                 hasValue: () => showArtists !== true,
                 onDeselect: () => setAttributes({ showArtists: true }),
@@ -287,7 +386,7 @@ var PlaylistEdit = ({
                   import_components.ToggleControl,
                   {
                     label: (0, import_i18n.__)(
-                      "Show artist name in Tracklist"
+                      "Show artist name in tracklist"
                     ),
                     onChange: toggleAttribute(
                       "showArtists"
@@ -300,14 +399,18 @@ var PlaylistEdit = ({
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_components.__experimentalToolsPanelItem,
               {
-                label: (0, import_i18n.__)("Show number in Tracklist"),
+                label: (0, import_i18n.__)(
+                  "Show track numbers in tracklist"
+                ),
                 isShownByDefault: true,
                 hasValue: () => showNumbers !== true,
                 onDeselect: () => setAttributes({ showNumbers: true }),
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_components.ToggleControl,
                   {
-                    label: (0, import_i18n.__)("Show number in Tracklist"),
+                    label: (0, import_i18n.__)(
+                      "Show track numbers in tracklist"
+                    ),
                     onChange: toggleAttribute(
                       "showNumbers"
                     ),
@@ -319,7 +422,9 @@ var PlaylistEdit = ({
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_components.__experimentalToolsPanelItem,
               {
-                label: (0, import_i18n.__)("Show track length in Tracklist"),
+                label: (0, import_i18n.__)(
+                  "Show track duration in tracklist"
+                ),
                 isShownByDefault: true,
                 hasValue: () => showTrackLength !== true,
                 onDeselect: () => setAttributes({ showTrackLength: true }),
@@ -327,7 +432,7 @@ var PlaylistEdit = ({
                   import_components.ToggleControl,
                   {
                     label: (0, import_i18n.__)(
-                      "Show track length in Tracklist"
+                      "Show track duration in tracklist"
                     ),
                     onChange: toggleAttribute(
                       "showTrackLength"
@@ -341,20 +446,39 @@ var PlaylistEdit = ({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_components.__experimentalToolsPanelItem,
             {
-              label: (0, import_i18n.__)("Show images"),
+              label: (0, import_i18n.__)("Show tracklist images"),
               isShownByDefault: true,
               hasValue: () => showImages !== true,
               onDeselect: () => setAttributes({ showImages: true }),
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_components.ToggleControl,
                 {
-                  label: (0, import_i18n.__)("Show images"),
+                  label: (0, import_i18n.__)("Show tracklist images"),
                   onChange: toggleAttribute("showImages"),
                   checked: showImages
                 }
               )
             }
           ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToolsPanelItem,
+            {
+              label: (0, import_i18n.__)("Show track image on play button"),
+              isShownByDefault: true,
+              hasValue: () => showPlayButtonArtwork === true,
+              onDeselect: () => setAttributes({ showPlayButtonArtwork: false }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.ToggleControl,
+                {
+                  label: (0, import_i18n.__)("Show track image on play button"),
+                  onChange: toggleAttribute(
+                    "showPlayButtonArtwork"
+                  ),
+                  checked: showPlayButtonArtwork === true
+                }
+              )
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_components.__experimentalToolsPanelItem,
             {
@@ -365,7 +489,6 @@ var PlaylistEdit = ({
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_components.SelectControl,
                 {
-                  __next40pxDefaultSize: true,
                   label: (0, import_i18n.__)("Order"),
                   value: order,
                   options: [
@@ -380,6 +503,53 @@ var PlaylistEdit = ({
         ]
       }
     ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { group: "styles", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.__experimentalToolsPanel,
+      {
+        label: (0, import_i18n.__)("Waveform"),
+        resetAll: () => {
+          setAttributes({
+            waveformStyle: void 0,
+            waveformColor: void 0,
+            waveformGradient: void 0,
+            waveformBackgroundColor: void 0,
+            waveformBackgroundGradient: void 0
+          });
+        },
+        panelId: waveformPanelId,
+        dropdownMenuProps,
+        children: [
+          colorSettings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "wp-block-playlist__waveform-color-controls", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_block_editor.__experimentalColorGradientSettingsDropdown,
+            {
+              __experimentalIsRenderedInSidebar: true,
+              settings: colorSettings,
+              panelId: waveformPanelId,
+              ...colorGradientSettings
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToolsPanelItem,
+            {
+              label: (0, import_i18n.__)("Shape"),
+              isShownByDefault: true,
+              hasValue: () => waveformStyle !== DEFAULT_WAVEFORM_STYLE,
+              onDeselect: () => onChangeWaveformStyle(DEFAULT_WAVEFORM_STYLE),
+              panelId: waveformPanelId,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_components.SelectControl,
+                {
+                  label: (0, import_i18n.__)("Shape"),
+                  value: waveformStyle,
+                  options: WAVEFORM_STYLE_OPTIONS,
+                  onChange: onChangeWaveformStyle
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { ...blockProps, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Disabled, { isDisabled: !isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_waveform_player.WaveformPlayer,
@@ -388,8 +558,14 @@ var PlaylistEdit = ({
           title: currentTrackData?.title,
           artist: currentTrackData?.artist,
           image: currentTrackData?.image,
+          imageAlt: currentTrackData?.imageAlt,
           waveformStyle,
-          onEnded: onTrackEnded
+          color: waveformColor,
+          gradient: waveformGradientValue,
+          backgroundColor: waveformBackgroundColor,
+          backgroundGradient: waveformBackgroundGradientValue,
+          onEnded: onTrackEnded,
+          showPlayButtonArtwork: showPlayButtonArtwork === true
         }
       ) }),
       showTracklist && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -399,7 +575,7 @@ var PlaylistEdit = ({
             "wp-block-playlist__tracklist-show-numbers": showNumbers,
             "wp-block-playlist__tracklist-length-is-hidden": !showTrackLength
           }),
-          children: innerBlocksProps.children
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.PlaylistContext.Provider, { value: playlistContext, children: innerBlocksProps.children })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(