@wordpress/block-editor/build/components/inner-blocks/warning-max-depth-exceeded.native.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _warning = _interopRequireDefault(require("../warning"));
var _unsupportedBlockDetails = _interopRequireDefault(require("../unsupported-block-details"));
var _store = require("../../store");
var _constants = require("./constants");
var _useUnsupportedBlockEditor = _interopRequireDefault(require("../use-unsupported-block-editor"));
var _convertToGroupButtons = require("../convert-to-group-buttons");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const EMPTY_ARRAY = [];
const WarningMaxDepthExceeded = ({
  clientId
}) => {
  const [showDetails, setShowDetails] = (0, _element.useState)(false);
  const isSelected = (0, _data.useSelect)(select => select(_store.store).isBlockSelected(clientId), [clientId]);

  // We rely on the logic related to the Group/Ungroup buttons used in the block options to
  // determine whether to use the Ungroup action.
  const convertToGroupButtonProps = (0, _convertToGroupButtons.useConvertToGroupButtonProps)([clientId]);
  const {
    isUngroupable
  } = convertToGroupButtonProps;
  const convertToGroupButtons = (0, _convertToGroupButtons.useConvertToGroupButtons)({
    ...convertToGroupButtonProps
  });
  const onUngroup = convertToGroupButtons.ungroup.onSelect;
  const {
    isUnsupportedBlockEditorSupported,
    canEnableUnsupportedBlockEditor
  } = (0, _useUnsupportedBlockEditor.default)(clientId);

  /* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
  const descriptionFormat = (0, _i18n.__)('Blocks nested deeper than %d levels may not render properly in the mobile editor.');
  let description = (0, _i18n.sprintf)(descriptionFormat, _constants.MAX_NESTING_DEPTH);
  if (!isUnsupportedBlockEditorSupported && !canEnableUnsupportedBlockEditor) {
    // When UBE can't be used, the description mentions using the web browser to edit the block.
    description += ' ' + /* translators: Recommendation included in a warning related to having blocks deeply nested. */
    (0, _i18n.__)('For this reason, we recommend editing the block using your web browser.');
  }
  // Otherwise, the description mentions using the web editor (i.e. UBE).
  else {
    description += ' ' + /* translators: Recommendation included in a warning related to having blocks deeply nested. */
    (0, _i18n.__)('For this reason, we recommend editing the block using the web editor.');
  }
  // If the block can be flattened, we also suggest to ungroup the block.
  if (isUngroupable) {
    description += ' ' + /* translators: Alternative option included in a warning related to having blocks deeply nested. */
    (0, _i18n.__)('Alternatively, you can flatten the content by ungrouping the block.');
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
    disabled: !isSelected,
    accessibilityLabel: (0, _i18n.__)('Warning message'),
    accessibilityRole: "button",
    accessibilityHint: (0, _i18n.__)('Tap here to show more details.'),
    onPress: () => setShowDetails(true),
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.default, {
        message: (0, _i18n.__)('Block cannot be rendered because it is deeply nested. Tap here for more details.')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_unsupportedBlockDetails.default, {
        clientId: clientId,
        showSheet: showDetails,
        onCloseSheet: () => setShowDetails(false),
        title: (0, _i18n.__)('Deeply nested block'),
        description: description,
        customActions: isUngroupable ? [{
          label: (0, _i18n.__)('Ungroup block'),
          onPress: onUngroup
        }] : EMPTY_ARRAY
      })]
    })
  });
};
var _default = exports.default = WarningMaxDepthExceeded;
//# sourceMappingURL=warning-max-depth-exceeded.native.js.map