@wordpress/block-library 9.44.1-next.v.202604201441.0 → 9.45.0

package/build-module/tab-panel/edit.mjs

@@ -1,30 +1,103 @@
 // packages/block-library/src/tab-panel/edit.js
+import { __ } from "@wordpress/i18n";
 import {
   useBlockProps,
   useInnerBlocksProps,
   store as blockEditorStore
 } from "@wordpress/block-editor";
-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 TAB_PANELS_TEMPLATE = [["core/tab", {}]];
-function Edit({ clientId }) {
-  const blockProps = useBlockProps();
-  const innerBlocksProps = useInnerBlocksProps(blockProps, {
-    template: TAB_PANELS_TEMPLATE,
-    templateLock: false,
-    renderAppender: false
-    // Appender handled by individual tab blocks
-  });
-  const tabsClientId = useSelect(
-    (select) => select(blockEditorStore).getBlockRootClientId(clientId),
+import { useSelect, useDispatch } from "@wordpress/data";
+import { useMemo, useRef, useEffect } from "@wordpress/element";
+import Controls from "./controls.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TEMPLATE = [
+  [
+    "core/paragraph",
+    {
+      placeholder: __("Type / to choose a block")
+    }
+  ]
+];
+var { cancelAnimationFrame } = window;
+function Edit({ clientId, context, isSelected }) {
+  const focusRef = useRef();
+  const activeTabIndex = context["core/tabs-activeTabIndex"];
+  const editorActiveTabIndex = context["core/tabs-editorActiveTabIndex"];
+  const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
+  useEffect(() => {
+    return () => {
+      if (focusRef.current) {
+        cancelAnimationFrame(focusRef.current);
+      }
+    };
+  }, []);
+  const { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(
+    (select) => {
+      const {
+        getBlockRootClientId,
+        getBlockIndex,
+        hasSelectedInnerBlock
+      } = select(blockEditorStore);
+      const tabPanelsClientId = getBlockRootClientId(clientId);
+      const _tabsClientId = getBlockRootClientId(tabPanelsClientId);
+      const _blockIndex = getBlockIndex(clientId);
+      const _hasInnerBlocksSelected = hasSelectedInnerBlock(
+        clientId,
+        true
+      );
+      return {
+        blockIndex: _blockIndex,
+        hasInnerBlocksSelected: _hasInnerBlocksSelected,
+        tabsClientId: _tabsClientId
+      };
+    },
     [clientId]
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(AddTabToolbarControl, { tabsClientId }),
-    /* @__PURE__ */ jsx(RemoveTabToolbarControl, { tabsClientId }),
-    /* @__PURE__ */ jsx("div", { ...innerBlocksProps })
+  const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
+  useEffect(() => {
+    const isTabSelected = isSelected || hasInnerBlocksSelected;
+    if (isTabSelected && tabsClientId && effectiveActiveIndex !== blockIndex) {
+      __unstableMarkNextChangeAsNotPersistent();
+      updateBlockAttributes(tabsClientId, {
+        editorActiveTabIndex: blockIndex
+      });
+    }
+  }, [
+    isSelected,
+    hasInnerBlocksSelected,
+    tabsClientId,
+    effectiveActiveIndex,
+    blockIndex,
+    updateBlockAttributes,
+    __unstableMarkNextChangeAsNotPersistent
+  ]);
+  const isActiveTab = effectiveActiveIndex === blockIndex;
+  const isDefaultTab = activeTabIndex === blockIndex;
+  const isSelectedTab = useMemo(() => {
+    if (isSelected || hasInnerBlocksSelected) {
+      return true;
+    }
+    if (isActiveTab) {
+      return true;
+    }
+    return false;
+  }, [isSelected, hasInnerBlocksSelected, isActiveTab]);
+  const blockProps = useBlockProps({
+    hidden: !isSelectedTab,
+    tabIndex: isSelectedTab ? 0 : -1
+  });
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {
+    template: TEMPLATE
+  });
+  return /* @__PURE__ */ jsxs("section", { ...innerBlocksProps, children: [
+    /* @__PURE__ */ jsx(
+      Controls,
+      {
+        tabsClientId,
+        blockIndex,
+        isDefaultTab
+      }
+    ),
+    isSelectedTab && innerBlocksProps.children
   ] });
 }
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-panel/edit.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from '../tab/add-tab-toolbar-control';\nimport RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';\n\nconst TAB_PANELS_TEMPLATE = [ [ 'core/tab', {} ] ];\n\nexport default function Edit( { clientId } ) {\n\tconst blockProps = useBlockProps();\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TAB_PANELS_TEMPLATE,\n\t\ttemplateLock: false,\n\t\trenderAppender: false, // Appender handled by individual tab blocks\n\t} );\n\n\t// Get the parent tabs block clientId\n\tconst tabsClientId = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlockRootClientId( clientId ),\n\t\t[ clientId ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<div { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,iBAAiB;AAK1B,OAAO,0BAA0B;AACjC,OAAO,6BAA6B;AAqBlC,mBACC,KADD;AAnBF,IAAM,sBAAsB,CAAE,CAAE,YAAY,CAAC,CAAE,CAAE;AAElC,SAAR,KAAuB,EAAE,SAAS,GAAI;AAC5C,QAAM,aAAa,cAAc;AAEjC,QAAM,mBAAmB,oBAAqB,YAAY;AAAA,IACzD,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA;AAAA,EACjB,CAAE;AAGF,QAAM,eAAe;AAAA,IACpB,CAAE,WACD,OAAQ,gBAAiB,EAAE,qBAAsB,QAAS;AAAA,IAC3D,CAAE,QAAS;AAAA,EACZ;AAEA,SACC,iCACC;AAAA,wBAAC,wBAAqB,cAA8B;AAAA,IACpD,oBAAC,2BAAwB,cAA8B;AAAA,IACvD,oBAAC,SAAM,GAAG,kBAAmB;AAAA,KAC9B;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo, useRef, useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\n\nconst TEMPLATE = [\n\t[\n\t\t'core/paragraph',\n\t\t{\n\t\t\tplaceholder: __( 'Type / to choose a block' ),\n\t\t},\n\t],\n];\n\nconst { cancelAnimationFrame } = window;\n\nexport default function Edit( { clientId, context, isSelected } ) {\n\tconst focusRef = useRef();\n\n\t// Consume tab indices from context\n\tconst activeTabIndex = context[ 'core/tabs-activeTabIndex' ];\n\tconst editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];\n\tconst effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;\n\n\t// Clean up animation frames on unmount.\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( focusRef.current ) {\n\t\t\t\tcancelAnimationFrame( focusRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst { blockIndex, hasInnerBlocksSelected, tabsClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetBlockIndex,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\t// Get the tab-panel parent first\n\t\t\tconst tabPanelsClientId = getBlockRootClientId( clientId );\n\t\t\t// Then get the tabs parent\n\t\t\tconst _tabsClientId = getBlockRootClientId( tabPanelsClientId );\n\n\t\t\t// Get data about this instance of core/tab.\n\t\t\tconst _blockIndex = getBlockIndex( clientId );\n\t\t\tconst _hasInnerBlocksSelected = hasSelectedInnerBlock(\n\t\t\t\tclientId,\n\t\t\t\ttrue\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\tblockIndex: _blockIndex,\n\t\t\t\thasInnerBlocksSelected: _hasInnerBlocksSelected,\n\t\t\t\ttabsClientId: _tabsClientId,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\n\t// Sync editorActiveTabIndex when this tab is selected directly\n\tuseEffect( () => {\n\t\t// Only update if this tab is selected and not already the active index\n\t\tconst isTabSelected = isSelected || hasInnerBlocksSelected;\n\t\tif (\n\t\t\tisTabSelected &&\n\t\t\ttabsClientId &&\n\t\t\teffectiveActiveIndex !== blockIndex\n\t\t) {\n\t\t\t// Mark as non-persistent so it doesn't add to undo history\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\teditorActiveTabIndex: blockIndex,\n\t\t\t} );\n\t\t}\n\t}, [\n\t\tisSelected,\n\t\thasInnerBlocksSelected,\n\t\ttabsClientId,\n\t\teffectiveActiveIndex,\n\t\tblockIndex,\n\t\tupdateBlockAttributes,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t] );\n\n\t// Determine if this is the currently active tab (for editor visibility)\n\tconst isActiveTab = effectiveActiveIndex === blockIndex;\n\n\t// Determine if this is the default tab (for the \"Default Tab\" toggle in controls)\n\tconst isDefaultTab = activeTabIndex === blockIndex;\n\n\t/**\n\t * This hook determines if the current tab panel should be visible.\n\t * This is true if it is the editor active tab, or if it is selected directly.\n\t */\n\tconst isSelectedTab = useMemo( () => {\n\t\t// Show if this tab is directly selected or has selected inner blocks\n\t\tif ( isSelected || hasInnerBlocksSelected ) {\n\t\t\treturn true;\n\t\t}\n\t\t// Always show the active tab (at effectiveActiveIndex) regardless of other selection state.\n\t\t// This ensures the tab panel remains visible when editing labels in tab-list.\n\t\tif ( isActiveTab ) {\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t}, [ isSelected, hasInnerBlocksSelected, isActiveTab ] );\n\n\tconst blockProps = useBlockProps( {\n\t\thidden: ! isSelectedTab,\n\t\ttabIndex: isSelectedTab ? 0 : -1,\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TEMPLATE,\n\t} );\n\n\treturn (\n\t\t<section { ...innerBlocksProps }>\n\t\t\t<Controls\n\t\t\t\ttabsClientId={ tabsClientId }\n\t\t\t\tblockIndex={ blockIndex }\n\t\t\t\tisDefaultTab={ isDefaultTab }\n\t\t\t/>\n\t\t\t{ isSelectedTab && innerBlocksProps.children }\n\t\t</section>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,SAAS,QAAQ,iBAAiB;AAK3C,OAAO,cAAc;AAwHnB,SACC,KADD;AAtHF,IAAM,WAAW;AAAA,EAChB;AAAA,IACC;AAAA,IACA;AAAA,MACC,aAAa,GAAI,0BAA2B;AAAA,IAC7C;AAAA,EACD;AACD;AAEA,IAAM,EAAE,qBAAqB,IAAI;AAElB,SAAR,KAAuB,EAAE,UAAU,SAAS,WAAW,GAAI;AACjE,QAAM,WAAW,OAAO;AAGxB,QAAM,iBAAiB,QAAS,0BAA2B;AAC3D,QAAM,uBAAuB,QAAS,gCAAiC;AACvE,QAAM,uBAAuB,wBAAwB;AAGrD,YAAW,MAAM;AAChB,WAAO,MAAM;AACZ,UAAK,SAAS,SAAU;AACvB,6BAAsB,SAAS,OAAQ;AAAA,MACxC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,YAAY,wBAAwB,aAAa,IAAI;AAAA,IAC5D,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAG7B,YAAM,oBAAoB,qBAAsB,QAAS;AAEzD,YAAM,gBAAgB,qBAAsB,iBAAkB;AAG9D,YAAM,cAAc,cAAe,QAAS;AAC5C,YAAM,0BAA0B;AAAA,QAC/B;AAAA,QACA;AAAA,MACD;AAEA,aAAO;AAAA,QACN,YAAY;AAAA,QACZ,wBAAwB;AAAA,QACxB,cAAc;AAAA,MACf;AAAA,IACD;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAEA,QAAM,EAAE,uBAAuB,wCAAwC,IACtE,YAAa,gBAAiB;AAG/B,YAAW,MAAM;AAEhB,UAAM,gBAAgB,cAAc;AACpC,QACC,iBACA,gBACA,yBAAyB,YACxB;AAED,8CAAwC;AACxC,4BAAuB,cAAc;AAAA,QACpC,sBAAsB;AAAA,MACvB,CAAE;AAAA,IACH;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAGF,QAAM,cAAc,yBAAyB;AAG7C,QAAM,eAAe,mBAAmB;AAMxC,QAAM,gBAAgB,QAAS,MAAM;AAEpC,QAAK,cAAc,wBAAyB;AAC3C,aAAO;AAAA,IACR;AAGA,QAAK,aAAc;AAClB,aAAO;AAAA,IACR;AACA,WAAO;AAAA,EACR,GAAG,CAAE,YAAY,wBAAwB,WAAY,CAAE;AAEvD,QAAM,aAAa,cAAe;AAAA,IACjC,QAAQ,CAAE;AAAA,IACV,UAAU,gBAAgB,IAAI;AAAA,EAC/B,CAAE;AAEF,QAAM,mBAAmB,oBAAqB,YAAY;AAAA,IACzD,UAAU;AAAA,EACX,CAAE;AAEF,SACC,qBAAC,aAAU,GAAG,kBACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACE,iBAAiB,iBAAiB;AAAA,KACrC;AAEF;",
   "names": []
 }

package/build-module/tab-panel/index.mjs

@@ -1,5 +1,5 @@
 // packages/block-library/src/tab-panel/index.js
-import { contents as icon } from "@wordpress/icons";
+import { tabPanel as icon } from "@wordpress/icons";
 import initBlock from "../utils/init-block.mjs";
 import edit from "./edit.mjs";
 import save from "./save.mjs";

package/build-module/tab-panel/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-panel/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { contents 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\tedit,\n\tsave,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { tabPanel 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\tedit,\n\tsave,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
   "mappings": ";AAGA,SAAS,YAAY,YAAY;AAKjC,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,cAAc;AAErB,IAAM,EAAE,KAAK,IAAI;AAIV,IAAM,WAAW;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,OAAO,MAAM,UAAW,EAAE,MAAM,UAAU,SAAS,CAAE;",
   "names": []
 }

package/build-module/{tab → tab-panel}/init.mjs

@@ -1,4 +1,4 @@
-// packages/block-library/src/tab/init.js
+// packages/block-library/src/tab-panel/init.js
 import { init } from "./index.mjs";
 var init_default = init();
 export {

package/build-module/{tab → tab-panel}/init.mjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/tab/init.js"],
+  "sources": ["../../src/tab-panel/init.js"],
   "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { init } from './';\n\nexport default init();\n"],
   "mappings": ";AAGA,SAAS,YAAY;AAErB,IAAO,eAAQ,KAAK;",
   "names": []

package/build-module/{tab → tab-panel}/remove-tab-toolbar-control.mjs

@@ -1,4 +1,4 @@
-// packages/block-library/src/tab/remove-tab-toolbar-control.js
+// packages/block-library/src/tab-panel/remove-tab-toolbar-control.js
 import {
   BlockControls,
   store as blockEditorStore
@@ -15,16 +15,16 @@ function RemoveTabToolbarControl({ tabsClientId }) {
     __unstableMarkNextChangeAsNotPersistent
   } = useDispatch(blockEditorStore);
   const {
+    activeTabPanelClientId,
     activeTabClientId,
-    activeMenuItemClientId,
     tabCount,
     editorActiveTabIndex
   } = useSelect(
     (select) => {
       if (!tabsClientId) {
         return {
+          activeTabPanelClientId: null,
           activeTabClientId: null,
-          activeMenuItemClientId: null,
           tabCount: 0,
           editorActiveTabIndex: 0
         };
@@ -33,19 +33,19 @@ function RemoveTabToolbarControl({ tabsClientId }) {
       const tabsAttributes = getBlockAttributes(tabsClientId);
       const activeIndex = tabsAttributes?.editorActiveTabIndex ?? tabsAttributes?.activeTabIndex ?? 0;
       const innerBlocks = getBlocks(tabsClientId);
-      const tabPanel = innerBlocks.find(
-        (block) => block.name === "core/tab-panel"
+      const tabPanels = innerBlocks.find(
+        (block) => block.name === "core/tab-panels"
       );
-      const tabsMenu = innerBlocks.find(
-        (block) => block.name === "core/tabs-menu"
+      const tabList = innerBlocks.find(
+        (block) => block.name === "core/tab-list"
       );
-      const tabs = tabPanel?.innerBlocks || [];
-      const menuItems = tabsMenu?.innerBlocks || [];
+      const tabPanelBlocks = tabPanels?.innerBlocks || [];
+      const tabs = tabList?.innerBlocks || [];
+      const activeTabPanel = tabPanelBlocks[activeIndex];
       const activeTab = tabs[activeIndex];
-      const activeMenuItem = menuItems[activeIndex];
       return {
+        activeTabPanelClientId: activeTabPanel?.clientId || null,
         activeTabClientId: activeTab?.clientId || null,
-        activeMenuItemClientId: activeMenuItem?.clientId || null,
         tabCount: tabs.length,
         editorActiveTabIndex: activeIndex
       };
@@ -53,7 +53,7 @@ function RemoveTabToolbarControl({ tabsClientId }) {
     [tabsClientId]
   );
   const removeTab = () => {
-    if (!activeTabClientId || tabCount <= 1) {
+    if (!activeTabPanelClientId || tabCount <= 1) {
       return;
     }
     const newActiveIndex = editorActiveTabIndex >= tabCount - 1 ? tabCount - 2 : editorActiveTabIndex;
@@ -61,15 +61,15 @@ function RemoveTabToolbarControl({ tabsClientId }) {
     updateBlockAttributes(tabsClientId, {
       editorActiveTabIndex: newActiveIndex
     });
-    removeBlock(activeTabClientId, false);
-    if (activeMenuItemClientId) {
-      removeBlock(activeMenuItemClientId, false);
+    removeBlock(activeTabPanelClientId, false);
+    if (activeTabClientId) {
+      removeBlock(activeTabClientId, false);
     }
     if (tabsClientId) {
       selectBlock(tabsClientId);
     }
   };
-  const isDisabled = tabCount <= 1 || !activeTabClientId;
+  const isDisabled = tabCount <= 1 || !activeTabPanelClientId;
   return /* @__PURE__ */ jsx(BlockControls, { group: "other", children: /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(
     ToolbarButton,
     {

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tab-panel/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 tabs block.\n * Removes the currently active core/tab-panel and its corresponding\n * core/tab, 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\tactiveTabPanelClientId,\n\t\tactiveTabClientId,\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\tactiveTabPanelClientId: null,\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 tabPanels = 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\t\t\tconst tabPanelBlocks = tabPanels?.innerBlocks || [];\n\t\t\tconst tabs = tabList?.innerBlocks || [];\n\t\t\tconst activeTabPanel = tabPanelBlocks[ activeIndex ];\n\t\t\tconst activeTab = tabs[ activeIndex ];\n\n\t\t\treturn {\n\t\t\t\tactiveTabPanelClientId: activeTabPanel?.clientId || null,\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 ( ! activeTabPanelClientId || 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 panel and corresponding tab\n\t\tremoveBlock( activeTabPanelClientId, false );\n\t\tif ( activeTabClientId ) {\n\t\t\tremoveBlock( activeTabClientId, 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 || ! activeTabPanelClientId;\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;AA+FnC;AApFW,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,wBAAwB;AAAA,UACxB,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,YAAY,YAAY;AAAA,QAC7B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,UAAU,YAAY;AAAA,QAC3B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,iBAAiB,WAAW,eAAe,CAAC;AAClD,YAAM,OAAO,SAAS,eAAe,CAAC;AACtC,YAAM,iBAAiB,eAAgB,WAAY;AACnD,YAAM,YAAY,KAAM,WAAY;AAEpC,aAAO;AAAA,QACN,wBAAwB,gBAAgB,YAAY;AAAA,QACpD,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,0BAA0B,YAAY,GAAI;AAChD;AAAA,IACD;AAGA,UAAM,iBACL,wBAAwB,WAAW,IAChC,WAAW,IACX;AAEJ,4CAAwC;AACxC,0BAAuB,cAAc;AAAA,MACpC,sBAAsB;AAAA,IACvB,CAAE;AAGF,gBAAa,wBAAwB,KAAM;AAC3C,QAAK,mBAAoB;AACxB,kBAAa,mBAAmB,KAAM;AAAA,IACvC;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/tab-panel/save.mjs

@@ -2,9 +2,11 @@
 import { useBlockProps, useInnerBlocksProps } from "@wordpress/block-editor";
 import { jsx } from "react/jsx-runtime";
 function save() {
-  const blockProps = useBlockProps.save();
+  const blockProps = useBlockProps.save({
+    role: "tabpanel"
+  });
   const innerBlocksProps = useInnerBlocksProps.save(blockProps);
-  return /* @__PURE__ */ jsx("div", { ...innerBlocksProps });
+  return /* @__PURE__ */ jsx("section", { ...innerBlocksProps });
 }
 export {
   save as default

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab-panel/save.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';\n\nexport default function save() {\n\tconst blockProps = useBlockProps.save();\n\tconst innerBlocksProps = useInnerBlocksProps.save( blockProps );\n\n\treturn <div { ...innerBlocksProps } />;\n}\n"],
-  "mappings": ";AAGA,SAAS,eAAe,2BAA2B;AAM3C;AAJO,SAAR,OAAwB;AAC9B,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,mBAAmB,oBAAoB,KAAM,UAAW;AAE9D,SAAO,oBAAC,SAAM,GAAG,kBAAmB;AACrC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';\n\nexport default function save() {\n\tconst blockProps = useBlockProps.save( {\n\t\trole: 'tabpanel',\n\t} );\n\tconst innerBlocksProps = useInnerBlocksProps.save( blockProps );\n\n\treturn <section { ...innerBlocksProps } />;\n}\n"],
+  "mappings": ";AAGA,SAAS,eAAe,2BAA2B;AAQ3C;AANO,SAAR,OAAwB;AAC9B,QAAM,aAAa,cAAc,KAAM;AAAA,IACtC,MAAM;AAAA,EACP,CAAE;AACF,QAAM,mBAAmB,oBAAoB,KAAM,UAAW;AAE9D,SAAO,oBAAC,aAAU,GAAG,kBAAmB;AACzC;",
   "names": []
 }

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

@@ -0,0 +1,66 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"__experimental": true,
+	"apiVersion": 3,
+	"name": "core/tab-panels",
+	"title": "Tab Panels",
+	"description": "Container for tab panel content in a tabbed interface.",
+	"category": "design",
+	"textdomain": "default",
+	"parent": [ "core/tabs" ],
+	"allowedBlocks": [ "core/tab-panel" ],
+	"attributes": {},
+	"supports": {
+		"anchor": false,
+		"html": false,
+		"reusable": false,
+		"visibility": false,
+		"lock": false,
+		"dimensions": {
+			"aspectRatio": false,
+			"height": false,
+			"minHeight": false,
+			"width": false
+		},
+		"color": {
+			"background": true,
+			"text": true,
+			"heading": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"blockGap": false,
+			"padding": true,
+			"margin": true
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalFontFamily": true
+		},
+		"layout": {
+			"default": {
+				"type": "flex",
+				"flexWrap": "nowrap",
+				"justifyContent": "stretch",
+				"orientation": "vertical"
+			},
+			"allowSwitching": false,
+			"allowVerticalAlignment": false,
+			"allowOrientation": false,
+			"allowJustification": true,
+			"allowSizingOnChildren": false
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		}
+	},
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css"
+}

package/build-module/tab-panels/edit.mjs

@@ -0,0 +1,33 @@
+// packages/block-library/src/tab-panels/edit.js
+import {
+  useBlockProps,
+  useInnerBlocksProps,
+  store as blockEditorStore
+} from "@wordpress/block-editor";
+import { useSelect } from "@wordpress/data";
+import AddTabToolbarControl from "../tab-panel/add-tab-toolbar-control.mjs";
+import RemoveTabToolbarControl from "../tab-panel/remove-tab-toolbar-control.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TAB_PANELS_TEMPLATE = [["core/tab-panel", {}]];
+function Edit({ clientId }) {
+  const blockProps = useBlockProps();
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {
+    template: TAB_PANELS_TEMPLATE,
+    templateLock: false,
+    renderAppender: false
+    // Appender handled by individual tab blocks
+  });
+  const tabsClientId = useSelect(
+    (select) => select(blockEditorStore).getBlockRootClientId(clientId),
+    [clientId]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AddTabToolbarControl, { tabsClientId }),
+    /* @__PURE__ */ jsx(RemoveTabToolbarControl, { tabsClientId }),
+    /* @__PURE__ */ jsx("div", { ...innerBlocksProps })
+  ] });
+}
+export {
+  Edit as default
+};
+//# sourceMappingURL=edit.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tab-panels/edit.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseBlockProps,\n\tuseInnerBlocksProps,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';\nimport RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';\n\nconst TAB_PANELS_TEMPLATE = [ [ 'core/tab-panel', {} ] ];\n\nexport default function Edit( { clientId } ) {\n\tconst blockProps = useBlockProps();\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\ttemplate: TAB_PANELS_TEMPLATE,\n\t\ttemplateLock: false,\n\t\trenderAppender: false, // Appender handled by individual tab blocks\n\t} );\n\n\t// Get the parent tabs block clientId\n\tconst tabsClientId = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlockRootClientId( clientId ),\n\t\t[ clientId ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<div { ...innerBlocksProps } />\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,OACH;AACP,SAAS,iBAAiB;AAK1B,OAAO,0BAA0B;AACjC,OAAO,6BAA6B;AAqBlC,mBACC,KADD;AAnBF,IAAM,sBAAsB,CAAE,CAAE,kBAAkB,CAAC,CAAE,CAAE;AAExC,SAAR,KAAuB,EAAE,SAAS,GAAI;AAC5C,QAAM,aAAa,cAAc;AAEjC,QAAM,mBAAmB,oBAAqB,YAAY;AAAA,IACzD,UAAU;AAAA,IACV,cAAc;AAAA,IACd,gBAAgB;AAAA;AAAA,EACjB,CAAE;AAGF,QAAM,eAAe;AAAA,IACpB,CAAE,WACD,OAAQ,gBAAiB,EAAE,qBAAsB,QAAS;AAAA,IAC3D,CAAE,QAAS;AAAA,EACZ;AAEA,SACC,iCACC;AAAA,wBAAC,wBAAqB,cAA8B;AAAA,IACpD,oBAAC,2BAAwB,cAA8B;AAAA,IACvD,oBAAC,SAAM,GAAG,kBAAmB;AAAA,KAC9B;AAEF;",
+  "names": []
+}

package/build-module/{tabs-menu-item → tab-panels}/index.mjs

@@ -1,5 +1,5 @@
-// packages/block-library/src/tabs-menu-item/index.js
-import { tabsMenuItem as icon } from "@wordpress/icons";
+// packages/block-library/src/tab-panels/index.js
+import { contents as icon } from "@wordpress/icons";
 import initBlock from "../utils/init-block.mjs";
 import edit from "./edit.mjs";
 import save from "./save.mjs";

package/build-module/{tabs-menu → tab-panels}/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/tabs-menu/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { tabsMenu 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\tedit,\n\tsave,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
+  "sources": ["../../src/tab-panels/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { contents 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\tedit,\n\tsave,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"],
   "mappings": ";AAGA,SAAS,YAAY,YAAY;AAKjC,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,cAAc;AAErB,IAAM,EAAE,KAAK,IAAI;AAIV,IAAM,WAAW;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACD;AAEO,IAAM,OAAO,MAAM,UAAW,EAAE,MAAM,UAAU,SAAS,CAAE;",
   "names": []
 }

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

@@ -0,0 +1,12 @@
+// packages/block-library/src/tab-panels/save.js
+import { useBlockProps, useInnerBlocksProps } from "@wordpress/block-editor";
+import { jsx } from "react/jsx-runtime";
+function save() {
+  const blockProps = useBlockProps.save();
+  const innerBlocksProps = useInnerBlocksProps.save(blockProps);
+  return /* @__PURE__ */ jsx("div", { ...innerBlocksProps });
+}
+export {
+  save as default
+};
+//# sourceMappingURL=save.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tab-panels/save.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';\n\nexport default function save() {\n\tconst blockProps = useBlockProps.save();\n\tconst innerBlocksProps = useInnerBlocksProps.save( blockProps );\n\n\treturn <div { ...innerBlocksProps } />;\n}\n"],
+  "mappings": ";AAGA,SAAS,eAAe,2BAA2B;AAM3C;AAJO,SAAR,OAAwB;AAC9B,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,mBAAmB,oBAAoB,KAAM,UAAW;AAE9D,SAAO,oBAAC,SAAM,GAAG,kBAAmB;AACrC;",
+  "names": []
+}

package/build-module/tabs/block.json

@@ -7,7 +7,7 @@
 	"description": "Display content in a tabbed interface to help users navigate detailed content with ease.",
 	"category": "design",
 	"textdomain": "default",
-	"allowedBlocks": [ "core/tabs-menu", "core/tab-panel" ],
+	"allowedBlocks": [ "core/tab-list", "core/tab-panels" ],
 	"attributes": {
 		"activeTabIndex": {
 			"type": "number",

package/build-module/tabs/controls.mjs

@@ -1,6 +1,6 @@
 // packages/block-library/src/tabs/controls.js
-import AddTabToolbarControl from "../tab/add-tab-toolbar-control.mjs";
-import RemoveTabToolbarControl from "../tab/remove-tab-toolbar-control.mjs";
+import AddTabToolbarControl from "../tab-panel/add-tab-toolbar-control.mjs";
+import RemoveTabToolbarControl from "../tab-panel/remove-tab-toolbar-control.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Controls({ clientId }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/controls.js"],
-  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from '../tab/add-tab-toolbar-control';\nimport RemoveTabToolbarControl from '../tab/remove-tab-toolbar-control';\n\nexport default function Controls( { clientId } ) {\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl tabsClientId={ clientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ clientId } />\n\t\t</>\n\t);\n}\n"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from '../tab-panel/add-tab-toolbar-control';\nimport RemoveTabToolbarControl from '../tab-panel/remove-tab-toolbar-control';\n\nexport default function Controls( { clientId } ) {\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl tabsClientId={ clientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ clientId } />\n\t\t</>\n\t);\n}\n"],
   "mappings": ";AAGA,OAAO,0BAA0B;AACjC,OAAO,6BAA6B;AAIlC,mBACC,KADD;AAFa,SAAR,SAA2B,EAAE,SAAS,GAAI;AAChD,SACC,iCACC;AAAA,wBAAC,wBAAqB,cAAe,UAAW;AAAA,IAChD,oBAAC,2BAAwB,cAAe,UAAW;AAAA,KACpD;AAEF;",
   "names": []
 }

package/build-module/tabs/edit.mjs

@@ -9,31 +9,31 @@ import { useSelect } from "@wordpress/data";
 import { useMemo, useEffect } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import Controls from "./controls.mjs";
-import useTabMenuSync from "./use-tab-menu-sync.mjs";
+import useTabListSync from "./use-tab-list-sync.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var EMPTY_ARRAY = [];
 var TABS_TEMPLATE = [
   [
-    "core/tabs-menu",
+    "core/tab-list",
     {},
     [
-      ["core/tabs-menu-item", {}],
-      ["core/tabs-menu-item", {}]
+      ["core/tab", {}],
+      ["core/tab", {}]
     ]
   ],
   [
-    "core/tab-panel",
+    "core/tab-panels",
     {},
     [
       [
-        "core/tab",
+        "core/tab-panel",
         {
           label: __("Tab")
         },
         [["core/paragraph"]]
       ],
       [
-        "core/tab",
+        "core/tab-panel",
         {
           label: __("Tab")
         },
@@ -49,28 +49,33 @@ function Edit({ clientId, attributes, setAttributes }) {
       setAttributes({ editorActiveTabIndex: activeTabIndex });
     }
   }, []);
-  const { tabs, tabPanelClientId, menuItems, tabsMenuClientId } = useSelect(
+  const { tabPanels, tabPanelsClientId, tabs, tabListClientId } = useSelect(
     (select) => {
       const { getBlocks } = select(blockEditorStore);
       const innerBlocks = getBlocks(clientId);
-      const tabPanel = innerBlocks.find(
-        (block) => block.name === "core/tab-panel"
+      const tabPanelBlocks = innerBlocks.find(
+        (block) => block.name === "core/tab-panels"
       );
-      const tabsMenu = innerBlocks.find(
-        (block) => block.name === "core/tabs-menu"
+      const tabList = innerBlocks.find(
+        (block) => block.name === "core/tab-list"
       );
       return {
-        tabs: tabPanel?.innerBlocks ?? EMPTY_ARRAY,
-        tabPanelClientId: tabPanel?.clientId ?? null,
-        menuItems: tabsMenu?.innerBlocks ?? EMPTY_ARRAY,
-        tabsMenuClientId: tabsMenu?.clientId ?? null
+        tabPanels: tabPanelBlocks?.innerBlocks ?? EMPTY_ARRAY,
+        tabPanelsClientId: tabPanelBlocks?.clientId ?? null,
+        tabs: tabList?.innerBlocks ?? EMPTY_ARRAY,
+        tabListClientId: tabList?.clientId ?? null
       };
     },
     [clientId]
   );
-  useTabMenuSync({ tabs, menuItems, tabPanelClientId, tabsMenuClientId });
+  useTabListSync({
+    tabPanels,
+    tabs,
+    tabPanelsClientId,
+    tabListClientId
+  });
   const contextValue = useMemo(() => {
-    const tabList = tabs.map((tab, index) => ({
+    const tabList = tabPanels.map((tab, index) => ({
       id: tab.attributes.anchor || `tab-${index}`,
       label: tab.attributes.label || "",
       clientId: tab.clientId,
@@ -82,7 +87,7 @@ function Edit({ clientId, attributes, setAttributes }) {
       "core/tabs-activeTabIndex": activeTabIndex,
       "core/tabs-editorActiveTabIndex": editorActiveTabIndex
     };
-  }, [tabs, anchor, activeTabIndex, editorActiveTabIndex]);
+  }, [tabPanels, anchor, activeTabIndex, editorActiveTabIndex]);
   const blockProps = useBlockProps();
   const innerBlockProps = useInnerBlocksProps(blockProps, {
     __experimentalCaptureToolbars: true,