@wordpress/block-library/build-module/tab/edit.js

Block library for the WordPress editor.

// packages/block-library/src/tab/edit.js
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import {
  useBlockProps,
  useInnerBlocksProps,
  getTypographyClassesAndStyles as useTypographyProps,
  __experimentalUseColorProps as useColorProps,
  store as blockEditorStore
} from "@wordpress/block-editor";
import { useSelect, useDispatch } from "@wordpress/data";
import {
  useMemo,
  useRef,
  useEffect,
  useCallback,
  useState
} from "@wordpress/element";
import Controls from "./controls";
import slugFromLabel from "./slug-from-label";
import TabsList from "./tabs-list";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var TEMPLATE = [
  [
    "core/paragraph",
    {
      placeholder: __("Type / to add a block to tab")
    }
  ]
];
var { requestAnimationFrame, cancelAnimationFrame } = window;
function Edit({
  attributes,
  clientId,
  isSelected,
  setAttributes,
  __unstableLayoutClassNames: layoutClassNames
}) {
  const { selectBlock } = useDispatch(blockEditorStore);
  const innerBlocksRef = useRef(null);
  const focusRef = useRef();
  const [isInitialMount, setIsInitialMount] = useState(true);
  const labelElementRef = useRef(null);
  const { anchor, label } = attributes;
  const labelRef = useCallback(
    (node) => {
      labelElementRef.current = node;
      if (node && isInitialMount) {
        const animationId = requestAnimationFrame(() => {
          if (node) {
            node.focus();
          }
        });
        focusRef.current = animationId;
        setIsInitialMount(false);
      }
    },
    [isInitialMount]
  );
  useEffect(() => {
    if (!label && !isInitialMount && labelElementRef.current) {
      const animationId = requestAnimationFrame(() => {
        if (labelElementRef.current) {
          labelElementRef.current.focus();
        }
      });
      focusRef.current = animationId;
      return () => cancelAnimationFrame(focusRef.current);
    }
  }, [label, isInitialMount]);
  useEffect(() => {
    return () => {
      if (focusRef.current) {
        cancelAnimationFrame(focusRef.current);
      }
    };
  }, []);
  const {
    blockIndex,
    hasInnerBlocksSelected,
    tabsHasSelectedBlock,
    tabsClientId,
    tabsAttributes,
    forceDisplay,
    isTabsClientSelected,
    isDefaultTab,
    siblingTabs
  } = useSelect(
    (select) => {
      const {
        getBlockRootClientId,
        getBlockIndex,
        isBlockSelected,
        hasSelectedInnerBlock,
        getBlockAttributes,
        getBlocks
      } = select(blockEditorStore);
      const rootClientId = getBlockRootClientId(clientId);
      const hasTabSelected = hasSelectedInnerBlock(rootClientId, true);
      const rootAttributes = getBlockAttributes(rootClientId);
      const { activeTabIndex } = rootAttributes;
      const _isTabsClientSelected = isBlockSelected(rootClientId);
      const _blockIndex = getBlockIndex(clientId);
      const _isDefaultTab = activeTabIndex === _blockIndex;
      const _hasInnerBlocksSelected = hasSelectedInnerBlock(
        clientId,
        true
      );
      const _siblingTabs = getBlocks(rootClientId);
      return {
        blockIndex: _blockIndex,
        hasInnerBlocksSelected: _hasInnerBlocksSelected,
        tabsClientId: rootClientId,
        forceDisplay: _isDefaultTab && _isTabsClientSelected,
        tabsHasSelectedBlock: hasTabSelected,
        isTabsClientSelected: _isTabsClientSelected,
        isDefaultTab: _isDefaultTab,
        tabsAttributes: rootAttributes,
        siblingTabs: _siblingTabs
      };
    },
    [clientId]
  );
  const isSelectedTab = useMemo(() => {
    if (isSelected || hasInnerBlocksSelected || forceDisplay) {
      return true;
    }
    if (isDefaultTab && !isTabsClientSelected && !isSelected && !tabsHasSelectedBlock) {
      return true;
    }
    return false;
  }, [
    isSelected,
    hasInnerBlocksSelected,
    forceDisplay,
    isDefaultTab,
    isTabsClientSelected,
    tabsHasSelectedBlock
  ]);
  const tabPanelId = useMemo(
    () => anchor || slugFromLabel(label, blockIndex),
    [anchor, label, blockIndex]
  );
  const tabLabelId = useMemo(() => `${tabPanelId}--tab`, [tabPanelId]);
  const tabItemColorProps = useColorProps(tabsAttributes);
  const tabContentTypographyProps = useTypographyProps(attributes);
  const blockProps = useBlockProps({
    hidden: !isSelectedTab
  });
  const innerBlocksProps = useInnerBlocksProps(
    {
      "aria-labelledby": tabLabelId,
      id: tabPanelId,
      role: "tabpanel",
      ref: innerBlocksRef,
      tabIndex: isSelectedTab ? 0 : -1,
      className: clsx(
        tabContentTypographyProps.className,
        "tabs__tab-editor-content",
        layoutClassNames
      ),
      style: {
        ...tabContentTypographyProps.style
      }
    },
    {
      template: TEMPLATE
    }
  );
  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { ...blockProps, children: [
    /* @__PURE__ */ jsx(
      Controls,
      {
        attributes,
        setAttributes,
        tabsClientId,
        blockIndex,
        isDefaultTab
      }
    ),
    isSelectedTab && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(
        TabsList,
        {
          siblingTabs,
          currentClientId: clientId,
          currentBlockIndex: blockIndex,
          currentLabel: label,
          tabItemColorProps,
          onSelectTab: selectBlock,
          onLabelChange: (value) => setAttributes({
            label: value,
            anchor: slugFromLabel(value, blockIndex)
          }),
          labelRef,
          focusRef,
          labelElementRef
        }
      ),
      /* @__PURE__ */ jsx("section", { ...innerBlocksProps })
    ] })
  ] }) });
}
export {
  Edit as default
};
//# sourceMappingURL=edit.js.map