解决 WordPress 自定义区块不显示问题

本文旨在帮助开发者解决 WordPress 自定义区块在区块插入器中不显示的问题。通过分析常见原因和提供实际案例，我们将重点讲解路径配置错误这一关键因素，并提供相应的解决方案，确保你的自定义区块能够成功加载并使用。

问题诊断与排查

当你在 WordPress 中创建自定义区块后，却发现它并没有出现在区块插入器中，这通常让人感到困惑。在深入研究代码之前，我们需要先进行一些基础的排查，确保问题不在于一些常见的疏忽：

1. 插件激活状态: 确认你的插件已经正确激活。这是最基本，但也最容易被忽略的一点。
2. 主题兼容性: 尝试切换到 WordPress 默认主题（如 Twenty Twenty-Three）来排除主题冲突的可能性。
3. JavaScript 错误: 打开浏览器的开发者工具（通常按 F12 键），查看控制台是否有 JavaScript 错误。这些错误可能会阻止区块的注册。
4. 缓存问题: 清除浏览器缓存和 WordPress 缓存（如果使用了缓存插件），然后重新加载页面。
5. 代码检查: 仔细检查你的 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 的最佳方式。

解决方案：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

将代码修改为：

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 自定义区块。

以上就是解决 WordPress 自定义区块不显示问题的详细内容，更多请关注php中文网其它相关文章！