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

Block library for the WordPress editor.

// packages/block-library/src/form/edit.js
import { __ } from "@wordpress/i18n";
import {
  InnerBlocks,
  useBlockProps,
  useInnerBlocksProps,
  InspectorControls,
  store as blockEditorStore
} from "@wordpress/block-editor";
import {
  SelectControl,
  TextControl,
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks";
import {
  formSubmissionNotificationSuccess,
  formSubmissionNotificationError
} from "./utils.js";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var TEMPLATE = [
  formSubmissionNotificationSuccess,
  formSubmissionNotificationError,
  [
    "core/form-input",
    {
      type: "text",
      label: __("Name"),
      required: true
    }
  ],
  [
    "core/form-input",
    {
      type: "email",
      label: __("Email"),
      required: true
    }
  ],
  [
    "core/form-input",
    {
      type: "textarea",
      label: __("Comment"),
      required: true
    }
  ],
  ["core/form-submit-button", {}]
];
var Edit = ({ attributes, setAttributes, clientId }) => {
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  const resetAllSettings = () => {
    setAttributes({
      submissionMethod: "email",
      email: void 0,
      action: void 0,
      method: "post"
    });
  };
  const { action, method, email, submissionMethod } = attributes;
  const blockProps = useBlockProps();
  const { hasInnerBlocks } = useSelect(
    (select) => {
      const { getBlock } = select(blockEditorStore);
      const block = getBlock(clientId);
      return {
        hasInnerBlocks: !!(block && block.innerBlocks.length)
      };
    },
    [clientId]
  );
  const innerBlocksProps = useInnerBlocksProps(blockProps, {
    template: TEMPLATE,
    renderAppender: hasInnerBlocks ? void 0 : InnerBlocks.ButtonBlockAppender
  });
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
      ToolsPanel,
      {
        dropdownMenuProps,
        label: __("Settings"),
        resetAll: resetAllSettings,
        children: [
          /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => submissionMethod !== "email",
              label: __("Submissions method"),
              onDeselect: () => setAttributes({
                submissionMethod: "email"
              }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                SelectControl,
                {
                  __nextHasNoMarginBottom: true,
                  __next40pxDefaultSize: true,
                  label: __("Submissions method"),
                  options: [
                    // TODO: Allow plugins to add their own submission methods.
                    {
                      label: __("Send email"),
                      value: "email"
                    },
                    {
                      label: __("- Custom -"),
                      value: "custom"
                    }
                  ],
                  value: submissionMethod,
                  onChange: (value) => setAttributes({ submissionMethod: value }),
                  help: submissionMethod === "custom" ? __(
                    'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
                  ) : __(
                    "Select the method to use for form submissions."
                  )
                }
              )
            }
          ),
          submissionMethod === "email" && /* @__PURE__ */ jsx(
            ToolsPanelItem,
            {
              hasValue: () => !!email,
              label: __("Email for form submissions"),
              onDeselect: () => setAttributes({
                email: void 0,
                action: void 0,
                method: "post"
              }),
              isShownByDefault: true,
              children: /* @__PURE__ */ jsx(
                TextControl,
                {
                  __nextHasNoMarginBottom: true,
                  __next40pxDefaultSize: true,
                  autoComplete: "off",
                  label: __("Email for form submissions"),
                  value: email || "",
                  required: true,
                  onChange: (value) => {
                    setAttributes({ email: value });
                    setAttributes({
                      action: `mailto:${value}`
                    });
                    setAttributes({ method: "post" });
                  },
                  help: __(
                    "The email address where form submissions will be sent. Separate multiple email addresses with a comma."
                  ),
                  type: "email"
                }
              )
            }
          )
        ]
      }
    ) }),
    submissionMethod !== "email" && /* @__PURE__ */ jsxs(InspectorControls, { group: "advanced", children: [
      /* @__PURE__ */ jsx(
        SelectControl,
        {
          __next40pxDefaultSize: true,
          __nextHasNoMarginBottom: true,
          label: __("Method"),
          options: [
            { label: "Get", value: "get" },
            { label: "Post", value: "post" }
          ],
          value: method,
          onChange: (value) => setAttributes({ method: value }),
          help: __(
            "Select the method to use for form submissions."
          )
        }
      ),
      /* @__PURE__ */ jsx(
        TextControl,
        {
          __next40pxDefaultSize: true,
          __nextHasNoMarginBottom: true,
          autoComplete: "off",
          label: __("Form action"),
          value: action,
          onChange: (newVal) => {
            setAttributes({
              action: newVal
            });
          },
          help: __(
            "The URL where the form should be submitted."
          ),
          type: "url"
        }
      )
    ] }),
    /* @__PURE__ */ jsx(
      "form",
      {
        ...innerBlocksProps,
        encType: submissionMethod === "email" ? "text/plain" : null
      }
    )
  ] });
};
var edit_default = Edit;
export {
  edit_default as default
};
//# sourceMappingURL=edit.js.map