@wordpress/block-library 11.1.0 → 11.2.0

package/build-module/tab-list/edit.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-list/edit.jsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tInspectorControls,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\t__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,\n} from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useSelect, useDispatch, useRegistry } from '@wordpress/data';\nimport { useEffect, useMemo, useRef } from '@wordpress/element';\nimport TabToolbarControls from '../tabs/tab-toolbar-controls';\nimport TabMovers from './tab-movers';\nimport useTabActions from '../tabs/use-tab-actions';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nconst EMPTY_ARRAY = [];\n\nfunction Edit( {\n\tattributes,\n\tclientId,\n\tsetAttributes,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\tconst { ariaLabel } = attributes;\n\n\tconst colorProps = useColorProps( attributes );\n\tconst borderProps = useBorderProps( attributes );\n\tconst spacingProps = getSpacingClassesAndStyles( attributes );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst { tabsClientId, tabPanels, editorActiveTabIndex, activeTabIndex } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { getBlockRootClientId, getBlockAttributes, getBlocks } =\n\t\t\t\t\tselect( blockEditorStore );\n\n\t\t\t\tconst rootClientId = getBlockRootClientId( clientId );\n\t\t\t\tconst tabsAttributes = getBlockAttributes( rootClientId );\n\t\t\t\tconst tabPanelsBlock = getBlocks( rootClientId )?.find(\n\t\t\t\t\t( block ) => block.name === 'core/tab-panels'\n\t\t\t\t);\n\n\t\t\t\treturn {\n\t\t\t\t\ttabsClientId: rootClientId,\n\t\t\t\t\ttabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t\t\teditorActiveTabIndex: tabsAttributes?.editorActiveTabIndex,\n\t\t\t\t\tactiveTabIndex: tabsAttributes?.activeTabIndex ?? 0,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ clientId ]\n\t\t);\n\tconst registry = useRegistry();\n\tconst { isBlockSelected, hasSelectedInnerBlock } =\n\t\tuseSelect( blockEditorStore );\n\tconst {\n\t\tupdateBlockAttributes,\n\t\tselectBlock,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\tconst { insertTab, removeTab } = useTabActions( tabsClientId );\n\n\tconst effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;\n\tconst tabsList = useMemo(\n\t\t() =>\n\t\t\ttabPanels.map( ( tab ) => ( {\n\t\t\t\tlabel: tab.attributes.label || '',\n\t\t\t\tclientId: tab.clientId,\n\t\t\t} ) ),\n\t\t[ tabPanels ]\n\t);\n\n\tfunction selectTabPanel( tabIndex ) {\n\t\tif ( tabsClientId && tabIndex !== effectiveActiveIndex ) {\n\t\t\t// Batch the selection and index update so the sync effect in\n\t\t\t// the tab-panel block can't revert the switch from a stale\n\t\t\t// inner-block selection in the previously active panel.\n\t\t\tregistry.batch( () => {\n\t\t\t\tselectBlock( clientId );\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\teditorActiveTabIndex: tabIndex,\n\t\t\t\t} );\n\t\t\t} );\n\t\t}\n\t}\n\n\tfunction handleLabelChange( tabIndex, newLabel ) {\n\t\tconst tab = tabsList[ tabIndex ];\n\t\tif ( tab?.clientId ) {\n\t\t\tupdateBlockAttributes( tab.clientId, { label: newLabel } );\n\t\t}\n\t}\n\n\tconst menuRef = useRef();\n\tconst prevTabCountRef = useRef( tabsList.length );\n\n\t// When tabs are added or removed, focus the appropriate button.\n\tuseEffect( () => {\n\t\tconst prevCount = prevTabCountRef.current;\n\t\tprevTabCountRef.current = tabsList.length;\n\n\t\tif ( ! menuRef.current || tabsList.length === prevCount ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only move focus during active editing, not external data changes.\n\t\tif (\n\t\t\t! isBlockSelected( tabsClientId ) &&\n\t\t\t! hasSelectedInnerBlock( tabsClientId, true )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst focusButtonAt = ( index ) => {\n\t\t\twindow.requestAnimationFrame( () => {\n\t\t\t\tconst button =\n\t\t\t\t\tmenuRef.current?.querySelectorAll( 'button' )?.[ index ];\n\t\t\t\t(\n\t\t\t\t\tbutton?.querySelector( '[contenteditable]' ) ?? button\n\t\t\t\t)?.focus();\n\t\t\t} );\n\t\t};\n\n\t\tfocusButtonAt( effectiveActiveIndex );\n\t}, [\n\t\teffectiveActiveIndex,\n\t\thasSelectedInnerBlock,\n\t\tisBlockSelected,\n\t\ttabsClientId,\n\t\ttabsList.length,\n\t] );\n\n\tconst blockProps = useBlockProps( {\n\t\trole: 'tablist',\n\t\tref: menuRef,\n\t\t// Applied manually since this block has no inner blocks for the layout\n\t\t// support to add its container classes to.\n\t\tclassName: layoutClassNames,\n\t} );\n\n\tconst buttonClassName = clsx( colorProps.className, borderProps.className );\n\n\tconst buttonStyle = {\n\t\t...colorProps.style,\n\t\t...borderProps.style,\n\t\t...spacingProps.style,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls group=\"settings\">\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\tariaLabel: undefined,\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={ __( 'Label' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => !! ariaLabel }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { ariaLabel: undefined } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\tlabel={ __( 'Label' ) }\n\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t'Briefly describe this tab section for screen reader users. Examples: Event information, Product details, and Account settings.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tvalue={ ariaLabel || '' }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tariaLabel: value || undefined,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\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<TabMovers tabsClientId={ tabsClientId } />\n\t\t\t<TabToolbarControls tabsClientId={ tabsClientId } />\n\t\t\t<div { ...blockProps }>\n\t\t\t\t{ tabsList.map( ( tab, index ) => {\n\t\t\t\t\tconst isActive = index === effectiveActiveIndex;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={ tab.clientId || index }\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-selected={ isActive }\n\t\t\t\t\t\t\tclassName={ buttonClassName || undefined }\n\t\t\t\t\t\t\tstyle={ buttonStyle }\n\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t// Activate the matching panel whenever this tab\n\t\t\t\t\t\t\t// receives focus — whether from a click or the caret\n\t\t\t\t\t\t\t// moving into the label via the keyboard.\n\t\t\t\t\t\t\tonFocus={ () => {\n\t\t\t\t\t\t\t\tselectTabPanel( index );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RichText\n\t\t\t\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\t\t\tplaceholder={ __( 'Tab title' ) }\n\t\t\t\t\t\t\t\tvalue={ tab.label }\n\t\t\t\t\t\t\t\tonChange={ ( newLabel ) =>\n\t\t\t\t\t\t\t\t\thandleLabelChange( index, newLabel )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__unstableOnSplitAtEnd={ () =>\n\t\t\t\t\t\t\t\t\tinsertTab( index + 1 )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonRemove={ () => removeTab( index ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default Edit;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tInspectorControls,\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\tRichText,\n\t__experimentalUseBorderProps as useBorderProps,\n\t__experimentalUseColorProps as useColorProps,\n\t__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,\n\t__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,\n} from '@wordpress/block-editor';\nimport {\n\tTextControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { useSelect, useDispatch, useRegistry } from '@wordpress/data';\nimport { useEffect, useMemo, useRef } from '@wordpress/element';\nimport TabToolbarControls from '../tabs/tab-toolbar-controls';\nimport TabMovers from './tab-movers';\nimport useTabActions from '../tabs/use-tab-actions';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nconst EMPTY_ARRAY = [];\n\nfunction Edit( {\n\tattributes,\n\tclientId,\n\tsetAttributes,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\tconst { ariaLabel } = attributes;\n\n\tconst colorProps = useColorProps( attributes );\n\tconst borderProps = useBorderProps( attributes );\n\tconst spacingProps = getSpacingClassesAndStyles( attributes );\n\tconst shadowProps = getShadowClassesAndStyles( attributes );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\tconst { tabsClientId, tabPanels, editorActiveTabIndex, activeTabIndex } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tconst { getBlockRootClientId, getBlockAttributes, getBlocks } =\n\t\t\t\t\tselect( blockEditorStore );\n\n\t\t\t\tconst rootClientId = getBlockRootClientId( clientId );\n\t\t\t\tconst tabsAttributes = getBlockAttributes( rootClientId );\n\t\t\t\tconst tabPanelsBlock = getBlocks( rootClientId )?.find(\n\t\t\t\t\t( block ) => block.name === 'core/tab-panels'\n\t\t\t\t);\n\n\t\t\t\treturn {\n\t\t\t\t\ttabsClientId: rootClientId,\n\t\t\t\t\ttabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t\t\teditorActiveTabIndex: tabsAttributes?.editorActiveTabIndex,\n\t\t\t\t\tactiveTabIndex: tabsAttributes?.activeTabIndex ?? 0,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ clientId ]\n\t\t);\n\tconst registry = useRegistry();\n\tconst { isBlockSelected, hasSelectedInnerBlock } =\n\t\tuseSelect( blockEditorStore );\n\tconst {\n\t\tupdateBlockAttributes,\n\t\tselectBlock,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\tconst { insertTab, removeTab } = useTabActions( tabsClientId );\n\n\tconst effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;\n\tconst tabsList = useMemo(\n\t\t() =>\n\t\t\ttabPanels.map( ( tab ) => ( {\n\t\t\t\tlabel: tab.attributes.label || '',\n\t\t\t\tclientId: tab.clientId,\n\t\t\t} ) ),\n\t\t[ tabPanels ]\n\t);\n\n\tfunction selectTabPanel( tabIndex ) {\n\t\tif ( tabsClientId && tabIndex !== effectiveActiveIndex ) {\n\t\t\t// Batch the selection and index update so the sync effect in\n\t\t\t// the tab-panel block can't revert the switch from a stale\n\t\t\t// inner-block selection in the previously active panel.\n\t\t\tregistry.batch( () => {\n\t\t\t\tselectBlock( clientId );\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\teditorActiveTabIndex: tabIndex,\n\t\t\t\t} );\n\t\t\t} );\n\t\t}\n\t}\n\n\tfunction handleLabelChange( tabIndex, newLabel ) {\n\t\tconst tab = tabsList[ tabIndex ];\n\t\tif ( tab?.clientId ) {\n\t\t\tupdateBlockAttributes( tab.clientId, { label: newLabel } );\n\t\t}\n\t}\n\n\tconst menuRef = useRef();\n\tconst prevTabCountRef = useRef( tabsList.length );\n\n\t// When tabs are added or removed, focus the appropriate button.\n\tuseEffect( () => {\n\t\tconst prevCount = prevTabCountRef.current;\n\t\tprevTabCountRef.current = tabsList.length;\n\n\t\tif ( ! menuRef.current || tabsList.length === prevCount ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only move focus during active editing, not external data changes.\n\t\tif (\n\t\t\t! isBlockSelected( tabsClientId ) &&\n\t\t\t! hasSelectedInnerBlock( tabsClientId, true )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst focusButtonAt = ( index ) => {\n\t\t\twindow.requestAnimationFrame( () => {\n\t\t\t\tconst button =\n\t\t\t\t\tmenuRef.current?.querySelectorAll( 'button' )?.[ index ];\n\t\t\t\t(\n\t\t\t\t\tbutton?.querySelector( '[contenteditable]' ) ?? button\n\t\t\t\t)?.focus();\n\t\t\t} );\n\t\t};\n\n\t\tfocusButtonAt( effectiveActiveIndex );\n\t}, [\n\t\teffectiveActiveIndex,\n\t\thasSelectedInnerBlock,\n\t\tisBlockSelected,\n\t\ttabsClientId,\n\t\ttabsList.length,\n\t] );\n\n\tconst blockProps = useBlockProps( {\n\t\trole: 'tablist',\n\t\tref: menuRef,\n\t\t// Applied manually since this block has no inner blocks for the layout\n\t\t// support to add its container classes to.\n\t\tclassName: layoutClassNames,\n\t} );\n\n\tconst buttonClassName = clsx( colorProps.className, borderProps.className );\n\n\tconst buttonStyle = {\n\t\t...colorProps.style,\n\t\t...borderProps.style,\n\t\t...spacingProps.style,\n\t\t...shadowProps.style,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls group=\"settings\">\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\tariaLabel: undefined,\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={ __( 'Label' ) }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t\thasValue={ () => !! ariaLabel }\n\t\t\t\t\t\tonDeselect={ () =>\n\t\t\t\t\t\t\tsetAttributes( { ariaLabel: undefined } )\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\tlabel={ __( 'Label' ) }\n\t\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t\t'Briefly describe this tab section for screen reader users. Examples: Event information, Product details, and Account settings.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tvalue={ ariaLabel || '' }\n\t\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tariaLabel: value || undefined,\n\t\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t\t}\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<TabMovers tabsClientId={ tabsClientId } />\n\t\t\t<TabToolbarControls tabsClientId={ tabsClientId } />\n\t\t\t<div { ...blockProps }>\n\t\t\t\t{ tabsList.map( ( tab, index ) => {\n\t\t\t\t\tconst isActive = index === effectiveActiveIndex;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tkey={ tab.clientId || index }\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\taria-selected={ isActive }\n\t\t\t\t\t\t\tclassName={ buttonClassName || undefined }\n\t\t\t\t\t\t\tstyle={ buttonStyle }\n\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t// Activate the matching panel whenever this tab\n\t\t\t\t\t\t\t// receives focus — whether from a click or the caret\n\t\t\t\t\t\t\t// moving into the label via the keyboard.\n\t\t\t\t\t\t\tonFocus={ () => {\n\t\t\t\t\t\t\t\tselectTabPanel( index );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RichText\n\t\t\t\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\t\t\tplaceholder={ __( 'Tab title' ) }\n\t\t\t\t\t\t\t\tvalue={ tab.label }\n\t\t\t\t\t\t\t\tonChange={ ( newLabel ) =>\n\t\t\t\t\t\t\t\t\thandleLabelChange( index, newLabel )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t__unstableOnSplitAtEnd={ () =>\n\t\t\t\t\t\t\t\t\tinsertTab( index + 1 )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonRemove={ () => removeTab( index ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default Edit;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/tab-list/save.mjs

@@ -5,6 +5,7 @@ import {
   useBlockProps,
   __experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
   __experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+  __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
   __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles
 } from "@wordpress/block-editor";
 import { jsx } from "react/jsx-runtime";
@@ -16,11 +17,13 @@ function save({ attributes }) {
   const colorProps = getColorClassesAndStyles(attributes);
   const borderProps = getBorderClassesAndStyles(attributes);
   const spacingProps = getSpacingClassesAndStyles(attributes);
+  const shadowProps = getShadowClassesAndStyles(attributes);
   const buttonClassName = clsx(colorProps.className, borderProps.className);
   const buttonStyle = {
     ...colorProps.style,
     ...borderProps.style,
-    ...spacingProps.style
+    ...spacingProps.style,
+    ...shadowProps.style
   };
   return /* @__PURE__ */ jsx("div", { ...blockProps, children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
     RichText.Content,

package/build-module/tab-list/save.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-list/save.jsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n\tRichText,\n\tuseBlockProps,\n\t__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,\n\t__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,\n\t__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,\n} from '@wordpress/block-editor';\n\nexport default function save( { attributes } ) {\n\tconst { tabs } = attributes;\n\tconst blockProps = useBlockProps.save( {\n\t\trole: 'tablist',\n\t} );\n\n\tconst colorProps = getColorClassesAndStyles( attributes );\n\tconst borderProps = getBorderClassesAndStyles( attributes );\n\tconst spacingProps = getSpacingClassesAndStyles( attributes );\n\n\tconst buttonClassName = clsx( colorProps.className, borderProps.className );\n\n\tconst buttonStyle = {\n\t\t...colorProps.style,\n\t\t...borderProps.style,\n\t\t...spacingProps.style,\n\t};\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ tabs.map( ( tab, index ) => (\n\t\t\t\t<RichText.Content\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tclassName={ buttonClassName || undefined }\n\t\t\t\t\tstyle={ buttonStyle }\n\t\t\t\t\ttagName=\"button\"\n\t\t\t\t\tvalue={ tab.label }\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n"],
-  "mappings": ";AAAA,OAAO,UAAU;AACjB;AAAA,EACC;AAAA,EACA;AAAA,EACA,2CAA2C;AAAA,EAC3C,0CAA0C;AAAA,EAC1C,4CAA4C;AAAA,OACtC;AAuBH;AArBW,SAAR,KAAuB,EAAE,WAAW,GAAI;AAC9C,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,aAAa,cAAc,KAAM;AAAA,IACtC,MAAM;AAAA,EACP,CAAE;AAEF,QAAM,aAAa,yBAA0B,UAAW;AACxD,QAAM,cAAc,0BAA2B,UAAW;AAC1D,QAAM,eAAe,2BAA4B,UAAW;AAE5D,QAAM,kBAAkB,KAAM,WAAW,WAAW,YAAY,SAAU;AAE1E,QAAM,cAAc;AAAA,IACnB,GAAG,WAAW;AAAA,IACd,GAAG,YAAY;AAAA,IACf,GAAG,aAAa;AAAA,EACjB;AAEA,SACC,oBAAC,SAAM,GAAG,YACP,eAAK,IAAK,CAAE,KAAK,UAClB;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MAEA,WAAY,mBAAmB;AAAA,MAC/B,OAAQ;AAAA,MACR,SAAQ;AAAA,MACR,OAAQ,IAAI;AAAA,MACZ,MAAK;AAAA,MACL,MAAK;AAAA;AAAA,IANC;AAAA,EAOP,CACC,GACH;AAEF;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n\tRichText,\n\tuseBlockProps,\n\t__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,\n\t__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,\n\t__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,\n\t__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,\n} from '@wordpress/block-editor';\n\nexport default function save( { attributes } ) {\n\tconst { tabs } = attributes;\n\tconst blockProps = useBlockProps.save( {\n\t\trole: 'tablist',\n\t} );\n\n\tconst colorProps = getColorClassesAndStyles( attributes );\n\tconst borderProps = getBorderClassesAndStyles( attributes );\n\tconst spacingProps = getSpacingClassesAndStyles( attributes );\n\tconst shadowProps = getShadowClassesAndStyles( attributes );\n\n\tconst buttonClassName = clsx( colorProps.className, borderProps.className );\n\n\tconst buttonStyle = {\n\t\t...colorProps.style,\n\t\t...borderProps.style,\n\t\t...spacingProps.style,\n\t\t...shadowProps.style,\n\t};\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t{ tabs.map( ( tab, index ) => (\n\t\t\t\t<RichText.Content\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tclassName={ buttonClassName || undefined }\n\t\t\t\t\tstyle={ buttonStyle }\n\t\t\t\t\ttagName=\"button\"\n\t\t\t\t\tvalue={ tab.label }\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\trole=\"tab\"\n\t\t\t\t/>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB;AAAA,EACC;AAAA,EACA;AAAA,EACA,2CAA2C;AAAA,EAC3C,0CAA0C;AAAA,EAC1C,2CAA2C;AAAA,EAC3C,4CAA4C;AAAA,OACtC;AAyBH;AAvBW,SAAR,KAAuB,EAAE,WAAW,GAAI;AAC9C,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,aAAa,cAAc,KAAM;AAAA,IACtC,MAAM;AAAA,EACP,CAAE;AAEF,QAAM,aAAa,yBAA0B,UAAW;AACxD,QAAM,cAAc,0BAA2B,UAAW;AAC1D,QAAM,eAAe,2BAA4B,UAAW;AAC5D,QAAM,cAAc,0BAA2B,UAAW;AAE1D,QAAM,kBAAkB,KAAM,WAAW,WAAW,YAAY,SAAU;AAE1E,QAAM,cAAc;AAAA,IACnB,GAAG,WAAW;AAAA,IACd,GAAG,YAAY;AAAA,IACf,GAAG,aAAa;AAAA,IAChB,GAAG,YAAY;AAAA,EAChB;AAEA,SACC,oBAAC,SAAM,GAAG,YACP,eAAK,IAAK,CAAE,KAAK,UAClB;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MAEA,WAAY,mBAAmB;AAAA,MAC/B,OAAQ;AAAA,MACR,SAAQ;AAAA,MACR,OAAQ,IAAI;AAAA,MACZ,MAAK;AAAA,MACL,MAAK;AAAA;AAAA,IANC;AAAA,EAOP,CACC,GACH;AAEF;",
   "names": []
 }

package/build-module/tab-panels/block.json

@@ -36,6 +36,9 @@
 		"spacing": {
 			"padding": true
 		},
+		"dimensions": {
+			"minHeight": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/build-module/tabs/block.json

@@ -55,6 +55,9 @@
 			"margin": true,
 			"padding": true
 		},
+		"dimensions": {
+			"minWidth": true
+		},
 		"shadow": true,
 		"typography": {
 			"fontSize": true,

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

@@ -31,8 +31,13 @@
 		},
 		"shadow": true,
 		"spacing": {
+			"margin": true,
 			"padding": true
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

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

@@ -26,6 +26,10 @@
 				"text": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
 			"padding": true,
 			"margin": true

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

@@ -43,9 +43,14 @@
 				"link": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"shadow": true,
 		"spacing": {
-			"padding": true
+			"padding": true,
+			"margin": true
 		},
 		"typography": {
 			"fontSize": true,

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

@@ -43,6 +43,10 @@
 				"fontSize": true
 			}
 		},
+		"dimensions": {
+			"minHeight": true,
+			"minWidth": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true,

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

@@ -1,6 +1,6 @@
 // packages/block-library/src/utils/waveform-utils.js
 import { colord } from "colord";
-import WaveformPlayerLib from "@arraypress/waveform-player";
+import WaveformPlayerLib from "@arraypress/waveform-player/no-autoinit";
 var DEFAULT_WAVEFORM_HEIGHT = 100;
 var DEFAULT_SEEK_LABEL = "Seek";
 function getComputedStyle(element) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/waveform-utils.js"],
-  "sourcesContent": ["/**\n * Shared utilities for waveform audio player functionality.\n * Used by both the WaveformPlayer component (editor) and view.js (frontend).\n */\nimport { colord } from 'colord';\nimport WaveformPlayerLib from '@arraypress/waveform-player';\n\n/**\n * Configuration constants.\n * Note: DEFAULT_WAVEFORM_HEIGHT should match $waveform-player-height in style.scss.\n */\nconst DEFAULT_WAVEFORM_HEIGHT = 100;\nconst DEFAULT_SEEK_LABEL = 'Seek';\n\n/**\n * Get computed style for an element, using ownerDocument for iframe compatibility.\n *\n * @param {Element} element - The element to get styles from.\n * @return {CSSStyleDeclaration} The computed style.\n */\nfunction getComputedStyle( element ) {\n\treturn element.ownerDocument.defaultView.getComputedStyle( element );\n}\n\nfunction getTopLevelGradientParts( gradientValue ) {\n\tconst match = gradientValue?.trim().match( /^[\\w-]+-gradient\\((.*)\\)$/i );\n\tif ( ! match ) {\n\t\treturn [];\n\t}\n\n\tconst parts = [];\n\tlet depth = 0;\n\tlet current = '';\n\n\tfor ( const character of match[ 1 ] ) {\n\t\tif ( character === '(' ) {\n\t\t\t++depth;\n\t\t} else if ( character === ')' ) {\n\t\t\t--depth;\n\t\t}\n\n\t\tif ( character === ',' && depth === 0 ) {\n\t\t\tparts.push( current.trim() );\n\t\t\tcurrent = '';\n\t\t\tcontinue;\n\t\t}\n\n\t\tcurrent += character;\n\t}\n\n\tif ( current.trim() ) {\n\t\tparts.push( current.trim() );\n\t}\n\n\treturn parts;\n}\n\nfunction getLeadingColorFunction( value ) {\n\tconst match = value.match( /^([\\w-]+)\\(/ );\n\tif ( ! match ) {\n\t\treturn;\n\t}\n\n\tconst supportedFunctions = [\n\t\t'color',\n\t\t'color-mix',\n\t\t'hsl',\n\t\t'hsla',\n\t\t'hwb',\n\t\t'lab',\n\t\t'lch',\n\t\t'oklab',\n\t\t'oklch',\n\t\t'rgb',\n\t\t'rgba',\n\t\t'var',\n\t];\n\tif ( ! supportedFunctions.includes( match[ 1 ].toLowerCase() ) ) {\n\t\treturn;\n\t}\n\n\tlet depth = 0;\n\tlet foundOpeningParenthesis = false;\n\tfor ( let index = 0; index < value.length; index++ ) {\n\t\tconst character = value[ index ];\n\t\tif ( character === '(' ) {\n\t\t\tfoundOpeningParenthesis = true;\n\t\t\t++depth;\n\t\t} else if ( character === ')' ) {\n\t\t\t--depth;\n\t\t}\n\n\t\tif ( foundOpeningParenthesis && depth === 0 ) {\n\t\t\treturn value.slice( 0, index + 1 );\n\t\t}\n\t}\n}\n\nfunction getColorStopValue( gradientPart ) {\n\tconst colorFunction = getLeadingColorFunction( gradientPart );\n\tif ( colorFunction ) {\n\t\treturn colorFunction;\n\t}\n\n\tconst [ possibleColor ] = gradientPart.split( /\\s+/ );\n\tif ( colord( possibleColor ).isValid() ) {\n\t\treturn possibleColor;\n\t}\n}\n\nfunction getWaveformGradientDirection( gradientValue ) {\n\tconst parts = getTopLevelGradientParts( gradientValue );\n\tconst direction = parts[ 0 ];\n\tconst angleMatch = direction?.match( /^(-?\\d+(?:\\.\\d+)?)deg$/i );\n\tif ( angleMatch ) {\n\t\tconst angle = ( ( Number( angleMatch[ 1 ] ) % 360 ) + 360 ) % 360;\n\t\tif ( angle === 90 || angle === 270 ) {\n\t\t\treturn 'horizontal';\n\t\t}\n\t\tif ( angle === 0 || angle === 180 ) {\n\t\t\treturn 'vertical';\n\t\t}\n\t\treturn 'diagonal';\n\t}\n\n\tif ( ! direction?.startsWith( 'to ' ) ) {\n\t\treturn undefined;\n\t}\n\n\tconst sideOrCorner = direction.toLowerCase().replace( /^to\\s+/, '' );\n\tconst hasHorizontalSide =\n\t\tsideOrCorner.includes( 'left' ) || sideOrCorner.includes( 'right' );\n\tconst hasVerticalSide =\n\t\tsideOrCorner.includes( 'top' ) || sideOrCorner.includes( 'bottom' );\n\n\tif ( hasHorizontalSide && hasVerticalSide ) {\n\t\treturn 'diagonal';\n\t}\n\tif ( hasHorizontalSide ) {\n\t\treturn 'horizontal';\n\t}\n\tif ( hasVerticalSide ) {\n\t\treturn 'vertical';\n\t}\n}\n\nfunction resolveColorValue( element, colorValue ) {\n\tif ( ! colorValue || colord( colorValue ).isValid() ) {\n\t\treturn colorValue;\n\t}\n\n\tconst colorResolver = element.ownerDocument.createElement( 'span' );\n\tcolorResolver.style.color = colorValue;\n\tif ( ! colorResolver.style.color ) {\n\t\treturn colorValue;\n\t}\n\telement.appendChild( colorResolver );\n\n\tconst resolvedColor = getComputedStyle( colorResolver ).color;\n\tcolorResolver.remove();\n\n\treturn resolvedColor && colord( resolvedColor ).isValid()\n\t\t? resolvedColor\n\t\t: colorValue;\n}\n\nfunction getResolvedGradientStops( element, gradientValue ) {\n\tconst stops = getWaveformGradientStops( gradientValue )\n\t\t?.map( ( colorValue ) => resolveColorValue( element, colorValue ) )\n\t\t.filter( ( colorValue ) => colord( colorValue ).isValid() );\n\n\treturn stops?.length > 1 ? stops : undefined;\n}\n\nfunction applyAlpha( colorValue, alpha ) {\n\tif ( Array.isArray( colorValue ) ) {\n\t\treturn colorValue.map( ( color ) =>\n\t\t\tcolord( color ).alpha( alpha ).toRgbString()\n\t\t);\n\t}\n\treturn colord( colorValue ).alpha( alpha ).toRgbString();\n}\n\nfunction getRepresentativeColor( colorValue ) {\n\tif ( Array.isArray( colorValue ) ) {\n\t\treturn colorValue[ colorValue.length - 1 ];\n\t}\n\treturn colorValue;\n}\n\nexport function getWaveformGradientStops( gradientValue ) {\n\tconst stops = getTopLevelGradientParts( gradientValue )\n\t\t.map( getColorStopValue )\n\t\t.filter( Boolean );\n\n\treturn stops.length > 1 ? stops : undefined;\n}\n\nfunction serializeColorValue( colorValue ) {\n\treturn Array.isArray( colorValue )\n\t\t? JSON.stringify( colorValue )\n\t\t: colorValue;\n}\n\n/**\n * Get all colors needed for the waveform player based on the element's styles.\n *\n * @param {Element} element               - The element to derive colors from.\n * @param {string}  waveformColorValue    - The base waveform color value to use.\n * @param {string}  textColorValue        - The text color value to use.\n * @param {string}  waveformGradientValue - The waveform gradient value to use.\n * @return {Object} Object containing textColor, waveformColor, progressColor.\n */\nexport function getWaveformColors(\n\telement,\n\twaveformColorValue,\n\ttextColorValue,\n\twaveformGradientValue\n) {\n\tconst textColor = textColorValue || getComputedStyle( element ).color;\n\tconst waveformGradientStops = getResolvedGradientStops(\n\t\telement,\n\t\twaveformGradientValue\n\t);\n\tconst waveformBaseColor =\n\t\twaveformGradientStops || waveformColorValue || textColor;\n\tconst waveformColor = applyAlpha( waveformBaseColor, 0.3 );\n\tconst progressColor = applyAlpha( waveformBaseColor, 0.6 );\n\tconst waveformGradient = waveformGradientStops\n\t\t? getWaveformGradientDirection( waveformGradientValue )\n\t\t: undefined;\n\n\treturn {\n\t\ttextColor,\n\t\twaveformColor,\n\t\tprogressColor,\n\t\t...( waveformGradient && { waveformGradient } ),\n\t};\n}\n\n/**\n * Create a waveform container element with the specified attributes.\n *\n * @param {Object} options                  - The options for the container.\n * @param {string} options.url              - The audio URL.\n * @param {string} options.title            - The track title.\n * @param {string} options.artist           - The track artist.\n * @param {string} options.artwork          - The track image URL.\n * @param {string} options.waveformColor    - The waveform bar color.\n * @param {string} options.progressColor    - The progress indicator color.\n * @param {string} options.waveformGradient - The waveform gradient direction.\n * @param {string} options.buttonColor      - The play button color.\n * @param {string} options.seekLabel        - Accessible label for the seek control.\n * @param {string} options.seekValueText    - Accessible value-text template for the seek control (e.g. '%1$s of %2$s').\n * @param {number} options.height           - The waveform height in pixels.\n * @param {string} options.waveformStyle    - The visualization style (bars, mirror, line, blocks, dots, seekbar).\n * @return {Element} The configured container element.\n */\nexport function createWaveformContainer( {\n\turl,\n\ttitle,\n\tartist,\n\tartwork,\n\twaveformColor,\n\tprogressColor,\n\twaveformGradient,\n\tbuttonColor,\n\tseekLabel,\n\tseekValueText,\n\theight = DEFAULT_WAVEFORM_HEIGHT,\n\twaveformStyle = 'bars',\n} ) {\n\tconst container = document.createElement( 'div' );\n\tcontainer.setAttribute( 'data-waveform-player', '' );\n\tcontainer.setAttribute( 'data-url', url );\n\tcontainer.setAttribute( 'data-height', String( height ) );\n\tcontainer.setAttribute( 'data-waveform-style', waveformStyle );\n\tcontainer.setAttribute(\n\t\t'data-waveform-color',\n\t\tserializeColorValue( waveformColor )\n\t);\n\tcontainer.setAttribute(\n\t\t'data-progress-color',\n\t\tserializeColorValue( progressColor )\n\t);\n\tif ( waveformGradient ) {\n\t\tcontainer.setAttribute( 'data-waveform-gradient', waveformGradient );\n\t}\n\tcontainer.setAttribute( 'data-button-color', buttonColor );\n\tcontainer.setAttribute(\n\t\t'data-seek-label',\n\t\tgetSeekControlLabel( seekLabel )\n\t);\n\t// The library formats the current time and duration and interpolates them\n\t// into this translated template for the seek slider's aria-valuetext.\n\tif ( seekValueText ) {\n\t\tcontainer.setAttribute( 'data-seek-value-text', seekValueText );\n\t}\n\tcontainer.setAttribute( 'data-text-color', buttonColor );\n\tcontainer.setAttribute( 'data-text-secondary-color', buttonColor );\n\n\tif ( title ) {\n\t\tcontainer.setAttribute( 'data-title', title );\n\t}\n\tif ( artist ) {\n\t\tcontainer.setAttribute( 'data-artist', artist );\n\t}\n\tif ( artwork ) {\n\t\tcontainer.setAttribute( 'data-artwork', artwork );\n\t}\n\treturn container;\n}\n\n/**\n * Apply custom styles to a generated waveform player.\n *\n * @param {Element} container                 - The generated player container.\n * @param {Object}  styles                    - The player styles.\n * @param {string}  styles.backgroundColor    - The waveform area background color.\n * @param {string}  styles.backgroundGradient - The waveform area background gradient.\n * @param {string}  styles.textColor          - The player text color.\n * @param {string}  styles.playButtonColor    - The play button color.\n * @param {string}  styles.playButtonGradient - The play button gradient.\n */\nexport function applyWaveformPlayerStyles(\n\tcontainer,\n\t{\n\t\tbackgroundColor,\n\t\tbackgroundGradient,\n\t\ttextColor,\n\t\tplayButtonColor,\n\t\tplayButtonGradient,\n\t} = {}\n) {\n\tconst waveformContainer = container.querySelector( '.waveform-container' );\n\tconst playButton = container.querySelector( '.waveform-btn' );\n\tconst playButtonBaseColor = getRepresentativeColor(\n\t\tgetResolvedGradientStops( container, playButtonGradient ) ||\n\t\t\tplayButtonColor\n\t);\n\n\tif ( playButtonBaseColor ) {\n\t\tcontainer.style.setProperty(\n\t\t\t'--wfp-button-color',\n\t\t\tplayButtonBaseColor\n\t\t);\n\t} else {\n\t\tcontainer.style.removeProperty( '--wfp-button-color' );\n\t}\n\n\tif ( textColor ) {\n\t\tcontainer.style.setProperty( '--wfp-text-color', textColor );\n\t\tcontainer.style.setProperty( '--wfp-text-secondary-color', textColor );\n\t} else {\n\t\tcontainer.style.removeProperty( '--wfp-text-color' );\n\t\tcontainer.style.removeProperty( '--wfp-text-secondary-color' );\n\t}\n\n\tif ( playButton ) {\n\t\tif ( playButtonGradient ) {\n\t\t\tplayButton.style.background = playButtonGradient;\n\t\t} else {\n\t\t\tplayButton.style.removeProperty( 'background' );\n\t\t}\n\t}\n\n\tif ( waveformContainer ) {\n\t\tif ( backgroundGradient ) {\n\t\t\twaveformContainer.style.background = backgroundGradient;\n\t\t} else if ( backgroundColor ) {\n\t\t\twaveformContainer.style.removeProperty( 'background' );\n\t\t\twaveformContainer.style.backgroundColor = backgroundColor;\n\t\t} else {\n\t\t\twaveformContainer.style.removeProperty( 'background' );\n\t\t\twaveformContainer.style.removeProperty( 'background-color' );\n\t\t}\n\t}\n}\n\n/**\n * Apply contrasting color to SVG icon paths for visibility.\n * The icons should contrast with the button background.\n *\n * @param {Element} container   - The waveform container element.\n * @param {string}  buttonColor - The button background color.\n */\nexport function styleSvgIcons( container, buttonColor ) {\n\t// Compute a contrasting color for the icons based on button brightness.\n\tconst isButtonDark = colord( buttonColor ).isDark();\n\tconst iconColor = isButtonDark ? '#ffffff' : '#000000';\n\n\tconst svgPaths = container.querySelectorAll( 'svg path' );\n\tsvgPaths.forEach( ( path ) => {\n\t\tpath.style.fill = iconColor;\n\t} );\n}\n\n/**\n * Set up play button accessibility: aria-label that toggles on play/pause.\n *\n * @param {Element} container    - The waveform container element.\n * @param {Object}  labels       - Button labels.\n * @param {string}  labels.play  - Label for the play state.\n * @param {string}  labels.pause - Label for the pause state.\n */\nexport function setupPlayButtonAccessibility(\n\tcontainer,\n\t{ play: playLabel = 'Play', pause: pauseLabel = 'Pause' } = {}\n) {\n\tconst playBtn = container.querySelector( '.waveform-btn' );\n\tif ( ! playBtn ) {\n\t\treturn;\n\t}\n\n\tplayBtn.setAttribute( 'aria-label', playLabel );\n\n\tconst onPlay = () => playBtn.setAttribute( 'aria-label', pauseLabel );\n\tconst onPause = () => playBtn.setAttribute( 'aria-label', playLabel );\n\n\tcontainer.addEventListener( 'waveformplayer:play', onPlay );\n\tcontainer.addEventListener( 'waveformplayer:pause', onPause );\n\tcontainer.addEventListener( 'waveformplayer:ended', onPause );\n\n\treturn () => {\n\t\tcontainer.removeEventListener( 'waveformplayer:play', onPlay );\n\t\tcontainer.removeEventListener( 'waveformplayer:pause', onPause );\n\t\tcontainer.removeEventListener( 'waveformplayer:ended', onPause );\n\t};\n}\n\n/**\n * Get the accessible label for the waveform seek control.\n *\n * @param {string} label - Accessible label for the seek control.\n * @return {string} The provided label or translated fallback.\n */\nfunction getSeekControlLabel( label ) {\n\treturn label || DEFAULT_SEEK_LABEL;\n}\n\n/**\n * Update the waveform seek control label.\n *\n * @param {Object} instance - The WaveformPlayer instance.\n * @param {string} label    - Accessible label for the seek control.\n */\nexport function updateSeekControlLabel( instance, label ) {\n\tconst seekLabel = getSeekControlLabel( label );\n\tinstance.options.seekLabel = seekLabel;\n\tinstance.applySeekLabel?.( seekLabel );\n\n\tconst seekControl = instance?.container?.querySelector(\n\t\t'.waveform-container'\n\t);\n\n\tif ( seekControl ) {\n\t\tseekControl.setAttribute( 'aria-label', seekLabel );\n\t}\n}\n\n/**\n * Show the current artwork as the play button background.\n *\n * @param {Element} container  - The waveform player container element.\n * @param {string}  artworkUrl - The track image URL.\n */\nexport function setupPlayButtonArtwork( container, artworkUrl ) {\n\tif ( ! artworkUrl ) {\n\t\tcontainer.classList.remove( 'has-play-button-artwork' );\n\t\tcontainer.style.removeProperty( '--wp--playlist--play-button-artwork' );\n\t\treturn;\n\t}\n\n\tcontainer.classList.add( 'has-play-button-artwork' );\n\tcontainer.style.setProperty(\n\t\t'--wp--playlist--play-button-artwork',\n\t\t`url(${ JSON.stringify( artworkUrl ) })`\n\t);\n}\n\n/**\n * Log play errors, filtering out expected AbortError.\n *\n * @param {Error} error - The error from play().\n */\nexport function logPlayError( error ) {\n\t// The browser throws AbortError when a play() promise is interrupted\n\t// by a subsequent pause() or a new audio source load (track change).\n\t// This is normal during rapid user interaction and safe to ignore.\n\tif ( error.name === 'AbortError' ) {\n\t\treturn;\n\t}\n\t// eslint-disable-next-line no-console\n\tconsole.error( 'Playlist play error:', error );\n}\n\n/**\n * Initialize a WaveformPlayer instance on an element.\n *\n * This is the shared core logic used by both the React component (editor)\n * and the Interactivity API (frontend).\n *\n * @param {Element}  element                       - The container element (must be in DOM).\n * @param {Object}   options                       - Configuration options.\n * @param {string}   options.src                   - The audio file URL.\n * @param {string}   options.title                 - The track title.\n * @param {string}   options.artist                - The artist name.\n * @param {string}   options.image                 - The track image URL.\n * @param {string}   options.imageAlt              - The track image alt text.\n * @param {string}   options.waveformColor         - The waveform color.\n * @param {string}   options.waveformGradient      - The waveform gradient.\n * @param {string}   options.textColor             - The player text color.\n * @param {string}   options.backgroundColor       - The player background color.\n * @param {string}   options.backgroundGradient    - The player background gradient.\n * @param {boolean}  options.autoPlay              - Whether to auto-play when ready.\n * @param {Function} options.onEnded               - Callback when track ends.\n * @param {Object}   options.labels                - Translated button labels.\n * @param {string}   options.waveformStyle         - Waveform style (bars, mirror, line, blocks, dots, seekbar).\n * @param {boolean}  options.showPlayButtonArtwork - Whether to show artwork on the play button.\n * @return {Object} Object with instance, container, and destroy function.\n */\nexport function initWaveformPlayer(\n\telement,\n\t{\n\t\tsrc,\n\t\ttitle,\n\t\tartist,\n\t\timage,\n\t\timageAlt,\n\t\twaveformColor: waveformColorValue,\n\t\twaveformGradient: waveformGradientValue,\n\t\ttextColor: textColorValue,\n\t\tbackgroundColor,\n\t\tbackgroundGradient,\n\t\tautoPlay,\n\t\tonEnded,\n\t\tlabels,\n\t\twaveformStyle,\n\t\tshowPlayButtonArtwork = false,\n\t}\n) {\n\tconst playerArtwork = showPlayButtonArtwork ? undefined : image;\n\n\t// Get colors from computed styles.\n\tconst { textColor, waveformColor, progressColor, waveformGradient } =\n\t\tgetWaveformColors(\n\t\t\telement,\n\t\t\twaveformColorValue,\n\t\t\ttextColorValue,\n\t\t\twaveformGradientValue\n\t\t);\n\tconst waveformGradientStops = getResolvedGradientStops(\n\t\telement,\n\t\twaveformGradientValue\n\t);\n\tconst waveformButtonColor = getRepresentativeColor(\n\t\twaveformGradientStops || waveformColorValue\n\t);\n\n\t// Create the waveform container.\n\tconst container = createWaveformContainer( {\n\t\turl: src,\n\t\ttitle,\n\t\tartist,\n\t\tartwork: playerArtwork,\n\t\twaveformColor,\n\t\tprogressColor,\n\t\twaveformGradient,\n\t\tbuttonColor: textColor,\n\t\tseekLabel: title || labels?.seek,\n\t\tseekValueText: labels?.seekValueText,\n\t\twaveformStyle,\n\t} );\n\telement.appendChild( container );\n\n\t// Initialize the WaveformPlayer library. The library reads the translated\n\t// seek label and value-text templates from the container's data attributes\n\t// and owns the seek slider's accessible label and value text.\n\tconst instance = new WaveformPlayerLib( container );\n\tif ( instance.artworkEl ) {\n\t\tinstance.artworkEl.alt = imageAlt || '';\n\t}\n\tapplyWaveformPlayerStyles( container, {\n\t\tbackgroundColor,\n\t\tbackgroundGradient,\n\t\ttextColor,\n\t\tplayButtonColor: showPlayButtonArtwork\n\t\t\t? undefined\n\t\t\t: waveformButtonColor,\n\t\tplayButtonGradient: showPlayButtonArtwork\n\t\t\t? undefined\n\t\t\t: waveformGradientValue,\n\t} );\n\n\t// Set up event handlers.\n\tlet cleanupPlayButtonAccessibility;\n\tconst handlers = {\n\t\tready: () => {\n\t\t\tstyleSvgIcons( container, waveformButtonColor || textColor );\n\t\t\tif ( showPlayButtonArtwork ) {\n\t\t\t\tsetupPlayButtonArtwork( container, image );\n\t\t\t}\n\t\t\tcleanupPlayButtonAccessibility = setupPlayButtonAccessibility(\n\t\t\t\tcontainer,\n\t\t\t\tlabels\n\t\t\t);\n\t\t\tif ( autoPlay ) {\n\t\t\t\tinstance.play()?.catch( logPlayError );\n\t\t\t}\n\t\t},\n\t\tended: () => onEnded?.(),\n\t};\n\n\tcontainer.addEventListener( 'waveformplayer:ready', handlers.ready );\n\tcontainer.addEventListener( 'waveformplayer:ended', handlers.ended );\n\n\t// Return instance, container, and cleanup function.\n\treturn {\n\t\tinstance,\n\t\tcontainer,\n\t\tdestroy: () => {\n\t\t\tcleanupPlayButtonAccessibility?.();\n\t\t\tcontainer.removeEventListener(\n\t\t\t\t'waveformplayer:ready',\n\t\t\t\thandlers.ready\n\t\t\t);\n\t\t\tcontainer.removeEventListener(\n\t\t\t\t'waveformplayer:ended',\n\t\t\t\thandlers.ended\n\t\t\t);\n\t\t\tinstance.destroy();\n\t\t\tcontainer.remove();\n\t\t},\n\t};\n}\n"],
+  "sourcesContent": ["/**\n * Shared utilities for waveform audio player functionality.\n * Used by both the WaveformPlayer component (editor) and view.js (frontend).\n */\nimport { colord } from 'colord';\nimport WaveformPlayerLib from '@arraypress/waveform-player/no-autoinit';\n\n/**\n * Configuration constants.\n * Note: DEFAULT_WAVEFORM_HEIGHT should match $waveform-player-height in style.scss.\n */\nconst DEFAULT_WAVEFORM_HEIGHT = 100;\nconst DEFAULT_SEEK_LABEL = 'Seek';\n\n/**\n * Get computed style for an element, using ownerDocument for iframe compatibility.\n *\n * @param {Element} element - The element to get styles from.\n * @return {CSSStyleDeclaration} The computed style.\n */\nfunction getComputedStyle( element ) {\n\treturn element.ownerDocument.defaultView.getComputedStyle( element );\n}\n\nfunction getTopLevelGradientParts( gradientValue ) {\n\tconst match = gradientValue?.trim().match( /^[\\w-]+-gradient\\((.*)\\)$/i );\n\tif ( ! match ) {\n\t\treturn [];\n\t}\n\n\tconst parts = [];\n\tlet depth = 0;\n\tlet current = '';\n\n\tfor ( const character of match[ 1 ] ) {\n\t\tif ( character === '(' ) {\n\t\t\t++depth;\n\t\t} else if ( character === ')' ) {\n\t\t\t--depth;\n\t\t}\n\n\t\tif ( character === ',' && depth === 0 ) {\n\t\t\tparts.push( current.trim() );\n\t\t\tcurrent = '';\n\t\t\tcontinue;\n\t\t}\n\n\t\tcurrent += character;\n\t}\n\n\tif ( current.trim() ) {\n\t\tparts.push( current.trim() );\n\t}\n\n\treturn parts;\n}\n\nfunction getLeadingColorFunction( value ) {\n\tconst match = value.match( /^([\\w-]+)\\(/ );\n\tif ( ! match ) {\n\t\treturn;\n\t}\n\n\tconst supportedFunctions = [\n\t\t'color',\n\t\t'color-mix',\n\t\t'hsl',\n\t\t'hsla',\n\t\t'hwb',\n\t\t'lab',\n\t\t'lch',\n\t\t'oklab',\n\t\t'oklch',\n\t\t'rgb',\n\t\t'rgba',\n\t\t'var',\n\t];\n\tif ( ! supportedFunctions.includes( match[ 1 ].toLowerCase() ) ) {\n\t\treturn;\n\t}\n\n\tlet depth = 0;\n\tlet foundOpeningParenthesis = false;\n\tfor ( let index = 0; index < value.length; index++ ) {\n\t\tconst character = value[ index ];\n\t\tif ( character === '(' ) {\n\t\t\tfoundOpeningParenthesis = true;\n\t\t\t++depth;\n\t\t} else if ( character === ')' ) {\n\t\t\t--depth;\n\t\t}\n\n\t\tif ( foundOpeningParenthesis && depth === 0 ) {\n\t\t\treturn value.slice( 0, index + 1 );\n\t\t}\n\t}\n}\n\nfunction getColorStopValue( gradientPart ) {\n\tconst colorFunction = getLeadingColorFunction( gradientPart );\n\tif ( colorFunction ) {\n\t\treturn colorFunction;\n\t}\n\n\tconst [ possibleColor ] = gradientPart.split( /\\s+/ );\n\tif ( colord( possibleColor ).isValid() ) {\n\t\treturn possibleColor;\n\t}\n}\n\nfunction getWaveformGradientDirection( gradientValue ) {\n\tconst parts = getTopLevelGradientParts( gradientValue );\n\tconst direction = parts[ 0 ];\n\tconst angleMatch = direction?.match( /^(-?\\d+(?:\\.\\d+)?)deg$/i );\n\tif ( angleMatch ) {\n\t\tconst angle = ( ( Number( angleMatch[ 1 ] ) % 360 ) + 360 ) % 360;\n\t\tif ( angle === 90 || angle === 270 ) {\n\t\t\treturn 'horizontal';\n\t\t}\n\t\tif ( angle === 0 || angle === 180 ) {\n\t\t\treturn 'vertical';\n\t\t}\n\t\treturn 'diagonal';\n\t}\n\n\tif ( ! direction?.startsWith( 'to ' ) ) {\n\t\treturn undefined;\n\t}\n\n\tconst sideOrCorner = direction.toLowerCase().replace( /^to\\s+/, '' );\n\tconst hasHorizontalSide =\n\t\tsideOrCorner.includes( 'left' ) || sideOrCorner.includes( 'right' );\n\tconst hasVerticalSide =\n\t\tsideOrCorner.includes( 'top' ) || sideOrCorner.includes( 'bottom' );\n\n\tif ( hasHorizontalSide && hasVerticalSide ) {\n\t\treturn 'diagonal';\n\t}\n\tif ( hasHorizontalSide ) {\n\t\treturn 'horizontal';\n\t}\n\tif ( hasVerticalSide ) {\n\t\treturn 'vertical';\n\t}\n}\n\nfunction resolveColorValue( element, colorValue ) {\n\tif ( ! colorValue || colord( colorValue ).isValid() ) {\n\t\treturn colorValue;\n\t}\n\n\tconst colorResolver = element.ownerDocument.createElement( 'span' );\n\tcolorResolver.style.color = colorValue;\n\tif ( ! colorResolver.style.color ) {\n\t\treturn colorValue;\n\t}\n\telement.appendChild( colorResolver );\n\n\tconst resolvedColor = getComputedStyle( colorResolver ).color;\n\tcolorResolver.remove();\n\n\treturn resolvedColor && colord( resolvedColor ).isValid()\n\t\t? resolvedColor\n\t\t: colorValue;\n}\n\nfunction getResolvedGradientStops( element, gradientValue ) {\n\tconst stops = getWaveformGradientStops( gradientValue )\n\t\t?.map( ( colorValue ) => resolveColorValue( element, colorValue ) )\n\t\t.filter( ( colorValue ) => colord( colorValue ).isValid() );\n\n\treturn stops?.length > 1 ? stops : undefined;\n}\n\nfunction applyAlpha( colorValue, alpha ) {\n\tif ( Array.isArray( colorValue ) ) {\n\t\treturn colorValue.map( ( color ) =>\n\t\t\tcolord( color ).alpha( alpha ).toRgbString()\n\t\t);\n\t}\n\treturn colord( colorValue ).alpha( alpha ).toRgbString();\n}\n\nfunction getRepresentativeColor( colorValue ) {\n\tif ( Array.isArray( colorValue ) ) {\n\t\treturn colorValue[ colorValue.length - 1 ];\n\t}\n\treturn colorValue;\n}\n\nexport function getWaveformGradientStops( gradientValue ) {\n\tconst stops = getTopLevelGradientParts( gradientValue )\n\t\t.map( getColorStopValue )\n\t\t.filter( Boolean );\n\n\treturn stops.length > 1 ? stops : undefined;\n}\n\nfunction serializeColorValue( colorValue ) {\n\treturn Array.isArray( colorValue )\n\t\t? JSON.stringify( colorValue )\n\t\t: colorValue;\n}\n\n/**\n * Get all colors needed for the waveform player based on the element's styles.\n *\n * @param {Element} element               - The element to derive colors from.\n * @param {string}  waveformColorValue    - The base waveform color value to use.\n * @param {string}  textColorValue        - The text color value to use.\n * @param {string}  waveformGradientValue - The waveform gradient value to use.\n * @return {Object} Object containing textColor, waveformColor, progressColor.\n */\nexport function getWaveformColors(\n\telement,\n\twaveformColorValue,\n\ttextColorValue,\n\twaveformGradientValue\n) {\n\tconst textColor = textColorValue || getComputedStyle( element ).color;\n\tconst waveformGradientStops = getResolvedGradientStops(\n\t\telement,\n\t\twaveformGradientValue\n\t);\n\tconst waveformBaseColor =\n\t\twaveformGradientStops || waveformColorValue || textColor;\n\tconst waveformColor = applyAlpha( waveformBaseColor, 0.3 );\n\tconst progressColor = applyAlpha( waveformBaseColor, 0.6 );\n\tconst waveformGradient = waveformGradientStops\n\t\t? getWaveformGradientDirection( waveformGradientValue )\n\t\t: undefined;\n\n\treturn {\n\t\ttextColor,\n\t\twaveformColor,\n\t\tprogressColor,\n\t\t...( waveformGradient && { waveformGradient } ),\n\t};\n}\n\n/**\n * Create a waveform container element with the specified attributes.\n *\n * @param {Object} options                  - The options for the container.\n * @param {string} options.url              - The audio URL.\n * @param {string} options.title            - The track title.\n * @param {string} options.artist           - The track artist.\n * @param {string} options.artwork          - The track image URL.\n * @param {string} options.waveformColor    - The waveform bar color.\n * @param {string} options.progressColor    - The progress indicator color.\n * @param {string} options.waveformGradient - The waveform gradient direction.\n * @param {string} options.buttonColor      - The play button color.\n * @param {string} options.seekLabel        - Accessible label for the seek control.\n * @param {string} options.seekValueText    - Accessible value-text template for the seek control (e.g. '%1$s of %2$s').\n * @param {number} options.height           - The waveform height in pixels.\n * @param {string} options.waveformStyle    - The visualization style (bars, mirror, line, blocks, dots, seekbar).\n * @return {Element} The configured container element.\n */\nexport function createWaveformContainer( {\n\turl,\n\ttitle,\n\tartist,\n\tartwork,\n\twaveformColor,\n\tprogressColor,\n\twaveformGradient,\n\tbuttonColor,\n\tseekLabel,\n\tseekValueText,\n\theight = DEFAULT_WAVEFORM_HEIGHT,\n\twaveformStyle = 'bars',\n} ) {\n\tconst container = document.createElement( 'div' );\n\tcontainer.setAttribute( 'data-waveform-player', '' );\n\tcontainer.setAttribute( 'data-url', url );\n\tcontainer.setAttribute( 'data-height', String( height ) );\n\tcontainer.setAttribute( 'data-waveform-style', waveformStyle );\n\tcontainer.setAttribute(\n\t\t'data-waveform-color',\n\t\tserializeColorValue( waveformColor )\n\t);\n\tcontainer.setAttribute(\n\t\t'data-progress-color',\n\t\tserializeColorValue( progressColor )\n\t);\n\tif ( waveformGradient ) {\n\t\tcontainer.setAttribute( 'data-waveform-gradient', waveformGradient );\n\t}\n\tcontainer.setAttribute( 'data-button-color', buttonColor );\n\tcontainer.setAttribute(\n\t\t'data-seek-label',\n\t\tgetSeekControlLabel( seekLabel )\n\t);\n\t// The library formats the current time and duration and interpolates them\n\t// into this translated template for the seek slider's aria-valuetext.\n\tif ( seekValueText ) {\n\t\tcontainer.setAttribute( 'data-seek-value-text', seekValueText );\n\t}\n\tcontainer.setAttribute( 'data-text-color', buttonColor );\n\tcontainer.setAttribute( 'data-text-secondary-color', buttonColor );\n\n\tif ( title ) {\n\t\tcontainer.setAttribute( 'data-title', title );\n\t}\n\tif ( artist ) {\n\t\tcontainer.setAttribute( 'data-artist', artist );\n\t}\n\tif ( artwork ) {\n\t\tcontainer.setAttribute( 'data-artwork', artwork );\n\t}\n\treturn container;\n}\n\n/**\n * Apply custom styles to a generated waveform player.\n *\n * @param {Element} container                 - The generated player container.\n * @param {Object}  styles                    - The player styles.\n * @param {string}  styles.backgroundColor    - The waveform area background color.\n * @param {string}  styles.backgroundGradient - The waveform area background gradient.\n * @param {string}  styles.textColor          - The player text color.\n * @param {string}  styles.playButtonColor    - The play button color.\n * @param {string}  styles.playButtonGradient - The play button gradient.\n */\nexport function applyWaveformPlayerStyles(\n\tcontainer,\n\t{\n\t\tbackgroundColor,\n\t\tbackgroundGradient,\n\t\ttextColor,\n\t\tplayButtonColor,\n\t\tplayButtonGradient,\n\t} = {}\n) {\n\tconst waveformContainer = container.querySelector( '.waveform-container' );\n\tconst playButton = container.querySelector( '.waveform-btn' );\n\tconst playButtonBaseColor = getRepresentativeColor(\n\t\tgetResolvedGradientStops( container, playButtonGradient ) ||\n\t\t\tplayButtonColor\n\t);\n\n\tif ( playButtonBaseColor ) {\n\t\tcontainer.style.setProperty(\n\t\t\t'--wfp-button-color',\n\t\t\tplayButtonBaseColor\n\t\t);\n\t} else {\n\t\tcontainer.style.removeProperty( '--wfp-button-color' );\n\t}\n\n\tif ( textColor ) {\n\t\tcontainer.style.setProperty( '--wfp-text-color', textColor );\n\t\tcontainer.style.setProperty( '--wfp-text-secondary-color', textColor );\n\t} else {\n\t\tcontainer.style.removeProperty( '--wfp-text-color' );\n\t\tcontainer.style.removeProperty( '--wfp-text-secondary-color' );\n\t}\n\n\tif ( playButton ) {\n\t\tif ( playButtonGradient ) {\n\t\t\tplayButton.style.background = playButtonGradient;\n\t\t} else {\n\t\t\tplayButton.style.removeProperty( 'background' );\n\t\t}\n\t}\n\n\tif ( waveformContainer ) {\n\t\tif ( backgroundGradient ) {\n\t\t\twaveformContainer.style.background = backgroundGradient;\n\t\t} else if ( backgroundColor ) {\n\t\t\twaveformContainer.style.removeProperty( 'background' );\n\t\t\twaveformContainer.style.backgroundColor = backgroundColor;\n\t\t} else {\n\t\t\twaveformContainer.style.removeProperty( 'background' );\n\t\t\twaveformContainer.style.removeProperty( 'background-color' );\n\t\t}\n\t}\n}\n\n/**\n * Apply contrasting color to SVG icon paths for visibility.\n * The icons should contrast with the button background.\n *\n * @param {Element} container   - The waveform container element.\n * @param {string}  buttonColor - The button background color.\n */\nexport function styleSvgIcons( container, buttonColor ) {\n\t// Compute a contrasting color for the icons based on button brightness.\n\tconst isButtonDark = colord( buttonColor ).isDark();\n\tconst iconColor = isButtonDark ? '#ffffff' : '#000000';\n\n\tconst svgPaths = container.querySelectorAll( 'svg path' );\n\tsvgPaths.forEach( ( path ) => {\n\t\tpath.style.fill = iconColor;\n\t} );\n}\n\n/**\n * Set up play button accessibility: aria-label that toggles on play/pause.\n *\n * @param {Element} container    - The waveform container element.\n * @param {Object}  labels       - Button labels.\n * @param {string}  labels.play  - Label for the play state.\n * @param {string}  labels.pause - Label for the pause state.\n */\nexport function setupPlayButtonAccessibility(\n\tcontainer,\n\t{ play: playLabel = 'Play', pause: pauseLabel = 'Pause' } = {}\n) {\n\tconst playBtn = container.querySelector( '.waveform-btn' );\n\tif ( ! playBtn ) {\n\t\treturn;\n\t}\n\n\tplayBtn.setAttribute( 'aria-label', playLabel );\n\n\tconst onPlay = () => playBtn.setAttribute( 'aria-label', pauseLabel );\n\tconst onPause = () => playBtn.setAttribute( 'aria-label', playLabel );\n\n\tcontainer.addEventListener( 'waveformplayer:play', onPlay );\n\tcontainer.addEventListener( 'waveformplayer:pause', onPause );\n\tcontainer.addEventListener( 'waveformplayer:ended', onPause );\n\n\treturn () => {\n\t\tcontainer.removeEventListener( 'waveformplayer:play', onPlay );\n\t\tcontainer.removeEventListener( 'waveformplayer:pause', onPause );\n\t\tcontainer.removeEventListener( 'waveformplayer:ended', onPause );\n\t};\n}\n\n/**\n * Get the accessible label for the waveform seek control.\n *\n * @param {string} label - Accessible label for the seek control.\n * @return {string} The provided label or translated fallback.\n */\nfunction getSeekControlLabel( label ) {\n\treturn label || DEFAULT_SEEK_LABEL;\n}\n\n/**\n * Update the waveform seek control label.\n *\n * @param {Object} instance - The WaveformPlayer instance.\n * @param {string} label    - Accessible label for the seek control.\n */\nexport function updateSeekControlLabel( instance, label ) {\n\tconst seekLabel = getSeekControlLabel( label );\n\tinstance.options.seekLabel = seekLabel;\n\tinstance.applySeekLabel?.( seekLabel );\n\n\tconst seekControl = instance?.container?.querySelector(\n\t\t'.waveform-container'\n\t);\n\n\tif ( seekControl ) {\n\t\tseekControl.setAttribute( 'aria-label', seekLabel );\n\t}\n}\n\n/**\n * Show the current artwork as the play button background.\n *\n * @param {Element} container  - The waveform player container element.\n * @param {string}  artworkUrl - The track image URL.\n */\nexport function setupPlayButtonArtwork( container, artworkUrl ) {\n\tif ( ! artworkUrl ) {\n\t\tcontainer.classList.remove( 'has-play-button-artwork' );\n\t\tcontainer.style.removeProperty( '--wp--playlist--play-button-artwork' );\n\t\treturn;\n\t}\n\n\tcontainer.classList.add( 'has-play-button-artwork' );\n\tcontainer.style.setProperty(\n\t\t'--wp--playlist--play-button-artwork',\n\t\t`url(${ JSON.stringify( artworkUrl ) })`\n\t);\n}\n\n/**\n * Log play errors, filtering out expected AbortError.\n *\n * @param {Error} error - The error from play().\n */\nexport function logPlayError( error ) {\n\t// The browser throws AbortError when a play() promise is interrupted\n\t// by a subsequent pause() or a new audio source load (track change).\n\t// This is normal during rapid user interaction and safe to ignore.\n\tif ( error.name === 'AbortError' ) {\n\t\treturn;\n\t}\n\t// eslint-disable-next-line no-console\n\tconsole.error( 'Playlist play error:', error );\n}\n\n/**\n * Initialize a WaveformPlayer instance on an element.\n *\n * This is the shared core logic used by both the React component (editor)\n * and the Interactivity API (frontend).\n *\n * @param {Element}  element                       - The container element (must be in DOM).\n * @param {Object}   options                       - Configuration options.\n * @param {string}   options.src                   - The audio file URL.\n * @param {string}   options.title                 - The track title.\n * @param {string}   options.artist                - The artist name.\n * @param {string}   options.image                 - The track image URL.\n * @param {string}   options.imageAlt              - The track image alt text.\n * @param {string}   options.waveformColor         - The waveform color.\n * @param {string}   options.waveformGradient      - The waveform gradient.\n * @param {string}   options.textColor             - The player text color.\n * @param {string}   options.backgroundColor       - The player background color.\n * @param {string}   options.backgroundGradient    - The player background gradient.\n * @param {boolean}  options.autoPlay              - Whether to auto-play when ready.\n * @param {Function} options.onEnded               - Callback when track ends.\n * @param {Object}   options.labels                - Translated button labels.\n * @param {string}   options.waveformStyle         - Waveform style (bars, mirror, line, blocks, dots, seekbar).\n * @param {boolean}  options.showPlayButtonArtwork - Whether to show artwork on the play button.\n * @return {Object} Object with instance, container, and destroy function.\n */\nexport function initWaveformPlayer(\n\telement,\n\t{\n\t\tsrc,\n\t\ttitle,\n\t\tartist,\n\t\timage,\n\t\timageAlt,\n\t\twaveformColor: waveformColorValue,\n\t\twaveformGradient: waveformGradientValue,\n\t\ttextColor: textColorValue,\n\t\tbackgroundColor,\n\t\tbackgroundGradient,\n\t\tautoPlay,\n\t\tonEnded,\n\t\tlabels,\n\t\twaveformStyle,\n\t\tshowPlayButtonArtwork = false,\n\t}\n) {\n\tconst playerArtwork = showPlayButtonArtwork ? undefined : image;\n\n\t// Get colors from computed styles.\n\tconst { textColor, waveformColor, progressColor, waveformGradient } =\n\t\tgetWaveformColors(\n\t\t\telement,\n\t\t\twaveformColorValue,\n\t\t\ttextColorValue,\n\t\t\twaveformGradientValue\n\t\t);\n\tconst waveformGradientStops = getResolvedGradientStops(\n\t\telement,\n\t\twaveformGradientValue\n\t);\n\tconst waveformButtonColor = getRepresentativeColor(\n\t\twaveformGradientStops || waveformColorValue\n\t);\n\n\t// Create the waveform container.\n\tconst container = createWaveformContainer( {\n\t\turl: src,\n\t\ttitle,\n\t\tartist,\n\t\tartwork: playerArtwork,\n\t\twaveformColor,\n\t\tprogressColor,\n\t\twaveformGradient,\n\t\tbuttonColor: textColor,\n\t\tseekLabel: title || labels?.seek,\n\t\tseekValueText: labels?.seekValueText,\n\t\twaveformStyle,\n\t} );\n\telement.appendChild( container );\n\n\t// Initialize the WaveformPlayer library. The library reads the translated\n\t// seek label and value-text templates from the container's data attributes\n\t// and owns the seek slider's accessible label and value text.\n\tconst instance = new WaveformPlayerLib( container );\n\tif ( instance.artworkEl ) {\n\t\tinstance.artworkEl.alt = imageAlt || '';\n\t}\n\tapplyWaveformPlayerStyles( container, {\n\t\tbackgroundColor,\n\t\tbackgroundGradient,\n\t\ttextColor,\n\t\tplayButtonColor: showPlayButtonArtwork\n\t\t\t? undefined\n\t\t\t: waveformButtonColor,\n\t\tplayButtonGradient: showPlayButtonArtwork\n\t\t\t? undefined\n\t\t\t: waveformGradientValue,\n\t} );\n\n\t// Set up event handlers.\n\tlet cleanupPlayButtonAccessibility;\n\tconst handlers = {\n\t\tready: () => {\n\t\t\tstyleSvgIcons( container, waveformButtonColor || textColor );\n\t\t\tif ( showPlayButtonArtwork ) {\n\t\t\t\tsetupPlayButtonArtwork( container, image );\n\t\t\t}\n\t\t\tcleanupPlayButtonAccessibility = setupPlayButtonAccessibility(\n\t\t\t\tcontainer,\n\t\t\t\tlabels\n\t\t\t);\n\t\t\tif ( autoPlay ) {\n\t\t\t\tinstance.play()?.catch( logPlayError );\n\t\t\t}\n\t\t},\n\t\tended: () => onEnded?.(),\n\t};\n\n\tcontainer.addEventListener( 'waveformplayer:ready', handlers.ready );\n\tcontainer.addEventListener( 'waveformplayer:ended', handlers.ended );\n\n\t// Return instance, container, and cleanup function.\n\treturn {\n\t\tinstance,\n\t\tcontainer,\n\t\tdestroy: () => {\n\t\t\tcleanupPlayButtonAccessibility?.();\n\t\t\tcontainer.removeEventListener(\n\t\t\t\t'waveformplayer:ready',\n\t\t\t\thandlers.ready\n\t\t\t);\n\t\t\tcontainer.removeEventListener(\n\t\t\t\t'waveformplayer:ended',\n\t\t\t\thandlers.ended\n\t\t\t);\n\t\t\tinstance.destroy();\n\t\t\tcontainer.remove();\n\t\t},\n\t};\n}\n"],
   "mappings": ";AAIA,SAAS,cAAc;AACvB,OAAO,uBAAuB;AAM9B,IAAM,0BAA0B;AAChC,IAAM,qBAAqB;AAQ3B,SAAS,iBAAkB,SAAU;AACpC,SAAO,QAAQ,cAAc,YAAY,iBAAkB,OAAQ;AACpE;AAEA,SAAS,yBAA0B,eAAgB;AAClD,QAAM,QAAQ,eAAe,KAAK,EAAE,MAAO,4BAA6B;AACxE,MAAK,CAAE,OAAQ;AACd,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,QAAQ,CAAC;AACf,MAAI,QAAQ;AACZ,MAAI,UAAU;AAEd,aAAY,aAAa,MAAO,CAAE,GAAI;AACrC,QAAK,cAAc,KAAM;AACxB,QAAE;AAAA,IACH,WAAY,cAAc,KAAM;AAC/B,QAAE;AAAA,IACH;AAEA,QAAK,cAAc,OAAO,UAAU,GAAI;AACvC,YAAM,KAAM,QAAQ,KAAK,CAAE;AAC3B,gBAAU;AACV;AAAA,IACD;AAEA,eAAW;AAAA,EACZ;AAEA,MAAK,QAAQ,KAAK,GAAI;AACrB,UAAM,KAAM,QAAQ,KAAK,CAAE;AAAA,EAC5B;AAEA,SAAO;AACR;AAEA,SAAS,wBAAyB,OAAQ;AACzC,QAAM,QAAQ,MAAM,MAAO,aAAc;AACzC,MAAK,CAAE,OAAQ;AACd;AAAA,EACD;AAEA,QAAM,qBAAqB;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,MAAK,CAAE,mBAAmB,SAAU,MAAO,CAAE,EAAE,YAAY,CAAE,GAAI;AAChE;AAAA,EACD;AAEA,MAAI,QAAQ;AACZ,MAAI,0BAA0B;AAC9B,WAAU,QAAQ,GAAG,QAAQ,MAAM,QAAQ,SAAU;AACpD,UAAM,YAAY,MAAO,KAAM;AAC/B,QAAK,cAAc,KAAM;AACxB,gCAA0B;AAC1B,QAAE;AAAA,IACH,WAAY,cAAc,KAAM;AAC/B,QAAE;AAAA,IACH;AAEA,QAAK,2BAA2B,UAAU,GAAI;AAC7C,aAAO,MAAM,MAAO,GAAG,QAAQ,CAAE;AAAA,IAClC;AAAA,EACD;AACD;AAEA,SAAS,kBAAmB,cAAe;AAC1C,QAAM,gBAAgB,wBAAyB,YAAa;AAC5D,MAAK,eAAgB;AACpB,WAAO;AAAA,EACR;AAEA,QAAM,CAAE,aAAc,IAAI,aAAa,MAAO,KAAM;AACpD,MAAK,OAAQ,aAAc,EAAE,QAAQ,GAAI;AACxC,WAAO;AAAA,EACR;AACD;AAEA,SAAS,6BAA8B,eAAgB;AACtD,QAAM,QAAQ,yBAA0B,aAAc;AACtD,QAAM,YAAY,MAAO,CAAE;AAC3B,QAAM,aAAa,WAAW,MAAO,yBAA0B;AAC/D,MAAK,YAAa;AACjB,UAAM,SAAY,OAAQ,WAAY,CAAE,CAAE,IAAI,MAAQ,OAAQ;AAC9D,QAAK,UAAU,MAAM,UAAU,KAAM;AACpC,aAAO;AAAA,IACR;AACA,QAAK,UAAU,KAAK,UAAU,KAAM;AACnC,aAAO;AAAA,IACR;AACA,WAAO;AAAA,EACR;AAEA,MAAK,CAAE,WAAW,WAAY,KAAM,GAAI;AACvC,WAAO;AAAA,EACR;AAEA,QAAM,eAAe,UAAU,YAAY,EAAE,QAAS,UAAU,EAAG;AACnE,QAAM,oBACL,aAAa,SAAU,MAAO,KAAK,aAAa,SAAU,OAAQ;AACnE,QAAM,kBACL,aAAa,SAAU,KAAM,KAAK,aAAa,SAAU,QAAS;AAEnE,MAAK,qBAAqB,iBAAkB;AAC3C,WAAO;AAAA,EACR;AACA,MAAK,mBAAoB;AACxB,WAAO;AAAA,EACR;AACA,MAAK,iBAAkB;AACtB,WAAO;AAAA,EACR;AACD;AAEA,SAAS,kBAAmB,SAAS,YAAa;AACjD,MAAK,CAAE,cAAc,OAAQ,UAAW,EAAE,QAAQ,GAAI;AACrD,WAAO;AAAA,EACR;AAEA,QAAM,gBAAgB,QAAQ,cAAc,cAAe,MAAO;AAClE,gBAAc,MAAM,QAAQ;AAC5B,MAAK,CAAE,cAAc,MAAM,OAAQ;AAClC,WAAO;AAAA,EACR;AACA,UAAQ,YAAa,aAAc;AAEnC,QAAM,gBAAgB,iBAAkB,aAAc,EAAE;AACxD,gBAAc,OAAO;AAErB,SAAO,iBAAiB,OAAQ,aAAc,EAAE,QAAQ,IACrD,gBACA;AACJ;AAEA,SAAS,yBAA0B,SAAS,eAAgB;AAC3D,QAAM,QAAQ,yBAA0B,aAAc,GACnD,IAAK,CAAE,eAAgB,kBAAmB,SAAS,UAAW,CAAE,EACjE,OAAQ,CAAE,eAAgB,OAAQ,UAAW,EAAE,QAAQ,CAAE;AAE3D,SAAO,OAAO,SAAS,IAAI,QAAQ;AACpC;AAEA,SAAS,WAAY,YAAY,OAAQ;AACxC,MAAK,MAAM,QAAS,UAAW,GAAI;AAClC,WAAO,WAAW;AAAA,MAAK,CAAE,UACxB,OAAQ,KAAM,EAAE,MAAO,KAAM,EAAE,YAAY;AAAA,IAC5C;AAAA,EACD;AACA,SAAO,OAAQ,UAAW,EAAE,MAAO,KAAM,EAAE,YAAY;AACxD;AAEA,SAAS,uBAAwB,YAAa;AAC7C,MAAK,MAAM,QAAS,UAAW,GAAI;AAClC,WAAO,WAAY,WAAW,SAAS,CAAE;AAAA,EAC1C;AACA,SAAO;AACR;AAEO,SAAS,yBAA0B,eAAgB;AACzD,QAAM,QAAQ,yBAA0B,aAAc,EACpD,IAAK,iBAAkB,EACvB,OAAQ,OAAQ;AAElB,SAAO,MAAM,SAAS,IAAI,QAAQ;AACnC;AAEA,SAAS,oBAAqB,YAAa;AAC1C,SAAO,MAAM,QAAS,UAAW,IAC9B,KAAK,UAAW,UAAW,IAC3B;AACJ;AAWO,SAAS,kBACf,SACA,oBACA,gBACA,uBACC;AACD,QAAM,YAAY,kBAAkB,iBAAkB,OAAQ,EAAE;AAChE,QAAM,wBAAwB;AAAA,IAC7B;AAAA,IACA;AAAA,EACD;AACA,QAAM,oBACL,yBAAyB,sBAAsB;AAChD,QAAM,gBAAgB,WAAY,mBAAmB,GAAI;AACzD,QAAM,gBAAgB,WAAY,mBAAmB,GAAI;AACzD,QAAM,mBAAmB,wBACtB,6BAA8B,qBAAsB,IACpD;AAEH,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAK,oBAAoB,EAAE,iBAAiB;AAAA,EAC7C;AACD;AAoBO,SAAS,wBAAyB;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AACjB,GAAI;AACH,QAAM,YAAY,SAAS,cAAe,KAAM;AAChD,YAAU,aAAc,wBAAwB,EAAG;AACnD,YAAU,aAAc,YAAY,GAAI;AACxC,YAAU,aAAc,eAAe,OAAQ,MAAO,CAAE;AACxD,YAAU,aAAc,uBAAuB,aAAc;AAC7D,YAAU;AAAA,IACT;AAAA,IACA,oBAAqB,aAAc;AAAA,EACpC;AACA,YAAU;AAAA,IACT;AAAA,IACA,oBAAqB,aAAc;AAAA,EACpC;AACA,MAAK,kBAAmB;AACvB,cAAU,aAAc,0BAA0B,gBAAiB;AAAA,EACpE;AACA,YAAU,aAAc,qBAAqB,WAAY;AACzD,YAAU;AAAA,IACT;AAAA,IACA,oBAAqB,SAAU;AAAA,EAChC;AAGA,MAAK,eAAgB;AACpB,cAAU,aAAc,wBAAwB,aAAc;AAAA,EAC/D;AACA,YAAU,aAAc,mBAAmB,WAAY;AACvD,YAAU,aAAc,6BAA6B,WAAY;AAEjE,MAAK,OAAQ;AACZ,cAAU,aAAc,cAAc,KAAM;AAAA,EAC7C;AACA,MAAK,QAAS;AACb,cAAU,aAAc,eAAe,MAAO;AAAA,EAC/C;AACA,MAAK,SAAU;AACd,cAAU,aAAc,gBAAgB,OAAQ;AAAA,EACjD;AACA,SAAO;AACR;AAaO,SAAS,0BACf,WACA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,IAAI,CAAC,GACJ;AACD,QAAM,oBAAoB,UAAU,cAAe,qBAAsB;AACzE,QAAM,aAAa,UAAU,cAAe,eAAgB;AAC5D,QAAM,sBAAsB;AAAA,IAC3B,yBAA0B,WAAW,kBAAmB,KACvD;AAAA,EACF;AAEA,MAAK,qBAAsB;AAC1B,cAAU,MAAM;AAAA,MACf;AAAA,MACA;AAAA,IACD;AAAA,EACD,OAAO;AACN,cAAU,MAAM,eAAgB,oBAAqB;AAAA,EACtD;AAEA,MAAK,WAAY;AAChB,cAAU,MAAM,YAAa,oBAAoB,SAAU;AAC3D,cAAU,MAAM,YAAa,8BAA8B,SAAU;AAAA,EACtE,OAAO;AACN,cAAU,MAAM,eAAgB,kBAAmB;AACnD,cAAU,MAAM,eAAgB,4BAA6B;AAAA,EAC9D;AAEA,MAAK,YAAa;AACjB,QAAK,oBAAqB;AACzB,iBAAW,MAAM,aAAa;AAAA,IAC/B,OAAO;AACN,iBAAW,MAAM,eAAgB,YAAa;AAAA,IAC/C;AAAA,EACD;AAEA,MAAK,mBAAoB;AACxB,QAAK,oBAAqB;AACzB,wBAAkB,MAAM,aAAa;AAAA,IACtC,WAAY,iBAAkB;AAC7B,wBAAkB,MAAM,eAAgB,YAAa;AACrD,wBAAkB,MAAM,kBAAkB;AAAA,IAC3C,OAAO;AACN,wBAAkB,MAAM,eAAgB,YAAa;AACrD,wBAAkB,MAAM,eAAgB,kBAAmB;AAAA,IAC5D;AAAA,EACD;AACD;AASO,SAAS,cAAe,WAAW,aAAc;AAEvD,QAAM,eAAe,OAAQ,WAAY,EAAE,OAAO;AAClD,QAAM,YAAY,eAAe,YAAY;AAE7C,QAAM,WAAW,UAAU,iBAAkB,UAAW;AACxD,WAAS,QAAS,CAAE,SAAU;AAC7B,SAAK,MAAM,OAAO;AAAA,EACnB,CAAE;AACH;AAUO,SAAS,6BACf,WACA,EAAE,MAAM,YAAY,QAAQ,OAAO,aAAa,QAAQ,IAAI,CAAC,GAC5D;AACD,QAAM,UAAU,UAAU,cAAe,eAAgB;AACzD,MAAK,CAAE,SAAU;AAChB;AAAA,EACD;AAEA,UAAQ,aAAc,cAAc,SAAU;AAE9C,QAAM,SAAS,MAAM,QAAQ,aAAc,cAAc,UAAW;AACpE,QAAM,UAAU,MAAM,QAAQ,aAAc,cAAc,SAAU;AAEpE,YAAU,iBAAkB,uBAAuB,MAAO;AAC1D,YAAU,iBAAkB,wBAAwB,OAAQ;AAC5D,YAAU,iBAAkB,wBAAwB,OAAQ;AAE5D,SAAO,MAAM;AACZ,cAAU,oBAAqB,uBAAuB,MAAO;AAC7D,cAAU,oBAAqB,wBAAwB,OAAQ;AAC/D,cAAU,oBAAqB,wBAAwB,OAAQ;AAAA,EAChE;AACD;AAQA,SAAS,oBAAqB,OAAQ;AACrC,SAAO,SAAS;AACjB;AAQO,SAAS,uBAAwB,UAAU,OAAQ;AACzD,QAAM,YAAY,oBAAqB,KAAM;AAC7C,WAAS,QAAQ,YAAY;AAC7B,WAAS,iBAAkB,SAAU;AAErC,QAAM,cAAc,UAAU,WAAW;AAAA,IACxC;AAAA,EACD;AAEA,MAAK,aAAc;AAClB,gBAAY,aAAc,cAAc,SAAU;AAAA,EACnD;AACD;AAQO,SAAS,uBAAwB,WAAW,YAAa;AAC/D,MAAK,CAAE,YAAa;AACnB,cAAU,UAAU,OAAQ,yBAA0B;AACtD,cAAU,MAAM,eAAgB,qCAAsC;AACtE;AAAA,EACD;AAEA,YAAU,UAAU,IAAK,yBAA0B;AACnD,YAAU,MAAM;AAAA,IACf;AAAA,IACA,OAAQ,KAAK,UAAW,UAAW,CAAE;AAAA,EACtC;AACD;AAOO,SAAS,aAAc,OAAQ;AAIrC,MAAK,MAAM,SAAS,cAAe;AAClC;AAAA,EACD;AAEA,UAAQ,MAAO,wBAAwB,KAAM;AAC9C;AA2BO,SAAS,mBACf,SACA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AACzB,GACC;AACD,QAAM,gBAAgB,wBAAwB,SAAY;AAG1D,QAAM,EAAE,WAAW,eAAe,eAAe,iBAAiB,IACjE;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD,QAAM,wBAAwB;AAAA,IAC7B;AAAA,IACA;AAAA,EACD;AACA,QAAM,sBAAsB;AAAA,IAC3B,yBAAyB;AAAA,EAC1B;AAGA,QAAM,YAAY,wBAAyB;AAAA,IAC1C,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb,WAAW,SAAS,QAAQ;AAAA,IAC5B,eAAe,QAAQ;AAAA,IACvB;AAAA,EACD,CAAE;AACF,UAAQ,YAAa,SAAU;AAK/B,QAAM,WAAW,IAAI,kBAAmB,SAAU;AAClD,MAAK,SAAS,WAAY;AACzB,aAAS,UAAU,MAAM,YAAY;AAAA,EACtC;AACA,4BAA2B,WAAW;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB,wBACd,SACA;AAAA,IACH,oBAAoB,wBACjB,SACA;AAAA,EACJ,CAAE;AAGF,MAAI;AACJ,QAAM,WAAW;AAAA,IAChB,OAAO,MAAM;AACZ,oBAAe,WAAW,uBAAuB,SAAU;AAC3D,UAAK,uBAAwB;AAC5B,+BAAwB,WAAW,KAAM;AAAA,MAC1C;AACA,uCAAiC;AAAA,QAChC;AAAA,QACA;AAAA,MACD;AACA,UAAK,UAAW;AACf,iBAAS,KAAK,GAAG,MAAO,YAAa;AAAA,MACtC;AAAA,IACD;AAAA,IACA,OAAO,MAAM,UAAU;AAAA,EACxB;AAEA,YAAU,iBAAkB,wBAAwB,SAAS,KAAM;AACnE,YAAU,iBAAkB,wBAAwB,SAAS,KAAM;AAGnE,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA,SAAS,MAAM;AACd,uCAAiC;AACjC,gBAAU;AAAA,QACT;AAAA,QACA,SAAS;AAAA,MACV;AACA,gBAAU;AAAA,QACT;AAAA,QACA,SAAS;AAAA,MACV;AACA,eAAS,QAAQ;AACjB,gBAAU,OAAO;AAAA,IAClB;AAAA,EACD;AACD;",
   "names": []
 }

package/build-module/verse/block.json

@@ -37,6 +37,7 @@
 		},
 		"dimensions": {
 			"minHeight": true,
+			"minWidth": true,
 			"__experimentalDefaultControls": {
 				"minHeight": false
 			}
@@ -46,12 +47,15 @@
 			"__experimentalFontFamily": true,
 			"lineHeight": true,
 			"textAlign": true,
+			"textColumns": true,
+			"textIndent": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalTextTransform": true,
 			"__experimentalTextDecoration": true,
 			"__experimentalWritingMode": true,
+			"fitText": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/build-module/video/block.json

@@ -91,6 +91,9 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"filter": {
+			"duotone": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true,
@@ -107,7 +110,10 @@
 		}
 	},
 	"selectors": {
-		"shadow": ".wp-block-video video"
+		"shadow": ".wp-block-video video",
+		"filter": {
+			"duotone": ".wp-block-video video"
+		}
 	},
 	"editorStyle": "wp-block-video-editor",
 	"style": "wp-block-video"

package/build-module/video/edit.mjs

@@ -17,7 +17,9 @@ import {
   __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles
 } from "@wordpress/block-editor";
 import { useRef, useEffect, useState } from "@wordpress/element";
+import { useReducedMotion } from "@wordpress/compose";
 import { __ } from "@wordpress/i18n";
+import { inertValue } from "@wordpress/react-inert-value";
 import { useDispatch } from "@wordpress/data";
 import { video as icon } from "@wordpress/icons";
 import { store as noticesStore } from "@wordpress/notices";
@@ -65,6 +67,7 @@ function VideoEdit({
   const dropdownMenuProps = useToolsPanelDropdownMenuProps();
   const blockEditingMode = useBlockEditingMode();
   const hasNonContentControls = blockEditingMode === "default";
+  const prefersReducedMotion = useReducedMotion();
   useUploadMediaFromBlobURL({
     url: temporaryURL,
     allowedTypes: ALLOWED_MEDIA_TYPES,
@@ -76,6 +79,11 @@ function VideoEdit({
       videoPlayer.current.load();
     }
   }, [poster]);
+  useEffect(() => {
+    if (prefersReducedMotion) {
+      videoPlayer.current?.pause();
+    }
+  }, [prefersReducedMotion]);
   function onSelectVideo(media) {
     if (!media || !media.url) {
       setAttributes({
@@ -227,11 +235,11 @@ function VideoEdit({
         "video",
         {
           controls,
-          inert: !isSingleSelected ? "true" : void 0,
+          inert: inertValue(!isSingleSelected),
           poster,
           src: src || temporaryURL,
           ref: videoPlayer,
-          autoPlay: autoplay,
+          autoPlay: autoplay && !prefersReducedMotion,
           loop,
           muted,
           playsInline,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/video/edit.jsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { isBlobURL } from '@wordpress/blob';\nimport {\n\tSpinner,\n\tPlaceholder,\n\t__experimentalToolsPanel as ToolsPanel,\n} from '@wordpress/components';\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tInspectorControls,\n\tMediaPlaceholder,\n\tMediaReplaceFlow,\n\tuseBlockProps,\n\tuseBlockEditingMode,\n\t__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,\n} from '@wordpress/block-editor';\nimport { useRef, useEffect, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch } from '@wordpress/data';\nimport { video as icon } from '@wordpress/icons';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { prependHTTPS } from '@wordpress/url';\nimport { createUpgradedEmbedBlock } from '../embed/util';\nimport {\n\tuseUploadMediaFromBlobURL,\n\tuseToolsPanelDropdownMenuProps,\n} from '../utils/hooks';\nimport VideoCommonSettings from './edit-common-settings';\nimport TracksEditor from './tracks-editor';\nimport Tracks from './tracks';\nimport { Caption } from '../utils/caption';\nimport PosterImage from '../utils/poster-image';\n\nconst ALLOWED_MEDIA_TYPES = [ 'video' ];\n\nfunction VideoEdit( {\n\tisSelected: isSingleSelected,\n\tattributes,\n\tclassName,\n\tsetAttributes,\n\tinsertBlocksAfter,\n\tonReplace,\n} ) {\n\tconst videoPlayer = useRef();\n\tconst {\n\t\tid,\n\t\tcontrols,\n\t\tposter,\n\t\tsrc,\n\t\ttracks,\n\t\twidth,\n\t\theight,\n\t\tautoplay,\n\t\tloop,\n\t\tmuted,\n\t\tplaysInline,\n\t} = attributes;\n\t// Give the <video> an explicit (non-`auto`) aspect ratio derived from the\n\t// stored dimensions. The width/height attributes alone only yield\n\t// `aspect-ratio: auto W/H`, whose `auto` keyword defers to the element's\n\t// natural ratio while the poster/metadata load - during which Chrome briefly\n\t// computes a runaway height (tens of thousands of pixels) before settling.\n\t// That spike is what reads as a duplicated image during the GIF-to-video\n\t// swap. A non-`auto` ratio governs the box height throughout the load.\n\tconst aspectRatio =\n\t\twidth && height ? `${ width } / ${ height }` : undefined;\n\tconst videoStyle = {\n\t\t...( aspectRatio && { aspectRatio } ),\n\t\t...getShadowClassesAndStyles( attributes ).style,\n\t};\n\tconst [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst blockEditingMode = useBlockEditingMode();\n\tconst hasNonContentControls = blockEditingMode === 'default';\n\n\tuseUploadMediaFromBlobURL( {\n\t\turl: temporaryURL,\n\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\tonChange: onSelectVideo,\n\t\tonError: onUploadError,\n\t} );\n\n\tuseEffect( () => {\n\t\t// Placeholder may be rendered.\n\t\tif ( videoPlayer.current ) {\n\t\t\tvideoPlayer.current.load();\n\t\t}\n\t}, [ poster ] );\n\t// TODO: Whether the video was obtained from the media library or was provided by URL, obtain the `videoWidth` and `videoHeight` of the video once its metadata has loaded and persist in the block attributes.\n\tfunction onSelectVideo( media ) {\n\t\tif ( ! media || ! media.url ) {\n\t\t\t// In this case there was an error\n\t\t\t// previous attributes should be removed\n\t\t\t// because they may be temporary blob urls.\n\t\t\tsetAttributes( {\n\t\t\t\tsrc: undefined,\n\t\t\t\tid: undefined,\n\t\t\t\tposter: undefined,\n\t\t\t\tcaption: undefined,\n\t\t\t\tblob: undefined,\n\t\t\t} );\n\t\t\tsetTemporaryURL();\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\tsetTemporaryURL( media.url );\n\t\t\treturn;\n\t\t}\n\n\t\t// Sets the block's attribute and updates the edit component from the\n\t\t// selected media.\n\t\tsetAttributes( {\n\t\t\tblob: undefined,\n\t\t\tsrc: media.url,\n\t\t\tid: media.id,\n\t\t\tposter:\n\t\t\t\tmedia.image?.src !== media.icon ? media.image?.src : undefined,\n\t\t\tcaption: media.caption,\n\t\t} );\n\t\tsetTemporaryURL();\n\t}\n\n\tfunction onSelectURL( newSrc ) {\n\t\tif ( newSrc !== src ) {\n\t\t\tconst url = prependHTTPS( newSrc );\n\t\t\t// Check if there's an embed block that handles this URL.\n\t\t\tconst embedBlock = createUpgradedEmbedBlock( {\n\t\t\t\tattributes: { url },\n\t\t\t} );\n\t\t\tif ( undefined !== embedBlock && onReplace ) {\n\t\t\t\tonReplace( embedBlock );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetAttributes( {\n\t\t\t\tblob: undefined,\n\t\t\t\tsrc: url,\n\t\t\t\tid: undefined,\n\t\t\t\tposter: undefined,\n\t\t\t} );\n\t\t\tsetTemporaryURL();\n\t\t}\n\t}\n\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tfunction onUploadError( message ) {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t}\n\n\t// Much of this description is duplicated from MediaPlaceholder.\n\tconst placeholder = ( content ) => {\n\t\treturn (\n\t\t\t<Placeholder\n\t\t\t\tclassName=\"block-editor-media-placeholder\"\n\t\t\t\twithIllustration={ ! isSingleSelected }\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={ __( 'Video' ) }\n\t\t\t\tinstructions={ __(\n\t\t\t\t\t'Drag and drop a video, upload, or choose from your library.'\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t{ content }\n\t\t\t</Placeholder>\n\t\t);\n\t};\n\n\tconst classes = clsx( className, {\n\t\t'is-transient': !! temporaryURL,\n\t} );\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classes,\n\t} );\n\n\tif ( ! src && ! temporaryURL ) {\n\t\treturn (\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<MediaPlaceholder\n\t\t\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\t\t\tonSelect={ onSelectVideo }\n\t\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\t\taccept=\"video/*\"\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tvalue={ attributes }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t\tplaceholder={ placeholder }\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{ isSingleSelected && (\n\t\t\t\t<>\n\t\t\t\t\t<BlockControls>\n\t\t\t\t\t\t<TracksEditor\n\t\t\t\t\t\t\ttracks={ tracks }\n\t\t\t\t\t\t\tonChange={ ( newTracks ) => {\n\t\t\t\t\t\t\t\tsetAttributes( { tracks: newTracks } );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BlockControls>\n\t\t\t\t\t<BlockControls group=\"other\">\n\t\t\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\t\t\tmediaId={ id }\n\t\t\t\t\t\t\tmediaURL={ src }\n\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\taccept=\"video/*\"\n\t\t\t\t\t\t\tonSelect={ onSelectVideo }\n\t\t\t\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t\t\t\tonReset={ () => onSelectVideo( undefined ) }\n\t\t\t\t\t\t\tvariant=\"toolbar\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BlockControls>\n\t\t\t\t</>\n\t\t\t) }\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\tautoplay: false,\n\t\t\t\t\t\t\tcontrols: true,\n\t\t\t\t\t\t\tloop: false,\n\t\t\t\t\t\t\tmuted: false,\n\t\t\t\t\t\t\tplaysInline: false,\n\t\t\t\t\t\t\tpreload: 'metadata',\n\t\t\t\t\t\t\tposter: undefined,\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<VideoCommonSettings\n\t\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\t/>\n\t\t\t\t\t<PosterImage\n\t\t\t\t\t\tposter={ poster }\n\t\t\t\t\t\tonChange={ ( posterImage ) =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tposter: posterImage?.url,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t\t<figure { ...blockProps }>\n\t\t\t\t<video\n\t\t\t\t\tcontrols={ controls }\n\t\t\t\t\tinert={ ! isSingleSelected ? 'true' : undefined }\n\t\t\t\t\tposter={ poster }\n\t\t\t\t\tsrc={ src || temporaryURL }\n\t\t\t\t\tref={ videoPlayer }\n\t\t\t\t\tautoPlay={ autoplay }\n\t\t\t\t\tloop={ loop }\n\t\t\t\t\tmuted={ muted }\n\t\t\t\t\tplaysInline={ playsInline }\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ height }\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tObject.keys( videoStyle ).length\n\t\t\t\t\t\t\t? videoStyle\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Tracks tracks={ tracks } />\n\t\t\t\t</video>\n\t\t\t\t{ !! temporaryURL && <Spinner /> }\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={ isSingleSelected }\n\t\t\t\t\tinsertBlocksAfter={ insertBlocksAfter }\n\t\t\t\t\tlabel={ __( 'Video caption text' ) }\n\t\t\t\t\tshowToolbarButton={\n\t\t\t\t\t\tisSingleSelected && hasNonContentControls\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</figure>\n\t\t</>\n\t);\n}\n\nexport default VideoEdit;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isBlobURL } from '@wordpress/blob';\nimport {\n\tSpinner,\n\tPlaceholder,\n\t__experimentalToolsPanel as ToolsPanel,\n} from '@wordpress/components';\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tInspectorControls,\n\tMediaPlaceholder,\n\tMediaReplaceFlow,\n\tuseBlockProps,\n\tuseBlockEditingMode,\n\t__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,\n} from '@wordpress/block-editor';\nimport { useRef, useEffect, useState } from '@wordpress/element';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { inertValue } from '@wordpress/react-inert-value';\nimport { useDispatch } from '@wordpress/data';\nimport { video as icon } from '@wordpress/icons';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { prependHTTPS } from '@wordpress/url';\nimport { createUpgradedEmbedBlock } from '../embed/util';\nimport {\n\tuseUploadMediaFromBlobURL,\n\tuseToolsPanelDropdownMenuProps,\n} from '../utils/hooks';\nimport VideoCommonSettings from './edit-common-settings';\nimport TracksEditor from './tracks-editor';\nimport Tracks from './tracks';\nimport { Caption } from '../utils/caption';\nimport PosterImage from '../utils/poster-image';\n\nconst ALLOWED_MEDIA_TYPES = [ 'video' ];\n\nfunction VideoEdit( {\n\tisSelected: isSingleSelected,\n\tattributes,\n\tclassName,\n\tsetAttributes,\n\tinsertBlocksAfter,\n\tonReplace,\n} ) {\n\tconst videoPlayer = useRef();\n\tconst {\n\t\tid,\n\t\tcontrols,\n\t\tposter,\n\t\tsrc,\n\t\ttracks,\n\t\twidth,\n\t\theight,\n\t\tautoplay,\n\t\tloop,\n\t\tmuted,\n\t\tplaysInline,\n\t} = attributes;\n\t// Give the <video> an explicit (non-`auto`) aspect ratio derived from the\n\t// stored dimensions. The width/height attributes alone only yield\n\t// `aspect-ratio: auto W/H`, whose `auto` keyword defers to the element's\n\t// natural ratio while the poster/metadata load - during which Chrome briefly\n\t// computes a runaway height (tens of thousands of pixels) before settling.\n\t// That spike is what reads as a duplicated image during the GIF-to-video\n\t// swap. A non-`auto` ratio governs the box height throughout the load.\n\tconst aspectRatio =\n\t\twidth && height ? `${ width } / ${ height }` : undefined;\n\tconst videoStyle = {\n\t\t...( aspectRatio && { aspectRatio } ),\n\t\t...getShadowClassesAndStyles( attributes ).style,\n\t};\n\tconst [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst blockEditingMode = useBlockEditingMode();\n\tconst hasNonContentControls = blockEditingMode === 'default';\n\tconst prefersReducedMotion = useReducedMotion();\n\n\tuseUploadMediaFromBlobURL( {\n\t\turl: temporaryURL,\n\t\tallowedTypes: ALLOWED_MEDIA_TYPES,\n\t\tonChange: onSelectVideo,\n\t\tonError: onUploadError,\n\t} );\n\n\tuseEffect( () => {\n\t\t// Placeholder may be rendered.\n\t\tif ( videoPlayer.current ) {\n\t\t\tvideoPlayer.current.load();\n\t\t}\n\t}, [ poster ] );\n\n\t// `autoPlay` only applies when the video loads, so pause a video that is\n\t// already playing when the user turns on reduced motion.\n\tuseEffect( () => {\n\t\tif ( prefersReducedMotion ) {\n\t\t\tvideoPlayer.current?.pause();\n\t\t}\n\t}, [ prefersReducedMotion ] );\n\t// TODO: Whether the video was obtained from the media library or was provided by URL, obtain the `videoWidth` and `videoHeight` of the video once its metadata has loaded and persist in the block attributes.\n\tfunction onSelectVideo( media ) {\n\t\tif ( ! media || ! media.url ) {\n\t\t\t// In this case there was an error\n\t\t\t// previous attributes should be removed\n\t\t\t// because they may be temporary blob urls.\n\t\t\tsetAttributes( {\n\t\t\t\tsrc: undefined,\n\t\t\t\tid: undefined,\n\t\t\t\tposter: undefined,\n\t\t\t\tcaption: undefined,\n\t\t\t\tblob: undefined,\n\t\t\t} );\n\t\t\tsetTemporaryURL();\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\tsetTemporaryURL( media.url );\n\t\t\treturn;\n\t\t}\n\n\t\t// Sets the block's attribute and updates the edit component from the\n\t\t// selected media.\n\t\tsetAttributes( {\n\t\t\tblob: undefined,\n\t\t\tsrc: media.url,\n\t\t\tid: media.id,\n\t\t\tposter:\n\t\t\t\tmedia.image?.src !== media.icon ? media.image?.src : undefined,\n\t\t\tcaption: media.caption,\n\t\t} );\n\t\tsetTemporaryURL();\n\t}\n\n\tfunction onSelectURL( newSrc ) {\n\t\tif ( newSrc !== src ) {\n\t\t\tconst url = prependHTTPS( newSrc );\n\t\t\t// Check if there's an embed block that handles this URL.\n\t\t\tconst embedBlock = createUpgradedEmbedBlock( {\n\t\t\t\tattributes: { url },\n\t\t\t} );\n\t\t\tif ( undefined !== embedBlock && onReplace ) {\n\t\t\t\tonReplace( embedBlock );\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetAttributes( {\n\t\t\t\tblob: undefined,\n\t\t\t\tsrc: url,\n\t\t\t\tid: undefined,\n\t\t\t\tposter: undefined,\n\t\t\t} );\n\t\t\tsetTemporaryURL();\n\t\t}\n\t}\n\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tfunction onUploadError( message ) {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t}\n\n\t// Much of this description is duplicated from MediaPlaceholder.\n\tconst placeholder = ( content ) => {\n\t\treturn (\n\t\t\t<Placeholder\n\t\t\t\tclassName=\"block-editor-media-placeholder\"\n\t\t\t\twithIllustration={ ! isSingleSelected }\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={ __( 'Video' ) }\n\t\t\t\tinstructions={ __(\n\t\t\t\t\t'Drag and drop a video, upload, or choose from your library.'\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t{ content }\n\t\t\t</Placeholder>\n\t\t);\n\t};\n\n\tconst classes = clsx( className, {\n\t\t'is-transient': !! temporaryURL,\n\t} );\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: classes,\n\t} );\n\n\tif ( ! src && ! temporaryURL ) {\n\t\treturn (\n\t\t\t<div { ...blockProps }>\n\t\t\t\t<MediaPlaceholder\n\t\t\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\t\t\tonSelect={ onSelectVideo }\n\t\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\t\taccept=\"video/*\"\n\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\tvalue={ attributes }\n\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t\tplaceholder={ placeholder }\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{ isSingleSelected && (\n\t\t\t\t<>\n\t\t\t\t\t<BlockControls>\n\t\t\t\t\t\t<TracksEditor\n\t\t\t\t\t\t\ttracks={ tracks }\n\t\t\t\t\t\t\tonChange={ ( newTracks ) => {\n\t\t\t\t\t\t\t\tsetAttributes( { tracks: newTracks } );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BlockControls>\n\t\t\t\t\t<BlockControls group=\"other\">\n\t\t\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\t\t\tmediaId={ id }\n\t\t\t\t\t\t\tmediaURL={ src }\n\t\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\t\taccept=\"video/*\"\n\t\t\t\t\t\t\tonSelect={ onSelectVideo }\n\t\t\t\t\t\t\tonSelectURL={ onSelectURL }\n\t\t\t\t\t\t\tonError={ onUploadError }\n\t\t\t\t\t\t\tonReset={ () => onSelectVideo( undefined ) }\n\t\t\t\t\t\t\tvariant=\"toolbar\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</BlockControls>\n\t\t\t\t</>\n\t\t\t) }\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\tautoplay: false,\n\t\t\t\t\t\t\tcontrols: true,\n\t\t\t\t\t\t\tloop: false,\n\t\t\t\t\t\t\tmuted: false,\n\t\t\t\t\t\t\tplaysInline: false,\n\t\t\t\t\t\t\tpreload: 'metadata',\n\t\t\t\t\t\t\tposter: undefined,\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<VideoCommonSettings\n\t\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\t/>\n\t\t\t\t\t<PosterImage\n\t\t\t\t\t\tposter={ poster }\n\t\t\t\t\t\tonChange={ ( posterImage ) =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tposter: posterImage?.url,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t\t<figure { ...blockProps }>\n\t\t\t\t<video\n\t\t\t\t\tcontrols={ controls }\n\t\t\t\t\tinert={ inertValue( ! isSingleSelected ) }\n\t\t\t\t\tposter={ poster }\n\t\t\t\t\tsrc={ src || temporaryURL }\n\t\t\t\t\tref={ videoPlayer }\n\t\t\t\t\tautoPlay={ autoplay && ! prefersReducedMotion }\n\t\t\t\t\tloop={ loop }\n\t\t\t\t\tmuted={ muted }\n\t\t\t\t\tplaysInline={ playsInline }\n\t\t\t\t\twidth={ width }\n\t\t\t\t\theight={ height }\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tObject.keys( videoStyle ).length\n\t\t\t\t\t\t\t? videoStyle\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<Tracks tracks={ tracks } />\n\t\t\t\t</video>\n\t\t\t\t{ !! temporaryURL && <Spinner /> }\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={ isSingleSelected }\n\t\t\t\t\tinsertBlocksAfter={ insertBlocksAfter }\n\t\t\t\t\tlabel={ __( 'Video caption text' ) }\n\t\t\t\t\tshowToolbarButton={\n\t\t\t\t\t\tisSingleSelected && hasNonContentControls\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</figure>\n\t\t</>\n\t);\n}\n\nexport default VideoEdit;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-style/avatar/editor-rtl.css

@@ -4,4 +4,8 @@
 
 .wp-block-avatar.aligncenter .components-resizable-box__container {
   margin: 0 auto;
+}
+
+.wp-block-avatar__help-text {
+  grid-column: 1/-1;
 }

package/build-style/avatar/editor.css

@@ -4,4 +4,8 @@
 
 .wp-block-avatar.aligncenter .components-resizable-box__container {
   margin: 0 auto;
+}
+
+.wp-block-avatar__help-text {
+  grid-column: 1/-1;
 }

package/build-style/comments-pagination/style-rtl.css

@@ -1,3 +1,6 @@
+.wp-block-comments-pagination {
+  box-sizing: border-box;
+}
 .wp-block-comments-pagination > .wp-block-comments-pagination-next,
 .wp-block-comments-pagination > .wp-block-comments-pagination-previous,
 .wp-block-comments-pagination > .wp-block-comments-pagination-numbers {

package/build-style/comments-pagination/style.css

@@ -1,3 +1,6 @@
+.wp-block-comments-pagination {
+  box-sizing: border-box;
+}
 .wp-block-comments-pagination > .wp-block-comments-pagination-next,
 .wp-block-comments-pagination > .wp-block-comments-pagination-previous,
 .wp-block-comments-pagination > .wp-block-comments-pagination-numbers {

package/build-style/common-rtl.css

@@ -98,6 +98,21 @@
   --wp-block-synced-color--rgb: 122, 0, 223;
   --wp-bound-block-color: var(--wp-block-synced-color);
   --wp-editor-canvas-background: #ddd;
+  --wp-admin-theme-color: #3858e9;
+  --wp-admin-theme-color--rgb: 56, 88, 233;
+  --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
+  --wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
+  --wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
+  --wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
+  --wp-admin-border-width-focus: 2px;
+}
+@media (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
+body.admin-color-fresh {
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
   --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
@@ -107,7 +122,7 @@
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
-  :root {
+  body.admin-color-fresh {
     --wp-admin-border-width-focus: 1.5px;
   }
 }
@@ -344,4 +359,20 @@ html :where(.is-position-sticky) {
   html :where(.is-position-sticky) {
     --wp-admin--admin-bar--position-offset: 0px;
   }
+}
+@supports (not (-webkit-backdrop-filter: blur(1px))) and (not (-moz-appearance: none)) {
+  mtd[columnalign=right] {
+    text-align: -webkit-right;
+  }
+  mtd[columnalign=left] {
+    text-align: -webkit-left;
+  }
+  menclose[notation~=top] {
+    padding-top: 0.1em;
+    border-top: 0.065em solid;
+  }
+  menclose[notation~=bottom] {
+    padding-bottom: 0.1em;
+    border-bottom: 0.065em solid;
+  }
 }

package/build-style/common.css

@@ -98,6 +98,21 @@
   --wp-block-synced-color--rgb: 122, 0, 223;
   --wp-bound-block-color: var(--wp-block-synced-color);
   --wp-editor-canvas-background: #ddd;
+  --wp-admin-theme-color: #3858e9;
+  --wp-admin-theme-color--rgb: 56, 88, 233;
+  --wp-admin-theme-color-darker-10: rgb(33.0384615385, 68.7307692308, 230.4615384615);
+  --wp-admin-theme-color-darker-10--rgb: 33.0384615385, 68.7307692308, 230.4615384615;
+  --wp-admin-theme-color-darker-20: rgb(23.6923076923, 58.1538461538, 214.3076923077);
+  --wp-admin-theme-color-darker-20--rgb: 23.6923076923, 58.1538461538, 214.3076923077;
+  --wp-admin-border-width-focus: 2px;
+}
+@media (min-resolution: 192dpi) {
+  :root {
+    --wp-admin-border-width-focus: 1.5px;
+  }
+}
+
+body.admin-color-fresh {
   --wp-admin-theme-color: #007cba;
   --wp-admin-theme-color--rgb: 0, 124, 186;
   --wp-admin-theme-color-darker-10: rgb(0, 107, 160.5);
@@ -107,7 +122,7 @@
   --wp-admin-border-width-focus: 2px;
 }
 @media (min-resolution: 192dpi) {
-  :root {
+  body.admin-color-fresh {
     --wp-admin-border-width-focus: 1.5px;
   }
 }
@@ -350,4 +365,22 @@ html :where(.is-position-sticky) {
   html :where(.is-position-sticky) {
     --wp-admin--admin-bar--position-offset: 0px;
   }
-}
+}
+/*!rtl:begin:ignore*/
+@supports (not (-webkit-backdrop-filter: blur(1px))) and (not (-moz-appearance: none)) {
+  mtd[columnalign=right] {
+    text-align: -webkit-right;
+  }
+  mtd[columnalign=left] {
+    text-align: -webkit-left;
+  }
+  menclose[notation~=top] {
+    padding-top: 0.1em;
+    border-top: 0.065em solid;
+  }
+  menclose[notation~=bottom] {
+    padding-bottom: 0.1em;
+    border-bottom: 0.065em solid;
+  }
+}
+/*!rtl:end:ignore*/