介绍
现在，在前端开发一个强大的编辑器，甚至一个简单的表单都不是一项容易的工作。这时 @wordpress/blocks 这个用于构建可重用的 WordPress 块类型的 npm 包可以给我们提供不小的帮助。在这篇文章中，我们将学习如何使用 @wordpress/blocks 包来构建我们自己的 WordPress 块类型，并在编写块代码时利用它强大的功能。
安装
安装 @wordpress/blocks 最简单的方法是使用 npm。假设您已在项目中使用了 npm，请在项目的根目录中打开一个终端并运行下面的命令:
npm install @wordpress/blocks --save
使用
一旦安装了 @wordpress/blocks，您就可以开始构建您自己的块类型了。块类型由两个主要部分组成：编辑和渲染。编辑部分用于构建用户界面，以便用户可以在编辑模式下调整块的选项。渲染部分用于构建最终的块输出。
编辑
构建编辑用户界面的方式有很多种。在本教程中，我们将使用 React 来构建我们的界面。您可以使用其他框架，例如 Angular 或 Vue.js。
下面是一个简单的块类型代码示例，它创建了一个颜色选择器，可用于修改块的选项：
-- -------------------- ---- -------
------ - ----------- - ---- ------------------------
------------------ --------------------- -
-- ---
----- - ----- - -- -
----- - ----------- ------------- - - ------
------ -
---- ----------- --------------- --
------------
------- ---------------- -
------------------ - ----- - --
-------------- - ------ --------- - -
-
--
------
--
--
-- ---
- --在上面的示例代码中，我们引入了 ColorPicker 组件，并将其包含在注册的块编辑函数中。props 对象包括各种信息，例如类名、属性和设置属性。在编辑函数中，我们可以访问并修改这些属性，以反映相应的用户界面的变更。
渲染
在块渲染函数中，我们将使用 React 组件的方式来输出实际块内容。在下面的示例中，我们将创建一个简单的示例块类型来演示渲染函数。
-- -------------------- ---- -------
------ - ----------------- - ---- --------------------
------------------ --------------------- -
------ --- -------
----- ---------
--------- ---------
----- -- -- -
------ -
-------- ---- --- ---- -------------
--
--
----- -- -- -
------ -
-------- ---- --- ---- -------------
--
--
- --在上面的示例代码中，我们创建了一个可以在编辑和保存模式下显示 "Hello from the ... function!" 文本的块类型。在 "edit" 函数中，我们返回包含文本的段落元素，而在 "save" 函数中，我们返回相同的内容。在编辑模式下，这个块将显示 "Hello from the edit function!"，而在保存模式下，它将显示 "Hello from the save function!"。
块注册
在上面的两个示例中，我们都使用了 registerBlockType 函数来注册我们的块类型。这个函数通过接受一个对象来注册块，这个对象包括我们要创建的块类型的各种信息，例如名称、分类和编辑/保存函数等。
registerBlockType( 'my-plugin/my-block', {
title: 'My Block',
icon: 'smiley',
category: 'common',
// ...
} );在上面的示例中，我们使用了我们的块类型名称 my-plugin/my-block 来注册一个新的块类型。我们还指定了块类型的标题、图标和分类。
结论
总的来说，@wordpress/blocks 包提供了一个庞大、灵活、易于使用的 API，可以用于构建自定义 WordPress 块类型。上面提到的示例只是冰山一角，您可以访问 @wordpress/blocks 官方文档以获得更多信息和示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb46cb5cbfe1ea0611281