@wordpress/block-library 9.40.2-next.v.202602241322.0 → 9.41.0

package/build-module/navigation-link/shared/use-link-preview.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/navigation-link/shared/use-link-preview.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { safeDecodeURI } from '@wordpress/url';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useRemoteUrlData, isHashLink, isRelativePath } = unlock(\n\tblockEditorPrivateApis\n);\n\n/**\n * Capitalize the first letter of a string.\n *\n * @param {string} str - The string to capitalize\n * @return {string} Capitalized string\n */\nfunction capitalize( str ) {\n\treturn str.charAt( 0 ).toUpperCase() + str.slice( 1 );\n}\n\n/**\n * Compute display URL - strips site URL if internal, shows full URL if external.\n *\n * @param {Object} options         - Parameters object\n * @param {string} options.linkUrl - The URL to process\n * @param {string} options.siteUrl - The WordPress site URL (falls back to window.location.origin)\n * @return {Object} Object with displayUrl and isExternal flag\n */\nexport function computeDisplayUrl( { linkUrl, siteUrl } = {} ) {\n\tif ( ! linkUrl ) {\n\t\treturn { displayUrl: '', isExternal: false };\n\t}\n\n\tlet displayUrl = safeDecodeURI( linkUrl );\n\tlet isExternal = false;\n\n\t// Check hash links and relative paths first - these are always internal\n\tif ( isRelativePath( linkUrl ) || isHashLink( linkUrl ) ) {\n\t\treturn { displayUrl, isExternal: false };\n\t}\n\n\t// Try to parse as a full URL to determine if it's actually external\n\t// This must happen before trusting the type attribute\n\ttry {\n\t\tconst parsedUrl = new URL( linkUrl );\n\t\t// Use provided siteUrl or fall back to window.location.origin\n\t\tconst siteDomain = siteUrl || window.location.origin;\n\t\tif ( parsedUrl.origin === siteDomain ) {\n\t\t\t// Show only the pathname (and search/hash if present)\n\t\t\tlet path = parsedUrl.pathname + parsedUrl.search + parsedUrl.hash;\n\t\t\t// Remove trailing slash\n\t\t\tif ( path.endsWith( '/' ) && path.length > 1 ) {\n\t\t\t\tpath = path.slice( 0, -1 );\n\t\t\t}\n\t\t\tdisplayUrl = path;\n\t\t} else {\n\t\t\t// Different origin - this is an external link\n\t\t\tisExternal = true;\n\t\t}\n\t} catch ( e ) {\n\t\t// URL parsing failed - this means it's likely a URL without a protocol (e.g., \"www.example.com\")\n\t\t// Since we already checked for relative paths and hash links above, treat as external\n\t\tisExternal = true;\n\t}\n\n\treturn { displayUrl, isExternal };\n}\n\n/**\n * Compute badges for the link preview.\n *\n * @param {Object}  options                   - Options object\n * @param {string}  options.url               - Link URL\n * @param {string}  options.type              - Entity type (page, post, etc.)\n * @param {boolean} options.isExternal        - Whether link is external\n * @param {string}  options.entityStatus      - Entity status (publish, draft, etc.)\n * @param {boolean} options.hasBinding        - Whether link has entity binding\n * @param {boolean} options.isEntityAvailable - Whether bound entity exists\n * @return {Array} Array of badge objects with label and intent\n */\nexport function computeBadges( {\n\turl,\n\ttype,\n\tisExternal,\n\tentityStatus,\n\thasBinding,\n\tisEntityAvailable,\n} ) {\n\tconst badges = [];\n\n\t// Kind badge\n\tif ( url ) {\n\t\tif ( isExternal ) {\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'External link' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t} else if ( isHashLink( url ) ) {\n\t\t\t// Hash links should be detected before type check\n\t\t\t// because they're not entity links even if type is set\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'Internal link' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t} else if ( type && type !== 'custom' ) {\n\t\t\t// Show entity type badge (page, post, category, etc.)\n\t\t\t// but not 'custom' since that's just a manual link\n\t\t\tbadges.push( { label: capitalize( type ), intent: 'default' } );\n\t\t} else {\n\t\t\t// Internal link (not external, not hash, not entity)\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'Page' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t}\n\t}\n\n\t// Status badge\n\tif ( hasBinding && ! isEntityAvailable ) {\n\t\tbadges.push( {\n\t\t\tlabel: sprintf(\n\t\t\t\t/* translators: %s is the entity type (e.g., \"page\", \"post\", \"category\") */\n\t\t\t\t__( 'Missing %s' ),\n\t\t\t\ttype\n\t\t\t),\n\t\t\tintent: 'error',\n\t\t} );\n\t} else if ( ! url ) {\n\t\tbadges.push( { label: __( 'No link selected' ), intent: 'error' } );\n\t} else if ( entityStatus ) {\n\t\tconst statusMap = {\n\t\t\tpublish: { label: __( 'Published' ), intent: 'success' },\n\t\t\tfuture: { label: __( 'Scheduled' ), intent: 'warning' },\n\t\t\tdraft: { label: __( 'Draft' ), intent: 'warning' },\n\t\t\tpending: { label: __( 'Pending' ), intent: 'warning' },\n\t\t\tprivate: { label: __( 'Private' ), intent: 'default' },\n\t\t\ttrash: { label: __( 'Trash' ), intent: 'error' },\n\t\t};\n\t\tconst badge = statusMap[ entityStatus ];\n\t\tif ( badge ) {\n\t\t\tbadges.push( badge );\n\t\t}\n\t}\n\n\treturn badges;\n}\n\n/**\n * Hook to compute link preview data for display.\n *\n * This hook takes raw link data and entity information and computes\n * presentation-ready preview data including formatted title, URL, and badges.\n *\n * @param {Object}  options                   - Options object\n * @param {string}  options.url               - Link URL\n * @param {string}  options.type              - Entity type (page, post, etc.)\n * @param {Object}  options.entityRecord      - Entity record\n * @param {boolean} options.hasBinding        - Whether link has entity binding\n * @param {boolean} options.isEntityAvailable - Whether bound entity exists\n * @return {Object} Preview data object with title, url, image, and badges\n */\nexport function useLinkPreview( {\n\turl,\n\tentityRecord,\n\ttype,\n\thasBinding,\n\tisEntityAvailable,\n} ) {\n\t// Get the WordPress site URL from settings\n\tconst siteUrl = useSelect( ( select ) => {\n\t\tconst siteEntity = select( coreDataStore ).getEntityRecord(\n\t\t\t'root',\n\t\t\t'site'\n\t\t);\n\t\treturn siteEntity?.url;\n\t}, [] );\n\n\tconst title =\n\t\tentityRecord?.title?.rendered ||\n\t\tentityRecord?.title ||\n\t\tentityRecord?.name;\n\n\t// Fetch rich URL data if we don't have a title. Internal links should have passed a title.\n\tconst { richData } = useRemoteUrlData( title ? null : url );\n\n\t// Compute display URL and external flag\n\tconst { displayUrl, isExternal } = computeDisplayUrl( {\n\t\tlinkUrl: url,\n\t\tsiteUrl,\n\t} );\n\n\tconst image = useSelect(\n\t\t( select ) => {\n\t\t\t// Only fetch for post-type entities with featured media\n\t\t\tif ( ! entityRecord?.featured_media ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst { getEntityRecord } = select( coreDataStore );\n\n\t\t\t// Get the media entity to fetch the image URL\n\t\t\tconst media = getEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\tentityRecord.featured_media\n\t\t\t);\n\n\t\t\t// Return the thumbnail or medium size URL, fallback to source_url\n\t\t\treturn (\n\t\t\t\tmedia?.media_details?.sizes?.thumbnail?.source_url ||\n\t\t\t\tmedia?.media_details?.sizes?.medium?.source_url ||\n\t\t\t\tmedia?.source_url ||\n\t\t\t\tnull\n\t\t\t);\n\t\t},\n\t\t[ entityRecord?.featured_media ]\n\t);\n\n\t// Compute badges\n\tconst badges = computeBadges( {\n\t\turl,\n\t\ttype,\n\t\tisExternal,\n\t\tentityStatus: entityRecord?.status,\n\t\thasBinding,\n\t\tisEntityAvailable,\n\t} );\n\n\t// Get display title - use provided title, fallback to rich data, or URL\n\tconst displayTitle = url\n\t\t? title || richData?.title || safeDecodeURI( url )\n\t\t: __( 'Add link' );\n\n\treturn {\n\t\ttitle: displayTitle,\n\t\turl: displayUrl,\n\t\timage,\n\t\tbadges,\n\t};\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { safeDecodeURI } from '@wordpress/url';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreDataStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useRemoteUrlData, isHashLink, isRelativePath } = unlock(\n\tblockEditorPrivateApis\n);\n\n/**\n * Capitalize the first letter of a string.\n *\n * @param {string} str - The string to capitalize\n * @return {string} Capitalized string\n */\nfunction capitalize( str ) {\n\treturn str.charAt( 0 ).toUpperCase() + str.slice( 1 );\n}\n\n/**\n * Compute display URL - strips site URL if internal, shows full URL if external.\n *\n * @param {Object} options         - Parameters object\n * @param {string} options.linkUrl - The URL to process\n * @param {string} options.homeUrl - The WordPress site URL (required for internal/external detection)\n * @return {Object} Object with displayUrl and isExternal flag\n */\nexport function computeDisplayUrl( { linkUrl, homeUrl } = {} ) {\n\tif ( ! linkUrl ) {\n\t\treturn { displayUrl: '', isExternal: false };\n\t}\n\n\tlet displayUrl = safeDecodeURI( linkUrl );\n\tlet isExternal = false;\n\n\t// Check hash links and relative paths first - these are always internal\n\tif ( isRelativePath( linkUrl ) || isHashLink( linkUrl ) ) {\n\t\treturn { displayUrl, isExternal: false };\n\t}\n\n\t// Try to parse as a full URL to determine if it's actually external\n\t// This must happen before trusting the type attribute\n\ttry {\n\t\tconst parsedUrl = new URL( linkUrl );\n\t\t// Compare by host (not origin) so http/https to same site both count as internal\n\t\tconst siteHost = new URL( homeUrl ).host;\n\n\t\tif ( parsedUrl.host === siteHost ) {\n\t\t\t// Show only the pathname (and search/hash if present)\n\t\t\tlet path = parsedUrl.pathname + parsedUrl.search + parsedUrl.hash;\n\t\t\t// Remove trailing slash\n\t\t\tif ( path.endsWith( '/' ) && path.length > 1 ) {\n\t\t\t\tpath = path.slice( 0, -1 );\n\t\t\t}\n\t\t\tdisplayUrl = path;\n\t\t} else {\n\t\t\t// Different host - this is an external link\n\t\t\tisExternal = true;\n\t\t}\n\t} catch ( e ) {\n\t\t// URL parsing failed - treat as external (e.g. no homeUrl, or URL without protocol)\n\t\tisExternal = true;\n\t}\n\n\treturn { displayUrl, isExternal };\n}\n\n/**\n * Compute badges for the link preview.\n *\n * @param {Object}  options                   - Options object\n * @param {string}  options.url               - Link URL\n * @param {string}  options.type              - Entity type (page, post, etc.)\n * @param {boolean} options.isExternal        - Whether link is external\n * @param {string}  options.entityStatus      - Entity status (publish, draft, etc.)\n * @param {boolean} options.hasBinding        - Whether link has entity binding\n * @param {boolean} options.isEntityAvailable - Whether bound entity exists\n * @return {Array} Array of badge objects with label and intent\n */\nexport function computeBadges( {\n\turl,\n\ttype,\n\tisExternal,\n\tentityStatus,\n\thasBinding,\n\tisEntityAvailable,\n} ) {\n\tconst badges = [];\n\n\t// Kind badge\n\tif ( url ) {\n\t\tif ( isExternal ) {\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'External link' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t} else if ( isHashLink( url ) ) {\n\t\t\t// Hash links should be detected before type check\n\t\t\t// because they're not entity links even if type is set\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'Internal link' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t} else if ( type && type !== 'custom' ) {\n\t\t\t// Show entity type badge (page, post, category, etc.)\n\t\t\t// but not 'custom' since that's just a manual link\n\t\t\tbadges.push( { label: capitalize( type ), intent: 'default' } );\n\t\t} else {\n\t\t\t// Internal link (not external, not hash, not entity)\n\t\t\tbadges.push( {\n\t\t\t\tlabel: __( 'Page' ),\n\t\t\t\tintent: 'default',\n\t\t\t} );\n\t\t}\n\t}\n\n\t// Status badge\n\tif ( hasBinding && ! isEntityAvailable ) {\n\t\tbadges.push( {\n\t\t\tlabel: sprintf(\n\t\t\t\t/* translators: %s is the entity type (e.g., \"page\", \"post\", \"category\") */\n\t\t\t\t__( 'Missing %s' ),\n\t\t\t\ttype\n\t\t\t),\n\t\t\tintent: 'error',\n\t\t} );\n\t} else if ( ! url ) {\n\t\tbadges.push( { label: __( 'No link selected' ), intent: 'error' } );\n\t} else if ( entityStatus ) {\n\t\tconst statusMap = {\n\t\t\tpublish: { label: __( 'Published' ), intent: 'success' },\n\t\t\tfuture: { label: __( 'Scheduled' ), intent: 'warning' },\n\t\t\tdraft: { label: __( 'Draft' ), intent: 'warning' },\n\t\t\tpending: { label: __( 'Pending' ), intent: 'warning' },\n\t\t\tprivate: { label: __( 'Private' ), intent: 'default' },\n\t\t\ttrash: { label: __( 'Trash' ), intent: 'error' },\n\t\t};\n\t\tconst badge = statusMap[ entityStatus ];\n\t\tif ( badge ) {\n\t\t\tbadges.push( badge );\n\t\t}\n\t}\n\n\treturn badges;\n}\n\n/**\n * Hook to compute link preview data for display.\n *\n * This hook takes raw link data and entity information and computes\n * presentation-ready preview data including formatted title, URL, and badges.\n *\n * @param {Object}  options                   - Options object\n * @param {string}  options.url               - Link URL\n * @param {string}  options.type              - Entity type (page, post, etc.)\n * @param {Object}  options.entityRecord      - Entity record\n * @param {boolean} options.hasBinding        - Whether link has entity binding\n * @param {boolean} options.isEntityAvailable - Whether bound entity exists\n * @return {Object} Preview data object with title, url, image, and badges\n */\nexport function useLinkPreview( {\n\turl,\n\tentityRecord,\n\ttype,\n\thasBinding,\n\tisEntityAvailable,\n} ) {\n\t// Get the WordPress homepage URL from settings\n\tconst homeUrl = useSelect( ( select ) => {\n\t\treturn select( coreDataStore ).getEntityRecord(\n\t\t\t'root',\n\t\t\t'__unstableBase'\n\t\t)?.home;\n\t}, [] );\n\n\tconst title =\n\t\tentityRecord?.title?.rendered ||\n\t\tentityRecord?.title ||\n\t\tentityRecord?.name;\n\n\t// Fetch rich URL data if we don't have a title. Internal links should have passed a title.\n\tconst { richData } = useRemoteUrlData( title ? null : url );\n\n\t// Compute display URL and external flag\n\tconst { displayUrl, isExternal } = computeDisplayUrl( {\n\t\tlinkUrl: url,\n\t\thomeUrl,\n\t} );\n\n\tconst image = useSelect(\n\t\t( select ) => {\n\t\t\t// Only fetch for post-type entities with featured media\n\t\t\tif ( ! entityRecord?.featured_media ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst { getEntityRecord } = select( coreDataStore );\n\n\t\t\t// Get the media entity to fetch the image URL\n\t\t\tconst media = getEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'attachment',\n\t\t\t\tentityRecord.featured_media\n\t\t\t);\n\n\t\t\t// Return the thumbnail or medium size URL, fallback to source_url\n\t\t\treturn (\n\t\t\t\tmedia?.media_details?.sizes?.thumbnail?.source_url ||\n\t\t\t\tmedia?.media_details?.sizes?.medium?.source_url ||\n\t\t\t\tmedia?.source_url ||\n\t\t\t\tnull\n\t\t\t);\n\t\t},\n\t\t[ entityRecord?.featured_media ]\n\t);\n\n\t// Compute badges\n\tconst badges = computeBadges( {\n\t\turl,\n\t\ttype,\n\t\tisExternal,\n\t\tentityStatus: entityRecord?.status,\n\t\thasBinding,\n\t\tisEntityAvailable,\n\t} );\n\n\t// Get display title - use provided title, fallback to rich data, or URL\n\tconst displayTitle = url\n\t\t? title || richData?.title || safeDecodeURI( url )\n\t\t: __( 'Add link' );\n\n\treturn {\n\t\ttitle: displayTitle,\n\t\turl: displayUrl,\n\t\timage,\n\t\tbadges,\n\t};\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/page-list-item/edit.mjs

@@ -3,7 +3,6 @@ import clsx from "clsx";
 import { useBlockProps, useInnerBlocksProps } from "@wordpress/block-editor";
 import { useSelect } from "@wordpress/data";
 import { store as coreStore } from "@wordpress/core-data";
-import { RawHTML } from "@wordpress/element";
 import { safeHTML } from "@wordpress/dom";
 import { ItemSubmenuIcon } from "../navigation-link/icons.mjs";
 import {
@@ -57,7 +56,9 @@ function PageListItemEdit({ context, attributes }) {
               type: "button",
               className: "wp-block-navigation-item__content wp-block-navigation-submenu__toggle",
               "aria-expanded": "false",
-              children: /* @__PURE__ */ jsx(RawHTML, { children: safeHTML(label) })
+              dangerouslySetInnerHTML: {
+                __html: safeHTML(label)
+              }
             }
           ),
           /* @__PURE__ */ jsx("span", { className: "wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon", children: /* @__PURE__ */ jsx(ItemSubmenuIcon, {}) })
@@ -68,7 +69,9 @@ function PageListItemEdit({ context, attributes }) {
               "wp-block-navigation-item__content": isNavigationChild
             }),
             href: link,
-            children: /* @__PURE__ */ jsx(RawHTML, { children: safeHTML(title) })
+            dangerouslySetInnerHTML: {
+              __html: safeHTML(title)
+            }
           }
         ),
         hasChildren && /* @__PURE__ */ jsxs(Fragment, { children: [

package/build-module/page-list-item/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page-list-item/edit.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { RawHTML } from '@wordpress/element';\nimport { safeHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { ItemSubmenuIcon } from '../navigation-link/icons';\nimport {\n\tgetColors,\n\tgetNavigationChildBlockProps,\n} from '../navigation/edit/utils';\n\nfunction useFrontPageId() {\n\treturn useSelect( ( select ) => {\n\t\tconst canReadSettings = select( coreStore ).canUser( 'read', {\n\t\t\tkind: 'root',\n\t\t\tname: 'site',\n\t\t} );\n\t\tif ( ! canReadSettings ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst site = select( coreStore ).getEntityRecord( 'root', 'site' );\n\t\treturn site?.show_on_front === 'page' && site?.page_on_front;\n\t}, [] );\n}\n\nexport default function PageListItemEdit( { context, attributes } ) {\n\tconst { id, label, link, hasChildren, title } = attributes;\n\tconst isNavigationChild = 'showSubmenuIcon' in context;\n\tconst frontPageId = useFrontPageId();\n\n\t// Get submenu visibility from context. The Navigation block handles\n\t// backward compatibility by migrating openSubmenusOnClick to submenuVisibility\n\t// via its deprecation handler before this context is received.\n\tconst submenuVisibility = context.submenuVisibility;\n\n\tconst openOnClick = submenuVisibility === 'click';\n\n\tconst innerBlocksColors = getColors( context, true );\n\n\tconst navigationChildBlockProps =\n\t\tgetNavigationChildBlockProps( innerBlocksColors );\n\tconst blockProps = useBlockProps( navigationChildBlockProps, {\n\t\tclassName: 'wp-block-pages-list__item',\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps );\n\n\treturn (\n\t\t<li\n\t\t\tkey={ id }\n\t\t\tclassName={ clsx( 'wp-block-pages-list__item', {\n\t\t\t\t'has-child': hasChildren,\n\t\t\t\t'wp-block-navigation-item': isNavigationChild,\n\t\t\t\t// Class assignment logic matches PHP rendering in page-list/index.php\n\t\t\t\t'open-on-click': openOnClick,\n\t\t\t\t'open-always': submenuVisibility === 'always',\n\t\t\t\t// Must check hover mode explicitly to match PHP elseif structure (index.php:212)\n\t\t\t\t'open-on-hover-click':\n\t\t\t\t\tsubmenuVisibility === 'hover' && context.showSubmenuIcon,\n\t\t\t\t'menu-item-home': id === frontPageId,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ hasChildren && openOnClick ? (\n\t\t\t\t<>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"wp-block-navigation-item__content wp-block-navigation-submenu__toggle\"\n\t\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<RawHTML>{ safeHTML( label ) }</RawHTML>\n\t\t\t\t\t</button>\n\t\t\t\t\t<span className=\"wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon\">\n\t\t\t\t\t\t<ItemSubmenuIcon />\n\t\t\t\t\t</span>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<a\n\t\t\t\t\tclassName={ clsx( 'wp-block-pages-list__item__link', {\n\t\t\t\t\t\t'wp-block-navigation-item__content': isNavigationChild,\n\t\t\t\t\t} ) }\n\t\t\t\t\thref={ link }\n\t\t\t\t>\n\t\t\t\t\t<RawHTML>{ safeHTML( title ) }</RawHTML>\n\t\t\t\t</a>\n\t\t\t) }\n\t\t\t{ hasChildren && (\n\t\t\t\t<>\n\t\t\t\t\t{ ! openOnClick && context.showSubmenuIcon && (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon\"\n\t\t\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ItemSubmenuIcon />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t\t<ul { ...innerBlocksProps }></ul>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</li>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,eAAe,2BAA2B;AACnD,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAKzB,SAAS,uBAAuB;AAChC;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAuDH,mBAME,KANF;AArDJ,SAAS,iBAAiB;AACzB,SAAO,UAAW,CAAE,WAAY;AAC/B,UAAM,kBAAkB,OAAQ,SAAU,EAAE,QAAS,QAAQ;AAAA,MAC5D,MAAM;AAAA,MACN,MAAM;AAAA,IACP,CAAE;AACF,QAAK,CAAE,iBAAkB;AACxB,aAAO;AAAA,IACR;AAEA,UAAM,OAAO,OAAQ,SAAU,EAAE,gBAAiB,QAAQ,MAAO;AACjE,WAAO,MAAM,kBAAkB,UAAU,MAAM;AAAA,EAChD,GAAG,CAAC,CAAE;AACP;AAEe,SAAR,iBAAmC,EAAE,SAAS,WAAW,GAAI;AACnE,QAAM,EAAE,IAAI,OAAO,MAAM,aAAa,MAAM,IAAI;AAChD,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,cAAc,eAAe;AAKnC,QAAM,oBAAoB,QAAQ;AAElC,QAAM,cAAc,sBAAsB;AAE1C,QAAM,oBAAoB,UAAW,SAAS,IAAK;AAEnD,QAAM,4BACL,6BAA8B,iBAAkB;AACjD,QAAM,aAAa,cAAe,2BAA2B;AAAA,IAC5D,WAAW;AAAA,EACZ,CAAE;AAEF,QAAM,mBAAmB,oBAAqB,UAAW;AAEzD,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,WAAY,KAAM,6BAA6B;AAAA,QAC9C,aAAa;AAAA,QACb,4BAA4B;AAAA;AAAA,QAE5B,iBAAiB;AAAA,QACjB,eAAe,sBAAsB;AAAA;AAAA,QAErC,uBACC,sBAAsB,WAAW,QAAQ;AAAA,QAC1C,kBAAkB,OAAO;AAAA,MAC1B,CAAE;AAAA,MAEA;AAAA,uBAAe,cAChB,iCACC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,iBAAc;AAAA,cAEd,8BAAC,WAAU,mBAAU,KAAM,GAAG;AAAA;AAAA,UAC/B;AAAA,UACA,oBAAC,UAAK,WAAU,sEACf,8BAAC,mBAAgB,GAClB;AAAA,WACD,IAEA;AAAA,UAAC;AAAA;AAAA,YACA,WAAY,KAAM,mCAAmC;AAAA,cACpD,qCAAqC;AAAA,YACtC,CAAE;AAAA,YACF,MAAO;AAAA,YAEP,8BAAC,WAAU,mBAAU,KAAM,GAAG;AAAA;AAAA,QAC/B;AAAA,QAEC,eACD,iCACG;AAAA,WAAE,eAAe,QAAQ,mBAC1B;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,iBAAc;AAAA,cACd,MAAK;AAAA,cAEL,8BAAC,mBAAgB;AAAA;AAAA,UAClB;AAAA,UAED,oBAAC,QAAK,GAAG,kBAAmB;AAAA,WAC7B;AAAA;AAAA;AAAA,IAhDK;AAAA,EAkDP;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { safeHTML } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { ItemSubmenuIcon } from '../navigation-link/icons';\nimport {\n\tgetColors,\n\tgetNavigationChildBlockProps,\n} from '../navigation/edit/utils';\n\nfunction useFrontPageId() {\n\treturn useSelect( ( select ) => {\n\t\tconst canReadSettings = select( coreStore ).canUser( 'read', {\n\t\t\tkind: 'root',\n\t\t\tname: 'site',\n\t\t} );\n\t\tif ( ! canReadSettings ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\tconst site = select( coreStore ).getEntityRecord( 'root', 'site' );\n\t\treturn site?.show_on_front === 'page' && site?.page_on_front;\n\t}, [] );\n}\n\nexport default function PageListItemEdit( { context, attributes } ) {\n\tconst { id, label, link, hasChildren, title } = attributes;\n\tconst isNavigationChild = 'showSubmenuIcon' in context;\n\tconst frontPageId = useFrontPageId();\n\n\t// Get submenu visibility from context. The Navigation block handles\n\t// backward compatibility by migrating openSubmenusOnClick to submenuVisibility\n\t// via its deprecation handler before this context is received.\n\tconst submenuVisibility = context.submenuVisibility;\n\n\tconst openOnClick = submenuVisibility === 'click';\n\n\tconst innerBlocksColors = getColors( context, true );\n\n\tconst navigationChildBlockProps =\n\t\tgetNavigationChildBlockProps( innerBlocksColors );\n\tconst blockProps = useBlockProps( navigationChildBlockProps, {\n\t\tclassName: 'wp-block-pages-list__item',\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps );\n\n\treturn (\n\t\t<li\n\t\t\tkey={ id }\n\t\t\tclassName={ clsx( 'wp-block-pages-list__item', {\n\t\t\t\t'has-child': hasChildren,\n\t\t\t\t'wp-block-navigation-item': isNavigationChild,\n\t\t\t\t// Class assignment logic matches PHP rendering in page-list/index.php\n\t\t\t\t'open-on-click': openOnClick,\n\t\t\t\t'open-always': submenuVisibility === 'always',\n\t\t\t\t// Must check hover mode explicitly to match PHP elseif structure (index.php:212)\n\t\t\t\t'open-on-hover-click':\n\t\t\t\t\tsubmenuVisibility === 'hover' && context.showSubmenuIcon,\n\t\t\t\t'menu-item-home': id === frontPageId,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ hasChildren && openOnClick ? (\n\t\t\t\t<>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"wp-block-navigation-item__content wp-block-navigation-submenu__toggle\"\n\t\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t\t__html: safeHTML( label ),\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t\t<span className=\"wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon\">\n\t\t\t\t\t\t<ItemSubmenuIcon />\n\t\t\t\t\t</span>\n\t\t\t\t</>\n\t\t\t) : (\n\t\t\t\t<a\n\t\t\t\t\tclassName={ clsx( 'wp-block-pages-list__item__link', {\n\t\t\t\t\t\t'wp-block-navigation-item__content': isNavigationChild,\n\t\t\t\t\t} ) }\n\t\t\t\t\thref={ link }\n\t\t\t\t\tdangerouslySetInnerHTML={ {\n\t\t\t\t\t\t__html: safeHTML( title ),\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasChildren && (\n\t\t\t\t<>\n\t\t\t\t\t{ ! openOnClick && context.showSubmenuIcon && (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon\"\n\t\t\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ItemSubmenuIcon />\n\t\t\t\t\t\t</button>\n\t\t\t\t\t) }\n\t\t\t\t\t<ul { ...innerBlocksProps }></ul>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</li>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAIjB,SAAS,eAAe,2BAA2B;AACnD,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,gBAAgB;AAKzB,SAAS,uBAAuB;AAChC;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAuDH,mBACC,KADD;AArDJ,SAAS,iBAAiB;AACzB,SAAO,UAAW,CAAE,WAAY;AAC/B,UAAM,kBAAkB,OAAQ,SAAU,EAAE,QAAS,QAAQ;AAAA,MAC5D,MAAM;AAAA,MACN,MAAM;AAAA,IACP,CAAE;AACF,QAAK,CAAE,iBAAkB;AACxB,aAAO;AAAA,IACR;AAEA,UAAM,OAAO,OAAQ,SAAU,EAAE,gBAAiB,QAAQ,MAAO;AACjE,WAAO,MAAM,kBAAkB,UAAU,MAAM;AAAA,EAChD,GAAG,CAAC,CAAE;AACP;AAEe,SAAR,iBAAmC,EAAE,SAAS,WAAW,GAAI;AACnE,QAAM,EAAE,IAAI,OAAO,MAAM,aAAa,MAAM,IAAI;AAChD,QAAM,oBAAoB,qBAAqB;AAC/C,QAAM,cAAc,eAAe;AAKnC,QAAM,oBAAoB,QAAQ;AAElC,QAAM,cAAc,sBAAsB;AAE1C,QAAM,oBAAoB,UAAW,SAAS,IAAK;AAEnD,QAAM,4BACL,6BAA8B,iBAAkB;AACjD,QAAM,aAAa,cAAe,2BAA2B;AAAA,IAC5D,WAAW;AAAA,EACZ,CAAE;AAEF,QAAM,mBAAmB,oBAAqB,UAAW;AAEzD,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,WAAY,KAAM,6BAA6B;AAAA,QAC9C,aAAa;AAAA,QACb,4BAA4B;AAAA;AAAA,QAE5B,iBAAiB;AAAA,QACjB,eAAe,sBAAsB;AAAA;AAAA,QAErC,uBACC,sBAAsB,WAAW,QAAQ;AAAA,QAC1C,kBAAkB,OAAO;AAAA,MAC1B,CAAE;AAAA,MAEA;AAAA,uBAAe,cAChB,iCACC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,iBAAc;AAAA,cACd,yBAA0B;AAAA,gBACzB,QAAQ,SAAU,KAAM;AAAA,cACzB;AAAA;AAAA,UACD;AAAA,UACA,oBAAC,UAAK,WAAU,sEACf,8BAAC,mBAAgB,GAClB;AAAA,WACD,IAEA;AAAA,UAAC;AAAA;AAAA,YACA,WAAY,KAAM,mCAAmC;AAAA,cACpD,qCAAqC;AAAA,YACtC,CAAE;AAAA,YACF,MAAO;AAAA,YACP,yBAA0B;AAAA,cACzB,QAAQ,SAAU,KAAM;AAAA,YACzB;AAAA;AAAA,QACD;AAAA,QAEC,eACD,iCACG;AAAA,WAAE,eAAe,QAAQ,mBAC1B;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,iBAAc;AAAA,cACd,MAAK;AAAA,cAEL,8BAAC,mBAAgB;AAAA;AAAA,UAClB;AAAA,UAED,oBAAC,QAAK,GAAG,kBAAmB;AAAA,WAC7B;AAAA;AAAA;AAAA,IAlDK;AAAA,EAoDP;AAEF;",
   "names": []
 }

package/build-module/playlist/edit.mjs

@@ -1,7 +1,7 @@
 // packages/block-library/src/playlist/edit.js
 import clsx from "clsx";
 import { v4 as uuid } from "uuid";
-import { useState, useCallback, useEffect } from "@wordpress/element";
+import { useCallback, useEffect } from "@wordpress/element";
 import {
   store as blockEditorStore,
   MediaPlaceholder,
@@ -17,109 +17,35 @@ import {
   ToggleControl,
   Disabled,
   SelectControl,
-  Spinner,
   __experimentalToolsPanel as ToolsPanel,
   __experimentalToolsPanelItem as ToolsPanelItem
 } from "@wordpress/components";
 import { useSelect, useDispatch } from "@wordpress/data";
 import { store as noticesStore } from "@wordpress/notices";
-import { __, _x, sprintf } from "@wordpress/i18n";
+import { __ } from "@wordpress/i18n";
 import { audio as icon } from "@wordpress/icons";
-import { safeHTML, __unstableStripHTML as stripHTML } from "@wordpress/dom";
 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ALLOWED_MEDIA_TYPES = ["audio"];
-var CurrentTrack = ({ track, showImages, onTrackEnd }) => {
-  const trackTitle = {
-    dangerouslySetInnerHTML: {
-      __html: safeHTML(track?.title ? track.title : __("Untitled"))
-    }
+function getTrackAttributes(media) {
+  return {
+    id: media.id || media.url,
+    // Attachment ID or URL.
+    uniqueId: uuid(),
+    // Unique ID for the track.
+    src: media.url,
+    title: media.title,
+    artist: media.artist || media?.meta?.artist || media?.media_details?.artist || __("Unknown artist"),
+    album: media.album || media?.meta?.album || media?.media_details?.album || __("Unknown album"),
+    length: media?.fileLength || media?.media_details?.length_formatted,
+    // Prevent using the default media attachment icon as the track image.
+    // Note: Image is not available when a new track is uploaded.
+    image: media?.image?.src && media?.image?.src.endsWith("/images/media/audio.svg") ? "" : media?.image?.src
   };
-  const trackArtist = {
-    dangerouslySetInnerHTML: {
-      __html: safeHTML(
-        track?.artist ? track.artist : __("Unknown artist")
-      )
-    }
-  };
-  const trackAlbum = {
-    dangerouslySetInnerHTML: {
-      __html: safeHTML(
-        track?.album ? track.album : __("Unknown album")
-      )
-    }
-  };
-  let ariaLabel;
-  if (track?.title && track?.artist && track?.album) {
-    ariaLabel = stripHTML(
-      sprintf(
-        /* translators: %1$s: track title, %2$s artist name, %3$s: album name. */
-        _x(
-          "%1$s by %2$s from the album %3$s",
-          "track title, artist name, album name"
-        ),
-        track?.title,
-        track?.artist,
-        track?.album
-      )
-    );
-  } else if (track?.title) {
-    ariaLabel = stripHTML(track.title);
-  } else {
-    ariaLabel = stripHTML(__("Untitled"));
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "wp-block-playlist__current-item", children: [
-      showImages && track?.image && /* @__PURE__ */ jsx(
-        "img",
-        {
-          className: "wp-block-playlist__item-image",
-          src: track.image,
-          alt: "",
-          width: "70px",
-          height: "70px"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { children: [
-        !track?.title ? /* @__PURE__ */ jsx("span", { className: "wp-block-playlist__item-title", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "wp-block-playlist__item-title",
-            ...trackTitle
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "wp-block-playlist__current-item-artist-album", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "wp-block-playlist__item-artist",
-              ...trackArtist
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "wp-block-playlist__item-album",
-              ...trackAlbum
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "audio",
-      {
-        controls: "controls",
-        src: track?.url ? track.url : "",
-        onEnded: onTrackEnd,
-        "aria-label": ariaLabel,
-        tabIndex: 0
-      }
-    )
-  ] });
-};
+}
 var PlaylistEdit = ({
   attributes,
   setAttributes,
@@ -135,7 +61,6 @@ var PlaylistEdit = ({
     showArtists,
     currentTrack
   } = attributes;
-  const [trackListIndex, setTrackListIndex] = useState(0);
   const blockProps = useBlockProps();
   const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
   const { createErrorNotice } = useDispatch(noticesStore);
@@ -205,21 +130,7 @@ var PlaylistEdit = ({
       if (!Array.isArray(media)) {
         media = [media];
       }
-      const trackAttributes = (track) => ({
-        id: track.id || track.url,
-        // Attachment ID or URL.
-        uniqueId: uuid(),
-        // Unique ID for the track.
-        src: track.url,
-        title: track.title,
-        artist: track.artist || track?.meta?.artist || track?.media_details?.artist || __("Unknown artist"),
-        album: track.album || track?.meta?.album || track?.media_details?.album || __("Unknown album"),
-        length: track?.fileLength || track?.media_details?.length_formatted,
-        // Prevent using the default media attachment icon as the track image.
-        // Note: Image is not available when a new track is uploaded.
-        image: track?.image?.src && track?.image?.src.endsWith("/images/media/audio.svg") ? "" : track?.image?.src
-      });
-      const trackList = media.map(trackAttributes);
+      const trackList = media.map(getTrackAttributes);
       __unstableMarkNextChangeAsNotPersistent();
       setAttributes({
         currentTrack: trackList.length > 0 ? trackList[0].uniqueId : null
@@ -236,28 +147,18 @@ var PlaylistEdit = ({
       clientId
     ]
   );
-  const onTrackEnd = useCallback(() => {
-    if (trackListIndex < tracks.length - 1) {
-      if (tracks[trackListIndex + 1]?.uniqueId) {
-        setTrackListIndex(trackListIndex + 1);
-        setAttributes({
-          currentTrack: tracks[trackListIndex + 1].uniqueId
-        });
-      }
-    } else {
-      setTrackListIndex(0);
-      if (tracks[0].uniqueId) {
-        setAttributes({ currentTrack: tracks[0].uniqueId });
-      } else if (tracks.length > 0) {
-        const validTrack = tracks.find(
-          (track) => track.uniqueId !== void 0
-        );
-        if (validTrack) {
-          setAttributes({ currentTrack: validTrack.uniqueId });
-        }
-      }
+  const currentTrackData = tracks.find(
+    (track) => track.uniqueId === currentTrack
+  );
+  const onTrackEnded = useCallback(() => {
+    const currentIndex = tracks.findIndex(
+      (track) => track.uniqueId === currentTrack
+    );
+    const nextTrack = tracks[currentIndex + 1] || tracks[0];
+    if (nextTrack?.uniqueId) {
+      setAttributes({ currentTrack: nextTrack.uniqueId });
     }
-  }, [setAttributes, trackListIndex, tracks]);
+  }, [currentTrack, tracks, setAttributes]);
   const onChangeOrder = useCallback(
     (trackOrder) => {
       const sortedBlocks = [...innerBlockTracks].sort((a, b) => {
@@ -268,13 +169,11 @@ var PlaylistEdit = ({
         }
         return titleB.localeCompare(titleA);
       });
-      const sortedTracks = sortedBlocks.map(
-        (block) => block.attributes
-      );
+      const firstUniqueId = sortedBlocks[0]?.attributes?.uniqueId;
       replaceInnerBlocks(clientId, sortedBlocks);
       setAttributes({
         order: trackOrder,
-        currentTrack: sortedTracks.length > 0 && sortedTracks[0].uniqueId !== currentTrack ? sortedTracks[0].uniqueId : currentTrack
+        currentTrack: firstUniqueId && firstUniqueId !== currentTrack ? firstUniqueId : currentTrack
       });
     },
     [
@@ -299,7 +198,7 @@ var PlaylistEdit = ({
     __experimentalAppenderTagName: "li",
     renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender
   });
-  if (!tracks || Array.isArray(tracks) && tracks.length === 0) {
+  if (tracks.length === 0) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -456,11 +355,13 @@ var PlaylistEdit = ({
     ) }),
     /* @__PURE__ */ jsxs("figure", { ...blockProps, children: [
       /* @__PURE__ */ jsx(Disabled, { isDisabled: !isSelected, children: /* @__PURE__ */ jsx(
-        CurrentTrack,
+        WaveformPlayer,
         {
-          track: tracks[trackListIndex],
-          showImages,
-          onTrackEnd
+          src: currentTrackData?.src,
+          title: currentTrackData?.title,
+          artist: currentTrackData?.artist,
+          image: currentTrackData?.image,
+          onEnded: onTrackEnded
         }
       ) }),
       showTracklist && /* @__PURE__ */ jsx(
@@ -489,6 +390,7 @@ var PlaylistEdit = ({
 };
 var edit_default = PlaylistEdit;
 export {
-  edit_default as default
+  edit_default as default,
+  getTrackAttributes
 };
 //# sourceMappingURL=edit.mjs.map

package/build-module/playlist/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/playlist/edit.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { v4 as uuid } from 'uuid';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useCallback, useEffect } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\tMediaPlaceholder,\n\tMediaReplaceFlow,\n\tBlockIcon,\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tBlockControls,\n\tInspectorControls,\n\tInnerBlocks,\n} from '@wordpress/block-editor';\nimport {\n\tToggleControl,\n\tDisabled,\n\tSelectControl,\n\tSpinner,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { __, _x, sprintf } from '@wordpress/i18n';\nimport { audio as icon } from '@wordpress/icons';\nimport { safeHTML, __unstableStripHTML as stripHTML } from '@wordpress/dom';\nimport { createBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { Caption } from '../utils/caption';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nconst ALLOWED_MEDIA_TYPES = [ 'audio' ];\n\nconst CurrentTrack = ( { track, showImages, onTrackEnd } ) => {\n\t/**\n\t * dangerouslySetInnerHTML and safeHTML are used because\n\t * the media library allows using some HTML tags in the title, artist, and album fields.\n\t */\n\tconst trackTitle = {\n\t\tdangerouslySetInnerHTML: {\n\t\t\t__html: safeHTML( track?.title ? track.title : __( 'Untitled' ) ),\n\t\t},\n\t};\n\tconst trackArtist = {\n\t\tdangerouslySetInnerHTML: {\n\t\t\t__html: safeHTML(\n\t\t\t\ttrack?.artist ? track.artist : __( 'Unknown artist' )\n\t\t\t),\n\t\t},\n\t};\n\tconst trackAlbum = {\n\t\tdangerouslySetInnerHTML: {\n\t\t\t__html: safeHTML(\n\t\t\t\ttrack?.album ? track.album : __( 'Unknown album' )\n\t\t\t),\n\t\t},\n\t};\n\n\tlet ariaLabel;\n\tif ( track?.title && track?.artist && track?.album ) {\n\t\tariaLabel = stripHTML(\n\t\t\tsprintf(\n\t\t\t\t/* translators: %1$s: track title, %2$s artist name, %3$s: album name. */\n\t\t\t\t_x(\n\t\t\t\t\t'%1$s by %2$s from the album %3$s',\n\t\t\t\t\t'track title, artist name, album name'\n\t\t\t\t),\n\t\t\t\ttrack?.title,\n\t\t\t\ttrack?.artist,\n\t\t\t\ttrack?.album\n\t\t\t)\n\t\t);\n\t} else if ( track?.title ) {\n\t\tariaLabel = stripHTML( track.title );\n\t} else {\n\t\tariaLabel = stripHTML( __( 'Untitled' ) );\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<div className=\"wp-block-playlist__current-item\">\n\t\t\t\t{ showImages && track?.image && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tclassName=\"wp-block-playlist__item-image\"\n\t\t\t\t\t\tsrc={ track.image }\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\twidth=\"70px\"\n\t\t\t\t\t\theight=\"70px\"\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t<div>\n\t\t\t\t\t{ ! track?.title ? (\n\t\t\t\t\t\t<span className=\"wp-block-playlist__item-title\">\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"wp-block-playlist__item-title\"\n\t\t\t\t\t\t\t{ ...trackTitle }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<div className=\"wp-block-playlist__current-item-artist-album\">\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"wp-block-playlist__item-artist\"\n\t\t\t\t\t\t\t{ ...trackArtist }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"wp-block-playlist__item-album\"\n\t\t\t\t\t\t\t{ ...trackAlbum }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<audio\n\t\t\t\tcontrols=\"controls\"\n\t\t\t\tsrc={ track?.url ? track.url : '' }\n\t\t\t\tonEnded={ onTrackEnd }\n\t\t\t\taria-label={ ariaLabel }\n\t\t\t\ttabIndex={ 0 }\n\t\t\t/>\n\t\t</>\n\t);\n};\n\nconst PlaylistEdit = ( {\n\tattributes,\n\tsetAttributes,\n\tisSelected,\n\tinsertBlocksAfter,\n\tclientId,\n} ) => {\n\tconst {\n\t\torder,\n\t\tshowTracklist,\n\t\tshowNumbers,\n\t\tshowImages,\n\t\tshowArtists,\n\t\tcurrentTrack,\n\t} = attributes;\n\tconst [ trackListIndex, setTrackListIndex ] = useState( 0 );\n\tconst blockProps = useBlockProps();\n\tconst { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tfunction onUploadError( message ) {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t}\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst { innerBlockTracks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock: _getBlock } = select( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tinnerBlockTracks: _getBlock( clientId )?.innerBlocks ?? [],\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Ensure that each inner block has a unique ID,\n\t// even if a track is duplicated.\n\tuseEffect( () => {\n\t\tconst seen = new Set();\n\t\tlet hasDuplicates = false;\n\t\tconst updatedBlocks = innerBlockTracks.map( ( block ) => {\n\t\t\tif ( seen.has( block.attributes.uniqueId ) ) {\n\t\t\t\thasDuplicates = true;\n\t\t\t\treturn {\n\t\t\t\t\t...block,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\t...block.attributes,\n\t\t\t\t\t\tuniqueId: uuid(),\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}\n\t\t\tseen.add( block.attributes.uniqueId );\n\t\t\treturn block;\n\t\t} );\n\t\tif ( hasDuplicates ) {\n\t\t\treplaceInnerBlocks( clientId, updatedBlocks );\n\t\t}\n\t}, [ innerBlockTracks, clientId, replaceInnerBlocks ] );\n\n\t// Create a list of tracks from the inner blocks,\n\t// but skip blocks that do not have a uniqueId attribute, such as the media placeholder.\n\tconst validTracks = innerBlockTracks.filter(\n\t\t( block ) => !! block.attributes.uniqueId\n\t);\n\tconst tracks = validTracks.map( ( block ) => block.attributes );\n\tconst firstTrackId = validTracks[ 0 ]?.attributes?.uniqueId;\n\n\t// updateBlockAttributes is used to force updating the parent playlist block\n\t// when the currentTrack changes. Using setAttributes directly does not update\n\t// the currentTrack when multiple tracks are moved at the same time.\n\tuseEffect( () => {\n\t\tif ( tracks.length === 0 ) {\n\t\t\t// If there are no tracks but currentTrack is set, set it to null.\n\t\t\tif ( currentTrack !== null ) {\n\t\t\t\tupdateBlockAttributes( clientId, { currentTrack: null } );\n\t\t\t}\n\t\t} else if (\n\t\t\t// If the currentTrack is not the first track, update it to the first track.\n\t\t\tfirstTrackId &&\n\t\t\tfirstTrackId !== currentTrack\n\t\t) {\n\t\t\tupdateBlockAttributes( clientId, { currentTrack: firstTrackId } );\n\t\t}\n\t}, [\n\t\ttracks,\n\t\tcurrentTrack,\n\t\tfirstTrackId,\n\t\tclientId,\n\t\tupdateBlockAttributes,\n\t] );\n\n\tconst onSelectTracks = useCallback(\n\t\t( media ) => {\n\t\t\tif ( ! media ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! Array.isArray( media ) ) {\n\t\t\t\tmedia = [ media ];\n\t\t\t}\n\n\t\t\tconst trackAttributes = ( track ) => ( {\n\t\t\t\tid: track.id || track.url, // Attachment ID or URL.\n\t\t\t\tuniqueId: uuid(), // Unique ID for the track.\n\t\t\t\tsrc: track.url,\n\t\t\t\ttitle: track.title,\n\t\t\t\tartist:\n\t\t\t\t\ttrack.artist ||\n\t\t\t\t\ttrack?.meta?.artist ||\n\t\t\t\t\ttrack?.media_details?.artist ||\n\t\t\t\t\t__( 'Unknown artist' ),\n\t\t\t\talbum:\n\t\t\t\t\ttrack.album ||\n\t\t\t\t\ttrack?.meta?.album ||\n\t\t\t\t\ttrack?.media_details?.album ||\n\t\t\t\t\t__( 'Unknown album' ),\n\t\t\t\tlength:\n\t\t\t\t\ttrack?.fileLength || track?.media_details?.length_formatted,\n\t\t\t\t// Prevent using the default media attachment icon as the track image.\n\t\t\t\t// Note: Image is not available when a new track is uploaded.\n\t\t\t\timage:\n\t\t\t\t\ttrack?.image?.src &&\n\t\t\t\t\ttrack?.image?.src.endsWith( '/images/media/audio.svg' )\n\t\t\t\t\t\t? ''\n\t\t\t\t\t\t: track?.image?.src,\n\t\t\t} );\n\n\t\t\tconst trackList = media.map( trackAttributes );\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( {\n\t\t\t\tcurrentTrack:\n\t\t\t\t\ttrackList.length > 0 ? trackList[ 0 ].uniqueId : null,\n\t\t\t} );\n\n\t\t\tconst newBlocks = trackList.map( ( track ) =>\n\t\t\t\tcreateBlock( 'core/playlist-track', track )\n\t\t\t);\n\t\t\t// Replace the inner blocks with the new tracks.\n\t\t\treplaceInnerBlocks( clientId, newBlocks );\n\t\t},\n\t\t[\n\t\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\t\tsetAttributes,\n\t\t\treplaceInnerBlocks,\n\t\t\tclientId,\n\t\t]\n\t);\n\n\tconst onTrackEnd = useCallback( () => {\n\t\t/* If there are tracks left, play the next track */\n\t\tif ( trackListIndex < tracks.length - 1 ) {\n\t\t\tif ( tracks[ trackListIndex + 1 ]?.uniqueId ) {\n\t\t\t\tsetTrackListIndex( trackListIndex + 1 );\n\t\t\t\tsetAttributes( {\n\t\t\t\t\tcurrentTrack: tracks[ trackListIndex + 1 ].uniqueId,\n\t\t\t\t} );\n\t\t\t}\n\t\t} else {\n\t\t\tsetTrackListIndex( 0 );\n\t\t\tif ( tracks[ 0 ].uniqueId ) {\n\t\t\t\tsetAttributes( { currentTrack: tracks[ 0 ].uniqueId } );\n\t\t\t} else if ( tracks.length > 0 ) {\n\t\t\t\tconst validTrack = tracks.find(\n\t\t\t\t\t( track ) => track.uniqueId !== undefined\n\t\t\t\t);\n\t\t\t\tif ( validTrack ) {\n\t\t\t\t\tsetAttributes( { currentTrack: validTrack.uniqueId } );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}, [ setAttributes, trackListIndex, tracks ] );\n\n\tconst onChangeOrder = useCallback(\n\t\t( trackOrder ) => {\n\t\t\tconst sortedBlocks = [ ...innerBlockTracks ].sort( ( a, b ) => {\n\t\t\t\tconst titleA = a.attributes.title || '';\n\t\t\t\tconst titleB = b.attributes.title || '';\n\n\t\t\t\tif ( trackOrder === 'asc' ) {\n\t\t\t\t\treturn titleA.localeCompare( titleB );\n\t\t\t\t}\n\t\t\t\treturn titleB.localeCompare( titleA );\n\t\t\t} );\n\t\t\tconst sortedTracks = sortedBlocks.map(\n\t\t\t\t( block ) => block.attributes\n\t\t\t);\n\t\t\treplaceInnerBlocks( clientId, sortedBlocks );\n\t\t\tsetAttributes( {\n\t\t\t\torder: trackOrder,\n\t\t\t\tcurrentTrack:\n\t\t\t\t\tsortedTracks.length > 0 &&\n\t\t\t\t\tsortedTracks[ 0 ].uniqueId !== currentTrack\n\t\t\t\t\t\t? sortedTracks[ 0 ].uniqueId\n\t\t\t\t\t\t: currentTrack,\n\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tclientId,\n\t\t\tcurrentTrack,\n\t\t\tinnerBlockTracks,\n\t\t\treplaceInnerBlocks,\n\t\t\tsetAttributes,\n\t\t]\n\t);\n\n\tfunction toggleAttribute( attribute ) {\n\t\treturn ( newValue ) => {\n\t\t\tsetAttributes( { [ attribute ]: newValue } );\n\t\t};\n\t}\n\n\tconst hasSelectedChild = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).hasSelectedInnerBlock( clientId ),\n\t\t[ clientId ]\n\t);\n\n\tconst hasAnySelected = isSelected || hasSelectedChild;\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\t__experimentalAppenderTagName: 'li',\n\t\trenderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,\n\t} );\n\n\tif ( ! tracks || ( Array.isArray( tracks ) && tracks.length === 0 ) ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\t{ ...blockProps }\n\t\t\t\tclassName={ clsx( 'is-placeholder', blockProps.className ) }\n\t\t\t>\n\t\t\t\t<MediaPlaceholder\n\t\t\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\t\t\tlabels={ {\n\t\t\t\t\t\ttitle: __( 'Playlist' ),\n\t\t\t\t\t\tinstructions: __(\n\t\t\t\t\t\t\t'Upload an audio file or pick one from your media library.'\n\t\t\t\t\t\t),\n\t\t\t\t\t} }\n\t\t\t\t\tonSelect={ onSelectTracks }\n\t\t\t\t\taccept=\"audio/*\"\n\t\t\t\t\tmultiple\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls group=\"other\">\n\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\tname={ __( 'Edit' ) }\n\t\t\t\t\tonSelect={ onSelectTracks }\n\t\t\t\t\taccept=\"audio/*\"\n\t\t\t\t\tmultiple\n\t\t\t\t\tmediaIds={ tracks\n\t\t\t\t\t\t.filter( ( track ) => track.id )\n\t\t\t\t\t\t.map( ( track ) => track.id ) }\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tonError={ onUploadError }\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\tshowTracklist: true,\n\t\t\t\t\t\t\tshowArtists: true,\n\t\t\t\t\t\t\tshowNumbers: true,\n\t\t\t\t\t\t\tshowImages: true,\n\t\t\t\t\t\t\torder: 'asc',\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\tlabel={ __( 'Show Tracklist' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => showTracklist !== true }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { showTracklist: true } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Show Tracklist' ) }\n\t\t\t\t\t\t\tonChange={ toggleAttribute( 'showTracklist' ) }\n\t\t\t\t\t\t\tchecked={ showTracklist }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t{ showTracklist && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\t\tlabel={ __( 'Show artist name in Tracklist' ) }\n\t\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\t\thasValue={ () => showArtists !== true }\n\t\t\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\t\t\tsetAttributes( { showArtists: true } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t'Show artist name in Tracklist'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tonChange={ toggleAttribute(\n\t\t\t\t\t\t\t\t\t\t'showArtists'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tchecked={ showArtists }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\t\tlabel={ __( 'Show number in Tracklist' ) }\n\t\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\t\thasValue={ () => showNumbers !== true }\n\t\t\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\t\t\tsetAttributes( { showNumbers: true } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Show number in Tracklist' ) }\n\t\t\t\t\t\t\t\t\tonChange={ toggleAttribute(\n\t\t\t\t\t\t\t\t\t\t'showNumbers'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tchecked={ showNumbers }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Show images' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => showImages !== true }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { showImages: true } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Show images' ) }\n\t\t\t\t\t\t\tonChange={ toggleAttribute( 'showImages' ) }\n\t\t\t\t\t\t\tchecked={ showImages }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Order' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => order !== 'asc' }\n\t\t\t\t\t\tonDeselect={ () => setAttributes( { order: 'asc' } ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Order' ) }\n\t\t\t\t\t\t\tvalue={ order }\n\t\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t\t{ label: __( 'Descending' ), value: 'desc' },\n\t\t\t\t\t\t\t\t{ label: __( 'Ascending' ), value: 'asc' },\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\tonChange={ ( value ) => onChangeOrder( value ) }\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<figure { ...blockProps }>\n\t\t\t\t<Disabled isDisabled={ ! isSelected }>\n\t\t\t\t\t<CurrentTrack\n\t\t\t\t\t\ttrack={ tracks[ trackListIndex ] }\n\t\t\t\t\t\tshowImages={ showImages }\n\t\t\t\t\t\tonTrackEnd={ onTrackEnd }\n\t\t\t\t\t/>\n\t\t\t\t</Disabled>\n\t\t\t\t{ showTracklist && (\n\t\t\t\t\t<ol\n\t\t\t\t\t\tclassName={ clsx( 'wp-block-playlist__tracklist', {\n\t\t\t\t\t\t\t'wp-block-playlist__tracklist-show-numbers':\n\t\t\t\t\t\t\t\tshowNumbers,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ innerBlocksProps.children }\n\t\t\t\t\t</ol>\n\t\t\t\t) }\n\t\t\t\t<Caption\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tinsertBlocksAfter={ insertBlocksAfter }\n\t\t\t\t\tlabel={ __( 'Playlist caption text' ) }\n\t\t\t\t\tshowToolbarButton={ isSelected }\n\t\t\t\t\tstyle={ { marginTop: 16 } }\n\t\t\t\t/>\n\t\t\t</figure>\n\t\t</>\n\t);\n};\n\nexport default PlaylistEdit;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { v4 as uuid } from 'uuid';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect } from '@wordpress/element';\nimport {\n\tstore as blockEditorStore,\n\tMediaPlaceholder,\n\tMediaReplaceFlow,\n\tBlockIcon,\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tBlockControls,\n\tInspectorControls,\n\tInnerBlocks,\n} from '@wordpress/block-editor';\nimport {\n\tToggleControl,\n\tDisabled,\n\tSelectControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { __ } from '@wordpress/i18n';\nimport { audio as icon } from '@wordpress/icons';\nimport { createBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { Caption } from '../utils/caption';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\nimport { WaveformPlayer } from '../utils/waveform-player';\n\nconst ALLOWED_MEDIA_TYPES = [ 'audio' ];\n\n/**\n * Transform media library data into track block attributes.\n *\n * @param {Object} media - Media object from the media library.\n * @return {Object} Track attributes for the playlist-track block.\n */\nfunction getTrackAttributes( media ) {\n\treturn {\n\t\tid: media.id || media.url, // Attachment ID or URL.\n\t\tuniqueId: uuid(), // Unique ID for the track.\n\t\tsrc: media.url,\n\t\ttitle: media.title,\n\t\tartist:\n\t\t\tmedia.artist ||\n\t\t\tmedia?.meta?.artist ||\n\t\t\tmedia?.media_details?.artist ||\n\t\t\t__( 'Unknown artist' ),\n\t\talbum:\n\t\t\tmedia.album ||\n\t\t\tmedia?.meta?.album ||\n\t\t\tmedia?.media_details?.album ||\n\t\t\t__( 'Unknown album' ),\n\t\tlength: media?.fileLength || media?.media_details?.length_formatted,\n\t\t// Prevent using the default media attachment icon as the track image.\n\t\t// Note: Image is not available when a new track is uploaded.\n\t\timage:\n\t\t\tmedia?.image?.src &&\n\t\t\tmedia?.image?.src.endsWith( '/images/media/audio.svg' )\n\t\t\t\t? ''\n\t\t\t\t: media?.image?.src,\n\t};\n}\n\nconst PlaylistEdit = ( {\n\tattributes,\n\tsetAttributes,\n\tisSelected,\n\tinsertBlocksAfter,\n\tclientId,\n} ) => {\n\tconst {\n\t\torder,\n\t\tshowTracklist,\n\t\tshowNumbers,\n\t\tshowImages,\n\t\tshowArtists,\n\t\tcurrentTrack,\n\t} = attributes;\n\tconst blockProps = useBlockProps();\n\tconst { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tfunction onUploadError( message ) {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t}\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst { innerBlockTracks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock: _getBlock } = select( blockEditorStore );\n\t\t\treturn {\n\t\t\t\tinnerBlockTracks: _getBlock( clientId )?.innerBlocks ?? [],\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t// Ensure that each inner block has a unique ID,\n\t// even if a track is duplicated.\n\tuseEffect( () => {\n\t\tconst seen = new Set();\n\t\tlet hasDuplicates = false;\n\t\tconst updatedBlocks = innerBlockTracks.map( ( block ) => {\n\t\t\tif ( seen.has( block.attributes.uniqueId ) ) {\n\t\t\t\thasDuplicates = true;\n\t\t\t\treturn {\n\t\t\t\t\t...block,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\t...block.attributes,\n\t\t\t\t\t\tuniqueId: uuid(),\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}\n\t\t\tseen.add( block.attributes.uniqueId );\n\t\t\treturn block;\n\t\t} );\n\t\tif ( hasDuplicates ) {\n\t\t\treplaceInnerBlocks( clientId, updatedBlocks );\n\t\t}\n\t}, [ innerBlockTracks, clientId, replaceInnerBlocks ] );\n\n\t// Create a list of tracks from the inner blocks,\n\t// but skip blocks that do not have a uniqueId attribute, such as the media placeholder.\n\tconst validTracks = innerBlockTracks.filter(\n\t\t( block ) => !! block.attributes.uniqueId\n\t);\n\tconst tracks = validTracks.map( ( block ) => block.attributes );\n\tconst firstTrackId = validTracks[ 0 ]?.attributes?.uniqueId;\n\n\t// updateBlockAttributes is used to force updating the parent playlist block\n\t// when the currentTrack changes. Using setAttributes directly does not update\n\t// the currentTrack when multiple tracks are moved at the same time.\n\tuseEffect( () => {\n\t\tif ( tracks.length === 0 ) {\n\t\t\t// If there are no tracks but currentTrack is set, set it to null.\n\t\t\tif ( currentTrack !== null ) {\n\t\t\t\tupdateBlockAttributes( clientId, { currentTrack: null } );\n\t\t\t}\n\t\t} else if (\n\t\t\t// If the currentTrack is not the first track, update it to the first track.\n\t\t\tfirstTrackId &&\n\t\t\tfirstTrackId !== currentTrack\n\t\t) {\n\t\t\tupdateBlockAttributes( clientId, { currentTrack: firstTrackId } );\n\t\t}\n\t}, [\n\t\ttracks,\n\t\tcurrentTrack,\n\t\tfirstTrackId,\n\t\tclientId,\n\t\tupdateBlockAttributes,\n\t] );\n\n\tconst onSelectTracks = useCallback(\n\t\t( media ) => {\n\t\t\tif ( ! media ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( ! Array.isArray( media ) ) {\n\t\t\t\tmedia = [ media ];\n\t\t\t}\n\n\t\t\tconst trackList = media.map( getTrackAttributes );\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tsetAttributes( {\n\t\t\t\tcurrentTrack:\n\t\t\t\t\ttrackList.length > 0 ? trackList[ 0 ].uniqueId : null,\n\t\t\t} );\n\n\t\t\tconst newBlocks = trackList.map( ( track ) =>\n\t\t\t\tcreateBlock( 'core/playlist-track', track )\n\t\t\t);\n\t\t\t// Replace the inner blocks with the new tracks.\n\t\t\treplaceInnerBlocks( clientId, newBlocks );\n\t\t},\n\t\t[\n\t\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\t\tsetAttributes,\n\t\t\treplaceInnerBlocks,\n\t\t\tclientId,\n\t\t]\n\t);\n\n\t// Get current track data by finding the track with matching uniqueId.\n\tconst currentTrackData = tracks.find(\n\t\t( track ) => track.uniqueId === currentTrack\n\t);\n\n\t// Handle track end - advance to next track or loop to first.\n\tconst onTrackEnded = useCallback( () => {\n\t\tconst currentIndex = tracks.findIndex(\n\t\t\t( track ) => track.uniqueId === currentTrack\n\t\t);\n\t\tconst nextTrack = tracks[ currentIndex + 1 ] || tracks[ 0 ];\n\t\tif ( nextTrack?.uniqueId ) {\n\t\t\tsetAttributes( { currentTrack: nextTrack.uniqueId } );\n\t\t}\n\t}, [ currentTrack, tracks, setAttributes ] );\n\n\tconst onChangeOrder = useCallback(\n\t\t( trackOrder ) => {\n\t\t\tconst sortedBlocks = [ ...innerBlockTracks ].sort( ( a, b ) => {\n\t\t\t\tconst titleA = a.attributes.title || '';\n\t\t\t\tconst titleB = b.attributes.title || '';\n\n\t\t\t\tif ( trackOrder === 'asc' ) {\n\t\t\t\t\treturn titleA.localeCompare( titleB );\n\t\t\t\t}\n\t\t\t\treturn titleB.localeCompare( titleA );\n\t\t\t} );\n\t\t\tconst firstUniqueId = sortedBlocks[ 0 ]?.attributes?.uniqueId;\n\t\t\treplaceInnerBlocks( clientId, sortedBlocks );\n\t\t\tsetAttributes( {\n\t\t\t\torder: trackOrder,\n\t\t\t\tcurrentTrack:\n\t\t\t\t\tfirstUniqueId && firstUniqueId !== currentTrack\n\t\t\t\t\t\t? firstUniqueId\n\t\t\t\t\t\t: currentTrack,\n\t\t\t} );\n\t\t},\n\t\t[\n\t\t\tclientId,\n\t\t\tcurrentTrack,\n\t\t\tinnerBlockTracks,\n\t\t\treplaceInnerBlocks,\n\t\t\tsetAttributes,\n\t\t]\n\t);\n\n\tfunction toggleAttribute( attribute ) {\n\t\treturn ( newValue ) => {\n\t\t\tsetAttributes( { [ attribute ]: newValue } );\n\t\t};\n\t}\n\n\tconst hasSelectedChild = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).hasSelectedInnerBlock( clientId ),\n\t\t[ clientId ]\n\t);\n\n\tconst hasAnySelected = isSelected || hasSelectedChild;\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\t__experimentalAppenderTagName: 'li',\n\t\trenderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,\n\t} );\n\n\tif ( tracks.length === 0 ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\t{ ...blockProps }\n\t\t\t\tclassName={ clsx( 'is-placeholder', blockProps.className ) }\n\t\t\t>\n\t\t\t\t<MediaPlaceholder\n\t\t\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\t\t\tlabels={ {\n\t\t\t\t\t\ttitle: __( 'Playlist' ),\n\t\t\t\t\t\tinstructions: __(\n\t\t\t\t\t\t\t'Upload an audio file or pick one from your media library.'\n\t\t\t\t\t\t),\n\t\t\t\t\t} }\n\t\t\t\t\tonSelect={ onSelectTracks }\n\t\t\t\t\taccept=\"audio/*\"\n\t\t\t\t\tmultiple\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls group=\"other\">\n\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\tname={ __( 'Edit' ) }\n\t\t\t\t\tonSelect={ onSelectTracks }\n\t\t\t\t\taccept=\"audio/*\"\n\t\t\t\t\tmultiple\n\t\t\t\t\tmediaIds={ tracks\n\t\t\t\t\t\t.filter( ( track ) => track.id )\n\t\t\t\t\t\t.map( ( track ) => track.id ) }\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tonError={ onUploadError }\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\tshowTracklist: true,\n\t\t\t\t\t\t\tshowArtists: true,\n\t\t\t\t\t\t\tshowNumbers: true,\n\t\t\t\t\t\t\tshowImages: true,\n\t\t\t\t\t\t\torder: 'asc',\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\tlabel={ __( 'Show Tracklist' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => showTracklist !== true }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { showTracklist: true } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Show Tracklist' ) }\n\t\t\t\t\t\t\tonChange={ toggleAttribute( 'showTracklist' ) }\n\t\t\t\t\t\t\tchecked={ showTracklist }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t{ showTracklist && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\t\tlabel={ __( 'Show artist name in Tracklist' ) }\n\t\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\t\thasValue={ () => showArtists !== true }\n\t\t\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\t\t\tsetAttributes( { showArtists: true } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t'Show artist name in Tracklist'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tonChange={ toggleAttribute(\n\t\t\t\t\t\t\t\t\t\t'showArtists'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tchecked={ showArtists }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\t\t\tlabel={ __( 'Show number in Tracklist' ) }\n\t\t\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\t\t\thasValue={ () => showNumbers !== true }\n\t\t\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\t\t\tsetAttributes( { showNumbers: true } )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Show number in Tracklist' ) }\n\t\t\t\t\t\t\t\t\tonChange={ toggleAttribute(\n\t\t\t\t\t\t\t\t\t\t'showNumbers'\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\tchecked={ showNumbers }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Show images' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => showImages !== true }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { showImages: true } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\tlabel={ __( 'Show images' ) }\n\t\t\t\t\t\t\tonChange={ toggleAttribute( 'showImages' ) }\n\t\t\t\t\t\t\tchecked={ showImages }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Order' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => order !== 'asc' }\n\t\t\t\t\t\tonDeselect={ () => setAttributes( { order: 'asc' } ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tlabel={ __( 'Order' ) }\n\t\t\t\t\t\t\tvalue={ order }\n\t\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t\t{ label: __( 'Descending' ), value: 'desc' },\n\t\t\t\t\t\t\t\t{ label: __( 'Ascending' ), value: 'asc' },\n\t\t\t\t\t\t\t] }\n\t\t\t\t\t\t\tonChange={ ( value ) => onChangeOrder( value ) }\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<figure { ...blockProps }>\n\t\t\t\t<Disabled isDisabled={ ! isSelected }>\n\t\t\t\t\t<WaveformPlayer\n\t\t\t\t\t\tsrc={ currentTrackData?.src }\n\t\t\t\t\t\ttitle={ currentTrackData?.title }\n\t\t\t\t\t\tartist={ currentTrackData?.artist }\n\t\t\t\t\t\timage={ currentTrackData?.image }\n\t\t\t\t\t\tonEnded={ onTrackEnded }\n\t\t\t\t\t/>\n\t\t\t\t</Disabled>\n\t\t\t\t{ showTracklist && (\n\t\t\t\t\t<ol\n\t\t\t\t\t\tclassName={ clsx( 'wp-block-playlist__tracklist', {\n\t\t\t\t\t\t\t'wp-block-playlist__tracklist-show-numbers':\n\t\t\t\t\t\t\t\tshowNumbers,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ innerBlocksProps.children }\n\t\t\t\t\t</ol>\n\t\t\t\t) }\n\t\t\t\t<Caption\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\tinsertBlocksAfter={ insertBlocksAfter }\n\t\t\t\t\tlabel={ __( 'Playlist caption text' ) }\n\t\t\t\t\tshowToolbarButton={ isSelected }\n\t\t\t\t\tstyle={ { marginTop: 16 } }\n\t\t\t\t/>\n\t\t\t</figure>\n\t\t</>\n\t);\n};\n\nexport default PlaylistEdit;\nexport { getTrackAttributes };\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/playlist/view.mjs

@@ -1,21 +1,12 @@
 // packages/block-library/src/playlist/view.js
 import { store, getContext, getElement } from "@wordpress/interactivity";
-store(
+import { initWaveformPlayer, logPlayError } from "../utils/waveform-utils.mjs";
+var playerState = /* @__PURE__ */ new WeakMap();
+var { state } = store(
   "core/playlist",
   {
     state: {
       playlists: {},
-      get currentTrack() {
-        const { currentId, playlistId } = getContext();
-        if (!currentId || !playlistId) {
-          return {};
-        }
-        const playlist = this.playlists[playlistId];
-        if (!playlist) {
-          return {};
-        }
-        return playlist.tracks[currentId] || {};
-      },
       get isCurrentTrack() {
         const { currentId, uniqueId } = getContext();
         return currentId === uniqueId;
@@ -25,41 +16,68 @@ store(
       changeTrack() {
         const context = getContext();
         context.currentId = context.uniqueId;
-        context.isPlaying = true;
-      },
-      isPlaying() {
-        const context = getContext();
-        context.isPlaying = true;
-      },
-      isPaused() {
-        const context = getContext();
-        context.isPlaying = false;
-      },
-      nextSong() {
-        const context = getContext();
-        const currentIndex = context.tracks.findIndex(
-          (uniqueId) => uniqueId === context.currentId
-        );
-        const nextTrack = context.tracks[currentIndex + 1];
-        if (nextTrack) {
-          context.currentId = nextTrack;
-          const { ref } = getElement();
-          setTimeout(() => {
-            ref.play();
-          }, 1e3);
-        }
       }
     },
     callbacks: {
-      autoPlay() {
+      initWaveformPlayer() {
         const context = getContext();
         const { ref } = getElement();
-        if (context.currentId && context.isPlaying) {
-          ref.play();
+        if (!context.currentId || !ref) {
+          return;
         }
+        const track = state.playlists[context.playlistId]?.tracks[context.currentId];
+        if (!track?.url) {
+          return;
+        }
+        const existing = playerState.get(ref);
+        if (existing?.url === track.url) {
+          return;
+        }
+        const shouldAutoPlay = !!existing?.url;
+        initPlayer(ref, track, shouldAutoPlay, context);
       }
     }
   },
   { lock: true }
 );
+function initPlayer(ref, track, shouldAutoPlay, context) {
+  const existing = playerState.get(ref);
+  if (existing?.instance) {
+    existing.instance.loadTrack(track.url, track.title, track.artist, {
+      artwork: track.image
+    }).then(() => {
+      existing.url = track.url;
+      if (shouldAutoPlay) {
+        existing.instance.play()?.catch(logPlayError);
+      }
+    }).catch(logPlayError);
+    return;
+  }
+  const labels = {
+    play: ref.dataset.labelPlay,
+    pause: ref.dataset.labelPause
+  };
+  const player = initWaveformPlayer(ref, {
+    src: track.url,
+    title: track.title,
+    artist: track.artist,
+    image: track.image,
+    autoPlay: shouldAutoPlay,
+    labels,
+    onEnded: () => {
+      const currentIndex = context.tracks.findIndex(
+        (uniqueId) => uniqueId === context.currentId
+      );
+      const nextTrack = context.tracks[currentIndex + 1];
+      if (nextTrack) {
+        context.currentId = nextTrack;
+      }
+    }
+  });
+  playerState.set(ref, {
+    url: track.url,
+    instance: player.instance,
+    destroy: player.destroy
+  });
+}
 //# sourceMappingURL=view.mjs.map