@wordpress/block-library 9.38.0 → 9.39.0

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

@@ -0,0 +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-panels block.\n *\n * @param {Object} props\n * @param {string} props.tabsClientId The client ID of the parent tabs block.\n * @return {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-panels 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 tabPanels = innerBlocks.find(\n\t\t\t\t( block ) => block.name === 'core/tab-panels'\n\t\t\t);\n\t\t\tconst tabs = tabPanels?.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\tlabel={ __( 'Remove the current tab' ) }\n\t\t\t\t\tonClick={ removeTab }\n\t\t\t\t\tshowTooltip\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,YAAY,YAAY;AAAA,QAC7B,CAAE,UAAW,MAAM,SAAS;AAAA,MAC7B;AACA,YAAM,OAAO,WAAW,eAAe,CAAC;AACxC,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,OAAQ,GAAI,wBAAyB;AAAA,MACrC,SAAU;AAAA,MACV,aAAW;AAAA,MACX,MAAO,GAAI,YAAa;AAAA,MACxB,UAAW;AAAA;AAAA,EACZ,GACD,GACD;AAEF;",
+  "names": []
+}

package/build-module/tab/save.mjs

@@ -1,7 +1,7 @@
 // packages/block-library/src/tab/save.js
 import { useBlockProps, useInnerBlocksProps } from "@wordpress/block-editor";
 import { jsx } from "react/jsx-runtime";
-function Save({ attributes }) {
+function save({ attributes }) {
   const { anchor } = attributes;
   const tabPanelId = anchor;
   const blockProps = useBlockProps.save();
@@ -9,6 +9,6 @@ function Save({ attributes }) {
   return /* @__PURE__ */ jsx("section", { ...innerBlocksProps, id: tabPanelId });
 }
 export {
-  Save as default
+  save as default
 };
 //# sourceMappingURL=save.mjs.map

package/build-module/tab/save.mjs.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( { attributes } ) {\n\tconst { anchor } = attributes;\n\n\tconst tabPanelId = anchor;\n\n\t// eslint-disable-next-line react-compiler/react-compiler\n\tconst blockProps = useBlockProps.save();\n\t// eslint-disable-next-line react-compiler/react-compiler\n\tconst innerBlocksProps = useInnerBlocksProps.save( blockProps );\n\n\treturn <section { ...innerBlocksProps } id={ tabPanelId } />;\n}\n"],
-  "mappings": ";AAGA,SAAS,eAAe,2BAA2B;AAY3C;AAVO,SAAR,KAAuB,EAAE,WAAW,GAAI;AAC9C,QAAM,EAAE,OAAO,IAAI;AAEnB,QAAM,aAAa;AAGnB,QAAM,aAAa,cAAc,KAAK;AAEtC,QAAM,mBAAmB,oBAAoB,KAAM,UAAW;AAE9D,SAAO,oBAAC,aAAU,GAAG,kBAAmB,IAAK,YAAa;AAC3D;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';\n\nexport default function save( { attributes } ) {\n\tconst { anchor } = attributes;\n\n\tconst tabPanelId = anchor;\n\n\tconst blockProps = useBlockProps.save();\n\tconst innerBlocksProps = useInnerBlocksProps.save( blockProps );\n\n\treturn <section { ...innerBlocksProps } id={ tabPanelId } />;\n}\n"],
+  "mappings": ";AAGA,SAAS,eAAe,2BAA2B;AAU3C;AARO,SAAR,KAAuB,EAAE,WAAW,GAAI;AAC9C,QAAM,EAAE,OAAO,IAAI;AAEnB,QAAM,aAAa;AAEnB,QAAM,aAAa,cAAc,KAAK;AACtC,QAAM,mBAAmB,oBAAoB,KAAM,UAAW;AAE9D,SAAO,oBAAC,aAAU,GAAG,kBAAmB,IAAK,YAAa;AAC3D;",
   "names": []
 }

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

@@ -0,0 +1,70 @@
+{
+	"$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.",
+	"version": "1.0.0",
+	"category": "design",
+	"textdomain": "default",
+	"parent": [
+		"core/tabs"
+	],
+	"allowedBlocks": [
+		"core/tab"
+	],
+	"attributes": {},
+	"supports": {
+		"anchor": false,
+		"html": false,
+		"reusable": 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,36 @@
+// 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/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) => {
+      const { getBlockRootClientId } = select(blockEditorStore);
+      return 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/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\tconst { getBlockRootClientId } = select( blockEditorStore );\n\t\t\treturn getBlockRootClientId( clientId );\n\t\t},\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;AAuBlC,mBACC,KADD;AArBF,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,WAAY;AACb,YAAM,EAAE,qBAAqB,IAAI,OAAQ,gBAAiB;AAC1D,aAAO,qBAAsB,QAAS;AAAA,IACvC;AAAA,IACA,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/tab-panels/icon.mjs

@@ -0,0 +1,8 @@
+// packages/block-library/src/tab-panels/icon.js
+import { SVG, Path } from "@wordpress/primitives";
+import { jsx } from "react/jsx-runtime";
+var icon_default = /* @__PURE__ */ jsx(SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(Path, { d: "M4 4H20V20H4V4ZM5.5 5.5V18.5H18.5V5.5H5.5Z" }) });
+export {
+  icon_default as default
+};
+//# sourceMappingURL=icon.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tab-panels/icon.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { SVG, Path } from '@wordpress/primitives';\n\nexport default (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Path d=\"M4 4H20V20H4V4ZM5.5 5.5V18.5H18.5V5.5H5.5Z\" />\n\t</SVG>\n);\n"],
+  "mappings": ";AAGA,SAAS,KAAK,YAAY;AAIxB;AAFF,IAAO,eACN,oBAAC,OAAI,OAAM,8BAA6B,SAAQ,aAC/C,8BAAC,QAAK,GAAE,8CAA6C,GACtD;",
+  "names": []
+}

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

@@ -0,0 +1,20 @@
+// packages/block-library/src/tab-panels/index.js
+import initBlock from "../utils/init-block.mjs";
+import edit from "./edit.mjs";
+import save from "./save.mjs";
+import icon from "./icon.mjs";
+import metadata from "./block.json";
+var { name } = metadata;
+var settings = {
+  icon,
+  edit,
+  save
+};
+var init = () => initBlock({ name, metadata, settings });
+export {
+  init,
+  metadata,
+  name,
+  settings
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tab-panels/index.js"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport save from './save';\nimport icon from './icon';\n\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,OAAO,eAAe;AACtB,OAAO,UAAU;AACjB,OAAO,UAAU;AACjB,OAAO,UAAU;AAEjB,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

@@ -8,97 +8,53 @@
 	"version": "1.0.0",
 	"category": "design",
 	"textdomain": "default",
-	"allowedBlocks": [ "core/tab" ],
+	"allowedBlocks": [
+		"core/tabs-menu",
+		"core/tab-panels"
+	],
 	"attributes": {
-		"tabsId": {
-			"type": "string",
-			"default": ""
-		},
-		"orientation": {
-			"type": "string",
-			"default": "horizontal",
-			"enum": [ "horizontal", "vertical" ]
-		},
 		"activeTabIndex": {
 			"type": "number",
 			"default": 0
 		},
-		"tabInactiveColor": {
-			"type": "string"
-		},
-		"customTabInactiveColor": {
-			"type": "string"
-		},
-		"tabHoverColor": {
-			"type": "string"
-		},
-		"customTabHoverColor": {
-			"type": "string"
-		},
-		"tabActiveColor": {
-			"type": "string"
-		},
-		"customTabActiveColor": {
-			"type": "string"
-		},
-		"tabTextColor": {
-			"type": "string"
-		},
-		"customTabTextColor": {
-			"type": "string"
-		},
-		"tabActiveTextColor": {
-			"type": "string"
-		},
-		"customTabActiveTextColor": {
-			"type": "string"
-		},
-		"tabHoverTextColor": {
-			"type": "string"
-		},
-		"customTabHoverTextColor": {
-			"type": "string"
+		"editorActiveTabIndex": {
+			"type": "number",
+			"role": "local"
 		}
 	},
-	"styles": [
-		{
-			"name": "tab",
-			"label": "Tabs",
-			"isDefault": true
-		},
-		{
-			"name": "links",
-			"label": "Links"
-		},
-		{
-			"name": "button",
-			"label": "Button"
-		}
-	],
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"color": {
 			"text": false,
 			"background": false
 		},
+		"layout": {
+			"default": {
+				"type": "flex",
+				"flexWrap": "nowrap",
+				"justifyContent": "stretch",
+				"verticalAlignment": "stretch",
+				"orientation": "vertical"
+			},
+			"allowSwitching": false,
+			"allowVerticalAlignment": true,
+			"allowJustification": true,
+			"allowOrientation": true,
+			"allowSizingOnChildren": true
+		},
 		"html": false,
 		"interactivity": true,
 		"spacing": {
-			"blockGap": [ "horizontal", "vertical" ],
+			"blockGap": true,
 			"margin": true,
-			"padding": false
+			"padding": true
 		},
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true
 		},
-		"__experimentalBorder": {
-			"radius": true,
-			"__experimentalSkipSerialization": true,
-			"__experimentalDefaultControls": {
-				"radius": true
-			}
-		}
+		"renaming": true
 	},
 	"example": {
 		"attributes": {
@@ -106,42 +62,57 @@
 		},
 		"innerBlocks": [
 			{
-				"name": "core/tab",
-				"attributes": {
-					"label": "Tab 1"
-				},
+				"name": "core/tabs-menu",
+				"attributes": {},
+				"innerBlocks": [
+					{
+						"name": "core/tabs-menu-item",
+						"attributes": {}
+					}
+				]
+			},
+			{
+				"name": "core/tab-panels",
+				"attributes": {},
 				"innerBlocks": [
 					{
-						"name": "core/paragraph",
+						"name": "core/tab",
 						"attributes": {
-							"content": "Pariatur commodo sint mollit. Veniam Lorem labore voluptate fugiat. Ad nulla est labore cillum cillum qui nostrud do incididunt eiusmod. Aliqua aliqua sunt consequat consequat in duis deserunt."
+							"label": "Tab 1"
+						},
+						"innerBlocks": [
+							{
+								"name": "core/paragraph",
+								"attributes": {
+									"content": "Pariatur commodo sint mollit. Veniam Lorem labore voluptate fugiat. Ad nulla est labore cillum cillum qui nostrud do incididunt eiusmod."
+								}
+							}
+						]
+					},
+					{
+						"name": "core/tab",
+						"attributes": {
+							"label": "Tab 2"
 						}
 					},
 					{
-						"name": "core/paragraph",
+						"name": "core/tab",
 						"attributes": {
-							"content": "Adipisicing ullamco nisi in eu laborum adipisicing aliquip aliqua. Fugiat labore officia consequat nisi veniam velit commodo cillum enim duis quis ad."
+							"label": "Tab 3"
 						}
 					}
 				]
-			},
-			{
-				"name": "core/tab",
-				"attributes": {
-					"label": "Tab 2"
-				}
-			},
-			{
-				"name": "core/tab",
-				"attributes": {
-					"label": "Tab 3"
-				}
 			}
 		]
 	},
 	"providesContext": {
-		"core/tabs-id": "tabsId"
+		"core/tabs-activeTabIndex": "activeTabIndex",
+		"core/tabs-editorActiveTabIndex": "editorActiveTabIndex"
 	},
+	"usesContext": [
+		"core/tabs-list",
+		"core/tabs-id"
+	],
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",