Skip to content

Latest commit

 

History

History

plugins

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
.npmrc
.npmrc
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
package.json
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

The plugins API contains the following methods:

wp.plugins.registerPlugin( name: string, settings: Object )

This method registers a new plugin.

This method takes two arguments:

  1. name: A string identifying the plugin. Must be unique across all registered plugins.
  2. settings: An object containing the following data:
    • 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.
    • render: A component containing the UI elements to be rendered.

See the edit-post module documentation for available components.

Example: {% codetabs %} {% ES5 %}

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,
} );

{% ESNext %}

const { Fragment } = wp.element;
const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
const { registerPlugin } = wp.plugins;

const Component = () => (
	<Fragment>
		<PluginSidebarMoreMenuItem
			target="sidebar-name"
		>
			My Sidebar
		</PluginSidebarMoreMenuItem>
		<PluginSidebar
			name="sidebar-name"
			title="My Sidebar"
		>
			Content of the sidebar
		</PluginSidebar>
	</Fragment>
);

registerPlugin( 'plugin-name', {
	icon: 'smiley',
	render: Component,
} );

{% end %}

wp.plugins.unregisterPlugin( name: string )

This method unregisters an existing plugin.

This method takes one argument:

  1. name: A string identifying the plugin.

Example:

{% codetabs %}

{% ES5 %}

var unregisterPlugin = wp.plugins.unregisterPlugin;

unregisterPlugin( 'plugin-name' );

{% ESNext %}

const { unregisterPlugin } = wp.plugins;

unregisterPlugin( 'plugin-name' );

{% end %}

Components

PluginArea

A component that renders all registered plugins in a hidden div.

Example: {% codetabs %}

{% ES5 %}

var el = wp.element.createElement;
var PluginArea = wp.plugins.PluginArea;

function Layout() {
	return el(
		'div',
		{},
		'Content of the page',
		PluginArea
	);
}

{% ESNext %}

const { PluginArea } = wp.plugins;

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

{% end %}



Code is Poetry.