* My Document Setting Panel
*
* );
*
* registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
* ```
*
* @return {Component} The component to be rendered.
*/
const PluginDocumentSettingPanel = ({
name,
className,
title,
icon,
children
}) => {
const {
name: pluginName
} = (0,external_wp_plugins_namespaceObject.usePluginContext)();
const panelName = `${pluginName}/${name}`;
const {
opened,
isEnabled
} = (0,external_wp_data_namespaceObject.useSelect)(select => {
const {
isEditorPanelOpened,
isEditorPanelEnabled
} = select(external_wp_editor_namespaceObject.store);
return {
opened: isEditorPanelOpened(panelName),
isEnabled: isEditorPanelEnabled(panelName)
};
}, [panelName]);
const {
toggleEditorPanelOpened
} = (0,external_wp_data_namespaceObject.useDispatch)(external_wp_editor_namespaceObject.store);
if (undefined === name) {
true ? external_wp_warning_default()('PluginDocumentSettingPanel requires a name property.') : 0;
}
return (0,external_React_namespaceObject.createElement)(external_React_namespaceObject.Fragment, null, (0,external_React_namespaceObject.createElement)(EnablePluginDocumentSettingPanelOption, {
label: title,
panelName: panelName
}), (0,external_React_namespaceObject.createElement)(plugin_document_setting_panel_Fill, null, isEnabled && (0,external_React_namespaceObject.createElement)(external_wp_components_namespaceObject.PanelBody, {
className: className,
title: title,
icon: icon,
opened: opened,
onToggle: () => toggleEditorPanelOpened(panelName)
}, children)));
};
PluginDocumentSettingPanel.Slot = plugin_document_setting_panel_Slot;
/* harmony default export */ const plugin_document_setting_panel = (PluginDocumentSettingPanel);
;// CONCATENATED MODULE: ./node_modules/@wordpress/edit-post/build-module/components/sidebar/plugin-sidebar/index.js
/**
* WordPress 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.editPost.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/edit-post';
* import { more } from '@wordpress/icons';
*
* const MyPluginSidebar = () => (
*