@wordpress/plugins
Edit
Plugins module for WordPress.
Installation Installation
Install the module
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 lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.
Plugins API Plugins API
# getPlugin
Returns a registered plugin settings.
Parameters
- name
string
: Plugin name.
Returns
?WPPlugin
: Plugin setting.
# getPlugins
Returns all registered plugins.
Returns
Array<WPPlugin>
: Plugin settings.
# PluginArea
A component that renders all plugin fills in a hidden div.
Usage
// Using ES5 syntax var el = wp.element.createElement; var PluginArea = wp.plugins.PluginArea; function Layout() { return el( 'div', {}, 'Content of the page', PluginArea ); }
// Using ESNext syntax import { PluginArea } from '@wordpress/plugins'; const Layout = () => ( <div> Content of the page <PluginArea /> </div> );
Returns
WPComponent
: The component to be rendered.
# registerPlugin
Registers a plugin to the editor.
Usage
// 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, } );
// 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, } );
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.
# unregisterPlugin
Unregisters a plugin by name.
Usage
// Using ES5 syntax var unregisterPlugin = wp.plugins.unregisterPlugin; unregisterPlugin( 'plugin-name' );
// 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; otherwiseundefined
.
# 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.