这个包仍是实验性的。“实验性”意味着这是一个早期实现，可能会发生重大且具有破坏性的变更。

Interface Package 包含启动新的 WordPress 界面（如编辑文章或编辑站点）所需的基础。该包提供了一个数据存储和一组组件。该存储可用于保存界面所需的通用数据（例如活动区域）。这些信息会在界面重新加载后保留。这些组件允许实现侧边栏或菜单项等功能。第三方插件默认可以对其进行扩展。

安装

安装该模块

npm install @wordpress/interface --save

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

API 用法

互补区域

该组件以 complementary landmark（互补地标） 命名——它是文档中的一个辅助部分，旨在与主内容在 DOM 层级中处于相似级别并互为补充，但在与主内容分离时仍然有意义。

ComplementaryArea 和 ComplementaryArea.Slot 组成一个 slot fill 对，用于渲染互补区域。可以同时渲染多个代表不同互补区域的 ComplementaryArea 组件，但根据当前启用的是哪个互补区域，只有一个会显示在 slot 中。

可以通过使用该 store 来控制启用哪个互补区域：

以下是一些示例，展示如何使用该 store 控制当前活动的互补区域：

wp.data
    .select( 'core/interface' )
    .getActiveComplementaryArea( 'core' );
// -> "edit-post/document"

wp.data
    .dispatch( 'core/interface' )
    .enableComplementaryArea( 'core', 'edit-post/block' );

wp.data
    .select( 'core/interface' )
    .getActiveComplementaryArea( 'core' );
// -> "edit-post/block"

wp.data
    .dispatch( 'core/interface' )
    .disableComplementaryArea( 'core' );

wp.data
    .select( 'core/interface' )
    .getActiveComplementaryArea( 'core' );
// -> null

固定项目

PinnedItems 和 PinnedItems.Slot 组成一个 slot fill 对，用于渲染固定项目（或区域），其作用类似于 Chrome 菜单中列出的浏览器扩展收藏列表。

示例用法：ComplementaryArea 组件使用 PinnedItems，并会自动为标记为收藏的互补区域添加固定项目。

wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );
// -> false

wp.data.dispatch( 'core/interface' ).pinItem( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );

wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );
// -> true

wp.data.dispatch( 'core/interface' ).unpinItem( 'core', 'edit-post-block-patterns/block-patterns-sidebar' );

wp.data.select( 'core/interface' ).isItemPinned( 'core', 'edit-post-block-patterns/block-patterns-sidebar' ); -> false

首选项

interface 包提供了一些辅助工具，用于实现编辑器首选项。

功能

功能是布尔值，用于开启或关闭特定编辑器功能。

在编辑器初始化时，可以为任意功能设置默认值：

import { dispatch } from '@wordpress/data';
import { store as interfaceStore } from '@wordpress/interface';

function initialize() {
    // ...

    dispatch( interfaceStore ).setFeatureDefaults(
        'namespace/editor-or-plugin-name',
        {
            myFeatureName: true,
        }
    );

    // ...
}

使用 toggleFeature action 和 isFeatureActive selector 在你的应用中切换功能：

wp.data
    .select( 'core/interface' )
    .isFeatureActive( 'namespace/editor-or-plugin-name', 'myFeatureName' ); // true
wp.data
    .dispatch( 'core/interface' )
    .toggleFeature( 'namespace/editor-or-plugin-name', 'myFeatureName' );
wp.data
    .select( 'core/interface' )
    .isFeatureActive( 'namespace/editor-or-plugin-name', 'myFeatureName' ); // false

参与该包的贡献

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

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