@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
107 lines (104 loc) • 3.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = PluginSidebar;
var _data = require("@wordpress/data");
var _i18n = require("@wordpress/i18n");
var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
var _interface = require("@wordpress/interface");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
* It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
* If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API:
*
* ```js
* wp.data.dispatch( 'core/edit-post' ).openGeneralSidebar( 'plugin-name/sidebar-name' );
* ```
*
* @see PluginSidebarMoreMenuItem
*
* @param {Object} props Element props.
* @param {string} props.name A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
* @param {string} [props.className] An optional class name added to the sidebar body.
* @param {string} props.title Title displayed at the top of the sidebar.
* @param {boolean} [props.isPinnable=true] Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.
* @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
*
* @example
* ```js
* // Using ES5 syntax
* var __ = wp.i18n.__;
* var el = React.createElement;
* var PanelBody = wp.components.PanelBody;
* var PluginSidebar = wp.editor.PluginSidebar;
* var moreIcon = React.createElement( 'svg' ); //... svg element.
*
* function MyPluginSidebar() {
* return el(
* PluginSidebar,
* {
* name: 'my-sidebar',
* title: 'My sidebar title',
* icon: moreIcon,
* },
* el(
* PanelBody,
* {},
* __( 'My sidebar content' )
* )
* );
* }
* ```
*
* @example
* ```jsx
* // Using ESNext syntax
* import { __ } from '@wordpress/i18n';
* import { PanelBody } from '@wordpress/components';
* import { PluginSidebar } from '@wordpress/editor';
* import { more } from '@wordpress/icons';
*
* const MyPluginSidebar = () => (
* <PluginSidebar
* name="my-sidebar"
* title="My sidebar title"
* icon={ more }
* >
* <PanelBody>
* { __( 'My sidebar content' ) }
* </PanelBody>
* </PluginSidebar>
* );
* ```
*/function PluginSidebar({
className,
...props
}) {
const {
postTitle,
shortcut
} = (0, _data.useSelect)(select => {
return {
postTitle: select(_store.store).getEditedPostAttribute('title'),
shortcut: select(_keyboardShortcuts.store).getShortcutRepresentation('core/editor/toggle-sidebar')
};
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_interface.ComplementaryArea, {
panelClassName: className,
className: "editor-sidebar",
smallScreenTitle: postTitle || (0, _i18n.__)('(no title)'),
scope: "core",
toggleShortcut: shortcut,
...props
});
}
//# sourceMappingURL=index.js.map