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

package/build/tab/block.json

@@ -4,25 +4,23 @@
 	"apiVersion": 3,
 	"name": "core/tab",
 	"title": "Tab",
-	"description": "Content for a tab in a tabbed interface.",
+	"description": "A single tab button in the tab list.",
 	"category": "design",
 	"textdomain": "default",
-	"attributes": {
-		"label": {
-			"type": "string",
-			"default": ""
-		}
-	},
-	"parent": [ "core/tab-panel" ],
+	"parent": [ "core/tab-list" ],
 	"usesContext": [
+		"core/tabs-list",
 		"core/tabs-activeTabIndex",
 		"core/tabs-editorActiveTabIndex",
-		"core/tabs-id"
+		"core/tab-index",
+		"core/tab-id",
+		"core/tab-label"
 	],
 	"supports": {
-		"anchor": true,
 		"html": false,
 		"reusable": false,
+		"visibility": false,
+		"lock": false,
 		"color": {
 			"background": true,
 			"text": true,
@@ -31,26 +29,28 @@
 				"text": true
 			}
 		},
-		"layout": true,
-		"spacing": {
-			"blockGap": true,
-			"padding": true,
-			"margin": false
-		},
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true,
+			"textAlign": true,
 			"__experimentalDefaultControls": {
-				"fontSize": true,
-				"__experimentalFontFamily": true
+				"fontSize": true
 			}
 		},
-		"renaming": true,
-		"visibility": false
-	},
-	"providesContext": {
-		"core/tab-label": "label"
+		"spacing": {
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		}
 	},
 	"editorScript": "file:./index.js",
+	"editorStyle": "file:./editor.css",
 	"style": "file:./style-index.css"
 }

package/build/tab/controls.cjs

@@ -34,56 +34,13 @@ __export(controls_exports, {
 });
 module.exports = __toCommonJS(controls_exports);
 var import_block_editor = require("@wordpress/block-editor");
-var import_components = require("@wordpress/components");
-var import_i18n = require("@wordpress/i18n");
-var import_data = require("@wordpress/data");
-var import_add_tab_toolbar_control = __toESM(require("./add-tab-toolbar-control.cjs"));
-var import_remove_tab_toolbar_control = __toESM(require("./remove-tab-toolbar-control.cjs"));
-var import_hooks = require("../utils/hooks.cjs");
+var import_add_tab_toolbar_control = __toESM(require("../tab-panel/add-tab-toolbar-control.cjs"));
+var import_remove_tab_toolbar_control = __toESM(require("../tab-panel/remove-tab-toolbar-control.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
-function Controls({ tabsClientId, blockIndex, isDefaultTab }) {
-  const { updateBlockAttributes } = (0, import_data.useDispatch)(import_block_editor.store);
-  const dropdownMenuProps = (0, import_hooks.useToolsPanelDropdownMenuProps)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+function Controls({ tabsClientId }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.BlockControls, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_add_tab_toolbar_control.default, { tabsClientId }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_tab_toolbar_control.default, { tabsClientId }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components.__experimentalToolsPanel,
-      {
-        label: (0, import_i18n.__)("Settings"),
-        resetAll: () => {
-          updateBlockAttributes(tabsClientId, {
-            activeTabIndex: 0
-          });
-        },
-        dropdownMenuProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_components.__experimentalToolsPanelItem,
-          {
-            label: (0, import_i18n.__)("Default tab"),
-            hasValue: () => isDefaultTab && blockIndex !== 0,
-            onDeselect: () => {
-              updateBlockAttributes(tabsClientId, {
-                activeTabIndex: 0
-              });
-            },
-            isShownByDefault: true,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_components.CheckboxControl,
-              {
-                label: (0, import_i18n.__)("Default tab"),
-                checked: isDefaultTab,
-                onChange: (value) => {
-                  updateBlockAttributes(tabsClientId, {
-                    activeTabIndex: value ? blockIndex : 0
-                  });
-                }
-              }
-            )
-          }
-        )
-      }
-    ) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_tab_toolbar_control.default, { tabsClientId })
   ] });
 }
 //# sourceMappingURL=controls.cjs.map

package/build/tab/controls.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab/controls.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tInspectorControls,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport {\n\tCheckboxControl,\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useDispatch } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from './add-tab-toolbar-control';\nimport RemoveTabToolbarControl from './remove-tab-toolbar-control';\nimport { useToolsPanelDropdownMenuProps } from '../utils/hooks';\n\nexport default function Controls( { tabsClientId, blockIndex, isDefaultTab } ) {\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<InspectorControls>\n\t\t\t\t<ToolsPanel\n\t\t\t\t\tlabel={ __( 'Settings' ) }\n\t\t\t\t\tresetAll={ () => {\n\t\t\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\t\t\tactiveTabIndex: 0,\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t\t>\n\t\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t\tlabel={ __( 'Default tab' ) }\n\t\t\t\t\t\thasValue={ () => isDefaultTab && blockIndex !== 0 }\n\t\t\t\t\t\tonDeselect={ () => {\n\t\t\t\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\t\t\t\tactiveTabIndex: 0,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tisShownByDefault\n\t\t\t\t\t>\n\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\tlabel={ __( 'Default tab' ) }\n\t\t\t\t\t\t\tchecked={ isDefaultTab }\n\t\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\t\t\t\t\tactiveTabIndex: value ? blockIndex : 0,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ToolsPanelItem>\n\t\t\t\t</ToolsPanel>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAGO;AACP,wBAIO;AACP,kBAAmB;AACnB,kBAA4B;AAK5B,qCAAiC;AACjC,wCAAoC;AACpC,mBAA+C;AAO7C;AALa,SAAR,SAA2B,EAAE,cAAc,YAAY,aAAa,GAAI;AAC9E,QAAM,EAAE,sBAAsB,QAAI,yBAAa,oBAAAA,KAAiB;AAChE,QAAM,wBAAoB,6CAA+B;AAEzD,SACC,4EACC;AAAA,gDAAC,+BAAAC,SAAA,EAAqB,cAA8B;AAAA,IACpD,4CAAC,kCAAAC,SAAA,EAAwB,cAA8B;AAAA,IACvD,4CAAC,yCACA;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,WAAQ,gBAAI,UAAW;AAAA,QACvB,UAAW,MAAM;AAChB,gCAAuB,cAAc;AAAA,YACpC,gBAAgB;AAAA,UACjB,CAAE;AAAA,QACH;AAAA,QACA;AAAA,QAEA;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YACA,WAAQ,gBAAI,aAAc;AAAA,YAC1B,UAAW,MAAM,gBAAgB,eAAe;AAAA,YAChD,YAAa,MAAM;AAClB,oCAAuB,cAAc;AAAA,gBACpC,gBAAgB;AAAA,cACjB,CAAE;AAAA,YACH;AAAA,YACA,kBAAgB;AAAA,YAEhB;AAAA,cAAC;AAAA;AAAA,gBACA,WAAQ,gBAAI,aAAc;AAAA,gBAC1B,SAAU;AAAA,gBACV,UAAW,CAAE,UAAW;AACvB,wCAAuB,cAAc;AAAA,oBACpC,gBAAgB,QAAQ,aAAa;AAAA,kBACtC,CAAE;AAAA,gBACH;AAAA;AAAA,YACD;AAAA;AAAA,QACD;AAAA;AAAA,IACD,GACD;AAAA,KACD;AAEF;",
-  "names": ["blockEditorStore", "AddTabToolbarControl", "RemoveTabToolbarControl", "ToolsPanel", "ToolsPanelItem"]
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { BlockControls } from '@wordpress/block-editor';\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\nexport default function Controls( { tabsClientId } ) {\n\treturn (\n\t\t<BlockControls>\n\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t</BlockControls>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAA8B;AAK9B,qCAAiC;AACjC,wCAAoC;AAIlC;AAFa,SAAR,SAA2B,EAAE,aAAa,GAAI;AACpD,SACC,6CAAC,qCACA;AAAA,gDAAC,+BAAAA,SAAA,EAAqB,cAA8B;AAAA,IACpD,4CAAC,kCAAAC,SAAA,EAAwB,cAA8B;AAAA,KACxD;AAEF;",
+  "names": ["AddTabToolbarControl", "RemoveTabToolbarControl"]
 }

package/build/tab/edit.cjs

@@ -30,104 +30,106 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/block-library/src/tab/edit.js
 var edit_exports = {};
 __export(edit_exports, {
-  default: () => Edit
+  default: () => edit_default
 });
 module.exports = __toCommonJS(edit_exports);
+var import_clsx = __toESM(require("clsx"));
 var import_i18n = require("@wordpress/i18n");
 var import_block_editor = require("@wordpress/block-editor");
 var import_data = require("@wordpress/data");
 var import_element = require("@wordpress/element");
 var import_controls = __toESM(require("./controls.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var TEMPLATE = [
-  [
-    "core/paragraph",
-    {
-      placeholder: (0, import_i18n.__)("Type / to choose a block")
-    }
-  ]
-];
-var { cancelAnimationFrame } = window;
-function Edit({ clientId, context, isSelected }) {
-  const focusRef = (0, import_element.useRef)();
+var EMPTY_ARRAY = [];
+function Edit({ context, clientId }) {
+  const tabsList = context["core/tabs-list"] || EMPTY_ARRAY;
   const activeTabIndex = context["core/tabs-activeTabIndex"];
   const editorActiveTabIndex = context["core/tabs-editorActiveTabIndex"];
-  const effectiveActiveIndex = editorActiveTabIndex ?? activeTabIndex;
-  (0, import_element.useEffect)(() => {
-    return () => {
-      if (focusRef.current) {
-        cancelAnimationFrame(focusRef.current);
-      }
-    };
-  }, []);
-  const { blockIndex, hasInnerBlocksSelected, tabsClientId } = (0, import_data.useSelect)(
+  const effectiveActiveIndex = (0, import_element.useMemo)(() => {
+    return editorActiveTabIndex ?? activeTabIndex;
+  }, [editorActiveTabIndex, activeTabIndex]);
+  const { tabIndex, tabsClientId, selectedTabClientId } = (0, import_data.useSelect)(
     (select) => {
       const {
+        getBlockOrder,
         getBlockRootClientId,
-        getBlockIndex,
+        getSelectedBlockClientIds,
         hasSelectedInnerBlock
       } = select(import_block_editor.store);
-      const tabPanelClientId = getBlockRootClientId(clientId);
-      const _tabsClientId = getBlockRootClientId(tabPanelClientId);
-      const _blockIndex = getBlockIndex(clientId);
-      const _hasInnerBlocksSelected = hasSelectedInnerBlock(
-        clientId,
-        true
-      );
+      const _tabsListClientId = getBlockRootClientId(clientId);
+      const _tabsClientId = _tabsListClientId ? getBlockRootClientId(_tabsListClientId) : null;
+      const siblings = getBlockOrder(_tabsListClientId);
+      const _tabIndex = siblings.indexOf(clientId);
+      const selectedIds = getSelectedBlockClientIds();
+      let _selectedTabClientId = null;
+      for (const tab2 of tabsList) {
+        if (selectedIds.includes(tab2.clientId) || hasSelectedInnerBlock(tab2.clientId, true)) {
+          _selectedTabClientId = tab2.clientId;
+          break;
+        }
+      }
       return {
-        blockIndex: _blockIndex,
-        hasInnerBlocksSelected: _hasInnerBlocksSelected,
-        tabsClientId: _tabsClientId
+        tabIndex: _tabIndex,
+        tabsClientId: _tabsClientId,
+        selectedTabClientId: _selectedTabClientId
       };
     },
-    [clientId]
+    [clientId, tabsList]
+  );
+  const tab = tabsList[tabIndex] || {};
+  const tabListIndex = tab.index ?? tabIndex;
+  const tabClientId = tab.clientId || "";
+  const label = tab.label || "";
+  const isActive = tabListIndex === effectiveActiveIndex;
+  const isSelected = tabClientId === selectedTabClientId;
+  const { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } = (0, import_data.useDispatch)(import_block_editor.store);
+  const handleTabClick = (0, import_element.useCallback)(
+    (event) => {
+      event.preventDefault();
+      if (tabsClientId && tabListIndex !== effectiveActiveIndex) {
+        __unstableMarkNextChangeAsNotPersistent();
+        updateBlockAttributes(tabsClientId, {
+          editorActiveTabIndex: tabListIndex
+        });
+      }
+    },
+    [
+      tabsClientId,
+      tabListIndex,
+      effectiveActiveIndex,
+      updateBlockAttributes,
+      __unstableMarkNextChangeAsNotPersistent
+    ]
+  );
+  const handleLabelChange = (0, import_element.useCallback)(
+    (newLabel) => {
+      if (tabClientId) {
+        updateBlockAttributes(tabClientId, { label: newLabel });
+      }
+    },
+    [tabClientId, updateBlockAttributes]
   );
-  const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } = (0, import_data.useDispatch)(import_block_editor.store);
-  (0, import_element.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 = (0, import_element.useMemo)(() => {
-    if (isSelected || hasInnerBlocksSelected) {
-      return true;
-    }
-    if (isActiveTab) {
-      return true;
-    }
-    return false;
-  }, [isSelected, hasInnerBlocksSelected, isActiveTab]);
   const blockProps = (0, import_block_editor.useBlockProps)({
-    hidden: !isSelectedTab,
-    tabIndex: isSelectedTab ? 0 : -1
-  });
-  const innerBlocksProps = (0, import_block_editor.useInnerBlocksProps)(blockProps, {
-    template: TEMPLATE
+    className: (0, import_clsx.default)({
+      "is-active": isActive,
+      "is-selected": isSelected
+    }),
+    tabIndex: -1,
+    onClick: handleTabClick
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { ...innerBlocksProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_controls.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_controls.default, { tabsClientId }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ...blockProps, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_block_editor.RichText,
       {
-        tabsClientId,
-        blockIndex,
-        isDefaultTab
+        tagName: "span",
+        withoutInteractiveFormatting: true,
+        placeholder: (0, import_i18n.__)("Tab title"),
+        value: label,
+        onChange: handleLabelChange
       }
-    ),
-    isSelectedTab && innerBlocksProps.children
+    ) })
   ] });
 }
+var edit_default = Edit;
 //# sourceMappingURL=edit.cjs.map

package/build/tab/edit.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab/edit.js"],
-  "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 tabPanelClientId = getBlockRootClientId( clientId );\n\t\t\t// Then get the tabs parent\n\t\t\tconst _tabsClientId = getBlockRootClientId( tabPanelClientId );\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 tabs-menu.\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,0BAIO;AACP,kBAAuC;AACvC,qBAA2C;AAK3C,sBAAqB;AAwHnB;AAtHF,IAAM,WAAW;AAAA,EAChB;AAAA,IACC;AAAA,IACA;AAAA,MACC,iBAAa,gBAAI,0BAA2B;AAAA,IAC7C;AAAA,EACD;AACD;AAEA,IAAM,EAAE,qBAAqB,IAAI;AAElB,SAAR,KAAuB,EAAE,UAAU,SAAS,WAAW,GAAI;AACjE,QAAM,eAAW,uBAAO;AAGxB,QAAM,iBAAiB,QAAS,0BAA2B;AAC3D,QAAM,uBAAuB,QAAS,gCAAiC;AACvE,QAAM,uBAAuB,wBAAwB;AAGrD,gCAAW,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,QAAI;AAAA,IAC5D,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,oBAAAA,KAAiB;AAG7B,YAAM,mBAAmB,qBAAsB,QAAS;AAExD,YAAM,gBAAgB,qBAAsB,gBAAiB;AAG7D,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,QACtE,yBAAa,oBAAAA,KAAiB;AAG/B,gCAAW,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,oBAAgB,wBAAS,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,iBAAa,mCAAe;AAAA,IACjC,QAAQ,CAAE;AAAA,IACV,UAAU,gBAAgB,IAAI;AAAA,EAC/B,CAAE;AAEF,QAAM,uBAAmB,yCAAqB,YAAY;AAAA,IACzD,UAAU;AAAA,EACX,CAAE;AAEF,SACC,6CAAC,aAAU,GAAG,kBACb;AAAA;AAAA,MAAC,gBAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IACE,iBAAiB,iBAAiB;AAAA,KACrC;AAEF;",
-  "names": ["blockEditorStore", "Controls"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\tstore as blockEditorStore,\n\tRichText,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { useMemo, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Controls from './controls';\n\nconst EMPTY_ARRAY = [];\n\nfunction Edit( { context, clientId } ) {\n\tconst tabsList = context[ 'core/tabs-list' ] || EMPTY_ARRAY;\n\tconst activeTabIndex = context[ 'core/tabs-activeTabIndex' ];\n\tconst editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];\n\n\tconst effectiveActiveIndex = useMemo( () => {\n\t\treturn editorActiveTabIndex ?? activeTabIndex;\n\t}, [ editorActiveTabIndex, activeTabIndex ] );\n\n\tconst { tabIndex, tabsClientId, selectedTabClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockOrder,\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t} = select( blockEditorStore );\n\n\t\t\tconst _tabsListClientId = getBlockRootClientId( clientId );\n\t\t\tconst _tabsClientId = _tabsListClientId\n\t\t\t\t? getBlockRootClientId( _tabsListClientId )\n\t\t\t\t: null;\n\n\t\t\tconst siblings = getBlockOrder( _tabsListClientId );\n\t\t\tconst _tabIndex = siblings.indexOf( clientId );\n\n\t\t\t// Find which tab panel block is currently selected.\n\t\t\tconst selectedIds = getSelectedBlockClientIds();\n\t\t\tlet _selectedTabClientId = null;\n\t\t\tfor ( const tab of tabsList ) {\n\t\t\t\tif (\n\t\t\t\t\tselectedIds.includes( tab.clientId ) ||\n\t\t\t\t\thasSelectedInnerBlock( tab.clientId, true )\n\t\t\t\t) {\n\t\t\t\t\t_selectedTabClientId = tab.clientId;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttabIndex: _tabIndex,\n\t\t\t\ttabsClientId: _tabsClientId,\n\t\t\t\tselectedTabClientId: _selectedTabClientId,\n\t\t\t};\n\t\t},\n\t\t[ clientId, tabsList ]\n\t);\n\n\tconst tab = tabsList[ tabIndex ] || {};\n\n\t// tabListIndex is the tab's position in tabsList, used for active-state\n\t// checks and click handling.\n\tconst tabListIndex = tab.index ?? tabIndex;\n\n\tconst tabClientId = tab.clientId || '';\n\tconst label = tab.label || '';\n\n\tconst isActive = tabListIndex === effectiveActiveIndex;\n\tconst isSelected = tabClientId === selectedTabClientId;\n\n\tconst { __unstableMarkNextChangeAsNotPersistent, updateBlockAttributes } =\n\t\tuseDispatch( blockEditorStore );\n\n\tconst handleTabClick = useCallback(\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\t\t\tif ( tabsClientId && tabListIndex !== effectiveActiveIndex ) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\teditorActiveTabIndex: tabListIndex,\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\ttabsClientId,\n\t\t\ttabListIndex,\n\t\t\teffectiveActiveIndex,\n\t\t\tupdateBlockAttributes,\n\t\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\t]\n\t);\n\n\tconst handleLabelChange = useCallback(\n\t\t( newLabel ) => {\n\t\t\tif ( tabClientId ) {\n\t\t\t\tupdateBlockAttributes( tabClientId, { label: newLabel } );\n\t\t\t}\n\t\t},\n\t\t[ tabClientId, updateBlockAttributes ]\n\t);\n\n\tconst blockProps = useBlockProps( {\n\t\tclassName: clsx( {\n\t\t\t'is-active': isActive,\n\t\t\t'is-selected': isSelected,\n\t\t} ),\n\t\ttabIndex: -1,\n\t\tonClick: handleTabClick,\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<Controls tabsClientId={ tabsClientId } />\n\t\t\t<button { ...blockProps } type=\"button\">\n\t\t\t\t<RichText\n\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\tplaceholder={ __( 'Tab title' ) }\n\t\t\t\t\tvalue={ label }\n\t\t\t\t\tonChange={ handleLabelChange }\n\t\t\t\t/>\n\t\t\t</button>\n\t\t</>\n\t);\n}\n\nexport default Edit;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,kBAAmB;AACnB,0BAIO;AACP,kBAAuC;AACvC,qBAAqC;AAKrC,sBAAqB;AAyGnB;AAvGF,IAAM,cAAc,CAAC;AAErB,SAAS,KAAM,EAAE,SAAS,SAAS,GAAI;AACtC,QAAM,WAAW,QAAS,gBAAiB,KAAK;AAChD,QAAM,iBAAiB,QAAS,0BAA2B;AAC3D,QAAM,uBAAuB,QAAS,gCAAiC;AAEvE,QAAM,2BAAuB,wBAAS,MAAM;AAC3C,WAAO,wBAAwB;AAAA,EAChC,GAAG,CAAE,sBAAsB,cAAe,CAAE;AAE5C,QAAM,EAAE,UAAU,cAAc,oBAAoB,QAAI;AAAA,IACvD,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,oBAAAA,KAAiB;AAE7B,YAAM,oBAAoB,qBAAsB,QAAS;AACzD,YAAM,gBAAgB,oBACnB,qBAAsB,iBAAkB,IACxC;AAEH,YAAM,WAAW,cAAe,iBAAkB;AAClD,YAAM,YAAY,SAAS,QAAS,QAAS;AAG7C,YAAM,cAAc,0BAA0B;AAC9C,UAAI,uBAAuB;AAC3B,iBAAYC,QAAO,UAAW;AAC7B,YACC,YAAY,SAAUA,KAAI,QAAS,KACnC,sBAAuBA,KAAI,UAAU,IAAK,GACzC;AACD,iCAAuBA,KAAI;AAC3B;AAAA,QACD;AAAA,MACD;AAEA,aAAO;AAAA,QACN,UAAU;AAAA,QACV,cAAc;AAAA,QACd,qBAAqB;AAAA,MACtB;AAAA,IACD;AAAA,IACA,CAAE,UAAU,QAAS;AAAA,EACtB;AAEA,QAAM,MAAM,SAAU,QAAS,KAAK,CAAC;AAIrC,QAAM,eAAe,IAAI,SAAS;AAElC,QAAM,cAAc,IAAI,YAAY;AACpC,QAAM,QAAQ,IAAI,SAAS;AAE3B,QAAM,WAAW,iBAAiB;AAClC,QAAM,aAAa,gBAAgB;AAEnC,QAAM,EAAE,yCAAyC,sBAAsB,QACtE,yBAAa,oBAAAD,KAAiB;AAE/B,QAAM,qBAAiB;AAAA,IACtB,CAAE,UAAW;AACZ,YAAM,eAAe;AACrB,UAAK,gBAAgB,iBAAiB,sBAAuB;AAC5D,gDAAwC;AACxC,8BAAuB,cAAc;AAAA,UACpC,sBAAsB;AAAA,QACvB,CAAE;AAAA,MACH;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAEA,QAAM,wBAAoB;AAAA,IACzB,CAAE,aAAc;AACf,UAAK,aAAc;AAClB,8BAAuB,aAAa,EAAE,OAAO,SAAS,CAAE;AAAA,MACzD;AAAA,IACD;AAAA,IACA,CAAE,aAAa,qBAAsB;AAAA,EACtC;AAEA,QAAM,iBAAa,mCAAe;AAAA,IACjC,eAAW,YAAAE,SAAM;AAAA,MAChB,aAAa;AAAA,MACb,eAAe;AAAA,IAChB,CAAE;AAAA,IACF,UAAU;AAAA,IACV,SAAS;AAAA,EACV,CAAE;AAEF,SACC,4EACC;AAAA,gDAAC,gBAAAC,SAAA,EAAS,cAA8B;AAAA,IACxC,4CAAC,YAAS,GAAG,YAAa,MAAK,UAC9B;AAAA,MAAC;AAAA;AAAA,QACA,SAAQ;AAAA,QACR,8BAA4B;AAAA,QAC5B,iBAAc,gBAAI,WAAY;AAAA,QAC9B,OAAQ;AAAA,QACR,UAAW;AAAA;AAAA,IACZ,GACD;AAAA,KACD;AAEF;AAEA,IAAO,eAAQ;",
+  "names": ["blockEditorStore", "tab", "clsx", "Controls"]
 }

package/build/tab/save.cjs

@@ -27,9 +27,9 @@ var import_block_editor = require("@wordpress/block-editor");
 var import_jsx_runtime = require("react/jsx-runtime");
 function save() {
   const blockProps = import_block_editor.useBlockProps.save({
-    role: "tabpanel"
+    type: "button",
+    role: "tab"
   });
-  const innerBlocksProps = import_block_editor.useInnerBlocksProps.save(blockProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("section", { ...innerBlocksProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ...blockProps });
 }
 //# sourceMappingURL=save.cjs.map

package/build/tab/save.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tab/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\t\trole: 'tabpanel',\n\t} );\n\tconst innerBlocksProps = useInnerBlocksProps.save( blockProps );\n\n\treturn <section { ...innerBlocksProps } />;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAAmD;AAQ3C;AANO,SAAR,OAAwB;AAC9B,QAAM,aAAa,kCAAc,KAAM;AAAA,IACtC,MAAM;AAAA,EACP,CAAE;AACF,QAAM,mBAAmB,wCAAoB,KAAM,UAAW;AAE9D,SAAO,4CAAC,aAAU,GAAG,kBAAmB;AACzC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useBlockProps } from '@wordpress/block-editor';\n\nexport default function save() {\n\tconst blockProps = useBlockProps.save( {\n\t\ttype: 'button',\n\t\trole: 'tab',\n\t} );\n\n\treturn <button { ...blockProps } />;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAA8B;AAQtB;AANO,SAAR,OAAwB;AAC9B,QAAM,aAAa,kCAAc,KAAM;AAAA,IACtC,MAAM;AAAA,IACN,MAAM;AAAA,EACP,CAAE;AAEF,SAAO,4CAAC,YAAS,GAAG,YAAa;AAClC;",
   "names": []
 }

package/{src/tabs-menu → build/tab-list}/block.json

@@ -2,13 +2,13 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"__experimental": true,
 	"apiVersion": 3,
-	"name": "core/tabs-menu",
-	"title": "Tabs Menu",
+	"name": "core/tab-list",
+	"title": "Tab List",
 	"description": "Display the tab buttons for a tabbed interface.",
 	"category": "design",
 	"textdomain": "default",
 	"parent": [ "core/tabs" ],
-	"allowedBlocks": [ "core/tabs-menu-item" ],
+	"allowedBlocks": [ "core/tab" ],
 	"usesContext": [ "core/tabs-list" ],
 	"attributes": {},
 	"supports": {

package/build/{tabs-menu → tab-list}/edit.cjs

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/block-library/src/tabs-menu/edit.js
+// packages/block-library/src/tab-list/edit.js
 var edit_exports = {};
 __export(edit_exports, {
   default: () => edit_default
@@ -35,8 +35,8 @@ __export(edit_exports, {
 module.exports = __toCommonJS(edit_exports);
 var import_block_editor = require("@wordpress/block-editor");
 var import_data = require("@wordpress/data");
-var import_add_tab_toolbar_control = __toESM(require("../tab/add-tab-toolbar-control.cjs"));
-var import_remove_tab_toolbar_control = __toESM(require("../tab/remove-tab-toolbar-control.cjs"));
+var import_add_tab_toolbar_control = __toESM(require("../tab-panel/add-tab-toolbar-control.cjs"));
+var import_remove_tab_toolbar_control = __toESM(require("../tab-panel/remove-tab-toolbar-control.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
 function Edit({ clientId }) {
   const tabsClientId = (0, import_data.useSelect)(
@@ -45,7 +45,7 @@ function Edit({ clientId }) {
   );
   const blockProps = (0, import_block_editor.useBlockProps)();
   const innerBlocksProps = (0, import_block_editor.useInnerBlocksProps)(blockProps, {
-    allowedBlocks: ["core/tabs-menu-item"],
+    allowedBlocks: ["core/tab"],
     orientation: "horizontal",
     templateLock: false,
     renderAppender: false

package/build/tab-list/edit.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tab-list/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\nfunction Edit( { clientId } ) {\n\tconst tabsClientId = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getBlockRootClientId( clientId ),\n\t\t[ clientId ]\n\t);\n\n\tconst blockProps = useBlockProps();\n\n\tconst innerBlocksProps = useInnerBlocksProps( blockProps, {\n\t\tallowedBlocks: [ 'core/tab' ],\n\t\torientation: 'horizontal',\n\t\ttemplateLock: false,\n\t\trenderAppender: false,\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\nexport default Edit;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAIO;AACP,kBAA0B;AAK1B,qCAAiC;AACjC,wCAAoC;AAmBlC;AAjBF,SAAS,KAAM,EAAE,SAAS,GAAI;AAC7B,QAAM,mBAAe;AAAA,IACpB,CAAE,WACD,OAAQ,oBAAAA,KAAiB,EAAE,qBAAsB,QAAS;AAAA,IAC3D,CAAE,QAAS;AAAA,EACZ;AAEA,QAAM,iBAAa,mCAAc;AAEjC,QAAM,uBAAmB,yCAAqB,YAAY;AAAA,IACzD,eAAe,CAAE,UAAW;AAAA,IAC5B,aAAa;AAAA,IACb,cAAc;AAAA,IACd,gBAAgB;AAAA,EACjB,CAAE;AAEF,SACC,4EACC;AAAA,gDAAC,+BAAAC,SAAA,EAAqB,cAA8B;AAAA,IACpD,4CAAC,kCAAAC,SAAA,EAAwB,cAA8B;AAAA,IACvD,4CAAC,SAAM,GAAG,kBAAmB;AAAA,KAC9B;AAEF;AAEA,IAAO,eAAQ;",
+  "names": ["blockEditorStore", "AddTabToolbarControl", "RemoveTabToolbarControl"]
+}

package/build/{tabs-menu → tab-list}/index.cjs

@@ -27,15 +27,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/block-library/src/tabs-menu/index.js
-var tabs_menu_exports = {};
-__export(tabs_menu_exports, {
+// packages/block-library/src/tab-list/index.js
+var tab_list_exports = {};
+__export(tab_list_exports, {
   init: () => init,
   metadata: () => import_block.default,
   name: () => name,
   settings: () => settings
 });
-module.exports = __toCommonJS(tabs_menu_exports);
+module.exports = __toCommonJS(tab_list_exports);
 var import_icons = require("@wordpress/icons");
 var import_init_block = __toESM(require("../utils/init-block.cjs"));
 var import_edit = __toESM(require("./edit.cjs"));
@@ -43,7 +43,7 @@ var import_save = __toESM(require("./save.cjs"));
 var import_block = __toESM(require("./block.json"));
 var { name } = import_block.default;
 var settings = {
-  icon: import_icons.tabsMenu,
+  icon: import_icons.tabList,
   edit: import_edit.default,
   save: import_save.default
 };

package/build/tab-list/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tab-list/index.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { tabList 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,+BAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAGA,mBAAgC;AAKhC,wBAAsB;AACtB,kBAAiB;AACjB,kBAAiB;AACjB,mBAAqB;AAErB,IAAM,EAAE,KAAK,IAAI,aAAAA;AAIV,IAAM,WAAW;AAAA,EACvB,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,kBAAAC;AACD;AAEO,IAAM,OAAO,UAAM,kBAAAC,SAAW,EAAE,MAAM,uBAAAC,SAAU,SAAS,CAAE;",
+  "names": ["metadata", "icon", "edit", "save", "initBlock", "metadata"]
+}

package/build/{tabs-menu → tab-list}/save.cjs

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/block-library/src/tabs-menu/save.js
+// packages/block-library/src/tab-list/save.js
 var save_exports = {};
 __export(save_exports, {
   default: () => save

package/build/{tabs-menu → tab-list}/save.cjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/tabs-menu/save.js"],
+  "sources": ["../../src/tab-list/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\t\trole: 'tablist',\n\t} );\n\n\tconst innerBlocksProps = useInnerBlocksProps.save( blockProps );\n\n\treturn <div { ...innerBlocksProps } />;\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAAmD;AAS3C;AAPO,SAAR,OAAwB;AAC9B,QAAM,aAAa,kCAAc,KAAM;AAAA,IACtC,MAAM;AAAA,EACP,CAAE;AAEF,QAAM,mBAAmB,wCAAoB,KAAM,UAAW;AAE9D,SAAO,4CAAC,SAAM,GAAG,kBAAmB;AACrC;",
   "names": []

package/build/{tab → tab-panel}/add-tab-toolbar-control.cjs

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/block-library/src/tab/add-tab-toolbar-control.js
+// packages/block-library/src/tab-panel/add-tab-toolbar-control.js
 var add_tab_toolbar_control_exports = {};
 __export(add_tab_toolbar_control_exports, {
   default: () => AddTabToolbarControl
@@ -31,40 +31,40 @@ var import_data = require("@wordpress/data");
 var import_jsx_runtime = require("react/jsx-runtime");
 function AddTabToolbarControl({ tabsClientId }) {
   const { insertBlock } = (0, import_data.useDispatch)(import_block_editor.store);
-  const { tabPanelClientId, tabsMenuClientId } = (0, import_data.useSelect)(
+  const { tabPanelsClientId, tabsListClientId } = (0, import_data.useSelect)(
     (select) => {
       if (!tabsClientId) {
         return {
-          tabPanelClientId: null,
-          tabsMenuClientId: null
+          tabPanelsClientId: null,
+          tabsListClientId: null
         };
       }
       const { getBlocks } = select(import_block_editor.store);
       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"
       );
       return {
-        tabPanelClientId: tabPanel?.clientId || null,
-        tabsMenuClientId: tabsMenu?.clientId || null
+        tabPanelsClientId: tabPanels?.clientId || null,
+        tabsListClientId: tabList?.clientId || null
       };
     },
     [tabsClientId]
   );
   const addTab = () => {
-    if (!tabPanelClientId) {
+    if (!tabPanelsClientId) {
       return;
     }
-    const newTabBlock = (0, import_blocks.createBlock)("core/tab", {
+    const newTabPanelBlock = (0, import_blocks.createBlock)("core/tab-panel", {
       label: (0, import_i18n.__)("Tab")
     });
-    insertBlock(newTabBlock, void 0, tabPanelClientId);
-    if (tabsMenuClientId) {
-      const newMenuItemBlock = (0, import_blocks.createBlock)("core/tabs-menu-item", {});
-      insertBlock(newMenuItemBlock, void 0, tabsMenuClientId);
+    insertBlock(newTabPanelBlock, void 0, tabPanelsClientId);
+    if (tabsListClientId) {
+      const newTabBlock = (0, import_blocks.createBlock)("core/tab", {});
+      insertBlock(newTabBlock, void 0, tabsListClientId);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { group: "other", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/build/tab-panel/add-tab-toolbar-control.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tab-panel/add-tab-toolbar-control.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } 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 tabs block.\n * Inserts a new core/tab-panel into the tab-panels and a new core/tab\n * into the tab-list, 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 { tabPanelsClientId, tabsListClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! tabsClientId ) {\n\t\t\t\treturn {\n\t\t\t\t\ttabPanelsClientId: null,\n\t\t\t\t\ttabsListClientId: null,\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 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\treturn {\n\t\t\t\ttabPanelsClientId: tabPanels?.clientId || null,\n\t\t\t\ttabsListClientId: tabList?.clientId || null,\n\t\t\t};\n\t\t},\n\t\t[ tabsClientId ]\n\t);\n\n\tconst addTab = () => {\n\t\tif ( ! tabPanelsClientId ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst newTabPanelBlock = createBlock( 'core/tab-panel', {\n\t\t\tlabel: __( 'Tab' ),\n\t\t} );\n\t\tinsertBlock( newTabPanelBlock, undefined, tabPanelsClientId );\n\n\t\t// Insert a corresponding tab into the tab-list.\n\t\tif ( tabsListClientId ) {\n\t\t\tconst newTabBlock = createBlock( 'core/tab', {} );\n\t\t\tinsertBlock( newTabBlock, undefined, tabsListClientId );\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": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAmB;AACnB,oBAA4B;AAC5B,0BAGO;AACP,wBAA4C;AAC5C,kBAAuC;AA0DnC;AA/CW,SAAR,qBAAuC,EAAE,aAAa,GAAI;AAChE,QAAM,EAAE,YAAY,QAAI,yBAAa,oBAAAA,KAAiB;AAEtD,QAAM,EAAE,mBAAmB,iBAAiB,QAAI;AAAA,IAC/C,CAAE,WAAY;AACb,UAAK,CAAE,cAAe;AACrB,eAAO;AAAA,UACN,mBAAmB;AAAA,UACnB,kBAAkB;AAAA,QACnB;AAAA,MACD;AACA,YAAM,EAAE,UAAU,IAAI,OAAQ,oBAAAA,KAAiB;AAC/C,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,aAAO;AAAA,QACN,mBAAmB,WAAW,YAAY;AAAA,QAC1C,kBAAkB,SAAS,YAAY;AAAA,MACxC;AAAA,IACD;AAAA,IACA,CAAE,YAAa;AAAA,EAChB;AAEA,QAAM,SAAS,MAAM;AACpB,QAAK,CAAE,mBAAoB;AAC1B;AAAA,IACD;AAEA,UAAM,uBAAmB,2BAAa,kBAAkB;AAAA,MACvD,WAAO,gBAAI,KAAM;AAAA,IAClB,CAAE;AACF,gBAAa,kBAAkB,QAAW,iBAAkB;AAG5D,QAAK,kBAAmB;AACvB,YAAM,kBAAc,2BAAa,YAAY,CAAC,CAAE;AAChD,kBAAa,aAAa,QAAW,gBAAiB;AAAA,IACvD;AAAA,EACD;AAEA,SACC,4CAAC,qCAAc,OAAM,SACpB,sDAAC,kCACA;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MACV,UAAO,gBAAI,SAAU;AAAA;AAAA,EACtB,GACD,GACD;AAEF;",
+  "names": ["blockEditorStore"]
+}