@wordpress/block-library/build-module/html/edit.mjs

Block library for the WordPress editor.

// packages/block-library/src/html/edit.js
import { __ } from "@wordpress/i18n";
import { useEffect, useState } from "@wordpress/element";
import {
  BlockControls,
  BlockIcon,
  InspectorControls,
  useBlockProps,
  store as blockEditorStore,
  privateApis as blockEditorPrivateApis
} from "@wordpress/block-editor";
import { parse, serialize, getBlockContent } from "@wordpress/blocks";
import { useSelect, useDispatch, useRegistry } from "@wordpress/data";
import deprecated from "@wordpress/deprecated";
import {
  ToolbarButton,
  ToolbarGroup,
  Placeholder,
  Button,
  __experimentalVStack as VStack
} from "@wordpress/components";
import { code } from "@wordpress/icons";
import { unlock } from "../lock-unlock.mjs";
import HTMLEditModal from "./modal.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
var { InnerContent } = unlock(blockEditorPrivateApis);
function HTMLEdit({ clientId, attributes }) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const registry = useRegistry();
  const { updateBlock, replaceInnerBlocks } = useDispatch(blockEditorStore);
  const content = useSelect(
    (select) => {
      const block = select(blockEditorStore).getBlock(clientId);
      return block ? getBlockContent(block) : "";
    },
    [clientId]
  );
  const blockProps = useBlockProps({
    className: "block-library-html__edit"
  });
  const onUpdate = (nextContent) => {
    if (nextContent === content) {
      return;
    }
    const [parsedBlock] = parse(
      `<!-- wp:html -->
${nextContent}
<!-- /wp:html -->`
    );
    const nextInnerBlocks = parsedBlock?.innerBlocks ?? [];
    const prevInnerBlocks = registry.select(blockEditorStore).getBlocks(clientId);
    const innerBlocksUnchanged = prevInnerBlocks.length === nextInnerBlocks.length && prevInnerBlocks.every(
      (block, index) => serialize(block) === serialize(nextInnerBlocks[index])
    );
    registry.batch(() => {
      updateBlock(clientId, {
        innerContent: parsedBlock?.innerContent ?? (nextContent ? [nextContent] : [])
      });
      if (!innerBlocksUnchanged) {
        replaceInnerBlocks(clientId, nextInnerBlocks, false);
      }
    });
  };
  useEffect(() => {
    if (!attributes.content) {
      return;
    }
    deprecated("The content attribute on the Custom HTML block", {
      since: "7.1",
      alternative: "inner content"
    });
    updateBlock(clientId, {
      attributes: { content: void 0 },
      innerContent: [attributes.content]
    });
  }, [attributes.content]);
  if (!content?.trim()) {
    return /* @__PURE__ */ jsxs("div", { ...blockProps, children: [
      /* @__PURE__ */ jsx(
        Placeholder,
        {
          icon: /* @__PURE__ */ jsx(BlockIcon, { icon: code }),
          label: __("Custom HTML"),
          instructions: __(
            "Add custom HTML code and preview how it looks."
          ),
          children: /* @__PURE__ */ jsx(
            Button,
            {
              __next40pxDefaultSize: true,
              variant: "primary",
              onClick: () => setIsModalOpen(true),
              children: __("Edit HTML")
            }
          )
        }
      ),
      isModalOpen && /* @__PURE__ */ jsx(
        HTMLEditModal,
        {
          onRequestClose: () => setIsModalOpen(false),
          content,
          onUpdate
        }
      )
    ] });
  }
  return /* @__PURE__ */ jsxs("div", { ...blockProps, children: [
    /* @__PURE__ */ jsx(BlockControls, { children: /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(ToolbarButton, { onClick: () => setIsModalOpen(true), children: __("Edit code") }) }) }),
    /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsx(VStack, { className: "block-library-html__edit-code", expanded: true, children: /* @__PURE__ */ jsx(
      Button,
      {
        className: "block-library-html__edit-code-button",
        __next40pxDefaultSize: true,
        variant: "secondary",
        onClick: () => setIsModalOpen(true),
        children: __("Edit code")
      }
    ) }) }),
    /* @__PURE__ */ jsx(InnerContent, { clientId }),
    isModalOpen && /* @__PURE__ */ jsx(
      HTMLEditModal,
      {
        onRequestClose: () => setIsModalOpen(false),
        content,
        onUpdate
      }
    )
  ] });
}
export {
  HTMLEdit as default
};
//# sourceMappingURL=edit.mjs.map