@wordpress/block-library/build-module/query/edit/query-placeholder.js

Block library for the WordPress editor.

import { jsx, jsxs } from "react/jsx-runtime";
import { useSelect, useDispatch } from "@wordpress/data";
import {
  createBlocksFromInnerBlocksTemplate,
  store as blocksStore
} from "@wordpress/blocks";
import { useState } from "@wordpress/element";
import {
  store as blockEditorStore,
  __experimentalBlockVariationPicker,
  BlockControls,
  useBlockProps
} from "@wordpress/block-editor";
import { Button, Placeholder } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useResizeObserver } from "@wordpress/compose";
import { useScopedBlockVariations } from "../utils";
import { useBlockPatterns } from "./pattern-selection";
import QueryToolbar from "./query-toolbar";
function QueryPlaceholder({
  attributes,
  clientId,
  name,
  openPatternSelectionModal
}) {
  const [isStartingBlank, setIsStartingBlank] = useState(false);
  const [containerWidth, setContainerWidth] = useState(0);
  const resizeObserverRef = useResizeObserver(([entry]) => {
    setContainerWidth(entry.contentRect.width);
  });
  const SMALL_CONTAINER_BREAKPOINT = 160;
  const isSmallContainer = containerWidth > 0 && containerWidth < SMALL_CONTAINER_BREAKPOINT;
  const { blockType, activeBlockVariation } = useSelect(
    (select) => {
      const { getActiveBlockVariation, getBlockType } = select(blocksStore);
      return {
        blockType: getBlockType(name),
        activeBlockVariation: getActiveBlockVariation(
          name,
          attributes
        )
      };
    },
    [name, attributes]
  );
  const hasPatterns = !!useBlockPatterns(clientId, attributes).length;
  const icon = activeBlockVariation?.icon?.src || activeBlockVariation?.icon || blockType?.icon?.src;
  const label = activeBlockVariation?.title || blockType?.title;
  const blockProps = useBlockProps({
    ref: resizeObserverRef
  });
  if (isStartingBlank) {
    return /* @__PURE__ */ jsx(
      QueryVariationPicker,
      {
        clientId,
        attributes,
        icon,
        label
      }
    );
  }
  return /* @__PURE__ */ jsxs("div", { ...blockProps, children: [
    /* @__PURE__ */ jsx(BlockControls, { children: /* @__PURE__ */ jsx(
      QueryToolbar,
      {
        clientId,
        attributes,
        hasInnerBlocks: false
      }
    ) }),
    /* @__PURE__ */ jsxs(
      Placeholder,
      {
        className: "block-editor-media-placeholder",
        icon: !isSmallContainer && icon,
        label: !isSmallContainer && label,
        instructions: !isSmallContainer && __("Choose a pattern for the query loop or start blank."),
        withIllustration: isSmallContainer,
        children: [
          !!hasPatterns && !isSmallContainer && /* @__PURE__ */ jsx(
            Button,
            {
              __next40pxDefaultSize: true,
              variant: "primary",
              onClick: openPatternSelectionModal,
              children: __("Choose")
            }
          ),
          !isSmallContainer && /* @__PURE__ */ jsx(
            Button,
            {
              __next40pxDefaultSize: true,
              variant: "secondary",
              onClick: () => {
                setIsStartingBlank(true);
              },
              children: __("Start blank")
            }
          )
        ]
      }
    )
  ] });
}
function QueryVariationPicker({ clientId, attributes, icon, label }) {
  const scopeVariations = useScopedBlockVariations(attributes);
  const { replaceInnerBlocks } = useDispatch(blockEditorStore);
  const blockProps = useBlockProps();
  return /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx(
    __experimentalBlockVariationPicker,
    {
      icon,
      label,
      variations: scopeVariations,
      onSelect: (variation) => {
        if (variation.innerBlocks) {
          replaceInnerBlocks(
            clientId,
            createBlocksFromInnerBlocksTemplate(
              variation.innerBlocks
            ),
            false
          );
        }
      }
    }
  ) });
}
export {
  QueryPlaceholder as default
};
//# sourceMappingURL=query-placeholder.js.map