@wordpress/block-library 9.48.0 → 10.0.1-next.v.202606191442.0

package/build-module/tabs/block.json

@@ -30,18 +30,7 @@
 			}
 		},
 		"layout": {
-			"default": {
-				"type": "flex",
-				"flexWrap": "nowrap",
-				"justifyContent": "stretch",
-				"verticalAlignment": "stretch",
-				"orientation": "vertical"
-			},
-			"allowSwitching": false,
-			"allowVerticalAlignment": true,
-			"allowJustification": true,
-			"allowOrientation": true,
-			"allowSizingOnChildren": true
+			"allowEditing": false
 		},
 		"html": false,
 		"interactivity": true,
@@ -53,16 +42,13 @@
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true
-		},
-		"renaming": true
+		}
 	},
 	"providesContext": {
 		"core/tabs-activeTabIndex": "activeTabIndex",
 		"core/tabs-editorActiveTabIndex": "editorActiveTabIndex"
 	},
 	"usesContext": [ "core/tabs-list", "core/tabs-id" ],
-	"editorScript": "file:./index.js",
-	"editorStyle": "file:./index.css",
-	"style": "file:./style-index.css",
+	"style": "wp-block-tabs",
 	"viewScriptModule": "@wordpress/block-library/tabs/view"
 }

package/build-module/tabs/edit.mjs

@@ -8,37 +8,30 @@ import {
 import { useSelect } from "@wordpress/data";
 import { useMemo } from "@wordpress/element";
 import Controls from "./controls.mjs";
-import useTabListSync from "./use-tab-list-sync.mjs";
+import useTabListItemsSync from "./use-tab-list-items-sync.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var EMPTY_ARRAY = [];
 var TABS_TEMPLATE = [["core/tab-list"], ["core/tab-panels"]];
-function Edit({ clientId, attributes, setAttributes }) {
+function Edit({ clientId, attributes }) {
   const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;
-  const { tabPanels, tabPanelsClientId, tabs, tabListClientId } = useSelect(
+  const { tabPanels, tabListClientId } = useSelect(
     (select) => {
       const { getBlocks } = select(blockEditorStore);
       const innerBlocks = getBlocks(clientId);
-      const tabPanelBlocks = innerBlocks.find(
+      const tabPanelsBlock = innerBlocks.find(
         (block) => block.name === "core/tab-panels"
       );
       const tabList = innerBlocks.find(
         (block) => block.name === "core/tab-list"
       );
       return {
-        tabPanels: tabPanelBlocks?.innerBlocks ?? EMPTY_ARRAY,
-        tabPanelsClientId: tabPanelBlocks?.clientId ?? null,
-        tabs: tabList?.innerBlocks ?? EMPTY_ARRAY,
+        tabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,
         tabListClientId: tabList?.clientId ?? null
       };
     },
     [clientId]
   );
-  useTabListSync({
-    tabPanels,
-    tabs,
-    tabPanelsClientId,
-    tabListClientId
-  });
+  useTabListItemsSync({ tabPanels, tabListClientId });
   const contextValue = useMemo(() => {
     const tabList = tabPanels.map((tab, index) => ({
       id: tab.attributes.anchor || `tab-${index}`,
@@ -61,14 +54,7 @@ function Edit({ clientId, attributes, setAttributes }) {
     renderAppender: false
   });
   return /* @__PURE__ */ jsx(BlockContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ...innerBlockProps, children: [
-    /* @__PURE__ */ jsx(
-      Controls,
-      {
-        clientId,
-        attributes,
-        setAttributes
-      }
-    ),
+    /* @__PURE__ */ jsx(Controls, { clientId }),
     innerBlockProps.children
   ] }) });
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tBlockContextProvider,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\nimport useTabListSync from './use-tab-list-sync';\n\nconst EMPTY_ARRAY = [];\n\n/**\n * Only the two structural child blocks are specified here \u2014 without inner\n * block entries for core/tab-list or core/tab-panels.\n *\n * If inner blocks were included in this template, `synchronizeBlocksWithTemplate`\n * (called whenever templateLock === 'all') would recurse into the containers and\n * truncate them to the template count, causing data loss when a saved block with\n * more than two tabs is re-opened in the editor.\n *\n * Initial tab/panel creation is delegated to the tab-panels template in\n * tab-panels/edit.js (templateLock: false, applied only when empty).\n */\nconst TABS_TEMPLATE = [ [ 'core/tab-list' ], [ 'core/tab-panels' ] ];\n\nfunction Edit( { clientId, attributes, setAttributes } ) {\n\tconst { anchor, activeTabIndex, editorActiveTabIndex } = attributes;\n\n\tconst { tabPanels, tabPanelsClientId, tabs, tabListClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( clientId );\n\n\t\t\tconst tabPanelBlocks = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panels'\n\t\t\t);\n\t\t\tconst tabList = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-list'\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\ttabPanels: tabPanelBlocks?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t\ttabPanelsClientId: tabPanelBlocks?.clientId ?? null,\n\t\t\t\ttabs: tabList?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t\ttabListClientId: tabList?.clientId ?? null,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tuseTabListSync( {\n\t\ttabPanels,\n\t\ttabs,\n\t\ttabPanelsClientId,\n\t\ttabListClientId,\n\t} );\n\n\t/**\n\t * Memoize context value to prevent unnecessary re-renders.\n\t */\n\tconst contextValue = useMemo( () => {\n\t\t/**\n\t\t * Compute tabs list from innerblocks to provide via context.\n\t\t * This traverses the tab-panel block to find all tab blocks\n\t\t * and extracts their label and anchor for the tab-list to consume.\n\t\t */\n\t\tconst tabList = tabPanels.map( ( tab, index ) => ( {\n\t\t\tid: tab.attributes.anchor || `tab-${ index }`,\n\t\t\tlabel: tab.attributes.label || '',\n\t\t\tclientId: tab.clientId,\n\t\t\tindex,\n\t\t} ) );\n\n\t\treturn {\n\t\t\t'core/tabs-list': tabList,\n\t\t\t'core/tabs-id': anchor,\n\t\t\t'core/tabs-activeTabIndex': activeTabIndex,\n\t\t\t'core/tabs-editorActiveTabIndex': editorActiveTabIndex,\n\t\t};\n\t}, [ tabPanels, anchor, activeTabIndex, editorActiveTabIndex ] );\n\n\tconst blockProps = useBlockProps();\n\n\tconst innerBlockProps = useInnerBlocksProps( blockProps, {\n\t\t__experimentalCaptureToolbars: true,\n\t\ttemplate: TABS_TEMPLATE,\n\t\ttemplateLock: 'all',\n\t\trenderAppender: false,\n\t} );\n\n\treturn (\n\t\t<BlockContextProvider value={ contextValue }>\n\t\t\t<div { ...innerBlockProps }>\n\t\t\t\t<Controls\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tattributes={ attributes }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t/>\n\t\t\t\t{ innerBlockProps.children }\n\t\t\t</div>\n\t\t</BlockContextProvider>\n\t);\n}\n\nexport default Edit;\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAKxB,OAAO,cAAc;AACrB,OAAO,oBAAoB;AAqFxB,SACC,KADD;AAnFH,IAAM,cAAc,CAAC;AAcrB,IAAM,gBAAgB,CAAE,CAAE,eAAgB,GAAG,CAAE,iBAAkB,CAAE;AAEnE,SAAS,KAAM,EAAE,UAAU,YAAY,cAAc,GAAI;AACxD,QAAM,EAAE,QAAQ,gBAAgB,qBAAqB,IAAI;AAEzD,QAAM,EAAE,WAAW,mBAAmB,MAAM,gBAAgB,IAAI;AAAA,IAC/D,CAAE,WAAY;AACb,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,QAAS;AAExC,YAAM,iBAAiB,YAAY;AAAA,QAClC,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,UAAU,YAAY;AAAA,QAC3B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AAEA,aAAO;AAAA,QACN,WAAW,gBAAgB,eAAe;AAAA,QAC1C,mBAAmB,gBAAgB,YAAY;AAAA,QAC/C,MAAM,SAAS,eAAe;AAAA,QAC9B,iBAAiB,SAAS,YAAY;AAAA,MACvC;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAEA,iBAAgB;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAKF,QAAM,eAAe,QAAS,MAAM;AAMnC,UAAM,UAAU,UAAU,IAAK,CAAE,KAAK,WAAa;AAAA,MAClD,IAAI,IAAI,WAAW,UAAU,OAAQ,KAAM;AAAA,MAC3C,OAAO,IAAI,WAAW,SAAS;AAAA,MAC/B,UAAU,IAAI;AAAA,MACd;AAAA,IACD,EAAI;AAEJ,WAAO;AAAA,MACN,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,4BAA4B;AAAA,MAC5B,kCAAkC;AAAA,IACnC;AAAA,EACD,GAAG,CAAE,WAAW,QAAQ,gBAAgB,oBAAqB,CAAE;AAE/D,QAAM,aAAa,cAAc;AAEjC,QAAM,kBAAkB,oBAAqB,YAAY;AAAA,IACxD,+BAA+B;AAAA,IAC/B,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,EACjB,CAAE;AAEF,SACC,oBAAC,wBAAqB,OAAQ,cAC7B,+BAAC,SAAM,GAAG,iBACT;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACE,gBAAgB;AAAA,KACnB,GACD;AAEF;AAEA,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tBlockContextProvider,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\nimport useTabListItemsSync from './use-tab-list-items-sync';\n\nconst EMPTY_ARRAY = [];\n\n/**\n * Only the two structural child blocks are specified here — without inner\n * block entries for core/tab-list or core/tab-panels.\n *\n * If inner blocks were included in this template, `synchronizeBlocksWithTemplate`\n * (called whenever templateLock === 'all') would recurse into the containers and\n * truncate them to the template count, causing data loss when a saved block with\n * more than two tabs is re-opened in the editor.\n *\n * Initial tab/panel creation is delegated to the tab-panels template in\n * tab-panels/edit.js (templateLock: false, applied only when empty).\n */\nconst TABS_TEMPLATE = [ [ 'core/tab-list' ], [ 'core/tab-panels' ] ];\n\nfunction Edit( { clientId, attributes } ) {\n\tconst { anchor, activeTabIndex, editorActiveTabIndex } = attributes;\n\n\tconst { tabPanels, tabListClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( clientId );\n\n\t\t\tconst tabPanelsBlock = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panels'\n\t\t\t);\n\t\t\tconst tabList = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-list'\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\ttabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,\n\t\t\t\ttabListClientId: tabList?.clientId ?? null,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tuseTabListItemsSync( { tabPanels, tabListClientId } );\n\n\t/**\n\t * Memoize context value to prevent unnecessary re-renders.\n\t */\n\tconst contextValue = useMemo( () => {\n\t\t/**\n\t\t * Compute tabs list from innerblocks to provide via context.\n\t\t * This traverses the tab-panels block to find all tab-panel blocks\n\t\t * and extracts their label and anchor for the tab-list to consume.\n\t\t */\n\t\tconst tabList = tabPanels.map( ( tab, index ) => ( {\n\t\t\tid: tab.attributes.anchor || `tab-${ index }`,\n\t\t\tlabel: tab.attributes.label || '',\n\t\t\tclientId: tab.clientId,\n\t\t\tindex,\n\t\t} ) );\n\n\t\treturn {\n\t\t\t'core/tabs-list': tabList,\n\t\t\t'core/tabs-id': anchor,\n\t\t\t'core/tabs-activeTabIndex': activeTabIndex,\n\t\t\t'core/tabs-editorActiveTabIndex': editorActiveTabIndex,\n\t\t};\n\t}, [ tabPanels, anchor, activeTabIndex, editorActiveTabIndex ] );\n\n\tconst blockProps = useBlockProps();\n\n\tconst innerBlockProps = useInnerBlocksProps( blockProps, {\n\t\t__experimentalCaptureToolbars: true,\n\t\ttemplate: TABS_TEMPLATE,\n\t\ttemplateLock: 'all',\n\t\trenderAppender: false,\n\t} );\n\n\treturn (\n\t\t<BlockContextProvider value={ contextValue }>\n\t\t\t<div { ...innerBlockProps }>\n\t\t\t\t<Controls clientId={ clientId } />\n\t\t\t\t{ innerBlockProps.children }\n\t\t\t</div>\n\t\t</BlockContextProvider>\n\t);\n}\n\nexport default Edit;\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAKxB,OAAO,cAAc;AACrB,OAAO,yBAAyB;AA8E7B,SACC,KADD;AA5EH,IAAM,cAAc,CAAC;AAcrB,IAAM,gBAAgB,CAAE,CAAE,eAAgB,GAAG,CAAE,iBAAkB,CAAE;AAEnE,SAAS,KAAM,EAAE,UAAU,WAAW,GAAI;AACzC,QAAM,EAAE,QAAQ,gBAAgB,qBAAqB,IAAI;AAEzD,QAAM,EAAE,WAAW,gBAAgB,IAAI;AAAA,IACtC,CAAE,WAAY;AACb,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,QAAS;AAExC,YAAM,iBAAiB,YAAY;AAAA,QAClC,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,UAAU,YAAY;AAAA,QAC3B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AAEA,aAAO;AAAA,QACN,WAAW,gBAAgB,eAAe;AAAA,QAC1C,iBAAiB,SAAS,YAAY;AAAA,MACvC;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAEA,sBAAqB,EAAE,WAAW,gBAAgB,CAAE;AAKpD,QAAM,eAAe,QAAS,MAAM;AAMnC,UAAM,UAAU,UAAU,IAAK,CAAE,KAAK,WAAa;AAAA,MAClD,IAAI,IAAI,WAAW,UAAU,OAAQ,KAAM;AAAA,MAC3C,OAAO,IAAI,WAAW,SAAS;AAAA,MAC/B,UAAU,IAAI;AAAA,MACd;AAAA,IACD,EAAI;AAEJ,WAAO;AAAA,MACN,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,4BAA4B;AAAA,MAC5B,kCAAkC;AAAA,IACnC;AAAA,EACD,GAAG,CAAE,WAAW,QAAQ,gBAAgB,oBAAqB,CAAE;AAE/D,QAAM,aAAa,cAAc;AAEjC,QAAM,kBAAkB,oBAAqB,YAAY;AAAA,IACxD,+BAA+B;AAAA,IAC/B,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA,EACjB,CAAE;AAEF,SACC,oBAAC,wBAAqB,OAAQ,cAC7B,+BAAC,SAAM,GAAG,iBACT;AAAA,wBAAC,YAAS,UAAsB;AAAA,IAC9B,gBAAgB;AAAA,KACnB,GACD;AAEF;AAEA,IAAO,eAAQ;",
   "names": []
 }

package/build-module/tabs/index.mjs

@@ -12,16 +12,12 @@ var settings = {
     innerBlocks: [
       {
         name: "core/tab-list",
-        innerBlocks: [
-          {
-            name: "core/tab",
-            attributes: { anchor: "tab-1-button" }
-          },
-          {
-            name: "core/tab",
-            attributes: { anchor: "tab-2-button" }
-          }
-        ]
+        attributes: {
+          tabs: [
+            { label: __("Tab 1") },
+            { label: __("Tab 2") }
+          ]
+        }
       },
       {
         name: "core/tab-panels",

package/build-module/tabs/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { tabs as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport save from './save';\nimport metadata from './block.json';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tinnerBlocks: [\n\t\t\t{\n\t\t\t\tname: 'core/tab-list',\n\t\t\t\tinnerBlocks: [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'core/tab',\n\t\t\t\t\t\tattributes: { anchor: 'tab-1-button' },\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'core/tab',\n\t\t\t\t\t\tattributes: { anchor: 'tab-2-button' },\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/tab-panels',\n\t\t\t\tinnerBlocks: [ 1, 2 ].map( ( index ) => ( {\n\t\t\t\t\tname: 'core/tab-panel',\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tanchor: `tab-${ index }`,\n\t\t\t\t\t\tlabel: sprintf(\n\t\t\t\t\t\t\t/** translators: %s: tab index number */\n\t\t\t\t\t\t\t__( 'Tab %s' ),\n\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tinnerBlocks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: 'core/paragraph',\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tcontent: __(\n\t\t\t\t\t\t\t\t\t'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'\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],\n\t\t\t\t} ) ),\n\t\t\t},\n\t\t],\n\t},\n\tedit,\n\tsave,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
-  "mappings": ";AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,QAAQ,YAAY;AAK7B,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,cAAc;AAErB,IAAM,EAAE,KAAK,IAAI;AAIV,IAAM,WAAW;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACR,aAAa;AAAA,MACZ;AAAA,QACC,MAAM;AAAA,QACN,aAAa;AAAA,UACZ;AAAA,YACC,MAAM;AAAA,YACN,YAAY,EAAE,QAAQ,eAAe;AAAA,UACtC;AAAA,UACA;AAAA,YACC,MAAM;AAAA,YACN,YAAY,EAAE,QAAQ,eAAe;AAAA,UACtC;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,QACC,MAAM;AAAA,QACN,aAAa,CAAE,GAAG,CAAE,EAAE,IAAK,CAAE,WAAa;AAAA,UACzC,MAAM;AAAA,UACN,YAAY;AAAA,YACX,QAAQ,OAAQ,KAAM;AAAA,YACtB,OAAO;AAAA;AAAA,cAEN,GAAI,QAAS;AAAA,cACb;AAAA,YACD;AAAA,UACD;AAAA,UACA,aAAa;AAAA,YACZ;AAAA,cACC,MAAM;AAAA,cACN,YAAY;AAAA,gBACX,SAAS;AAAA,kBACR;AAAA,gBACD;AAAA,cACD;AAAA,YACD;AAAA,UACD;AAAA,QACD,EAAI;AAAA,MACL;AAAA,IACD;AAAA,EACD;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,OAAO,MAAM,UAAW,EAAE,MAAM,UAAU,SAAS,CAAE;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport { tabs as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport save from './save';\nimport metadata from './block.json';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tinnerBlocks: [\n\t\t\t{\n\t\t\t\tname: 'core/tab-list',\n\t\t\t\tattributes: {\n\t\t\t\t\ttabs: [\n\t\t\t\t\t\t{ label: __( 'Tab 1' ) },\n\t\t\t\t\t\t{ label: __( 'Tab 2' ) },\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/tab-panels',\n\t\t\t\tinnerBlocks: [ 1, 2 ].map( ( index ) => ( {\n\t\t\t\t\tname: 'core/tab-panel',\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tanchor: `tab-${ index }`,\n\t\t\t\t\t\tlabel: sprintf(\n\t\t\t\t\t\t\t/** translators: %s: tab index number */\n\t\t\t\t\t\t\t__( 'Tab %s' ),\n\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tinnerBlocks: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: 'core/paragraph',\n\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\tcontent: __(\n\t\t\t\t\t\t\t\t\t'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'\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],\n\t\t\t\t} ) ),\n\t\t\t},\n\t\t],\n\t},\n\tedit,\n\tsave,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
+  "mappings": ";AAGA,SAAS,IAAI,eAAe;AAC5B,SAAS,QAAQ,YAAY;AAK7B,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,cAAc;AAErB,IAAM,EAAE,KAAK,IAAI;AAIV,IAAM,WAAW;AAAA,EACvB;AAAA,EACA,SAAS;AAAA,IACR,aAAa;AAAA,MACZ;AAAA,QACC,MAAM;AAAA,QACN,YAAY;AAAA,UACX,MAAM;AAAA,YACL,EAAE,OAAO,GAAI,OAAQ,EAAE;AAAA,YACvB,EAAE,OAAO,GAAI,OAAQ,EAAE;AAAA,UACxB;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,QACC,MAAM;AAAA,QACN,aAAa,CAAE,GAAG,CAAE,EAAE,IAAK,CAAE,WAAa;AAAA,UACzC,MAAM;AAAA,UACN,YAAY;AAAA,YACX,QAAQ,OAAQ,KAAM;AAAA,YACtB,OAAO;AAAA;AAAA,cAEN,GAAI,QAAS;AAAA,cACb;AAAA,YACD;AAAA,UACD;AAAA,UACA,aAAa;AAAA,YACZ;AAAA,cACC,MAAM;AAAA,cACN,YAAY;AAAA,gBACX,SAAS;AAAA,kBACR;AAAA,gBACD;AAAA,cACD;AAAA,YACD;AAAA,UACD;AAAA,QACD,EAAI;AAAA,MACL;AAAA,IACD;AAAA,EACD;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,OAAO,MAAM,UAAW,EAAE,MAAM,UAAU,SAAS,CAAE;",
   "names": []
 }

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

@@ -0,0 +1,32 @@
+// packages/block-library/src/tabs/use-tab-list-items-sync.js
+import { store as blockEditorStore } from "@wordpress/block-editor";
+import { useDispatch } from "@wordpress/data";
+import { useEffect, useRef } from "@wordpress/element";
+function useTabListItemsSync({ tabPanels, tabListClientId }) {
+  const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
+  const prevTabsRef = useRef(null);
+  useEffect(() => {
+    if (!tabListClientId) {
+      return;
+    }
+    const newTabs = tabPanels.map((tab) => ({
+      label: tab.attributes.label || ""
+    }));
+    const serialized = JSON.stringify(newTabs);
+    if (serialized === prevTabsRef.current) {
+      return;
+    }
+    prevTabsRef.current = serialized;
+    __unstableMarkNextChangeAsNotPersistent();
+    updateBlockAttributes(tabListClientId, { tabs: newTabs });
+  }, [
+    tabPanels,
+    tabListClientId,
+    updateBlockAttributes,
+    __unstableMarkNextChangeAsNotPersistent
+  ]);
+}
+export {
+  useTabListItemsSync as default
+};
+//# sourceMappingURL=use-tab-list-items-sync.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tabs/use-tab-list-items-sync.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { useDispatch } from '@wordpress/data';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Keep the tab-list block's `tabs` attribute in sync with the tab-panel blocks.\n *\n * Whenever the list of core/tab-panel blocks changes (add, remove, reorder, or\n * label edit), this hook updates the `tabs` attribute on the core/tab-list\n * block so that save.js can render the correct buttons.\n *\n * @param {Object}      props\n * @param {Array}       props.tabPanels       Raw core/tab-panel block objects.\n * @param {string|null} props.tabListClientId Client ID of the core/tab-list block.\n */\nexport default function useTabListItemsSync( { tabPanels, tabListClientId } ) {\n\tconst { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\tconst prevTabsRef = useRef( null );\n\n\tuseEffect( () => {\n\t\tif ( ! tabListClientId ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newTabs = tabPanels.map( ( tab ) => ( {\n\t\t\tlabel: tab.attributes.label || '',\n\t\t} ) );\n\n\t\t// Only update if tabs actually changed to avoid unnecessary re-renders.\n\t\tconst serialized = JSON.stringify( newTabs );\n\t\tif ( serialized === prevTabsRef.current ) {\n\t\t\treturn;\n\t\t}\n\t\tprevTabsRef.current = serialized;\n\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tupdateBlockAttributes( tabListClientId, { tabs: newTabs } );\n\t}, [\n\t\ttabPanels,\n\t\ttabListClientId,\n\t\tupdateBlockAttributes,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t] );\n}\n"],
+  "mappings": ";AAGA,SAAS,SAAS,wBAAwB;AAC1C,SAAS,mBAAmB;AAC5B,SAAS,WAAW,cAAc;AAanB,SAAR,oBAAsC,EAAE,WAAW,gBAAgB,GAAI;AAC7E,QAAM,EAAE,uBAAuB,wCAAwC,IACtE,YAAa,gBAAiB;AAE/B,QAAM,cAAc,OAAQ,IAAK;AAEjC,YAAW,MAAM;AAChB,QAAK,CAAE,iBAAkB;AACxB;AAAA,IACD;AAEA,UAAM,UAAU,UAAU,IAAK,CAAE,SAAW;AAAA,MAC3C,OAAO,IAAI,WAAW,SAAS;AAAA,IAChC,EAAI;AAGJ,UAAM,aAAa,KAAK,UAAW,OAAQ;AAC3C,QAAK,eAAe,YAAY,SAAU;AACzC;AAAA,IACD;AACA,gBAAY,UAAU;AAEtB,4CAAwC;AACxC,0BAAuB,iBAAiB,EAAE,MAAM,QAAQ,CAAE;AAAA,EAC3D,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACH;",
+  "names": []
+}

package/build-module/tabs/view.mjs

@@ -95,22 +95,14 @@ var { actions: privateActions, state: privateState } = store(
        * @param {KeyboardEvent} event The keydown event.
        */
       handleTabKeyDown: withSyncEvent((event) => {
-        const context = getContext();
-        const { isVertical } = context;
         const { tabIndex } = privateState;
         if (tabIndex === null) {
           return;
         }
-        if (event.key === "ArrowRight" && !isVertical) {
-          event.preventDefault();
-          privateActions.moveFocus(tabIndex + 1);
-        } else if (event.key === "ArrowLeft" && !isVertical) {
-          event.preventDefault();
-          privateActions.moveFocus(tabIndex - 1);
-        } else if (event.key === "ArrowDown" && isVertical) {
+        if (event.key === "ArrowRight") {
           event.preventDefault();
           privateActions.moveFocus(tabIndex + 1);
-        } else if (event.key === "ArrowUp" && isVertical) {
+        } else if (event.key === "ArrowLeft") {
           event.preventDefault();
           privateActions.moveFocus(tabIndex - 1);
         }

package/build-module/tabs/view.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/view.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tstore,\n\tgetContext,\n\tgetElement,\n\twithSyncEvent,\n} from '@wordpress/interactivity';\n\nfunction createReadOnlyProxy( obj ) {\n\tconst arrayMutationMethods = new Set( [\n\t\t'push',\n\t\t'pop',\n\t\t'shift',\n\t\t'unshift',\n\t\t'splice',\n\t\t'sort',\n\t\t'reverse',\n\t\t'copyWithin',\n\t\t'fill',\n\t] );\n\n\treturn new Proxy( obj, {\n\t\tget( target, prop ) {\n\t\t\t// If accessing an array mutation method, return a no-op function.\n\t\t\tif ( Array.isArray( target ) && arrayMutationMethods.has( prop ) ) {\n\t\t\t\treturn () => {};\n\t\t\t}\n\n\t\t\tconst value = target[ prop ];\n\t\t\tif ( typeof value === 'object' && value !== null ) {\n\t\t\t\treturn createReadOnlyProxy( value );\n\t\t\t}\n\t\t\treturn value;\n\t\t},\n\t\tset() {\n\t\t\treturn false;\n\t\t},\n\t\tdeleteProperty() {\n\t\t\treturn false;\n\t\t},\n\t} );\n}\n\n// Private store for internal tabs functionality and security.\nconst { actions: privateActions, state: privateState } = store(\n\t'core/tabs/private',\n\t{\n\t\tstate: {\n\t\t\t/**\n\t\t\t * Gets a contextually aware list of tabs for the current tabs block.\n\t\t\t *\n\t\t\t * @type {Array}\n\t\t\t */\n\t\t\tget tabsList() {\n\t\t\t\tconst context = getContext();\n\t\t\t\tconst tabsId = context?.tabsId;\n\t\t\t\tconst tabsList = privateState[ tabsId ];\n\t\t\t\treturn tabsList;\n\t\t\t},\n\t\t\t/**\n\t\t\t * Gets the index of the active tab element whether it\n\t\t\t * is a tab label or tab panel.\n\t\t\t *\n\t\t\t * @type {number|null}\n\t\t\t */\n\t\t\tget tabIndex() {\n\t\t\t\tconst { attributes } = getElement();\n\t\t\t\tconst tabId = attributes?.id?.replace( 'tab__', '' ) || null;\n\t\t\t\tif ( ! tabId ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\tconst { tabsList } = privateState;\n\t\t\t\tconst tabIndex = tabsList.findIndex( ( t ) => t.id === tabId );\n\t\t\t\treturn tabIndex;\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether the tab panel or tab label is the active tab.\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tget isActiveTab() {\n\t\t\t\tconst { activeTabIndex } = getContext();\n\t\t\t\tconst { tabIndex } = privateState;\n\t\t\t\treturn activeTabIndex === tabIndex;\n\t\t\t},\n\t\t\t/**\n\t\t\t * The value of the tabindex attribute for tab buttons.\n\t\t\t * Only the active tab should be in the tab sequence.\n\t\t\t *\n\t\t\t * @type {number}\n\t\t\t */\n\t\t\tget tabIndexAttribute() {\n\t\t\t\treturn privateState.isActiveTab ? 0 : -1;\n\t\t\t},\n\t\t},\n\t\tactions: {\n\t\t\t/**\n\t\t\t * Handles the keydown events for the tab label and tabs controller.\n\t\t\t *\n\t\t\t * @param {KeyboardEvent} event The keydown event.\n\t\t\t */\n\t\t\thandleTabKeyDown: withSyncEvent( ( event ) => {\n\t\t\t\tconst context = getContext();\n\t\t\t\tconst { isVertical } = context;\n\t\t\t\tconst { tabIndex } = privateState;\n\n\t\t\t\tif ( tabIndex === null ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( event.key === 'ArrowRight' && ! isVertical ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tprivateActions.moveFocus( tabIndex + 1 );\n\t\t\t\t} else if ( event.key === 'ArrowLeft' && ! isVertical ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tprivateActions.moveFocus( tabIndex - 1 );\n\t\t\t\t} else if ( event.key === 'ArrowDown' && isVertical ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tprivateActions.moveFocus( tabIndex + 1 );\n\t\t\t\t} else if ( event.key === 'ArrowUp' && isVertical ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tprivateActions.moveFocus( tabIndex - 1 );\n\t\t\t\t}\n\t\t\t} ),\n\t\t\t/**\n\t\t\t * Handles the click event for the tab label.\n\t\t\t *\n\t\t\t * @param {MouseEvent} event The click event.\n\t\t\t */\n\t\t\thandleTabClick: withSyncEvent( ( event ) => {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\tconst { tabIndex } = privateState;\n\t\t\t\tif ( tabIndex !== null ) {\n\t\t\t\t\tprivateActions.setActiveTab( tabIndex );\n\t\t\t\t}\n\t\t\t} ),\n\t\t\t/**\n\t\t\t * Moves focus to a specific tab without activating it.\n\t\t\t *\n\t\t\t * @param {number} tabIndex The index to move focus to.\n\t\t\t */\n\t\t\tmoveFocus: ( tabIndex ) => {\n\t\t\t\tconst { tabsList } = privateState;\n\n\t\t\t\tif ( ! tabsList || tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet newIndex = tabIndex;\n\t\t\t\tif ( newIndex < 0 ) {\n\t\t\t\t\tnewIndex = tabsList.length - 1;\n\t\t\t\t} else if ( newIndex >= tabsList.length ) {\n\t\t\t\t\tnewIndex = 0;\n\t\t\t\t}\n\n\t\t\t\tconst tabId = tabsList[ newIndex ].id;\n\t\t\t\tconst tabElement = document.getElementById( 'tab__' + tabId );\n\t\t\t\tif ( tabElement ) {\n\t\t\t\t\ttabElement.focus();\n\t\t\t\t}\n\t\t\t},\n\t\t\t/**\n\t\t\t * Sets the active tab index (internal implementation).\n\t\t\t *\n\t\t\t * @param {number}  tabIndex    The index of the active tab.\n\t\t\t * @param {boolean} scrollToTab Whether to scroll to the tab element.\n\t\t\t */\n\t\t\tsetActiveTab: ( tabIndex, scrollToTab = false ) => {\n\t\t\t\tconst { tabsList } = privateState;\n\n\t\t\t\tif ( ! tabsList || tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet newIndex = tabIndex;\n\t\t\t\tif ( newIndex < 0 ) {\n\t\t\t\t\tnewIndex = 0;\n\t\t\t\t} else if ( newIndex >= tabsList.length ) {\n\t\t\t\t\tnewIndex = tabsList.length - 1;\n\t\t\t\t}\n\n\t\t\t\tconst context = getContext();\n\t\t\t\tcontext.activeTabIndex = newIndex;\n\n\t\t\t\tif ( scrollToTab ) {\n\t\t\t\t\tconst tabId = tabsList[ newIndex ].id;\n\t\t\t\t\tconst tabElement = document.getElementById( tabId );\n\t\t\t\t\tif ( tabElement ) {\n\t\t\t\t\t\tsetTimeout( () => {\n\t\t\t\t\t\t\ttabElement.scrollIntoView( { behavior: 'smooth' } );\n\t\t\t\t\t\t}, 100 );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tcallbacks: {\n\t\t\t/**\n\t\t\t * When the tabs are initialized, we need to check if there is a hash in the url and if so if it exists in the current tabsList, set the active tab to that index.\n\t\t\t *\n\t\t\t */\n\t\t\tonTabsInit: () => {\n\t\t\t\tconst { tabsList } = privateState;\n\t\t\t\tif ( tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst { hash } = window.location;\n\t\t\t\tconst tabId = hash.replace( '#', '' );\n\t\t\t\tconst tabIndex = tabsList.findIndex( ( t ) => t.id === tabId );\n\t\t\t\t// Check if tabIndex is a positive number and if so we'll auto activate that tab.\n\t\t\t\tif ( tabIndex >= 0 ) {\n\t\t\t\t\tprivateActions.setActiveTab( tabIndex, true );\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\tlock: true,\n\t}\n);\n\n// Public store for third-party extensibility.\nstore( 'core/tabs', {\n\tstate: {\n\t\t/**\n\t\t * Gets a contextually aware list of tabs for the current tabs block.\n\t\t * Public API for third-party access.\n\t\t *\n\t\t * @type {Array}\n\t\t */\n\t\tget tabsList() {\n\t\t\treturn createReadOnlyProxy( privateState.tabsList );\n\t\t},\n\t\t/**\n\t\t * Gets the index of the active tab element whether it\n\t\t * is a tab label or tab panel.\n\t\t *\n\t\t * @type {number|null}\n\t\t */\n\t\tget tabIndex() {\n\t\t\treturn privateState.tabIndex;\n\t\t},\n\t\t/**\n\t\t * Whether the tab panel or tab label is the active tab.\n\t\t *\n\t\t * @type {boolean}\n\t\t */\n\t\tget isActiveTab() {\n\t\t\treturn privateState.isActiveTab;\n\t\t},\n\t},\n\tactions: {\n\t\t/**\n\t\t * Sets the active tab index.\n\t\t * Public API for third-party programmatic tab activation.\n\t\t *\n\t\t * @param {number}  tabIndex    The index of the active tab.\n\t\t * @param {boolean} scrollToTab Whether to scroll to the tab element.\n\t\t */\n\t\tsetActiveTab: ( tabIndex, scrollToTab = false ) => {\n\t\t\tprivateActions.setActiveTab( tabIndex, scrollToTab );\n\t\t},\n\t},\n} );\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tstore,\n\tgetContext,\n\tgetElement,\n\twithSyncEvent,\n} from '@wordpress/interactivity';\n\nfunction createReadOnlyProxy( obj ) {\n\tconst arrayMutationMethods = new Set( [\n\t\t'push',\n\t\t'pop',\n\t\t'shift',\n\t\t'unshift',\n\t\t'splice',\n\t\t'sort',\n\t\t'reverse',\n\t\t'copyWithin',\n\t\t'fill',\n\t] );\n\n\treturn new Proxy( obj, {\n\t\tget( target, prop ) {\n\t\t\t// If accessing an array mutation method, return a no-op function.\n\t\t\tif ( Array.isArray( target ) && arrayMutationMethods.has( prop ) ) {\n\t\t\t\treturn () => {};\n\t\t\t}\n\n\t\t\tconst value = target[ prop ];\n\t\t\tif ( typeof value === 'object' && value !== null ) {\n\t\t\t\treturn createReadOnlyProxy( value );\n\t\t\t}\n\t\t\treturn value;\n\t\t},\n\t\tset() {\n\t\t\treturn false;\n\t\t},\n\t\tdeleteProperty() {\n\t\t\treturn false;\n\t\t},\n\t} );\n}\n\n// Private store for internal tabs functionality and security.\nconst { actions: privateActions, state: privateState } = store(\n\t'core/tabs/private',\n\t{\n\t\tstate: {\n\t\t\t/**\n\t\t\t * Gets a contextually aware list of tabs for the current tabs block.\n\t\t\t *\n\t\t\t * @type {Array}\n\t\t\t */\n\t\t\tget tabsList() {\n\t\t\t\tconst context = getContext();\n\t\t\t\tconst tabsId = context?.tabsId;\n\t\t\t\tconst tabsList = privateState[ tabsId ];\n\t\t\t\treturn tabsList;\n\t\t\t},\n\t\t\t/**\n\t\t\t * Gets the index of the active tab element whether it\n\t\t\t * is a tab label or tab panel.\n\t\t\t *\n\t\t\t * @type {number|null}\n\t\t\t */\n\t\t\tget tabIndex() {\n\t\t\t\tconst { attributes } = getElement();\n\t\t\t\tconst tabId = attributes?.id?.replace( 'tab__', '' ) || null;\n\t\t\t\tif ( ! tabId ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\t\t\t\tconst { tabsList } = privateState;\n\t\t\t\tconst tabIndex = tabsList.findIndex( ( t ) => t.id === tabId );\n\t\t\t\treturn tabIndex;\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether the tab panel or tab label is the active tab.\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tget isActiveTab() {\n\t\t\t\tconst { activeTabIndex } = getContext();\n\t\t\t\tconst { tabIndex } = privateState;\n\t\t\t\treturn activeTabIndex === tabIndex;\n\t\t\t},\n\t\t\t/**\n\t\t\t * The value of the tabindex attribute for tab buttons.\n\t\t\t * Only the active tab should be in the tab sequence.\n\t\t\t *\n\t\t\t * @type {number}\n\t\t\t */\n\t\t\tget tabIndexAttribute() {\n\t\t\t\treturn privateState.isActiveTab ? 0 : -1;\n\t\t\t},\n\t\t},\n\t\tactions: {\n\t\t\t/**\n\t\t\t * Handles the keydown events for the tab label and tabs controller.\n\t\t\t *\n\t\t\t * @param {KeyboardEvent} event The keydown event.\n\t\t\t */\n\t\t\thandleTabKeyDown: withSyncEvent( ( event ) => {\n\t\t\t\tconst { tabIndex } = privateState;\n\n\t\t\t\tif ( tabIndex === null ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( event.key === 'ArrowRight' ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tprivateActions.moveFocus( tabIndex + 1 );\n\t\t\t\t} else if ( event.key === 'ArrowLeft' ) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tprivateActions.moveFocus( tabIndex - 1 );\n\t\t\t\t}\n\t\t\t} ),\n\t\t\t/**\n\t\t\t * Handles the click event for the tab label.\n\t\t\t *\n\t\t\t * @param {MouseEvent} event The click event.\n\t\t\t */\n\t\t\thandleTabClick: withSyncEvent( ( event ) => {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\tconst { tabIndex } = privateState;\n\t\t\t\tif ( tabIndex !== null ) {\n\t\t\t\t\tprivateActions.setActiveTab( tabIndex );\n\t\t\t\t}\n\t\t\t} ),\n\t\t\t/**\n\t\t\t * Moves focus to a specific tab without activating it.\n\t\t\t *\n\t\t\t * @param {number} tabIndex The index to move focus to.\n\t\t\t */\n\t\t\tmoveFocus: ( tabIndex ) => {\n\t\t\t\tconst { tabsList } = privateState;\n\n\t\t\t\tif ( ! tabsList || tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet newIndex = tabIndex;\n\t\t\t\tif ( newIndex < 0 ) {\n\t\t\t\t\tnewIndex = tabsList.length - 1;\n\t\t\t\t} else if ( newIndex >= tabsList.length ) {\n\t\t\t\t\tnewIndex = 0;\n\t\t\t\t}\n\n\t\t\t\tconst tabId = tabsList[ newIndex ].id;\n\t\t\t\tconst tabElement = document.getElementById( 'tab__' + tabId );\n\t\t\t\tif ( tabElement ) {\n\t\t\t\t\ttabElement.focus();\n\t\t\t\t}\n\t\t\t},\n\t\t\t/**\n\t\t\t * Sets the active tab index (internal implementation).\n\t\t\t *\n\t\t\t * @param {number}  tabIndex    The index of the active tab.\n\t\t\t * @param {boolean} scrollToTab Whether to scroll to the tab element.\n\t\t\t */\n\t\t\tsetActiveTab: ( tabIndex, scrollToTab = false ) => {\n\t\t\t\tconst { tabsList } = privateState;\n\n\t\t\t\tif ( ! tabsList || tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlet newIndex = tabIndex;\n\t\t\t\tif ( newIndex < 0 ) {\n\t\t\t\t\tnewIndex = 0;\n\t\t\t\t} else if ( newIndex >= tabsList.length ) {\n\t\t\t\t\tnewIndex = tabsList.length - 1;\n\t\t\t\t}\n\n\t\t\t\tconst context = getContext();\n\t\t\t\tcontext.activeTabIndex = newIndex;\n\n\t\t\t\tif ( scrollToTab ) {\n\t\t\t\t\tconst tabId = tabsList[ newIndex ].id;\n\t\t\t\t\tconst tabElement = document.getElementById( tabId );\n\t\t\t\t\tif ( tabElement ) {\n\t\t\t\t\t\tsetTimeout( () => {\n\t\t\t\t\t\t\ttabElement.scrollIntoView( { behavior: 'smooth' } );\n\t\t\t\t\t\t}, 100 );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tcallbacks: {\n\t\t\t/**\n\t\t\t * When the tabs are initialized, we need to check if there is a hash in the url and if so if it exists in the current tabsList, set the active tab to that index.\n\t\t\t *\n\t\t\t */\n\t\t\tonTabsInit: () => {\n\t\t\t\tconst { tabsList } = privateState;\n\t\t\t\tif ( tabsList.length === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst { hash } = window.location;\n\t\t\t\tconst tabId = hash.replace( '#', '' );\n\t\t\t\tconst tabIndex = tabsList.findIndex( ( t ) => t.id === tabId );\n\t\t\t\t// Check if tabIndex is a positive number and if so we'll auto activate that tab.\n\t\t\t\tif ( tabIndex >= 0 ) {\n\t\t\t\t\tprivateActions.setActiveTab( tabIndex, true );\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t},\n\t{\n\t\tlock: true,\n\t}\n);\n\n// Public store for third-party extensibility.\nstore( 'core/tabs', {\n\tstate: {\n\t\t/**\n\t\t * Gets a contextually aware list of tabs for the current tabs block.\n\t\t * Public API for third-party access.\n\t\t *\n\t\t * @type {Array}\n\t\t */\n\t\tget tabsList() {\n\t\t\treturn createReadOnlyProxy( privateState.tabsList );\n\t\t},\n\t\t/**\n\t\t * Gets the index of the active tab element whether it\n\t\t * is a tab label or tab panel.\n\t\t *\n\t\t * @type {number|null}\n\t\t */\n\t\tget tabIndex() {\n\t\t\treturn privateState.tabIndex;\n\t\t},\n\t\t/**\n\t\t * Whether the tab panel or tab label is the active tab.\n\t\t *\n\t\t * @type {boolean}\n\t\t */\n\t\tget isActiveTab() {\n\t\t\treturn privateState.isActiveTab;\n\t\t},\n\t},\n\tactions: {\n\t\t/**\n\t\t * Sets the active tab index.\n\t\t * Public API for third-party programmatic tab activation.\n\t\t *\n\t\t * @param {number}  tabIndex    The index of the active tab.\n\t\t * @param {boolean} scrollToTab Whether to scroll to the tab element.\n\t\t */\n\t\tsetActiveTab: ( tabIndex, scrollToTab = false ) => {\n\t\t\tprivateActions.setActiveTab( tabIndex, scrollToTab );\n\t\t},\n\t},\n} );\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/terms-query/edit/inspector-controls/order-control.mjs

@@ -9,11 +9,11 @@ function OrderControl({ orderBy, order, onChange, ...props }) {
       __next40pxDefaultSize: true,
       options: [
         {
-          label: __("Name: A \u2192 Z"),
+          label: __("Name: A → Z"),
           value: "name/asc"
         },
         {
-          label: __("Name: Z \u2192 A"),
+          label: __("Name: Z → A"),
           value: "name/desc"
         },
         {

package/build-module/terms-query/edit/inspector-controls/order-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/terms-query/edit/inspector-controls/order-control.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { SelectControl } from '@wordpress/components';\n\nexport default function OrderControl( { orderBy, order, onChange, ...props } ) {\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\toptions={ [\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Name: A \u2192 Z' ),\n\t\t\t\t\tvalue: 'name/asc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Name: Z \u2192 A' ),\n\t\t\t\t\tvalue: 'name/desc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Count, high to low' ),\n\t\t\t\t\tvalue: 'count/desc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Count, low to high' ),\n\t\t\t\t\tvalue: 'count/asc',\n\t\t\t\t},\n\t\t\t] }\n\t\t\tvalue={ orderBy + '/' + order }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\tonChange( newOrderBy, newOrder );\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAI5B;AAFa,SAAR,aAA+B,EAAE,SAAS,OAAO,UAAU,GAAG,MAAM,GAAI;AAC9E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,SAAU;AAAA,QACT;AAAA,UACC,OAAO,GAAI,kBAAc;AAAA,UACzB,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,kBAAc;AAAA,UACzB,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,oBAAqB;AAAA,UAChC,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,oBAAqB;AAAA,UAChC,OAAO;AAAA,QACR;AAAA,MACD;AAAA,MACA,OAAQ,UAAU,MAAM;AAAA,MACxB,UAAW,CAAE,UAAW;AACvB,cAAM,CAAE,YAAY,QAAS,IAAI,MAAM,MAAO,GAAI;AAClD,iBAAU,YAAY,QAAS;AAAA,MAChC;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { SelectControl } from '@wordpress/components';\n\nexport default function OrderControl( { orderBy, order, onChange, ...props } ) {\n\treturn (\n\t\t<SelectControl\n\t\t\t__next40pxDefaultSize\n\t\t\toptions={ [\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Name: A → Z' ),\n\t\t\t\t\tvalue: 'name/asc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Name: Z → A' ),\n\t\t\t\t\tvalue: 'name/desc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Count, high to low' ),\n\t\t\t\t\tvalue: 'count/desc',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: __( 'Count, low to high' ),\n\t\t\t\t\tvalue: 'count/asc',\n\t\t\t\t},\n\t\t\t] }\n\t\t\tvalue={ orderBy + '/' + order }\n\t\t\tonChange={ ( value ) => {\n\t\t\t\tconst [ newOrderBy, newOrder ] = value.split( '/' );\n\t\t\t\tonChange( newOrderBy, newOrder );\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAI5B;AAFa,SAAR,aAA+B,EAAE,SAAS,OAAO,UAAU,GAAG,MAAM,GAAI;AAC9E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,SAAU;AAAA,QACT;AAAA,UACC,OAAO,GAAI,aAAc;AAAA,UACzB,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,aAAc;AAAA,UACzB,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,oBAAqB;AAAA,UAChC,OAAO;AAAA,QACR;AAAA,QACA;AAAA,UACC,OAAO,GAAI,oBAAqB;AAAA,UAChC,OAAO;AAAA,QACR;AAAA,MACD;AAAA,MACA,OAAQ,UAAU,MAAM;AAAA,MACxB,UAAW,CAAE,UAAW;AACvB,cAAM,CAAE,YAAY,QAAS,IAAI,MAAM,MAAO,GAAI;AAClD,iBAAU,YAAY,QAAS;AAAA,MAChC;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
   "names": []
 }

package/build-module/utils/style-state.mjs

@@ -0,0 +1,132 @@
+// packages/block-library/src/utils/style-state.js
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { unlock } from "../lock-unlock.mjs";
+var { cleanEmptyObject, getStyleForState, setStyleForState } = unlock(
+  blockEditorPrivateApis
+);
+function getStateStyle(style, selectedState) {
+  return getStyleForState(style, selectedState) || {};
+}
+function getMappedDimensions(dimensions, dimensionKeyMap = {}) {
+  return Object.fromEntries(
+    Object.entries(dimensions).map(([key, value]) => [
+      dimensionKeyMap[key] || key,
+      value
+    ])
+  );
+}
+function getControlledDimensions(dimensions, dimensionKeys) {
+  if (!dimensionKeys) {
+    return dimensions;
+  }
+  return Object.fromEntries(
+    dimensionKeys.map((key) => [key, dimensions[key]])
+  );
+}
+function getStyleStateKey(selectedState) {
+  return [
+    selectedState?.viewport || "default",
+    selectedState?.pseudo || "default"
+  ].join(":");
+}
+function getStateDimensions(style, selectedState) {
+  return getStateStyle(style, selectedState)?.dimensions || {};
+}
+function getActiveDimensionValue(options = {}) {
+  const {
+    attributes = {},
+    style = attributes?.style,
+    selectedState,
+    hasSelectedStyleState,
+    attributeKey,
+    styleKey = attributeKey,
+    rootValue
+  } = options;
+  if (hasSelectedStyleState) {
+    return getStateDimensions(style, selectedState)?.[styleKey];
+  }
+  if (Object.hasOwn(options, "rootValue")) {
+    return rootValue;
+  }
+  return attributes?.[attributeKey];
+}
+function setStateDimensions(style, selectedState, nextDimensions) {
+  const stateStyle = getStateStyle(style, selectedState);
+  return setStyleForState(
+    style,
+    selectedState,
+    cleanEmptyObject({
+      ...stateStyle,
+      dimensions: cleanEmptyObject({
+        ...stateStyle?.dimensions,
+        ...nextDimensions
+      })
+    })
+  );
+}
+function getDimensionUpdateAttributes({
+  style,
+  selectedState,
+  hasSelectedStyleState,
+  nextDimensions,
+  dimensionKeyMap,
+  dimensionKeys
+}) {
+  const controlledDimensions = getControlledDimensions(
+    nextDimensions,
+    dimensionKeys
+  );
+  if (!hasSelectedStyleState) {
+    return controlledDimensions;
+  }
+  return {
+    style: setStateDimensions(
+      style,
+      selectedState,
+      getMappedDimensions(controlledDimensions, dimensionKeyMap)
+    )
+  };
+}
+function resetDimensions(style, keys) {
+  const dimensionsReset = Object.fromEntries(
+    keys.map((key) => [key, void 0])
+  );
+  return cleanEmptyObject({
+    ...style,
+    dimensions: cleanEmptyObject({
+      ...style?.dimensions,
+      ...dimensionsReset
+    })
+  });
+}
+function resetStateDimensions(style, selectedState, keys) {
+  return setStyleForState(
+    style,
+    selectedState,
+    resetDimensions(getStateStyle(style, selectedState), keys)
+  );
+}
+function getDimensionResetAttributes({
+  attributes = {},
+  style = attributes?.style,
+  selectedState,
+  hasSelectedStyleState,
+  keys,
+  defaultAttributes = {}
+}) {
+  return {
+    ...hasSelectedStyleState ? {} : { ...attributes, ...defaultAttributes },
+    style: hasSelectedStyleState ? resetStateDimensions(style, selectedState, keys) : resetDimensions(style, keys)
+  };
+}
+export {
+  getActiveDimensionValue,
+  getDimensionResetAttributes,
+  getDimensionUpdateAttributes,
+  getStateDimensions,
+  getStyleStateKey,
+  resetDimensions,
+  resetStateDimensions,
+  setStateDimensions
+};
+//# sourceMappingURL=style-state.mjs.map

package/build-module/utils/style-state.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/style-state.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../lock-unlock';\n\nconst { cleanEmptyObject, getStyleForState, setStyleForState } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction getStateStyle( style, selectedState ) {\n\treturn getStyleForState( style, selectedState ) || {};\n}\n\nfunction getMappedDimensions( dimensions, dimensionKeyMap = {} ) {\n\treturn Object.fromEntries(\n\t\tObject.entries( dimensions ).map( ( [ key, value ] ) => [\n\t\t\tdimensionKeyMap[ key ] || key,\n\t\t\tvalue,\n\t\t] )\n\t);\n}\n\nfunction getControlledDimensions( dimensions, dimensionKeys ) {\n\tif ( ! dimensionKeys ) {\n\t\treturn dimensions;\n\t}\n\n\treturn Object.fromEntries(\n\t\tdimensionKeys.map( ( key ) => [ key, dimensions[ key ] ] )\n\t);\n}\n\nexport function getStyleStateKey( selectedState ) {\n\treturn [\n\t\tselectedState?.viewport || 'default',\n\t\tselectedState?.pseudo || 'default',\n\t].join( ':' );\n}\n\nexport function getStateDimensions( style, selectedState ) {\n\treturn getStateStyle( style, selectedState )?.dimensions || {};\n}\n\nexport function getActiveDimensionValue( options = {} ) {\n\tconst {\n\t\tattributes = {},\n\t\tstyle = attributes?.style,\n\t\tselectedState,\n\t\thasSelectedStyleState,\n\t\tattributeKey,\n\t\tstyleKey = attributeKey,\n\t\trootValue,\n\t} = options;\n\n\tif ( hasSelectedStyleState ) {\n\t\treturn getStateDimensions( style, selectedState )?.[ styleKey ];\n\t}\n\n\tif ( Object.hasOwn( options, 'rootValue' ) ) {\n\t\treturn rootValue;\n\t}\n\n\treturn attributes?.[ attributeKey ];\n}\n\nexport function setStateDimensions( style, selectedState, nextDimensions ) {\n\tconst stateStyle = getStateStyle( style, selectedState );\n\n\treturn setStyleForState(\n\t\tstyle,\n\t\tselectedState,\n\t\tcleanEmptyObject( {\n\t\t\t...stateStyle,\n\t\t\tdimensions: cleanEmptyObject( {\n\t\t\t\t...stateStyle?.dimensions,\n\t\t\t\t...nextDimensions,\n\t\t\t} ),\n\t\t} )\n\t);\n}\n\nexport function getDimensionUpdateAttributes( {\n\tstyle,\n\tselectedState,\n\thasSelectedStyleState,\n\tnextDimensions,\n\tdimensionKeyMap,\n\tdimensionKeys,\n} ) {\n\tconst controlledDimensions = getControlledDimensions(\n\t\tnextDimensions,\n\t\tdimensionKeys\n\t);\n\n\tif ( ! hasSelectedStyleState ) {\n\t\treturn controlledDimensions;\n\t}\n\n\treturn {\n\t\tstyle: setStateDimensions(\n\t\t\tstyle,\n\t\t\tselectedState,\n\t\t\tgetMappedDimensions( controlledDimensions, dimensionKeyMap )\n\t\t),\n\t};\n}\n\nexport function resetDimensions( style, keys ) {\n\tconst dimensionsReset = Object.fromEntries(\n\t\tkeys.map( ( key ) => [ key, undefined ] )\n\t);\n\n\treturn cleanEmptyObject( {\n\t\t...style,\n\t\tdimensions: cleanEmptyObject( {\n\t\t\t...style?.dimensions,\n\t\t\t...dimensionsReset,\n\t\t} ),\n\t} );\n}\n\nexport function resetStateDimensions( style, selectedState, keys ) {\n\treturn setStyleForState(\n\t\tstyle,\n\t\tselectedState,\n\t\tresetDimensions( getStateStyle( style, selectedState ), keys )\n\t);\n}\n\nexport function getDimensionResetAttributes( {\n\tattributes = {},\n\tstyle = attributes?.style,\n\tselectedState,\n\thasSelectedStyleState,\n\tkeys,\n\tdefaultAttributes = {},\n} ) {\n\treturn {\n\t\t...( hasSelectedStyleState\n\t\t\t? {}\n\t\t\t: { ...attributes, ...defaultAttributes } ),\n\t\tstyle: hasSelectedStyleState\n\t\t\t? resetStateDimensions( style, selectedState, keys )\n\t\t\t: resetDimensions( style, keys ),\n\t};\n}\n"],
+  "mappings": ";AAGA,SAAS,eAAe,8BAA8B;AAKtD,SAAS,cAAc;AAEvB,IAAM,EAAE,kBAAkB,kBAAkB,iBAAiB,IAAI;AAAA,EAChE;AACD;AAEA,SAAS,cAAe,OAAO,eAAgB;AAC9C,SAAO,iBAAkB,OAAO,aAAc,KAAK,CAAC;AACrD;AAEA,SAAS,oBAAqB,YAAY,kBAAkB,CAAC,GAAI;AAChE,SAAO,OAAO;AAAA,IACb,OAAO,QAAS,UAAW,EAAE,IAAK,CAAE,CAAE,KAAK,KAAM,MAAO;AAAA,MACvD,gBAAiB,GAAI,KAAK;AAAA,MAC1B;AAAA,IACD,CAAE;AAAA,EACH;AACD;AAEA,SAAS,wBAAyB,YAAY,eAAgB;AAC7D,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AAEA,SAAO,OAAO;AAAA,IACb,cAAc,IAAK,CAAE,QAAS,CAAE,KAAK,WAAY,GAAI,CAAE,CAAE;AAAA,EAC1D;AACD;AAEO,SAAS,iBAAkB,eAAgB;AACjD,SAAO;AAAA,IACN,eAAe,YAAY;AAAA,IAC3B,eAAe,UAAU;AAAA,EAC1B,EAAE,KAAM,GAAI;AACb;AAEO,SAAS,mBAAoB,OAAO,eAAgB;AAC1D,SAAO,cAAe,OAAO,aAAc,GAAG,cAAc,CAAC;AAC9D;AAEO,SAAS,wBAAyB,UAAU,CAAC,GAAI;AACvD,QAAM;AAAA,IACL,aAAa,CAAC;AAAA,IACd,QAAQ,YAAY;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,EACD,IAAI;AAEJ,MAAK,uBAAwB;AAC5B,WAAO,mBAAoB,OAAO,aAAc,IAAK,QAAS;AAAA,EAC/D;AAEA,MAAK,OAAO,OAAQ,SAAS,WAAY,GAAI;AAC5C,WAAO;AAAA,EACR;AAEA,SAAO,aAAc,YAAa;AACnC;AAEO,SAAS,mBAAoB,OAAO,eAAe,gBAAiB;AAC1E,QAAM,aAAa,cAAe,OAAO,aAAc;AAEvD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA,iBAAkB;AAAA,MACjB,GAAG;AAAA,MACH,YAAY,iBAAkB;AAAA,QAC7B,GAAG,YAAY;AAAA,QACf,GAAG;AAAA,MACJ,CAAE;AAAA,IACH,CAAE;AAAA,EACH;AACD;AAEO,SAAS,6BAA8B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,uBAAuB;AAAA,IAC5B;AAAA,IACA;AAAA,EACD;AAEA,MAAK,CAAE,uBAAwB;AAC9B,WAAO;AAAA,EACR;AAEA,SAAO;AAAA,IACN,OAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,oBAAqB,sBAAsB,eAAgB;AAAA,IAC5D;AAAA,EACD;AACD;AAEO,SAAS,gBAAiB,OAAO,MAAO;AAC9C,QAAM,kBAAkB,OAAO;AAAA,IAC9B,KAAK,IAAK,CAAE,QAAS,CAAE,KAAK,MAAU,CAAE;AAAA,EACzC;AAEA,SAAO,iBAAkB;AAAA,IACxB,GAAG;AAAA,IACH,YAAY,iBAAkB;AAAA,MAC7B,GAAG,OAAO;AAAA,MACV,GAAG;AAAA,IACJ,CAAE;AAAA,EACH,CAAE;AACH;AAEO,SAAS,qBAAsB,OAAO,eAAe,MAAO;AAClE,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA,gBAAiB,cAAe,OAAO,aAAc,GAAG,IAAK;AAAA,EAC9D;AACD;AAEO,SAAS,4BAA6B;AAAA,EAC5C,aAAa,CAAC;AAAA,EACd,QAAQ,YAAY;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,CAAC;AACtB,GAAI;AACH,SAAO;AAAA,IACN,GAAK,wBACF,CAAC,IACD,EAAE,GAAG,YAAY,GAAG,kBAAkB;AAAA,IACzC,OAAO,wBACJ,qBAAsB,OAAO,eAAe,IAAK,IACjD,gBAAiB,OAAO,IAAK;AAAA,EACjC;AACD;",
+  "names": []
+}

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

@@ -1,11 +1,40 @@
 // packages/block-library/src/utils/waveform-player.js
-import { useRef } from "@wordpress/element";
-import { useRefEffect } from "@wordpress/compose";
+import { useEffect, useRef } from "@wordpress/element";
+import { useEvent, useRefEffect } from "@wordpress/compose";
 import { initWaveformPlayer } from "./waveform-utils.mjs";
 import { jsx } from "react/jsx-runtime";
-function WaveformPlayer({ src, title, artist, image, onEnded }) {
-  const onEndedRef = useRef(onEnded);
-  onEndedRef.current = onEnded;
+var EMPTY_ARTIST_PLACEHOLDER = " ";
+function updatePlayerMetadata(instance, { title, artist, image }) {
+  if (instance.titleEl) {
+    instance.titleEl.textContent = title ?? "";
+  }
+  if (instance.subtitleEl) {
+    instance.subtitleEl.textContent = artist ?? "";
+    instance.subtitleEl.style.display = artist ? "" : "none";
+  }
+  if (instance.artworkEl && image) {
+    instance.artworkEl.src = image;
+  }
+}
+function WaveformPlayer({
+  src,
+  title,
+  artist,
+  image,
+  waveformStyle,
+  onEnded
+}) {
+  const onEndedEvent = useEvent(onEnded);
+  const metadataRef = useRef({ title, artist, image });
+  const playerRef = useRef();
+  const hasImage = !!image;
+  useEffect(() => {
+    metadataRef.current = { title, artist, image };
+    const instance = playerRef.current?.instance;
+    if (instance) {
+      updatePlayerMetadata(instance, { title, artist, image });
+    }
+  }, [title, artist, image]);
   const ref = useRefEffect(
     (element) => {
       if (!src) {
@@ -17,23 +46,27 @@ function WaveformPlayer({ src, title, artist, image, onEnded }) {
         if (cancelled) {
           return;
         }
-        const { destroy } = initWaveformPlayer(element, {
+        const player = initWaveformPlayer(element, {
           src,
-          title,
-          artist,
-          image,
-          onEnded: () => onEndedRef.current?.()
+          ...metadataRef.current,
+          waveformStyle,
+          artist: metadataRef.current.artist || EMPTY_ARTIST_PLACEHOLDER,
+          onEnded: () => onEndedEvent?.()
         });
+        playerRef.current = player;
+        updatePlayerMetadata(player.instance, metadataRef.current);
+        const { destroy } = player;
         playerDestroy = destroy;
       }
       const timeoutId = setTimeout(init, 100);
       return () => {
         cancelled = true;
         clearTimeout(timeoutId);
+        playerRef.current = void 0;
         playerDestroy?.();
       };
     },
-    [src, title, artist, image]
+    [onEndedEvent, src, waveformStyle, hasImage]
   );
   return /* @__PURE__ */ jsx("div", { ref, className: "wp-block-playlist__waveform-player" });
 }

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

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