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

package/build-module/playlist/edit.mjs

@@ -10,7 +10,8 @@ import {
   useInnerBlocksProps,
   BlockControls,
   InspectorControls,
-  InnerBlocks
+  __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+  __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients
 } from "@wordpress/block-editor";
 import {
   ToggleControl,
@@ -21,9 +22,10 @@ import {
 } from "@wordpress/components";
 import { useSelect, useDispatch } from "@wordpress/data";
 import { store as noticesStore } from "@wordpress/notices";
-import { __ } from "@wordpress/i18n";
-import { audio as icon } from "@wordpress/icons";
+import { __, _x } from "@wordpress/i18n";
+import { playlist as icon } from "@wordpress/icons";
 import { createBlock } from "@wordpress/blocks";
+import { createBlobURL } from "@wordpress/blob";
 import { Caption } from "../utils/caption.mjs";
 import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
 import { WaveformPlayer } from "../utils/waveform-player.mjs";
@@ -31,6 +33,26 @@ import { PlaylistContext } from "./context.mjs";
 import { getTrackAttributes } from "./utils.mjs";
 import { Fragment, jsx, jsxs } from "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: _x("Bars", "waveform style option"), value: "bars" },
+  { label: _x("Mirror", "waveform style option"), value: "mirror" },
+  { label: _x("Line", "waveform style option"), value: "line" },
+  { label: _x("Blocks", "waveform style option"), value: "blocks" },
+  { label: _x("Dots", "waveform style option"), value: "dots" },
+  { label: _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,
@@ -43,17 +65,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 = useBlockProps();
-  const { replaceInnerBlocks } = useDispatch(blockEditorStore);
+  const waveformPanelId = `${clientId}-waveform`;
+  const { replaceInnerBlocks, selectBlock } = useDispatch(blockEditorStore);
   const { createErrorNotice } = useDispatch(noticesStore);
   const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-  function onUploadError(message) {
-    createErrorNotice(message, { type: "snackbar" });
-  }
+  const colorGradientSettings = useMultipleOriginColorsAndGradients();
+  const colors = useMemo(
+    () => colorGradientSettings.colors.flatMap(
+      (origin) => origin?.colors ?? []
+    ),
+    [colorGradientSettings.colors]
+  );
+  const gradients = 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 = useCallback(
+    (message) => {
+      createErrorNotice(message, { type: "snackbar" });
+    },
+    [createErrorNotice]
+  );
   const [currentTrackClientId, setCurrentTrackClientId] = useState(null);
   const { innerBlockTracks } = useSelect(
     (select) => {
@@ -91,26 +141,89 @@ var PlaylistEdit = ({
       setCurrentTrackClientId(validTracks[0].clientId);
     }
   }, [currentTrackClientId, setCurrentTrackClientId, validTracks]);
-  const playlistContext = useMemo(
-    () => ({ currentTrackClientId, setCurrentTrackClientId }),
-    [currentTrackClientId, setCurrentTrackClientId]
+  const createTrackBlocks = 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 createBlock("core/playlist-track", {
+            blob: createBlobURL(mediaItem),
+            title: mediaItem.name
+          });
+        }
+        const track = getTrackAttributes(mediaItem);
+        return track.src ? createBlock("core/playlist-track", track) : null;
+      }).filter(Boolean);
+      if (hasInvalidFile) {
+        onUploadError(
+          __("Only audio files can be added to a playlist.")
+        );
+      }
+      return blocks;
+    },
+    [onUploadError]
   );
   const onSelectTracks = useCallback(
     (media) => {
-      if (!media) {
+      const newBlocks = createTrackBlocks(media);
+      if (newBlocks.length === 0) {
         return;
       }
-      if (!Array.isArray(media)) {
-        media = [media];
-      }
-      const trackList = media.map(getTrackAttributes);
-      const newBlocks = trackList.map(
-        (track) => createBlock("core/playlist-track", track)
-      );
       setCurrentTrackClientId(newBlocks[0]?.clientId ?? null);
       replaceInnerBlocks(clientId, newBlocks);
     },
-    [replaceInnerBlocks, clientId, setCurrentTrackClientId]
+    [
+      clientId,
+      createTrackBlocks,
+      replaceInnerBlocks,
+      setCurrentTrackClientId
+    ]
+  );
+  const onAddTracks = 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 = useMemo(
+    () => ({
+      currentTrackClientId,
+      setCurrentTrackClientId,
+      addTracks: onAddTracks
+    }),
+    [currentTrackClientId, onAddTracks, setCurrentTrackClientId]
   );
   const currentTrackData = tracks.find((track) => track.clientId === currentTrackClientId) ?? tracks[0];
   const onTrackEnded = useCallback(() => {
@@ -151,14 +264,98 @@ var PlaylistEdit = ({
       setAttributes({ [attribute]: newValue });
     };
   }
-  const hasSelectedChild = useSelect(
-    (select) => select(blockEditorStore).hasSelectedInnerBlock(clientId),
-    [clientId]
+  const onChangeWaveformStyle = 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: __("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: __("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 = useInnerBlocksProps(blockProps, {
     __experimentalAppenderTagName: "li",
-    renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender
+    renderAppender: false
   });
   if (tracks.length === 0) {
     return /* @__PURE__ */ jsx(
@@ -179,6 +376,7 @@ var PlaylistEdit = ({
             onSelect: onSelectTracks,
             accept: "audio/*",
             multiple: true,
+            handleUpload: false,
             allowedTypes: ALLOWED_MEDIA_TYPES,
             onError: onUploadError
           }
@@ -190,11 +388,11 @@ var PlaylistEdit = ({
     /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(
       MediaReplaceFlow,
       {
-        name: __("Edit"),
-        onSelect: onSelectTracks,
+        name: __("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
       }
@@ -210,6 +408,7 @@ var PlaylistEdit = ({
             showNumbers: true,
             showTrackLength: true,
             showImages: true,
+            showPlayButtonArtwork: false,
             order: "asc"
           });
         },
@@ -218,14 +417,14 @@ var PlaylistEdit = ({
           /* @__PURE__ */ jsx(
             ToolsPanelItem,
             {
-              label: __("Show Tracklist"),
+              label: __("Show tracklist"),
               isShownByDefault: true,
               hasValue: () => showTracklist !== true,
               onDeselect: () => setAttributes({ showTracklist: true }),
               children: /* @__PURE__ */ jsx(
                 ToggleControl,
                 {
-                  label: __("Show Tracklist"),
+                  label: __("Show tracklist"),
                   onChange: toggleAttribute("showTracklist"),
                   checked: showTracklist
                 }
@@ -236,7 +435,7 @@ var PlaylistEdit = ({
             /* @__PURE__ */ jsx(
               ToolsPanelItem,
               {
-                label: __("Show artist name in Tracklist"),
+                label: __("Show artist name in tracklist"),
                 isShownByDefault: true,
                 hasValue: () => showArtists !== true,
                 onDeselect: () => setAttributes({ showArtists: true }),
@@ -244,7 +443,7 @@ var PlaylistEdit = ({
                   ToggleControl,
                   {
                     label: __(
-                      "Show artist name in Tracklist"
+                      "Show artist name in tracklist"
                     ),
                     onChange: toggleAttribute(
                       "showArtists"
@@ -257,14 +456,18 @@ var PlaylistEdit = ({
             /* @__PURE__ */ jsx(
               ToolsPanelItem,
               {
-                label: __("Show number in Tracklist"),
+                label: __(
+                  "Show track numbers in tracklist"
+                ),
                 isShownByDefault: true,
                 hasValue: () => showNumbers !== true,
                 onDeselect: () => setAttributes({ showNumbers: true }),
                 children: /* @__PURE__ */ jsx(
                   ToggleControl,
                   {
-                    label: __("Show number in Tracklist"),
+                    label: __(
+                      "Show track numbers in tracklist"
+                    ),
                     onChange: toggleAttribute(
                       "showNumbers"
                     ),
@@ -276,7 +479,9 @@ var PlaylistEdit = ({
             /* @__PURE__ */ jsx(
               ToolsPanelItem,
               {
-                label: __("Show track length in Tracklist"),
+                label: __(
+                  "Show track duration in tracklist"
+                ),
                 isShownByDefault: true,
                 hasValue: () => showTrackLength !== true,
                 onDeselect: () => setAttributes({ showTrackLength: true }),
@@ -284,7 +489,7 @@ var PlaylistEdit = ({
                   ToggleControl,
                   {
                     label: __(
-                      "Show track length in Tracklist"
+                      "Show track duration in tracklist"
                     ),
                     onChange: toggleAttribute(
                       "showTrackLength"
@@ -298,20 +503,39 @@ var PlaylistEdit = ({
           /* @__PURE__ */ jsx(
             ToolsPanelItem,
             {
-              label: __("Show images"),
+              label: __("Show tracklist images"),
               isShownByDefault: true,
               hasValue: () => showImages !== true,
               onDeselect: () => setAttributes({ showImages: true }),
               children: /* @__PURE__ */ jsx(
                 ToggleControl,
                 {
-                  label: __("Show images"),
+                  label: __("Show tracklist images"),
                   onChange: toggleAttribute("showImages"),
                   checked: showImages
                 }
               )
             }
           ),
+          /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              label: __("Show track image on play button"),
+              isShownByDefault: true,
+              hasValue: () => showPlayButtonArtwork === true,
+              onDeselect: () => setAttributes({ showPlayButtonArtwork: false }),
+              children: /* @__PURE__ */ jsx(
+                ToggleControl,
+                {
+                  label: __("Show track image on play button"),
+                  onChange: toggleAttribute(
+                    "showPlayButtonArtwork"
+                  ),
+                  checked: showPlayButtonArtwork === true
+                }
+              )
+            }
+          ),
           /* @__PURE__ */ jsx(
             ToolsPanelItem,
             {
@@ -336,7 +560,66 @@ var PlaylistEdit = ({
         ]
       }
     ) }),
+    /* @__PURE__ */ jsx(InspectorControls, { group: "styles", children: /* @__PURE__ */ jsxs(
+      ToolsPanel,
+      {
+        label: __("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__ */ jsx("div", { className: "wp-block-playlist__waveform-color-controls", children: /* @__PURE__ */ jsx(
+            ColorGradientSettingsDropdown,
+            {
+              __experimentalIsRenderedInSidebar: true,
+              settings: colorSettings,
+              panelId: waveformPanelId,
+              ...colorGradientSettings
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            ToolsPanelItem,
+            {
+              label: __("Shape"),
+              isShownByDefault: true,
+              hasValue: () => waveformStyle !== DEFAULT_WAVEFORM_STYLE,
+              onDeselect: () => onChangeWaveformStyle(DEFAULT_WAVEFORM_STYLE),
+              panelId: waveformPanelId,
+              children: /* @__PURE__ */ jsx(
+                SelectControl,
+                {
+                  label: __("Shape"),
+                  value: waveformStyle,
+                  options: WAVEFORM_STYLE_OPTIONS,
+                  onChange: onChangeWaveformStyle
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }),
     /* @__PURE__ */ jsxs("figure", { ...blockProps, children: [
+      /* @__PURE__ */ jsx(
+        MediaPlaceholder,
+        {
+          onSelect: onAddTracks,
+          accept: "audio/*",
+          multiple: true,
+          handleUpload: false,
+          disableMediaButtons: true,
+          allowedTypes: ALLOWED_MEDIA_TYPES,
+          onError: onUploadError
+        }
+      ),
       /* @__PURE__ */ jsx(Disabled, { isDisabled: !isSelected, children: /* @__PURE__ */ jsx(
         WaveformPlayer,
         {
@@ -344,14 +627,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__ */ jsx(
+      /* @__PURE__ */ jsx(
         "ol",
         {
           className: clsx("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
           }),