本文旨在帮助开发者解决 WordPress 自定义区块在区块插入器中不显示的问题。通过分析常见原因和提供实际案例，我们将重点讲解路径配置错误这一关键因素，并提供相应的解决方案，确保你的自定义区块能够成功加载并使用。
问题诊断与排查
当你在 WordPress 中创建自定义区块后，却发现它并没有出现在区块插入器中，这通常让人感到困惑。在深入研究代码之前，我们需要先进行一些基础的排查，确保问题不在于一些常见的疏忽：
- 插件激活状态: 确认你的插件已经正确激活。这是最基本，但也最容易被忽略的一点。
- 主题兼容性: 尝试切换到 WordPress 默认主题（如 Twenty Twenty-Three）来排除主题冲突的可能性。
- JavaScript 错误: 打开浏览器的开发者工具（通常按 F12 键），查看控制台是否有 JavaScript 错误。这些错误可能会阻止区块的注册。
- 缓存问题: 清除浏览器缓存和 WordPress 缓存（如果使用了缓存插件），然后重新加载页面。
- 代码检查: 仔细检查你的 JavaScript 和 PHP 代码，确保没有拼写错误或语法错误。
如果经过以上排查，问题依然存在，那么很可能问题出在区块注册的代码上。
关键：正确的路径配置
在自定义区块的注册过程中，一个常见的错误来源是 JavaScript 文件的路径配置不正确。WordPress 需要知道如何找到你的区块 JavaScript 文件，以便在编辑器中加载它。
在问题描述中，开发者使用了 WP_PLUGIN_DIR 来构建 JavaScript 文件的路径：
WP_PLUGIN_DIR . '/ghs-custom-blocks/assets/js/landing-page-block.js'
虽然 WP_PLUGIN_DIR 提供了插件目录的绝对路径，但它并不总是适用于引用插件目录中的资源。更可靠的方法是使用 plugin_dir_url(__FILE__) 函数。plugin_dir_url(__FILE__) 返回当前插件文件的 URL，这通常是构建相对于插件目录的资源 URL 的最佳方式。
解决方案：
芒果系统GSHOP 纯静态商城系统，你还在为商城的优化而苦恼？GSHOP是全站纯静态商城系统，一键seo优化功能解决seo问题，自定义URL链接解决商城同质化问题；多页面显示：动态页、伪静态页面、纯静态页面增加收录，提升网站权重，提升流量等。安全稳定、功能强大的商城系统。1、芒果商城系统基于 php5.0开发，企业级应用。2、产品功能Ajax设计，响应速度更快，购物体验更好。3、全新密钥存放机制，
将代码修改为：
plugin_dir_url(__FILE__) . 'assets/js/landing-page-block.js'
完整示例代码：
add_action('init', function() {
$asset_file = include( plugin_dir_path(__FILE__) . 'assets/js/landing-page-block.asset.php');
wp_register_script('ghs-landing-page',
plugin_dir_url(__FILE__) . 'assets/js/landing-page-block.js',
$asset_file['dependencies'],
$asset_file['version']);
register_block_type('ghs/landing-page-block', [
'api_version' => 2,
'editor_script' => 'ghs-landing-page',
]);
});解释：
- plugin_dir_path(__FILE__)：获取当前文件（通常是你的插件主文件）所在的目录的绝对路径。
- plugin_dir_url(__FILE__)：获取当前文件所在的目录的 URL。
- 'assets/js/landing-page-block.js'：相对于插件目录的 JavaScript 文件路径。
通过使用 plugin_dir_url(__FILE__)，你可以确保 WordPress 能够正确地找到你的 JavaScript 文件，从而使你的自定义区块能够成功加载到区块插入器中。
其他注意事项
- block.json 文件: 从 WordPress 5.8 开始，推荐使用 block.json 文件来定义你的区块。这是一种更现代、更简洁的方式来注册区块，并且可以避免一些常见的错误。
- wp-scripts 构建工具: 使用 @wordpress/scripts 包提供的 wp-scripts 构建工具可以简化 JavaScript 代码的编译和打包过程。
- 调试技巧: 在开发过程中，可以使用 console.log() 在 JavaScript 代码中输出调试信息，或者使用 WordPress 的 WP_DEBUG 模式来查看更详细的错误信息。
总结
自定义区块不显示的问题往往是由于路径配置错误引起的。通过使用 plugin_dir_url(__FILE__) 函数，可以确保 WordPress 能够正确地找到你的 JavaScript 文件。同时，注意其他常见的错误，例如插件激活状态、主题兼容性、JavaScript 错误和缓存问题。通过仔细排查和调试，你一定能够成功解决这个问题，并创建出令人满意的 WordPress 自定义区块。
