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

Block library for the WordPress editor.

// packages/block-library/src/group/edit.js
import { useDispatch, useSelect } from "@wordpress/data";
import {
  InnerBlocks,
  useBlockProps,
  InspectorControls,
  useInnerBlocksProps,
  store as blockEditorStore,
  privateApis as blockEditorPrivateApis
} from "@wordpress/block-editor";
import { useRef } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { View } from "@wordpress/primitives";
import GroupPlaceHolder, { useShouldShowPlaceHolder } from "./placeholder";
import { unlock } from "../lock-unlock";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var { HTMLElementControl } = unlock(blockEditorPrivateApis);
function GroupEditControls({ tagName, onSelectTagName, clientId }) {
  return /* @__PURE__ */ jsx(InspectorControls, { group: "advanced", children: /* @__PURE__ */ jsx(
    HTMLElementControl,
    {
      tagName,
      onChange: onSelectTagName,
      clientId,
      options: [
        { label: __("Default (<div>)"), value: "div" },
        { label: "<header>", value: "header" },
        { label: "<main>", value: "main" },
        { label: "<section>", value: "section" },
        { label: "<article>", value: "article" },
        { label: "<aside>", value: "aside" },
        { label: "<footer>", value: "footer" }
      ]
    }
  ) });
}
function GroupEdit({ attributes, name, setAttributes, clientId }) {
  const { hasInnerBlocks, themeSupportsLayout } = useSelect(
    (select) => {
      const { getBlock, getSettings } = select(blockEditorStore);
      const block = getBlock(clientId);
      return {
        hasInnerBlocks: !!(block && block.innerBlocks.length),
        themeSupportsLayout: getSettings()?.supportsLayout
      };
    },
    [clientId]
  );
  const {
    tagName: TagName = "div",
    templateLock,
    allowedBlocks,
    layout = {}
  } = attributes;
  const { type = "default" } = layout;
  const layoutSupportEnabled = themeSupportsLayout || type === "flex" || type === "grid";
  const ref = useRef();
  const blockProps = useBlockProps({ ref });
  const [showPlaceholder, setShowPlaceholder] = useShouldShowPlaceHolder({
    attributes,
    usedLayoutType: type,
    hasInnerBlocks
  });
  let renderAppender;
  if (showPlaceholder) {
    renderAppender = false;
  } else if (!hasInnerBlocks) {
    renderAppender = InnerBlocks.ButtonBlockAppender;
  }
  const innerBlocksProps = useInnerBlocksProps(
    layoutSupportEnabled ? blockProps : { className: "wp-block-group__inner-container" },
    {
      dropZoneElement: ref.current,
      templateLock,
      allowedBlocks,
      renderAppender
    }
  );
  const { selectBlock } = useDispatch(blockEditorStore);
  const selectVariation = (nextVariation) => {
    setAttributes(nextVariation.attributes);
    selectBlock(clientId, -1);
    setShowPlaceholder(false);
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      GroupEditControls,
      {
        tagName: TagName,
        onSelectTagName: (value) => setAttributes({ tagName: value }),
        clientId
      }
    ),
    showPlaceholder && /* @__PURE__ */ jsxs(View, { children: [
      innerBlocksProps.children,
      /* @__PURE__ */ jsx(
        GroupPlaceHolder,
        {
          name,
          onSelect: selectVariation
        }
      )
    ] }),
    layoutSupportEnabled && !showPlaceholder && /* @__PURE__ */ jsx(TagName, { ...innerBlocksProps }),
    !layoutSupportEnabled && !showPlaceholder && /* @__PURE__ */ jsx(TagName, { ...blockProps, children: /* @__PURE__ */ jsx("div", { ...innerBlocksProps }) })
  ] });
}
var edit_default = GroupEdit;
export {
  edit_default as default
};
//# sourceMappingURL=edit.js.map