@wordpress/block-library
Version:
Block library for the WordPress editor.
262 lines (227 loc) • 9.87 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.UnsupportedBlockEdit = void 0;
var _element = require("@wordpress/element");
var _reactNative = require("react-native");
var _reactNativeBridge = require("@wordpress/react-native-bridge");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _blockLibrary = require("@wordpress/block-library");
var _blocks = require("@wordpress/blocks");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _data = require("@wordpress/data");
var _hooks = require("@wordpress/hooks");
var _blockEditor = require("@wordpress/block-editor");
var _style = _interopRequireDefault(require("./style.scss"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// Blocks that can't be edited through the Unsupported block editor identified by their name.
const UBE_INCOMPATIBLE_BLOCKS = ['core/block'];
const I18N_BLOCK_SCHEMA_TITLE = 'block title';
class UnsupportedBlockEdit extends _element.Component {
constructor(props) {
super(props);
this.state = {
showHelp: false
};
this.toggleSheet = this.toggleSheet.bind(this);
this.closeSheet = this.closeSheet.bind(this);
this.requestFallback = this.requestFallback.bind(this);
this.onHelpButtonPressed = this.onHelpButtonPressed.bind(this);
}
toggleSheet() {
this.setState({
showHelp: !this.state.showHelp
});
}
closeSheet() {
this.setState({
showHelp: false
});
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
}
}
getTitle() {
const {
originalName
} = this.props.attributes;
const blockType = _blockLibrary.coreBlocks[originalName];
const title = blockType === null || blockType === void 0 ? void 0 : blockType.metadata.title;
const textdomain = blockType === null || blockType === void 0 ? void 0 : blockType.metadata.textdomain;
return title && textdomain ? // eslint-disable-next-line @wordpress/i18n-no-variables, @wordpress/i18n-text-domain
(0, _i18n._x)(title, I18N_BLOCK_SCHEMA_TITLE, textdomain) : originalName;
}
renderHelpIcon() {
const infoIconStyle = this.props.getStylesFromColorScheme(_style.default.infoIcon, _style.default.infoIconDark);
return (0, _element.createElement)(_reactNative.TouchableHighlight, {
onPress: this.onHelpButtonPressed,
style: _style.default.helpIconContainer,
accessibilityLabel: (0, _i18n.__)('Help button'),
accessibilityRole: 'button',
accessibilityHint: (0, _i18n.__)('Tap here to show help')
}, (0, _element.createElement)(_components.Icon, {
className: "unsupported-icon-help",
label: (0, _i18n.__)('Help icon'),
icon: _icons.help,
color: infoIconStyle.color
}));
}
onHelpButtonPressed() {
if (!this.props.isSelected) {
this.props.selectBlock();
}
this.toggleSheet();
}
requestFallback() {
if (this.props.canEnableUnsupportedBlockEditor && this.props.isUnsupportedBlockEditorSupported === false) {
this.toggleSheet();
this.setState({
sendButtonPressMessage: true
});
} else {
this.toggleSheet();
this.setState({
sendFallbackMessage: true
});
}
}
renderSheet(blockTitle, blockName) {
const {
getStylesFromColorScheme,
attributes,
clientId,
isUnsupportedBlockEditorSupported,
canEnableUnsupportedBlockEditor,
isEditableInUnsupportedBlockEditor
} = this.props;
const infoTextStyle = getStylesFromColorScheme(_style.default.infoText, _style.default.infoTextDark);
const infoTitleStyle = getStylesFromColorScheme(_style.default.infoTitle, _style.default.infoTitleDark);
const infoDescriptionStyle = getStylesFromColorScheme(_style.default.infoDescription, _style.default.infoDescriptionDark);
const infoSheetIconStyle = getStylesFromColorScheme(_style.default.infoSheetIcon, _style.default.infoSheetIconDark);
/* translators: Missing block alert title. %s: The localized block name */
const titleFormat = (0, _i18n.__)("'%s' is not fully-supported");
const infoTitle = (0, _i18n.sprintf)(titleFormat, blockTitle);
const missingBlockDetail = (0, _hooks.applyFilters)('native.missing_block_detail', (0, _i18n.__)('We are working hard to add more blocks with each release.'));
const missingBlockActionButton = (0, _hooks.applyFilters)('native.missing_block_action_button', (0, _i18n.__)('Edit using web editor'));
const actionButtonStyle = getStylesFromColorScheme(_style.default.actionButton, _style.default.actionButtonDark);
return (0, _element.createElement)(_components.BottomSheet, {
isVisible: this.state.showHelp,
hideHeader: true,
onClose: this.closeSheet,
onModalHide: () => {
if (this.state.sendFallbackMessage) {
// On iOS, onModalHide is called when the controller is still part of the hierarchy.
// A small delay will ensure that the controller has already been removed.
this.timeout = setTimeout(() => {
// For the Classic block, the content is kept in the `content` attribute.
const content = blockName === 'core/freeform' ? attributes.content : attributes.originalContent;
(0, _reactNativeBridge.requestUnsupportedBlockFallback)(content, clientId, blockName, blockTitle);
}, 100);
this.setState({
sendFallbackMessage: false
});
} else if (this.state.sendButtonPressMessage) {
this.timeout = setTimeout(() => {
(0, _reactNativeBridge.sendActionButtonPressedAction)(_reactNativeBridge.actionButtons.missingBlockAlertActionButton);
}, 100);
this.setState({
sendButtonPressMessage: false
});
}
}
}, (0, _element.createElement)(_reactNative.View, {
style: _style.default.infoContainer
}, (0, _element.createElement)(_components.Icon, {
icon: _icons.help,
color: infoSheetIconStyle.color,
size: _style.default.infoSheetIcon.size
}), (0, _element.createElement)(_reactNative.Text, {
style: [infoTextStyle, infoTitleStyle]
}, infoTitle), isEditableInUnsupportedBlockEditor && (0, _element.createElement)(_reactNative.Text, {
style: [infoTextStyle, infoDescriptionStyle]
}, missingBlockDetail)), (isUnsupportedBlockEditorSupported || canEnableUnsupportedBlockEditor) && isEditableInUnsupportedBlockEditor && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.TextControl, {
label: missingBlockActionButton,
separatorType: "topFullWidth",
onPress: this.requestFallback,
labelStyle: actionButtonStyle
}), (0, _element.createElement)(_components.TextControl, {
label: (0, _i18n.__)('Dismiss'),
separatorType: "topFullWidth",
onPress: this.toggleSheet,
labelStyle: actionButtonStyle
})));
}
render() {
const {
originalName
} = this.props.attributes;
const {
getStylesFromColorScheme,
preferredColorScheme
} = this.props;
const blockType = _blockLibrary.coreBlocks[originalName];
const title = this.getTitle();
const titleStyle = getStylesFromColorScheme(_style.default.unsupportedBlockMessage, _style.default.unsupportedBlockMessageDark);
const subTitleStyle = getStylesFromColorScheme(_style.default.unsupportedBlockSubtitle, _style.default.unsupportedBlockSubtitleDark);
const subtitle = (0, _element.createElement)(_reactNative.Text, {
style: subTitleStyle
}, (0, _i18n.__)('Unsupported'));
const icon = blockType ? (0, _blocks.normalizeIconObject)(blockType.settings.icon) : _icons.plugins;
const iconStyle = getStylesFromColorScheme(_style.default.unsupportedBlockIcon, _style.default.unsupportedBlockIconDark);
const iconClassName = 'unsupported-icon' + '-' + preferredColorScheme;
return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
disabled: !this.props.isSelected,
accessibilityLabel: (0, _i18n.__)('Help button'),
accessibilityRole: 'button',
accessibilityHint: (0, _i18n.__)('Tap here to show help'),
onPress: this.toggleSheet
}, (0, _element.createElement)(_reactNative.View, {
style: getStylesFromColorScheme(_style.default.unsupportedBlock, _style.default.unsupportedBlockDark)
}, this.renderHelpIcon(), (0, _element.createElement)(_components.Icon, {
className: iconClassName,
icon: icon && icon.src ? icon.src : icon,
color: iconStyle.color
}), (0, _element.createElement)(_reactNative.Text, {
style: titleStyle
}, title), subtitle, this.renderSheet(title, originalName)));
}
}
exports.UnsupportedBlockEdit = UnsupportedBlockEdit;
var _default = (0, _compose.compose)([(0, _data.withSelect)((select, _ref) => {
let {
attributes
} = _ref;
const {
getSettings
} = select(_blockEditor.store);
return {
isUnsupportedBlockEditorSupported: getSettings('capabilities').unsupportedBlockEditor === true,
canEnableUnsupportedBlockEditor: getSettings('capabilities').canEnableUnsupportedBlockEditor === true,
isEditableInUnsupportedBlockEditor: !UBE_INCOMPATIBLE_BLOCKS.includes(attributes.originalName)
};
}), (0, _data.withDispatch)((dispatch, ownProps) => {
const {
selectBlock
} = dispatch(_blockEditor.store);
return {
selectBlock() {
selectBlock(ownProps.clientId);
}
};
}), _compose.withPreferredColorScheme])(UnsupportedBlockEdit);
exports.default = _default;
//# sourceMappingURL=edit.native.js.map