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

package/build/playlist/edit.cjs

@@ -42,6 +42,7 @@ var import_notices = require("@wordpress/notices");
 var import_i18n = require("@wordpress/i18n");
 var import_icons = require("@wordpress/icons");
 var import_blocks = require("@wordpress/blocks");
+var import_blob = require("@wordpress/blob");
 var import_caption = require("../utils/caption.cjs");
 var import_hooks = require("../utils/hooks.cjs");
 var import_waveform_player = require("../utils/waveform-player.cjs");
@@ -49,6 +50,26 @@ 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 AUDIO_FILE_EXTENSION = /\.(aac|aif|aiff|flac|m4a|m4b|mp3|oga|ogg|opus|wav|weba)$/i;
+var DEFAULT_WAVEFORM_STYLE = "bars";
+var FILE_LIST_OBJECT_NAME = "[object FileList]";
+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" }
+];
+function isFile(value) {
+  return Object.prototype.toString.call(value) === "[object File]" || typeof File !== "undefined" && value instanceof File;
+}
+function isAudioFile(file) {
+  return file.type ? file.type.startsWith("audio/") : AUDIO_FILE_EXTENSION.test(file.name);
+}
+function getTrackIdentifier(track) {
+  return track.id ?? track.src ?? track.blob;
+}
 var PlaylistEdit = ({
   attributes,
   setAttributes,
@@ -61,17 +82,45 @@ var PlaylistEdit = ({
     showTracklist,
     showNumbers,
     showImages,
+    showPlayButtonArtwork,
     showArtists,
-    showTrackLength
+    showTrackLength,
+    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 } = (0, import_data.useDispatch)(import_block_editor.store);
+  const waveformPanelId = `${clientId}-waveform`;
+  const { replaceInnerBlocks, selectBlock } = (0, import_data.useDispatch)(import_block_editor.store);
   const { createErrorNotice } = (0, import_data.useDispatch)(import_notices.store);
   const dropdownMenuProps = (0, import_hooks.useToolsPanelDropdownMenuProps)();
-  function onUploadError(message) {
-    createErrorNotice(message, { type: "snackbar" });
-  }
+  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;
+  const onUploadError = (0, import_element.useCallback)(
+    (message) => {
+      createErrorNotice(message, { type: "snackbar" });
+    },
+    [createErrorNotice]
+  );
   const [currentTrackClientId, setCurrentTrackClientId] = (0, import_element.useState)(null);
   const { innerBlockTracks } = (0, import_data.useSelect)(
     (select) => {
@@ -109,26 +158,89 @@ var PlaylistEdit = ({
       setCurrentTrackClientId(validTracks[0].clientId);
     }
   }, [currentTrackClientId, setCurrentTrackClientId, validTracks]);
-  const playlistContext = (0, import_element.useMemo)(
-    () => ({ currentTrackClientId, setCurrentTrackClientId }),
-    [currentTrackClientId, setCurrentTrackClientId]
+  const createTrackBlocks = (0, import_element.useCallback)(
+    (media) => {
+      if (!media) {
+        return [];
+      }
+      let mediaItems = [media];
+      if (Object.prototype.toString.call(media) === FILE_LIST_OBJECT_NAME) {
+        mediaItems = Array.from(media);
+      } else if (Array.isArray(media)) {
+        mediaItems = media;
+      }
+      let hasInvalidFile = false;
+      const blocks = mediaItems.map((mediaItem) => {
+        if (isFile(mediaItem)) {
+          if (!isAudioFile(mediaItem)) {
+            hasInvalidFile = true;
+            return null;
+          }
+          return (0, import_blocks.createBlock)("core/playlist-track", {
+            blob: (0, import_blob.createBlobURL)(mediaItem),
+            title: mediaItem.name
+          });
+        }
+        const track = (0, import_utils.getTrackAttributes)(mediaItem);
+        return track.src ? (0, import_blocks.createBlock)("core/playlist-track", track) : null;
+      }).filter(Boolean);
+      if (hasInvalidFile) {
+        onUploadError(
+          (0, import_i18n.__)("Only audio files can be added to a playlist.")
+        );
+      }
+      return blocks;
+    },
+    [onUploadError]
   );
   const onSelectTracks = (0, import_element.useCallback)(
     (media) => {
-      if (!media) {
+      const newBlocks = createTrackBlocks(media);
+      if (newBlocks.length === 0) {
         return;
       }
-      if (!Array.isArray(media)) {
-        media = [media];
-      }
-      const trackList = media.map(import_utils.getTrackAttributes);
-      const newBlocks = trackList.map(
-        (track) => (0, import_blocks.createBlock)("core/playlist-track", track)
-      );
       setCurrentTrackClientId(newBlocks[0]?.clientId ?? null);
       replaceInnerBlocks(clientId, newBlocks);
     },
-    [replaceInnerBlocks, clientId, setCurrentTrackClientId]
+    [
+      clientId,
+      createTrackBlocks,
+      replaceInnerBlocks,
+      setCurrentTrackClientId
+    ]
+  );
+  const onAddTracks = (0, import_element.useCallback)(
+    (media) => {
+      const existingIds = new Set(
+        validTracks.map((block) => getTrackIdentifier(block.attributes)).filter(Boolean)
+      );
+      const newBlocks = createTrackBlocks(media).filter(
+        (block) => !existingIds.has(getTrackIdentifier(block.attributes))
+      );
+      if (newBlocks.length === 0) {
+        return;
+      }
+      const nextBlocks = [...validTracks, ...newBlocks];
+      setCurrentTrackClientId(newBlocks[0].clientId);
+      replaceInnerBlocks(clientId, nextBlocks);
+      selectBlock(newBlocks[0].clientId);
+    },
+    [
+      clientId,
+      createTrackBlocks,
+      replaceInnerBlocks,
+      selectBlock,
+      setCurrentTrackClientId,
+      validTracks
+    ]
+  );
+  const playlistContext = (0, import_element.useMemo)(
+    () => ({
+      currentTrackClientId,
+      setCurrentTrackClientId,
+      addTracks: onAddTracks
+    }),
+    [currentTrackClientId, onAddTracks, setCurrentTrackClientId]
   );
   const currentTrackData = tracks.find((track) => track.clientId === currentTrackClientId) ?? tracks[0];
   const onTrackEnded = (0, import_element.useCallback)(() => {
@@ -169,14 +281,98 @@ var PlaylistEdit = ({
       setAttributes({ [attribute]: newValue });
     };
   }
-  const hasSelectedChild = (0, import_data.useSelect)(
-    (select) => select(import_block_editor.store).hasSelectedInnerBlock(clientId),
-    [clientId]
+  const onChangeWaveformStyle = (0, import_element.useCallback)(
+    (newWaveformStyle) => {
+      setAttributes({
+        waveformStyle: newWaveformStyle === DEFAULT_WAVEFORM_STYLE ? void 0 : newWaveformStyle
+      });
+    },
+    [setAttributes]
   );
-  const hasAnySelected = isSelected || hasSelectedChild;
+  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 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
+    renderAppender: false
   });
   if (tracks.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -187,7 +383,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.__)(
@@ -197,6 +393,7 @@ var PlaylistEdit = ({
             onSelect: onSelectTracks,
             accept: "audio/*",
             multiple: true,
+            handleUpload: false,
             allowedTypes: ALLOWED_MEDIA_TYPES,
             onError: onUploadError
           }
@@ -208,11 +405,11 @@ var PlaylistEdit = ({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: "other", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_block_editor.MediaReplaceFlow,
       {
-        name: (0, import_i18n.__)("Edit"),
-        onSelect: onSelectTracks,
+        name: (0, import_i18n.__)("Add"),
+        onSelect: onAddTracks,
         accept: "audio/*",
         multiple: true,
-        mediaIds: tracks.filter((track) => track.id).map((track) => track.id),
+        handleUpload: false,
         allowedTypes: ALLOWED_MEDIA_TYPES,
         onError: onUploadError
       }
@@ -228,6 +425,7 @@ var PlaylistEdit = ({
             showNumbers: true,
             showTrackLength: true,
             showImages: true,
+            showPlayButtonArtwork: false,
             order: "asc"
           });
         },
@@ -236,14 +434,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
                 }
@@ -254,7 +452,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 }),
@@ -262,7 +460,7 @@ var PlaylistEdit = ({
                   import_components.ToggleControl,
                   {
                     label: (0, import_i18n.__)(
-                      "Show artist name in Tracklist"
+                      "Show artist name in tracklist"
                     ),
                     onChange: toggleAttribute(
                       "showArtists"
@@ -275,14 +473,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"
                     ),
@@ -294,7 +496,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 }),
@@ -302,7 +506,7 @@ var PlaylistEdit = ({
                   import_components.ToggleControl,
                   {
                     label: (0, import_i18n.__)(
-                      "Show track length in Tracklist"
+                      "Show track duration in tracklist"
                     ),
                     onChange: toggleAttribute(
                       "showTrackLength"
@@ -316,20 +520,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,
             {
@@ -354,7 +577,66 @@ 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_block_editor.MediaPlaceholder,
+        {
+          onSelect: onAddTracks,
+          accept: "audio/*",
+          multiple: true,
+          handleUpload: false,
+          disableMediaButtons: true,
+          allowedTypes: ALLOWED_MEDIA_TYPES,
+          onError: onUploadError
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Disabled, { isDisabled: !isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_waveform_player.WaveformPlayer,
         {
@@ -362,14 +644,21 @@ 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)(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "ol",
         {
           className: (0, import_clsx.default)("wp-block-playlist__tracklist", {
+            "wp-block-playlist__tracklist-is-hidden": !showTracklist,
             "wp-block-playlist__tracklist-show-numbers": showNumbers,
             "wp-block-playlist__tracklist-length-is-hidden": !showTrackLength
           }),