前言
Laravel Mix 是一个用于定义 Webpack 构建步骤的优雅、流畅的 API。而 laravel-mix-wp-blocks 这个 npm 包则为开发者提供了在 WordPress 中构建自定义区块的能力。在这篇文章中，我们将会学习如何使用 laravel-mix-wp-blocks 来开发自定义 WordPress 区块。
环境配置
在开始使用 laravel-mix-wp-blocks 之前，您需要安装以下软件：
- Node.js
- npm
- WordPress
- Gutenberg
安装和配置 laravel-mix-wp-blocks
在您的 WordPress 项目中执行以下命令，安装 laravel-mix-wp-blocks 依赖：
npm i laravel-mix laravel-mix-wp-blocks --save-dev
在您的 WordPress 项目的根目录创建
webpack.mix.js文件，并编写以下内容：-- -------------------- ---- ------- ----- --- - ----------------------- ----- - -------- - - --------------------------------- ----- --------------- - ------------------------- ----- ---------------- - -------------------------- ---------------------------- ------------------------- ----------------- --------- ---------
上述代码指定了存放区块样式和 JavaScript 的路径，以及区块的名称和版本号。
在您的主题或插件中创建
blocks文件夹，并在其中创建一个包含以下文件的子文件夹my-block：├── blocks │ └── my-block │ ├── block.json │ ├── editor.scss │ ├── editor.js │ ├── style.scss │ └── script.js
block.json文件用于指定区块名称、描述、类名等信息，而editor.scss和style.scss则分别用于定义编辑器和前端区块的样式。editor.js和script.js则分别用于定义编辑器和前端区块的 JavaScript。
构建自定义 WordPress 区块
现在，您已经完成了 laravel-mix-wp-blocks 的配置。接下来，我们将展示如何构建自定义 WordPress 区块。
定义区块
在 my-block 文件夹中，创建 block.json 文件，并编写以下内容：
-- -------------------- ---- -------
-
-------- --- -------
-------------- ----- -- -- ------ --------
----------- -------
------- -------------------
----------- - ----- -------- -------- --
----------- -
-------- -----
----------- -----
--------- ----
--
------------ ----------------
-上述代码指定了区块的名称、描述、类别、图标、关键字、支持的选项以及 CSS 类名。
定义样式
在 my-block 文件夹中，创建 editor.scss 文件，并编写以下内容：
@import "../../../../node_modules/@wordpress/edit-post/style.scss";
.wp-block-my-block-class {
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ddd;
}上述代码指定了编辑器中 my-block 区块的样式。
在同一文件夹中，创建 style.scss 文件，并编写以下内容：
.wp-block-my-block-class {
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ddd;
}上述代码指定了前端中 my-block 区块的样式。
定义 JavaScript
在 my-block 文件夹中，创建 editor.js 文件，并编写以下内容：
-- -------------------- ---- -------
------------------------------------------------- -
------ --- -------
----- -------------------
--------- ---------
--------- - ----- -------- -------- --
----------- -
-------- -
----- ---------
-------- ------ ------
-
--
----- ------- -- -
----- - ----------- - ------- -- ------------- - - ------
------ -------------------------
------
- ---------- --------------- --
-------------------------
-----
-----
--- ------
--
-------------------------
-----------
- ------ -------- --------- ------- -- --------------- -------- ------------------ -- -
-
--
--
----- ------- -- -
----- - ----------- - ------- - - - ------
------ -------------------------
------
- ---------- --------------- --
-------------------------
-----
-----
--- ------
--
-------------------------
----
-----
-------
-
--
-
---上述代码定义了 my-block 区块的编辑器和前端 JavaScript。
在同一文件夹中，创建 script.js 文件，并编写以下内容：
-- -------------------- ---- -------
------------------------------------------------- -
------ --- -------
----- -------------------
--------- ---------
--------- - ----- -------- -------- --
----------- -
-------- -
----- ---------
-------- ------ ------
-
--
----- ------- -- -
----- - ----------- - ------- - - - ------
------ -------------------------
------
- ---------- --------------- --
-------------------------
-----
-----
--- ------
--
-------------------------
----
-----
-------
-
--
--
----- ------- -- -
----- - ----------- - ------- - - - ------
------ -------------------------
------
- ---------- --------------- --
-------------------------
-----
-----
--- ------
--
-------------------------
----
-----
-------
-
--
-
---上述代码定义了 my-block 区块在前端的 JavaScript。
构建区块
在命令行中执行以下命令，构建您的 WordPress 区块：
npm run dev
执行完以上命令后，您将在 my-block 文件夹中看到生成的文件 style.css、script.js、editor.css 和 editor.js。将这些文件上传到您的 WordPress 项目中，并在 Gutenberg 编辑器中引入 my-block 区块。
结语
laravel-mix-wp-blocks 提供了一个优雅且流畅的 API，让开发者可以轻松地构建自定义 WordPress 区块。使用本文中介绍的步骤，您可以快速地上手 laravel-mix-wp-blocks，并创建自己的 WordPress 区块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067359890c4f7277583e05