@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

  • ?Object: Plugin setting.

# getPlugins

Returns all registered plugins.

Returns

  • Array: 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
const { PluginArea } = wp.plugins;

const Layout = () => (
    <div>
        Content of the page
        <PluginArea />
    </div>
);

Returns

  • WPElement: Plugin area.

# 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;

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: 'smiley',
    render: Component,
} );
// Using ESNext syntax
const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
const { registerPlugin } = wp.plugins;

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: 'smiley',
    render: Component,
} );

Parameters

  • name string: A string identifying the plugin. Must be unique across all registered plugins.
  • settings Object: The settings for this plugin.
  • settings.icon (string|WPElement|Function): An icon to be shown in the UI. It can be a slug of the Dashicon, or an element (or function returning an element) if you choose to render your own SVG.
  • settings.render Function: A component containing the UI elements to be rendered.

Returns

  • Object: 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
const { unregisterPlugin } = wp.plugins;

unregisterPlugin( 'plugin-name' );

Parameters

  • name string: Plugin name.

Returns

  • ?WPPlugin: The previous plugin settings object, if it has been successfully unregistered; otherwise undefined.

# 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

  • Component: Enhanced component with injected context as props.

Code is Poetry.