HM Gutenberg Tools 使用指南

项目介绍

HM Gutenberg Tools 是一个专为基于 WordPress 的 Gutenberg 编辑器开发的工具集合。它提供了多种辅助组件与工具，旨在简化开发者在构建自定义块或者增强现有编辑体验时的工作流程。该项目遵循 GPL-2.0 许可证，并且随着持续更新，不断加入了性能提升、安全加固和新功能，如支持国际化（i18n）、组件优化等，确保与最新的 Gutenberg 版本兼容。

项目快速启动

要快速启动并利用 HM Gutenberg Tools，在你的 WordPress 开发环境中进行以下步骤：

1. 安装插件: 如果你是直接在 WordPress 环境中工作，可以通过下载仓库的ZIP文件上传到WordPress的插件管理界面来安装，或者如果你熟悉Git，可以通过命令行操作：

   git clone https://github.com/humanmade/hm-gutenberg-tools.git
   

   然后将克隆下来的目录移动到你的 wp-content/plugins 目录下。

2. 启用开发模式（可选）: 若要访问“HM Gutenberg Tools Dev”区块以查看示例特性，可以在 wp-config.php 文件中添加以下行:

   define('HM_GB_TOOLS_DEV', true);
   

3. 集成至主题或自定义区块: 在你的主题或自定义区块中，确保引入必要的脚本。例如，若要在你的自定义区块中使用此工具包，需执行以下PHP和JavaScript步骤：

   // 在functions.php中加载脚本依赖
   function my_theme_block_scripts() {
       wp_enqueue_script(
           'my-custom-block',
           plugins_url('/my-custom-block.js', __FILE__),
           ['hm-gb-tools-editor'], // 依赖于HM Gutenberg Tools的编辑器组件
           '1.0',
           true
       );
   }
   add_action('enqueue_block_editor_assets', 'my_theme_block_scripts');
   

   // 在my-custom-block.js中直接使用HM Gutenberg Tools提供的功能
   

应用案例和最佳实践

示例一：使用Thumbnails in Post Select

自从v1.4.0版本起，HM Gutenberg Tools支持在文章选择组件中显示缩略图，这使得创建关联帖子类型的区块更加直观。

最佳实践

• 利用HM_GB_TOOLS_DIR和HM_GB_TOOLS_URL常量，当在主题内集成该工具包时，确保正确配置路径，避免资源加载错误。
• 在开发过程中开启HM_GB_TOOLS_DEV以便于快速迭代和调试自定义区块。

典型生态项目

尽管HM Gutenberg Tools本身并不直接构成一个生态系统，但在WordPress社区中，结合其他专注于Gutenberg的插件如Advanced Custom Fields (ACF) Pro或Elementor Pro，可以显著扩展Gutenberg编辑器的能力。开发者通常将此类工具作为基础，构建高度定制化的编辑体验，比如制作复杂的布局设计、实现特定的数据绑定逻辑等。

通过有效利用HM Gutenberg Tools，开发者能够在保持高性能的同时，缩短开发周期，创造出既符合现代Web标准又具有高度用户体验的WordPress内容编辑环境。

---

请注意，根据实际情况调整上述步骤和代码片段，确保它们适应你的具体项目需求。