@wordpress/block-library
Version:
Block library for the WordPress editor.
266 lines (248 loc) • 10.7 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import { createElement } from "@wordpress/element";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { PanelBody, ToggleControl, Toolbar, withFallbackStyles } from '@wordpress/components';
import { withColors, AlignmentToolbar, BlockControls, ContrastChecker, FontSizePicker, InspectorControls, PanelColorSettings, RichText, withFontSizes } from '@wordpress/block-editor';
import { createBlock } from '@wordpress/blocks';
import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
var _window = window,
getComputedStyle = _window.getComputedStyle;
var name = 'core/paragraph';
var applyFallbackStyles = withFallbackStyles(function (node, ownProps) {
var _ownProps$attributes = ownProps.attributes,
textColor = _ownProps$attributes.textColor,
backgroundColor = _ownProps$attributes.backgroundColor,
fontSize = _ownProps$attributes.fontSize,
customFontSize = _ownProps$attributes.customFontSize;
var editableNode = node.querySelector('[contenteditable="true"]'); //verify if editableNode is available, before using getComputedStyle.
var computedStyles = editableNode ? getComputedStyle(editableNode) : null;
return {
fallbackBackgroundColor: backgroundColor || !computedStyles ? undefined : computedStyles.backgroundColor,
fallbackTextColor: textColor || !computedStyles ? undefined : computedStyles.color,
fallbackFontSize: fontSize || customFontSize || !computedStyles ? undefined : parseInt(computedStyles.fontSize) || undefined
};
});
var ParagraphBlock =
/*#__PURE__*/
function (_Component) {
_inherits(ParagraphBlock, _Component);
function ParagraphBlock() {
var _this;
_classCallCheck(this, ParagraphBlock);
_this = _possibleConstructorReturn(this, _getPrototypeOf(ParagraphBlock).apply(this, arguments));
_this.onReplace = _this.onReplace.bind(_assertThisInitialized(_assertThisInitialized(_this)));
_this.toggleDropCap = _this.toggleDropCap.bind(_assertThisInitialized(_assertThisInitialized(_this)));
_this.splitBlock = _this.splitBlock.bind(_assertThisInitialized(_assertThisInitialized(_this)));
return _this;
}
_createClass(ParagraphBlock, [{
key: "onReplace",
value: function onReplace(blocks) {
var _this$props = this.props,
attributes = _this$props.attributes,
onReplace = _this$props.onReplace;
onReplace(blocks.map(function (block, index) {
return index === 0 && block.name === name ? _objectSpread({}, block, {
attributes: _objectSpread({}, attributes, block.attributes)
}) : block;
}));
}
}, {
key: "toggleDropCap",
value: function toggleDropCap() {
var _this$props2 = this.props,
attributes = _this$props2.attributes,
setAttributes = _this$props2.setAttributes;
setAttributes({
dropCap: !attributes.dropCap
});
}
}, {
key: "getDropCapHelp",
value: function getDropCapHelp(checked) {
return checked ? __('Showing large initial letter.') : __('Toggle to show a large initial letter.');
}
/**
* Split handler for RichText value, namely when content is pasted or the
* user presses the Enter key.
*
* @param {?Array} before Optional before value, to be used as content
* in place of what exists currently for the
* block. If undefined, the block is deleted.
* @param {?Array} after Optional after value, to be appended in a new
* paragraph block to the set of blocks passed
* as spread.
* @param {...WPBlock} blocks Optional blocks inserted between the before
* and after value blocks.
*/
}, {
key: "splitBlock",
value: function splitBlock(before, after) {
var _this$props3 = this.props,
attributes = _this$props3.attributes,
insertBlocksAfter = _this$props3.insertBlocksAfter,
setAttributes = _this$props3.setAttributes,
onReplace = _this$props3.onReplace;
for (var _len = arguments.length, blocks = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
blocks[_key - 2] = arguments[_key];
}
if (after !== null) {
// Append "After" content as a new paragraph block to the end of
// any other blocks being inserted after the current paragraph.
blocks.push(createBlock(name, {
content: after
}));
}
if (blocks.length && insertBlocksAfter) {
insertBlocksAfter(blocks);
}
var content = attributes.content;
if (before === null) {
// If before content is omitted, treat as intent to delete block.
onReplace([]);
} else if (content !== before) {
// Only update content if it has in-fact changed. In case that user
// has created a new paragraph at end of an existing one, the value
// of before will be strictly equal to the current content.
setAttributes({
content: before
});
}
}
}, {
key: "render",
value: function render() {
var _classnames;
var _this$props4 = this.props,
attributes = _this$props4.attributes,
setAttributes = _this$props4.setAttributes,
mergeBlocks = _this$props4.mergeBlocks,
onReplace = _this$props4.onReplace,
className = _this$props4.className,
backgroundColor = _this$props4.backgroundColor,
textColor = _this$props4.textColor,
setBackgroundColor = _this$props4.setBackgroundColor,
setTextColor = _this$props4.setTextColor,
fallbackBackgroundColor = _this$props4.fallbackBackgroundColor,
fallbackTextColor = _this$props4.fallbackTextColor,
fallbackFontSize = _this$props4.fallbackFontSize,
fontSize = _this$props4.fontSize,
setFontSize = _this$props4.setFontSize,
isRTL = _this$props4.isRTL;
var align = attributes.align,
content = attributes.content,
dropCap = attributes.dropCap,
placeholder = attributes.placeholder,
direction = attributes.direction;
return createElement(Fragment, null, createElement(BlockControls, null, createElement(AlignmentToolbar, {
value: align,
onChange: function onChange(nextAlign) {
setAttributes({
align: nextAlign
});
}
}), isRTL && createElement(Toolbar, {
controls: [{
icon: 'editor-ltr',
title: _x('Left to right', 'editor button'),
isActive: direction === 'ltr',
onClick: function onClick() {
var nextDirection = direction === 'ltr' ? undefined : 'ltr';
setAttributes({
direction: nextDirection
});
}
}]
})), createElement(InspectorControls, null, createElement(PanelBody, {
title: __('Text Settings'),
className: "blocks-font-size"
}, createElement(FontSizePicker, {
fallbackFontSize: fallbackFontSize,
value: fontSize.size,
onChange: setFontSize
}), createElement(ToggleControl, {
label: __('Drop Cap'),
checked: !!dropCap,
onChange: this.toggleDropCap,
help: this.getDropCapHelp
})), createElement(PanelColorSettings, {
title: __('Color Settings'),
initialOpen: false,
colorSettings: [{
value: backgroundColor.color,
onChange: setBackgroundColor,
label: __('Background Color')
}, {
value: textColor.color,
onChange: setTextColor,
label: __('Text Color')
}]
}, createElement(ContrastChecker, _extends({
textColor: textColor.color,
backgroundColor: backgroundColor.color,
fallbackTextColor: fallbackTextColor,
fallbackBackgroundColor: fallbackBackgroundColor
}, {
fontSize: fontSize.size
})))), createElement(RichText, {
identifier: "content",
tagName: "p",
className: classnames('wp-block-paragraph', className, (_classnames = {
'has-text-color': textColor.color,
'has-background': backgroundColor.color,
'has-drop-cap': dropCap
}, _defineProperty(_classnames, backgroundColor.class, backgroundColor.class), _defineProperty(_classnames, textColor.class, textColor.class), _defineProperty(_classnames, fontSize.class, fontSize.class), _classnames)),
style: {
backgroundColor: backgroundColor.color,
color: textColor.color,
fontSize: fontSize.size ? fontSize.size + 'px' : undefined,
textAlign: align,
direction: direction
},
value: content,
onChange: function onChange(nextContent) {
setAttributes({
content: nextContent
});
},
unstableOnSplit: this.splitBlock,
onMerge: mergeBlocks,
onReplace: this.onReplace,
onRemove: function onRemove() {
return onReplace([]);
},
"aria-label": content ? __('Paragraph block') : __('Empty block; start writing or type forward slash to choose a block'),
placeholder: placeholder || __('Start writing or type / to choose a block')
}));
}
}]);
return ParagraphBlock;
}(Component);
var ParagraphEdit = compose([withColors('backgroundColor', {
textColor: 'color'
}), withFontSizes('fontSize'), applyFallbackStyles, withSelect(function (select) {
var _select = select('core/block-editor'),
getSettings = _select.getSettings;
return {
isRTL: getSettings().isRTL
};
})])(ParagraphBlock);
export default ParagraphEdit;
//# sourceMappingURL=edit.js.map