WordPress 的插件模块。

安装

安装模块

npm install @wordpress/plugins --save

此软件包假定你的代码将在 ES2015+ 环境中运行。如果你使用的环境对此类语言特性和 API 的支持有限或完全不支持，应在代码中包含 @wordpress/babel-preset-default 中附带的 polyfill。

插件 API

getPlugin

返回已注册插件的设置。

参数

  • name string：插件名称。

返回值

  • WPPlugin | undefined：插件设置。

getPlugins

返回所有无作用域或指定作用域的已注册插件。

参数

  • scope string：在插件区域内渲染时使用的作用域。默认无作用域。

返回值

  • WPPlugin[]：无作用域或指定作用域的插件列表。

PluginArea

一个组件，用于在隐藏的 div 中渲染所有插件填充内容。

用法

// 使用 ES5 语法
var el = React.createElement;
var PluginArea = wp.plugins.PluginArea;

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

// 使用 ESNext 语法
import { PluginArea } from '@wordpress/plugins';

const Layout = () => (
    <div>
        Content of the page
        <PluginArea scope="my-page" />
    </div>
);

参数

  • props { scope?: string; onError?: ( name: WPPlugin[ 'name' ], error: Error ) => void; }：
  • props.scope string：
  • props.onError ( name: WPPlugin[ 'name' ], error: Error ) => void：

返回值

  • Component：要渲染的组件。

registerPlugin

向编辑器注册插件。

用法

// 使用 ES5 语法
var el = React.createElement;
var Fragment = wp.element.Fragment;
var PluginSidebar = wp.editor.PluginSidebar;
var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
var registerPlugin = wp.plugins.registerPlugin;
var moreIcon = React.createElement( 'svg' ); //... svg 元素。

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

// 使用 ESNext 语法
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor';
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',
} );

参数

  • name string：用于标识插件的字符串。必须在所有已注册插件中唯一。
  • settings PluginSettings：此插件的设置。

返回值

  • PluginSettings | null：最终的插件设置对象。

unregisterPlugin

按名称注销插件。

用法

// 使用 ES5 语法
var unregisterPlugin = wp.plugins.unregisterPlugin;

unregisterPlugin( 'plugin-name' );

// 使用 ESNext 语法
import { unregisterPlugin } from '@wordpress/plugins';

unregisterPlugin( 'plugin-name' );

参数

  • name string：插件名称。

返回值

  • WPPlugin | undefined：如果成功注销，则为先前的插件设置对象；否则为 undefined。

usePluginContext

返回插件上下文的钩子。

返回值

  • PluginContext：插件上下文

withPluginContext

已弃用 6.8.0 请改用 usePluginContext 钩子。

用于将插件上下文注入被包裹组件的高阶组件。

参数

  • mapContextToProps ( context: PluginContext, props: T ) => T & PluginContext：每次上下文变化时调用的函数，应返回要合并到组件自身 props 中的 props 对象。

返回值

  • Component：将注入的上下文作为 props 的增强组件。

为此软件包做贡献

这是一个独立软件包，是 Gutenberg 项目的一部分。该项目以 monorepo 形式组织。它由多个自包含软件包组成，每个软件包都有特定用途。此 monorepo 中的软件包发布到 npm，并被 WordPress 以及其他软件项目使用。

要了解有关为此软件包或整个 Gutenberg 做贡献的更多信息，请阅读项目的主要 贡献者指南。