@wordpress/block-library/build-module/tabs/use-tab-list-items-sync.mjs

Block library for the WordPress editor.

// packages/block-library/src/tabs/use-tab-list-items-sync.js
import { store as blockEditorStore } from "@wordpress/block-editor";
import { useDispatch, useSelect } from "@wordpress/data";
import { useEffect } from "@wordpress/element";
var EMPTY_ARRAY = [];
function useTabListItemsSync(tabsClientId) {
  const { tabPanels, tabListClientId } = useSelect(
    (select) => {
      const { getBlocks } = select(blockEditorStore);
      const innerBlocks = getBlocks(tabsClientId);
      const tabPanelsBlock = innerBlocks.find(
        (block) => block.name === "core/tab-panels"
      );
      const tabList = innerBlocks.find(
        (block) => block.name === "core/tab-list"
      );
      return {
        tabPanels: tabPanelsBlock?.innerBlocks ?? EMPTY_ARRAY,
        tabListClientId: tabList?.clientId ?? null
      };
    },
    [tabsClientId]
  );
  const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } = useDispatch(blockEditorStore);
  const { getBlockAttributes } = useSelect(blockEditorStore);
  useEffect(() => {
    if (!tabListClientId) {
      return;
    }
    const newTabs = tabPanels.map((tab) => ({
      label: tab.attributes.label || ""
    }));
    const currentTabs = getBlockAttributes(tabListClientId)?.tabs ?? [];
    if (JSON.stringify(newTabs) === JSON.stringify(currentTabs)) {
      return;
    }
    __unstableMarkNextChangeAsNotPersistent();
    updateBlockAttributes(tabListClientId, { tabs: newTabs });
  }, [
    tabPanels,
    tabListClientId,
    getBlockAttributes,
    updateBlockAttributes,
    __unstableMarkNextChangeAsNotPersistent
  ]);
}
export {
  useTabListItemsSync as default
};
//# sourceMappingURL=use-tab-list-items-sync.mjs.map