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

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockInvalidWarning;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _blocks = require("@wordpress/blocks");
var _data = require("@wordpress/data");
var _warning = _interopRequireDefault(require("../warning"));
var _blockCompare = _interopRequireDefault(require("../block-compare"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const blockToBlocks = block => (0, _blocks.rawHandler)({
  HTML: block.originalContent
});
function BlockInvalidWarning({
  clientId
}) {
  const {
    block,
    canInsertHTMLBlock,
    canInsertClassicBlock
  } = (0, _data.useSelect)(select => {
    const {
      canInsertBlockType,
      getBlock,
      getBlockRootClientId
    } = select(_store.store);
    const rootClientId = getBlockRootClientId(clientId);
    return {
      block: getBlock(clientId),
      canInsertHTMLBlock: canInsertBlockType('core/html', rootClientId),
      canInsertClassicBlock: canInsertBlockType('core/freeform', rootClientId)
    };
  }, [clientId]);
  const {
    replaceBlock
  } = (0, _data.useDispatch)(_store.store);
  const [compare, setCompare] = (0, _element.useState)(false);
  const onCompareClose = (0, _element.useCallback)(() => setCompare(false), []);
  const convert = (0, _element.useMemo)(() => ({
    toClassic() {
      const classicBlock = (0, _blocks.createBlock)('core/freeform', {
        content: block.originalContent
      });
      return replaceBlock(block.clientId, classicBlock);
    },
    toHTML() {
      const htmlBlock = (0, _blocks.createBlock)('core/html', {
        content: block.originalContent
      });
      return replaceBlock(block.clientId, htmlBlock);
    },
    toBlocks() {
      const newBlocks = blockToBlocks(block);
      return replaceBlock(block.clientId, newBlocks);
    },
    toRecoveredBlock() {
      const recoveredBlock = (0, _blocks.createBlock)(block.name, block.attributes, block.innerBlocks);
      return replaceBlock(block.clientId, recoveredBlock);
    }
  }), [block, replaceBlock]);
  const secondaryActions = (0, _element.useMemo)(() => [{
    // translators: Button to fix block content
    title: (0, _i18n._x)('Resolve', 'imperative verb'),
    onClick: () => setCompare(true)
  }, canInsertHTMLBlock && {
    title: (0, _i18n.__)('Convert to HTML'),
    onClick: convert.toHTML
  }, canInsertClassicBlock && {
    title: (0, _i18n.__)('Convert to Classic Block'),
    onClick: convert.toClassic
  }].filter(Boolean), [canInsertHTMLBlock, canInsertClassicBlock, convert]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.default, {
      actions: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        __next40pxDefaultSize: true,
        onClick: convert.toRecoveredBlock,
        variant: "primary",
        children: (0, _i18n.__)('Attempt recovery')
      }, "recover")],
      secondaryActions: secondaryActions,
      children: (0, _i18n.__)('Block contains unexpected or invalid content.')
    }), compare && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
      title:
      // translators: Dialog title to fix block content
      (0, _i18n.__)('Resolve Block'),
      onRequestClose: onCompareClose,
      className: "block-editor-block-compare",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockCompare.default, {
        block: block,
        onKeep: convert.toHTML,
        onConvert: convert.toBlocks,
        convertor: blockToBlocks,
        convertButtonText: (0, _i18n.__)('Convert to Blocks')
      })
    })]
  });
}
//# sourceMappingURL=block-invalid-warning.js.map