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

package/src/utils/waveform-utils.js

@@ -0,0 +1,232 @@
+/**
+ * Shared utilities for waveform audio player functionality.
+ * Used by both the WaveformPlayer component (editor) and view.js (frontend).
+ */
+
+/**
+ * External dependencies
+ */
+import { colord } from 'colord';
+import WaveformPlayerLib from '@arraypress/waveform-player';
+
+/**
+ * Configuration constants.
+ * Note: DEFAULT_WAVEFORM_HEIGHT should match $waveform-player-height in style.scss.
+ */
+const DEFAULT_WAVEFORM_HEIGHT = 100;
+
+/**
+ * Get computed style for an element, using ownerDocument for iframe compatibility.
+ *
+ * @param {Element} element - The element to get styles from.
+ * @return {CSSStyleDeclaration} The computed style.
+ */
+function getComputedStyle( element ) {
+	return element.ownerDocument.defaultView.getComputedStyle( element );
+}
+
+/**
+ * Get all colors needed for the waveform player based on the element's styles.
+ *
+ * @param {Element} element - The element to derive colors from.
+ * @return {Object} Object containing textColor, waveformColor, progressColor.
+ */
+export function getWaveformColors( element ) {
+	const textColor = getComputedStyle( element ).color;
+	const waveformColor = colord( textColor ).alpha( 0.3 ).toRgbString();
+	const progressColor = colord( textColor ).alpha( 0.6 ).toRgbString();
+
+	return { textColor, waveformColor, progressColor };
+}
+
+/**
+ * Create a waveform container element with the specified attributes.
+ *
+ * @param {Object} options               - The options for the container.
+ * @param {string} options.url           - The audio URL.
+ * @param {string} options.title         - The track title.
+ * @param {string} options.artist        - The track artist.
+ * @param {string} options.artwork       - The album artwork URL.
+ * @param {string} options.waveformColor - The waveform bar color.
+ * @param {string} options.progressColor - The progress indicator color.
+ * @param {string} options.buttonColor   - The play button color.
+ * @param {number} options.height        - The waveform height in pixels.
+ * @return {Element} The configured container element.
+ */
+export function createWaveformContainer( {
+	url,
+	title,
+	artist,
+	artwork,
+	waveformColor,
+	progressColor,
+	buttonColor,
+	height = DEFAULT_WAVEFORM_HEIGHT,
+} ) {
+	const container = document.createElement( 'div' );
+	container.setAttribute( 'data-waveform-player', '' );
+	container.setAttribute( 'data-url', url );
+	container.setAttribute( 'data-height', String( height ) );
+	container.setAttribute( 'data-waveform-style', 'bars' );
+	container.setAttribute( 'data-waveform-color', waveformColor );
+	container.setAttribute( 'data-progress-color', progressColor );
+	container.setAttribute( 'data-button-color', buttonColor );
+	container.setAttribute( 'data-text-color', buttonColor );
+	container.setAttribute( 'data-text-secondary-color', buttonColor );
+	if ( title ) {
+		container.setAttribute( 'data-title', title );
+	}
+	if ( artist ) {
+		container.setAttribute( 'data-subtitle', artist );
+	}
+	if ( artwork ) {
+		container.setAttribute( 'data-artwork', artwork );
+	}
+	return container;
+}
+
+/**
+ * Apply contrasting color to SVG icon paths for visibility.
+ * The icons should contrast with the button background (which uses textColor).
+ *
+ * @param {Element} container   - The waveform container element.
+ * @param {string}  buttonColor - The button background color (textColor).
+ */
+export function styleSvgIcons( container, buttonColor ) {
+	// Compute a contrasting color for the icons based on button brightness.
+	const isButtonDark = colord( buttonColor ).isDark();
+	const iconColor = isButtonDark ? '#ffffff' : '#000000';
+
+	const svgPaths = container.querySelectorAll( 'svg path' );
+	svgPaths.forEach( ( path ) => {
+		path.style.fill = iconColor;
+	} );
+}
+
+/**
+ * Set up play button accessibility: aria-label that toggles on play/pause.
+ *
+ * @param {Element} container    - The waveform container element.
+ * @param {Object}  labels       - Button labels.
+ * @param {string}  labels.play  - Label for the play state.
+ * @param {string}  labels.pause - Label for the pause state.
+ */
+export function setupPlayButtonAccessibility(
+	container,
+	{ play: playLabel = 'Play', pause: pauseLabel = 'Pause' } = {}
+) {
+	const playBtn = container.querySelector( '.waveform-btn' );
+	if ( ! playBtn ) {
+		return;
+	}
+
+	playBtn.setAttribute( 'aria-label', playLabel );
+
+	const onPlay = () => playBtn.setAttribute( 'aria-label', pauseLabel );
+	const onPause = () => playBtn.setAttribute( 'aria-label', playLabel );
+
+	container.addEventListener( 'waveformplayer:play', onPlay );
+	container.addEventListener( 'waveformplayer:pause', onPause );
+	container.addEventListener( 'waveformplayer:ended', onPause );
+
+	return () => {
+		container.removeEventListener( 'waveformplayer:play', onPlay );
+		container.removeEventListener( 'waveformplayer:pause', onPause );
+		container.removeEventListener( 'waveformplayer:ended', onPause );
+	};
+}
+
+/**
+ * Log play errors, filtering out expected AbortError.
+ *
+ * @param {Error} error - The error from play().
+ */
+export function logPlayError( error ) {
+	// The browser throws AbortError when a play() promise is interrupted
+	// by a subsequent pause() or a new audio source load (track change).
+	// This is normal during rapid user interaction and safe to ignore.
+	if ( error.name === 'AbortError' ) {
+		return;
+	}
+	// eslint-disable-next-line no-console
+	console.error( 'Playlist play error:', error );
+}
+
+/**
+ * Initialize a WaveformPlayer instance on an element.
+ *
+ * This is the shared core logic used by both the React component (editor)
+ * and the Interactivity API (frontend).
+ *
+ * @param {Element}  element          - The container element (must be in DOM).
+ * @param {Object}   options          - Configuration options.
+ * @param {string}   options.src      - The audio file URL.
+ * @param {string}   options.title    - The track title.
+ * @param {string}   options.artist   - The artist name.
+ * @param {string}   options.image    - The artwork image URL.
+ * @param {boolean}  options.autoPlay - Whether to auto-play when ready.
+ * @param {Function} options.onEnded  - Callback when track ends.
+ * @param {Object}   options.labels   - Translated button labels.
+ * @return {Object} Object with instance, container, and destroy function.
+ */
+export function initWaveformPlayer(
+	element,
+	{ src, title, artist, image, autoPlay, onEnded, labels }
+) {
+	// Get colors from computed styles.
+	const { textColor, waveformColor, progressColor } =
+		getWaveformColors( element );
+
+	// Create the waveform container.
+	const container = createWaveformContainer( {
+		url: src,
+		title,
+		artist,
+		artwork: image,
+		waveformColor,
+		progressColor,
+		buttonColor: textColor,
+	} );
+	element.appendChild( container );
+
+	// Initialize the WaveformPlayer library.
+	const instance = new WaveformPlayerLib( container );
+
+	// Set up event handlers.
+	let cleanupAccessibility;
+	const handlers = {
+		ready: () => {
+			styleSvgIcons( container, textColor );
+			cleanupAccessibility = setupPlayButtonAccessibility(
+				container,
+				labels
+			);
+			if ( autoPlay ) {
+				instance.play()?.catch( logPlayError );
+			}
+		},
+		ended: () => onEnded?.(),
+	};
+
+	container.addEventListener( 'waveformplayer:ready', handlers.ready );
+	container.addEventListener( 'waveformplayer:ended', handlers.ended );
+
+	// Return instance, container, and cleanup function.
+	return {
+		instance,
+		container,
+		destroy: () => {
+			cleanupAccessibility?.();
+			container.removeEventListener(
+				'waveformplayer:ready',
+				handlers.ready
+			);
+			container.removeEventListener(
+				'waveformplayer:ended',
+				handlers.ended
+			);
+			instance.destroy();
+			container.remove();
+		},
+	};
+}

package/build/navigation/use-navigation-entities.cjs

@@ -1,67 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/block-library/src/navigation/use-navigation-entities.js
-var use_navigation_entities_exports = {};
-__export(use_navigation_entities_exports, {
-  default: () => useNavigationEntities
-});
-module.exports = __toCommonJS(use_navigation_entities_exports);
-var import_core_data = require("@wordpress/core-data");
-function useNavigationEntities(menuId) {
-  const {
-    records: menus,
-    isResolving: isResolvingMenus,
-    hasResolved: hasResolvedMenus
-  } = (0, import_core_data.useEntityRecords)("root", "menu", { per_page: -1, context: "view" });
-  const {
-    records: pages,
-    isResolving: isResolvingPages,
-    hasResolved: hasResolvedPages
-  } = (0, import_core_data.useEntityRecords)("postType", "page", {
-    parent: 0,
-    order: "asc",
-    orderby: "id",
-    per_page: -1,
-    context: "view"
-  });
-  const { records: menuItems, hasResolved: hasResolvedMenuItems } = (0, import_core_data.useEntityRecords)(
-    "root",
-    "menuItem",
-    {
-      menus: menuId,
-      per_page: -1,
-      context: "view"
-    },
-    { enabled: !!menuId }
-  );
-  return {
-    pages,
-    isResolvingPages,
-    hasResolvedPages,
-    hasPages: !!(hasResolvedPages && pages?.length),
-    menus,
-    isResolvingMenus,
-    hasResolvedMenus,
-    hasMenus: !!(hasResolvedMenus && menus?.length),
-    menuItems,
-    hasResolvedMenuItems
-  };
-}
-//# sourceMappingURL=use-navigation-entities.cjs.map

package/build/navigation/use-navigation-entities.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/navigation/use-navigation-entities.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEntityRecords } from '@wordpress/core-data';\n\n/**\n * @typedef {Object} NavigationEntitiesData\n * @property {Array|undefined} pages                - a collection of WP Post entity objects of post type \"Page\".\n * @property {boolean}         isResolvingPages     - indicates whether the request to fetch pages is currently resolving.\n * @property {boolean}         hasResolvedPages     - indicates whether the request to fetch pages has finished resolving.\n * @property {Array|undefined} menus                - a collection of Menu entity objects.\n * @property {boolean}         isResolvingMenus     - indicates whether the request to fetch menus is currently resolving.\n * @property {boolean}         hasResolvedMenus     - indicates whether the request to fetch menus has finished resolving.\n * @property {Array|undefined} menusItems           - a collection of Menu Item entity objects for the current menuId.\n * @property {boolean}         hasResolvedMenuItems - indicates whether the request to fetch menuItems has finished resolving.\n * @property {boolean}         hasPages             - indicates whether there is currently any data for pages.\n * @property {boolean}         hasMenus             - indicates whether there is currently any data for menus.\n */\n\n/**\n * Manages fetching and resolution state for all entities required\n * for the Navigation block.\n *\n * @param {number} menuId the menu for which to retrieve menuItem data.\n * @return { NavigationEntitiesData } the entity data.\n */\nexport default function useNavigationEntities( menuId ) {\n\tconst {\n\t\trecords: menus,\n\t\tisResolving: isResolvingMenus,\n\t\thasResolved: hasResolvedMenus,\n\t} = useEntityRecords( 'root', 'menu', { per_page: -1, context: 'view' } );\n\n\tconst {\n\t\trecords: pages,\n\t\tisResolving: isResolvingPages,\n\t\thasResolved: hasResolvedPages,\n\t} = useEntityRecords( 'postType', 'page', {\n\t\tparent: 0,\n\t\torder: 'asc',\n\t\torderby: 'id',\n\t\tper_page: -1,\n\t\tcontext: 'view',\n\t} );\n\n\tconst { records: menuItems, hasResolved: hasResolvedMenuItems } =\n\t\tuseEntityRecords(\n\t\t\t'root',\n\t\t\t'menuItem',\n\t\t\t{\n\t\t\t\tmenus: menuId,\n\t\t\t\tper_page: -1,\n\t\t\t\tcontext: 'view',\n\t\t\t},\n\t\t\t{ enabled: !! menuId }\n\t\t);\n\n\treturn {\n\t\tpages,\n\t\tisResolvingPages,\n\t\thasResolvedPages,\n\t\thasPages: !! ( hasResolvedPages && pages?.length ),\n\n\t\tmenus,\n\t\tisResolvingMenus,\n\t\thasResolvedMenus,\n\t\thasMenus: !! ( hasResolvedMenus && menus?.length ),\n\n\t\tmenuItems,\n\t\thasResolvedMenuItems,\n\t};\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAiC;AAuBlB,SAAR,sBAAwC,QAAS;AACvD,QAAM;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,EACd,QAAI,mCAAkB,QAAQ,QAAQ,EAAE,UAAU,IAAI,SAAS,OAAO,CAAE;AAExE,QAAM;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,EACd,QAAI,mCAAkB,YAAY,QAAQ;AAAA,IACzC,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,EACV,CAAE;AAEF,QAAM,EAAE,SAAS,WAAW,aAAa,qBAAqB,QAC7D;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,IACV;AAAA,IACA,EAAE,SAAS,CAAC,CAAE,OAAO;AAAA,EACtB;AAED,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC,EAAI,oBAAoB,OAAO;AAAA,IAE1C;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC,EAAI,oBAAoB,OAAO;AAAA,IAE1C;AAAA,IACA;AAAA,EACD;AACD;",
-  "names": []
-}

package/build-module/navigation/use-navigation-entities.mjs

@@ -1,46 +0,0 @@
-// packages/block-library/src/navigation/use-navigation-entities.js
-import { useEntityRecords } from "@wordpress/core-data";
-function useNavigationEntities(menuId) {
-  const {
-    records: menus,
-    isResolving: isResolvingMenus,
-    hasResolved: hasResolvedMenus
-  } = useEntityRecords("root", "menu", { per_page: -1, context: "view" });
-  const {
-    records: pages,
-    isResolving: isResolvingPages,
-    hasResolved: hasResolvedPages
-  } = useEntityRecords("postType", "page", {
-    parent: 0,
-    order: "asc",
-    orderby: "id",
-    per_page: -1,
-    context: "view"
-  });
-  const { records: menuItems, hasResolved: hasResolvedMenuItems } = useEntityRecords(
-    "root",
-    "menuItem",
-    {
-      menus: menuId,
-      per_page: -1,
-      context: "view"
-    },
-    { enabled: !!menuId }
-  );
-  return {
-    pages,
-    isResolvingPages,
-    hasResolvedPages,
-    hasPages: !!(hasResolvedPages && pages?.length),
-    menus,
-    isResolvingMenus,
-    hasResolvedMenus,
-    hasMenus: !!(hasResolvedMenus && menus?.length),
-    menuItems,
-    hasResolvedMenuItems
-  };
-}
-export {
-  useNavigationEntities as default
-};
-//# sourceMappingURL=use-navigation-entities.mjs.map

package/build-module/navigation/use-navigation-entities.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/navigation/use-navigation-entities.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEntityRecords } from '@wordpress/core-data';\n\n/**\n * @typedef {Object} NavigationEntitiesData\n * @property {Array|undefined} pages                - a collection of WP Post entity objects of post type \"Page\".\n * @property {boolean}         isResolvingPages     - indicates whether the request to fetch pages is currently resolving.\n * @property {boolean}         hasResolvedPages     - indicates whether the request to fetch pages has finished resolving.\n * @property {Array|undefined} menus                - a collection of Menu entity objects.\n * @property {boolean}         isResolvingMenus     - indicates whether the request to fetch menus is currently resolving.\n * @property {boolean}         hasResolvedMenus     - indicates whether the request to fetch menus has finished resolving.\n * @property {Array|undefined} menusItems           - a collection of Menu Item entity objects for the current menuId.\n * @property {boolean}         hasResolvedMenuItems - indicates whether the request to fetch menuItems has finished resolving.\n * @property {boolean}         hasPages             - indicates whether there is currently any data for pages.\n * @property {boolean}         hasMenus             - indicates whether there is currently any data for menus.\n */\n\n/**\n * Manages fetching and resolution state for all entities required\n * for the Navigation block.\n *\n * @param {number} menuId the menu for which to retrieve menuItem data.\n * @return { NavigationEntitiesData } the entity data.\n */\nexport default function useNavigationEntities( menuId ) {\n\tconst {\n\t\trecords: menus,\n\t\tisResolving: isResolvingMenus,\n\t\thasResolved: hasResolvedMenus,\n\t} = useEntityRecords( 'root', 'menu', { per_page: -1, context: 'view' } );\n\n\tconst {\n\t\trecords: pages,\n\t\tisResolving: isResolvingPages,\n\t\thasResolved: hasResolvedPages,\n\t} = useEntityRecords( 'postType', 'page', {\n\t\tparent: 0,\n\t\torder: 'asc',\n\t\torderby: 'id',\n\t\tper_page: -1,\n\t\tcontext: 'view',\n\t} );\n\n\tconst { records: menuItems, hasResolved: hasResolvedMenuItems } =\n\t\tuseEntityRecords(\n\t\t\t'root',\n\t\t\t'menuItem',\n\t\t\t{\n\t\t\t\tmenus: menuId,\n\t\t\t\tper_page: -1,\n\t\t\t\tcontext: 'view',\n\t\t\t},\n\t\t\t{ enabled: !! menuId }\n\t\t);\n\n\treturn {\n\t\tpages,\n\t\tisResolvingPages,\n\t\thasResolvedPages,\n\t\thasPages: !! ( hasResolvedPages && pages?.length ),\n\n\t\tmenus,\n\t\tisResolvingMenus,\n\t\thasResolvedMenus,\n\t\thasMenus: !! ( hasResolvedMenus && menus?.length ),\n\n\t\tmenuItems,\n\t\thasResolvedMenuItems,\n\t};\n}\n"],
-  "mappings": ";AAGA,SAAS,wBAAwB;AAuBlB,SAAR,sBAAwC,QAAS;AACvD,QAAM;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,EACd,IAAI,iBAAkB,QAAQ,QAAQ,EAAE,UAAU,IAAI,SAAS,OAAO,CAAE;AAExE,QAAM;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,IACb,aAAa;AAAA,EACd,IAAI,iBAAkB,YAAY,QAAQ;AAAA,IACzC,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,EACV,CAAE;AAEF,QAAM,EAAE,SAAS,WAAW,aAAa,qBAAqB,IAC7D;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,SAAS;AAAA,IACV;AAAA,IACA,EAAE,SAAS,CAAC,CAAE,OAAO;AAAA,EACtB;AAED,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC,EAAI,oBAAoB,OAAO;AAAA,IAE1C;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,CAAC,EAAI,oBAAoB,OAAO;AAAA,IAE1C;AAAA,IACA;AAAA,EACD;AACD;",
-  "names": []
-}

package/src/navigation/use-navigation-entities.js

@@ -1,72 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useEntityRecords } from '@wordpress/core-data';
-
-/**
- * @typedef {Object} NavigationEntitiesData
- * @property {Array|undefined} pages                - a collection of WP Post entity objects of post type "Page".
- * @property {boolean}         isResolvingPages     - indicates whether the request to fetch pages is currently resolving.
- * @property {boolean}         hasResolvedPages     - indicates whether the request to fetch pages has finished resolving.
- * @property {Array|undefined} menus                - a collection of Menu entity objects.
- * @property {boolean}         isResolvingMenus     - indicates whether the request to fetch menus is currently resolving.
- * @property {boolean}         hasResolvedMenus     - indicates whether the request to fetch menus has finished resolving.
- * @property {Array|undefined} menusItems           - a collection of Menu Item entity objects for the current menuId.
- * @property {boolean}         hasResolvedMenuItems - indicates whether the request to fetch menuItems has finished resolving.
- * @property {boolean}         hasPages             - indicates whether there is currently any data for pages.
- * @property {boolean}         hasMenus             - indicates whether there is currently any data for menus.
- */
-
-/**
- * Manages fetching and resolution state for all entities required
- * for the Navigation block.
- *
- * @param {number} menuId the menu for which to retrieve menuItem data.
- * @return { NavigationEntitiesData } the entity data.
- */
-export default function useNavigationEntities( menuId ) {
-	const {
-		records: menus,
-		isResolving: isResolvingMenus,
-		hasResolved: hasResolvedMenus,
-	} = useEntityRecords( 'root', 'menu', { per_page: -1, context: 'view' } );
-
-	const {
-		records: pages,
-		isResolving: isResolvingPages,
-		hasResolved: hasResolvedPages,
-	} = useEntityRecords( 'postType', 'page', {
-		parent: 0,
-		order: 'asc',
-		orderby: 'id',
-		per_page: -1,
-		context: 'view',
-	} );
-
-	const { records: menuItems, hasResolved: hasResolvedMenuItems } =
-		useEntityRecords(
-			'root',
-			'menuItem',
-			{
-				menus: menuId,
-				per_page: -1,
-				context: 'view',
-			},
-			{ enabled: !! menuId }
-		);
-
-	return {
-		pages,
-		isResolvingPages,
-		hasResolvedPages,
-		hasPages: !! ( hasResolvedPages && pages?.length ),
-
-		menus,
-		isResolvingMenus,
-		hasResolvedMenus,
-		hasMenus: !! ( hasResolvedMenus && menus?.length ),
-
-		menuItems,
-		hasResolvedMenuItems,
-	};
-}