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

Generic block editor.

/**
 * External dependencies
 */
import { TouchableWithoutFeedback, View } from 'react-native';

/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';

/**
 * Internal dependencies
 */
import Warning from '../warning';
import UnsupportedBlockDetails from '../unsupported-block-details';
import { store as blockEditorStore } from '../../store';
import { MAX_NESTING_DEPTH } from './constants';
import useUnsupportedBlockEditor from '../use-unsupported-block-editor';
import { useConvertToGroupButtons, useConvertToGroupButtonProps } from '../convert-to-group-buttons';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const EMPTY_ARRAY = [];
const WarningMaxDepthExceeded = ({
  clientId
}) => {
  const [showDetails, setShowDetails] = useState(false);
  const isSelected = useSelect(select => select(blockEditorStore).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 = useConvertToGroupButtonProps([clientId]);
  const {
    isUngroupable
  } = convertToGroupButtonProps;
  const convertToGroupButtons = useConvertToGroupButtons({
    ...convertToGroupButtonProps
  });
  const onUngroup = convertToGroupButtons.ungroup.onSelect;
  const {
    isUnsupportedBlockEditorSupported,
    canEnableUnsupportedBlockEditor
  } = useUnsupportedBlockEditor(clientId);

  /* translators: Warning related to having blocks deeply nested. %d: The deepest nesting level. */
  const descriptionFormat = __('Blocks nested deeper than %d levels may not render properly in the mobile editor.');
  let description = sprintf(descriptionFormat, 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. */
    __('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. */
    __('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. */
    __('Alternatively, you can flatten the content by ungrouping the block.');
  }
  return /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
    disabled: !isSelected,
    accessibilityLabel: __('Warning message'),
    accessibilityRole: "button",
    accessibilityHint: __('Tap here to show more details.'),
    onPress: () => setShowDetails(true),
    children: /*#__PURE__*/_jsxs(View, {
      children: [/*#__PURE__*/_jsx(Warning, {
        message: __('Block cannot be rendered because it is deeply nested. Tap here for more details.')
      }), /*#__PURE__*/_jsx(UnsupportedBlockDetails, {
        clientId: clientId,
        showSheet: showDetails,
        onCloseSheet: () => setShowDetails(false),
        title: __('Deeply nested block'),
        description: description,
        customActions: isUngroupable ? [{
          label: __('Ungroup block'),
          onPress: onUngroup
        }] : EMPTY_ARRAY
      })]
    })
  });
};
export default WarningMaxDepthExceeded;
//# sourceMappingURL=warning-max-depth-exceeded.native.js.map