@wordpress/block-library
Version:
Block library for the WordPress editor.
255 lines (249 loc) • 9.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.UnsupportedBlockEdit = void 0;
var _reactNative = require("react-native");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _blockLibrary = require("@wordpress/block-library");
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
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 _notices = require("@wordpress/notices");
var _reactNativeBridge = require("@wordpress/react-native-bridge");
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* 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';
const EMPTY_ARRAY = [];
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() {
const {
attributes,
block,
clientId
} = this.props;
const {
originalName
} = attributes;
const title = this.getTitle();
const blockContent = (0, _blocks.serialize)(block ? [block] : []);
if (this.canEditUnsupportedBlock()) {
(0, _reactNativeBridge.requestUnsupportedBlockFallback)(blockContent, clientId, originalName, title);
return;
}
this.setState({
showHelp: !this.state.showHelp
});
}
canEditUnsupportedBlock() {
const {
canEnableUnsupportedBlockEditor,
isEditableInUnsupportedBlockEditor,
isUnsupportedBlockEditorSupported
} = this.props;
return !canEnableUnsupportedBlockEditor && isUnsupportedBlockEditorSupported && isEditableInUnsupportedBlockEditor;
}
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?.metadata.title;
const textdomain = 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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
onPress: this.onHelpButtonPressed,
style: _style.default.helpIconContainer,
accessibilityLabel: (0, _i18n.__)('Help button'),
accessibilityRole: "button",
accessibilityHint: (0, _i18n.__)('Tap here to show help'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
className: "unsupported-icon-help",
label: (0, _i18n.__)('Help icon'),
icon: _icons.help,
fill: 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 {
block,
clientId,
createSuccessNotice,
replaceBlocks
} = this.props;
const {
showHelp
} = this.state;
/* translators: Missing block alert title. %s: The localized block name */
const titleFormat = (0, _i18n.__)("'%s' is not fully-supported");
const title = (0, _i18n.sprintf)(titleFormat, blockTitle);
let description = (0, _hooks.applyFilters)('native.missing_block_detail', (0, _i18n.__)('We are working hard to add more blocks with each release.'), blockName);
let customActions = EMPTY_ARRAY;
// For Classic blocks, we offer the alternative to convert the content to blocks.
if (blockName === 'core/freeform') {
description += ' ' + (0, _i18n.__)('Alternatively, you can convert the content to blocks.');
/* translators: displayed right after the classic block is converted to blocks. %s: The localized classic block name */
const successNotice = (0, _i18n.__)("'%s' block converted to blocks");
customActions = [{
label: (0, _i18n.__)('Convert to blocks'),
onPress: () => {
createSuccessNotice((0, _i18n.sprintf)(successNotice, blockTitle));
replaceBlocks(block);
}
}];
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.UnsupportedBlockDetails, {
clientId: clientId,
showSheet: showHelp,
onCloseSheet: this.closeSheet,
customBlockTitle: blockTitle,
title: title,
description: description,
customActions: customActions
});
}
render() {
const {
originalName
} = this.props.attributes;
const {
isSelected,
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 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: subTitleStyle,
children: this.canEditUnsupportedBlock() ? (0, _i18n.__)('Tap to edit') : (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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
disabled: !isSelected,
activeOpacity: 0.5,
accessibilityLabel: (0, _i18n.__)('Help button'),
accessibilityRole: "button",
accessibilityHint: (0, _i18n.__)('Tap here to show help'),
onPress: this.toggleSheet,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: getStylesFromColorScheme(_style.default.unsupportedBlock, _style.default.unsupportedBlockDark),
children: [!this.canEditUnsupportedBlock() && this.renderHelpIcon(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: _style.default.unsupportedBlockHeader,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
className: iconClassName,
icon: icon && icon.src ? icon.src : icon,
fill: iconStyle.color
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: titleStyle,
children: title
})]
}), subtitle, this.renderSheet(title, originalName)]
})
});
}
}
exports.UnsupportedBlockEdit = UnsupportedBlockEdit;
var _default = exports.default = (0, _compose.compose)([(0, _data.withSelect)((select, {
attributes,
clientId
}) => {
const {
getBlock,
getSettings
} = select(_blockEditor.store);
const {
capabilities
} = getSettings();
return {
isUnsupportedBlockEditorSupported: capabilities?.unsupportedBlockEditor === true,
canEnableUnsupportedBlockEditor: capabilities?.canEnableUnsupportedBlockEditor === true,
isEditableInUnsupportedBlockEditor: !UBE_INCOMPATIBLE_BLOCKS.includes(attributes.originalName),
block: getBlock(clientId)
};
}), (0, _data.withDispatch)((dispatch, ownProps) => {
const {
selectBlock,
replaceBlocks
} = dispatch(_blockEditor.store);
const {
createSuccessNotice
} = dispatch(_notices.store);
return {
selectBlock() {
selectBlock(ownProps.clientId);
},
replaceBlocks(block) {
replaceBlocks(ownProps.clientId, (0, _blocks.rawHandler)({
HTML: (0, _blocks.serialize)(block)
}));
},
createSuccessNotice
};
}), _compose.withPreferredColorScheme])(UnsupportedBlockEdit);
//# sourceMappingURL=edit.native.js.map