{"id":134583,"date":"2021-03-09T08:38:23","date_gmt":"2021-03-09T08:38:23","guid":{"rendered":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/"},"modified":"2026-05-22T12:01:27","modified_gmt":"2026-05-22T12:01:27","slug":"packages-plugins","status":"publish","type":"blocks-handbook","link":"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-plugins\/","title":{"rendered":"@wordpress\/plugins"},"content":{"rendered":"<p>Plugins module for WordPress.<\/p>\n<h2>Installation<\/h2>\n<p>Install the module<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/plugins --save\n<\/code><\/pre>\n<p><em>This package assumes that your code will run in an <strong>ES2015+<\/strong> environment. If you&#8217;re using an environment that has limited or no support for such language features and APIs, you should include <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/HEAD\/packages\/babel-preset-default#polyfill\">the polyfill shipped in <code>@wordpress\/babel-preset-default<\/code><\/a> in your code.<\/em><\/p>\n<h3>Plugins API<\/h3>\n<p><!-- START TOKEN(Autogenerated API docs) --><\/p>\n<h4>getPlugin<\/h4>\n<p>Returns a registered plugin settings.<\/p>\n<p><em>Parameters<\/em><\/p>\n<ul>\n<li><em>name<\/em> <code>string<\/code>: Plugin name.<\/li>\n<\/ul>\n<p><em>Returns<\/em><\/p>\n<ul>\n<li><code>WPPlugin | undefined<\/code>: Plugin setting.<\/li>\n<\/ul>\n<h4>getPlugins<\/h4>\n<p>Returns all registered plugins without a scope or for a given scope.<\/p>\n<p><em>Parameters<\/em><\/p>\n<ul>\n<li><em>scope<\/em> <code>string<\/code>: The scope to be used when rendering inside a plugin area. No scope by default.<\/li>\n<\/ul>\n<p><em>Returns<\/em><\/p>\n<ul>\n<li><code>WPPlugin[]<\/code>: The list of plugins without a scope or for a given scope.<\/li>\n<\/ul>\n<h4>PluginArea<\/h4>\n<p>A component that renders all plugin fills in a hidden div.<\/p>\n<p><em>Usage<\/em><\/p>\n<pre><code class=\"language-js\">\/\/ Using ES5 syntax\nvar el = React.createElement;\nvar PluginArea = wp.plugins.PluginArea;\n\nfunction Layout() {\n    return el( 'div', { scope: 'my-page' }, 'Content of the page', PluginArea );\n}\n<\/code><\/pre>\n<pre><code class=\"language-js\">\/\/ Using ESNext syntax\nimport { PluginArea } from '@wordpress\/plugins';\n\nconst Layout = () =&gt; (\n    &lt;div&gt;\n        Content of the page\n        &lt;PluginArea scope=\"my-page\" \/&gt;\n    &lt;\/div&gt;\n);\n<\/code><\/pre>\n<p><em>Parameters<\/em><\/p>\n<ul>\n<li><em>props<\/em> <code>{ scope?: string; onError?: ( name: WPPlugin[ 'name' ], error: Error ) =&gt; void; }<\/code>:<\/li>\n<li><em>props.scope<\/em> <code>string<\/code>:<\/li>\n<li><em>props.onError<\/em> <code>( name: WPPlugin[ 'name' ], error: Error ) =&gt; void<\/code>:<\/li>\n<\/ul>\n<p><em>Returns<\/em><\/p>\n<ul>\n<li><code>Component<\/code>: The component to be rendered.<\/li>\n<\/ul>\n<h4>registerPlugin<\/h4>\n<p>Registers a plugin to the editor.<\/p>\n<p><em>Usage<\/em><\/p>\n<pre><code class=\"language-js\">\/\/ Using ES5 syntax\nvar el = React.createElement;\nvar Fragment = wp.element.Fragment;\nvar PluginSidebar = wp.editor.PluginSidebar;\nvar PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;\nvar registerPlugin = wp.plugins.registerPlugin;\nvar moreIcon = React.createElement( 'svg' ); \/\/... svg element.\n\nfunction Component() {\n    return el(\n        Fragment,\n        {},\n        el(\n            PluginSidebarMoreMenuItem,\n            {\n                target: 'sidebar-name',\n            },\n            'My Sidebar'\n        ),\n        el(\n            PluginSidebar,\n            {\n                name: 'sidebar-name',\n                title: 'My Sidebar',\n            },\n            'Content of the sidebar'\n        )\n    );\n}\nregisterPlugin( 'plugin-name', {\n    icon: moreIcon,\n    render: Component,\n    scope: 'my-page',\n} );\n<\/code><\/pre>\n<pre><code class=\"language-js\">\/\/ Using ESNext syntax\nimport { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress\/editor';\nimport { registerPlugin } from '@wordpress\/plugins';\nimport { more } from '@wordpress\/icons';\n\nconst Component = () =&gt; (\n    &lt;&gt;\n        &lt;PluginSidebarMoreMenuItem target=\"sidebar-name\"&gt;\n            My Sidebar\n        &lt;\/PluginSidebarMoreMenuItem&gt;\n        &lt;PluginSidebar name=\"sidebar-name\" title=\"My Sidebar\"&gt;\n            Content of the sidebar\n        &lt;\/PluginSidebar&gt;\n    &lt;\/&gt;\n);\n\nregisterPlugin( 'plugin-name', {\n    icon: more,\n    render: Component,\n    scope: 'my-page',\n} );\n<\/code><\/pre>\n<p><em>Parameters<\/em><\/p>\n<ul>\n<li><em>name<\/em> <code>string<\/code>: A string identifying the plugin. Must be unique across all registered plugins.<\/li>\n<li><em>settings<\/em> <code>PluginSettings<\/code>: The settings for this plugin.<\/li>\n<\/ul>\n<p><em>Returns<\/em><\/p>\n<ul>\n<li><code>PluginSettings | null<\/code>: The final plugin settings object.<\/li>\n<\/ul>\n<h4>unregisterPlugin<\/h4>\n<p>Unregisters a plugin by name.<\/p>\n<p><em>Usage<\/em><\/p>\n<pre><code class=\"language-js\">\/\/ Using ES5 syntax\nvar unregisterPlugin = wp.plugins.unregisterPlugin;\n\nunregisterPlugin( 'plugin-name' );\n<\/code><\/pre>\n<pre><code class=\"language-js\">\/\/ Using ESNext syntax\nimport { unregisterPlugin } from '@wordpress\/plugins';\n\nunregisterPlugin( 'plugin-name' );\n<\/code><\/pre>\n<p><em>Parameters<\/em><\/p>\n<ul>\n<li><em>name<\/em> <code>string<\/code>: Plugin name.<\/li>\n<\/ul>\n<p><em>Returns<\/em><\/p>\n<ul>\n<li><code>WPPlugin | undefined<\/code>: The previous plugin settings object, if it has been successfully unregistered; otherwise <code>undefined<\/code>.<\/li>\n<\/ul>\n<h4>usePluginContext<\/h4>\n<p>A hook that returns the plugin context.<\/p>\n<p><em>Returns<\/em><\/p>\n<ul>\n<li><code>PluginContext<\/code>: Plugin context<\/li>\n<\/ul>\n<h4>withPluginContext<\/h4>\n<blockquote><p>\n  <strong>Deprecated<\/strong> 6.8.0 Use <code>usePluginContext<\/code> hook instead.\n<\/p><\/blockquote>\n<p>A Higher Order Component used to inject Plugin context to the wrapped component.<\/p>\n<p><em>Parameters<\/em><\/p>\n<ul>\n<li><em>mapContextToProps<\/em> <code>( context: PluginContext, props: T ) =&gt; T &amp; PluginContext<\/code>: Function called on every context change, expected to return object of props to merge with the component&#8217;s own props.<\/li>\n<\/ul>\n<p><em>Returns<\/em><\/p>\n<ul>\n<li><code>Component<\/code>: Enhanced component with injected context as props.<\/li>\n<\/ul>\n<p><!-- END TOKEN(Autogenerated API docs) --><\/p>\n<h2>Contributing to this package<\/h2>\n<p>This is an individual package that&#8217;s part of the Gutenberg project. The project is organized as a monorepo. It&#8217;s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to <a href=\"https:\/\/www.npmjs.com\/\">npm<\/a> and used by <a href=\"https:\/\/make.wordpress.org\/core\/\">WordPress<\/a> as well as other software projects.<\/p>\n<p>To find out more about contributing to this package or Gutenberg as a whole, please read the project&#8217;s main <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/HEAD\/CONTRIBUTING.md\">contributor guide<\/a>.<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":134521,"menu_order":320,"template":"","meta":{"footnotes":""},"class_list":["post-134583","blocks-handbook","type-blocks-handbook","status-publish","hentry","type-handbook"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134583","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook"}],"about":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/types\/blocks-handbook"}],"version-history":[{"count":18,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134583\/revisions"}],"predecessor-version":[{"id":155609,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134583\/revisions\/155609"}],"up":[{"embeddable":true,"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/blocks-handbook\/134521"}],"wp:attachment":[{"href":"https:\/\/developer.wordpress.org\/wp-json\/wp\/v2\/media?parent=134583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}