Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src
.npmrc
CHANGELOG.md
README.md
package.json

README.md

Plugins

Plugins module for WordPress.

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

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

You can’t perform that action at this time.