@wordpress/edit-post
Version:
Edit Post module for WordPress.
241 lines (217 loc) • 9.38 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = PreferencesModal;
var _element = require("@wordpress/element");
var _lodash = require("lodash");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _editor = require("@wordpress/editor");
var _coreData = require("@wordpress/core-data");
var _section = _interopRequireDefault(require("./section"));
var _options = require("./options");
var _metaBoxesSection = _interopRequireDefault(require("./meta-boxes-section"));
var _store = require("../../store");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const MODAL_NAME = 'edit-post/preferences';
const PREFERENCES_MENU = 'preferences-menu';
function PreferencesModal() {
const isLargeViewport = (0, _compose.useViewportMatch)('medium');
const {
closeModal
} = (0, _data.useDispatch)(_store.store);
const {
isModalActive,
isViewable
} = (0, _data.useSelect)(select => {
const {
getEditedPostAttribute
} = select(_editor.store);
const {
getPostType
} = select(_coreData.store);
const postType = getPostType(getEditedPostAttribute('type'));
return {
isModalActive: select(_store.store).isModalActive(MODAL_NAME),
isViewable: (0, _lodash.get)(postType, ['viewable'], false)
};
}, []);
const showBlockBreadcrumbsOption = (0, _data.useSelect)(select => {
const {
getEditorSettings
} = select(_editor.store);
const {
getEditorMode,
isFeatureActive
} = select(_store.store);
const mode = getEditorMode();
const isRichEditingEnabled = getEditorSettings().richEditingEnabled;
const hasReducedUI = isFeatureActive('reducedUI');
return !hasReducedUI && isLargeViewport && isRichEditingEnabled && mode === 'visual';
}, [isLargeViewport]);
const sections = (0, _element.useMemo)(() => [{
name: 'general',
tabLabel: (0, _i18n.__)('General'),
content: (0, _element.createElement)(_element.Fragment, null, isLargeViewport && (0, _element.createElement)(_section.default, {
title: (0, _i18n.__)('Choose your own experience')
}, (0, _element.createElement)(_options.EnablePublishSidebarOption, {
help: (0, _i18n.__)('Review settings such as categories and tags.'),
label: (0, _i18n.__)('Include pre-publish checklist')
})), (0, _element.createElement)(_section.default, {
title: (0, _i18n.__)('Decide what to focus on')
}, (0, _element.createElement)(_options.EnableFeature, {
featureName: "reducedUI",
help: (0, _i18n.__)('Compacts options and outlines in the toolbar.'),
label: (0, _i18n.__)('Reduce the interface')
}), (0, _element.createElement)(_options.EnableFeature, {
featureName: "focusMode",
help: (0, _i18n.__)('Highlights the current block and fades other content.'),
label: (0, _i18n.__)('Spotlight mode')
}), showBlockBreadcrumbsOption && (0, _element.createElement)(_options.EnableFeature, {
featureName: "showBlockBreadcrumbs",
help: (0, _i18n.__)('Shows block breadcrumbs at the bottom of the editor.'),
label: (0, _i18n.__)('Display block breadcrumbs')
})))
}, {
name: 'appearance',
tabLabel: (0, _i18n.__)('Appearance'),
content: (0, _element.createElement)(_section.default, {
title: (0, _i18n.__)('Choose the way it looks')
}, (0, _element.createElement)(_options.EnableFeature, {
featureName: "showIconLabels",
help: (0, _i18n.__)('Shows text instead of icons in toolbar.'),
label: (0, _i18n.__)('Display button labels')
}), (0, _element.createElement)(_options.EnableFeature, {
featureName: "themeStyles",
help: (0, _i18n.__)('Make the editor look like your theme.'),
label: (0, _i18n.__)('Use theme styles')
}))
}, {
name: 'blocks',
tabLabel: (0, _i18n.__)('Blocks'),
content: (0, _element.createElement)(_section.default, {
title: (0, _i18n.__)('Choose how you interact with blocks')
}, (0, _element.createElement)(_options.EnableFeature, {
featureName: "mostUsedBlocks",
help: (0, _i18n.__)('Places the most frequent blocks in the block library.'),
label: (0, _i18n.__)('Show most used blocks')
}), (0, _element.createElement)(_options.EnableFeature, {
featureName: "keepCaretInsideBlock",
help: (0, _i18n.__)('Aids screen readers by stopping text caret from leaving blocks.'),
label: (0, _i18n.__)('Contain text cursor inside block')
}))
}, {
name: 'panels',
tabLabel: (0, _i18n.__)('Panels'),
content: (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_section.default, {
title: (0, _i18n.__)('Document settings'),
description: (0, _i18n.__)('Choose what displays in the panel.')
}, (0, _element.createElement)(_options.EnablePluginDocumentSettingPanelOption.Slot, null), isViewable && (0, _element.createElement)(_options.EnablePanelOption, {
label: (0, _i18n.__)('Permalink'),
panelName: "post-link"
}), isViewable && (0, _element.createElement)(_options.EnablePanelOption, {
label: (0, _i18n.__)('Template'),
panelName: "template"
}), (0, _element.createElement)(_editor.PostTaxonomies, {
taxonomyWrapper: (content, taxonomy) => (0, _element.createElement)(_options.EnablePanelOption, {
label: (0, _lodash.get)(taxonomy, ['labels', 'menu_name']),
panelName: `taxonomy-panel-${taxonomy.slug}`
})
}), (0, _element.createElement)(_editor.PostFeaturedImageCheck, null, (0, _element.createElement)(_options.EnablePanelOption, {
label: (0, _i18n.__)('Featured image'),
panelName: "featured-image"
})), (0, _element.createElement)(_editor.PostExcerptCheck, null, (0, _element.createElement)(_options.EnablePanelOption, {
label: (0, _i18n.__)('Excerpt'),
panelName: "post-excerpt"
})), (0, _element.createElement)(_editor.PostTypeSupportCheck, {
supportKeys: ['comments', 'trackbacks']
}, (0, _element.createElement)(_options.EnablePanelOption, {
label: (0, _i18n.__)('Discussion'),
panelName: "discussion-panel"
})), (0, _element.createElement)(_editor.PageAttributesCheck, null, (0, _element.createElement)(_options.EnablePanelOption, {
label: (0, _i18n.__)('Page attributes'),
panelName: "page-attributes"
}))), (0, _element.createElement)(_section.default, {
title: (0, _i18n.__)('Additional'),
description: (0, _i18n.__)('Add extra areas to the editor.')
}, (0, _element.createElement)(_metaBoxesSection.default, null)))
}], [isViewable, isLargeViewport, showBlockBreadcrumbsOption]); // This is also used to sync the two different rendered components
// between small and large viewports.
const [activeMenu, setActiveMenu] = (0, _element.useState)(PREFERENCES_MENU);
/**
* Create helper objects from `sections` for easier data handling.
* `tabs` is used for creating the `TabPanel` and `sectionsContentMap`
* is used for easier access to active tab's content.
*/
const {
tabs,
sectionsContentMap
} = (0, _element.useMemo)(() => sections.reduce((accumulator, {
name,
tabLabel: title,
content
}) => {
accumulator.tabs.push({
name,
title
});
accumulator.sectionsContentMap[name] = content;
return accumulator;
}, {
tabs: [],
sectionsContentMap: {}
}), [sections]);
const getCurrentTab = (0, _element.useCallback)(tab => sectionsContentMap[tab.name] || null, [sectionsContentMap]);
if (!isModalActive) {
return null;
}
let modalContent; // We render different components based on the viewport size.
if (isLargeViewport) {
modalContent = (0, _element.createElement)(_components.TabPanel, {
className: "edit-post-preferences__tabs",
tabs: tabs,
initialTabName: activeMenu !== PREFERENCES_MENU ? activeMenu : undefined,
onSelect: setActiveMenu,
orientation: "vertical"
}, getCurrentTab);
} else {
modalContent = (0, _element.createElement)(_components.__experimentalNavigation, {
activeMenu: activeMenu,
onActivateMenu: setActiveMenu
}, (0, _element.createElement)(_components.__experimentalNavigationMenu, {
menu: PREFERENCES_MENU
}, tabs.map(tab => {
return (0, _element.createElement)(_components.__experimentalNavigationItem, {
key: tab.name,
title: tab.title,
navigateToMenu: tab.name
});
})), sections.map(section => {
return (0, _element.createElement)(_components.__experimentalNavigationMenu, {
key: `${section.name}-menu`,
menu: section.name,
title: section.tabLabel,
parentMenu: PREFERENCES_MENU
}, (0, _element.createElement)(_components.__experimentalNavigationItem, null, section.content));
}));
}
return (0, _element.createElement)(_components.Modal, {
className: "edit-post-preferences-modal",
title: (0, _i18n.__)('Preferences'),
closeLabel: (0, _i18n.__)('Close'),
onRequestClose: closeModal
}, modalContent);
}
//# sourceMappingURL=index.js.map