在 WordPress 的新版本中，内容编辑器已经升级为 Gutenberg 编辑器，与此同时，@wordpress/block-library 这个 npm 包也成为了 WordPress 的重要组成部分。该包提供了一批丰富的可重复使用的区块，让开发者可以轻松地添加到自己的网站中。本文将详细介绍 @wordpress/block-library 的使用方法。
安装和导入
首先，我们需要安装 @wordpress/block-library。可以使用 npm 安装：
npm install @wordpress/block-library
接下来，我们需要将其导入到我们的项目中。在大多数情况下，我们可以使用以下语句：
import "@wordpress/block-library";
这将导入所有的区块。
当然，我们还可以只导入一部分区块，使用以下语句：
import { Paragraph, Heading } from "@wordpress/block-library";这样，我们只会导入第一个参数和第二个参数这两种区块。
使用示例
下面我们来看看如何在 WordPress 主题中使用 @wordpress/block-library。
首先，创建一个基本的 Gutenberg 区块的 PHP 模板文件，名为 CustomBlockTemplate.php：
-- -------------------- ---- -------
-----
---
- ------ ----- ---------
-
- -------- -------------------
--
--
---- ---------------------
-- --------------------------------- ---- --------- -------------------- -- ------
---- ----------------------------------- ---- --------- --------
------接下来，我们需要创建对应的 JavaScript 文件 CustomBlock.js：
-- -------------------- ---- -------
---
- ------ ------
-
- -------- -----------
--
------ - ----------------- - ---- --------------------
------ - -------- - ---- --------------------------
------ - --------- - ---- ---------------------------
------------------ ----------------------- -
------ ------- -------
----- ---------
--------- ---------
----------- -
------ -
----- ---------
------- -------
--------- ----------------------
-
--
----- - ----------- -------------- --------- - - -
----- - ----- - - -----------
----- ----------------- - - -------- - -- -
-------------- - ------ -------- - --
--
------ -
---- ----------- --------- --
-----------
---------
-----------
------- ----- -
---------- ----------------- -
------------------ ------
--
------------
------
--
--
----- - ---------- - - -
----- - ----- - - -----------
------ -
---- -------------------------
-- --------------------------------- ----- -----
------
--
-
- --这个文件导入了注册区块所需的所有必要组件，并导出了一个注册区块的函数。
接下来，我们需要将这些文件加入到 WordPress 主题中。在需要时，请将以下 PHP 代码添加到您的主题函数文件的底部：
-- -------------------- ---- -------
-------- ----------------------- -
-------------------
---------------
---------------------------- - ---------------------------------------
------ ------------ ------------ ---------------- --------- --
---------- ------------------------ - -------------------------------------- --
----
--
--------------------
-----------------------
------
--------------- -- ---------------
----------------- -- --------------------------------
-
--
-
----------- ------- ----------------------- --
-------- ------------------------------- ------------ -------- - -
-----------
------- --------------------------
------ ---------------
-这个 PHP 代码片段将我们的组件注册为 Gutenberg 区块，并将 JavaScript 文件作为其编辑器脚本，并将 PHP 模板文件指定为其呈现回调函数。
现在，我们就可以在 Gutenberg 编辑器中使用我们的自定义区块了。
结论
@wordpress/block-library 提供了许多丰富的区块，使开发者能够轻松地在 WordPress 主题中使用。本文讲解了如何安装和导入 @wordpress/block-library，以及如何使用示例来展示如何注册自定义区块。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb46bb5cbfe1ea061127e