@wordpress/block-library 9.41.1-next.v.202603102151.0 → 9.42.0

package/build-module/tab/add-tab-toolbar-control.mjs

@@ -10,12 +10,13 @@ import { useDispatch, useSelect } from "@wordpress/data";
 import { jsx } from "react/jsx-runtime";
 function AddTabToolbarControl({ tabsClientId }) {
   const { insertBlock } = useDispatch(blockEditorStore);
-  const { tabPanelClientId, nextTabIndex } = useSelect(
+  const { tabPanelClientId, tabsMenuClientId, tabCount, existingAnchors } = useSelect(
     (select) => {
       if (!tabsClientId) {
         return {
           tabPanelClientId: null,
-          nextTabIndex: 0
+          tabsMenuClientId: null,
+          existingAnchors: []
         };
       }
       const { getBlocks } = select(blockEditorStore);
@@ -23,9 +24,14 @@ function AddTabToolbarControl({ tabsClientId }) {
       const tabPanel = innerBlocks.find(
         (block) => block.name === "core/tab-panel"
       );
+      const tabsMenu = innerBlocks.find(
+        (block) => block.name === "core/tabs-menu"
+      );
       return {
         tabPanelClientId: tabPanel?.clientId || null,
-        nextTabIndex: (tabPanel?.innerBlocks.length || 0) + 1
+        tabsMenuClientId: tabsMenu?.clientId || null,
+        tabCount: tabPanel?.innerBlocks?.length || 0,
+        existingAnchors: (tabPanel?.innerBlocks || []).map((block) => block.attributes.anchor).filter(Boolean)
       };
     },
     [tabsClientId]
@@ -34,12 +40,23 @@ function AddTabToolbarControl({ tabsClientId }) {
     if (!tabPanelClientId) {
       return;
     }
+    const existingAnchorSet = new Set(existingAnchors);
+    let tabNumber = tabCount + 1;
+    while (existingAnchorSet.has(`tab-${tabNumber}`)) {
+      tabNumber++;
+    }
     const newTabBlock = createBlock("core/tab", {
-      anchor: "tab-" + nextTabIndex,
+      anchor: `tab-${tabNumber}`,
       /* translators: %d: tab number */
-      label: sprintf(__("Tab %d"), nextTabIndex)
+      label: sprintf(__("Tab %d"), tabNumber)
     });
     insertBlock(newTabBlock, void 0, tabPanelClientId);
+    if (tabsMenuClientId) {
+      const newMenuItemBlock = createBlock("core/tabs-menu-item", {
+        anchor: `tab-${tabNumber}-button`
+      });
+      insertBlock(newMenuItemBlock, void 0, tabsMenuClientId);
+    }
   };
   return /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(
     ToolbarButton,

package/build-module/tab/add-tab-toolbar-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab/add-tab-toolbar-control.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { createBlock } from '@wordpress/blocks';\nimport {\n\tBlockControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * \"Add tab\" button in the block toolbar for the tab block.\n * Inserts new tabs into the tab-panel block.\n *\n * @param {Object} props\n * @param {string} props.tabsClientId The client ID of the parent tabs block.\n * @return {React.JSX.Element} The toolbar control element.\n */\nexport default function AddTabToolbarControl( { tabsClientId } ) {\n\tconst { insertBlock } = useDispatch( blockEditorStore );\n\n\t// Find the tab-panel block within the tabs block\n\tconst { tabPanelClientId, nextTabIndex } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! tabsClientId ) {\n\t\t\t\treturn {\n\t\t\t\t\ttabPanelClientId: null,\n\t\t\t\t\tnextTabIndex: 0,\n\t\t\t\t};\n\t\t\t}\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( tabsClientId );\n\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t);\n\t\t\treturn {\n\t\t\t\ttabPanelClientId: tabPanel?.clientId || null,\n\t\t\t\tnextTabIndex: ( tabPanel?.innerBlocks.length || 0 ) + 1,\n\t\t\t};\n\t\t},\n\t\t[ tabsClientId ]\n\t);\n\n\tconst addTab = () => {\n\t\tif ( ! tabPanelClientId ) {\n\t\t\treturn;\n\t\t}\n\t\tconst newTabBlock = createBlock( 'core/tab', {\n\t\t\tanchor: 'tab-' + nextTabIndex,\n\t\t\t/* translators: %d: tab number */\n\t\t\tlabel: sprintf( __( 'Tab %d' ), nextTabIndex ),\n\t\t} );\n\t\tinsertBlock( newTabBlock, undefined, tabPanelClientId );\n\t\t// @TODO: Possible select and focus the tabs-menu-item active tab RichText editor?\n\t};\n\n\treturn (\n\t\t<BlockControls group=\"other\">\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\tonClick={ addTab }\n\t\t\t\t\ttext={ __( 'Add tab' ) }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,SAAS,UAAU;AAC5B,SAAS,mBAAmB;AAC5B;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,cAAc,qBAAqB;AAC5C,SAAS,aAAa,iBAAiB;AAmDnC;AAzCW,SAAR,qBAAuC,EAAE,aAAa,GAAI;AAChE,QAAM,EAAE,YAAY,IAAI,YAAa,gBAAiB;AAGtD,QAAM,EAAE,kBAAkB,aAAa,IAAI;AAAA,IAC1C,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB,eAAO;AAAA,UACN,kBAAkB;AAAA,UAClB,cAAc;AAAA,QACf;AAAA,MACD;AACA,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,YAAa;AAC5C,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,aAAO;AAAA,QACN,kBAAkB,UAAU,YAAY;AAAA,QACxC,eAAgB,UAAU,YAAY,UAAU,KAAM;AAAA,MACvD;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,SAAS,MAAM;AACpB,QAAK,CAAE,kBAAmB;AACzB;AAAA,IACD;AACA,UAAM,cAAc,YAAa,YAAY;AAAA,MAC5C,QAAQ,SAAS;AAAA;AAAA,MAEjB,OAAO,QAAS,GAAI,QAAS,GAAG,YAAa;AAAA,IAC9C,CAAE;AACF,gBAAa,aAAa,QAAW,gBAAiB;AAAA,EAEvD;AAEA,SACC,oBAAC,iBAAc,OAAM,SACpB,8BAAC,gBACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MACV,MAAO,GAAI,SAAU;AAAA;AAAA,EACtB,GACD,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { sprintf, __ } from '@wordpress/i18n';\nimport { createBlock } from '@wordpress/blocks';\nimport {\n\tBlockControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * \"Add tab\" button in the block toolbar for the tab block.\n * Inserts a new core/tab into the tab-panel and a new core/tabs-menu-item\n * into the tabs-menu, keeping both in sync.\n *\n * @param {Object} props\n * @param {string} props.tabsClientId The client ID of the parent tabs block.\n * @return {React.JSX.Element} The toolbar control element.\n */\nexport default function AddTabToolbarControl( { tabsClientId } ) {\n\tconst { insertBlock } = useDispatch( blockEditorStore );\n\n\tconst { tabPanelClientId, tabsMenuClientId, tabCount, existingAnchors } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tif ( ! tabsClientId ) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\ttabPanelClientId: null,\n\t\t\t\t\t\ttabsMenuClientId: null,\n\t\t\t\t\t\texistingAnchors: [],\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\t\tconst innerBlocks = getBlocks( tabsClientId );\n\t\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t\t);\n\t\t\t\tconst tabsMenu = innerBlocks.find(\n\t\t\t\t\t( block ) => block.name === 'core/tabs-menu'\n\t\t\t\t);\n\t\t\t\treturn {\n\t\t\t\t\ttabPanelClientId: tabPanel?.clientId || null,\n\t\t\t\t\ttabsMenuClientId: tabsMenu?.clientId || null,\n\t\t\t\t\ttabCount: tabPanel?.innerBlocks?.length || 0,\n\t\t\t\t\texistingAnchors: ( tabPanel?.innerBlocks || [] )\n\t\t\t\t\t\t.map( ( block ) => block.attributes.anchor )\n\t\t\t\t\t\t.filter( Boolean ),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ tabsClientId ]\n\t\t);\n\n\tconst addTab = () => {\n\t\tif ( ! tabPanelClientId ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Start from count + 1 so the label stays sequential, then increment\n\t\t// until the anchor slot is free.\n\t\tconst existingAnchorSet = new Set( existingAnchors );\n\t\tlet tabNumber = tabCount + 1;\n\t\twhile ( existingAnchorSet.has( `tab-${ tabNumber }` ) ) {\n\t\t\ttabNumber++;\n\t\t}\n\n\t\tconst newTabBlock = createBlock( 'core/tab', {\n\t\t\tanchor: `tab-${ tabNumber }`,\n\t\t\t/* translators: %d: tab number */\n\t\t\tlabel: sprintf( __( 'Tab %d' ), tabNumber ),\n\t\t} );\n\t\tinsertBlock( newTabBlock, undefined, tabPanelClientId );\n\n\t\t// Insert a corresponding menu item into the tabs-menu.\n\t\tif ( tabsMenuClientId ) {\n\t\t\tconst newMenuItemBlock = createBlock( 'core/tabs-menu-item', {\n\t\t\t\tanchor: `tab-${ tabNumber }-button`,\n\t\t\t} );\n\t\t\tinsertBlock( newMenuItemBlock, undefined, tabsMenuClientId );\n\t\t}\n\t};\n\n\treturn (\n\t\t<BlockControls group=\"other\">\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\tonClick={ addTab }\n\t\t\t\t\ttext={ __( 'Add tab' ) }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,SAAS,UAAU;AAC5B,SAAS,mBAAmB;AAC5B;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,cAAc,qBAAqB;AAC5C,SAAS,aAAa,iBAAiB;AA4EnC;AAjEW,SAAR,qBAAuC,EAAE,aAAa,GAAI;AAChE,QAAM,EAAE,YAAY,IAAI,YAAa,gBAAiB;AAEtD,QAAM,EAAE,kBAAkB,kBAAkB,UAAU,gBAAgB,IACrE;AAAA,IACC,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB,eAAO;AAAA,UACN,kBAAkB;AAAA,UAClB,kBAAkB;AAAA,UAClB,iBAAiB,CAAC;AAAA,QACnB;AAAA,MACD;AACA,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,YAAa;AAC5C,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,aAAO;AAAA,QACN,kBAAkB,UAAU,YAAY;AAAA,QACxC,kBAAkB,UAAU,YAAY;AAAA,QACxC,UAAU,UAAU,aAAa,UAAU;AAAA,QAC3C,kBAAmB,UAAU,eAAe,CAAC,GAC3C,IAAK,CAAE,UAAW,MAAM,WAAW,MAAO,EAC1C,OAAQ,OAAQ;AAAA,MACnB;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAED,QAAM,SAAS,MAAM;AACpB,QAAK,CAAE,kBAAmB;AACzB;AAAA,IACD;AAIA,UAAM,oBAAoB,IAAI,IAAK,eAAgB;AACnD,QAAI,YAAY,WAAW;AAC3B,WAAQ,kBAAkB,IAAK,OAAQ,SAAU,EAAG,GAAI;AACvD;AAAA,IACD;AAEA,UAAM,cAAc,YAAa,YAAY;AAAA,MAC5C,QAAQ,OAAQ,SAAU;AAAA;AAAA,MAE1B,OAAO,QAAS,GAAI,QAAS,GAAG,SAAU;AAAA,IAC3C,CAAE;AACF,gBAAa,aAAa,QAAW,gBAAiB;AAGtD,QAAK,kBAAmB;AACvB,YAAM,mBAAmB,YAAa,uBAAuB;AAAA,QAC5D,QAAQ,OAAQ,SAAU;AAAA,MAC3B,CAAE;AACF,kBAAa,kBAAkB,QAAW,gBAAiB;AAAA,IAC5D;AAAA,EACD;AAEA,SACC,oBAAC,iBAAc,OAAM,SACpB,8BAAC,gBACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MACV,MAAO,GAAI,SAAU;AAAA;AAAA,EACtB,GACD,GACD;AAEF;",
   "names": []
 }

package/build-module/tab/remove-tab-toolbar-control.mjs

@@ -14,11 +14,17 @@ function RemoveTabToolbarControl({ tabsClientId }) {
     selectBlock,
     __unstableMarkNextChangeAsNotPersistent
   } = useDispatch(blockEditorStore);
-  const { activeTabClientId, tabCount, editorActiveTabIndex } = useSelect(
+  const {
+    activeTabClientId,
+    activeMenuItemClientId,
+    tabCount,
+    editorActiveTabIndex
+  } = useSelect(
     (select) => {
       if (!tabsClientId) {
         return {
           activeTabClientId: null,
+          activeMenuItemClientId: null,
           tabCount: 0,
           editorActiveTabIndex: 0
         };
@@ -30,10 +36,19 @@ function RemoveTabToolbarControl({ tabsClientId }) {
       const tabPanel = innerBlocks.find(
         (block) => block.name === "core/tab-panel"
       );
+      const tabsMenu = innerBlocks.find(
+        (block) => block.name === "core/tabs-menu"
+      );
       const tabs = tabPanel?.innerBlocks || [];
+      const menuItems = tabsMenu?.innerBlocks || [];
       const activeTab = tabs[activeIndex];
+      const expectedMenuAnchor = activeTab?.attributes?.anchor ? `${activeTab.attributes.anchor}-button` : null;
+      const activeMenuItem = expectedMenuAnchor ? menuItems.find(
+        (m) => m.attributes?.anchor === expectedMenuAnchor
+      ) : menuItems[activeIndex];
       return {
         activeTabClientId: activeTab?.clientId || null,
+        activeMenuItemClientId: activeMenuItem?.clientId || null,
         tabCount: tabs.length,
         editorActiveTabIndex: activeIndex
       };
@@ -50,6 +65,9 @@ function RemoveTabToolbarControl({ tabsClientId }) {
       editorActiveTabIndex: newActiveIndex
     });
     removeBlock(activeTabClientId, false);
+    if (activeMenuItemClientId) {
+      removeBlock(activeMenuItemClientId, false);
+    }
     if (tabsClientId) {
       selectBlock(tabsClientId);
     }

package/build-module/tab/remove-tab-toolbar-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab/remove-tab-toolbar-control.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBlockControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * \"Remove Tab\" button in the block toolbar for the tab block.\n * Removes the currently active tab from the tab-panel block.\n *\n * @param {Object} props\n * @param {string} props.tabsClientId The client ID of the parent tabs block.\n * @return {React.JSX.Element} The toolbar control element.\n */\nexport default function RemoveTabToolbarControl( { tabsClientId } ) {\n\tconst {\n\t\tremoveBlock,\n\t\tupdateBlockAttributes,\n\t\tselectBlock,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\t// Find the tab-panel block, active tab, and tab count within the tabs block\n\tconst { activeTabClientId, tabCount, editorActiveTabIndex } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! tabsClientId ) {\n\t\t\t\treturn {\n\t\t\t\t\tactiveTabClientId: null,\n\t\t\t\t\ttabCount: 0,\n\t\t\t\t\teditorActiveTabIndex: 0,\n\t\t\t\t};\n\t\t\t}\n\t\t\tconst { getBlocks, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst tabsAttributes = getBlockAttributes( tabsClientId );\n\t\t\tconst activeIndex =\n\t\t\t\ttabsAttributes?.editorActiveTabIndex ??\n\t\t\t\ttabsAttributes?.activeTabIndex ??\n\t\t\t\t0;\n\t\t\tconst innerBlocks = getBlocks( tabsClientId );\n\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t);\n\t\t\tconst tabs = tabPanel?.innerBlocks || [];\n\t\t\tconst activeTab = tabs[ activeIndex ];\n\t\t\treturn {\n\t\t\t\tactiveTabClientId: activeTab?.clientId || null,\n\t\t\t\ttabCount: tabs.length,\n\t\t\t\teditorActiveTabIndex: activeIndex,\n\t\t\t};\n\t\t},\n\t\t[ tabsClientId ]\n\t);\n\n\tconst removeTab = () => {\n\t\tif ( ! activeTabClientId || tabCount <= 1 ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate new active index after removal\n\t\tconst newActiveIndex =\n\t\t\teditorActiveTabIndex >= tabCount - 1\n\t\t\t\t? tabCount - 2 // If removing last tab, select the previous one\n\t\t\t\t: editorActiveTabIndex; // Otherwise keep the same index (next tab shifts into position)\n\n\t\t// Update the active tab index before removing\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\teditorActiveTabIndex: newActiveIndex,\n\t\t} );\n\n\t\t// Remove the tab\n\t\tremoveBlock( activeTabClientId, false );\n\n\t\t// Select the tabs block after removal\n\t\tif ( tabsClientId ) {\n\t\t\tselectBlock( tabsClientId );\n\t\t}\n\t};\n\n\t// Don't show the button if there's only one tab or no active tab\n\tconst isDisabled = tabCount <= 1 || ! activeTabClientId;\n\n\treturn (\n\t\t<BlockControls group=\"other\">\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\tonClick={ removeTab }\n\t\t\t\t\ttext={ __( 'Remove tab' ) }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,cAAc,qBAAqB;AAC5C,SAAS,UAAU;AACnB,SAAS,aAAa,iBAAiB;AAkFnC;AAxEW,SAAR,wBAA0C,EAAE,aAAa,GAAI;AACnE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,YAAa,gBAAiB;AAGlC,QAAM,EAAE,mBAAmB,UAAU,qBAAqB,IAAI;AAAA,IAC7D,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB,eAAO;AAAA,UACN,mBAAmB;AAAA,UACnB,UAAU;AAAA,UACV,sBAAsB;AAAA,QACvB;AAAA,MACD;AACA,YAAM,EAAE,WAAW,mBAAmB,IACrC,OAAQ,gBAAiB;AAC1B,YAAM,iBAAiB,mBAAoB,YAAa;AACxD,YAAM,cACL,gBAAgB,wBAChB,gBAAgB,kBAChB;AACD,YAAM,cAAc,UAAW,YAAa;AAC5C,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,OAAO,UAAU,eAAe,CAAC;AACvC,YAAM,YAAY,KAAM,WAAY;AACpC,aAAO;AAAA,QACN,mBAAmB,WAAW,YAAY;AAAA,QAC1C,UAAU,KAAK;AAAA,QACf,sBAAsB;AAAA,MACvB;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,YAAY,MAAM;AACvB,QAAK,CAAE,qBAAqB,YAAY,GAAI;AAC3C;AAAA,IACD;AAGA,UAAM,iBACL,wBAAwB,WAAW,IAChC,WAAW,IACX;AAGJ,4CAAwC;AACxC,0BAAuB,cAAc;AAAA,MACpC,sBAAsB;AAAA,IACvB,CAAE;AAGF,gBAAa,mBAAmB,KAAM;AAGtC,QAAK,cAAe;AACnB,kBAAa,YAAa;AAAA,IAC3B;AAAA,EACD;AAGA,QAAM,aAAa,YAAY,KAAK,CAAE;AAEtC,SACC,oBAAC,iBAAc,OAAM,SACpB,8BAAC,gBACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MACV,MAAO,GAAI,YAAa;AAAA,MACxB,UAAW;AAAA;AAAA,EACZ,GACD,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tBlockControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * \"Remove Tab\" button in the block toolbar for the tab block.\n * Removes the currently active core/tab and its corresponding\n * core/tabs-menu-item, keeping both in sync.\n *\n * @param {Object} props\n * @param {string} props.tabsClientId The client ID of the parent tabs block.\n * @return {React.JSX.Element} The toolbar control element.\n */\nexport default function RemoveTabToolbarControl( { tabsClientId } ) {\n\tconst {\n\t\tremoveBlock,\n\t\tupdateBlockAttributes,\n\t\tselectBlock,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst {\n\t\tactiveTabClientId,\n\t\tactiveMenuItemClientId,\n\t\ttabCount,\n\t\teditorActiveTabIndex,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! tabsClientId ) {\n\t\t\t\treturn {\n\t\t\t\t\tactiveTabClientId: null,\n\t\t\t\t\tactiveMenuItemClientId: null,\n\t\t\t\t\ttabCount: 0,\n\t\t\t\t\teditorActiveTabIndex: 0,\n\t\t\t\t};\n\t\t\t}\n\t\t\tconst { getBlocks, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\tconst tabsAttributes = getBlockAttributes( tabsClientId );\n\t\t\tconst activeIndex =\n\t\t\t\ttabsAttributes?.editorActiveTabIndex ??\n\t\t\t\ttabsAttributes?.activeTabIndex ??\n\t\t\t\t0;\n\t\t\tconst innerBlocks = getBlocks( tabsClientId );\n\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t);\n\t\t\tconst tabsMenu = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tabs-menu'\n\t\t\t);\n\t\t\tconst tabs = tabPanel?.innerBlocks || [];\n\t\t\tconst menuItems = tabsMenu?.innerBlocks || [];\n\t\t\tconst activeTab = tabs[ activeIndex ];\n\t\t\t// Match menu item by anchor (e.g. \"tab-1\" \u2192 \"tab-1-button\").\n\t\t\tconst expectedMenuAnchor = activeTab?.attributes?.anchor\n\t\t\t\t? `${ activeTab.attributes.anchor }-button`\n\t\t\t\t: null;\n\t\t\tconst activeMenuItem = expectedMenuAnchor\n\t\t\t\t? menuItems.find(\n\t\t\t\t\t\t( m ) => m.attributes?.anchor === expectedMenuAnchor\n\t\t\t\t  )\n\t\t\t\t: menuItems[ activeIndex ];\n\t\t\treturn {\n\t\t\t\tactiveTabClientId: activeTab?.clientId || null,\n\t\t\t\tactiveMenuItemClientId: activeMenuItem?.clientId || null,\n\t\t\t\ttabCount: tabs.length,\n\t\t\t\teditorActiveTabIndex: activeIndex,\n\t\t\t};\n\t\t},\n\t\t[ tabsClientId ]\n\t);\n\n\tconst removeTab = () => {\n\t\tif ( ! activeTabClientId || tabCount <= 1 ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate new active index after removal.\n\t\tconst newActiveIndex =\n\t\t\teditorActiveTabIndex >= tabCount - 1\n\t\t\t\t? tabCount - 2\n\t\t\t\t: editorActiveTabIndex;\n\n\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\teditorActiveTabIndex: newActiveIndex,\n\t\t} );\n\n\t\t// Remove the tab content block and the corresponding menu item.\n\t\tremoveBlock( activeTabClientId, false );\n\t\tif ( activeMenuItemClientId ) {\n\t\t\tremoveBlock( activeMenuItemClientId, false );\n\t\t}\n\n\t\tif ( tabsClientId ) {\n\t\t\tselectBlock( tabsClientId );\n\t\t}\n\t};\n\n\tconst isDisabled = tabCount <= 1 || ! activeTabClientId;\n\n\treturn (\n\t\t<BlockControls group=\"other\">\n\t\t\t<ToolbarGroup>\n\t\t\t\t<ToolbarButton\n\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\tonClick={ removeTab }\n\t\t\t\t\ttext={ __( 'Remove tab' ) }\n\t\t\t\t\tdisabled={ isDisabled }\n\t\t\t\t/>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,cAAc,qBAAqB;AAC5C,SAAS,UAAU;AACnB,SAAS,aAAa,iBAAiB;AAsGnC;AA3FW,SAAR,wBAA0C,EAAE,aAAa,GAAI;AACnE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,YAAa,gBAAiB;AAElC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB,eAAO;AAAA,UACN,mBAAmB;AAAA,UACnB,wBAAwB;AAAA,UACxB,UAAU;AAAA,UACV,sBAAsB;AAAA,QACvB;AAAA,MACD;AACA,YAAM,EAAE,WAAW,mBAAmB,IACrC,OAAQ,gBAAiB;AAC1B,YAAM,iBAAiB,mBAAoB,YAAa;AACxD,YAAM,cACL,gBAAgB,wBAChB,gBAAgB,kBAChB;AACD,YAAM,cAAc,UAAW,YAAa;AAC5C,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,OAAO,UAAU,eAAe,CAAC;AACvC,YAAM,YAAY,UAAU,eAAe,CAAC;AAC5C,YAAM,YAAY,KAAM,WAAY;AAEpC,YAAM,qBAAqB,WAAW,YAAY,SAC/C,GAAI,UAAU,WAAW,MAAO,YAChC;AACH,YAAM,iBAAiB,qBACpB,UAAU;AAAA,QACV,CAAE,MAAO,EAAE,YAAY,WAAW;AAAA,MAClC,IACA,UAAW,WAAY;AAC1B,aAAO;AAAA,QACN,mBAAmB,WAAW,YAAY;AAAA,QAC1C,wBAAwB,gBAAgB,YAAY;AAAA,QACpD,UAAU,KAAK;AAAA,QACf,sBAAsB;AAAA,MACvB;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,YAAY,MAAM;AACvB,QAAK,CAAE,qBAAqB,YAAY,GAAI;AAC3C;AAAA,IACD;AAGA,UAAM,iBACL,wBAAwB,WAAW,IAChC,WAAW,IACX;AAEJ,4CAAwC;AACxC,0BAAuB,cAAc;AAAA,MACpC,sBAAsB;AAAA,IACvB,CAAE;AAGF,gBAAa,mBAAmB,KAAM;AACtC,QAAK,wBAAyB;AAC7B,kBAAa,wBAAwB,KAAM;AAAA,IAC5C;AAEA,QAAK,cAAe;AACnB,kBAAa,YAAa;AAAA,IAC3B;AAAA,EACD;AAEA,QAAM,aAAa,YAAY,KAAK,CAAE;AAEtC,SACC,oBAAC,iBAAc,OAAM,SACpB,8BAAC,gBACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MACV,MAAO,GAAI,YAAa;AAAA,MACxB,UAAW;AAAA;AAAA,EACZ,GACD,GACD;AAEF;",
   "names": []
 }

package/build-module/tabs/edit.mjs

@@ -5,8 +5,8 @@ import {
   BlockContextProvider,
   store as blockEditorStore
 } from "@wordpress/block-editor";
-import { useSelect } from "@wordpress/data";
-import { useMemo, useEffect } from "@wordpress/element";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { useMemo, useEffect, useRef } from "@wordpress/element";
 import Controls from "./controls.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var TABS_TEMPLATE = [
@@ -16,7 +16,11 @@ var TABS_TEMPLATE = [
       lock: {
         remove: true
       }
-    }
+    },
+    [
+      ["core/tabs-menu-item", { anchor: "tab-1-button" }],
+      ["core/tabs-menu-item", { anchor: "tab-2-button" }]
+    ]
   ],
   [
     "core/tab-panel",
@@ -33,6 +37,14 @@ var TABS_TEMPLATE = [
           label: "Tab 1"
         },
         [["core/paragraph"]]
+      ],
+      [
+        "core/tab",
+        {
+          anchor: "tab-2",
+          label: "Tab 2"
+        },
+        [["core/paragraph"]]
       ]
     ]
   ]
@@ -49,22 +61,88 @@ function Edit({
       setAttributes({ editorActiveTabIndex: activeTabIndex });
     }
   }, []);
-  const tabs = useSelect(
+  const { removeBlock } = useDispatch(blockEditorStore);
+  const { tabs, menuItems } = useSelect(
     (select) => {
       const { getBlocks } = select(blockEditorStore);
       const innerBlocks = getBlocks(clientId);
       const tabPanel = innerBlocks.find(
         (block) => block.name === "core/tab-panel"
       );
-      if (!tabPanel) {
-        return [];
-      }
-      return tabPanel.innerBlocks.filter(
-        (block) => block.name === "core/tab"
+      const tabsMenu = innerBlocks.find(
+        (block) => block.name === "core/tabs-menu"
       );
+      return {
+        tabs: tabPanel ? tabPanel.innerBlocks.filter(
+          (block) => block.name === "core/tab"
+        ) : [],
+        menuItems: tabsMenu ? getBlocks(tabsMenu.clientId).filter((b) => b.name === "core/tabs-menu-item").map((b) => ({
+          clientId: b.clientId,
+          anchor: b.attributes.anchor ?? ""
+        })) : []
+      };
     },
     [clientId]
   );
+  const prevSyncStateRef = useRef(null);
+  useEffect(() => {
+    const currentTabs = tabs.map((tab) => ({
+      clientId: tab.clientId,
+      anchor: tab.attributes.anchor ?? ""
+    }));
+    if (prevSyncStateRef.current === null) {
+      prevSyncStateRef.current = {
+        tabs: currentTabs,
+        menuItems: [...menuItems]
+      };
+      return;
+    }
+    const { tabs: prevTabs, menuItems: prevMenuItems } = prevSyncStateRef.current;
+    const tabsRemoved = currentTabs.length < prevTabs.length;
+    const menuItemsRemoved = menuItems.length < prevMenuItems.length;
+    prevSyncStateRef.current = {
+      tabs: currentTabs,
+      menuItems: [...menuItems]
+    };
+    if (!tabsRemoved && !menuItemsRemoved || tabsRemoved && menuItemsRemoved) {
+      return;
+    }
+    const currentTabIds = new Set(currentTabs.map((t) => t.clientId));
+    const currentMenuItemIds = new Set(
+      menuItems.map((m) => m.clientId)
+    );
+    if (tabsRemoved) {
+      prevTabs.forEach((prevTab) => {
+        if (currentTabIds.has(prevTab.clientId)) {
+          return;
+        }
+        const expectedMenuAnchor = prevTab.anchor ? `${prevTab.anchor}-button` : null;
+        const menuItemToRemove = expectedMenuAnchor ? menuItems.find((m) => m.anchor === expectedMenuAnchor) : null;
+        if (menuItemToRemove) {
+          removeBlock(menuItemToRemove.clientId, false);
+          prevSyncStateRef.current.menuItems = prevSyncStateRef.current.menuItems.filter(
+            (m) => m.clientId !== menuItemToRemove.clientId
+          );
+        }
+      });
+    } else {
+      prevMenuItems.forEach((prevItem) => {
+        if (currentMenuItemIds.has(prevItem.clientId)) {
+          return;
+        }
+        const expectedTabAnchor = prevItem.anchor?.replace(/-button$/, "") ?? "";
+        const tabToRemove = tabs.find(
+          (tab) => (tab.attributes.anchor ?? "") === expectedTabAnchor
+        );
+        if (tabToRemove) {
+          removeBlock(tabToRemove.clientId, false);
+          prevSyncStateRef.current.tabs = prevSyncStateRef.current.tabs.filter(
+            (t) => t.clientId !== tabToRemove.clientId
+          );
+        }
+      });
+    }
+  }, [tabs, menuItems, removeBlock]);
   const contextValue = useMemo(() => {
     const tabList = tabs.map((tab, index) => ({
       id: tab.attributes.anchor || `tab-${index}`,

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, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\n\nconst TABS_TEMPLATE = [\n\t[\n\t\t'core/tabs-menu',\n\t\t{\n\t\t\tlock: {\n\t\t\t\tremove: true,\n\t\t\t},\n\t\t},\n\t],\n\t[\n\t\t'core/tab-panel',\n\t\t{\n\t\t\tlock: {\n\t\t\t\tremove: true,\n\t\t\t},\n\t\t},\n\t\t[\n\t\t\t[\n\t\t\t\t'core/tab',\n\t\t\t\t{\n\t\t\t\t\tanchor: 'tab-1',\n\t\t\t\t\tlabel: 'Tab 1',\n\t\t\t\t},\n\t\t\t\t[ [ 'core/paragraph' ] ],\n\t\t\t],\n\t\t],\n\t],\n];\n\nfunction Edit( {\n\tclientId,\n\tattributes,\n\tsetAttributes,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\tconst { anchor, activeTabIndex, editorActiveTabIndex } = attributes;\n\n\t/**\n\t * Initialize editorActiveTabIndex to activeTabIndex on mount.\n\t * This ensures the ephemeral editor state starts at the persisted default.\n\t */\n\tuseEffect( () => {\n\t\tif ( editorActiveTabIndex === undefined ) {\n\t\t\tsetAttributes( { editorActiveTabIndex: activeTabIndex } );\n\t\t}\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\t/**\n\t * Construct a list of core/tab blocks, used to create tabs-list context.\n\t */\n\tconst tabs = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( clientId );\n\n\t\t\t// Find tab-panel block and extract tab data\n\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t);\n\n\t\t\tif ( ! tabPanel ) {\n\t\t\t\treturn [];\n\t\t\t}\n\n\t\t\treturn tabPanel.innerBlocks.filter(\n\t\t\t\t( block ) => block.name === 'core/tab'\n\t\t\t);\n\t\t},\n\t\t[ clientId ]\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 tabs-menu to consume.\n\t\t */\n\t\tconst tabList = tabs.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}, [ tabs, anchor, activeTabIndex, editorActiveTabIndex ] );\n\n\t/**\n\t * Block props for the tabs container.\n\t */\n\tconst blockProps = useBlockProps( {\n\t\tclassName: layoutClassNames,\n\t} );\n\n\t/**\n\t * Innerblocks props for the tabs container.\n\t */\n\tconst innerBlockProps = useInnerBlocksProps( blockProps, {\n\t\t__experimentalCaptureToolbars: true,\n\t\ttemplate: TABS_TEMPLATE,\n\t\ttemplateLock: false,\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,SAAS,iBAAiB;AAKnC,OAAO,cAAc;AAoHlB,SACC,KADD;AAlHH,IAAM,gBAAgB;AAAA,EACrB;AAAA,IACC;AAAA,IACA;AAAA,MACC,MAAM;AAAA,QACL,QAAQ;AAAA,MACT;AAAA,IACD;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,MACC,MAAM;AAAA,QACL,QAAQ;AAAA,MACT;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,QACC;AAAA,QACA;AAAA,UACC,QAAQ;AAAA,UACR,OAAO;AAAA,QACR;AAAA,QACA,CAAE,CAAE,gBAAiB,CAAE;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACD;AAEA,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,4BAA4B;AAC7B,GAAI;AACH,QAAM,EAAE,QAAQ,gBAAgB,qBAAqB,IAAI;AAMzD,YAAW,MAAM;AAChB,QAAK,yBAAyB,QAAY;AACzC,oBAAe,EAAE,sBAAsB,eAAe,CAAE;AAAA,IACzD;AAAA,EACD,GAAG,CAAC,CAAE;AAKN,QAAM,OAAO;AAAA,IACZ,CAAE,WAAY;AACb,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,QAAS;AAGxC,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AAEA,UAAK,CAAE,UAAW;AACjB,eAAO,CAAC;AAAA,MACT;AAEA,aAAO,SAAS,YAAY;AAAA,QAC3B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAKA,QAAM,eAAe,QAAS,MAAM;AAMnC,UAAM,UAAU,KAAK,IAAK,CAAE,KAAK,WAAa;AAAA,MAC7C,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,MAAM,QAAQ,gBAAgB,oBAAqB,CAAE;AAK1D,QAAM,aAAa,cAAe;AAAA,IACjC,WAAW;AAAA,EACZ,CAAE;AAKF,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, useDispatch } from '@wordpress/data';\nimport { useMemo, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\n\nconst TABS_TEMPLATE = [\n\t[\n\t\t'core/tabs-menu',\n\t\t{\n\t\t\tlock: {\n\t\t\t\tremove: true,\n\t\t\t},\n\t\t},\n\t\t[\n\t\t\t[ 'core/tabs-menu-item', { anchor: 'tab-1-button' } ],\n\t\t\t[ 'core/tabs-menu-item', { anchor: 'tab-2-button' } ],\n\t\t],\n\t],\n\t[\n\t\t'core/tab-panel',\n\t\t{\n\t\t\tlock: {\n\t\t\t\tremove: true,\n\t\t\t},\n\t\t},\n\t\t[\n\t\t\t[\n\t\t\t\t'core/tab',\n\t\t\t\t{\n\t\t\t\t\tanchor: 'tab-1',\n\t\t\t\t\tlabel: 'Tab 1',\n\t\t\t\t},\n\t\t\t\t[ [ 'core/paragraph' ] ],\n\t\t\t],\n\t\t\t[\n\t\t\t\t'core/tab',\n\t\t\t\t{\n\t\t\t\t\tanchor: 'tab-2',\n\t\t\t\t\tlabel: 'Tab 2',\n\t\t\t\t},\n\t\t\t\t[ [ 'core/paragraph' ] ],\n\t\t\t],\n\t\t],\n\t],\n];\n\nfunction Edit( {\n\tclientId,\n\tattributes,\n\tsetAttributes,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\tconst { anchor, activeTabIndex, editorActiveTabIndex } = attributes;\n\n\t/**\n\t * Initialize editorActiveTabIndex to activeTabIndex on mount.\n\t * This ensures the ephemeral editor state starts at the persisted default.\n\t */\n\tuseEffect( () => {\n\t\tif ( editorActiveTabIndex === undefined ) {\n\t\t\tsetAttributes( { editorActiveTabIndex: activeTabIndex } );\n\t\t}\n\t}, [] ); // eslint-disable-line react-hooks/exhaustive-deps\n\n\tconst { removeBlock } = useDispatch( blockEditorStore );\n\n\t/**\n\t * Construct a list of core/tab blocks, used to create tabs-list context.\n\t * Also select menu items with their anchors for anchor-based deletion sync.\n\t */\n\tconst { tabs, menuItems } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlocks } = select( blockEditorStore );\n\t\t\tconst innerBlocks = getBlocks( clientId );\n\n\t\t\t// Find tab-panel block and extract tab data.\n\t\t\tconst tabPanel = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panel'\n\t\t\t);\n\n\t\t\t// Find tabs-menu block and get its children with their anchors.\n\t\t\tconst tabsMenu = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tabs-menu'\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\ttabs: tabPanel\n\t\t\t\t\t? tabPanel.innerBlocks.filter(\n\t\t\t\t\t\t\t( block ) => block.name === 'core/tab'\n\t\t\t\t\t  )\n\t\t\t\t\t: [],\n\t\t\t\tmenuItems: tabsMenu\n\t\t\t\t\t? getBlocks( tabsMenu.clientId )\n\t\t\t\t\t\t\t.filter( ( b ) => b.name === 'core/tabs-menu-item' )\n\t\t\t\t\t\t\t.map( ( b ) => ( {\n\t\t\t\t\t\t\t\tclientId: b.clientId,\n\t\t\t\t\t\t\t\tanchor: b.attributes.anchor ?? '',\n\t\t\t\t\t\t\t} ) )\n\t\t\t\t\t: [],\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\t/**\n\t * Keep tabs and menu items in sync when either is deleted directly (e.g.\n\t * via the Backspace key or List View).\n\t *\n\t * TODO: This effect only handles deletions. The two lists can get out of\n\t * sync in other cases: if a user pastes a core/tab block into the tab-panel\n\t * (or duplicates one), no corresponding tabs-menu-item is created; if a\n\t * user drags and drops a tabs-menu-item, the tab panel is not copied with\n\t * it. We should extend this effect to handle insertions, detecting when\n\t * tabs.length > menuItems.length and inserting the missing menu\n\t * item(s) at the correct index.\n\t */\n\tconst prevSyncStateRef = useRef( null );\n\tuseEffect( () => {\n\t\tconst currentTabs = tabs.map( ( tab ) => ( {\n\t\t\tclientId: tab.clientId,\n\t\t\tanchor: tab.attributes.anchor ?? '',\n\t\t} ) );\n\n\t\tif ( prevSyncStateRef.current === null ) {\n\t\t\tprevSyncStateRef.current = {\n\t\t\t\ttabs: currentTabs,\n\t\t\t\tmenuItems: [ ...menuItems ],\n\t\t\t};\n\t\t\treturn;\n\t\t}\n\n\t\tconst { tabs: prevTabs, menuItems: prevMenuItems } =\n\t\t\tprevSyncStateRef.current;\n\n\t\tconst tabsRemoved = currentTabs.length < prevTabs.length;\n\t\tconst menuItemsRemoved = menuItems.length < prevMenuItems.length;\n\n\t\t// Update snapshot to the current state.\n\t\t// Snapshot is updated eagerly; post-removal mutations keep it consistent\n\t\t// so the next effect invocation sees a stable baseline.\n\t\tprevSyncStateRef.current = {\n\t\t\ttabs: currentTabs,\n\t\t\tmenuItems: [ ...menuItems ],\n\t\t};\n\n\t\t// Lists are in sync, nothing changed, or toolbar already removed both.\n\t\tif (\n\t\t\t( ! tabsRemoved && ! menuItemsRemoved ) ||\n\t\t\t( tabsRemoved && menuItemsRemoved )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst currentTabIds = new Set( currentTabs.map( ( t ) => t.clientId ) );\n\t\tconst currentMenuItemIds = new Set(\n\t\t\tmenuItems.map( ( m ) => m.clientId )\n\t\t);\n\n\t\tif ( tabsRemoved ) {\n\t\t\tprevTabs.forEach( ( prevTab ) => {\n\t\t\t\tif ( currentTabIds.has( prevTab.clientId ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst expectedMenuAnchor = prevTab.anchor\n\t\t\t\t\t? `${ prevTab.anchor }-button`\n\t\t\t\t\t: null;\n\t\t\t\tconst menuItemToRemove = expectedMenuAnchor\n\t\t\t\t\t? menuItems.find( ( m ) => m.anchor === expectedMenuAnchor )\n\t\t\t\t\t: null;\n\t\t\t\tif ( menuItemToRemove ) {\n\t\t\t\t\tremoveBlock( menuItemToRemove.clientId, false );\n\t\t\t\t\tprevSyncStateRef.current.menuItems =\n\t\t\t\t\t\tprevSyncStateRef.current.menuItems.filter(\n\t\t\t\t\t\t\t( m ) => m.clientId !== menuItemToRemove.clientId\n\t\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} );\n\t\t} else {\n\t\t\tprevMenuItems.forEach( ( prevItem ) => {\n\t\t\t\tif ( currentMenuItemIds.has( prevItem.clientId ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst expectedTabAnchor =\n\t\t\t\t\tprevItem.anchor?.replace( /-button$/, '' ) ?? '';\n\t\t\t\tconst tabToRemove = tabs.find(\n\t\t\t\t\t( tab ) =>\n\t\t\t\t\t\t( tab.attributes.anchor ?? '' ) === expectedTabAnchor\n\t\t\t\t);\n\t\t\t\tif ( tabToRemove ) {\n\t\t\t\t\tremoveBlock( tabToRemove.clientId, false );\n\t\t\t\t\tprevSyncStateRef.current.tabs =\n\t\t\t\t\t\tprevSyncStateRef.current.tabs.filter(\n\t\t\t\t\t\t\t( t ) => t.clientId !== tabToRemove.clientId\n\t\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t}, [ tabs, menuItems, removeBlock ] );\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 tabs-menu to consume.\n\t\t */\n\t\tconst tabList = tabs.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}, [ tabs, anchor, activeTabIndex, editorActiveTabIndex ] );\n\n\t/**\n\t * Block props for the tabs container.\n\t */\n\tconst blockProps = useBlockProps( {\n\t\tclassName: layoutClassNames,\n\t} );\n\n\t/**\n\t * Innerblocks props for the tabs container.\n\t */\n\tconst innerBlockProps = useInnerBlocksProps( blockProps, {\n\t\t__experimentalCaptureToolbars: true,\n\t\ttemplate: TABS_TEMPLATE,\n\t\ttemplateLock: false,\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,WAAW,mBAAmB;AACvC,SAAS,SAAS,WAAW,cAAc;AAK3C,OAAO,cAAc;AA+OlB,SACC,KADD;AA7OH,IAAM,gBAAgB;AAAA,EACrB;AAAA,IACC;AAAA,IACA;AAAA,MACC,MAAM;AAAA,QACL,QAAQ;AAAA,MACT;AAAA,IACD;AAAA,IACA;AAAA,MACC,CAAE,uBAAuB,EAAE,QAAQ,eAAe,CAAE;AAAA,MACpD,CAAE,uBAAuB,EAAE,QAAQ,eAAe,CAAE;AAAA,IACrD;AAAA,EACD;AAAA,EACA;AAAA,IACC;AAAA,IACA;AAAA,MACC,MAAM;AAAA,QACL,QAAQ;AAAA,MACT;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,QACC;AAAA,QACA;AAAA,UACC,QAAQ;AAAA,UACR,OAAO;AAAA,QACR;AAAA,QACA,CAAE,CAAE,gBAAiB,CAAE;AAAA,MACxB;AAAA,MACA;AAAA,QACC;AAAA,QACA;AAAA,UACC,QAAQ;AAAA,UACR,OAAO;AAAA,QACR;AAAA,QACA,CAAE,CAAE,gBAAiB,CAAE;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACD;AAEA,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,4BAA4B;AAC7B,GAAI;AACH,QAAM,EAAE,QAAQ,gBAAgB,qBAAqB,IAAI;AAMzD,YAAW,MAAM;AAChB,QAAK,yBAAyB,QAAY;AACzC,oBAAe,EAAE,sBAAsB,eAAe,CAAE;AAAA,IACzD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,YAAY,IAAI,YAAa,gBAAiB;AAMtD,QAAM,EAAE,MAAM,UAAU,IAAI;AAAA,IAC3B,CAAE,WAAY;AACb,YAAM,EAAE,UAAU,IAAI,OAAQ,gBAAiB;AAC/C,YAAM,cAAc,UAAW,QAAS;AAGxC,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AAGA,YAAM,WAAW,YAAY;AAAA,QAC5B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AAEA,aAAO;AAAA,QACN,MAAM,WACH,SAAS,YAAY;AAAA,UACrB,CAAE,UAAW,MAAM,SAAS;AAAA,QAC5B,IACA,CAAC;AAAA,QACJ,WAAW,WACR,UAAW,SAAS,QAAS,EAC5B,OAAQ,CAAE,MAAO,EAAE,SAAS,qBAAsB,EAClD,IAAK,CAAE,OAAS;AAAA,UAChB,UAAU,EAAE;AAAA,UACZ,QAAQ,EAAE,WAAW,UAAU;AAAA,QAChC,EAAI,IACJ,CAAC;AAAA,MACL;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAcA,QAAM,mBAAmB,OAAQ,IAAK;AACtC,YAAW,MAAM;AAChB,UAAM,cAAc,KAAK,IAAK,CAAE,SAAW;AAAA,MAC1C,UAAU,IAAI;AAAA,MACd,QAAQ,IAAI,WAAW,UAAU;AAAA,IAClC,EAAI;AAEJ,QAAK,iBAAiB,YAAY,MAAO;AACxC,uBAAiB,UAAU;AAAA,QAC1B,MAAM;AAAA,QACN,WAAW,CAAE,GAAG,SAAU;AAAA,MAC3B;AACA;AAAA,IACD;AAEA,UAAM,EAAE,MAAM,UAAU,WAAW,cAAc,IAChD,iBAAiB;AAElB,UAAM,cAAc,YAAY,SAAS,SAAS;AAClD,UAAM,mBAAmB,UAAU,SAAS,cAAc;AAK1D,qBAAiB,UAAU;AAAA,MAC1B,MAAM;AAAA,MACN,WAAW,CAAE,GAAG,SAAU;AAAA,IAC3B;AAGA,QACG,CAAE,eAAe,CAAE,oBACnB,eAAe,kBAChB;AACD;AAAA,IACD;AAEA,UAAM,gBAAgB,IAAI,IAAK,YAAY,IAAK,CAAE,MAAO,EAAE,QAAS,CAAE;AACtE,UAAM,qBAAqB,IAAI;AAAA,MAC9B,UAAU,IAAK,CAAE,MAAO,EAAE,QAAS;AAAA,IACpC;AAEA,QAAK,aAAc;AAClB,eAAS,QAAS,CAAE,YAAa;AAChC,YAAK,cAAc,IAAK,QAAQ,QAAS,GAAI;AAC5C;AAAA,QACD;AACA,cAAM,qBAAqB,QAAQ,SAChC,GAAI,QAAQ,MAAO,YACnB;AACH,cAAM,mBAAmB,qBACtB,UAAU,KAAM,CAAE,MAAO,EAAE,WAAW,kBAAmB,IACzD;AACH,YAAK,kBAAmB;AACvB,sBAAa,iBAAiB,UAAU,KAAM;AAC9C,2BAAiB,QAAQ,YACxB,iBAAiB,QAAQ,UAAU;AAAA,YAClC,CAAE,MAAO,EAAE,aAAa,iBAAiB;AAAA,UAC1C;AAAA,QACF;AAAA,MACD,CAAE;AAAA,IACH,OAAO;AACN,oBAAc,QAAS,CAAE,aAAc;AACtC,YAAK,mBAAmB,IAAK,SAAS,QAAS,GAAI;AAClD;AAAA,QACD;AACA,cAAM,oBACL,SAAS,QAAQ,QAAS,YAAY,EAAG,KAAK;AAC/C,cAAM,cAAc,KAAK;AAAA,UACxB,CAAE,SACC,IAAI,WAAW,UAAU,QAAS;AAAA,QACtC;AACA,YAAK,aAAc;AAClB,sBAAa,YAAY,UAAU,KAAM;AACzC,2BAAiB,QAAQ,OACxB,iBAAiB,QAAQ,KAAK;AAAA,YAC7B,CAAE,MAAO,EAAE,aAAa,YAAY;AAAA,UACrC;AAAA,QACF;AAAA,MACD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAE,MAAM,WAAW,WAAY,CAAE;AAKpC,QAAM,eAAe,QAAS,MAAM;AAMnC,UAAM,UAAU,KAAK,IAAK,CAAE,KAAK,WAAa;AAAA,MAC7C,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,MAAM,QAAQ,gBAAgB,oBAAqB,CAAE;AAK1D,QAAM,aAAa,cAAe;AAAA,IACjC,WAAW;AAAA,EACZ,CAAE;AAKF,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;",
   "names": []
 }

package/build-module/tabs/index.mjs

@@ -12,13 +12,23 @@ var settings = {
     innerBlocks: [
       {
         name: "core/tabs-menu",
-        innerBlocks: [{ name: "core/tabs-menu-item" }]
+        innerBlocks: [
+          {
+            name: "core/tabs-menu-item",
+            attributes: { anchor: "tab-1-button" }
+          },
+          {
+            name: "core/tabs-menu-item",
+            attributes: { anchor: "tab-2-button" }
+          }
+        ]
       },
       {
         name: "core/tab-panel",
-        innerBlocks: [1, 2, 3].map((index) => ({
+        innerBlocks: [1, 2].map((index) => ({
           name: "core/tab",
           attributes: {
+            anchor: `tab-${index}`,
             label: sprintf(
               /** translators: %s: tab index number */
               __("Tab %s"),

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/tabs-menu',\n\t\t\t\tinnerBlocks: [ { name: 'core/tabs-menu-item' } ],\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/tab-panel',\n\t\t\t\tinnerBlocks: [ 1, 2, 3 ].map( ( index ) => ( {\n\t\t\t\t\tname: 'core/tab',\n\t\t\t\t\tattributes: {\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,CAAE,EAAE,MAAM,sBAAsB,CAAE;AAAA,MAChD;AAAA,MACA;AAAA,QACC,MAAM;AAAA,QACN,aAAa,CAAE,GAAG,GAAG,CAAE,EAAE,IAAK,CAAE,WAAa;AAAA,UAC5C,MAAM;AAAA,UACN,YAAY;AAAA,YACX,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/tabs-menu',\n\t\t\t\tinnerBlocks: [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'core/tabs-menu-item',\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/tabs-menu-item',\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-panel',\n\t\t\t\tinnerBlocks: [ 1, 2 ].map( ( index ) => ( {\n\t\t\t\t\tname: 'core/tab',\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;",
   "names": []
 }

package/build-module/tabs-menu/block.json

@@ -10,12 +10,7 @@
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
 	"allowedBlocks": [ "core/tabs-menu-item" ],
-	"usesContext": [
-		"core/tabs-list",
-		"core/tabs-id",
-		"core/tabs-activeTabIndex",
-		"core/tabs-editorActiveTabIndex"
-	],
+	"usesContext": [ "core/tabs-list" ],
 	"attributes": {},
 	"supports": {
 		"html": false,

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

@@ -1,183 +1,34 @@
 // packages/block-library/src/tabs-menu/edit.js
 import clsx from "clsx";
-import { __ } from "@wordpress/i18n";
 import {
   useBlockProps,
   useInnerBlocksProps,
-  BlockContextProvider,
-  __experimentalUseBlockPreview as useBlockPreview,
-  store as blockEditorStore,
-  useBlockEditContext
+  store as blockEditorStore
 } from "@wordpress/block-editor";
-import { useSelect, useDispatch } from "@wordpress/data";
-import {
-  memo,
-  useMemo,
-  useState,
-  useEffect,
-  useCallback
-} from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
 import AddTabToolbarControl from "../tab/add-tab-toolbar-control.mjs";
 import RemoveTabToolbarControl from "../tab/remove-tab-toolbar-control.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var TABS_MENU_ITEM_TEMPLATE = [["core/tabs-menu-item", {}]];
-var EMPTY_ARRAY = [];
-function TabsMenuItemPreview({
-  blocks,
-  blockContextId,
-  isHidden,
-  setActiveBlockContextId
-}) {
-  const blockPreviewProps = useBlockPreview({ blocks });
-  const handleOnClick = () => {
-    setActiveBlockContextId(blockContextId);
-  };
-  const style = {
-    display: isHidden ? "none" : "flex"
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...blockPreviewProps,
-      tabIndex: 0,
-      role: "button",
-      onClick: handleOnClick,
-      onKeyDown: handleOnClick,
-      style
-    }
-  );
-}
-var MemoizedTabsMenuItemPreview = memo(TabsMenuItemPreview);
-function TabsMenuItemTemplateBlocks({ wrapperProps = {}, layout }) {
-  const innerBlocksProps = useInnerBlocksProps(wrapperProps, {
-    template: TABS_MENU_ITEM_TEMPLATE,
-    templateLock: "all",
-    renderAppender: false,
-    layout
-  });
-  return innerBlocksProps.children;
-}
-function Edit({
-  context,
-  clientId,
-  __unstableLayoutClassNames: layoutClassNames
-}) {
-  const { layout } = useBlockEditContext();
-  const tabsId = context["core/tabs-id"] || null;
-  const tabsList = context["core/tabs-list"] || EMPTY_ARRAY;
-  const activeTabIndex = context["core/tabs-activeTabIndex"] ?? 0;
-  const editorActiveTabIndex = context["core/tabs-editorActiveTabIndex"];
-  const effectiveActiveIndex = useMemo(() => {
-    return editorActiveTabIndex ?? activeTabIndex;
-  }, [editorActiveTabIndex, activeTabIndex]);
-  const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
-  const { updateBlockAttributes } = useDispatch(blockEditorStore);
-  const [activeBlockContextId, setActiveBlockContextId] = useState(null);
-  const { blocks, tabsClientId } = useSelect(
-    (select) => {
-      const { getBlocks, getBlockRootClientId } = select(blockEditorStore);
-      return {
-        blocks: getBlocks(clientId),
-        tabsClientId: getBlockRootClientId(clientId)
-      };
-    },
+function Edit({ clientId, __unstableLayoutClassNames: layoutClassNames }) {
+  const { tabsClientId } = useSelect(
+    (select) => ({
+      tabsClientId: select(blockEditorStore).getBlockRootClientId(clientId)
+    }),
     [clientId]
   );
-  const blockContexts = useMemo(() => {
-    return tabsList.map((tab, index) => ({
-      "core/tabs-menu-item-index": index,
-      "core/tabs-menu-item-id": tab.id || `tab-${index}`,
-      "core/tabs-menu-item-label": tab.label || "",
-      "core/tabs-menu-item-clientId": tab.clientId,
-      // Pass through parent context
-      "core/tabs-id": tabsId,
-      "core/tabs-list": tabsList,
-      "core/tabs-activeTabIndex": activeTabIndex,
-      "core/tabs-editorActiveTabIndex": editorActiveTabIndex
-    }));
-  }, [tabsList, tabsId, activeTabIndex, editorActiveTabIndex]);
-  const getContextId = useCallback((blockContext) => {
-    return `tab-context-${blockContext["core/tabs-menu-item-index"]}`;
-  }, []);
-  useEffect(() => {
-    if (blockContexts.length > 0 && activeBlockContextId === null) {
-      setActiveBlockContextId(getContextId(blockContexts[0]));
-    }
-  }, [blockContexts, activeBlockContextId, getContextId]);
-  useEffect(() => {
-    if (blockContexts.length > 0 && effectiveActiveIndex < blockContexts.length) {
-      const newContextId = getContextId(
-        blockContexts[effectiveActiveIndex]
-      );
-      setActiveBlockContextId(
-        (prevId) => prevId !== newContextId ? newContextId : prevId
-      );
-    }
-  }, [effectiveActiveIndex, blockContexts, getContextId]);
-  const handleTabContextClick = useCallback(
-    (index) => {
-      if (tabsClientId && index !== effectiveActiveIndex) {
-        __unstableMarkNextChangeAsNotPersistent();
-        updateBlockAttributes(tabsClientId, {
-          editorActiveTabIndex: index
-        });
-      }
-    },
-    [
-      tabsClientId,
-      effectiveActiveIndex,
-      updateBlockAttributes,
-      __unstableMarkNextChangeAsNotPersistent
-    ]
-  );
   const blockProps = useBlockProps({
     className: clsx(layoutClassNames),
     role: "tablist"
   });
-  if (tabsList.length === 0) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(AddTabToolbarControl, { tabsClientId }),
-      /* @__PURE__ */ jsx(RemoveTabToolbarControl, { tabsClientId }),
-      /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx("span", { className: "tabs__tab-label tabs__tab-label--placeholder", children: __("Add tabs to display menu") }) })
-    ] });
-  }
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {
+    allowedBlocks: ["core/tabs-menu-item"],
+    orientation: "horizontal",
+    renderAppender: false
+  });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(AddTabToolbarControl, { tabsClientId }),
     /* @__PURE__ */ jsx(RemoveTabToolbarControl, { tabsClientId }),
-    /* @__PURE__ */ jsx("div", { ...blockProps, children: blockContexts.map((blockContext, index) => {
-      const contextId = getContextId(blockContext);
-      const isVisible = contextId === activeBlockContextId;
-      return /* @__PURE__ */ jsxs(
-        BlockContextProvider,
-        {
-          value: blockContext,
-          children: [
-            isVisible ? /* @__PURE__ */ jsx(
-              TabsMenuItemTemplateBlocks,
-              {
-                wrapperProps: {
-                  onClick: () => handleTabContextClick(index)
-                },
-                layout
-              }
-            ) : null,
-            /* @__PURE__ */ jsx(
-              MemoizedTabsMenuItemPreview,
-              {
-                blocks,
-                blockContextId: contextId,
-                setActiveBlockContextId: (id) => {
-                  setActiveBlockContextId(id);
-                  handleTabContextClick(index);
-                },
-                isHidden: isVisible
-              }
-            )
-          ]
-        },
-        contextId
-      );
-    }) })
+    /* @__PURE__ */ jsx("div", { ...innerBlocksProps })
   ] });
 }
 var edit_default = Edit;