@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
191 lines (186 loc) • 7.08 kB
JavaScript
/**
* External dependencies
*/
import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { __, isRTL } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { Button, __experimentalText as Text, __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence } from '@wordpress/components';
import { BlockIcon } from '@wordpress/block-editor';
import { chevronLeftSmall, chevronRightSmall, layout } from '@wordpress/icons';
import { displayShortcut } from '@wordpress/keycodes';
import { store as coreStore } from '@wordpress/core-data';
import { store as commandsStore } from '@wordpress/commands';
import { useRef, useEffect } from '@wordpress/element';
import { useReducedMotion } from '@wordpress/compose';
import { decodeEntities } from '@wordpress/html-entities';
import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
/**
* Internal dependencies
*/
import { TEMPLATE_POST_TYPES } from '../../store/constants';
import { store as editorStore } from '../../store';
import usePageTypeBadge from '../../utils/pageTypeBadge';
import { getTemplateInfo } from '../../utils/get-template-info';
/** @typedef {import("@wordpress/components").IconType} IconType */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const MotionButton = motion(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.
*/
export default function DocumentBar(props) {
const {
postId,
postType,
postTypeLabel,
documentTitle,
isNotFound,
templateTitle,
onNavigateToPreviousEntityRecord,
isTemplatePreview
} = useSelect(select => {
var _getCurrentTheme;
const {
getCurrentPostType,
getCurrentPostId,
getEditorSettings,
getRenderingMode
} = select(editorStore);
const {
getEditedEntityRecord,
getPostType,
getCurrentTheme,
isResolving: isResolvingSelector
} = select(coreStore);
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 = 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
} = useDispatch(commandsStore);
const isReducedMotion = useReducedMotion();
const isTemplate = TEMPLATE_POST_TYPES.includes(postType);
const hasBackButton = !!onNavigateToPreviousEntityRecord;
const entityTitle = isTemplate ? templateTitle : documentTitle;
const title = props.title || entityTitle;
const icon = props.icon;
const pageTypeBadge = usePageTypeBadge(postId);
const mountedRef = useRef(false);
useEffect(() => {
mountedRef.current = true;
}, []);
return /*#__PURE__*/_jsxs("div", {
className: clsx('editor-document-bar', {
'has-back-button': hasBackButton
}),
children: [/*#__PURE__*/_jsx(AnimatePresence, {
children: hasBackButton && /*#__PURE__*/_jsx(MotionButton, {
className: "editor-document-bar__back",
icon: isRTL() ? chevronRightSmall : 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: __('Back')
})
}), !isTemplate && isTemplatePreview && /*#__PURE__*/_jsx(BlockIcon, {
icon: layout,
className: "editor-document-bar__icon-layout"
}), isNotFound ? /*#__PURE__*/_jsx(Text, {
children: __('Document not found')
}) : /*#__PURE__*/_jsxs(Button, {
className: "editor-document-bar__command",
onClick: () => openCommandCenter(),
size: "compact",
children: [/*#__PURE__*/_jsxs(motion.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__*/_jsx(BlockIcon, {
icon: icon
}), /*#__PURE__*/_jsxs(Text, {
size: "body",
as: "h1",
children: [/*#__PURE__*/_jsx("span", {
className: "editor-document-bar__post-title",
children: title ? stripHTML(title) : __('No title')
}), pageTypeBadge && /*#__PURE__*/_jsx("span", {
className: "editor-document-bar__post-type-label",
children: `· ${pageTypeBadge}`
}), postTypeLabel && !props.title && !pageTypeBadge && /*#__PURE__*/_jsx("span", {
className: "editor-document-bar__post-type-label",
children: `· ${decodeEntities(postTypeLabel)}`
})]
})]
}, hasBackButton), /*#__PURE__*/_jsx("span", {
className: "editor-document-bar__shortcut",
children: displayShortcut.primary('k')
})]
})]
});
}
//# sourceMappingURL=index.js.map