@wordpress/block-library
Version:
Block library for the WordPress editor.
169 lines (165 loc) • 5.38 kB
JavaScript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _blocks = require("@wordpress/blocks");
var _icons = require("@wordpress/icons");
var _useEnter = require("./use-enter");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ParagraphRTLControl({
direction,
setDirection
}) {
return (0, _i18n.isRTL)() && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
icon: _icons.formatLtr,
title: (0, _i18n._x)('Left to right', 'editor button'),
isActive: direction === 'ltr',
onClick: () => {
setDirection(direction === 'ltr' ? undefined : 'ltr');
}
});
}
function hasDropCapDisabled(align) {
return align === ((0, _i18n.isRTL)() ? 'left' : 'right') || align === 'center';
}
function DropCapControl({
clientId,
attributes,
setAttributes,
name
}) {
// Please do not add a useSelect call to the paragraph block unconditionally.
// Every useSelect added to a (frequently used) block will degrade load
// and type performance. By moving it within InspectorControls, the subscription is
// now only added for the selected block(s).
const [isDropCapFeatureEnabled] = (0, _blockEditor.useSettings)('typography.dropCap');
if (!isDropCapFeatureEnabled) {
return null;
}
const {
align,
dropCap
} = attributes;
let helpText;
if (hasDropCapDisabled(align)) {
helpText = (0, _i18n.__)('Not available for aligned text.');
} else if (dropCap) {
helpText = (0, _i18n.__)('Showing large initial letter.');
} else {
helpText = (0, _i18n.__)('Show a large initial letter.');
}
const isDropCapControlEnabledByDefault = (0, _blocks.getBlockSupport)(name, 'typography.defaultControls.dropCap', false);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
group: "typography",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
hasValue: () => !!dropCap,
label: (0, _i18n.__)('Drop cap'),
isShownByDefault: isDropCapControlEnabledByDefault,
onDeselect: () => setAttributes({
dropCap: undefined
}),
resetAllFilter: () => ({
dropCap: undefined
}),
panelId: clientId,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
__nextHasNoMarginBottom: true,
label: (0, _i18n.__)('Drop cap'),
checked: !!dropCap,
onChange: () => setAttributes({
dropCap: !dropCap
}),
help: helpText,
disabled: hasDropCapDisabled(align)
})
})
});
}
function ParagraphBlock({
attributes,
mergeBlocks,
onReplace,
onRemove,
setAttributes,
clientId,
isSelected: isSingleSelected,
name
}) {
const {
align,
content,
direction,
dropCap,
placeholder
} = attributes;
const blockProps = (0, _blockEditor.useBlockProps)({
ref: (0, _useEnter.useOnEnter)({
clientId,
content
}),
className: (0, _clsx.default)({
'has-drop-cap': hasDropCapDisabled(align) ? false : dropCap,
[`has-text-align-${align}`]: align
}),
style: {
direction
}
});
const blockEditingMode = (0, _blockEditor.useBlockEditingMode)();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [blockEditingMode === 'default' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.BlockControls, {
group: "block",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.AlignmentControl, {
value: align,
onChange: newAlign => setAttributes({
align: newAlign,
dropCap: hasDropCapDisabled(newAlign) ? false : dropCap
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(ParagraphRTLControl, {
direction: direction,
setDirection: newDirection => setAttributes({
direction: newDirection
})
})]
}), isSingleSelected && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropCapControl, {
name: name,
clientId: clientId,
attributes: attributes,
setAttributes: setAttributes
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText, {
identifier: "content",
tagName: "p",
...blockProps,
value: content,
onChange: newContent => setAttributes({
content: newContent
}),
onMerge: mergeBlocks,
onReplace: onReplace,
onRemove: onRemove,
"aria-label": _blockEditor.RichText.isEmpty(content) ? (0, _i18n.__)('Empty block; start writing or type forward slash to choose a block') : (0, _i18n.__)('Block: Paragraph'),
"data-empty": _blockEditor.RichText.isEmpty(content),
placeholder: placeholder || (0, _i18n.__)('Type / to choose a block'),
"data-custom-placeholder": placeholder ? true : undefined,
__unstableEmbedURLOnPaste: true,
__unstableAllowPrefixTransformations: true
})]
});
}
var _default = exports.default = ParagraphBlock;
//# sourceMappingURL=edit.js.map
;