@wordpress/block-library 9.38.0 → 9.39.0

package/build-module/tabs-menu-item/controls.mjs

@@ -0,0 +1,227 @@
+// packages/block-library/src/tabs-menu-item/controls.js
+import clsx from "clsx";
+import { __, isRTL } from "@wordpress/i18n";
+import {
+  BlockControls,
+  InspectorControls,
+  store as blockEditorStore,
+  __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+  __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients
+} from "@wordpress/block-editor";
+import { ToolbarGroup, ToolbarItem, Button } from "@wordpress/components";
+import {
+  chevronLeft,
+  chevronRight,
+  chevronUp,
+  chevronDown
+} from "@wordpress/icons";
+import { useDispatch, 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";
+function TabBlockMover({
+  tabClientId,
+  tabIndex,
+  tabsCount,
+  tabsMenuClientId,
+  tabsClientId
+}) {
+  const {
+    moveBlocksUp,
+    moveBlocksDown,
+    updateBlockAttributes,
+    __unstableMarkNextChangeAsNotPersistent
+  } = useDispatch(blockEditorStore);
+  const { tabPanelsClientId, orientation } = useSelect(
+    (select) => {
+      const { getBlockRootClientId, getBlockAttributes } = select(blockEditorStore);
+      const tabsMenuAttributes = tabsMenuClientId ? getBlockAttributes(tabsMenuClientId) : null;
+      return {
+        tabPanelsClientId: getBlockRootClientId(tabClientId),
+        orientation: tabsMenuAttributes?.layout?.orientation || "horizontal"
+      };
+    },
+    [tabClientId, tabsMenuClientId]
+  );
+  const isFirst = tabIndex === 0;
+  const isLast = tabIndex === tabsCount - 1;
+  const isHorizontal = orientation === "horizontal";
+  let upIcon, downIcon, upLabel, downLabel;
+  if (isHorizontal) {
+    if (isRTL()) {
+      upIcon = chevronRight;
+      downIcon = chevronLeft;
+      upLabel = __("Move tab right");
+      downLabel = __("Move tab left");
+    } else {
+      upIcon = chevronLeft;
+      downIcon = chevronRight;
+      upLabel = __("Move tab left");
+      downLabel = __("Move tab right");
+    }
+  } else {
+    upIcon = chevronUp;
+    downIcon = chevronDown;
+    upLabel = __("Move tab up");
+    downLabel = __("Move tab down");
+  }
+  const handleMoveUp = () => {
+    moveBlocksUp([tabClientId], tabPanelsClientId);
+    if (tabsClientId) {
+      __unstableMarkNextChangeAsNotPersistent();
+      updateBlockAttributes(tabsClientId, {
+        editorActiveTabIndex: tabIndex - 1
+      });
+    }
+  };
+  const handleMoveDown = () => {
+    moveBlocksDown([tabClientId], tabPanelsClientId);
+    if (tabsClientId) {
+      __unstableMarkNextChangeAsNotPersistent();
+      updateBlockAttributes(tabsClientId, {
+        editorActiveTabIndex: tabIndex + 1
+      });
+    }
+  };
+  if (tabsCount <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(BlockControls, { group: "parent", children: /* @__PURE__ */ jsx(
+    ToolbarGroup,
+    {
+      className: clsx("block-editor-block-mover", {
+        "is-horizontal": isHorizontal
+      }),
+      children: /* @__PURE__ */ jsxs("div", { className: "block-editor-block-mover__move-button-container", children: [
+        /* @__PURE__ */ jsx(ToolbarItem, { children: (itemProps) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: clsx(
+              "block-editor-block-mover-button",
+              "is-up-button"
+            ),
+            icon: upIcon,
+            label: upLabel,
+            disabled: isFirst,
+            accessibleWhenDisabled: true,
+            onClick: handleMoveUp,
+            __next40pxDefaultSize: true,
+            ...itemProps
+          }
+        ) }),
+        /* @__PURE__ */ jsx(ToolbarItem, { children: (itemProps) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: clsx(
+              "block-editor-block-mover-button",
+              "is-down-button"
+            ),
+            icon: downIcon,
+            label: downLabel,
+            disabled: isLast,
+            accessibleWhenDisabled: true,
+            onClick: handleMoveDown,
+            __next40pxDefaultSize: true,
+            ...itemProps
+          }
+        ) })
+      ] })
+    }
+  ) });
+}
+function Controls({
+  attributes,
+  setAttributes,
+  clientId,
+  tabsClientId,
+  tabClientId,
+  tabIndex,
+  tabsCount,
+  tabsMenuClientId,
+  activeBackgroundColor,
+  setActiveBackgroundColor,
+  activeTextColor,
+  setActiveTextColor,
+  hoverBackgroundColor,
+  setHoverBackgroundColor,
+  hoverTextColor,
+  setHoverTextColor
+}) {
+  const {
+    customActiveBackgroundColor,
+    customActiveTextColor,
+    customHoverBackgroundColor,
+    customHoverTextColor
+  } = attributes;
+  const colorSettings = useMultipleOriginColorsAndGradients();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TabBlockMover,
+      {
+        tabClientId,
+        tabIndex,
+        tabsCount,
+        tabsMenuClientId,
+        tabsClientId
+      }
+    ),
+    /* @__PURE__ */ jsx(AddTabToolbarControl, { tabsClientId }),
+    /* @__PURE__ */ jsx(RemoveTabToolbarControl, { tabsClientId }),
+    /* @__PURE__ */ jsx(InspectorControls, { group: "color", children: /* @__PURE__ */ jsx(
+      ColorGradientSettingsDropdown,
+      {
+        settings: [
+          {
+            label: __("Active Background"),
+            colorValue: activeBackgroundColor?.color ?? customActiveBackgroundColor,
+            onColorChange: (value) => {
+              setActiveBackgroundColor(value);
+              setAttributes({
+                customActiveBackgroundColor: value
+              });
+            }
+          },
+          {
+            label: __("Active Text"),
+            colorValue: activeTextColor?.color ?? customActiveTextColor,
+            onColorChange: (value) => {
+              setActiveTextColor(value);
+              setAttributes({
+                customActiveTextColor: value
+              });
+            }
+          },
+          {
+            label: __("Hover Background"),
+            colorValue: hoverBackgroundColor?.color ?? customHoverBackgroundColor,
+            onColorChange: (value) => {
+              setHoverBackgroundColor(value);
+              setAttributes({
+                customHoverBackgroundColor: value
+              });
+            }
+          },
+          {
+            label: __("Hover Text"),
+            colorValue: hoverTextColor?.color ?? customHoverTextColor,
+            onColorChange: (value) => {
+              setHoverTextColor(value);
+              setAttributes({
+                customHoverTextColor: value
+              });
+            }
+          }
+        ],
+        panelId: clientId,
+        disableCustomColors: false,
+        __experimentalIsRenderedInSidebar: true,
+        __next40pxDefaultSize: true,
+        ...colorSettings
+      }
+    ) })
+  ] });
+}
+export {
+  Controls as default
+};
+//# sourceMappingURL=controls.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tabs-menu-item/controls.js"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport {\n\tBlockControls,\n\tInspectorControls,\n\tstore as blockEditorStore,\n\t__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,\n\t__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';\nimport {\n\tchevronLeft,\n\tchevronRight,\n\tchevronUp,\n\tchevronDown,\n} from '@wordpress/icons';\nimport { useDispatch, 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\nfunction TabBlockMover( {\n\ttabClientId,\n\ttabIndex,\n\ttabsCount,\n\ttabsMenuClientId,\n\ttabsClientId,\n} ) {\n\tconst {\n\t\tmoveBlocksUp,\n\t\tmoveBlocksDown,\n\t\tupdateBlockAttributes,\n\t\t__unstableMarkNextChangeAsNotPersistent,\n\t} = useDispatch( blockEditorStore );\n\n\tconst { tabPanelsClientId, orientation } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockRootClientId, getBlockAttributes } =\n\t\t\t\tselect( blockEditorStore );\n\t\t\t// Get orientation directly from the tabs-menu block's layout attribute.\n\t\t\t// This is more reliable than getBlockListSettings which is set asynchronously.\n\t\t\tconst tabsMenuAttributes = tabsMenuClientId\n\t\t\t\t? getBlockAttributes( tabsMenuClientId )\n\t\t\t\t: null;\n\t\t\treturn {\n\t\t\t\ttabPanelsClientId: getBlockRootClientId( tabClientId ),\n\t\t\t\torientation:\n\t\t\t\t\ttabsMenuAttributes?.layout?.orientation || 'horizontal',\n\t\t\t};\n\t\t},\n\t\t[ tabClientId, tabsMenuClientId ]\n\t);\n\n\tconst isFirst = tabIndex === 0;\n\tconst isLast = tabIndex === tabsCount - 1;\n\tconst isHorizontal = orientation === 'horizontal';\n\n\t// Icons and labels based on orientation (respects RTL for horizontal)\n\tlet upIcon, downIcon, upLabel, downLabel;\n\tif ( isHorizontal ) {\n\t\tif ( isRTL() ) {\n\t\t\tupIcon = chevronRight;\n\t\t\tdownIcon = chevronLeft;\n\t\t\tupLabel = __( 'Move tab right' );\n\t\t\tdownLabel = __( 'Move tab left' );\n\t\t} else {\n\t\t\tupIcon = chevronLeft;\n\t\t\tdownIcon = chevronRight;\n\t\t\tupLabel = __( 'Move tab left' );\n\t\t\tdownLabel = __( 'Move tab right' );\n\t\t}\n\t} else {\n\t\tupIcon = chevronUp;\n\t\tdownIcon = chevronDown;\n\t\tupLabel = __( 'Move tab up' );\n\t\tdownLabel = __( 'Move tab down' );\n\t}\n\n\t// Handle moving tab and updating active index to follow the moved tab\n\tconst handleMoveUp = () => {\n\t\tmoveBlocksUp( [ tabClientId ], tabPanelsClientId );\n\t\t// Update editorActiveTabIndex to follow the moved tab\n\t\tif ( tabsClientId ) {\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\teditorActiveTabIndex: tabIndex - 1,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst handleMoveDown = () => {\n\t\tmoveBlocksDown( [ tabClientId ], tabPanelsClientId );\n\t\t// Update editorActiveTabIndex to follow the moved tab\n\t\tif ( tabsClientId ) {\n\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\teditorActiveTabIndex: tabIndex + 1,\n\t\t\t} );\n\t\t}\n\t};\n\n\t// Don't render if only one tab\n\tif ( tabsCount <= 1 ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<BlockControls group=\"parent\">\n\t\t\t<ToolbarGroup\n\t\t\t\tclassName={ clsx( 'block-editor-block-mover', {\n\t\t\t\t\t'is-horizontal': isHorizontal,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t<div className=\"block-editor-block-mover__move-button-container\">\n\t\t\t\t\t<ToolbarItem>\n\t\t\t\t\t\t{ ( itemProps ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'block-editor-block-mover-button',\n\t\t\t\t\t\t\t\t\t'is-up-button'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\ticon={ upIcon }\n\t\t\t\t\t\t\t\tlabel={ upLabel }\n\t\t\t\t\t\t\t\tdisabled={ isFirst }\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\tonClick={ handleMoveUp }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t{ ...itemProps }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ToolbarItem>\n\t\t\t\t\t<ToolbarItem>\n\t\t\t\t\t\t{ ( itemProps ) => (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'block-editor-block-mover-button',\n\t\t\t\t\t\t\t\t\t'is-down-button'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\ticon={ downIcon }\n\t\t\t\t\t\t\t\tlabel={ downLabel }\n\t\t\t\t\t\t\t\tdisabled={ isLast }\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\tonClick={ handleMoveDown }\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t{ ...itemProps }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ToolbarItem>\n\t\t\t\t</div>\n\t\t\t</ToolbarGroup>\n\t\t</BlockControls>\n\t);\n}\n\nexport default function Controls( {\n\tattributes,\n\tsetAttributes,\n\tclientId,\n\ttabsClientId,\n\ttabClientId,\n\ttabIndex,\n\ttabsCount,\n\ttabsMenuClientId,\n\tactiveBackgroundColor,\n\tsetActiveBackgroundColor,\n\tactiveTextColor,\n\tsetActiveTextColor,\n\thoverBackgroundColor,\n\tsetHoverBackgroundColor,\n\thoverTextColor,\n\tsetHoverTextColor,\n} ) {\n\tconst {\n\t\tcustomActiveBackgroundColor,\n\t\tcustomActiveTextColor,\n\t\tcustomHoverBackgroundColor,\n\t\tcustomHoverTextColor,\n\t} = attributes;\n\n\tconst colorSettings = useMultipleOriginColorsAndGradients();\n\n\treturn (\n\t\t<>\n\t\t\t<TabBlockMover\n\t\t\t\ttabClientId={ tabClientId }\n\t\t\t\ttabIndex={ tabIndex }\n\t\t\t\ttabsCount={ tabsCount }\n\t\t\t\ttabsMenuClientId={ tabsMenuClientId }\n\t\t\t\ttabsClientId={ tabsClientId }\n\t\t\t/>\n\t\t\t<AddTabToolbarControl tabsClientId={ tabsClientId } />\n\t\t\t<RemoveTabToolbarControl tabsClientId={ tabsClientId } />\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: __( 'Active Background' ),\n\t\t\t\t\t\t\tcolorValue:\n\t\t\t\t\t\t\t\tactiveBackgroundColor?.color ??\n\t\t\t\t\t\t\t\tcustomActiveBackgroundColor,\n\t\t\t\t\t\t\tonColorChange: ( value ) => {\n\t\t\t\t\t\t\t\tsetActiveBackgroundColor( value );\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tcustomActiveBackgroundColor: 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: __( 'Active Text' ),\n\t\t\t\t\t\t\tcolorValue:\n\t\t\t\t\t\t\t\tactiveTextColor?.color ?? customActiveTextColor,\n\t\t\t\t\t\t\tonColorChange: ( value ) => {\n\t\t\t\t\t\t\t\tsetActiveTextColor( value );\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tcustomActiveTextColor: 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: __( 'Hover Background' ),\n\t\t\t\t\t\t\tcolorValue:\n\t\t\t\t\t\t\t\thoverBackgroundColor?.color ??\n\t\t\t\t\t\t\t\tcustomHoverBackgroundColor,\n\t\t\t\t\t\t\tonColorChange: ( value ) => {\n\t\t\t\t\t\t\t\tsetHoverBackgroundColor( value );\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tcustomHoverBackgroundColor: 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: __( 'Hover Text' ),\n\t\t\t\t\t\t\tcolorValue:\n\t\t\t\t\t\t\t\thoverTextColor?.color ?? customHoverTextColor,\n\t\t\t\t\t\t\tonColorChange: ( value ) => {\n\t\t\t\t\t\t\t\tsetHoverTextColor( value );\n\t\t\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\t\t\tcustomHoverTextColor: 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</InspectorControls>\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,253 @@
+// packages/block-library/src/tabs-menu-item/edit.js
+import clsx from "clsx";
+import { __, sprintf } from "@wordpress/i18n";
+import {
+  useBlockProps,
+  withColors,
+  store as blockEditorStore,
+  RichText
+} from "@wordpress/block-editor";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { decodeEntities } from "@wordpress/html-entities";
+import {
+  RawHTML,
+  useRef,
+  useCallback,
+  useState,
+  useEffect,
+  useMemo
+} from "@wordpress/element";
+import slugFromLabel from "../tab/slug-from-label.mjs";
+import Controls from "./controls.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var { requestAnimationFrame, cancelAnimationFrame } = window;
+function StaticLabel({ label, index }) {
+  if (label) {
+    return /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(RawHTML, { children: decodeEntities(label) }) });
+  }
+  return /* @__PURE__ */ jsx("span", { children: sprintf(
+    /* translators: %d is the tab index + 1 */
+    __("Tab %d"),
+    index + 1
+  ) });
+}
+function Edit({
+  attributes,
+  setAttributes,
+  context,
+  clientId,
+  activeBackgroundColor,
+  setActiveBackgroundColor,
+  activeTextColor,
+  setActiveTextColor,
+  hoverBackgroundColor,
+  setHoverBackgroundColor,
+  hoverTextColor,
+  setHoverTextColor,
+  __unstableLayoutClassNames: layoutClassNames
+}) {
+  const tabIndex = context["core/tabs-menu-item-index"] ?? 0;
+  const tabId = context["core/tabs-menu-item-id"] ?? "";
+  const tabLabel = context["core/tabs-menu-item-label"] ?? "";
+  const tabClientId = context["core/tabs-menu-item-clientId"] ?? "";
+  const contextTabsList = context["core/tabs-list"];
+  const tabsList = useMemo(
+    () => contextTabsList || [],
+    [contextTabsList]
+  );
+  const activeTabIndex = context["core/tabs-activeTabIndex"] ?? 0;
+  const editorActiveTabIndex = context["core/tabs-editorActiveTabIndex"];
+  const effectiveActiveIndex = useMemo(() => {
+    return editorActiveTabIndex ?? activeTabIndex;
+  }, [editorActiveTabIndex, activeTabIndex]);
+  const isActiveTab = tabIndex === effectiveActiveIndex;
+  const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
+  const focusRef = useRef();
+  const labelElementRef = useRef(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingLabel, setEditingLabel] = useState("");
+  const { tabsClientId, tabsMenuClientId, selectedTabClientId } = useSelect(
+    (select) => {
+      const {
+        getBlockRootClientId,
+        getSelectedBlockClientIds,
+        hasSelectedInnerBlock
+      } = select(blockEditorStore);
+      const _tabsMenuClientId = getBlockRootClientId(clientId);
+      const _tabsClientId = _tabsMenuClientId ? getBlockRootClientId(_tabsMenuClientId) : null;
+      const selectedIds = getSelectedBlockClientIds();
+      let selectedTab = null;
+      for (const tab of tabsList) {
+        if (selectedIds.includes(tab.clientId) || hasSelectedInnerBlock(tab.clientId, true)) {
+          selectedTab = tab.clientId;
+          break;
+        }
+      }
+      return {
+        tabsClientId: _tabsClientId,
+        tabsMenuClientId: _tabsMenuClientId,
+        selectedTabClientId: selectedTab
+      };
+    },
+    [clientId, tabsList]
+  );
+  const isSelectedTab = tabClientId === selectedTabClientId;
+  const { updateBlockAttributes } = useDispatch(blockEditorStore);
+  const handleLabelChange = useCallback(
+    (newLabel) => {
+      if (tabClientId) {
+        updateBlockAttributes(tabClientId, {
+          label: newLabel,
+          anchor: slugFromLabel(newLabel, tabIndex)
+        });
+      }
+    },
+    [updateBlockAttributes, tabClientId, tabIndex]
+  );
+  const handleTabClick = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (tabsClientId && tabIndex !== effectiveActiveIndex) {
+        __unstableMarkNextChangeAsNotPersistent();
+        updateBlockAttributes(tabsClientId, {
+          editorActiveTabIndex: tabIndex
+        });
+      }
+      if (isEditing) {
+      }
+    },
+    [
+      isEditing,
+      tabsClientId,
+      tabIndex,
+      effectiveActiveIndex,
+      updateBlockAttributes,
+      __unstableMarkNextChangeAsNotPersistent
+    ]
+  );
+  const labelRef = useCallback(
+    (node) => {
+      labelElementRef.current = node;
+      if (node && isEditing) {
+        const animationId = requestAnimationFrame(() => {
+          if (node) {
+            node.focus();
+          }
+        });
+        focusRef.current = animationId;
+      }
+    },
+    [isEditing]
+  );
+  useEffect(() => {
+    return () => {
+      if (focusRef.current) {
+        cancelAnimationFrame(focusRef.current);
+      }
+    };
+  }, []);
+  const customColorStyles = useMemo(() => {
+    const styles = {};
+    const activeBg = activeBackgroundColor?.color || attributes.customActiveBackgroundColor;
+    const activeText = activeTextColor?.color || attributes.customActiveTextColor;
+    const hoverBg = hoverBackgroundColor?.color || attributes.customHoverBackgroundColor;
+    const hoverText = hoverTextColor?.color || attributes.customHoverTextColor;
+    if (activeBg) {
+      styles["--custom-tab-active-color"] = activeBg;
+    }
+    if (activeText) {
+      styles["--custom-tab-active-text-color"] = activeText;
+    }
+    if (hoverBg) {
+      styles["--custom-tab-hover-color"] = hoverBg;
+    }
+    if (hoverText) {
+      styles["--custom-tab-hover-text-color"] = hoverText;
+    }
+    return styles;
+  }, [
+    activeBackgroundColor?.color,
+    attributes.customActiveBackgroundColor,
+    activeTextColor?.color,
+    attributes.customActiveTextColor,
+    hoverBackgroundColor?.color,
+    attributes.customHoverBackgroundColor,
+    hoverTextColor?.color,
+    attributes.customHoverTextColor
+  ]);
+  const tabPanelId = tabId || `tab-${tabIndex}`;
+  const tabLabelId = `${tabPanelId}--tab`;
+  const blockProps = useBlockProps({
+    className: clsx(layoutClassNames, {
+      "is-active": isActiveTab,
+      "is-selected": isSelectedTab
+    }),
+    style: customColorStyles,
+    "aria-controls": tabPanelId,
+    "aria-selected": isActiveTab,
+    id: tabLabelId,
+    role: "tab",
+    tabIndex: isActiveTab ? 0 : -1,
+    onClick: handleTabClick,
+    onDoubleClick: () => {
+      setIsEditing(true);
+      setEditingLabel(tabLabel || "");
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Controls,
+      {
+        ...{
+          attributes,
+          setAttributes,
+          clientId,
+          tabsClientId,
+          tabClientId,
+          tabIndex,
+          tabsCount: tabsList.length,
+          tabsMenuClientId,
+          activeBackgroundColor,
+          setActiveBackgroundColor,
+          activeTextColor,
+          setActiveTextColor,
+          hoverBackgroundColor,
+          setHoverBackgroundColor,
+          hoverTextColor,
+          setHoverTextColor
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { ...blockProps, children: isEditing ? /* @__PURE__ */ jsx(
+      RichText,
+      {
+        ref: labelRef,
+        tagName: "span",
+        withoutInteractiveFormatting: true,
+        placeholder: sprintf(
+          /* translators: %d is the tab index + 1 */
+          __("Tab %d\u2026"),
+          tabIndex + 1
+        ),
+        value: decodeEntities(editingLabel),
+        onChange: (value) => {
+          setEditingLabel(value);
+          handleLabelChange(value);
+        },
+        onBlur: () => {
+          setIsEditing(false);
+        }
+      }
+    ) : /* @__PURE__ */ jsx(StaticLabel, { label: tabLabel, index: tabIndex }) })
+  ] });
+}
+var edit_default = withColors(
+  "activeBackgroundColor",
+  "activeTextColor",
+  "hoverBackgroundColor",
+  "hoverTextColor"
+)(Edit);
+export {
+  edit_default as default
+};
+//# sourceMappingURL=edit.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tabs-menu-item/edit.js"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tuseBlockProps,\n\twithColors,\n\tstore as blockEditorStore,\n\tRichText,\n} from '@wordpress/block-editor';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport {\n\tRawHTML,\n\tuseRef,\n\tuseCallback,\n\tuseState,\n\tuseEffect,\n\tuseMemo,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport slugFromLabel from '../tab/slug-from-label';\nimport Controls from './controls';\n\nconst { requestAnimationFrame, cancelAnimationFrame } = window;\n\nfunction StaticLabel( { label, index } ) {\n\tif ( label ) {\n\t\treturn (\n\t\t\t<span>\n\t\t\t\t<RawHTML>{ decodeEntities( label ) }</RawHTML>\n\t\t\t</span>\n\t\t);\n\t}\n\treturn (\n\t\t<span>\n\t\t\t{ sprintf(\n\t\t\t\t/* translators: %d is the tab index + 1 */\n\t\t\t\t__( 'Tab %d' ),\n\t\t\t\tindex + 1\n\t\t\t) }\n\t\t</span>\n\t);\n}\n\nfunction Edit( {\n\tattributes,\n\tsetAttributes,\n\tcontext,\n\tclientId,\n\tactiveBackgroundColor,\n\tsetActiveBackgroundColor,\n\tactiveTextColor,\n\tsetActiveTextColor,\n\thoverBackgroundColor,\n\tsetHoverBackgroundColor,\n\thoverTextColor,\n\tsetHoverTextColor,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\t// Context from tabs-menu (per-item context via BlockContextProvider)\n\tconst tabIndex = context[ 'core/tabs-menu-item-index' ] ?? 0;\n\tconst tabId = context[ 'core/tabs-menu-item-id' ] ?? '';\n\tconst tabLabel = context[ 'core/tabs-menu-item-label' ] ?? '';\n\tconst tabClientId = context[ 'core/tabs-menu-item-clientId' ] ?? '';\n\n\t// Context from parent tabs block, memoized to prevent unnecessary re-renders.\n\tconst contextTabsList = context[ 'core/tabs-list' ];\n\tconst tabsList = useMemo(\n\t\t() => contextTabsList || [],\n\t\t[ contextTabsList ]\n\t);\n\tconst activeTabIndex = context[ 'core/tabs-activeTabIndex' ] ?? 0;\n\tconst editorActiveTabIndex = context[ 'core/tabs-editorActiveTabIndex' ];\n\n\t// Memoize effectiveActiveIndex to ensure it updates when context changes\n\tconst effectiveActiveIndex = useMemo( () => {\n\t\treturn editorActiveTabIndex ?? activeTabIndex;\n\t}, [ editorActiveTabIndex, activeTabIndex ] );\n\n\tconst isActiveTab = tabIndex === effectiveActiveIndex;\n\n\tconst { __unstableMarkNextChangeAsNotPersistent } =\n\t\tuseDispatch( blockEditorStore );\n\tconst focusRef = useRef();\n\tconst labelElementRef = useRef( null );\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ editingLabel, setEditingLabel ] = useState( '' );\n\n\t// Get parent tabs clientId for updating editorActiveTabIndex\n\tconst { tabsClientId, tabsMenuClientId, selectedTabClientId } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\thasSelectedInnerBlock,\n\t\t\t} = select( blockEditorStore );\n\t\t\t// tabs-menu-item -> tabs-menu -> tabs\n\t\t\tconst _tabsMenuClientId = getBlockRootClientId( clientId );\n\t\t\tconst _tabsClientId = _tabsMenuClientId\n\t\t\t\t? getBlockRootClientId( _tabsMenuClientId )\n\t\t\t\t: null;\n\n\t\t\tconst selectedIds = getSelectedBlockClientIds();\n\n\t\t\t// Find if any tab is selected\n\t\t\tlet selectedTab = 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\tselectedTab = 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\ttabsClientId: _tabsClientId,\n\t\t\t\ttabsMenuClientId: _tabsMenuClientId,\n\t\t\t\tselectedTabClientId: selectedTab,\n\t\t\t};\n\t\t},\n\t\t[ clientId, tabsList ]\n\t);\n\n\tconst isSelectedTab = tabClientId === selectedTabClientId;\n\n\t// Update tab label in the tab block\n\tconst { updateBlockAttributes } = useDispatch( blockEditorStore );\n\n\tconst handleLabelChange = useCallback(\n\t\t( newLabel ) => {\n\t\t\tif ( tabClientId ) {\n\t\t\t\tupdateBlockAttributes( tabClientId, {\n\t\t\t\t\tlabel: newLabel,\n\t\t\t\t\tanchor: slugFromLabel( newLabel, tabIndex ),\n\t\t\t\t} );\n\t\t\t}\n\t\t},\n\t\t[ updateBlockAttributes, tabClientId, tabIndex ]\n\t);\n\n\t// Update editor active tab index on parent tabs block when tab is clicked\n\tconst handleTabClick = useCallback(\n\t\t( event ) => {\n\t\t\tevent.preventDefault();\n\n\t\t\t// Update the parent tabs block's editorActiveTabIndex (ephemeral, not persisted)\n\t\t\tif ( tabsClientId && tabIndex !== effectiveActiveIndex ) {\n\t\t\t\t__unstableMarkNextChangeAsNotPersistent();\n\t\t\t\tupdateBlockAttributes( tabsClientId, {\n\t\t\t\t\teditorActiveTabIndex: tabIndex,\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\t// Don't select block if we're editing this tab's label\n\t\t\tif ( isEditing ) {\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\tisEditing,\n\t\t\ttabsClientId,\n\t\t\ttabIndex,\n\t\t\teffectiveActiveIndex,\n\t\t\tupdateBlockAttributes,\n\t\t\t__unstableMarkNextChangeAsNotPersistent,\n\t\t]\n\t);\n\n\t// Callback ref for label RichText\n\tconst labelRef = useCallback(\n\t\t( node ) => {\n\t\t\tlabelElementRef.current = node;\n\t\t\tif ( node && isEditing ) {\n\t\t\t\tconst animationId = requestAnimationFrame( () => {\n\t\t\t\t\tif ( node ) {\n\t\t\t\t\t\tnode.focus();\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t\tfocusRef.current = animationId;\n\t\t\t}\n\t\t},\n\t\t[ isEditing ]\n\t);\n\n\t// Cleanup animation frames\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\t// Build CSS custom properties for active/hover color states\n\tconst customColorStyles = useMemo( () => {\n\t\tconst styles = {};\n\n\t\t// Active/hover colors from custom attributes\n\t\tconst activeBg =\n\t\t\tactiveBackgroundColor?.color ||\n\t\t\tattributes.customActiveBackgroundColor;\n\t\tconst activeText =\n\t\t\tactiveTextColor?.color || attributes.customActiveTextColor;\n\t\tconst hoverBg =\n\t\t\thoverBackgroundColor?.color ||\n\t\t\tattributes.customHoverBackgroundColor;\n\t\tconst hoverText =\n\t\t\thoverTextColor?.color || attributes.customHoverTextColor;\n\n\t\tif ( activeBg ) {\n\t\t\tstyles[ '--custom-tab-active-color' ] = activeBg;\n\t\t}\n\t\tif ( activeText ) {\n\t\t\tstyles[ '--custom-tab-active-text-color' ] = activeText;\n\t\t}\n\t\tif ( hoverBg ) {\n\t\t\tstyles[ '--custom-tab-hover-color' ] = hoverBg;\n\t\t}\n\t\tif ( hoverText ) {\n\t\t\tstyles[ '--custom-tab-hover-text-color' ] = hoverText;\n\t\t}\n\n\t\treturn styles;\n\t}, [\n\t\tactiveBackgroundColor?.color,\n\t\tattributes.customActiveBackgroundColor,\n\t\tactiveTextColor?.color,\n\t\tattributes.customActiveTextColor,\n\t\thoverBackgroundColor?.color,\n\t\tattributes.customHoverBackgroundColor,\n\t\thoverTextColor?.color,\n\t\tattributes.customHoverTextColor,\n\t] );\n\n\tconst tabPanelId = tabId || `tab-${ tabIndex }`;\n\tconst tabLabelId = `${ tabPanelId }--tab`;\n\n\t// Use blockProps for core style engine support\n\tconst blockProps = useBlockProps( {\n\t\tclassName: clsx( layoutClassNames, {\n\t\t\t'is-active': isActiveTab,\n\t\t\t'is-selected': isSelectedTab,\n\t\t} ),\n\t\tstyle: customColorStyles,\n\t\t'aria-controls': tabPanelId,\n\t\t'aria-selected': isActiveTab,\n\t\tid: tabLabelId,\n\t\trole: 'tab',\n\t\ttabIndex: isActiveTab ? 0 : -1,\n\t\tonClick: handleTabClick,\n\t\tonDoubleClick: () => {\n\t\t\tsetIsEditing( true );\n\t\t\tsetEditingLabel( tabLabel || '' );\n\t\t},\n\t} );\n\n\treturn (\n\t\t<>\n\t\t\t<Controls\n\t\t\t\t{ ...{\n\t\t\t\t\tattributes,\n\t\t\t\t\tsetAttributes,\n\t\t\t\t\tclientId,\n\t\t\t\t\ttabsClientId,\n\t\t\t\t\ttabClientId,\n\t\t\t\t\ttabIndex,\n\t\t\t\t\ttabsCount: tabsList.length,\n\t\t\t\t\ttabsMenuClientId,\n\t\t\t\t\tactiveBackgroundColor,\n\t\t\t\t\tsetActiveBackgroundColor,\n\t\t\t\t\tactiveTextColor,\n\t\t\t\t\tsetActiveTextColor,\n\t\t\t\t\thoverBackgroundColor,\n\t\t\t\t\tsetHoverBackgroundColor,\n\t\t\t\t\thoverTextColor,\n\t\t\t\t\tsetHoverTextColor,\n\t\t\t\t} }\n\t\t\t/>\n\t\t\t<div { ...blockProps }>\n\t\t\t\t{ isEditing ? (\n\t\t\t\t\t<RichText\n\t\t\t\t\t\tref={ labelRef }\n\t\t\t\t\t\ttagName=\"span\"\n\t\t\t\t\t\twithoutInteractiveFormatting\n\t\t\t\t\t\tplaceholder={ sprintf(\n\t\t\t\t\t\t\t/* translators: %d is the tab index + 1 */\n\t\t\t\t\t\t\t__( 'Tab %d\u2026' ),\n\t\t\t\t\t\t\ttabIndex + 1\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tvalue={ decodeEntities( editingLabel ) }\n\t\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\t\tsetEditingLabel( value );\n\t\t\t\t\t\t\thandleLabelChange( value );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonBlur={ () => {\n\t\t\t\t\t\t\tsetIsEditing( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<StaticLabel label={ tabLabel } index={ tabIndex } />\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default withColors(\n\t'activeBackgroundColor',\n\t'activeTextColor',\n\t'hoverBackgroundColor',\n\t'hoverTextColor'\n)( Edit );\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,IAAI,eAAe;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,OACM;AACP,SAAS,WAAW,mBAAmB;AACvC,SAAS,sBAAsB;AAC/B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAKP,OAAO,mBAAmB;AAC1B,OAAO,cAAc;AAQjB,SAqOF,UArOE,KAqOF,YArOE;AANJ,IAAM,EAAE,uBAAuB,qBAAqB,IAAI;AAExD,SAAS,YAAa,EAAE,OAAO,MAAM,GAAI;AACxC,MAAK,OAAQ;AACZ,WACC,oBAAC,UACA,8BAAC,WAAU,yBAAgB,KAAM,GAAG,GACrC;AAAA,EAEF;AACA,SACC,oBAAC,UACE;AAAA;AAAA,IAED,GAAI,QAAS;AAAA,IACb,QAAQ;AAAA,EACT,GACD;AAEF;AAEA,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,4BAA4B;AAC7B,GAAI;AAEH,QAAM,WAAW,QAAS,2BAA4B,KAAK;AAC3D,QAAM,QAAQ,QAAS,wBAAyB,KAAK;AACrD,QAAM,WAAW,QAAS,2BAA4B,KAAK;AAC3D,QAAM,cAAc,QAAS,8BAA+B,KAAK;AAGjE,QAAM,kBAAkB,QAAS,gBAAiB;AAClD,QAAM,WAAW;AAAA,IAChB,MAAM,mBAAmB,CAAC;AAAA,IAC1B,CAAE,eAAgB;AAAA,EACnB;AACA,QAAM,iBAAiB,QAAS,0BAA2B,KAAK;AAChE,QAAM,uBAAuB,QAAS,gCAAiC;AAGvE,QAAM,uBAAuB,QAAS,MAAM;AAC3C,WAAO,wBAAwB;AAAA,EAChC,GAAG,CAAE,sBAAsB,cAAe,CAAE;AAE5C,QAAM,cAAc,aAAa;AAEjC,QAAM,EAAE,wCAAwC,IAC/C,YAAa,gBAAiB;AAC/B,QAAM,WAAW,OAAO;AACxB,QAAM,kBAAkB,OAAQ,IAAK;AACrC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM,CAAE,cAAc,eAAgB,IAAI,SAAU,EAAG;AAGvD,QAAM,EAAE,cAAc,kBAAkB,oBAAoB,IAAI;AAAA,IAC/D,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,gBAAiB;AAE7B,YAAM,oBAAoB,qBAAsB,QAAS;AACzD,YAAM,gBAAgB,oBACnB,qBAAsB,iBAAkB,IACxC;AAEH,YAAM,cAAc,0BAA0B;AAG9C,UAAI,cAAc;AAClB,iBAAY,OAAO,UAAW;AAC7B,YACC,YAAY,SAAU,IAAI,QAAS,KACnC,sBAAuB,IAAI,UAAU,IAAK,GACzC;AACD,wBAAc,IAAI;AAClB;AAAA,QACD;AAAA,MACD;AAEA,aAAO;AAAA,QACN,cAAc;AAAA,QACd,kBAAkB;AAAA,QAClB,qBAAqB;AAAA,MACtB;AAAA,IACD;AAAA,IACA,CAAE,UAAU,QAAS;AAAA,EACtB;AAEA,QAAM,gBAAgB,gBAAgB;AAGtC,QAAM,EAAE,sBAAsB,IAAI,YAAa,gBAAiB;AAEhE,QAAM,oBAAoB;AAAA,IACzB,CAAE,aAAc;AACf,UAAK,aAAc;AAClB,8BAAuB,aAAa;AAAA,UACnC,OAAO;AAAA,UACP,QAAQ,cAAe,UAAU,QAAS;AAAA,QAC3C,CAAE;AAAA,MACH;AAAA,IACD;AAAA,IACA,CAAE,uBAAuB,aAAa,QAAS;AAAA,EAChD;AAGA,QAAM,iBAAiB;AAAA,IACtB,CAAE,UAAW;AACZ,YAAM,eAAe;AAGrB,UAAK,gBAAgB,aAAa,sBAAuB;AACxD,gDAAwC;AACxC,8BAAuB,cAAc;AAAA,UACpC,sBAAsB;AAAA,QACvB,CAAE;AAAA,MACH;AAGA,UAAK,WAAY;AAAA,MACjB;AAAA,IACD;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,EACD;AAGA,QAAM,WAAW;AAAA,IAChB,CAAE,SAAU;AACX,sBAAgB,UAAU;AAC1B,UAAK,QAAQ,WAAY;AACxB,cAAM,cAAc,sBAAuB,MAAM;AAChD,cAAK,MAAO;AACX,iBAAK,MAAM;AAAA,UACZ;AAAA,QACD,CAAE;AACF,iBAAS,UAAU;AAAA,MACpB;AAAA,IACD;AAAA,IACA,CAAE,SAAU;AAAA,EACb;AAGA,YAAW,MAAM;AAChB,WAAO,MAAM;AACZ,UAAK,SAAS,SAAU;AACvB,6BAAsB,SAAS,OAAQ;AAAA,MACxC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAGN,QAAM,oBAAoB,QAAS,MAAM;AACxC,UAAM,SAAS,CAAC;AAGhB,UAAM,WACL,uBAAuB,SACvB,WAAW;AACZ,UAAM,aACL,iBAAiB,SAAS,WAAW;AACtC,UAAM,UACL,sBAAsB,SACtB,WAAW;AACZ,UAAM,YACL,gBAAgB,SAAS,WAAW;AAErC,QAAK,UAAW;AACf,aAAQ,2BAA4B,IAAI;AAAA,IACzC;AACA,QAAK,YAAa;AACjB,aAAQ,gCAAiC,IAAI;AAAA,IAC9C;AACA,QAAK,SAAU;AACd,aAAQ,0BAA2B,IAAI;AAAA,IACxC;AACA,QAAK,WAAY;AAChB,aAAQ,+BAAgC,IAAI;AAAA,IAC7C;AAEA,WAAO;AAAA,EACR,GAAG;AAAA,IACF,uBAAuB;AAAA,IACvB,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,sBAAsB;AAAA,IACtB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACZ,CAAE;AAEF,QAAM,aAAa,SAAS,OAAQ,QAAS;AAC7C,QAAM,aAAa,GAAI,UAAW;AAGlC,QAAM,aAAa,cAAe;AAAA,IACjC,WAAW,KAAM,kBAAkB;AAAA,MAClC,aAAa;AAAA,MACb,eAAe;AAAA,IAChB,CAAE;AAAA,IACF,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,UAAU,cAAc,IAAI;AAAA,IAC5B,SAAS;AAAA,IACT,eAAe,MAAM;AACpB,mBAAc,IAAK;AACnB,sBAAiB,YAAY,EAAG;AAAA,IACjC;AAAA,EACD,CAAE;AAEF,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,WAAW,SAAS;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,SAAM,GAAG,YACP,sBACD;AAAA,MAAC;AAAA;AAAA,QACA,KAAM;AAAA,QACN,SAAQ;AAAA,QACR,8BAA4B;AAAA,QAC5B,aAAc;AAAA;AAAA,UAEb,GAAI,cAAU;AAAA,UACd,WAAW;AAAA,QACZ;AAAA,QACA,OAAQ,eAAgB,YAAa;AAAA,QACrC,UAAW,CAAE,UAAW;AACvB,0BAAiB,KAAM;AACvB,4BAAmB,KAAM;AAAA,QAC1B;AAAA,QACA,QAAS,MAAM;AACd,uBAAc,KAAM;AAAA,QACrB;AAAA;AAAA,IACD,IAEA,oBAAC,eAAY,OAAQ,UAAW,OAAQ,UAAW,GAErD;AAAA,KACD;AAEF;AAEA,IAAO,eAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,EAAG,IAAK;",
+  "names": []
+}

package/build-module/tabs-menu-item/icon.mjs

@@ -0,0 +1,8 @@
+// packages/block-library/src/tabs-menu-item/icon.js
+import { Path, SVG } 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 6h5v2H4V6zm0 4h5v2H4v-2zm0 4h5v2H4v-2zm10-8h6v2h-6V6zm0 4h6v2h-6v-2zm0 4h6v2h-6v-2z" }) });
+export {
+  icon_default as default
+};
+//# sourceMappingURL=icon.mjs.map

package/build-module/tabs-menu-item/icon.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tabs-menu-item/icon.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Path, SVG } 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 6h5v2H4V6zm0 4h5v2H4v-2zm0 4h5v2H4v-2zm10-8h6v2h-6V6zm0 4h6v2h-6v-2zm0 4h6v2h-6v-2z\" />\n\t</SVG>\n);\n"],
+  "mappings": ";AAGA,SAAS,MAAM,WAAW;AAIxB;AAFF,IAAO,eACN,oBAAC,OAAI,OAAM,8BAA6B,SAAQ,aAC/C,8BAAC,QAAK,GAAE,0FAAyF,GAClG;",
+  "names": []
+}

package/build-module/tabs-menu-item/index.mjs

@@ -0,0 +1,20 @@
+// packages/block-library/src/tabs-menu-item/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/tabs-menu-item/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tabs-menu-item/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/tabs-menu-item/save.mjs

@@ -0,0 +1,29 @@
+// packages/block-library/src/tabs-menu-item/save.js
+import { __ } from "@wordpress/i18n";
+import { useBlockProps } from "@wordpress/block-editor";
+import { jsx } from "react/jsx-runtime";
+function save({ attributes }) {
+  const customColorStyles = {};
+  if (attributes.customActiveBackgroundColor) {
+    customColorStyles["--custom-tab-active-color"] = attributes.customActiveBackgroundColor;
+  }
+  if (attributes.customActiveTextColor) {
+    customColorStyles["--custom-tab-active-text-color"] = attributes.customActiveTextColor;
+  }
+  if (attributes.customHoverBackgroundColor) {
+    customColorStyles["--custom-tab-hover-color"] = attributes.customHoverBackgroundColor;
+  }
+  if (attributes.customHoverTextColor) {
+    customColorStyles["--custom-tab-hover-text-color"] = attributes.customHoverTextColor;
+  }
+  const blockProps = useBlockProps.save({
+    className: "wp-block-tabs-menu-item__template",
+    style: customColorStyles,
+    hidden: true
+  });
+  return /* @__PURE__ */ jsx("a", { ...blockProps, children: /* @__PURE__ */ jsx("span", { className: "screen-reader-text", children: __("Tab menu item") }) });
+}
+export {
+  save as default
+};
+//# sourceMappingURL=save.mjs.map

package/build-module/tabs-menu-item/save.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tabs-menu-item/save.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useBlockProps } from '@wordpress/block-editor';\n\nexport default function save( { attributes } ) {\n\t// Build CSS custom properties for active/hover colors\n\tconst customColorStyles = {};\n\n\t// Active/hover colors from custom attributes\n\tif ( attributes.customActiveBackgroundColor ) {\n\t\tcustomColorStyles[ '--custom-tab-active-color' ] =\n\t\t\tattributes.customActiveBackgroundColor;\n\t}\n\tif ( attributes.customActiveTextColor ) {\n\t\tcustomColorStyles[ '--custom-tab-active-text-color' ] =\n\t\t\tattributes.customActiveTextColor;\n\t}\n\tif ( attributes.customHoverBackgroundColor ) {\n\t\tcustomColorStyles[ '--custom-tab-hover-color' ] =\n\t\t\tattributes.customHoverBackgroundColor;\n\t}\n\tif ( attributes.customHoverTextColor ) {\n\t\tcustomColorStyles[ '--custom-tab-hover-text-color' ] =\n\t\t\tattributes.customHoverTextColor;\n\t}\n\n\t// useBlockProps.save includes all core style engine classes and styles\n\t// We add our custom classes and the hidden attribute for PHP template extraction\n\tconst blockProps = useBlockProps.save( {\n\t\tclassName: 'wp-block-tabs-menu-item__template',\n\t\tstyle: customColorStyles,\n\t\thidden: true,\n\t} );\n\n\treturn (\n\t\t<a { ...blockProps }>\n\t\t\t<span className=\"screen-reader-text\">\n\t\t\t\t{ __( 'Tab menu item' ) }\n\t\t\t</span>\n\t\t</a>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAkC3B;AAhCY,SAAR,KAAuB,EAAE,WAAW,GAAI;AAE9C,QAAM,oBAAoB,CAAC;AAG3B,MAAK,WAAW,6BAA8B;AAC7C,sBAAmB,2BAA4B,IAC9C,WAAW;AAAA,EACb;AACA,MAAK,WAAW,uBAAwB;AACvC,sBAAmB,gCAAiC,IACnD,WAAW;AAAA,EACb;AACA,MAAK,WAAW,4BAA6B;AAC5C,sBAAmB,0BAA2B,IAC7C,WAAW;AAAA,EACb;AACA,MAAK,WAAW,sBAAuB;AACtC,sBAAmB,+BAAgC,IAClD,WAAW;AAAA,EACb;AAIA,QAAM,aAAa,cAAc,KAAM;AAAA,IACtC,WAAW;AAAA,IACX,OAAO;AAAA,IACP,QAAQ;AAAA,EACT,CAAE;AAEF,SACC,oBAAC,OAAI,GAAG,YACP,8BAAC,UAAK,WAAU,sBACb,aAAI,eAAgB,GACvB,GACD;AAEF;",
+  "names": []
+}

package/build-module/template-part/edit/index.mjs

@@ -189,7 +189,7 @@ function TemplatePartEdit({
               postType: "wp_template_part"
             });
           },
-          children: window?.__experimentalContentOnlyPatternInsertion ? __("Edit section") : __("Edit")
+          children: __("Edit section")
         }
       ) }),
       canUserEdit && /* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx(
@@ -232,7 +232,7 @@ function TemplatePartEdit({
           }
         );
       } }),
-      /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(InspectorControls, { group: "settings", children: /* @__PURE__ */ jsx(
         TemplatesList,
         {
           area,