@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
177 lines (172 loc) • 7.83 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = EditorInterface;
var _clsx = _interopRequireDefault(require("clsx"));
var _interface = require("@wordpress/interface");
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _preferences = require("@wordpress/preferences");
var _blockEditor = require("@wordpress/block-editor");
var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
var _compose = require("@wordpress/compose");
var _element = require("@wordpress/element");
var _store = require("../../store");
var _editorNotices = _interopRequireDefault(require("../editor-notices"));
var _header = _interopRequireDefault(require("../header"));
var _inserterSidebar = _interopRequireDefault(require("../inserter-sidebar"));
var _listViewSidebar = _interopRequireDefault(require("../list-view-sidebar"));
var _savePublishPanels = _interopRequireDefault(require("../save-publish-panels"));
var _textEditor = _interopRequireDefault(require("../text-editor"));
var _visualEditor = _interopRequireDefault(require("../visual-editor"));
var _contentSlotFill = _interopRequireDefault(require("./content-slot-fill"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const interfaceLabels = {
/* translators: accessibility text for the editor top bar landmark region. */
header: (0, _i18n.__)('Editor top bar'),
/* translators: accessibility text for the editor content landmark region. */
body: (0, _i18n.__)('Editor content'),
/* translators: accessibility text for the editor settings landmark region. */
sidebar: (0, _i18n.__)('Editor settings'),
/* translators: accessibility text for the editor publish landmark region. */
actions: (0, _i18n.__)('Editor publish'),
/* translators: accessibility text for the editor footer landmark region. */
footer: (0, _i18n.__)('Editor footer')
};
function EditorInterface({
className,
enableRegionNavigation,
styles,
children,
forceIsDirty,
contentRef,
disableIframe,
autoFocus,
customSaveButton,
customSavePanel,
forceDisableBlockTools,
title,
iframeProps
}) {
const {
mode,
isRichEditingEnabled,
isInserterOpened,
isListViewOpened,
isDistractionFree,
isPreviewMode,
previousShortcut,
nextShortcut,
showBlockBreadcrumbs,
documentLabel,
blockEditorMode
} = (0, _data.useSelect)(select => {
const {
get
} = select(_preferences.store);
const {
getEditorSettings,
getPostTypeLabel
} = select(_store.store);
const editorSettings = getEditorSettings();
const postTypeLabel = getPostTypeLabel();
return {
mode: select(_store.store).getEditorMode(),
isRichEditingEnabled: editorSettings.richEditingEnabled,
isInserterOpened: select(_store.store).isInserterOpened(),
isListViewOpened: select(_store.store).isListViewOpened(),
isDistractionFree: get('core', 'distractionFree'),
isPreviewMode: editorSettings.__unstableIsPreviewMode,
previousShortcut: select(_keyboardShortcuts.store).getAllShortcutKeyCombinations('core/editor/previous-region'),
nextShortcut: select(_keyboardShortcuts.store).getAllShortcutKeyCombinations('core/editor/next-region'),
showBlockBreadcrumbs: get('core', 'showBlockBreadcrumbs'),
// translators: Default label for the Document in the Block Breadcrumb.
documentLabel: postTypeLabel || (0, _i18n._x)('Document', 'noun'),
blockEditorMode: select(_blockEditor.store).__unstableGetEditorMode()
};
}, []);
const isLargeViewport = (0, _compose.useViewportMatch)('medium');
const secondarySidebarLabel = isListViewOpened ? (0, _i18n.__)('Document Overview') : (0, _i18n.__)('Block Library');
// Local state for save panel.
// Note 'truthy' callback implies an open panel.
const [entitiesSavedStatesCallback, setEntitiesSavedStatesCallback] = (0, _element.useState)(false);
const closeEntitiesSavedStates = (0, _element.useCallback)(arg => {
if (typeof entitiesSavedStatesCallback === 'function') {
entitiesSavedStatesCallback(arg);
}
setEntitiesSavedStatesCallback(false);
}, [entitiesSavedStatesCallback]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_interface.InterfaceSkeleton, {
enableRegionNavigation: enableRegionNavigation,
isDistractionFree: isDistractionFree,
className: (0, _clsx.default)('editor-editor-interface', className, {
'is-entity-save-view-open': !!entitiesSavedStatesCallback,
'is-distraction-free': isDistractionFree && !isPreviewMode
}),
labels: {
...interfaceLabels,
secondarySidebar: secondarySidebarLabel
},
header: !isPreviewMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
forceIsDirty: forceIsDirty,
setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback,
customSaveButton: customSaveButton,
forceDisableBlockTools: forceDisableBlockTools,
title: title,
isEditorIframed: !disableIframe
}),
editorNotices: /*#__PURE__*/(0, _jsxRuntime.jsx)(_editorNotices.default, {}),
secondarySidebar: !isPreviewMode && mode === 'visual' && (isInserterOpened && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inserterSidebar.default, {}) || isListViewOpened && /*#__PURE__*/(0, _jsxRuntime.jsx)(_listViewSidebar.default, {})),
sidebar: !isPreviewMode && !isDistractionFree && /*#__PURE__*/(0, _jsxRuntime.jsx)(_interface.ComplementaryArea.Slot, {
scope: "core"
}),
content: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [!isDistractionFree && !isPreviewMode && /*#__PURE__*/(0, _jsxRuntime.jsx)(_editorNotices.default, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_contentSlotFill.default.Slot, {
children: ([editorCanvasView]) => editorCanvasView ? editorCanvasView : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [!isPreviewMode && (mode === 'text' || !isRichEditingEnabled) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_textEditor.default
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
, {
autoFocus: autoFocus
}), !isPreviewMode && !isLargeViewport && mode === 'visual' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockToolbar, {
hideDragHandle: true
}), (isPreviewMode || isRichEditingEnabled && mode === 'visual') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_visualEditor.default, {
styles: styles,
contentRef: contentRef,
disableIframe: disableIframe
// We should auto-focus the canvas (title) on load.
// eslint-disable-next-line jsx-a11y/no-autofocus
,
autoFocus: autoFocus,
iframeProps: iframeProps
}), children]
})
})]
}),
footer: !isPreviewMode && !isDistractionFree && isLargeViewport && showBlockBreadcrumbs && isRichEditingEnabled && blockEditorMode !== 'zoom-out' && mode === 'visual' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockBreadcrumb, {
rootLabelText: documentLabel
}),
actions: !isPreviewMode ? customSavePanel || /*#__PURE__*/(0, _jsxRuntime.jsx)(_savePublishPanels.default, {
closeEntitiesSavedStates: closeEntitiesSavedStates,
isEntitiesSavedStatesOpen: entitiesSavedStatesCallback,
setEntitiesSavedStatesCallback: setEntitiesSavedStatesCallback,
forceIsDirtyPublishPanel: forceIsDirty
}) : undefined,
shortcuts: {
previous: previousShortcut,
next: nextShortcut
}
});
}
//# sourceMappingURL=index.js.map