@wordpress/block-library/build-module/group/placeholder.js

Block library for the WordPress editor.

// packages/block-library/src/group/placeholder.js
import { useSelect } from "@wordpress/data";
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { store as blocksStore } from "@wordpress/blocks";
import { Path, SVG, Button, Placeholder } from "@wordpress/components";
import { useState, useEffect } from "@wordpress/element";
import { jsx } from "react/jsx-runtime";
var getGroupPlaceholderIcons = (name = "group") => {
  const icons = {
    group: /* @__PURE__ */ jsx(
      SVG,
      {
        xmlns: "http://www.w3.org/2000/svg",
        width: "48",
        height: "48",
        viewBox: "0 0 48 48",
        children: /* @__PURE__ */ jsx(Path, { d: "M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z" })
      }
    ),
    "group-row": /* @__PURE__ */ jsx(
      SVG,
      {
        xmlns: "http://www.w3.org/2000/svg",
        width: "48",
        height: "48",
        viewBox: "0 0 48 48",
        children: /* @__PURE__ */ jsx(Path, { d: "M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z" })
      }
    ),
    "group-stack": /* @__PURE__ */ jsx(
      SVG,
      {
        xmlns: "http://www.w3.org/2000/svg",
        width: "48",
        height: "48",
        viewBox: "0 0 48 48",
        children: /* @__PURE__ */ jsx(Path, { d: "M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm0 17a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Z" })
      }
    ),
    "group-grid": /* @__PURE__ */ jsx(
      SVG,
      {
        xmlns: "http://www.w3.org/2000/svg",
        width: "48",
        height: "48",
        viewBox: "0 0 48 48",
        children: /* @__PURE__ */ jsx(Path, { d: "M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10ZM0 27a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V27Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V27Z" })
      }
    )
  };
  return icons?.[name];
};
function useShouldShowPlaceHolder({
  attributes = {
    style: void 0,
    backgroundColor: void 0,
    textColor: void 0,
    fontSize: void 0
  },
  usedLayoutType = "",
  hasInnerBlocks = false
}) {
  const { style, backgroundColor, textColor, fontSize } = attributes;
  const [showPlaceholder, setShowPlaceholder] = useState(
    !hasInnerBlocks && !backgroundColor && !fontSize && !textColor && !style && usedLayoutType !== "flex" && usedLayoutType !== "grid"
  );
  useEffect(() => {
    if (!!hasInnerBlocks || !!backgroundColor || !!fontSize || !!textColor || !!style || usedLayoutType === "flex") {
      setShowPlaceholder(false);
    }
  }, [
    backgroundColor,
    fontSize,
    textColor,
    style,
    usedLayoutType,
    hasInnerBlocks
  ]);
  return [showPlaceholder, setShowPlaceholder];
}
function GroupPlaceHolder({ name, onSelect }) {
  const variations = useSelect(
    (select) => select(blocksStore).getBlockVariations(name, "block"),
    [name]
  );
  const blockProps = useBlockProps({
    className: "wp-block-group__placeholder"
  });
  useEffect(() => {
    if (variations && variations.length === 1) {
      onSelect(variations[0]);
    }
  }, [onSelect, variations]);
  return /* @__PURE__ */ jsx("div", { ...blockProps, children: /* @__PURE__ */ jsx(
    Placeholder,
    {
      instructions: __("Group blocks together. Select a layout:"),
      children: /* @__PURE__ */ jsx(
        "ul",
        {
          role: "list",
          className: "wp-block-group-placeholder__variations",
          "aria-label": __("Block variations"),
          children: variations.map((variation) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
            Button,
            {
              __next40pxDefaultSize: true,
              variant: "tertiary",
              icon: getGroupPlaceholderIcons(
                variation.name
              ),
              iconSize: 48,
              onClick: () => onSelect(variation),
              className: "wp-block-group-placeholder__variation-button",
              label: `${variation.title}: ${variation.description}`
            }
          ) }, variation.name))
        }
      )
    }
  ) });
}
var placeholder_default = GroupPlaceHolder;
export {
  placeholder_default as default,
  useShouldShowPlaceHolder
};
//# sourceMappingURL=placeholder.js.map