@wordpress/plugins
Version:
Plugins module for WordPress.
206 lines (145 loc) • 4.31 kB
Markdown
# Plugins
Plugins module for WordPress.
## Installation
Install the module
```bash
npm install @wordpress/plugins --save
```
_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._
### Plugins API
<!-- START TOKEN(Autogenerated API docs) -->
<a name="getPlugin" href="#getPlugin">#</a> **getPlugin**
Returns a registered plugin settings.
_Parameters_
- _name_ `string`: Plugin name.
_Returns_
- `?WPPlugin`: Plugin setting.
<a name="getPlugins" href="#getPlugins">#</a> **getPlugins**
Returns all registered plugins without a scope or for a given scope.
_Parameters_
- _scope_ `[string]`: The scope to be used when rendering inside a plugin area. No scope by default.
_Returns_
- `WPPlugin[]`: The list of plugins without a scope or for a given scope.
<a name="PluginArea" href="#PluginArea">#</a> **PluginArea**
A component that renders all plugin fills in a hidden div.
_Usage_
```js
// Using ES5 syntax
var el = wp.element.createElement;
var PluginArea = wp.plugins.PluginArea;
function Layout() {
return el(
'div',
{ scope: 'my-page' },
'Content of the page',
PluginArea
);
}
```
```js
// Using ESNext syntax
import { PluginArea } from '@wordpress/plugins';
const Layout = () => (
<div>
Content of the page
<PluginArea scope="my-page" />
</div>
);
```
_Returns_
- `WPComponent`: The component to be rendered.
<a name="registerPlugin" href="#registerPlugin">#</a> **registerPlugin**
Registers a plugin to the editor.
_Usage_
```js
// Using ES5 syntax
var el = wp.element.createElement;
var Fragment = wp.element.Fragment;
var PluginSidebar = wp.editPost.PluginSidebar;
var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
var registerPlugin = wp.plugins.registerPlugin;
var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
function Component() {
return el(
Fragment,
{},
el(
PluginSidebarMoreMenuItem,
{
target: 'sidebar-name',
},
'My Sidebar'
),
el(
PluginSidebar,
{
name: 'sidebar-name',
title: 'My Sidebar',
},
'Content of the sidebar'
)
);
}
registerPlugin( 'plugin-name', {
icon: moreIcon,
render: Component,
scope: 'my-page',
} );
```
```js
// Using ESNext syntax
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post';
import { registerPlugin } from '@wordpress/plugins';
import { more } from '@wordpress/icons';
const Component = () => (
<>
<PluginSidebarMoreMenuItem
target="sidebar-name"
>
My Sidebar
</PluginSidebarMoreMenuItem>
<PluginSidebar
name="sidebar-name"
title="My Sidebar"
>
Content of the sidebar
</PluginSidebar>
</>
);
registerPlugin( 'plugin-name', {
icon: more,
render: Component,
scope: 'my-page',
} );
```
_Parameters_
- _name_ `string`: A string identifying the plugin.Must be unique across all registered plugins.
- _settings_ `WPPlugin`: The settings for this plugin.
_Returns_
- `WPPlugin`: The final plugin settings object.
<a name="unregisterPlugin" href="#unregisterPlugin">#</a> **unregisterPlugin**
Unregisters a plugin by name.
_Usage_
```js
// Using ES5 syntax
var unregisterPlugin = wp.plugins.unregisterPlugin;
unregisterPlugin( 'plugin-name' );
```
```js
// Using ESNext syntax
import { unregisterPlugin } from '@wordpress/plugins';
unregisterPlugin( 'plugin-name' );
```
_Parameters_
- _name_ `string`: Plugin name.
_Returns_
- `?WPPlugin`: The previous plugin settings object, if it has been successfully unregistered; otherwise `undefined`.
<a name="withPluginContext" href="#withPluginContext">#</a> **withPluginContext**
A Higher Order Component used to inject Plugin context to the
wrapped component.
_Parameters_
- _mapContextToProps_ `Function`: Function called on every context change, expected to return object of props to merge with the component's own props.
_Returns_
- `WPComponent`: Enhanced component with injected context as props.
<!-- END TOKEN(Autogenerated API docs) -->
<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>