@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
128 lines (124 loc) • 4.21 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _plugins = require("@wordpress/plugins");
var _data = require("@wordpress/data");
var _warning = _interopRequireDefault(require("@wordpress/warning"));
var _enablePluginDocumentSettingPanel = _interopRequireDefault(require("../preferences-modal/enable-plugin-document-setting-panel"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const {
Fill,
Slot
} = (0, _components.createSlotFill)('PluginDocumentSettingPanel');
/**
* Renders items below the Status & Availability panel in the Document Sidebar.
*
* @param {Object} props Component properties.
* @param {string} props.name Required. A machine-friendly name for the panel.
* @param {string} [props.className] An optional class name added to the row.
* @param {string} [props.title] The title of the panel
* @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.
* @param {Element} props.children Children to be rendered
*
* @example
* ```js
* // Using ES5 syntax
* var el = React.createElement;
* var __ = wp.i18n.__;
* var registerPlugin = wp.plugins.registerPlugin;
* var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;
*
* function MyDocumentSettingPlugin() {
* return el(
* PluginDocumentSettingPanel,
* {
* className: 'my-document-setting-plugin',
* title: 'My Panel',
* name: 'my-panel',
* },
* __( 'My Document Setting Panel' )
* );
* }
*
* registerPlugin( 'my-document-setting-plugin', {
* render: MyDocumentSettingPlugin
* } );
* ```
*
* @example
* ```jsx
* // Using ESNext syntax
* import { registerPlugin } from '@wordpress/plugins';
* import { PluginDocumentSettingPanel } from '@wordpress/editor';
*
* const MyDocumentSettingTest = () => (
* <PluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel" name="my-panel">
* <p>My Document Setting Panel</p>
* </PluginDocumentSettingPanel>
* );
*
* registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
* ```
*
* @return {Component} The component to be rendered.
*/
const PluginDocumentSettingPanel = ({
name,
className,
title,
icon,
children
}) => {
const {
name: pluginName
} = (0, _plugins.usePluginContext)();
const panelName = `${pluginName}/${name}`;
const {
opened,
isEnabled
} = (0, _data.useSelect)(select => {
const {
isEditorPanelOpened,
isEditorPanelEnabled
} = select(_store.store);
return {
opened: isEditorPanelOpened(panelName),
isEnabled: isEditorPanelEnabled(panelName)
};
}, [panelName]);
const {
toggleEditorPanelOpened
} = (0, _data.useDispatch)(_store.store);
if (undefined === name) {
globalThis.SCRIPT_DEBUG === true ? (0, _warning.default)('PluginDocumentSettingPanel requires a name property.') : void 0;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_enablePluginDocumentSettingPanel.default, {
label: title,
panelName: panelName
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Fill, {
children: isEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PanelBody, {
className: className,
title: title,
icon: icon,
opened: opened,
onToggle: () => toggleEditorPanelOpened(panelName),
children: children
})
})]
});
};
PluginDocumentSettingPanel.Slot = Slot;
var _default = exports.default = PluginDocumentSettingPanel;
//# sourceMappingURL=index.js.map