WebDevStudios 于周二向公众发布了自定义块脚手架工具。它是 2 月份与 Gutenberg 7.4 一起推出的核心 WordPress 脚本的一个分支。目标是允许插件开发人员开始构建,而无需构建最基本的块所需的所有繁琐设置。

该脚本作为名为@webdevstudios/block 的 npm 包提供。核心包和核心包的区别之一是增加了 WebDevStudios 的自定义 CSS、JavaScript 和 PHP 编码标准。它利用 WDS Block Starter 项目来构建初始块插件。该软件包还包括对 Sass、PostCSS、Webpack、Babel 和 ESLint 的支持。

一个主要区别是 WDS 的块脚手架工具需要一个 PHP 名称空间,'WebDevStudios 的后端工程师 Michael Joseph Panaga 说。 “WP Core 在其脚手架工具上确实有一个 --namespace 选项,但它仅用作块的内部命名空间,而不是 PHP 的。”

Panaga 还指出,从中自定义构建设置并不容易核心的发射器。他说:“在 WDS 中,webpack.config.js 在这里,这使得开发人员可以轻松地做他们想做的事情。”

这个脚本主要用于构建单体插件,而不是构建现有插件中的块。理想情况下,从长远来看,这将是许多插件开发人员采用的方法,尤其是当块目录成为 WordPress 更重要的部分时。

“WordPress 区块开发可能令人生畏,”Panaga 在一份声明中写道。 /p>

该工具需要最新版本的 Node 和 npm 才能开始使用,大多数 WordPress 开发人员的开发环境中都应该有。从命令行,开发人员只需移动到他们的 wp-content/plugins 文件夹并运行以下命令:

npm init @webdevstudios/block [Namespace]/[BlockName]

这将根据 BlockName 输入创建一个有效的插件。它将附带所有必要的文件和文件夹,以直接进行开发。默认情况下,该插件将创建本质上是自定义段落块的内容作为起点。

安装后创建的插件文件夹和文件。

这个包包括一些开箱即用的命令,开发人员可以使用这些命令来构建他们的自定义块:

  • npm run start – 在开发中进行更改时自动构建和编译文件。
  • npm run build – 构建最终的生产代码。
  • npm run lint:css – 对插件的 CSS 文件运行 linting。
  • npm run lint:js – 对插件的 JavaScript 文件运行 linting。
  • npm run lint:php – 对插件的 PHP 文件运行 linting。

该脚本易于使用,即使对于新手块开发人员也是如此。让它安装必要的依赖项并开始构建过程几分钟后,我就启动并运行了新的“Tavern Box”模块。我打开了代码编辑器,进行了一些外观上的更改,并在编辑器中对其进行了测试。

在编辑器中测试自定义块。

随着 WordPress 社区现在使用各种工具来启动块构建过程,插件开发人员没有理由不探索新的块创意。我什至可能会尝试做一些比本次测试中运行的基本彩色框更复杂的事情(请随意在评论中提出一些想法)。

喜欢这样:

喜欢正在加载...

资源