@wordpress/block-library 10.1.0 → 10.2.0

package/build-module/playlist/edit.mjs

@@ -1,7 +1,6 @@
 // packages/block-library/src/playlist/edit.js
 import clsx from "clsx";
-import { v4 as uuid } from "uuid";
-import { useCallback, useEffect } from "@wordpress/element";
+import { useCallback, useEffect, useMemo, useState } from "@wordpress/element";
 import {
   store as blockEditorStore,
   MediaPlaceholder,
@@ -11,7 +10,9 @@ import {
   useInnerBlocksProps,
   BlockControls,
   InspectorControls,
-  InnerBlocks
+  InnerBlocks,
+  __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+  __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients
 } from "@wordpress/block-editor";
 import {
   ToggleControl,
@@ -22,15 +23,25 @@ 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 { Caption } from "../utils/caption.mjs";
 import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
 import { WaveformPlayer } from "../utils/waveform-player.mjs";
+import { PlaylistContext } from "./context.mjs";
 import { getTrackAttributes } from "./utils.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ALLOWED_MEDIA_TYPES = ["audio"];
+var DEFAULT_WAVEFORM_STYLE = "bars";
+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" }
+];
 var PlaylistEdit = ({
   attributes,
   setAttributes,
@@ -43,19 +54,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 = useBlockProps();
-  const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
+  const waveformPanelId = `${clientId}-waveform`;
+  const { replaceInnerBlocks } = useDispatch(blockEditorStore);
   const { createErrorNotice } = useDispatch(noticesStore);
   const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+  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;
   function onUploadError(message) {
     createErrorNotice(message, { type: "snackbar" });
   }
-  const { updateBlockAttributes } = useDispatch(blockEditorStore);
+  const [currentTrackClientId, setCurrentTrackClientId] = useState(null);
   const { innerBlockTracks } = useSelect(
     (select) => {
       const { getBlock: _getBlock } = select(blockEditorStore);
@@ -65,50 +100,37 @@ var PlaylistEdit = ({
     },
     [clientId]
   );
-  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: uuid()
-          }
-        };
-      }
-      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 = useMemo(
+    () => innerBlockTracks.filter(
+      (block) => !!block.attributes.src || !!block.attributes.blob
+    ),
+    [innerBlockTracks]
+  );
+  const tracks = useMemo(
+    () => validTracks.map((block) => ({
+      ...block.attributes,
+      clientId: block.clientId
+    })),
+    [validTracks]
   );
-  const tracks = validTracks.map((block) => block.attributes);
-  const firstTrackId = validTracks[0]?.attributes?.uniqueId;
   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 = useMemo(
+    () => ({ currentTrackClientId, setCurrentTrackClientId }),
+    [currentTrackClientId, setCurrentTrackClientId]
+  );
   const onSelectTracks = useCallback(
     (media) => {
       if (!media) {
@@ -118,34 +140,24 @@ var PlaylistEdit = ({
         media = [media];
       }
       const trackList = media.map(getTrackAttributes);
-      __unstableMarkNextChangeAsNotPersistent();
-      setAttributes({
-        currentTrack: trackList.length > 0 ? trackList[0].uniqueId : null
-      });
       const newBlocks = trackList.map(
         (track) => 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 = 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 = useCallback(
     (trackOrder) => {
       const sortedBlocks = [...innerBlockTracks].sort((a, b) => {
@@ -156,19 +168,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) {
@@ -176,11 +187,100 @@ var PlaylistEdit = ({
       setAttributes({ [attribute]: newValue });
     };
   }
+  const onChangeWaveformStyle = 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 = useSelect(
     (select) => select(blockEditorStore).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: __("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
@@ -235,6 +335,7 @@ var PlaylistEdit = ({
             showNumbers: true,
             showTrackLength: true,
             showImages: true,
+            showPlayButtonArtwork: false,
             order: "asc"
           });
         },
@@ -243,14 +344,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
                 }
@@ -261,7 +362,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 }),
@@ -269,7 +370,7 @@ var PlaylistEdit = ({
                   ToggleControl,
                   {
                     label: __(
-                      "Show artist name in Tracklist"
+                      "Show artist name in tracklist"
                     ),
                     onChange: toggleAttribute(
                       "showArtists"
@@ -282,14 +383,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"
                     ),
@@ -301,7 +406,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 }),
@@ -309,7 +416,7 @@ var PlaylistEdit = ({
                   ToggleControl,
                   {
                     label: __(
-                      "Show track length in Tracklist"
+                      "Show track duration in tracklist"
                     ),
                     onChange: toggleAttribute(
                       "showTrackLength"
@@ -323,20 +430,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,
             {
@@ -347,7 +473,6 @@ var PlaylistEdit = ({
               children: /* @__PURE__ */ jsx(
                 SelectControl,
                 {
-                  __next40pxDefaultSize: true,
                   label: __("Order"),
                   value: order,
                   options: [
@@ -362,6 +487,53 @@ 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(Disabled, { isDisabled: !isSelected, children: /* @__PURE__ */ jsx(
         WaveformPlayer,
@@ -370,8 +542,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__ */ jsx(
@@ -381,7 +559,7 @@ var PlaylistEdit = ({
             "wp-block-playlist__tracklist-show-numbers": showNumbers,
             "wp-block-playlist__tracklist-length-is-hidden": !showTrackLength
           }),
-          children: innerBlocksProps.children
+          children: /* @__PURE__ */ jsx(PlaylistContext.Provider, { value: playlistContext, children: innerBlocksProps.children })
         }
       ),
       /* @__PURE__ */ jsx(