简介
@wordpress/block-editor 是 WordPress 提供的一个 NPM 包。该包包括了 WordPress 可视化编辑器使用到的所有核心组件，比如区块、工具栏和侧边栏等等。使用该 NPM 包，你可以在你的项目中轻松使用 WordPress 编辑器的功能。
在本篇文章中，我们将详细介绍如何使用 @wordpress/block-editor 包，以及如何轻松地在你的项目中使用 WordPress 编辑器。
开始
安装 @wordpress/block-editor
首先，我们需要在我们的项目中安装 @wordpress/block-editor。可以通过运行以下命令来安装它：
npm install --save @wordpress/block-editor
引入 @wordpress/block-editor
导入 @wordpress/block-editor 中的某些组件或方法之前，你应该在你的代码中先引入这个包。以 React 为例：
import { registerBlockType, BlockControls } from '@wordpress/block-editor';区块
区块是 WordPress 编辑器的核心组件之一。它定义了一种可视化的方式来创建和编辑内容，比如文本、图像等等。每个区块都有自己的编辑器，用户可以在编辑器中编辑区块内容。
注册区块
要注册一个新的区块，你可以使用 registerBlockType 方法，如下所示：
-- -------------------- ---- -------
------ - ----------------- - ---- --------------------------
------------------ --------------------- -
------ --- -------
----- ---------
--------- ---------
----- - ----- - -- -
------ ---------- -------------
--
----- - ----- - -- -
------ ---------- -------------
--
- --参数
title：区块的名称。icon：区块的图标。category：区块的分类。edit：编辑区块时所显示的内容。save：保存区块时所显示的内容。
工具栏
工具栏是 WordPress 编辑器的另一个核心组件。它提供了一组用于处理区块和内容的工具。
注册工具栏
要注册一个新的工具栏，你可以使用 BlockControls，如下所示：
-- -------------------- ---- -------
------ - -------------- ---------------- - ---- --------------------------
----- ----------- - ------- -- -
------ -
-----
---------------
-----------------
----------------------------------
--------------------- -- -
--------------------- --------- ---
--
--
----------------
---- -------- ---------- -------------------------- -------- ------------
------
--
--参数
BlockControls：用于显示工具栏。AlignmentToolbar：用于设置区块的对齐方式。props.attributes.alignment：对齐方式的属性值。props.setAttributes({ alignment })：用于更新对齐方式的属性值。
侧边栏
侧边栏是 WordPress 编辑器的另一个核心组件。它提供了一组用于处理区块和内容的侧边栏选项。
注册侧边栏
要注册一个新的侧边栏，你可以使用 InspectorControls，如下所示：
-- -------------------- ---- -------
------ - ------------------ ---------- ------------- - ---- --------------------------
----- ----------- - ------- -- -
------ -
-----
-------------------
---------- ---------- -----------
--------------
---------- --------
---------------------------------
------------ -- -
--------------------- ------- ------------------------ ---
--
--
------------
--------------------
---------- ------------
------
--
-参数
InspectorControls：用于显示侧边栏。PanelBody：用于创建侧边栏的内容面板。ToggleControl：用于创建显示开关选项的控件。props.attributes.toggle：开关选项的属性值。props.setAttributes({ toggle })：用于更新开关选项的属性值。
总结
在本篇文章中，我们介绍了如何使用 @wordpress/block-editor 包，并详细介绍了如何使用三种核心组件：区块、工具栏和侧边栏。当然，这还只是冰山一角。通过深入学习这些组件，你可以创建更加高级和复杂的 WordPress 编辑器插件。
示例代码：
-- -------------------- ---- -------
------ - ------------------ -------------- ---------------- - ---- --------------------------
------ - ------------------ ---------- ------------- - ---- --------------------------
------------------ --------------------- -
------ --- -------
----- ---------
--------- ---------
----------- -
---------- -
----- ---------
-------- -------
--
------- -
----- ----------
-------- -----
--
--
----- - ----- - -- -
------ -
-----
---------------
-----------------
----------------------------------
--------------------- -- -
--------------------- --------- ---
--
--
----------------
-------------------
---------- ---------- -----------
--------------
---------- --------
---------------------------------
------------ -- -
--------------------- ------- ------------------------ ---
--
--
------------
--------------------
---- -------- ---------- -------------------------- -------- ------------
------
--
--
----- - ----- - -- -
------ -
---- -------- ---------- -------------------------- -------- ------------
--
--
- --来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2e20eb3b0ab45f74a8bc21