@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 such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default
in your code.
Plugins API Plugins API
getPlugin getPlugin
Returns a registered plugin settings.
Parameters
- name
string
: Plugin name.
Returns
?WPPlugin
: Plugin setting.
getPlugins 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.
PluginArea 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', { scope: 'my-page' }, 'Content of the page', PluginArea ); }
// 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.
registerPlugin 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, scope: 'my-page', } );
// 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.
unregisterPlugin 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 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.