@wordpress/block-library 9.38.0 → 9.39.0

package/build-module/tabs/controls.mjs

@@ -1,243 +1,36 @@
 // packages/block-library/src/tabs/controls.js
 import { __ } from "@wordpress/i18n";
-import { ToggleControl, PanelBody, TextControl } from "@wordpress/components";
-import { useMemo } from "@wordpress/element";
-import {
-  ContrastChecker,
-  InspectorControls,
-  __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-  __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients
-} from "@wordpress/block-editor";
+import { PanelBody, TextControl } from "@wordpress/components";
+import { InspectorControls } from "@wordpress/block-editor";
 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";
-function ContrastCheckerMatrix({ attributes }) {
+function Controls({ attributes, setAttributes, clientId }) {
   const {
-    className,
-    fontSize,
-    tabActiveColor,
-    customTabActiveColor,
-    tabActiveTextColor,
-    customTabActiveTextColor,
-    tabInactiveColor,
-    customTabInactiveColor,
-    tabTextColor,
-    customTabTextColor,
-    tabHoverColor,
-    customTabHoverColor,
-    tabHoverTextColor,
-    customTabHoverTextColor
-  } = attributes;
-  const activeBackground = useMemo(() => {
-    if (className?.includes("is-style-links")) {
-      return "#fff";
-    }
-    if (tabActiveColor?.color) {
-      return tabActiveColor.color;
-    }
-    return customTabActiveColor;
-  }, [tabActiveColor, customTabActiveColor, className]);
-  const activeText = useMemo(() => {
-    if (tabActiveTextColor?.color) {
-      return tabActiveTextColor.color;
-    }
-    return customTabActiveTextColor;
-  }, [tabActiveTextColor, customTabActiveTextColor]);
-  const inactiveBackground = useMemo(() => {
-    if (className?.includes("is-style-links")) {
-      return "#fff";
-    }
-    if (tabInactiveColor?.color) {
-      return tabInactiveColor.color;
-    }
-    return customTabInactiveColor;
-  }, [tabInactiveColor, customTabInactiveColor, className]);
-  const inactiveText = useMemo(() => {
-    if (tabTextColor?.color) {
-      return tabTextColor.color;
-    }
-    return customTabTextColor;
-  }, [tabTextColor, customTabTextColor]);
-  const hoverBackground = useMemo(() => {
-    if (tabHoverColor?.color) {
-      return tabHoverColor.color;
-    }
-    return customTabHoverColor;
-  }, [tabHoverColor, customTabHoverColor]);
-  const hoverText = useMemo(() => {
-    if (tabHoverTextColor?.color) {
-      return tabHoverTextColor.color;
-    }
-    return customTabHoverTextColor;
-  }, [tabHoverTextColor, customTabHoverTextColor]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ContrastChecker,
-      {
-        backgroundColor: activeBackground,
-        fontSize,
-        textColor: activeText
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ContrastChecker,
-      {
-        backgroundColor: inactiveBackground,
-        fontSize,
-        textColor: inactiveText
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ContrastChecker,
-      {
-        backgroundColor: hoverBackground,
-        fontSize,
-        textColor: hoverText
-      }
-    )
-  ] });
-}
-function Controls({
-  attributes,
-  setAttributes,
-  clientId,
-  tabInactiveColor,
-  setTabInactiveColor,
-  tabHoverColor,
-  setTabHoverColor,
-  tabActiveColor,
-  setTabActiveColor,
-  tabTextColor,
-  setTabTextColor,
-  tabActiveTextColor,
-  setTabActiveTextColor,
-  tabHoverTextColor,
-  setTabHoverTextColor
-}) {
-  const {
-    customTabInactiveColor,
-    customTabActiveColor,
-    customTabHoverColor,
-    customTabTextColor,
-    customTabActiveTextColor,
-    customTabHoverTextColor,
-    orientation,
     metadata = {
       name: ""
     }
   } = attributes;
-  const colorSettings = useMultipleOriginColorsAndGradients();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AddTabToolbarControl,
+    /* @__PURE__ */ jsx(AddTabToolbarControl, { tabsClientId: clientId }),
+    /* @__PURE__ */ jsx(RemoveTabToolbarControl, { tabsClientId: clientId }),
+    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(PanelBody, { title: __("Settings"), children: /* @__PURE__ */ jsx(
+      TextControl,
       {
-        tabsClientId: clientId,
-        attributes
+        label: __("Tabs Title"),
+        help: __(
+          "The tabs title is used by screen readers to describe the purpose and content of the tabs."
+        ),
+        value: metadata.name,
+        placeholder: __("Tab Contents"),
+        onChange: (value) => {
+          setAttributes({
+            metadata: { ...metadata, name: value }
+          });
+        },
+        __next40pxDefaultSize: true
       }
-    ),
-    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(PanelBody, { title: __("Tabs Settings"), children: [
-      /* @__PURE__ */ jsx(
-        ToggleControl,
-        {
-          label: __("Vertical Tabs"),
-          checked: "vertical" === orientation,
-          onChange: () => setAttributes({
-            orientation: "vertical" === orientation ? "horizontal" : "vertical"
-          })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        TextControl,
-        {
-          label: __("Tabs Title"),
-          help: __(
-            "The tabs title is used by screen readers to describe the purpose and content of the tabs."
-          ),
-          value: metadata.name,
-          placeholder: __("Tab Contents"),
-          onChange: (value) => {
-            setAttributes({
-              metadata: { ...metadata, name: value }
-            });
-          },
-          __next40pxDefaultSize: true
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ jsxs(InspectorControls, { group: "color", children: [
-      /* @__PURE__ */ jsx(
-        ColorGradientSettingsDropdown,
-        {
-          settings: [
-            {
-              label: __("Tab Active Background"),
-              colorValue: tabActiveColor?.color ?? customTabActiveColor,
-              onColorChange: (value) => {
-                setTabActiveColor(value);
-                setAttributes({
-                  customTabActiveColor: value
-                });
-              }
-            },
-            {
-              label: __("Tab Active Text"),
-              colorValue: tabActiveTextColor?.color ?? customTabActiveTextColor,
-              onColorChange: (value) => {
-                setTabActiveTextColor(value);
-                setAttributes({
-                  customTabActiveTextColor: value
-                });
-              }
-            },
-            {
-              label: __("Tab Inactive Background"),
-              colorValue: tabInactiveColor?.color ?? customTabInactiveColor,
-              onColorChange: (value) => {
-                setTabInactiveColor(value);
-                setAttributes({
-                  customTabInactiveColor: value
-                });
-              }
-            },
-            {
-              label: __("Tab Inactive Text"),
-              colorValue: tabTextColor?.color ?? customTabTextColor,
-              onColorChange: (value) => {
-                setTabTextColor(value);
-                setAttributes({
-                  customTabTextColor: value
-                });
-              }
-            },
-            {
-              label: __("Tab Hover Background"),
-              colorValue: tabHoverColor?.color ?? customTabHoverColor,
-              onColorChange: (value) => {
-                setTabHoverColor(value);
-                setAttributes({
-                  customTabHoverColor: value
-                });
-              }
-            },
-            {
-              label: __("Tab Hover Text"),
-              colorValue: tabHoverTextColor?.color ?? customTabHoverTextColor,
-              onColorChange: (value) => {
-                setTabHoverTextColor(value);
-                setAttributes({
-                  customTabHoverTextColor: value
-                });
-              }
-            }
-          ],
-          panelId: clientId,
-          disableCustomColors: false,
-          __experimentalIsRenderedInSidebar: true,
-          __next40pxDefaultSize: true,
-          ...colorSettings
-        }
-      ),
-      /* @__PURE__ */ jsx(ContrastCheckerMatrix, { attributes })
-    ] })
+    ) }) })
   ] });
 }
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/controls.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ToggleControl, PanelBody, TextControl } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport {\n\tContrastChecker,\n\tInspectorControls,\n\t__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,\n\t__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport AddTabToolbarControl from '../tab/add-tab-toolbar-control';\n\nfunction ContrastCheckerMatrix( { attributes } ) {\n\tconst {\n\t\tclassName,\n\t\tfontSize,\n\t\ttabActiveColor,\n\t\tcustomTabActiveColor,\n\t\ttabActiveTextColor,\n\t\tcustomTabActiveTextColor,\n\t\ttabInactiveColor,\n\t\tcustomTabInactiveColor,\n\t\ttabTextColor,\n\t\tcustomTabTextColor,\n\t\ttabHoverColor,\n\t\tcustomTabHoverColor,\n\t\ttabHoverTextColor,\n\t\tcustomTabHoverTextColor,\n\t} = attributes;\n\n\tconst activeBackground = useMemo( () => {\n\t\tif ( className?.includes( 'is-style-links' ) ) {\n\t\t\treturn '#fff';\n\t\t}\n\t\tif ( tabActiveColor?.color ) {\n\t\t\treturn tabActiveColor.color;\n\t\t}\n\t\treturn customTabActiveColor;\n\t}, [ tabActiveColor, customTabActiveColor, className ] );\n\n\tconst activeText = useMemo( () => {\n\t\tif ( tabActiveTextColor?.color ) {\n\t\t\treturn tabActiveTextColor.color;\n\t\t}\n\t\treturn customTabActiveTextColor;\n\t}, [ tabActiveTextColor, customTabActiveTextColor ] );\n\n\tconst inactiveBackground = useMemo( () => {\n\t\tif ( className?.includes( 'is-style-links' ) ) {\n\t\t\treturn '#fff';\n\t\t}\n\t\tif ( tabInactiveColor?.color ) {\n\t\t\treturn tabInactiveColor.color;\n\t\t}\n\t\treturn customTabInactiveColor;\n\t}, [ tabInactiveColor, customTabInactiveColor, className ] );\n\n\tconst inactiveText = useMemo( () => {\n\t\tif ( tabTextColor?.color ) {\n\t\t\treturn tabTextColor.color;\n\t\t}\n\t\treturn customTabTextColor;\n\t}, [ tabTextColor, customTabTextColor ] );\n\n\tconst hoverBackground = useMemo( () => {\n\t\tif ( tabHoverColor?.color ) {\n\t\t\treturn tabHoverColor.color;\n\t\t}\n\t\treturn customTabHoverColor;\n\t}, [ tabHoverColor, customTabHoverColor ] );\n\n\tconst hoverText = useMemo( () => {\n\t\tif ( tabHoverTextColor?.color ) {\n\t\t\treturn tabHoverTextColor.color;\n\t\t}\n\t\treturn customTabHoverTextColor;\n\t}, [ tabHoverTextColor, customTabHoverTextColor ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ContrastChecker\n\t\t\t\tbackgroundColor={ activeBackground }\n\t\t\t\tfontSize={ fontSize }\n\t\t\t\ttextColor={ activeText }\n\t\t\t/>\n\t\t\t<ContrastChecker\n\t\t\t\tbackgroundColor={ inactiveBackground }\n\t\t\t\tfontSize={ fontSize }\n\t\t\t\ttextColor={ inactiveText }\n\t\t\t/>\n\t\t\t<ContrastChecker\n\t\t\t\tbackgroundColor={ hoverBackground }\n\t\t\t\tfontSize={ fontSize }\n\t\t\t\ttextColor={ hoverText }\n\t\t\t/>\n\t\t</>\n\t);\n}\n\nexport default function Controls( {\n\tattributes,\n\tsetAttributes,\n\tclientId,\n\ttabInactiveColor,\n\tsetTabInactiveColor,\n\ttabHoverColor,\n\tsetTabHoverColor,\n\ttabActiveColor,\n\tsetTabActiveColor,\n\ttabTextColor,\n\tsetTabTextColor,\n\ttabActiveTextColor,\n\tsetTabActiveTextColor,\n\ttabHoverTextColor,\n\tsetTabHoverTextColor,\n} ) {\n\tconst {\n\t\tcustomTabInactiveColor,\n\t\tcustomTabActiveColor,\n\t\tcustomTabHoverColor,\n\t\tcustomTabTextColor,\n\t\tcustomTabActiveTextColor,\n\t\tcustomTabHoverTextColor,\n\t\torientation,\n\t\tmetadata = {\n\t\t\tname: '',\n\t\t},\n\t} = attributes;\n\t/**\n\t * Get the color settings for the block.\n\t */\n\tconst colorSettings = useMultipleOriginColorsAndGradients();\n\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl\n\t\t\t\ttabsClientId={ clientId }\n\t\t\t\tattributes={ attributes }\n\t\t\t/>\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody title={ __( 'Tabs Settings' ) }>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Vertical Tabs' ) }\n\t\t\t\t\t\tchecked={ 'vertical' === orientation }\n\t\t\t\t\t\tonChange={ () =>\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\torientation:\n\t\t\t\t\t\t\t\t\t'vertical' === orientation\n\t\t\t\t\t\t\t\t\t\t? 'horizontal'\n\t\t\t\t\t\t\t\t\t\t: 'vertical',\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Tabs Title' ) }\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'The tabs title is used by screen readers to describe the purpose and content of the tabs.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tvalue={ metadata.name }\n\t\t\t\t\t\tplaceholder={ __( 'Tab Contents' ) }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tmetadata: { ...metadata, name: value },\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\t\t\t<InspectorControls group=\"color\">\n\t\t\t\t<ColorGradientSettingsDropdown\n\t\t\t\t\tsettings={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tlabel: __( 'Tab Active Background' ),\n\t\t\t\t\t\t\tcolorValue:\n\t\t\t\t\t\t\t\ttabActiveColor?.color ?? customTabActiveColor,\n\t\t\t\t\t\t\tonColorChange: ( value ) => {\n\t\t\t\t\t\t\t\tsetTabActiveColor( value );\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tcustomTabActiveColor: value,\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\t{\n\t\t\t\t\t\t\tlabel: __( 'Tab Active Text' ),\n\t\t\t\t\t\t\tcolorValue:\n\t\t\t\t\t\t\t\ttabActiveTextColor?.color ??\n\t\t\t\t\t\t\t\tcustomTabActiveTextColor,\n\t\t\t\t\t\t\tonColorChange: ( value ) => {\n\t\t\t\t\t\t\t\tsetTabActiveTextColor( value );\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tcustomTabActiveTextColor: value,\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\t{\n\t\t\t\t\t\t\tlabel: __( 'Tab Inactive Background' ),\n\t\t\t\t\t\t\tcolorValue:\n\t\t\t\t\t\t\t\ttabInactiveColor?.color ??\n\t\t\t\t\t\t\t\tcustomTabInactiveColor,\n\t\t\t\t\t\t\tonColorChange: ( value ) => {\n\t\t\t\t\t\t\t\tsetTabInactiveColor( value );\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tcustomTabInactiveColor: value,\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\t{\n\t\t\t\t\t\t\tlabel: __( 'Tab Inactive Text' ),\n\t\t\t\t\t\t\tcolorValue:\n\t\t\t\t\t\t\t\ttabTextColor?.color ?? customTabTextColor,\n\t\t\t\t\t\t\tonColorChange: ( value ) => {\n\t\t\t\t\t\t\t\tsetTabTextColor( value );\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tcustomTabTextColor: value,\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\t{\n\t\t\t\t\t\t\tlabel: __( 'Tab Hover Background' ),\n\t\t\t\t\t\t\tcolorValue:\n\t\t\t\t\t\t\t\ttabHoverColor?.color ?? customTabHoverColor,\n\t\t\t\t\t\t\tonColorChange: ( value ) => {\n\t\t\t\t\t\t\t\tsetTabHoverColor( value );\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tcustomTabHoverColor: value,\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\t{\n\t\t\t\t\t\t\tlabel: __( 'Tab Hover Text' ),\n\t\t\t\t\t\t\tcolorValue:\n\t\t\t\t\t\t\t\ttabHoverTextColor?.color ??\n\t\t\t\t\t\t\t\tcustomTabHoverTextColor,\n\t\t\t\t\t\t\tonColorChange: ( value ) => {\n\t\t\t\t\t\t\t\tsetTabHoverTextColor( value );\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tcustomTabHoverTextColor: value,\n\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t] }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t\tdisableCustomColors={ false }\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t{ ...colorSettings }\n\t\t\t\t/>\n\t\t\t\t<ContrastCheckerMatrix attributes={ attributes } />\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { PanelBody, TextControl } from '@wordpress/components';\nimport { InspectorControls } from '@wordpress/block-editor';\n\n/**\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( { attributes, setAttributes, clientId } ) {\n\tconst {\n\t\tmetadata = {\n\t\t\tname: '',\n\t\t},\n\t} = attributes;\n\n\treturn (\n\t\t<>\n\t\t\t<AddTabToolbarControl tabsClientId={ clientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ clientId } />\n\t\t\t<InspectorControls>\n\t\t\t\t<PanelBody title={ __( 'Settings' ) }>\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tlabel={ __( 'Tabs Title' ) }\n\t\t\t\t\t\thelp={ __(\n\t\t\t\t\t\t\t'The tabs title is used by screen readers to describe the purpose and content of the tabs.'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tvalue={ metadata.name }\n\t\t\t\t\t\tplaceholder={ __( 'Tab Contents' ) }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\tmetadata: { ...metadata, name: value },\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t</InspectorControls>\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,WAAW,mBAAmB;AACvC,SAAS,yBAAyB;AAKlC,OAAO,0BAA0B;AACjC,OAAO,6BAA6B;AAUlC,mBACC,KADD;AARa,SAAR,SAA2B,EAAE,YAAY,eAAe,SAAS,GAAI;AAC3E,QAAM;AAAA,IACL,WAAW;AAAA,MACV,MAAM;AAAA,IACP;AAAA,EACD,IAAI;AAEJ,SACC,iCACC;AAAA,wBAAC,wBAAqB,cAAe,UAAW;AAAA,IAChD,oBAAC,2BAAwB,cAAe,UAAW;AAAA,IACnD,oBAAC,qBACA,8BAAC,aAAU,OAAQ,GAAI,UAAW,GACjC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,YAAa;AAAA,QACzB,MAAO;AAAA,UACN;AAAA,QACD;AAAA,QACA,OAAQ,SAAS;AAAA,QACjB,aAAc,GAAI,cAAe;AAAA,QACjC,UAAW,CAAE,UAAW;AACvB,wBAAe;AAAA,YACd,UAAU,EAAE,GAAG,UAAU,MAAM,MAAM;AAAA,UACtC,CAAE;AAAA,QACH;AAAA,QACA,uBAAqB;AAAA;AAAA,IACtB,GACD,GACD;AAAA,KACD;AAEF;",
   "names": []
 }

package/build-module/tabs/deprecated.mjs

@@ -0,0 +1,158 @@
+// packages/block-library/src/tabs/deprecated.js
+import { useBlockProps, useInnerBlocksProps } from "@wordpress/block-editor";
+import { createBlock } from "@wordpress/blocks";
+import { jsx, jsxs } from "react/jsx-runtime";
+var v1Attributes = {
+  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"
+  }
+};
+function v1Save({ attributes }) {
+  const blockProps = useBlockProps.save();
+  const innerBlocksProps = useInnerBlocksProps.save({});
+  const title = attributes?.metadata?.name || "Tab Contents";
+  return /* @__PURE__ */ jsxs("div", { ...blockProps, children: [
+    /* @__PURE__ */ jsx("h3", { className: "tabs__title", children: title }),
+    /* @__PURE__ */ jsx("ul", { className: "tabs__list" }),
+    innerBlocksProps.children
+  ] });
+}
+function v1Migrate(attributes, innerBlocks) {
+  const tabsMenuAttributes = {
+    // Map inactive colors to core background/text supports
+    backgroundColor: attributes.tabInactiveColor,
+    textColor: attributes.tabTextColor,
+    // Map custom inactive colors
+    style: {
+      color: {
+        background: attributes.customTabInactiveColor,
+        text: attributes.customTabTextColor
+      }
+    },
+    // Active colors
+    activeBackgroundColor: attributes.tabActiveColor,
+    customActiveBackgroundColor: attributes.customTabActiveColor,
+    activeTextColor: attributes.tabActiveTextColor,
+    customActiveTextColor: attributes.customTabActiveTextColor,
+    // Hover colors
+    hoverBackgroundColor: attributes.tabHoverColor,
+    customHoverBackgroundColor: attributes.customTabHoverColor,
+    hoverTextColor: attributes.tabHoverTextColor,
+    customHoverTextColor: attributes.customTabHoverTextColor
+  };
+  if (tabsMenuAttributes.style?.color) {
+    if (!tabsMenuAttributes.style.color.background) {
+      delete tabsMenuAttributes.style.color.background;
+    }
+    if (!tabsMenuAttributes.style.color.text) {
+      delete tabsMenuAttributes.style.color.text;
+    }
+    if (Object.keys(tabsMenuAttributes.style.color).length === 0) {
+      delete tabsMenuAttributes.style.color;
+    }
+    if (Object.keys(tabsMenuAttributes.style).length === 0) {
+      delete tabsMenuAttributes.style;
+    }
+  }
+  Object.keys(tabsMenuAttributes).forEach((key) => {
+    if (tabsMenuAttributes[key] === void 0) {
+      delete tabsMenuAttributes[key];
+    }
+  });
+  const tabsMenuBlock = createBlock("core/tabs-menu", tabsMenuAttributes);
+  const tabPanelsBlock = createBlock("core/tab-panels", {}, innerBlocks);
+  const newAttributes = {
+    tabsId: attributes.tabsId,
+    orientation: attributes.orientation,
+    activeTabIndex: attributes.activeTabIndex,
+    metadata: attributes.metadata
+  };
+  return [newAttributes, [tabsMenuBlock, tabPanelsBlock]];
+}
+function v1IsEligible(attributes, innerBlocks) {
+  return innerBlocks.some((block) => block.name === "core/tab");
+}
+var deprecated = [
+  {
+    attributes: v1Attributes,
+    supports: {
+      align: true,
+      color: {
+        text: false,
+        background: false
+      },
+      html: false,
+      interactivity: true,
+      spacing: {
+        blockGap: ["horizontal", "vertical"],
+        margin: true,
+        padding: false
+      },
+      typography: {
+        fontSize: true,
+        __experimentalFontFamily: true
+      },
+      __experimentalBorder: {
+        radius: true,
+        __experimentalSkipSerialization: true,
+        __experimentalDefaultControls: {
+          radius: true
+        }
+      }
+    },
+    isEligible: v1IsEligible,
+    migrate: v1Migrate,
+    save: v1Save
+  }
+];
+var deprecated_default = deprecated;
+export {
+  deprecated_default as default
+};
+//# sourceMappingURL=deprecated.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tabs/deprecated.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';\nimport { createBlock } from '@wordpress/blocks';\n\n/**\n * The old attributes before restructuring.\n * Maintain during experimental phase to allow for migration.\n *\n * TODO: Should be removed after the experimental phase before release into main block library.\n */\nconst v1Attributes = {\n\ttabsId: {\n\t\ttype: 'string',\n\t\tdefault: '',\n\t},\n\torientation: {\n\t\ttype: 'string',\n\t\tdefault: 'horizontal',\n\t\tenum: [ 'horizontal', 'vertical' ],\n\t},\n\tactiveTabIndex: {\n\t\ttype: 'number',\n\t\tdefault: 0,\n\t},\n\ttabInactiveColor: {\n\t\ttype: 'string',\n\t},\n\tcustomTabInactiveColor: {\n\t\ttype: 'string',\n\t},\n\ttabHoverColor: {\n\t\ttype: 'string',\n\t},\n\tcustomTabHoverColor: {\n\t\ttype: 'string',\n\t},\n\ttabActiveColor: {\n\t\ttype: 'string',\n\t},\n\tcustomTabActiveColor: {\n\t\ttype: 'string',\n\t},\n\ttabTextColor: {\n\t\ttype: 'string',\n\t},\n\tcustomTabTextColor: {\n\t\ttype: 'string',\n\t},\n\ttabActiveTextColor: {\n\t\ttype: 'string',\n\t},\n\tcustomTabActiveTextColor: {\n\t\ttype: 'string',\n\t},\n\ttabHoverTextColor: {\n\t\ttype: 'string',\n\t},\n\tcustomTabHoverTextColor: {\n\t\ttype: 'string',\n\t},\n};\n\n/**\n * The old save function before restructuring.\n * This renders the tab blocks directly as children with a tabs list placeholder.\n *\n * @param {Object} root0            Component props.\n * @param {Object} root0.attributes Block attributes.\n */\nfunction v1Save( { attributes } ) {\n\tconst blockProps = useBlockProps.save();\n\tconst innerBlocksProps = useInnerBlocksProps.save( {} );\n\tconst title = attributes?.metadata?.name || 'Tab Contents';\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t<h3 className=\"tabs__title\">{ title }</h3>\n\t\t\t<ul className=\"tabs__list\"></ul>\n\t\t\t{ innerBlocksProps.children }\n\t\t</div>\n\t);\n}\n\n/**\n * Migration function to convert old tabs structure to new structure.\n *\n * Old structure:\n * - core/tabs (with color attributes and tab innerblocks)\n *   - core/tab\n *   - core/tab\n *\n * New structure:\n * - core/tabs (orientation only)\n *   - core/tabs-menu (with color attributes)\n *   - core/tab-panels\n *     - core/tab\n *     - core/tab\n *\n * @param {Object} attributes  Block attributes.\n * @param {Array}  innerBlocks Inner blocks array.\n */\nfunction v1Migrate( attributes, innerBlocks ) {\n\t// Extract color attributes for tabs-menu\n\tconst tabsMenuAttributes = {\n\t\t// Map inactive colors to core background/text supports\n\t\tbackgroundColor: attributes.tabInactiveColor,\n\t\ttextColor: attributes.tabTextColor,\n\t\t// Map custom inactive colors\n\t\tstyle: {\n\t\t\tcolor: {\n\t\t\t\tbackground: attributes.customTabInactiveColor,\n\t\t\t\ttext: attributes.customTabTextColor,\n\t\t\t},\n\t\t},\n\t\t// Active colors\n\t\tactiveBackgroundColor: attributes.tabActiveColor,\n\t\tcustomActiveBackgroundColor: attributes.customTabActiveColor,\n\t\tactiveTextColor: attributes.tabActiveTextColor,\n\t\tcustomActiveTextColor: attributes.customTabActiveTextColor,\n\t\t// Hover colors\n\t\thoverBackgroundColor: attributes.tabHoverColor,\n\t\tcustomHoverBackgroundColor: attributes.customTabHoverColor,\n\t\thoverTextColor: attributes.tabHoverTextColor,\n\t\tcustomHoverTextColor: attributes.customTabHoverTextColor,\n\t};\n\n\t// Clean up undefined values from style object\n\tif ( tabsMenuAttributes.style?.color ) {\n\t\tif ( ! tabsMenuAttributes.style.color.background ) {\n\t\t\tdelete tabsMenuAttributes.style.color.background;\n\t\t}\n\t\tif ( ! tabsMenuAttributes.style.color.text ) {\n\t\t\tdelete tabsMenuAttributes.style.color.text;\n\t\t}\n\t\tif ( Object.keys( tabsMenuAttributes.style.color ).length === 0 ) {\n\t\t\tdelete tabsMenuAttributes.style.color;\n\t\t}\n\t\tif ( Object.keys( tabsMenuAttributes.style ).length === 0 ) {\n\t\t\tdelete tabsMenuAttributes.style;\n\t\t}\n\t}\n\n\t// Clean up undefined top-level attributes\n\tObject.keys( tabsMenuAttributes ).forEach( ( key ) => {\n\t\tif ( tabsMenuAttributes[ key ] === undefined ) {\n\t\t\tdelete tabsMenuAttributes[ key ];\n\t\t}\n\t} );\n\n\t// Create tabs-menu block\n\tconst tabsMenuBlock = createBlock( 'core/tabs-menu', tabsMenuAttributes );\n\n\t// Create tab-panels block with existing tab innerblocks\n\tconst tabPanelsBlock = createBlock( 'core/tab-panels', {}, innerBlocks );\n\n\t// Return new attributes (stripped of color attrs) and new innerblocks structure\n\tconst newAttributes = {\n\t\ttabsId: attributes.tabsId,\n\t\torientation: attributes.orientation,\n\t\tactiveTabIndex: attributes.activeTabIndex,\n\t\tmetadata: attributes.metadata,\n\t};\n\n\treturn [ newAttributes, [ tabsMenuBlock, tabPanelsBlock ] ];\n}\n\n/**\n * Check if block is using old structure (tab blocks directly as children).\n *\n * @param {Object} attributes  Block attributes.\n * @param {Array}  innerBlocks Inner blocks array.\n */\nfunction v1IsEligible( attributes, innerBlocks ) {\n\t// If there are any direct tab children (not wrapped in tab-panels), this is old structure\n\treturn innerBlocks.some( ( block ) => block.name === 'core/tab' );\n}\n\nconst deprecated = [\n\t{\n\t\tattributes: v1Attributes,\n\t\tsupports: {\n\t\t\talign: true,\n\t\t\tcolor: {\n\t\t\t\ttext: false,\n\t\t\t\tbackground: false,\n\t\t\t},\n\t\t\thtml: false,\n\t\t\tinteractivity: true,\n\t\t\tspacing: {\n\t\t\t\tblockGap: [ 'horizontal', 'vertical' ],\n\t\t\t\tmargin: true,\n\t\t\t\tpadding: false,\n\t\t\t},\n\t\t\ttypography: {\n\t\t\t\tfontSize: true,\n\t\t\t\t__experimentalFontFamily: true,\n\t\t\t},\n\t\t\t__experimentalBorder: {\n\t\t\t\tradius: true,\n\t\t\t\t__experimentalSkipSerialization: true,\n\t\t\t\t__experimentalDefaultControls: {\n\t\t\t\t\tradius: true,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tisEligible: v1IsEligible,\n\t\tmigrate: v1Migrate,\n\t\tsave: v1Save,\n\t},\n];\n\nexport default deprecated;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/tabs/edit.mjs

@@ -1,89 +1,112 @@
 // packages/block-library/src/tabs/edit.js
-import clsx from "clsx";
+import { __ } from "@wordpress/i18n";
 import {
   useBlockProps,
   useInnerBlocksProps,
-  withColors
+  BlockContextProvider,
+  store as blockEditorStore
 } from "@wordpress/block-editor";
-import StyleEngine from "./style-engine.mjs";
+import { useSelect } from "@wordpress/data";
+import { useMemo, useEffect } from "@wordpress/element";
 import Controls from "./controls.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var TABS_TEMPLATE = [["core/tab", {}]];
-var DEFAULT_BLOCK = {
-  name: "core/tab",
-  attributesToCopy: ["className", "fontFamily", "fontSize"]
-};
+import { jsx, jsxs } from "react/jsx-runtime";
+var TABS_TEMPLATE = [
+  [
+    "core/tabs-menu",
+    {
+      lock: {
+        remove: true
+      }
+    }
+  ],
+  [
+    "core/tab-panels",
+    {
+      lock: {
+        remove: true
+      }
+    },
+    [
+      [
+        "core/tab",
+        {
+          anchor: "tab-1",
+          label: "Tab 1"
+        },
+        [
+          [
+            "core/paragraph",
+            {
+              placeholder: __("Type / to add a block to tab")
+            }
+          ]
+        ]
+      ]
+    ]
+  ]
+];
 function Edit({
   clientId,
   attributes,
   setAttributes,
-  tabInactiveColor,
-  setTabInactiveColor,
-  tabHoverColor,
-  setTabHoverColor,
-  tabActiveColor,
-  setTabActiveColor,
-  tabTextColor,
-  setTabTextColor,
-  tabActiveTextColor,
-  setTabActiveTextColor,
-  tabHoverTextColor,
-  setTabHoverTextColor
+  __unstableLayoutClassNames: layoutClassNames
 }) {
-  const { style, orientation } = attributes;
-  const blockProps = useBlockProps({
-    className: clsx(
-      "vertical" === orientation ? "is-vertical" : "is-horizontal"
-    ),
-    style: {
-      ...style
+  const { anchor, activeTabIndex, editorActiveTabIndex } = attributes;
+  useEffect(() => {
+    if (editorActiveTabIndex === void 0) {
+      setAttributes({ editorActiveTabIndex: activeTabIndex });
     }
+  }, []);
+  const tabsList = useSelect(
+    (select) => {
+      const { getBlocks } = select(blockEditorStore);
+      const innerBlocks = getBlocks(clientId);
+      const tabPanels = innerBlocks.find(
+        (block) => block.name === "core/tab-panels"
+      );
+      if (!tabPanels) {
+        return [];
+      }
+      return tabPanels.innerBlocks.filter((block) => block.name === "core/tab").map((tab, index) => ({
+        id: tab.attributes.anchor || `tab-${index}`,
+        label: tab.attributes.label || "",
+        clientId: tab.clientId,
+        index
+      }));
+    },
+    [clientId]
+  );
+  const contextValue = useMemo(
+    () => ({
+      "core/tabs-list": tabsList,
+      "core/tabs-id": anchor,
+      "core/tabs-activeTabIndex": activeTabIndex,
+      "core/tabs-editorActiveTabIndex": editorActiveTabIndex
+    }),
+    [tabsList, anchor, activeTabIndex, editorActiveTabIndex]
+  );
+  const blockProps = useBlockProps({
+    className: layoutClassNames
   });
   const innerBlockProps = useInnerBlocksProps(blockProps, {
-    defaultBlock: DEFAULT_BLOCK,
-    directInsert: true,
-    __experimentalCaptureToolbars: true,
-    clientId,
-    orientation,
     template: TABS_TEMPLATE,
-    renderAppender: false
-    // Appender is rendered by individual tab blocks.
+    templateLock: false,
+    renderAppender: false,
+    __experimentalCaptureToolbars: true
   });
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { ...innerBlockProps, children: [
-    innerBlockProps.children,
-    /* @__PURE__ */ jsx(StyleEngine, { attributes, clientId }),
+  return /* @__PURE__ */ jsx(BlockContextProvider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ...innerBlockProps, children: [
     /* @__PURE__ */ jsx(
       Controls,
       {
-        ...{
-          clientId,
-          attributes,
-          setAttributes,
-          tabInactiveColor,
-          setTabInactiveColor,
-          tabHoverColor,
-          setTabHoverColor,
-          tabActiveColor,
-          setTabActiveColor,
-          tabTextColor,
-          setTabTextColor,
-          tabActiveTextColor,
-          setTabActiveTextColor,
-          tabHoverTextColor,
-          setTabHoverTextColor
-        }
+        clientId,
+        attributes,
+        setAttributes
       }
-    )
+    ),
+    innerBlockProps.children
   ] }) });
 }
-var edit_default = withColors(
-  "tabInactiveColor",
-  "tabHoverColor",
-  "tabActiveColor",
-  "tabTextColor",
-  "tabActiveTextColor",
-  "tabHoverTextColor"
-)(Edit);
+var edit_default = Edit;
 export {
   edit_default as default
 };