该模块使用了 @wordpress/block-editor 包中的组件。基于对 WordPress 文章概念的了解，它将代表文章的块值的加载和保存机制与文章及其内容关联起来。它还提供了在编辑器上下文中处理文章对象的各种相关组件（例如，文章标题输入组件）。此包可以支持编辑任何文章类型的文章，并不假设渲染发生在任何特定的 WordPress 屏幕或布局安排中。

安装

安装模块

npm install @wordpress/editor --save

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

工作原理

涉及编辑器的逻辑流程包括：推断文章内容的块表示（解析）；描述文章的状态（表示）；将文章渲染到 DOM（渲染）；附加用于操作内容即块的控件（UI）。

编辑器元素的目标是让用户以确定性方式操纵其文章的内容——通过内容块的组织来实现。通常，在声明式流程中，组成文章的各个部分会以特定顺序表示，机器能够从中生成具有必要 UI 控件的输出视图。然而，我们在 WordPress 中开始的地方并不是一个有利于这种表达的文章状态表示，甚至没有任何关于块的知识，因为内容是以序列化方式存储在单个字段中的。

这样一个关键步骤由语法解析处理，它获取文章的序列化内容并使用 HTML 注释中存在的语法提示（如果可能）推断出一个有序的块列表。编辑器使用由解析原始文章内容生成的块节点的状态表示进行初始化：wp.blocks.parse( post.content.raw )。

因此，可视化编辑器是一个包含并将内部状态中的块节点列表渲染到页面中的组件。这消除了在处理查找块和操作块时的任何命令式处理的痕迹。事实上，可视化编辑器或文本编辑器只是同一状态表示的两个不同但同样有效的视图。随着块的更新，文章内容的内部表示也会更新，并重新序列化以保存在 post_content 中。

单独的块由 VisualBlock 组件处理，该组件附加事件处理器并将块定义的 edit 函数以及相应的属性和本地状态渲染到文档中。edit 函数是组件在编辑模式下的标记形状。

组件

由于许多块共享相同的复杂行为，提供了可复用的组件以简化您的块 edit 函数的实现。

BlockControls

当从您的块的 edit 实现返回时，渲染一个图标按钮工具栏。这对于在块被选中时提供块级别的修改非常有用。例如，如果您的块支持对齐，您可能希望在选中块的工具栏中显示对齐选项。

示例：

( function ( editor, React ) {
    var el = React.createElement,
        BlockControls = editor.BlockControls,
        AlignmentToolbar = editor.AlignmentToolbar;

    function edit( props ) {
        return [
            // Controls: (only visible when block is selected)
            el(
                BlockControls,
                { key: 'controls' },
                el( AlignmentToolbar, {
                    value: props.align,
                    onChange: function ( nextAlign ) {
                        props.setAttributes( { align: nextAlign } );
                    },
                } )
            ),

            // Block content: (with alignment as attribute)
            el(
                'p',
                { key: 'text', style: { textAlign: props.align } },
                'Hello World!'
            ),
        ];
    }
} )( window.wp.editor, window.React );

请注意，在此示例中，我们将 AlignmentToolbar 渲染为 BlockControls 元素的子元素。这是您可以用来简化块文本对齐的另一个预配置组件。

或者，您可以通过向 BlockControls 组件传递 controls 数组来创建自己的工具栏控件。每个控件应是一个具有以下属性的对象：

  • icon: string – 要在控件的工具栏按钮中显示的 Dashicon 的 Slug
  • title: string – 要作为控件按钮的工具提示标签显示的人类可读本地化文本
  • subscript: ?string – 可选文本，作为下标显示在按钮图标旁边（例如，标题级别）
  • isActive: ?boolean – 是否应将控件视为活动/选中状态。默认为 false。

要在同一个 BlockControls 元素中的控件组之间创建分隔符，请将 controls 作为嵌套数组（对象的数组的数组）传递。每组控件之间将显示一个分隔符。

RichText

渲染一个丰富的 contenteditable 输入，为用户提供添加内容强调或链接的选项。它的行为类似于 受控组件，除了 onChange 触发的频率低于传统 input 字段的预期，通常在用户离开字段时触发。

提供以下属性（非详尽列表）：

  • value: string – 字段的标记值。仅允许有效的标记，由 inline 值和可用控件确定。
  • onChange: Function – 当字段值更改时的回调处理程序，将新值作为其唯一参数传递。
  • placeholder: string – 当字段值为空时向用户显示的文本提示，类似于同名
    input 和 textarea 属性。

示例：

( function ( editor, React ) {
    var el = React.createElement,
        RichText = editor.RichText;

    function edit( props ) {
        function onChange( value ) {
            props.setAttributes( { text: value } );
        }

        return el( RichText, {
            value: props.attributes.text,
            onChange: onChange,
        } );
    }

    // blocks.registerBlockType( ..., { edit: edit, ... } );
} )( window.wp.editor, window.React );

API

AlignmentToolbar

自 5.3 起已弃用，请改用 wp.blockEditor.AlignmentToolbar。

Autocomplete

自 5.3 起已弃用，请改用 wp.blockEditor.Autocomplete。

AutosaveMonitor

监控对编辑文章的更改并在必要时触发自动保存。

每 interval 秒检查一次文章，当有内容需要保存时自动保存。

用法

<AutosaveMonitor interval={ 30 } />

参数

  • props Object: 组件属性。
  • props.interval [number]: 检查之间的时间（秒）。默认为编辑器的 autosaveInterval 设置。
  • props.autosave [Function]: 需要在保存更改时调用的函数。默认为编辑器存储的 autosave 操作。

BlockAlignmentToolbar

自 5.3 起已弃用，请改用 wp.blockEditor.BlockAlignmentToolbar。

BlockControls

自 5.3 起已弃用，请改用 wp.blockEditor.BlockControls。

BlockEdit

自 5.3 起已弃用，请改用 wp.blockEditor.BlockEdit。

BlockEditorKeyboardShortcuts

自 5.3 起已弃用，请改用 wp.blockEditor.BlockEditorKeyboardShortcuts。

BlockFormatControls

自 5.3 起已弃用，请改用 wp.blockEditor.BlockFormatControls。

BlockIcon

自 5.3 起已弃用，请改用 wp.blockEditor.BlockIcon。

BlockInspector

自 5.3 起已弃用，请改用 wp.blockEditor.BlockInspector。

BlockList

自 5.3 版本起已弃用，请改用 wp.blockEditor.BlockList。

BlockMover

自 5.3 版本起已弃用，请改用 wp.blockEditor.BlockMover。

BlockNavigationDropdown

自 5.3 版本起已弃用，请改用 wp.blockEditor.BlockNavigationDropdown。

BlockSelectionClearer

自 5.3 版本起已弃用，请改用 wp.blockEditor.BlockSelectionClearer。

BlockSettingsMenu

自 5.3 版本起已弃用，请改用 wp.blockEditor.BlockSettingsMenu。

BlockTitle

自 5.3 版本起已弃用，请改用 wp.blockEditor.BlockTitle。

BlockToolbar

自 5.3 版本起已弃用，请改用 wp.blockEditor.BlockToolbar。

CharacterCount

渲染文章内容的字符计数。

返回

  • number: 字符数量。

cleanForSlug

对字符串进行基本清理，以便用作文章别名（slug）。

此函数复现了 WordPress 核心中 sanitize_title() 的部分功能，但仅旨在近似生成别名。

将 Latin-1 Supplement 和 Latin Extended-A 字母转换为基本拉丁字母。移除组合变音符号。将空格、句点和正斜杠转换为连字符。移除任何剩余的非常规字符，连字符和下划线除外。将剩余字符串转换为小写。它不处理八位字节、HTML 实体或其他编码字符。

参数

  • string string: 要处理的标题或别名。

返回

  • string: 处理后的字符串。

ColorPalette

自 5.3 版本起已弃用，请改用 wp.blockEditor.ColorPalette。

ContrastChecker

自 5.3 版本起已弃用，请改用 wp.blockEditor.ContrastChecker。

CopyHandler

自 5.3 版本起已弃用，请改用 wp.blockEditor.CopyHandler。

createCustomColorsHOC

自 5.3 版本起已弃用，请改用 wp.blockEditor.createCustomColorsHOC。

DefaultBlockAppender

自 5.3 版本起已弃用，请改用 wp.blockEditor.DefaultBlockAppender。

DocumentBar

此组件在编辑器顶部渲染一个导航栏。它显示当前文档的标题、后退按钮（如果适用）以及命令中心按钮。它还处理文档的不同状态，例如“未找到”或“不同步”。

用法

<DocumentBar />

参数

  • props Object: 组件属性。
  • props.title string: 文档的标题，默认为当前正在编辑的文档或模板标题。
  • props.icon IconType: 文档的图标，无默认值。（不再使用指示文档文章类型的默认图标。）

返回

  • React.ReactNode: 渲染后的 DocumentBar 组件。

DocumentOutline

渲染文档大纲组件。

参数

  • props Object: 属性。
  • props.onSelect Function: 选中大纲项时调用的函数。
  • props.hasOutlineItemsDisabled boolean: 指示大纲项是否被禁用。

返回

  • React.ReactNode: 渲染后的组件。

DocumentOutlineCheck

检查文档中是否存在任何标题（core/heading 块）的组件。

参数

  • props Object: 属性。
  • props.children React.ReactNode: 要渲染的子元素。

返回

  • React.ReactNode: 要渲染的组件，或者如果存在标题则返回 null。

EditorHistoryRedo

渲染编辑器历史记录的重做按钮。

参数

  • props Object: – 属性。
  • ref Ref: – 转发的 ref。

返回

  • React.ReactNode: 渲染后的组件。

EditorHistoryUndo

渲染编辑器历史记录的回退按钮。

参数

  • props Object: – 属性。
  • ref Ref: – 转发的 ref。

返回

  • React.ReactNode: 渲染后的组件。

EditorKeyboardShortcuts

处理编辑器的键盘快捷键。

它提供了各种键盘快捷键的功能，例如切换编辑器模式、切换专注模式、撤销/重做、保存文章、切换列表视图和切换侧边栏。

EditorKeyboardShortcutsRegister

用于注册编辑器键盘快捷键的组件。

返回

  • Element: 要渲染的组件。

EditorNotices

自 7.0 版本起已弃用，请改用 wp.notices.InlineNotices。

EditorProvider

此组件建立新的文章编辑上下文，并作为新文章编辑器（或带有模板编辑器的文章）的入口点。

它支持大量文章类型，包括文章、页面、模板、自定义文章类型、区块图案、模板部分。

所有修改和更改都在 @wordpress/core-data 存储中执行。

用法

<EditorProvider
    post={ post }
    settings={ settings }
    __unstableTemplate={ template }
>
    { children }
</EditorProvider>

参数

  • props Object: 组件属性。
  • props.post [Object]: 要编辑的文章对象。这是必需的。
  • props.__unstableTemplate [Object]: 包装被编辑文章的模板对象。这是可选的，仅在文章类型支持模板时使用（如文章和页面）。
  • props.settings [Object]: 用于编辑器的设置对象。这是可选的，可用于覆盖默认设置。
  • props.children [React.ReactNode]: 应用 BlockEditorProvider 上下文的子元素。这是可选的。

返回

  • React.ReactNode: 渲染后的 EditorProvider 组件。

EditorSnackbars

自 7.0 版本起已弃用，请改用 wp.notices.SnackbarNotices。

EntitiesSavedStates

未记录的声明。

ErrorBoundary

ErrorBoundary 用于捕获子组件树中任何位置的 JavaScript 错误，记录这些错误并显示备用用户界面。

它使用生命周期方法 getDerivedStateFromError 和 componentDidCatch 来捕获子组件树中的错误。

getDerivedStateFromError 用于在抛出错误后渲染备用 UI，而 componentDidCatch 用于记录错误信息。

FontSizePicker

自 5.3 版本起已弃用，请改用 wp.blockEditor.FontSizePicker。

getColorClassName

自 5.3 版本起已弃用，请改用 wp.blockEditor.getColorClassName。

getColorObjectByAttributeValues

自 5.3 版本起已弃用，请改用 wp.blockEditor.getColorObjectByAttributeValues。

getColorObjectByColorValue

自 5.3 版本起已弃用，请改用 wp.blockEditor.getColorObjectByColorValue。

getFontSize

自 5.3 版本起已弃用，请改用 wp.blockEditor.getFontSize。

getFontSizeClass

自 5.3 版本起已弃用，请改用 wp.blockEditor.getFontSizeClass。

InnerBlocks

自 5.3 版本起已弃用，请改用 wp.blockEditor.InnerBlocks。

Inserter

自 5.3 版本起已弃用，请改用 wp.blockEditor.Inserter。

InspectorAdvancedControls

自 5.3 版本起已弃用，请改用 wp.blockEditor.InspectorAdvancedControls。

InspectorControls

自 5.3 版本起已弃用，请改用 wp.blockEditor.InspectorControls。

linkAutocompleter

用于文章和页面的链接自动完成器。

类型

  • Object

LocalAutosaveMonitor

监控编辑器中文档的本地自动保存。它使用多个钩子和函数来管理自动保存行为：

  • useAutosaveNotice 钩子：管理创建通知，提示用户恢复本地自动保存（如果存在）。
  • useAutosavePurge 钩子：在成功保存后清除本地自动保存内容。
  • hasSessionStorageSupport 函数：检查当前环境是否支持浏览器的 sessionStorage。
  • LocalAutosaveMonitor 组件：使用 AutosaveMonitor 组件以指定间隔执行自动保存。

该模块还会检查对 sessionStorage 的支持情况，并根据此结果有条件地导出 LocalAutosaveMonitor 组件。

MediaPlaceholder

自 5.3 版本起已弃用，请改用 wp.blockEditor.MediaPlaceholder。

MediaUpload

自 5.3 版本起已弃用，请改用 wp.blockEditor.MediaUpload。

mediaUpload

当文件上传按钮被激活时上传媒体文件。这是对 uploadMedia() 的封装，并注入了当前文章 ID。

参数

  • $0 Object: 传递给函数的参数对象。
  • $0.additionalData ?Object: 要包含在请求中的额外数据。
  • $0.allowedTypes string: 可上传的媒体类型数组，如果未设置则允许所有类型。
  • $0.filesList Array: 文件列表。
  • $0.maxUploadFileSize ?number: 站点允许的最大上传文件大小（字节）。
  • $0.onError Function: 发生错误时调用的函数。
  • $0.onFileChange Function: 每次文件或文件的临时表示形式可用时调用的函数。
  • $0.onSuccess Function: 文件的最终表示形式可用后调用的函数。
  • $0.multiple boolean: 是否允许多个文件上传。
  • $0.isTransportOnly boolean: 调用方是否拥有上传生命周期 UX（进度跟踪和保存锁定），并且仅将此函数用作其服务器传输层。由 @wordpress/upload-media 队列设置，该队列会计算自己的项数以用于进度 Snackbar，并通过 useUploadSaveLock 锁定保存操作。

MediaUploadCheck

自 5.3 版本起已弃用，请改用 wp.blockEditor.MediaUploadCheck。

MultiSelectScrollIntoView

自 5.3 版本起已弃用，请改用 wp.blockEditor.MultiSelectScrollIntoView。

NavigableToolbar

自 5.3 版本起已弃用，请改用 wp.blockEditor.NavigableToolbar。

ObserveTyping

自 5.3 版本起已弃用，请改用 wp.blockEditor.ObserveTyping。

PageAttributesCheck

包装器组件，仅当文章类型支持页面属性时才渲染其子元素。

参数

  • props Object: – 组件属性。
  • props.children React.ReactNode: – 要渲染的子组件。

返回

  • React.ReactNode: 渲染的子组件，如果不支持页面属性则返回 null。

PageAttributesOrder

渲染页面属性顺序组件。编辑器界面中的一个数字输入框，用于设置给定页面的顺序。该组件现在不再在核心中使用，但为了向后兼容而保留。

返回

  • React.ReactNode: 渲染的组件。

PageAttributesPanel

渲染页面属性面板组件。

返回

  • React.ReactNode: 渲染的组件。

PageAttributesParent

渲染页面属性父级组件。编辑器界面中的一个下拉菜单，用于选择给定页面的父页面。

返回

  • React.ReactNode: 要渲染的组件。如果文章类型不是分层结构，则返回 null。

PageTemplate

提供一个下拉菜单，用于选择和管理文章模板。

下拉菜单包括一个切换菜单的按钮、可用模板列表以及创建和编辑模板的选项。

返回

  • React.ReactNode: 渲染的 ClassicThemeControl 组件。

PanelColorSettings

自 5.3 版本起已弃用，请改用 wp.blockEditor.PanelColorSettings。

PlainText

自 5.3 版本起已弃用，请改用 wp.blockEditor.PlainText。

PluginBlockSettingsMenuItem

在块设置菜单中渲染一个新项目。

用法

// Using ES5 syntax
var __ = wp.i18n.__;
var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem;

function doOnClick() {
    // To be called when the user clicks the menu item.
}

function MyPluginBlockSettingsMenuItem() {
    return React.createElement( PluginBlockSettingsMenuItem, {
        allowedBlocks: [ 'core/paragraph' ],
        icon: 'dashicon-name',
        label: __( 'Menu item text' ),
        onClick: doOnClick,
    } );
}

// Using ESNext syntax
import { __ } from '@wordpress/i18n';
import { PluginBlockSettingsMenuItem } from '@wordpress/editor';

const doOnClick = () => {
    // To be called when the user clicks the menu item.
};

const MyPluginBlockSettingsMenuItem = () => (
    <PluginBlockSettingsMenuItem
        allowedBlocks={ [ 'core/paragraph' ] }
        icon="dashicon-name"
        label={ __( 'Menu item text' ) }
        onClick={ doOnClick }
    />
);

参数

  • props Object: 组件属性。
  • props.allowedBlocks [Array]: 包含应显示该项目的块名称列表的数组。如果不存在，则为任何块渲染该项目。如果选择了多个块，则仅当它们都在允许列表中时才显示该项目。
  • props.icon [WPBlockTypeIconRender]: Dashicon 图标 slug 字符串，或 SVG WP 元素。
  • props.label string: 菜单项文本。
  • props.onClick Function: 用户点击菜单项时执行的回调函数。
  • props.small [boolean]: 是否渲染标签。
  • props.role [string]: 菜单项的 ARIA role。

返回

  • React.ReactNode: 渲染的组件。

PluginDocumentSettingPanel

在文档侧边栏的状态与可用性面板下方渲染项目。

用法

// Using ES5 syntax
var el = React.createElement;
var __ = wp.i18n.__;
var registerPlugin = wp.plugins.registerPlugin;
var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;

function MyDocumentSettingPlugin() {
    return el(
        PluginDocumentSettingPanel,
        {
            className: 'my-document-setting-plugin',
            title: 'My Panel',
            name: 'my-panel',
        },
        __( 'My Document Setting Panel' )
    );
}

registerPlugin( 'my-document-setting-plugin', {
    render: MyDocumentSettingPlugin,
} );

// Using ESNext syntax
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/editor';

const MyDocumentSettingTest = () => (
    <PluginDocumentSettingPanel
        className="my-document-setting-plugin"
        title="My Panel"
        name="my-panel"
    >
        <p>My Document Setting Panel</p>
    </PluginDocumentSettingPanel>
);

registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );

参数

  • props Object: 组件属性。
  • props.name string: 必需。面板的机器友好名称。
  • props.className [string]: 可选，添加到行的类名。
  • props.title [string]: 面板的标题
  • props.icon [WPBlockTypeIconRender]: 当侧边栏固定到工具栏时要渲染的 Dashicon 图标 slug 字符串，或 SVG WP 元素。
  • props.children React.ReactNode: 要渲染的子元素

返回

  • React.ReactNode: 要渲染的组件。

PluginMoreMenuItem

在“更多菜单”下拉菜单的 Plugins 组中渲染一个菜单项，可以根据提供的 props 用作按钮或链接。组件内的文本作为菜单项标签显示。

用法

// Using ES5 syntax
var __ = wp.i18n.__;
var PluginMoreMenuItem = wp.editor.PluginMoreMenuItem;
var moreIcon = wp.element.createElement( 'svg' ); //... svg element.

function onButtonClick() {
    alert( 'Button clicked.' );
}

function MyButtonMoreMenuItem() {
    return wp.element.createElement(
        PluginMoreMenuItem,
        {
            icon: moreIcon,
            onClick: onButtonClick,
        },
        __( 'My button title' )
    );
}

// 使用 ESNext 语法
import { __ } from '@wordpress/i18n';
import { PluginMoreMenuItem } from '@wordpress/editor';
import { more } from '@wordpress/icons';

function onButtonClick() {
    alert( 'Button clicked.' );
}

const MyButtonMoreMenuItem = () => (
    <PluginMoreMenuItem icon={ more } onClick={ onButtonClick }>
        { __( 'My button title' ) }
    </PluginMoreMenuItem>
);

参数

  • props Object: 组件属性。
  • props.children [React.ReactNode]: 要渲染的子元素。
  • props.href [string]: 当提供 href 时，菜单项将表示为锚点而非按钮。它对应于锚点的 href 属性。
  • props.icon [WPBlockTypeIconRender]: 要渲染在菜单项标签左侧的 Dashicon 图标 slug 字符串，或 SVG WP 元素。
  • props.onClick [Function]: 用户点击菜单项时要执行的回调函数。
  • props.other [...*]: 除已弃用且被忽略的 as 外，任何其他附加 props 都会透传给底层菜单项组件。

返回

  • React.ReactNode: 渲染后的组件。

PluginPostPublishPanel

在发布流程（用户在发布文章后打开的侧边面板）中将提供的内容渲染到发布后面板中。

用法

// 使用 ESNext 语法
import { __ } from '@wordpress/i18n';
import { PluginPostPublishPanel } from '@wordpress/editor';

const MyPluginPostPublishPanel = () => (
    <PluginPostPublishPanel
        className="my-plugin-post-publish-panel"
        title={ __( 'My panel title' ) }
        initialOpen={ true }
    >
        { __( 'My panel content' ) }
    </PluginPostPublishPanel>
);

参数

  • props Object: 组件属性。
  • props.className [string]: 添加到面板的可选类名。
  • props.title [string]: 显示在面板顶部的标题。
  • props.initialOpen [boolean]: 是否初始打开面板。当未提供标题时，它将始终打开。
  • props.icon [WPBlockTypeIconRender]: 当侧边栏固定到工具栏时，要渲染的 Dashicon 图标 slug 字符串，或 SVG WP 元素。
  • props.children React.ReactNode: 要渲染的子元素

返回

  • React.ReactNode: 渲染后的组件。

PluginPostStatusInfo

在文档侧边栏的摘要面板中渲染一行。需要注意的是，它是围绕其服务的功能来命名和实现的，而不是其位置，这在未来的迭代中可能会发生变化。

用法

// 使用 ES5 语法
var __ = wp.i18n.__;
var PluginPostStatusInfo = wp.editor.PluginPostStatusInfo;

function MyPluginPostStatusInfo() {
    return React.createElement(
        PluginPostStatusInfo,
        {
            className: 'my-plugin-post-status-info',
        },
        __( 'My post status info' )
    );
}

// 使用 ESNext 语法
import { __ } from '@wordpress/i18n';
import { PluginPostStatusInfo } from '@wordpress/editor';

const MyPluginPostStatusInfo = () => (
    <PluginPostStatusInfo className="my-plugin-post-status-info">
        { __( 'My post status info' ) }
    </PluginPostStatusInfo>
);

参数

  • props Object: 组件属性。
  • props.className [string]: 添加到行的可选类名。
  • props.children React.ReactNode: 要渲染的子元素。

返回

  • React.ReactNode: 渲染后的组件。

PluginPrePublishPanel

在发布流程中（用户在主编辑器中首次点击“发布”时打开的侧边面板）将提供的内容渲染到发布前侧边面板中。

用法

// 使用 ESNext 语法
import { __ } from '@wordpress/i18n';
import { PluginPrePublishPanel } from '@wordpress/editor';

const MyPluginPrePublishPanel = () => (
    <PluginPrePublishPanel
        className="my-plugin-pre-publish-panel"
        title={ __( 'My panel title' ) }
        initialOpen={ true }
    >
        { __( 'My panel content' ) }
    </PluginPrePublishPanel>
);

参数

  • props Object: 组件属性。
  • props.className [string]: 添加到面板的可选类名。
  • props.title [string]: 显示在面板顶部的标题。
  • props.initialOpen [boolean]: 是否初始打开面板。当未提供标题时，它将始终打开。
  • props.icon [WPBlockTypeIconRender]: 当侧边栏固定到工具栏时，要渲染的 Dashicon 图标 slug 字符串，或 SVG WP 元素。如果传递 false，则不会渲染图标。
  • props.children React.ReactNode: 要渲染的子元素

返回

  • React.ReactNode: 渲染后的组件。

PluginPreviewMenuItem

在预览下拉菜单中渲染一个菜单项，根据提供的 props 可用作按钮或链接。组件内的文本显示为菜单项标签。

用法

import { __ } from '@wordpress/i18n';
import { PluginPreviewMenuItem } from '@wordpress/editor';
import { external } from '@wordpress/icons';

function onPreviewClick() {
    // 处理预览操作
}

const ExternalPreviewMenuItem = () => (
    <PluginPreviewMenuItem icon={ external } onClick={ onPreviewClick }>
        { __( 'Preview in new tab' ) }
    </PluginPreviewMenuItem>
);
registerPlugin( 'external-preview-menu-item', {
    render: ExternalPreviewMenuItem,
} );

参数

  • props Object: 组件属性。
  • props.children [React.ReactNode]: 要渲染的子元素。
  • props.href [string]: 当提供 href 时，菜单项将渲染为锚点而非按钮。它对应于锚点的 href 属性。
  • props.icon [WPBlockTypeIconRender]: 要渲染在菜单项标签左侧的图标。可以是 Dashicon slug 或 SVG WP 元素。
  • props.onClick [Function]: 用户点击菜单项时要执行的回调函数。
  • props.other [...*]: 除已弃用且被忽略的 as 外，任何其他附加 props 都会透传给底层菜单项组件。

返回

  • React.ReactNode: 渲染后的菜单项组件。

PluginSidebar

激活时渲染侧边栏。PluginSidebar 内的内容将作为侧边栏中的内容显示。当 isPinnable 标志设置为 true 时，它还会自动渲染相应的 PluginSidebarMenuItem 组件。如果您希望显示侧边栏，可以使用 PluginSidebarMoreMenuItem 组件或 wp.data.dispatch API：

wp.data
    .dispatch( 'core/edit-post' )
    .openGeneralSidebar( 'plugin-name/sidebar-name' );

相关

  • PluginSidebarMoreMenuItem

用法

// 使用 ES5 语法
var __ = wp.i18n.__;
var el = React.createElement;
var PanelBody = wp.components.PanelBody;
var PluginSidebar = wp.editor.PluginSidebar;
var moreIcon = React.createElement( 'svg' ); //... svg element.

function MyPluginSidebar() {
    return el(
        PluginSidebar,
        {
            name: 'my-sidebar',
            title: 'My sidebar title',
            icon: moreIcon,
        },
        el( PanelBody, {}, __( 'My sidebar content' ) )
    );
}

// 使用 ESNext 语法
import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import { PluginSidebar } from '@wordpress/editor';
import { more } from '@wordpress/icons';

const MyPluginSidebar = () => (
    <PluginSidebar name="my-sidebar" title="My sidebar title" icon={ more }>
        <PanelBody>{ __( 'My sidebar content' ) }</PanelBody>
    </PluginSidebar>
);

参数

  • props Object: 元素属性。
  • props.name string: 用于标识侧边栏的字符串。在您插件范围内的每个注册的侧边栏必须是唯一的。
  • props.children [React.ReactNode]: 要渲染的子元素。
  • props.className [string]: 添加到侧边栏主体的可选类名。
  • props.title string: 显示在侧边栏顶部的标题。
  • props.isPinnable [boolean]: 是否允许将侧边栏固定到工具栏。当设置为 true 时，它还会自动渲染相应的菜单项。
  • props.icon [WPBlockTypeIconRender]: 当侧边栏固定到工具栏时要渲染的 Dashicon 图标缩写字符串，或 SVG WP 元素。

PluginSidebarMoreMenuItem

在 More Menu 下拉菜单的 Plugins 组中渲染一个菜单项，可用于激活相应的 PluginSidebar 组件。组件内的文本作为菜单项标签显示。

用法

// 使用 ES5 语法
var __ = wp.i18n.__;
var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem;
var moreIcon = React.createElement( 'svg' ); //... svg 元素。

function MySidebarMoreMenuItem() {
    return React.createElement(
        PluginSidebarMoreMenuItem,
        {
            target: 'my-sidebar',
            icon: moreIcon,
        },
        __( 'My sidebar title' )
    );
}

// 使用 ESNext 语法
import { __ } from '@wordpress/i18n';
import { PluginSidebarMoreMenuItem } from '@wordpress/editor';
import { more } from '@wordpress/icons';

const MySidebarMoreMenuItem = () => (
    <PluginSidebarMoreMenuItem target="my-sidebar" icon={ more }>
        { __( 'My sidebar title' ) }
    </PluginSidebarMoreMenuItem>
);

参数

  • props Object: 组件属性。
  • props.target string: 标识目标侧边栏的字符串，该侧边栏应通过此菜单项激活。必须与您赋予该侧边栏的 name 属性相同。
  • props.children [React.ReactNode]: 要渲染的子节点。
  • props.icon [WPBlockTypeIconRender]: 要渲染在菜单项标签左侧的 Dashicon 图标缩写字符串，或 SVG WP 元素。

返回

  • React.ReactNode: 渲染后的组件。

PostAuthor

渲染用于选择文章作者的控件。

返回

  • React.ReactNode: 渲染后的组件。

PostAuthorCheck

包装器组件，仅当文章类型支持作者时才渲染其子元素。

参数

  • props Object: 组件属性。
  • props.children React.ReactNode: 要渲染的子节点。

返回

  • React.ReactNode: 要渲染的组件。如果文章类型不支持作者或没有可用作者，则返回 null。

PostAuthorPanel

渲染文章作者面板组件。

返回

  • React.ReactNode: 渲染后的组件。

PostComments

用于管理评论状态的形式。

返回

  • React.ReactNode: 渲染后的 PostComments 组件。

PostDiscussionPanel

此组件允许更新当前文章的评论和引用通告设置。内部会检查当前文章是否支持上述功能，以及 discussion-panel 面板是否已启用。

返回

  • React.ReactNode: 渲染后的 PostDiscussionPanel 组件。

PostExcerpt

渲染文章摘要的可编辑文本区域。模板、模板部分和模式在语义上使用 excerpt 字段作为描述。此外，模板和模板部分在 REST API 中将 excerpt 字段覆盖为 description。因此，此组件处理适当的标签并更新正在编辑的实体。

参数

  • props Object: – 组件属性。
  • props.hideLabelFromVision [boolean]: – 是否从视觉上隐藏文本区域的标签。
  • props.updateOnBlur [boolean]: – 是否在更改时更新文章，或使用本地状态并在失去焦点时更新。

PostExcerptCheck

用于检查文章类型是否支持摘要字段的组件。

参数

  • props Object: 属性。
  • props.children React.ReactNode: 要渲染的子节点。

返回

  • React.ReactNode: 渲染后的组件。

PostExcerptPanel

如果文章类型支持摘要，则进行渲染并允许编辑摘要。

返回

  • React.ReactNode: 渲染后的 PostExcerptPanel 组件。

PostFeaturedImage

渲染用于管理文章特色图像的组件。

参数

  • props Object: 属性。
  • props.currentPostId number: 当前文章的 ID。
  • props.featuredImageId number: 特色图像的 ID。
  • props.onUpdateImage Function: 图像更新时要调用的函数。
  • props.onRemoveImage Function: 图像移除时要调用的函数。
  • props.media Object: 表示特色图像的媒体对象。
  • props.postType string: 文章类型。
  • props.noticeUI Element: 用于显示通知的 UI。
  • props.noticeOperations Object: 用于管理通知的操作。

返回

  • Element: 要渲染的组件。

PostFeaturedImageCheck

包装器组件，仅当文章类型支持特色图像且主题支持文章缩略图时才渲染其子元素。

参数

  • props Object: 属性。
  • props.children React.ReactNode: 要渲染的子节点。

返回

  • React.ReactNode: 渲染后的组件。

PostFeaturedImagePanel

渲染文章特色图像的面板。

参数

  • props Object: 属性。
  • props.withPanelBody boolean: 是否包含面板主体。默认为 true。

返回

  • React.ReactNode: 要渲染的组件。如果特色图像的编辑器面板被禁用，则返回 Null。

PostFormat

PostFormat 是一个允许更改文章格式同时提供当前文章建议的组件。

用法

<PostFormat />

返回

  • React.ReactNode: 渲染后的 PostFormat 组件。

PostFormatCheck

用于检查是否存在任何文章格式的组件。

参数

  • props Object: 组件属性。
  • props.children React.ReactNode: 要渲染的子元素。

返回

  • React.ReactNode: 渲染后的组件，如果文章格式被禁用则为 null。

PostLastRevision

渲染用于显示文章最后修订版本的组件。

返回

  • React.ReactNode: 渲染后的组件。

PostLastRevisionCheck

包装器组件，如果文章有多个修订版本，则渲染其子元素。

参数

  • props Object: 属性。
  • props.children React.ReactNode: 要渲染的子节点。

返回

  • React.ReactNode: 如果文章有多个修订版本，则渲染子组件，否则为 null。

PostLastRevisionPanel

渲染用于显示文章最后修订版本的面板。

返回

  • React.ReactNode: 渲染后的组件。

PostLockedModal

当另一用户锁定文章进行编辑时显示的模态框组件。该模态框提供有关锁定状态的信息以及接管或退出编辑器的选项。

返回

  • React.ReactNode: 渲染后的 PostLockedModal 组件。

PostPendingStatus

用于显示和切换文章待审状态的组件。

返回

  • React.ReactNode: 渲染后的组件。

PostPendingStatusCheck

此组件检查当前文章的发布状态。如果文章已经发布或者用户没有发布权限，则返回 null。

参数

  • props Object: 组件属性。
  • props.children React.ReactNode: 要渲染的子节点。

返回

  • React.ReactNode: 渲染后的子元素，如果文章已经发布或者用户没有发布权限，则为 null。

PostPingbacks

渲染用于在 WordPress 文章中启用或禁用引用通告和跟踪通告的控件。

PostPreviewButton

渲染一个按钮，该按钮在新窗口或标签页中打开预览，将此过渡消息写入该窗口，然后导航到实际的预览链接。如果文章不可查看，则不渲染该按钮；如果文章不可保存，则禁用该按钮。

参数

  • props Object: 组件属性。
  • props.className string: 按钮的类名。
  • props.textContent string: 按钮的文本内容。
  • props.forceIsAutosaveable boolean: 是否强制自动保存。
  • props.role string: 按钮的 role 属性。
  • props.onPreview Function: 预览事件的回调函数。

返回

  • React.ReactNode: 渲染后的按钮组件。

PostPublishButton

渲染发布按钮。

PostPublishButtonLabel

渲染发布按钮的标签。

返回

  • string: 发布按钮的标签。

PostPublishPanel

渲染用于发布文章的面板。

参数

  • props Object: 组件属性。
  • props.forceIsDirty [boolean]: 是否强制标记为有未保存更改。
  • props.onClose ()=>void: 当面板请求关闭时调用。
  • props.PostPublishExtension [React.ComponentType]: 发布后渲染的组件。
  • props.PrePublishExtension [React.ComponentType]: 发布前渲染的组件。

返回

  • React.JSX.Element: 文章发布面板。

PostSavedState

显示文章是否已保存的组件，并提供保存按钮。

参数

  • props Object: 组件属性。
  • props.forceIsDirty ?boolean: 是否强制将文章标记为有未保存更改。

返回

  • React.ComponentType: 该组件。

PostSchedule

渲染 PostSchedule 组件。它允许用户安排文章的发布时间。

参数

  • props Object: 属性。
  • props.onClose Function: 关闭组件的函数。

返回

  • React.ReactNode: 渲染后的组件。

PostScheduleCheck

包装器组件，仅当文章具有发布操作时才渲染其子元素。

参数

  • props Object: 属性。
  • props.children React.ReactNode: 要渲染的子元素。

返回

  • React.ReactNode: – 要渲染的组件，或者如果没有发布操作则为 null。

PostScheduleLabel

渲染 PostScheduleLabel 组件。

参数

  • props Object: 属性。

返回

  • React.ReactNode: 渲染后的组件。

PostSchedulePanel

渲染 Post Schedule Panel 组件。

返回

  • React.ReactNode: 渲染后的组件。

PostSticky

渲染 PostSticky 组件。它为置顶文章功能提供复选框控件。

返回

  • React.ReactNode: 渲染后的组件。

PostStickyCheck

包装器组件，仅当文章具有置顶操作时才渲染其子元素。

参数

  • props Object: 属性。
  • props.children React.ReactNode: 要渲染的子元素。

返回

  • React.ReactNode: 要渲染的组件，或者如果文章类型不是 ‘post’ 或 hasStickyAction 为 false 则为 null。

PostSwitchToDraftButton

渲染一个按钮组件，允许用户将文章切换为草稿状态。

返回

  • React.ReactNode: 渲染后的组件。

PostSyncStatus

渲染文章的同步状态。

返回

  • React.ReactNode: 渲染后的同步状态组件。

PostTaxonomies

渲染与文章关联的分类法。

参数

  • props Object: 组件属性。
  • props.taxonomyWrapper Function: 每个分类法组件的包装函数。

返回

  • Array: 表示可见分类法的 JSX 元素数组。

PostTaxonomiesCheck

仅在当前文章类型具有分类法时渲染子组件。

参数

  • props Object: 组件属性。
  • props.children React.ReactNode: 要渲染的子组件。

返回

  • React.ReactNode: 渲染后的子组件，或者如果当前文章类型没有分类法则为 null。

PostTaxonomiesFlatTermSelector

渲染扁平术语选择器组件。

参数

  • props Object: 组件属性。
  • props.slug string: 分类法的 slug。

返回

  • React.ReactNode: 渲染后的扁平术语选择器组件。

PostTaxonomiesHierarchicalTermSelector

层级术语选择器。

参数

  • props Object: 组件属性。
  • props.slug string: 分类法 slug。

返回

  • Element: 层级术语选择器组件。

PostTaxonomiesPanel

渲染文章分类法面板的组件。

返回

  • React.ReactNode: 渲染后的组件。

PostTemplatePanel

根据当前编辑器设置和用户权限显示模板控件。

返回

  • React.ReactNode: 渲染后的 PostTemplatePanel 组件。

PostTextEditor

在视觉模式和文本模式下显示 Post Text Editor 及其内容。

返回

  • React.ReactNode: 渲染后的 PostTextEditor 组件。

PostTitle

渲染 PostTitle 组件。

参数

  • _ Object: 未使用的参数。
  • forwardedRef Element: 转发给组件的 ref。

返回

  • React.ReactNode: 渲染后的 PostTitle 组件。

PostTitleRaw

未记录的声明。

PostTrash

在编辑器中显示 Post Trash Button 和确认对话框。

参数

  • An ?{onActionPerformed: Object}: 包含 onActionPerformed 函数的对象。

返回

  • React.ReactNode: 渲染后的 PostTrash 组件。

PostTrashCheck

包装器组件，仅当文章可以被移入回收站时才渲染其子元素。

参数

  • props Object: 组件属性。
  • props.children React.ReactNode: 子组件。

返回

  • React.ReactNode: 渲染后的子组件，或者如果文章不能被移入回收站则为 null。

PostTypeSupportCheck

一个组件，仅在当前编辑器文章类型支持给定的 supportKeys 属性之一时才渲染其自身的子元素。

参数

  • props Object: 属性。
  • props.children React.ReactNode: 如果文章类型支持则渲染的子元素。
  • props.supportKeys (string|string[]): 要测试的键字符串或字符串数组。

返回

  • React.ReactNode: 要渲染的组件。

PostURL

渲染 PostURL 组件。

用法

<PostURL />

参数

  • props { onClose: () => void }: 组件的属性。
  • props.onClose () => void: 当弹出层关闭时执行的回调函数。

返回

  • React.ReactNode: 渲染后的 PostURL 组件。

PostURLCheck

检查文章 URL 是否有效且可见。

参数

  • props Object: 组件属性。
  • props.children React.ReactNode: 子组件。

返回

  • React.ReactNode: 如果文章 URL 有效且可见则返回子组件，否则返回 null。

PostURLLabel

代表文章 URL 的标签组件。

返回

  • React.ReactNode: PostURLLabel 组件。

PostURLPanel

渲染 PostURLPanel 组件。

返回

  • React.ReactNode: 渲染后的 PostURLPanel 组件。

PostVisibility

允许用户设置文章的可见性。

参数

  • props Object: 组件属性。
  • props.onClose Function: 当弹出层关闭时调用的函数。

返回

  • React.ReactNode: 渲染后的组件。

PostVisibilityCheck

确定当前文章是否可以编辑（发布），并将此信息传递给提供的渲染函数。

参数

  • props Object: 组件属性。
  • props.render Function: 用于渲染组件的函数。接收一个包含 canEdit 属性的对象。

返回

  • React.ReactNode: 渲染后的组件。

PostVisibilityLabel

返回当前文章可见性设置的标签。

返回

  • string: 文章可见性标签。

privateApis

未记录的声明。

registerEntityAction

注册一个新的 DataViews 操作。

这是一个实验性 API，可能会发生变化。目前仅在 Gutenberg 插件中可用。

参数

  • kind string: 实体类型。
  • name string: 实体名称。
  • config Action: 操作配置。

registerEntityField

注册一个新的 DataViews 字段。

这是一个实验性 API，可能会发生变化。目前仅在 Gutenberg 插件中可用。

参数

  • kind string: 实体类型。
  • name string: 实体名称。
  • config Field: 字段配置。

RichText

已弃用，自 5.3 版本起，请使用 wp.blockEditor.RichText 代替。

RichTextShortcut

已弃用，自 5.3 版本起，请使用 wp.blockEditor.RichTextShortcut 代替。

RichTextToolbarButton

已弃用，自 5.3 版本起，请使用 wp.blockEditor.RichTextToolbarButton 代替。

ServerSideRender

未记录的声明。

SkipToSelectedBlock

已弃用，自 5.3 版本起，请使用 wp.blockEditor.SkipToSelectedBlock 代替。

store

编辑器命名空间的 Store 定义。

相关

storeConfig

文章编辑器数据存储配置。

相关

TableOfContents

渲染目录组件。

参数

  • props Object: 组件属性。
  • props.hasOutlineItemsDisabled boolean: 是否禁用大纲项。
  • props.repositionDropdown boolean: 是否重新定位下拉菜单。
  • ref Element.ref: 组件的 ref。

返回

  • React.ReactNode: 渲染后的目录组件。

TextEditorGlobalKeyboardShortcuts

处理编辑器的键盘快捷键。

它提供了各种键盘快捷键的功能，例如切换编辑器模式、切换专注模式、撤销/重做、保存文章、切换列表视图以及切换侧边栏。

ThemeSupportCheck

检查当前主题是否支持特定功能，如果支持则渲染子元素。

参数

  • props Object: 组件属性。
  • props.children React.ReactNode: 如果主题支持指定功能，则渲染的子元素。
  • props.supportKeys string|string[]: 要检查的主题支持键（或多个键）。

返回

  • React.ReactNode: 如果主题支持指定功能，则渲染的子元素；否则为 null。

TimeToRead

用于在内容中显示阅读时间的组件。

返回

  • React.ReactNode: 渲染后的 TimeToRead 组件。

transformStyles

未记录的声明。

unregisterEntityAction

注销 DataViews 操作。

这是一个实验性 API，可能会发生变化。目前仅在 Gutenberg 插件中可用。

参数

  • kind string: 实体类型。
  • name string: 实体名称。
  • actionId string: 操作 ID。

unregisterEntityField

注销 DataViews 字段。

这是一个实验性 API，可能会发生变化。目前仅在 Gutenberg 插件中可用。

参数

  • kind string: 实体类型。
  • name string: 实体名称。
  • fieldId string: 字段 ID。

UnsavedChangesWarning

如果在离开编辑器之前存在未保存的更改，则警告用户。兼容文章编辑器和站点编辑器。

返回

  • React.ReactNode: 组件。

URLInput

已弃用，自 5.3 版本起，请使用 wp.blockEditor.URLInput 代替。

URLInputButton

已弃用，自 5.3 版本起，请使用 wp.blockEditor.URLInputButton 代替。

URLPopover

已弃用，自 5.3 版本起，请使用 wp.blockEditor.URLPopover 代替。

useEntitiesSavedStatesIsDirty

未记录的声明。

usePostScheduleLabel

自定义钩子，用于获取文章排期标签。

参数

  • options Object: 钩子的选项。
  • options.full boolean: 是否获取完整标签。默认为 false。

返回

  • string: 文章排期标签。

usePostURLLabel

自定义钩子，用于获取文章 URL 标签。

返回

  • string: 过滤并解码后的文章 URL 标签。

usePostVisibilityLabel

获取当前文章可见性设置的标签。

返回

  • string: 文章可见性标签。

userAutocompleter

用户提及自动完成器。

类型

  • Object

VisualEditorGlobalKeyboardShortcuts

处理编辑器的键盘快捷键。

它提供了各种键盘快捷键的功能，例如切换编辑器模式、切换专注模式、撤销/重做、保存文章、切换列表视图以及切换侧边栏。

Warning

已弃用，自 5.3 版本起，请使用 wp.blockEditor.Warning 代替。

withColorContext

已弃用，自 5.3 版本起，请使用 wp.blockEditor.createCustomColorsHOC 代替。

withColors

已弃用，自 5.3 版本起，请使用 wp.blockEditor.withColors 代替。

withFontSizes

已弃用，自 5.3 版本起，请使用 wp.blockEditor.withFontSizes 代替。

WordCount

渲染文章内容的字数统计。

返回

  • React.ReactNode: 渲染后的 WordCount 组件。

WritingFlow

已弃用，自 5.3 版本起，请使用 wp.blockEditor.WritingFlow 代替。

贡献到此包

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

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