README

内容

• 简介
• 覆盖默认的 twig 模板
• 任务自动化
• Composer
• 代码规范
• 贡献

简介

此 WordPress 插件提供与 Shortcake UI 插件一起使用的必要块。

覆盖块的默认 twig 模板

您可以通过在子主题的子目录 /templates/plugins/planet4-plugin-gutenberg-blocks/includes/ 中包含一个同名的文件来覆盖默认的块 twig 模板。

您想知道如何开发一个新的块吗？

1. 在 classes/controller/blocks 目录中创建一个新的控制器类，该类扩展了 Controller。类名应遵循命名约定，例如 Blockname_Controller，其文件名应为 class-blockname-controller.php。

2. 实现其父类的两个抽象方法。在 prepare_fields() 方法中，您需要定义块的字段，在 prepare_data() 方法中，您需要准备用于渲染的数据。

3. 在 includes/blocks 目录中创建用于渲染块的模板文件。如果文件名为 blockname.twig，则需要将 BLOCK_NAME 常量设置为 'blockname'。它也适用于 html 模板。只需将 'php' 作为 block() 方法的第三个参数添加即可。

4. 将您的新类名添加到插件主文件中 Loader 函数参数的数组中。

5. 最后，在提交之前，执行 composer update --no-dev 和 composer dump-autoload --optimize 以将您的新类添加到 composer 的自动加载中。

任务自动化

我们使用 gulp 作为本地开发的自动化工具。

可用任务

• gulp lint_css '检查 css/sass 语法错误'
• gulp lint_js '检查 js 语法错误'
• gulp sass '合并/编译 sass 文件为单个压缩样式表'
• gulp sass_admin '合并/编译管理员的 sass 文件为单个压缩样式表'
• gulp uglify '合并/压缩 js 文件为单个压缩 js 文件'
• gulp uglify_admin '合并/压缩管理员的 js 文件为单个压缩 js 文件'
• gulp watch '监视 js 或 scss 的更改并运行压缩任务'
• gulp git_hooks '将存储库的 git 钩子复制到本地 git 存储库'

Composer

我们使用 composer 作为此插件的依赖管理器。要安装依赖项，请运行

$ composer install

代码规范

我们遵循 WordPress 编码规范

我们使用自定义的 php codesniffer 规则集，它增加了 WordPress-Core、WordPress-Docs 和 WordPress-Extra 规则集的一些规则。

WordPress 编码标准规则集

WordPress 编码标准 Wiki

运行 php codesniffer

$ vendor/bin/phpcs 或 $ composer sniffs

运行 php 代码美化器和修复器

$ vendor/bin/phpcbf 或 $ composer fixes

贡献

请阅读 贡献指南。