@wordpress/block-library/build-module/term-template/edit.js

Block library for the WordPress editor.

// packages/block-library/src/term-template/edit.js
import clsx from "clsx";
import { ToolbarGroup } from "@wordpress/components";
import { list, grid } from "@wordpress/icons";
import { memo, useMemo, useState } from "@wordpress/element";
import { useSelect } from "@wordpress/data";
import { __, _x } from "@wordpress/i18n";
import {
  BlockControls,
  BlockContextProvider,
  __experimentalUseBlockPreview as useBlockPreview,
  useBlockProps,
  useInnerBlocksProps,
  store as blockEditorStore
} from "@wordpress/block-editor";
import { useEntityRecords } from "@wordpress/core-data";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var TEMPLATE = [["core/term-name"]];
function TermTemplateInnerBlocks({ classList }) {
  const innerBlocksProps = useInnerBlocksProps(
    { className: clsx("wp-block-term", classList) },
    { template: TEMPLATE, __unstableDisableLayoutClassNames: true }
  );
  return /* @__PURE__ */ jsx("li", { ...innerBlocksProps });
}
function TermTemplateBlockPreview({
  blocks,
  blockContextId,
  classList,
  isHidden,
  setActiveBlockContextId
}) {
  const blockPreviewProps = useBlockPreview({
    blocks,
    props: {
      className: clsx("wp-block-term", classList)
    }
  });
  const handleOnClick = () => {
    setActiveBlockContextId(blockContextId);
  };
  const style = {
    display: isHidden ? "none" : void 0
  };
  return /* @__PURE__ */ jsx(
    "li",
    {
      ...blockPreviewProps,
      tabIndex: 0,
      role: "button",
      onClick: handleOnClick,
      onKeyPress: handleOnClick,
      style
    }
  );
}
var MemoizedTermTemplateBlockPreview = memo(TermTemplateBlockPreview);
function TermTemplateEdit({
  clientId,
  attributes: { layout },
  setAttributes,
  context: {
    termQuery: {
      taxonomy,
      order,
      orderBy,
      hideEmpty,
      showNested = false,
      perPage,
      include
    } = {}
  },
  __unstableLayoutClassNames
}) {
  const { type: layoutType, columnCount = 3 } = layout || {};
  const [activeBlockContextId, setActiveBlockContextId] = useState();
  const queryArgs = {
    hide_empty: hideEmpty,
    order,
    orderby: orderBy,
    // There is a mismatch between `WP_Term_Query` and the REST API parameter default
    // values to fetch all items. In `WP_Term_Query`, the default is `''|0` and in
    // the REST API is `-1`.
    per_page: perPage || -1
  };
  if (!showNested && !include?.length) {
    queryArgs.parent = 0;
  }
  if (include?.length) {
    queryArgs.include = include;
    queryArgs.orderby = "include";
    queryArgs.order = "asc";
  }
  const { records: terms } = useEntityRecords(
    "taxonomy",
    taxonomy,
    queryArgs
  );
  const blocks = useSelect(
    (select) => select(blockEditorStore).getBlocks(clientId),
    [clientId]
  );
  const blockProps = useBlockProps({
    className: __unstableLayoutClassNames
  });
  const blockContexts = useMemo(
    () => terms?.map((term) => ({
      taxonomy,
      termId: term.id,
      classList: `term-${term.id}`,
      termData: term
    })),
    [terms, taxonomy]
  );
  if (!terms) {
    return /* @__PURE__ */ jsx("ul", { ...blockProps, children: /* @__PURE__ */ jsx("li", { className: "wp-block-term term-loading", children: /* @__PURE__ */ jsx("div", { className: "term-loading-placeholder" }) }) });
  }
  if (!terms.length) {
    return /* @__PURE__ */ jsxs("p", { ...blockProps, children: [
      " ",
      __("No terms found.")
    ] });
  }
  const setDisplayLayout = (newDisplayLayout) => setAttributes((prevAttributes) => ({
    layout: { ...prevAttributes.layout, ...newDisplayLayout }
  }));
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(BlockControls, { children: /* @__PURE__ */ jsx(
      ToolbarGroup,
      {
        controls: [
          {
            icon: list,
            title: _x(
              "List view",
              "Term template block display setting"
            ),
            onClick: () => setDisplayLayout({ type: "default" }),
            isActive: layoutType === "default" || layoutType === "constrained"
          },
          {
            icon: grid,
            title: _x(
              "Grid view",
              "Term template block display setting"
            ),
            onClick: () => setDisplayLayout({
              type: "grid",
              columnCount
            }),
            isActive: layoutType === "grid"
          }
        ]
      }
    ) }),
    /* @__PURE__ */ jsx("ul", { ...blockProps, children: blockContexts?.map((blockContext) => /* @__PURE__ */ jsxs(
      BlockContextProvider,
      {
        value: blockContext,
        children: [
          blockContext.termId === (activeBlockContextId || blockContexts[0]?.termId) ? /* @__PURE__ */ jsx(
            TermTemplateInnerBlocks,
            {
              classList: blockContext.classList
            }
          ) : null,
          /* @__PURE__ */ jsx(
            MemoizedTermTemplateBlockPreview,
            {
              blocks,
              blockContextId: blockContext.termId,
              classList: blockContext.classList,
              setActiveBlockContextId,
              isHidden: blockContext.termId === (activeBlockContextId || blockContexts[0]?.termId)
            }
          )
        ]
      },
      blockContext.termId
    )) })
  ] });
}
export {
  TermTemplateEdit as default
};
//# sourceMappingURL=edit.js.map