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

package/build-module/tabs/use-tab-list-items-sync.mjs

@@ -2,7 +2,25 @@
 import { store as blockEditorStore } from "@wordpress/block-editor";
 import { useDispatch, useSelect } from "@wordpress/data";
 import { useEffect } from "@wordpress/element";
-function useTabListItemsSync({ tabPanels, tabListClientId }) {
+var EMPTY_ARRAY = [];
+function useTabListItemsSync(tabsClientId) {
+  const { tabPanels, tabListClientId } = useSelect(
+    (select) => {
+      const { getBlocks } = select(blockEditorStore);
+      const innerBlocks = getBlocks(tabsClientId);
+      const tabPanelsBlock = innerBlocks.find(
+        (block) => block.name === "core/tab-panels"
+      );
+      const tabList = innerBlocks.find(
+        (block) => block.name === "core/tab-list"
+      );
+      return {
+        tabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,
+        tabListClientId: tabList?.clientId ?? null
+      };
+    },
+    [tabsClientId]
+  );
   const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
   const { getBlockAttributes } = useSelect(blockEditorStore);
   useEffect(() => {

package/build-module/tabs/use-tab-list-items-sync.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/use-tab-list-items-sync.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Keep the tab-list block's `tabs` attribute in sync with the tab-panel blocks.\n *\n * Whenever the list of core/tab-panel blocks changes (add, remove, reorder, or\n * label edit), this hook updates the `tabs` attribute on the core/tab-list\n * block so that save.js can render the correct buttons.\n *\n * @param {Object}      props\n * @param {Array}       props.tabPanels       Raw core/tab-panel block objects.\n * @param {string|null} props.tabListClientId Client ID of the core/tab-list block.\n */\nexport default function useTabListItemsSync( { tabPanels, tabListClientId } ) {\n\tconst { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst { getBlockAttributes } = useSelect( blockEditorStore );\n\n\tuseEffect( () => {\n\t\tif ( ! tabListClientId ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newTabs = tabPanels.map( ( tab ) => ( {\n\t\t\tlabel: tab.attributes.label || '',\n\t\t} ) );\n\n\t\t// Skip the update when the stored tabs already match the derived ones.\n\t\tconst currentTabs = getBlockAttributes( tabListClientId )?.tabs ?? [];\n\t\tif ( JSON.stringify( newTabs ) === JSON.stringify( currentTabs ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tupdateBlockAttributes( tabListClientId, { tabs: newTabs } );\n\t}, [\n\t\ttabPanels,\n\t\ttabListClientId,\n\t\tgetBlockAttributes,\n\t\tupdateBlockAttributes,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t] );\n}\n"],
-  "mappings": ";AAGA,SAAS,SAAS,wBAAwB;AAC1C,SAAS,aAAa,iBAAiB;AACvC,SAAS,iBAAiB;AAaX,SAAR,oBAAsC,EAAE,WAAW,gBAAgB,GAAI;AAC7E,QAAM,EAAE,uBAAuB,wCAAwC,IACtE,YAAa,gBAAiB;AAC/B,QAAM,EAAE,mBAAmB,IAAI,UAAW,gBAAiB;AAE3D,YAAW,MAAM;AAChB,QAAK,CAAE,iBAAkB;AACxB;AAAA,IACD;AAEA,UAAM,UAAU,UAAU,IAAK,CAAE,SAAW;AAAA,MAC3C,OAAO,IAAI,WAAW,SAAS;AAAA,IAChC,EAAI;AAGJ,UAAM,cAAc,mBAAoB,eAAgB,GAAG,QAAQ,CAAC;AACpE,QAAK,KAAK,UAAW,OAAQ,MAAM,KAAK,UAAW,WAAY,GAAI;AAClE;AAAA,IACD;AAEA,4CAAwC;AACxC,0BAAuB,iBAAiB,EAAE,MAAM,QAAQ,CAAE;AAAA,EAC3D,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACH;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { useEffect } from '@wordpress/element';\n\nconst EMPTY_ARRAY = [];\n\n/**\n * Keep the tab-list block's `tabs` attribute in sync with the tab-panel blocks.\n *\n * Whenever the list of core/tab-panel blocks changes (add, remove, reorder, or\n * label edit), this hook updates the `tabs` attribute on the core/tab-list\n * block so that save.js can render the correct buttons.\n *\n * @param {string} tabsClientId Client ID of the core/tabs block.\n */\nexport default function useTabListItemsSync( tabsClientId ) {\n\tconst { tabPanels, tabListClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( tabsClientId );\n\n\t\t\tconst tabPanelsBlock = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panels'\n\t\t\t);\n\t\t\tconst tabList = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-list'\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\ttabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t\ttabListClientId: tabList?.clientId ?? null,\n\t\t\t};\n\t\t},\n\t\t[ tabsClientId ]\n\t);\n\n\tconst { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst { getBlockAttributes } = useSelect( blockEditorStore );\n\n\tuseEffect( () => {\n\t\tif ( ! tabListClientId ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newTabs = tabPanels.map( ( tab ) => ( {\n\t\t\tlabel: tab.attributes.label || '',\n\t\t} ) );\n\n\t\t// Skip the update when the stored tabs already match the derived ones.\n\t\tconst currentTabs = getBlockAttributes( tabListClientId )?.tabs ?? [];\n\t\tif ( JSON.stringify( newTabs ) === JSON.stringify( currentTabs ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tupdateBlockAttributes( tabListClientId, { tabs: newTabs } );\n\t}, [\n\t\ttabPanels,\n\t\ttabListClientId,\n\t\tgetBlockAttributes,\n\t\tupdateBlockAttributes,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t] );\n}\n"],
+  "mappings": ";AAGA,SAAS,SAAS,wBAAwB;AAC1C,SAAS,aAAa,iBAAiB;AACvC,SAAS,iBAAiB;AAE1B,IAAM,cAAc,CAAC;AAWN,SAAR,oBAAsC,cAAe;AAC3D,QAAM,EAAE,WAAW,gBAAgB,IAAI;AAAA,IACtC,CAAE,WAAY;AACb,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,YAAa;AAE5C,YAAM,iBAAiB,YAAY;AAAA,QAClC,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,UAAU,YAAY;AAAA,QAC3B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AAEA,aAAO;AAAA,QACN,WAAW,gBAAgB,eAAe;AAAA,QAC1C,iBAAiB,SAAS,YAAY;AAAA,MACvC;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,EAAE,uBAAuB,wCAAwC,IACtE,YAAa,gBAAiB;AAC/B,QAAM,EAAE,mBAAmB,IAAI,UAAW,gBAAiB;AAE3D,YAAW,MAAM;AAChB,QAAK,CAAE,iBAAkB;AACxB;AAAA,IACD;AAEA,UAAM,UAAU,UAAU,IAAK,CAAE,SAAW;AAAA,MAC3C,OAAO,IAAI,WAAW,SAAS;AAAA,IAChC,EAAI;AAGJ,UAAM,cAAc,mBAAoB,eAAgB,GAAG,QAAQ,CAAC;AACpE,QAAK,KAAK,UAAW,OAAQ,MAAM,KAAK,UAAW,WAAY,GAAI;AAClE;AAAA,IACD;AAEA,4CAAwC;AACxC,0BAAuB,iBAAiB,EAAE,MAAM,QAAQ,CAAE;AAAA,EAC3D,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACH;",
   "names": []
 }

package/build-module/term-name/block.json

@@ -9,9 +9,6 @@
 	"textdomain": "default",
 	"usesContext": [ "termId", "taxonomy" ],
 	"attributes": {
-		"textAlign": {
-			"type": "string"
-		},
 		"level": {
 			"type": "number",
 			"default": 0
@@ -43,6 +40,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,

package/build-module/term-name/deprecated.mjs

@@ -0,0 +1,74 @@
+// packages/block-library/src/term-name/deprecated.js
+import migrateTextAlign from "../utils/migrate-text-align.mjs";
+var v1 = {
+  attributes: {
+    textAlign: {
+      type: "string"
+    },
+    level: {
+      type: "number",
+      default: 0
+    },
+    isLink: {
+      type: "boolean",
+      default: false
+    },
+    levelOptions: {
+      type: "array"
+    }
+  },
+  supports: {
+    anchor: true,
+    align: ["wide", "full"],
+    html: false,
+    color: {
+      gradients: true,
+      link: true,
+      __experimentalDefaultControls: {
+        background: true,
+        text: true,
+        link: true
+      }
+    },
+    spacing: {
+      padding: true
+    },
+    typography: {
+      fontSize: true,
+      lineHeight: true,
+      __experimentalFontFamily: true,
+      __experimentalFontWeight: true,
+      __experimentalFontStyle: true,
+      __experimentalTextTransform: true,
+      __experimentalTextDecoration: true,
+      __experimentalLetterSpacing: true,
+      __experimentalDefaultControls: {
+        fontSize: true
+      }
+    },
+    interactivity: {
+      clientNavigation: true
+    },
+    __experimentalBorder: {
+      radius: true,
+      color: true,
+      width: true,
+      style: true,
+      __experimentalDefaultControls: {
+        color: true,
+        width: true,
+        style: true
+      }
+    }
+  },
+  migrate: migrateTextAlign,
+  isEligible(attributes) {
+    return !!attributes.textAlign;
+  },
+  save: () => null
+};
+var deprecated_default = [v1];
+export {
+  deprecated_default as default
+};
+//# sourceMappingURL=deprecated.mjs.map

package/build-module/term-name/deprecated.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/term-name/deprecated.js"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport migrateTextAlign from '../utils/migrate-text-align';\n\nconst v1 = {\n\tattributes: {\n\t\ttextAlign: {\n\t\t\ttype: 'string',\n\t\t},\n\t\tlevel: {\n\t\t\ttype: 'number',\n\t\t\tdefault: 0,\n\t\t},\n\t\tisLink: {\n\t\t\ttype: 'boolean',\n\t\t\tdefault: false,\n\t\t},\n\t\tlevelOptions: {\n\t\t\ttype: 'array',\n\t\t},\n\t},\n\tsupports: {\n\t\tanchor: true,\n\t\talign: [ 'wide', 'full' ],\n\t\thtml: false,\n\t\tcolor: {\n\t\t\tgradients: true,\n\t\t\tlink: true,\n\t\t\t__experimentalDefaultControls: {\n\t\t\t\tbackground: true,\n\t\t\t\ttext: true,\n\t\t\t\tlink: true,\n\t\t\t},\n\t\t},\n\t\tspacing: {\n\t\t\tpadding: true,\n\t\t},\n\t\ttypography: {\n\t\t\tfontSize: true,\n\t\t\tlineHeight: true,\n\t\t\t__experimentalFontFamily: true,\n\t\t\t__experimentalFontWeight: true,\n\t\t\t__experimentalFontStyle: true,\n\t\t\t__experimentalTextTransform: true,\n\t\t\t__experimentalTextDecoration: true,\n\t\t\t__experimentalLetterSpacing: true,\n\t\t\t__experimentalDefaultControls: {\n\t\t\t\tfontSize: true,\n\t\t\t},\n\t\t},\n\t\tinteractivity: {\n\t\t\tclientNavigation: true,\n\t\t},\n\t\t__experimentalBorder: {\n\t\t\tradius: true,\n\t\t\tcolor: true,\n\t\t\twidth: true,\n\t\t\tstyle: true,\n\t\t\t__experimentalDefaultControls: {\n\t\t\t\tcolor: true,\n\t\t\t\twidth: true,\n\t\t\t\tstyle: true,\n\t\t\t},\n\t\t},\n\t},\n\tmigrate: migrateTextAlign,\n\tisEligible( attributes ) {\n\t\treturn !! attributes.textAlign;\n\t},\n\tsave: () => null,\n};\n\nexport default [ v1 ];\n"],
+  "mappings": ";AAGA,OAAO,sBAAsB;AAE7B,IAAM,KAAK;AAAA,EACV,YAAY;AAAA,IACX,WAAW;AAAA,MACV,MAAM;AAAA,IACP;AAAA,IACA,OAAO;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,IACA,cAAc;AAAA,MACb,MAAM;AAAA,IACP;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,QAAQ;AAAA,IACR,OAAO,CAAE,QAAQ,MAAO;AAAA,IACxB,MAAM;AAAA,IACN,OAAO;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,+BAA+B;AAAA,QAC9B,YAAY;AAAA,QACZ,MAAM;AAAA,QACN,MAAM;AAAA,MACP;AAAA,IACD;AAAA,IACA,SAAS;AAAA,MACR,SAAS;AAAA,IACV;AAAA,IACA,YAAY;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,0BAA0B;AAAA,MAC1B,0BAA0B;AAAA,MAC1B,yBAAyB;AAAA,MACzB,6BAA6B;AAAA,MAC7B,8BAA8B;AAAA,MAC9B,6BAA6B;AAAA,MAC7B,+BAA+B;AAAA,QAC9B,UAAU;AAAA,MACX;AAAA,IACD;AAAA,IACA,eAAe;AAAA,MACd,kBAAkB;AAAA,IACnB;AAAA,IACA,sBAAsB;AAAA,MACrB,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,+BAA+B;AAAA,QAC9B,OAAO;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MACR;AAAA,IACD;AAAA,EACD;AAAA,EACA,SAAS;AAAA,EACT,WAAY,YAAa;AACxB,WAAO,CAAC,CAAE,WAAW;AAAA,EACtB;AAAA,EACA,MAAM,MAAM;AACb;AAEA,IAAO,qBAAQ,CAAE,EAAG;",
+  "names": []
+}

package/build-module/term-name/edit.mjs

@@ -1,10 +1,8 @@
 // packages/block-library/src/term-name/edit.js
-import clsx from "clsx";
 import { __ } from "@wordpress/i18n";
 import {
   useBlockProps,
   BlockControls,
-  AlignmentControl,
   InspectorControls,
   HeadingLevelDropdown
 } from "@wordpress/block-editor";
@@ -22,14 +20,10 @@ function TermNameEdit({
   setAttributes,
   context: { termId, taxonomy }
 }) {
-  const { textAlign, level = 0, isLink, levelOptions } = attributes;
+  const { level = 0, isLink, levelOptions } = attributes;
   const { term } = useTermName(termId, taxonomy);
   const termName = term?.name ? decodeEntities(term.name) : __("Term Name");
-  const blockProps = useBlockProps({
-    className: clsx({
-      [`has-text-align-${textAlign}`]: textAlign
-    })
-  });
+  const blockProps = useBlockProps();
   const dropdownMenuProps = useToolsPanelDropdownMenuProps();
   const TagName = level === 0 ? "p" : `h${level}`;
   let termNameDisplay = termName;
@@ -44,27 +38,16 @@ function TermNameEdit({
     );
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(BlockControls, { group: "block", children: [
-      /* @__PURE__ */ jsx(
-        HeadingLevelDropdown,
-        {
-          value: level,
-          options: levelOptions,
-          onChange: (newLevel) => {
-            setAttributes({ level: newLevel });
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        AlignmentControl,
-        {
-          value: textAlign,
-          onChange: (nextAlign) => {
-            setAttributes({ textAlign: nextAlign });
-          }
+    /* @__PURE__ */ jsx(BlockControls, { group: "block", children: /* @__PURE__ */ jsx(
+      HeadingLevelDropdown,
+      {
+        value: level,
+        options: levelOptions,
+        onChange: (newLevel) => {
+          setAttributes({ level: newLevel });
         }
-      )
-    ] }),
+      }
+    ) }),
     /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(
       ToolsPanel,
       {

package/build-module/term-name/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/term-name/edit.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\tBlockControls,\n\tAlignmentControl,\n\tInspectorControls,\n\tHeadingLevelDropdown,\n} from '@wordpress/block-editor';\nimport {\n\tToggleControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\nimport { useTermName } from './use-term-name';\n\nexport default function TermNameEdit( {\n\tattributes,\n\tsetAttributes,\n\tcontext: { termId, taxonomy },\n} ) {\n\tconst { textAlign, level = 0, isLink, levelOptions } = attributes;\n\tconst { term } = useTermName( termId, taxonomy );\n\n\tconst termName = term?.name\n\t\t? decodeEntities( term.name )\n\t\t: __( 'Term Name' );\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: clsx( {\n\t\t\t[ `has-text-align-${ textAlign }` ]: textAlign,\n\t\t} ),\n\t} );\n\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst TagName = level === 0 ? 'p' : `h${ level }`;\n\n\tlet termNameDisplay = termName;\n\tif ( isLink ) {\n\t\ttermNameDisplay = (\n\t\t\t<a\n\t\t\t\thref=\"#term-name-pseudo-link\"\n\t\t\t\tonClick={ ( e ) => e.preventDefault() }\n\t\t\t>\n\t\t\t\t{ termName }\n\t\t\t</a>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls group=\"block\">\n\t\t\t\t<HeadingLevelDropdown\n\t\t\t\t\tvalue={ level }\n\t\t\t\t\toptions={ levelOptions }\n\t\t\t\t\tonChange={ ( newLevel ) => {\n\t\t\t\t\t\tsetAttributes( { level: newLevel } );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t\t<AlignmentControl\n\t\t\t\t\tvalue={ textAlign }\n\t\t\t\t\tonChange={ ( nextAlign ) => {\n\t\t\t\t\t\tsetAttributes( { textAlign: nextAlign } );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tisLink: false,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! isLink }\n\t\t\t\t\t\tlabel={ __( 'Make term name a link' ) }\n\t\t\t\t\t\tonDeselect={ () => setAttributes( { isLink: false } ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Make term name a link' ) }\n\t\t\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\t\t\tsetAttributes( { isLink: ! isLink } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tchecked={ isLink }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t\t<TagName { ...blockProps }>{ termNameDisplay }</TagName>\n\t\t</>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA,4BAA4B;AAAA,EAC5B,gCAAgC;AAAA,OAC1B;AACP,SAAS,sBAAsB;AAK/B,SAAS,sCAAsC;AAC/C,SAAS,mBAAmB;AA2BzB,SAUD,UAVC,KAWA,YAXA;AAzBY,SAAR,aAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA,SAAS,EAAE,QAAQ,SAAS;AAC7B,GAAI;AACH,QAAM,EAAE,WAAW,QAAQ,GAAG,QAAQ,aAAa,IAAI;AACvD,QAAM,EAAE,KAAK,IAAI,YAAa,QAAQ,QAAS;AAE/C,QAAM,WAAW,MAAM,OACpB,eAAgB,KAAK,IAAK,IAC1B,GAAI,WAAY;AAEnB,QAAM,aAAa,cAAe;AAAA,IACjC,WAAW,KAAM;AAAA,MAChB,CAAE,kBAAmB,SAAU,EAAG,GAAG;AAAA,IACtC,CAAE;AAAA,EACH,CAAE;AAEF,QAAM,oBAAoB,+BAA+B;AAEzD,QAAM,UAAU,UAAU,IAAI,MAAM,IAAK,KAAM;AAE/C,MAAI,kBAAkB;AACtB,MAAK,QAAS;AACb,sBACC;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,SAAU,CAAE,MAAO,EAAE,eAAe;AAAA,QAElC;AAAA;AAAA,IACH;AAAA,EAEF;AAEA,SACC,iCACC;AAAA,yBAAC,iBAAc,OAAM,SACpB;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,SAAU;AAAA,UACV,UAAW,CAAE,aAAc;AAC1B,0BAAe,EAAE,OAAO,SAAS,CAAE;AAAA,UACpC;AAAA;AAAA,MACD;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,UAAW,CAAE,cAAe;AAC3B,0BAAe,EAAE,WAAW,UAAU,CAAE;AAAA,UACzC;AAAA;AAAA,MACD;AAAA,OACD;AAAA,IACA,oBAAC,qBACA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,UAAW;AAAA,QACvB,UAAW,MAAM;AAChB,wBAAe;AAAA,YACd,QAAQ;AAAA,UACT,CAAE;AAAA,QACH;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,UAAW,MAAM,CAAC,CAAE;AAAA,YACpB,OAAQ,GAAI,uBAAwB;AAAA,YACpC,YAAa,MAAM,cAAe,EAAE,QAAQ,MAAM,CAAE;AAAA,YACpD,kBAAgB;AAAA,YAEhB;AAAA,cAAC;AAAA;AAAA,gBACA,OAAQ,GAAI,uBAAwB;AAAA,gBACpC,UAAW,MACV,cAAe,EAAE,QAAQ,CAAE,OAAO,CAAE;AAAA,gBAErC,SAAU;AAAA;AAAA,YACX;AAAA;AAAA,QACD;AAAA;AAAA,IACD,GACD;AAAA,IACA,oBAAC,WAAU,GAAG,YAAe,2BAAiB;AAAA,KAC/C;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\tBlockControls,\n\tInspectorControls,\n\tHeadingLevelDropdown,\n} from '@wordpress/block-editor';\nimport {\n\tToggleControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\nimport { useTermName } from './use-term-name';\n\nexport default function TermNameEdit( {\n\tattributes,\n\tsetAttributes,\n\tcontext: { termId, taxonomy },\n} ) {\n\tconst { level = 0, isLink, levelOptions } = attributes;\n\tconst { term } = useTermName( termId, taxonomy );\n\n\tconst termName = term?.name\n\t\t? decodeEntities( term.name )\n\t\t: __( 'Term Name' );\n\n\tconst blockProps = useBlockProps();\n\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst TagName = level === 0 ? 'p' : `h${ level }`;\n\n\tlet termNameDisplay = termName;\n\tif ( isLink ) {\n\t\ttermNameDisplay = (\n\t\t\t<a\n\t\t\t\thref=\"#term-name-pseudo-link\"\n\t\t\t\tonClick={ ( e ) => e.preventDefault() }\n\t\t\t>\n\t\t\t\t{ termName }\n\t\t\t</a>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls group=\"block\">\n\t\t\t\t<HeadingLevelDropdown\n\t\t\t\t\tvalue={ level }\n\t\t\t\t\toptions={ levelOptions }\n\t\t\t\t\tonChange={ ( newLevel ) => {\n\t\t\t\t\t\tsetAttributes( { level: newLevel } );\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t</BlockControls>\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tisLink: false,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\thasValue={ () => !! isLink }\n\t\t\t\t\t\tlabel={ __( 'Make term name a link' ) }\n\t\t\t\t\t\tonDeselect={ () => setAttributes( { isLink: false } ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Make term name a link' ) }\n\t\t\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\t\t\tsetAttributes( { isLink: ! isLink } )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tchecked={ isLink }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t\t<TagName { ...blockProps }>{ termNameDisplay }</TagName>\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP;AAAA,EACC;AAAA,EACA,4BAA4B;AAAA,EAC5B,gCAAgC;AAAA,OAC1B;AACP,SAAS,sBAAsB;AAK/B,SAAS,sCAAsC;AAC/C,SAAS,mBAAmB;AAuBzB,SAUD,UAVC,KAUD,YAVC;AArBY,SAAR,aAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA,SAAS,EAAE,QAAQ,SAAS;AAC7B,GAAI;AACH,QAAM,EAAE,QAAQ,GAAG,QAAQ,aAAa,IAAI;AAC5C,QAAM,EAAE,KAAK,IAAI,YAAa,QAAQ,QAAS;AAE/C,QAAM,WAAW,MAAM,OACpB,eAAgB,KAAK,IAAK,IAC1B,GAAI,WAAY;AAEnB,QAAM,aAAa,cAAc;AAEjC,QAAM,oBAAoB,+BAA+B;AAEzD,QAAM,UAAU,UAAU,IAAI,MAAM,IAAK,KAAM;AAE/C,MAAI,kBAAkB;AACtB,MAAK,QAAS;AACb,sBACC;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACL,SAAU,CAAE,MAAO,EAAE,eAAe;AAAA,QAElC;AAAA;AAAA,IACH;AAAA,EAEF;AAEA,SACC,iCACC;AAAA,wBAAC,iBAAc,OAAM,SACpB;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,QACR,SAAU;AAAA,QACV,UAAW,CAAE,aAAc;AAC1B,wBAAe,EAAE,OAAO,SAAS,CAAE;AAAA,QACpC;AAAA;AAAA,IACD,GACD;AAAA,IACA,oBAAC,qBACA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,UAAW;AAAA,QACvB,UAAW,MAAM;AAChB,wBAAe;AAAA,YACd,QAAQ;AAAA,UACT,CAAE;AAAA,QACH;AAAA,QACA;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,UAAW,MAAM,CAAC,CAAE;AAAA,YACpB,OAAQ,GAAI,uBAAwB;AAAA,YACpC,YAAa,MAAM,cAAe,EAAE,QAAQ,MAAM,CAAE;AAAA,YACpD,kBAAgB;AAAA,YAEhB;AAAA,cAAC;AAAA;AAAA,gBACA,OAAQ,GAAI,uBAAwB;AAAA,gBACpC,UAAW,MACV,cAAe,EAAE,QAAQ,CAAE,OAAO,CAAE;AAAA,gBAErC,SAAU;AAAA;AAAA,YACX;AAAA;AAAA,QACD;AAAA;AAAA,IACD,GACD;AAAA,IACA,oBAAC,WAAU,GAAG,YAAe,2BAAiB;AAAA,KAC/C;AAEF;",
   "names": []
 }

package/build-module/term-name/index.mjs

@@ -3,11 +3,13 @@ import { termName as icon } from "@wordpress/icons";
 import initBlock from "../utils/init-block.mjs";
 import metadata from "./block.json";
 import edit from "./edit.mjs";
+import deprecated from "./deprecated.mjs";
 var { name } = metadata;
 var settings = {
   icon,
   example: {},
-  edit
+  edit,
+  deprecated
 };
 var init = () => initBlock({ name, metadata, settings });
 export {

package/build-module/term-name/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/term-name/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { termName as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport metadata from './block.json';\nimport edit from './edit';\n\nconst { name } = metadata;\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {},\n\tedit,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
-  "mappings": ";AAGA,SAAS,YAAY,YAAY;AAKjC,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,UAAU;AAEjB,IAAM,EAAE,KAAK,IAAI;AAGV,IAAM,WAAW;AAAA,EACvB;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACD;AAEO,IAAM,OAAO,MAAM,UAAW,EAAE,MAAM,UAAU,SAAS,CAAE;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { termName as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport metadata from './block.json';\nimport edit from './edit';\nimport deprecated from './deprecated';\n\nconst { name } = metadata;\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {},\n\tedit,\n\tdeprecated,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
+  "mappings": ";AAGA,SAAS,YAAY,YAAY;AAKjC,OAAO,eAAe;AACtB,OAAO,cAAc;AACrB,OAAO,UAAU;AACjB,OAAO,gBAAgB;AAEvB,IAAM,EAAE,KAAK,IAAI;AAGV,IAAM,WAAW;AAAA,EACvB;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AACD;AAEO,IAAM,OAAO,MAAM,UAAW,EAAE,MAAM,UAAU,SAAS,CAAE;",
   "names": []
 }

package/build-module/utils/waveform-player.mjs

@@ -1,19 +1,38 @@
 // packages/block-library/src/utils/waveform-player.js
 import { useEffect, useRef } from "@wordpress/element";
 import { useEvent, useRefEffect } from "@wordpress/compose";
-import { initWaveformPlayer } from "./waveform-utils.mjs";
+import { __, _x } from "@wordpress/i18n";
+import {
+  applyWaveformPlayerStyles,
+  initWaveformPlayer,
+  setupPlayButtonArtwork,
+  updateSeekControlLabel
+} from "./waveform-utils.mjs";
 import { jsx } from "react/jsx-runtime";
-var EMPTY_ARTIST_PLACEHOLDER = " ";
-function updatePlayerMetadata(instance, { title, artist, image }) {
+function updatePlayerMetadata(player, { title, artist, image, imageAlt }, showPlayButtonArtwork) {
+  const { instance, container } = player;
+  const playerArtwork = showPlayButtonArtwork ? void 0 : image;
   if (instance.titleEl) {
     instance.titleEl.textContent = title ?? "";
   }
-  if (instance.subtitleEl) {
-    instance.subtitleEl.textContent = artist ?? "";
-    instance.subtitleEl.style.display = artist ? "" : "none";
+  updateSeekControlLabel(instance, title || __("Seek"));
+  if (typeof instance.syncArtist === "function") {
+    instance.syncArtist(artist || "");
+  } else if (instance.artistEl) {
+    instance.artistEl.textContent = artist ?? "";
+    instance.artistEl.style.display = artist ? "" : "none";
   }
-  if (instance.artworkEl && image) {
-    instance.artworkEl.src = image;
+  if (typeof instance.syncArtwork === "function") {
+    instance.syncArtwork(
+      playerArtwork || null,
+      playerArtwork ? imageAlt || "" : ""
+    );
+  } else if (instance.artworkEl && playerArtwork) {
+    instance.artworkEl.src = playerArtwork;
+    instance.artworkEl.alt = imageAlt || "";
+  }
+  if (showPlayButtonArtwork) {
+    setupPlayButtonArtwork(container, image);
   }
 }
 function WaveformPlayer({
@@ -21,23 +40,60 @@ function WaveformPlayer({
   title,
   artist,
   image,
+  imageAlt,
+  color,
+  gradient,
+  backgroundColor,
+  backgroundGradient,
+  textColor,
   waveformStyle,
-  onEnded
+  onEnded,
+  showPlayButtonArtwork = false
 }) {
   const onEndedEvent = useEvent(onEnded);
-  const metadataRef = useRef({ title, artist, image });
   const playerRef = useRef();
-  const hasImage = !!image;
+  const hasSrc = !!src;
+  const metadataRef = useRef({ src, title, artist, image, imageAlt });
+  const stylesRef = useRef({
+    color,
+    gradient,
+    backgroundColor,
+    backgroundGradient,
+    textColor
+  });
+  useEffect(() => {
+    metadataRef.current = { src, title, artist, image, imageAlt };
+  }, [src, title, artist, image, imageAlt]);
+  useEffect(() => {
+    stylesRef.current = {
+      color,
+      gradient,
+      backgroundColor,
+      backgroundGradient,
+      textColor
+    };
+  }, [color, gradient, backgroundColor, backgroundGradient, textColor]);
   useEffect(() => {
-    metadataRef.current = { title, artist, image };
-    const instance = playerRef.current?.instance;
-    if (instance) {
-      updatePlayerMetadata(instance, { title, artist, image });
+    if (playerRef.current?.container) {
+      applyWaveformPlayerStyles(playerRef.current.container, {
+        backgroundColor,
+        backgroundGradient,
+        textColor,
+        playButtonColor: showPlayButtonArtwork ? void 0 : color,
+        playButtonGradient: showPlayButtonArtwork ? void 0 : gradient
+      });
     }
-  }, [title, artist, image]);
+  }, [
+    backgroundColor,
+    backgroundGradient,
+    color,
+    gradient,
+    showPlayButtonArtwork,
+    textColor
+  ]);
   const ref = useRefEffect(
     (element) => {
-      if (!src) {
+      if (!hasSrc) {
         return;
       }
       let cancelled = false;
@@ -47,14 +103,29 @@ function WaveformPlayer({
           return;
         }
         const player = initWaveformPlayer(element, {
-          src,
-          ...metadataRef.current,
+          src: metadataRef.current.src,
+          title: metadataRef.current.title,
+          artist: metadataRef.current.artist,
+          image: metadataRef.current.image,
+          imageAlt: metadataRef.current.imageAlt,
+          waveformColor: stylesRef.current.color,
+          waveformGradient: stylesRef.current.gradient,
+          backgroundColor: stylesRef.current.backgroundColor,
+          backgroundGradient: stylesRef.current.backgroundGradient,
+          textColor: stylesRef.current.textColor,
           waveformStyle,
-          artist: metadataRef.current.artist || EMPTY_ARTIST_PLACEHOLDER,
-          onEnded: () => onEndedEvent?.()
+          labels: {
+            seek: __("Seek"),
+            /* translators: %1$s: current audio time, %2$s: total audio duration. */
+            seekValueText: _x(
+              "%1$s of %2$s",
+              "audio current time of total duration"
+            )
+          },
+          onEnded: () => onEndedEvent?.(),
+          showPlayButtonArtwork
         });
         playerRef.current = player;
-        updatePlayerMetadata(player.instance, metadataRef.current);
         const { destroy } = player;
         playerDestroy = destroy;
       }
@@ -66,8 +137,58 @@ function WaveformPlayer({
         playerDestroy?.();
       };
     },
-    [onEndedEvent, src, waveformStyle, hasImage]
+    [
+      onEndedEvent,
+      hasSrc,
+      waveformStyle,
+      color,
+      gradient,
+      textColor,
+      showPlayButtonArtwork
+    ]
   );
+  useEffect(() => {
+    if (playerRef.current?.instance) {
+      const player = playerRef.current;
+      if (player) {
+        updatePlayerMetadata(
+          player,
+          {
+            title,
+            artist,
+            image,
+            imageAlt
+          },
+          showPlayButtonArtwork
+        );
+      }
+    }
+  }, [title, artist, image, imageAlt, showPlayButtonArtwork]);
+  useEffect(() => {
+    if (src && playerRef.current?.instance) {
+      const wasPlaying = playerRef.current.instance.isPlaying;
+      const promise = playerRef.current.instance.loadTrack(
+        src,
+        metadataRef.current.title,
+        metadataRef.current.artist,
+        {
+          artwork: showPlayButtonArtwork ? void 0 : metadataRef.current.image,
+          artworkAlt: showPlayButtonArtwork ? "" : metadataRef.current.imageAlt
+        }
+      );
+      promise.then(() => {
+        if (showPlayButtonArtwork && playerRef.current?.container) {
+          setupPlayButtonArtwork(
+            playerRef.current.container,
+            metadataRef.current.image
+          );
+        }
+        if (!wasPlaying) {
+          playerRef.current?.instance.pause();
+        }
+      });
+    }
+  }, [src, showPlayButtonArtwork]);
   return /* @__PURE__ */ jsx("div", { ref, className: "wp-block-playlist__waveform-player" });
 }
 export {

package/build-module/utils/waveform-player.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/waveform-player.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useEvent, useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { initWaveformPlayer } from './waveform-utils';\n\nconst EMPTY_ARTIST_PLACEHOLDER = '\\u00a0';\n\n/**\n * Update a live waveform player's metadata elements in place.\n *\n * The title element always exists, so the title is updated in place. The\n * subtitle element is seeded during editor player creation, so it can be\n * updated in place and hidden when the track has no artist. The artwork\n * element only exists when the track had an image when the player was created,\n * so its value is updated in place here; adding or removing an image (which\n * creates or tears down that element) is instead handled by recreating the\n * player, keyed on the `hasImage` dependency.\n *\n * The library's only metadata API is `loadTrack()`, which re-fetches and\n * re-decodes the audio and regenerates the waveform (resetting playback), so\n * it's unsuitable for live metadata edits. We instead write to the title,\n * subtitle, and artwork elements directly, which is what `loadTrack()` itself\n * does internally for these fields.\n *\n * @param {Object} instance        - The waveform player instance.\n * @param {Object} metadata        - The track metadata.\n * @param {string} metadata.title  - The track title.\n * @param {string} metadata.artist - The artist name.\n * @param {string} metadata.image  - The artwork image URL.\n */\nfunction updatePlayerMetadata( instance, { title, artist, image } ) {\n\tif ( instance.titleEl ) {\n\t\tinstance.titleEl.textContent = title ?? '';\n\t}\n\tif ( instance.subtitleEl ) {\n\t\tinstance.subtitleEl.textContent = artist ?? '';\n\t\tinstance.subtitleEl.style.display = artist ? '' : 'none';\n\t}\n\tif ( instance.artworkEl && image ) {\n\t\tinstance.artworkEl.src = image;\n\t}\n}\n\n/**\n * A reusable WaveformPlayer component for the block editor.\n *\n * Renders an audio waveform visualization with play/pause controls.\n * Automatically inherits colors from the parent block's text color.\n *\n * @param {Object}   props               - Component props.\n * @param {string}   props.src           - The audio file URL.\n * @param {string}   props.title         - The track title.\n * @param {string}   props.artist        - The artist name.\n * @param {string}   props.image         - The artwork image URL.\n * @param {string}   props.waveformStyle - Waveform style (bars, mirror, line, blocks, dots, seekbar).\n * @param {Function} props.onEnded       - Callback when the track finishes playing.\n * @return {Element} The WaveformPlayer element.\n */\nexport function WaveformPlayer( {\n\tsrc,\n\ttitle,\n\tartist,\n\timage,\n\twaveformStyle,\n\tonEnded,\n} ) {\n\t// Store onEnded in a stable callback so it doesn't need to be a useRefEffect dependency.\n\t// The callback changes reference on every render (its dependency chain\n\t// includes an unstable array), which would cause useRefEffect to destroy\n\t// and recreate the entire player on every re-render, making it disappear\n\t// during editor resizes.\n\tconst onEndedEvent = useEvent( onEnded );\n\tconst metadataRef = useRef( { title, artist, image } );\n\tconst playerRef = useRef();\n\n\t// The artwork element only exists when an image was present when the\n\t// player was created. Recreate the player when one is added or removed so\n\t// that element is created or torn down; value changes to an existing\n\t// element are applied in place below.\n\tconst hasImage = !! image;\n\n\t// Keep the freshest metadata available to init() (which runs on a\n\t// deferred timeout) and update the live player in place when metadata\n\t// changes. Updating in place avoids destroying and recreating the\n\t// player, which would flash it on every keystroke while editing a\n\t// track's title or artist.\n\tuseEffect( () => {\n\t\tmetadataRef.current = { title, artist, image };\n\n\t\tconst instance = playerRef.current?.instance;\n\t\tif ( instance ) {\n\t\t\tupdatePlayerMetadata( instance, { title, artist, image } );\n\t\t}\n\t}, [ title, artist, image ] );\n\n\tconst ref = useRefEffect(\n\t\t( element ) => {\n\t\t\tif ( ! src ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet cancelled = false;\n\t\t\tlet playerDestroy;\n\n\t\t\tfunction init() {\n\t\t\t\tif ( cancelled ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst player = initWaveformPlayer( element, {\n\t\t\t\t\tsrc,\n\t\t\t\t\t...metadataRef.current,\n\t\t\t\t\twaveformStyle,\n\t\t\t\t\tartist:\n\t\t\t\t\t\tmetadataRef.current.artist || EMPTY_ARTIST_PLACEHOLDER,\n\t\t\t\t\tonEnded: () => onEndedEvent?.(),\n\t\t\t\t} );\n\t\t\t\tplayerRef.current = player;\n\t\t\t\tupdatePlayerMetadata( player.instance, metadataRef.current );\n\t\t\t\tconst { destroy } = player;\n\t\t\t\tplayerDestroy = destroy;\n\t\t\t}\n\n\t\t\t// Defer initialization so the element inherits the correct\n\t\t\t// text color, which is used to derive waveform colors. In the\n\t\t\t// editor iframe, theme styles (CSS custom properties) are\n\t\t\t// injected dynamically, so getComputedStyle may return the\n\t\t\t// default black on first render.\n\t\t\t// Using a requestAnimationFrame loop isn't sufficient to solve the issue.\n\t\t\t// TODO - find a better option than a setTimeout, so we're not relying on an arbitrary number.\n\t\t\tconst timeoutId = setTimeout( init, 100 );\n\n\t\t\treturn () => {\n\t\t\t\tcancelled = true;\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t\tplayerRef.current = undefined;\n\t\t\t\tplayerDestroy?.();\n\t\t\t};\n\t\t},\n\t\t[ onEndedEvent, src, waveformStyle, hasImage ]\n\t);\n\n\treturn <div ref={ ref } className=\"wp-block-playlist__waveform-player\" />;\n}\n"],
-  "mappings": ";AAGA,SAAS,WAAW,cAAc;AAClC,SAAS,UAAU,oBAAoB;AAKvC,SAAS,0BAA0B;AA0I3B;AAxIR,IAAM,2BAA2B;AAyBjC,SAAS,qBAAsB,UAAU,EAAE,OAAO,QAAQ,MAAM,GAAI;AACnE,MAAK,SAAS,SAAU;AACvB,aAAS,QAAQ,cAAc,SAAS;AAAA,EACzC;AACA,MAAK,SAAS,YAAa;AAC1B,aAAS,WAAW,cAAc,UAAU;AAC5C,aAAS,WAAW,MAAM,UAAU,SAAS,KAAK;AAAA,EACnD;AACA,MAAK,SAAS,aAAa,OAAQ;AAClC,aAAS,UAAU,MAAM;AAAA,EAC1B;AACD;AAiBO,SAAS,eAAgB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AAMH,QAAM,eAAe,SAAU,OAAQ;AACvC,QAAM,cAAc,OAAQ,EAAE,OAAO,QAAQ,MAAM,CAAE;AACrD,QAAM,YAAY,OAAO;AAMzB,QAAM,WAAW,CAAC,CAAE;AAOpB,YAAW,MAAM;AAChB,gBAAY,UAAU,EAAE,OAAO,QAAQ,MAAM;AAE7C,UAAM,WAAW,UAAU,SAAS;AACpC,QAAK,UAAW;AACf,2BAAsB,UAAU,EAAE,OAAO,QAAQ,MAAM,CAAE;AAAA,IAC1D;AAAA,EACD,GAAG,CAAE,OAAO,QAAQ,KAAM,CAAE;AAE5B,QAAM,MAAM;AAAA,IACX,CAAE,YAAa;AACd,UAAK,CAAE,KAAM;AACZ;AAAA,MACD;AAEA,UAAI,YAAY;AAChB,UAAI;AAEJ,eAAS,OAAO;AACf,YAAK,WAAY;AAChB;AAAA,QACD;AACA,cAAM,SAAS,mBAAoB,SAAS;AAAA,UAC3C;AAAA,UACA,GAAG,YAAY;AAAA,UACf;AAAA,UACA,QACC,YAAY,QAAQ,UAAU;AAAA,UAC/B,SAAS,MAAM,eAAe;AAAA,QAC/B,CAAE;AACF,kBAAU,UAAU;AACpB,6BAAsB,OAAO,UAAU,YAAY,OAAQ;AAC3D,cAAM,EAAE,QAAQ,IAAI;AACpB,wBAAgB;AAAA,MACjB;AASA,YAAM,YAAY,WAAY,MAAM,GAAI;AAExC,aAAO,MAAM;AACZ,oBAAY;AACZ,qBAAc,SAAU;AACxB,kBAAU,UAAU;AACpB,wBAAgB;AAAA,MACjB;AAAA,IACD;AAAA,IACA,CAAE,cAAc,KAAK,eAAe,QAAS;AAAA,EAC9C;AAEA,SAAO,oBAAC,SAAI,KAAY,WAAU,sCAAqC;AACxE;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useEvent, useRefEffect } from '@wordpress/compose';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tapplyWaveformPlayerStyles,\n\tinitWaveformPlayer,\n\tsetupPlayButtonArtwork,\n\tupdateSeekControlLabel,\n} from './waveform-utils';\n\n/**\n * Update the metadata of a WaveformPlayer element to reflect current props.\n *\n * `loadTrack()` owns full track swaps, but it also resets the audio element.\n * This keeps same-source metadata edits lightweight in the editor.\n *\n * @param {Object}  player                - The waveform player.\n * @param {Object}  metadata              - The track metadata.\n * @param {string}  metadata.title        - The track title.\n * @param {string}  metadata.artist       - The artist name.\n * @param {string}  metadata.image        - The track image URL.\n * @param {string}  metadata.imageAlt     - The track image alt text.\n * @param {boolean} showPlayButtonArtwork - Whether to show artwork on the play button.\n */\nfunction updatePlayerMetadata(\n\tplayer,\n\t{ title, artist, image, imageAlt },\n\tshowPlayButtonArtwork\n) {\n\tconst { instance, container } = player;\n\tconst playerArtwork = showPlayButtonArtwork ? undefined : image;\n\n\tif ( instance.titleEl ) {\n\t\tinstance.titleEl.textContent = title ?? '';\n\t}\n\tupdateSeekControlLabel( instance, title || __( 'Seek' ) );\n\n\tif ( typeof instance.syncArtist === 'function' ) {\n\t\tinstance.syncArtist( artist || '' );\n\t} else if ( instance.artistEl ) {\n\t\tinstance.artistEl.textContent = artist ?? '';\n\t\tinstance.artistEl.style.display = artist ? '' : 'none';\n\t}\n\n\tif ( typeof instance.syncArtwork === 'function' ) {\n\t\tinstance.syncArtwork(\n\t\t\tplayerArtwork || null,\n\t\t\tplayerArtwork ? imageAlt || '' : ''\n\t\t);\n\t} else if ( instance.artworkEl && playerArtwork ) {\n\t\tinstance.artworkEl.src = playerArtwork;\n\t\tinstance.artworkEl.alt = imageAlt || '';\n\t}\n\tif ( showPlayButtonArtwork ) {\n\t\tsetupPlayButtonArtwork( container, image );\n\t}\n}\n\n/**\n * A reusable WaveformPlayer component for the block editor.\n *\n * Renders an audio waveform visualization with play/pause controls.\n * Automatically inherits colors from the parent block's text color.\n *\n * @param {Object}   props                       - Component props.\n * @param {string}   props.src                   - The audio file URL.\n * @param {string}   props.title                 - The track title.\n * @param {string}   props.artist                - The artist name.\n * @param {string}   props.image                 - The track image URL.\n * @param {string}   props.imageAlt              - The track image alt text.\n * @param {string}   props.color                 - The waveform color.\n * @param {string}   props.gradient              - The waveform gradient.\n * @param {string}   props.backgroundColor       - The waveform background color.\n * @param {string}   props.backgroundGradient    - The waveform background gradient.\n * @param {string}   props.textColor             - The player text color.\n * @param {string}   props.waveformStyle         - Waveform style (bars, mirror, line, blocks, dots, seekbar).\n * @param {Function} props.onEnded               - Callback when the track finishes playing.\n * @param {boolean}  props.showPlayButtonArtwork - Whether to show artwork on the play button.\n * @return {Element} The WaveformPlayer element.\n */\nexport function WaveformPlayer( {\n\tsrc,\n\ttitle,\n\tartist,\n\timage,\n\timageAlt,\n\tcolor,\n\tgradient,\n\tbackgroundColor,\n\tbackgroundGradient,\n\ttextColor,\n\twaveformStyle,\n\tonEnded,\n\tshowPlayButtonArtwork = false,\n} ) {\n\t// Store onEnded in a stable callback so it doesn't need to be a useRefEffect dependency.\n\t// The callback changes reference on every render (its dependency chain\n\t// includes an unstable array), which would cause useRefEffect to destroy\n\t// and recreate the entire player on every re-render, making it disappear\n\t// during editor resizes.\n\tconst onEndedEvent = useEvent( onEnded );\n\n\t// Ref for the WaveformPlayer instance\n\tconst playerRef = useRef();\n\n\t// WaveformPlayer needs an audio source on init, but the source may change\n\t// throughout its lifetime.\n\tconst hasSrc = !! src;\n\n\t// Combined props ref for `initWaveformPlayer`, which is called\n\t// asynchronously after this component mounts.\n\tconst metadataRef = useRef( { src, title, artist, image, imageAlt } );\n\tconst stylesRef = useRef( {\n\t\tcolor,\n\t\tgradient,\n\t\tbackgroundColor,\n\t\tbackgroundGradient,\n\t\ttextColor,\n\t} );\n\tuseEffect( () => {\n\t\tmetadataRef.current = { src, title, artist, image, imageAlt };\n\t}, [ src, title, artist, image, imageAlt ] );\n\n\tuseEffect( () => {\n\t\tstylesRef.current = {\n\t\t\tcolor,\n\t\t\tgradient,\n\t\t\tbackgroundColor,\n\t\t\tbackgroundGradient,\n\t\t\ttextColor,\n\t\t};\n\t}, [ color, gradient, backgroundColor, backgroundGradient, textColor ] );\n\n\tuseEffect( () => {\n\t\tif ( playerRef.current?.container ) {\n\t\t\tapplyWaveformPlayerStyles( playerRef.current.container, {\n\t\t\t\tbackgroundColor,\n\t\t\t\tbackgroundGradient,\n\t\t\t\ttextColor,\n\t\t\t\tplayButtonColor: showPlayButtonArtwork ? undefined : color,\n\t\t\t\tplayButtonGradient: showPlayButtonArtwork\n\t\t\t\t\t? undefined\n\t\t\t\t\t: gradient,\n\t\t\t} );\n\t\t}\n\t}, [\n\t\tbackgroundColor,\n\t\tbackgroundGradient,\n\t\tcolor,\n\t\tgradient,\n\t\tshowPlayButtonArtwork,\n\t\ttextColor,\n\t] );\n\n\tconst ref = useRefEffect(\n\t\t( element ) => {\n\t\t\tif ( ! hasSrc ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet cancelled = false;\n\t\t\tlet playerDestroy;\n\n\t\t\tfunction init() {\n\t\t\t\tif ( cancelled ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst player = initWaveformPlayer( element, {\n\t\t\t\t\tsrc: metadataRef.current.src,\n\t\t\t\t\ttitle: metadataRef.current.title,\n\t\t\t\t\tartist: metadataRef.current.artist,\n\t\t\t\t\timage: metadataRef.current.image,\n\t\t\t\t\timageAlt: metadataRef.current.imageAlt,\n\t\t\t\t\twaveformColor: stylesRef.current.color,\n\t\t\t\t\twaveformGradient: stylesRef.current.gradient,\n\t\t\t\t\tbackgroundColor: stylesRef.current.backgroundColor,\n\t\t\t\t\tbackgroundGradient: stylesRef.current.backgroundGradient,\n\t\t\t\t\ttextColor: stylesRef.current.textColor,\n\t\t\t\t\twaveformStyle,\n\t\t\t\t\tlabels: {\n\t\t\t\t\t\tseek: __( 'Seek' ),\n\t\t\t\t\t\t/* translators: %1$s: current audio time, %2$s: total audio duration. */\n\t\t\t\t\t\tseekValueText: _x(\n\t\t\t\t\t\t\t'%1$s of %2$s',\n\t\t\t\t\t\t\t'audio current time of total duration'\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tonEnded: () => onEndedEvent?.(),\n\t\t\t\t\tshowPlayButtonArtwork,\n\t\t\t\t} );\n\t\t\t\tplayerRef.current = player;\n\t\t\t\tconst { destroy } = player;\n\t\t\t\tplayerDestroy = destroy;\n\t\t\t}\n\n\t\t\t// Defer initialization so the element inherits the correct\n\t\t\t// text color, which is used to derive waveform colors. In the\n\t\t\t// editor iframe, theme styles (CSS custom properties) are\n\t\t\t// injected dynamically, so getComputedStyle may return the\n\t\t\t// default black on first render.\n\t\t\t// Using a requestAnimationFrame loop isn't sufficient to solve the issue.\n\t\t\t// TODO - find a better option than a setTimeout, so we're not relying on an arbitrary number.\n\t\t\tconst timeoutId = setTimeout( init, 100 );\n\n\t\t\treturn () => {\n\t\t\t\tcancelled = true;\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t\tplayerRef.current = undefined;\n\t\t\t\tplayerDestroy?.();\n\t\t\t};\n\t\t},\n\t\t[\n\t\t\tonEndedEvent,\n\t\t\thasSrc,\n\t\t\twaveformStyle,\n\t\t\tcolor,\n\t\t\tgradient,\n\t\t\ttextColor,\n\t\t\tshowPlayButtonArtwork,\n\t\t]\n\t);\n\n\tuseEffect( () => {\n\t\tif ( playerRef.current?.instance ) {\n\t\t\tconst player = playerRef.current;\n\t\t\tif ( player ) {\n\t\t\t\tupdatePlayerMetadata(\n\t\t\t\t\tplayer,\n\t\t\t\t\t{\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tartist,\n\t\t\t\t\t\timage,\n\t\t\t\t\t\timageAlt,\n\t\t\t\t\t},\n\t\t\t\t\tshowPlayButtonArtwork\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}, [ title, artist, image, imageAlt, showPlayButtonArtwork ] );\n\n\tuseEffect( () => {\n\t\tif ( src && playerRef.current?.instance ) {\n\t\t\tconst wasPlaying = playerRef.current.instance.isPlaying;\n\t\t\tconst promise = playerRef.current.instance.loadTrack(\n\t\t\t\tsrc,\n\t\t\t\tmetadataRef.current.title,\n\t\t\t\tmetadataRef.current.artist,\n\t\t\t\t{\n\t\t\t\t\tartwork: showPlayButtonArtwork\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: metadataRef.current.image,\n\t\t\t\t\tartworkAlt: showPlayButtonArtwork\n\t\t\t\t\t\t? ''\n\t\t\t\t\t\t: metadataRef.current.imageAlt,\n\t\t\t\t}\n\t\t\t);\n\t\t\tpromise.then( () => {\n\t\t\t\tif ( showPlayButtonArtwork && playerRef.current?.container ) {\n\t\t\t\t\tsetupPlayButtonArtwork(\n\t\t\t\t\t\tplayerRef.current.container,\n\t\t\t\t\t\tmetadataRef.current.image\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tif ( ! wasPlaying ) {\n\t\t\t\t\tplayerRef.current?.instance.pause();\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}, [ src, showPlayButtonArtwork ] );\n\n\treturn <div ref={ ref } className=\"wp-block-playlist__waveform-player\" />;\n}\n"],
+  "mappings": "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",
   "names": []
 }