@wordpress/block-library/build/block/edit.native.js

Block library for the WordPress editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = ReusableBlockEdit;

var _element = require("@wordpress/element");

var _reactNative = require("react-native");

var _coreData = require("@wordpress/core-data");

var _components = require("@wordpress/components");

var _data = require("@wordpress/data");

var _i18n = require("@wordpress/i18n");

var _blockEditor = require("@wordpress/block-editor");

var _compose = require("@wordpress/compose");

var _icons = require("@wordpress/icons");

var _reusableBlocks = require("@wordpress/reusable-blocks");

var _notices = require("@wordpress/notices");

var _editor = _interopRequireDefault(require("./editor.scss"));

var _editTitle = _interopRequireDefault(require("./edit-title"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function ReusableBlockEdit(_ref) {
  let {
    attributes: {
      ref
    },
    clientId,
    isSelected
  } = _ref;
  const hasAlreadyRendered = (0, _blockEditor.__experimentalUseHasRecursion)(ref);
  const [showHelp, setShowHelp] = (0, _element.useState)(false);
  const infoTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_editor.default.infoText, _editor.default.infoTextDark);
  const infoTitleStyle = (0, _compose.usePreferredColorSchemeStyle)(_editor.default.infoTitle, _editor.default.infoTitleDark);
  const infoSheetIconStyle = (0, _compose.usePreferredColorSchemeStyle)(_editor.default.infoSheetIcon, _editor.default.infoSheetIconDark);
  const infoDescriptionStyle = (0, _compose.usePreferredColorSchemeStyle)(_editor.default.infoDescription, _editor.default.infoDescriptionDark);
  const actionButtonStyle = (0, _compose.usePreferredColorSchemeStyle)(_editor.default.actionButton, _editor.default.actionButtonDark);
  const spinnerStyle = (0, _compose.usePreferredColorSchemeStyle)(_editor.default.spinner, _editor.default.spinnerDark);
  const {
    hasResolved,
    isEditing,
    isMissing
  } = (0, _data.useSelect)(select => {
    const persistedBlock = select(_coreData.store).getEntityRecord('postType', 'wp_block', ref);
    const hasResolvedBlock = select(_coreData.store).hasFinishedResolution('getEntityRecord', ['postType', 'wp_block', ref]);
    return {
      hasResolved: hasResolvedBlock,
      isEditing: select(_reusableBlocks.store).__experimentalIsEditingReusableBlock(clientId),
      isMissing: hasResolvedBlock && !persistedBlock
    };
  }, [ref, clientId]);
  const {
    createSuccessNotice
  } = (0, _data.useDispatch)(_notices.store);
  const {
    __experimentalConvertBlockToStatic: convertBlockToStatic
  } = (0, _data.useDispatch)(_reusableBlocks.store);
  const {
    clearSelectedBlock
  } = (0, _data.useDispatch)(_blockEditor.store);
  const [blocks, onInput, onChange] = (0, _coreData.useEntityBlockEditor)('postType', 'wp_block', {
    id: ref
  });
  const [title] = (0, _coreData.useEntityProp)('postType', 'wp_block', 'title', ref);

  function openSheet() {
    setShowHelp(true);
  }

  function closeSheet() {
    setShowHelp(false);
  }

  const onConvertToRegularBlocks = (0, _element.useCallback)(() => {
    createSuccessNotice((0, _i18n.sprintf)(
    /* translators: %s: name of the reusable block */
    (0, _i18n.__)('%s converted to regular blocks'), title));
    clearSelectedBlock(); // Convert action is executed at the end of the current JavaScript execution block
    // to prevent issues related to undo/redo actions.

    setImmediate(() => convertBlockToStatic(clientId));
  }, [title, clientId]);

  function renderSheet() {
    const infoTitle = _reactNative.Platform.OS === 'android' ? (0, _i18n.__)('Editing reusable blocks is not yet supported on WordPress for Android') : (0, _i18n.__)('Editing reusable blocks is not yet supported on WordPress for iOS');
    return (0, _element.createElement)(_components.BottomSheet, {
      isVisible: showHelp,
      hideHeader: true,
      onClose: closeSheet
    }, (0, _element.createElement)(_reactNative.View, {
      style: _editor.default.infoContainer
    }, (0, _element.createElement)(_components.Icon, {
      icon: _icons.help,
      color: infoSheetIconStyle.color,
      size: _editor.default.infoSheetIcon.size
    }), (0, _element.createElement)(_reactNative.Text, {
      style: [infoTextStyle, infoTitleStyle]
    }, infoTitle), (0, _element.createElement)(_reactNative.Text, {
      style: [infoTextStyle, infoDescriptionStyle]
    }, (0, _i18n.__)('Alternatively, you can detach and edit these blocks separately by tapping “Convert to regular blocks”.')), (0, _element.createElement)(_components.TextControl, {
      label: (0, _i18n.__)('Convert to regular blocks'),
      separatorType: "topFullWidth",
      onPress: onConvertToRegularBlocks,
      labelStyle: actionButtonStyle
    })));
  }

  if (hasAlreadyRendered) {
    return (0, _element.createElement)(_blockEditor.Warning, {
      message: (0, _i18n.__)('Block cannot be rendered inside itself.')
    });
  }

  if (isMissing) {
    return (0, _element.createElement)(_blockEditor.Warning, {
      message: (0, _i18n.__)('Block has been deleted or is unavailable.')
    });
  }

  if (!hasResolved) {
    return (0, _element.createElement)(_reactNative.View, {
      style: spinnerStyle
    }, (0, _element.createElement)(_reactNative.ActivityIndicator, {
      animating: true
    }));
  }

  let element = (0, _element.createElement)(_blockEditor.InnerBlocks, {
    value: blocks,
    onChange: onChange,
    onInput: onInput
  });

  if (!isEditing) {
    element = (0, _element.createElement)(_components.Disabled, null, element);
  }

  return (0, _element.createElement)(_blockEditor.__experimentalRecursionProvider, {
    uniqueId: ref
  }, (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
    disabled: !isSelected,
    accessibilityLabel: (0, _i18n.__)('Help button'),
    accessibilityRole: 'button',
    accessibilityHint: (0, _i18n.__)('Tap here to show help'),
    onPress: openSheet
  }, (0, _element.createElement)(_reactNative.View, null, isSelected && (0, _element.createElement)(_editTitle.default, {
    title: title
  }), element, renderSheet())));
}
//# sourceMappingURL=edit.native.js.map