@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
184 lines (179 loc) • 7.27 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PrivatePostExcerptPanel = PrivatePostExcerptPanel;
exports.default = PostExcerptPanel;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _blockEditor = require("@wordpress/block-editor");
var _coreData = require("@wordpress/core-data");
var _htmlEntities = require("@wordpress/html-entities");
var _index = _interopRequireDefault(require("./index"));
var _check = _interopRequireDefault(require("./check"));
var _plugin = _interopRequireDefault(require("./plugin"));
var _constants = require("../../store/constants");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Module Constants
*/const PANEL_NAME = 'post-excerpt';
function ExcerptPanel() {
const {
isOpened,
isEnabled,
postType
} = (0, _data.useSelect)(select => {
const {
isEditorPanelOpened,
isEditorPanelEnabled,
getCurrentPostType
} = select(_store.store);
return {
isOpened: isEditorPanelOpened(PANEL_NAME),
isEnabled: isEditorPanelEnabled(PANEL_NAME),
postType: getCurrentPostType()
};
}, []);
const {
toggleEditorPanelOpened
} = (0, _data.useDispatch)(_store.store);
const toggleExcerptPanel = () => toggleEditorPanelOpened(PANEL_NAME);
if (!isEnabled) {
return null;
}
// There are special cases where we want to label the excerpt as a description.
const shouldUseDescriptionLabel = ['wp_template', 'wp_template_part', 'wp_block'].includes(postType);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
title: shouldUseDescriptionLabel ? (0, _i18n.__)('Description') : (0, _i18n.__)('Excerpt'),
opened: isOpened,
onToggle: toggleExcerptPanel,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_plugin.default.Slot, {
children: fills => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {}), fills]
})
})
});
}
/**
* Is rendered if the post type supports excerpts and allows editing the excerpt.
*
* @return {JSX.Element} The rendered PostExcerptPanel component.
*/
function PostExcerptPanel() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_check.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExcerptPanel, {})
});
}
function PrivatePostExcerptPanel() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_check.default, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PrivateExcerpt, {})
});
}
function PrivateExcerpt() {
const {
shouldRender,
excerpt,
shouldBeUsedAsDescription,
allowEditing
} = (0, _data.useSelect)(select => {
const {
getCurrentPostType,
getCurrentPostId,
getEditedPostAttribute,
isEditorPanelEnabled
} = select(_store.store);
const postType = getCurrentPostType();
const isTemplateOrTemplatePart = ['wp_template', 'wp_template_part'].includes(postType);
const isPattern = postType === 'wp_block';
// These post types use the `excerpt` field as a description semantically, so we need to
// handle proper labeling and some flows where we should always render them as text.
const _shouldBeUsedAsDescription = isTemplateOrTemplatePart || isPattern;
const _usedAttribute = isTemplateOrTemplatePart ? 'description' : 'excerpt';
// We need to fetch the entity in this case to check if we'll allow editing.
const template = isTemplateOrTemplatePart && select(_coreData.store).getEntityRecord('postType', postType, getCurrentPostId());
// For post types that use excerpt as description, we do not abide
// by the `isEnabled` panel flag in order to render them as text.
const _shouldRender = isEditorPanelEnabled(PANEL_NAME) || _shouldBeUsedAsDescription;
return {
excerpt: getEditedPostAttribute(_usedAttribute),
shouldRender: _shouldRender,
shouldBeUsedAsDescription: _shouldBeUsedAsDescription,
// If we should render, allow editing for all post types that are not used as description.
// For the rest allow editing only for user generated entities.
allowEditing: _shouldRender && (!_shouldBeUsedAsDescription || isPattern || template && template.source === _constants.TEMPLATE_ORIGINS.custom && !template.has_theme_file && template.is_custom)
};
}, []);
const [popoverAnchor, setPopoverAnchor] = (0, _element.useState)(null);
const label = shouldBeUsedAsDescription ? (0, _i18n.__)('Description') : (0, _i18n.__)('Excerpt');
// Memoize popoverProps to avoid returning a new object every time.
const popoverProps = (0, _element.useMemo)(() => ({
// Anchor the popover to the middle of the entire row so that it doesn't
// move around when the label changes.
anchor: popoverAnchor,
'aria-label': label,
headerTitle: label,
placement: 'left-start',
offset: 36,
shift: true
}), [popoverAnchor, label]);
if (!shouldRender) {
return false;
}
const excerptText = !!excerpt && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
align: "left",
numberOfLines: 4,
truncate: allowEditing,
children: (0, _htmlEntities.decodeEntities)(excerpt)
});
if (!allowEditing) {
return excerptText;
}
const excerptPlaceholder = shouldBeUsedAsDescription ? (0, _i18n.__)('Add a description…') : (0, _i18n.__)('Add an excerpt…');
const triggerEditLabel = shouldBeUsedAsDescription ? (0, _i18n.__)('Edit description') : (0, _i18n.__)('Edit excerpt');
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
children: [excerptText, /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
className: "editor-post-excerpt__dropdown",
contentClassName: "editor-post-excerpt__dropdown__content",
popoverProps: popoverProps,
focusOnMount: true,
ref: setPopoverAnchor,
renderToggle: ({
onToggle
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
__next40pxDefaultSize: true,
onClick: onToggle,
variant: "link",
children: excerptText ? triggerEditLabel : excerptPlaceholder
}),
renderContent: ({
onClose
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalInspectorPopoverHeader, {
title: label,
onClose: onClose
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
spacing: 4,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_plugin.default.Slot, {
children: fills => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
hideLabelFromVision: true,
updateOnBlur: true
}), fills]
})
})
})]
})
})]
});
}
//# sourceMappingURL=panel.js.map