@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
197 lines (191 loc) • 7.66 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = DocumentBar;
var _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _icons = require("@wordpress/icons");
var _keycodes = require("@wordpress/keycodes");
var _coreData = require("@wordpress/core-data");
var _commands = require("@wordpress/commands");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _htmlEntities = require("@wordpress/html-entities");
var _dom = require("@wordpress/dom");
var _constants = require("../../store/constants");
var _store = require("../../store");
var _pageTypeBadge = _interopRequireDefault(require("../../utils/pageTypeBadge"));
var _getTemplateInfo = require("../../utils/get-template-info");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/** @typedef {import("@wordpress/components").IconType} IconType */const MotionButton = (0, _components.__unstableMotion)(_components.Button);
/**
* This component renders a navigation bar at the top of the editor. It displays the title of the current document,
* a back button (if applicable), and a command center button. It also handles different states of the document,
* such as "not found" or "unsynced".
*
* @example
* ```jsx
* <DocumentBar />
* ```
* @param {Object} props The component props.
* @param {string} props.title A title for the document, defaulting to the document or
* template title currently being edited.
* @param {IconType} props.icon An icon for the document, no default.
* (A default icon indicating the document post type is no longer used.)
*
* @return {React.ReactNode} The rendered DocumentBar component.
*/
function DocumentBar(props) {
const {
postId,
postType,
postTypeLabel,
documentTitle,
isNotFound,
templateTitle,
onNavigateToPreviousEntityRecord,
isTemplatePreview
} = (0, _data.useSelect)(select => {
var _getCurrentTheme;
const {
getCurrentPostType,
getCurrentPostId,
getEditorSettings,
getRenderingMode
} = select(_store.store);
const {
getEditedEntityRecord,
getPostType,
getCurrentTheme,
isResolving: isResolvingSelector
} = select(_coreData.store);
const _postType = getCurrentPostType();
const _postId = getCurrentPostId();
const _document = getEditedEntityRecord('postType', _postType, _postId);
const {
default_template_types: templateTypes = []
} = (_getCurrentTheme = getCurrentTheme()) !== null && _getCurrentTheme !== void 0 ? _getCurrentTheme : {};
const _templateInfo = (0, _getTemplateInfo.getTemplateInfo)({
templateTypes,
template: _document
});
const _postTypeLabel = getPostType(_postType)?.labels?.singular_name;
return {
postId: _postId,
postType: _postType,
postTypeLabel: _postTypeLabel,
documentTitle: _document.title,
isNotFound: !_document && !isResolvingSelector('getEditedEntityRecord', 'postType', _postType, _postId),
templateTitle: _templateInfo.title,
onNavigateToPreviousEntityRecord: getEditorSettings().onNavigateToPreviousEntityRecord,
isTemplatePreview: getRenderingMode() === 'template-locked'
};
}, []);
const {
open: openCommandCenter
} = (0, _data.useDispatch)(_commands.store);
const isReducedMotion = (0, _compose.useReducedMotion)();
const isTemplate = _constants.TEMPLATE_POST_TYPES.includes(postType);
const hasBackButton = !!onNavigateToPreviousEntityRecord;
const entityTitle = isTemplate ? templateTitle : documentTitle;
const title = props.title || entityTitle;
const icon = props.icon;
const pageTypeBadge = (0, _pageTypeBadge.default)(postId);
const mountedRef = (0, _element.useRef)(false);
(0, _element.useEffect)(() => {
mountedRef.current = true;
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _clsx.default)('editor-document-bar', {
'has-back-button': hasBackButton
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableAnimatePresence, {
children: hasBackButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(MotionButton, {
className: "editor-document-bar__back",
icon: (0, _i18n.isRTL)() ? _icons.chevronRightSmall : _icons.chevronLeftSmall,
onClick: event => {
event.stopPropagation();
onNavigateToPreviousEntityRecord();
},
size: "compact",
initial: mountedRef.current ? {
opacity: 0,
transform: 'translateX(15%)'
} : false // Don't show entry animation when DocumentBar mounts.
,
animate: {
opacity: 1,
transform: 'translateX(0%)'
},
exit: {
opacity: 0,
transform: 'translateX(15%)'
},
transition: isReducedMotion ? {
duration: 0
} : undefined,
children: (0, _i18n.__)('Back')
})
}), !isTemplate && isTemplatePreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, {
icon: _icons.layout,
className: "editor-document-bar__icon-layout"
}), isNotFound ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
children: (0, _i18n.__)('Document not found')
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
className: "editor-document-bar__command",
onClick: () => openCommandCenter(),
size: "compact",
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__unstableMotion.div, {
className: "editor-document-bar__title"
// Force entry animation when the back button is added or removed.
,
initial: mountedRef.current ? {
opacity: 0,
transform: hasBackButton ? 'translateX(15%)' : 'translateX(-15%)'
} : false // Don't show entry animation when DocumentBar mounts.
,
animate: {
opacity: 1,
transform: 'translateX(0%)'
},
transition: isReducedMotion ? {
duration: 0
} : undefined,
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockIcon, {
icon: icon
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalText, {
size: "body",
as: "h1",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "editor-document-bar__post-title",
children: title ? (0, _dom.__unstableStripHTML)(title) : (0, _i18n.__)('No title')
}), pageTypeBadge && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "editor-document-bar__post-type-label",
children: `· ${pageTypeBadge}`
}), postTypeLabel && !props.title && !pageTypeBadge && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "editor-document-bar__post-type-label",
children: `· ${(0, _htmlEntities.decodeEntities)(postTypeLabel)}`
})]
})]
}, hasBackButton), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "editor-document-bar__shortcut",
children: _keycodes.displayShortcut.primary('k')
})]
})]
});
}
//# sourceMappingURL=index.js.map