@wordpress/block-editor/build-module/components/block-list/block-invalid-warning.js

Generic block editor.

// packages/block-editor/src/components/block-list/block-invalid-warning.js
import { __, _x } from "@wordpress/i18n";
import { Button, Modal } from "@wordpress/components";
import { useState, useCallback, useMemo } from "@wordpress/element";
import { createBlock, rawHandler } from "@wordpress/blocks";
import { useDispatch, useSelect } from "@wordpress/data";
import Warning from "../warning";
import BlockCompare from "../block-compare";
import { store as blockEditorStore } from "../../store";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var blockToBlocks = (block) => rawHandler({
  HTML: block.originalContent
});
function BlockInvalidWarning({ clientId }) {
  const { block, canInsertHTMLBlock, canInsertClassicBlock } = useSelect(
    (select) => {
      const { canInsertBlockType, getBlock, getBlockRootClientId } = select(blockEditorStore);
      const rootClientId = getBlockRootClientId(clientId);
      return {
        block: getBlock(clientId),
        canInsertHTMLBlock: canInsertBlockType(
          "core/html",
          rootClientId
        ),
        canInsertClassicBlock: canInsertBlockType(
          "core/freeform",
          rootClientId
        )
      };
    },
    [clientId]
  );
  const { replaceBlock } = useDispatch(blockEditorStore);
  const [compare, setCompare] = useState(false);
  const onCompareClose = useCallback(() => setCompare(false), []);
  const convert = useMemo(
    () => ({
      toClassic() {
        const classicBlock = createBlock("core/freeform", {
          content: block.originalContent
        });
        return replaceBlock(block.clientId, classicBlock);
      },
      toHTML() {
        const htmlBlock = createBlock("core/html", {
          content: block.originalContent
        });
        return replaceBlock(block.clientId, htmlBlock);
      },
      toBlocks() {
        const newBlocks = blockToBlocks(block);
        return replaceBlock(block.clientId, newBlocks);
      },
      toRecoveredBlock() {
        const recoveredBlock = createBlock(
          block.name,
          block.attributes,
          block.innerBlocks
        );
        return replaceBlock(block.clientId, recoveredBlock);
      }
    }),
    [block, replaceBlock]
  );
  const secondaryActions = useMemo(
    () => [
      {
        // translators: Button to fix block content
        title: _x("Resolve", "imperative verb"),
        onClick: () => setCompare(true)
      },
      canInsertHTMLBlock && {
        title: __("Convert to HTML"),
        onClick: convert.toHTML
      },
      canInsertClassicBlock && {
        title: __("Convert to Classic Block"),
        onClick: convert.toClassic
      }
    ].filter(Boolean),
    [canInsertHTMLBlock, canInsertClassicBlock, convert]
  );
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(
      Warning,
      {
        actions: [
          /* @__PURE__ */ jsx(
            Button,
            {
              __next40pxDefaultSize: true,
              onClick: convert.toRecoveredBlock,
              variant: "primary",
              children: __("Attempt recovery")
            },
            "recover"
          )
        ],
        secondaryActions,
        children: __("Block contains unexpected or invalid content.")
      }
    ),
    compare && /* @__PURE__ */ jsx(
      Modal,
      {
        title: (
          // translators: Dialog title to fix block content
          __("Resolve Block")
        ),
        onRequestClose: onCompareClose,
        className: "block-editor-block-compare",
        children: /* @__PURE__ */ jsx(
          BlockCompare,
          {
            block,
            onKeep: convert.toHTML,
            onConvert: convert.toBlocks,
            convertor: blockToBlocks,
            convertButtonText: __("Convert to Blocks")
          }
        )
      }
    )
  ] });
}
export {
  BlockInvalidWarning as default
};
//# sourceMappingURL=block-invalid-warning.js.map