在 WordPress Gutenberg Block 插件中包含图像资产答案

【问题标题】：Include image assets in a WordPress Gutenberg Block Plugin在 WordPress Gutenberg Block 插件中包含图像资产
【发布时间】：2019-12-09 17:43:46
【问题描述】：

我正在创建一个自定义 WordPress Gutenberg 块，并且我想使用我的插件文件夹中的图像资产（PNG、JPG），以便在 Gutenberg 编辑器和渲染页面上显示。

我正在使用 Webpack 为 JS 和 SCSS 捆绑我的文件。我尝试添加 webpack 图像加载器，它将图像保存到我的主插件目录中的“资产”文件夹中。

但是，当我尝试使用 Block 的主 JS 文件中的图像资产时，我无法找到一种方法来访问在我的 WordPress 服务器上运行的图像的完整 URL 路径，该服务器目前在 localhost 的 docker 容器中运行。

我希望找到一个 WordPress 方法来返回我的插件目录的路径，并使用它来指向图像资产，无论它们是如何捆绑的，但我无法在文档中找到解决方案。

可以通过 WordPress 的内置函数使用 PHP 获取插件目录：

function _get_plugin_directory() {
  return __DIR__;
}

这似乎有帮助，但是我不知道是否可以将返回的插件路径传递到我的 JS 文件中。

我的插件结构如下：

/assets // generated by Webpack
  - image.png
  - main.js
/blocks
  /block-example
    - image.png // <-- My image asset
    - index.js // <-- I want to use image.png here
  - index.js // loads in my block
blocks.php

index.js 文件是我想要显示图像的位置，使用标准的 WordPress edit 和 save 函数：

import image from './image.png';

edit: props => {
  ...
  <img src={image} />
}

在 WordPress Gutenberg 编辑器中，图像仅指向图像文件名（./image.png 或 assets/image.png 等），而不是它位于插件目录中的图像的完整路径（即 localhost:8080/plugins/my-blocks/assets/image.png）导致找不到图片。

【问题讨论】：

标签： wordpress webpack wordpress-gutenberg

【解决方案1】：

我仍在研究是否有官方的 Gutenberg 方法可以做到这一点，但现在我已经在我的插件中使用 wp_localize_script。

这可以将数据从 PHP 传递到排队的 Javascript 中，这样通常只能在 PHP 中访问的数据也可以在 Javascript 中访问。

因此（可能在您的示例中的 blocks.php 内部），您将有类似的内容：

wp_enqueue_script(
    'my-main-script',
    plugins_url( 'assets/main.js', __FILE__ ),
    array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'wp-components' ),
    '20190804',
    true
);

然后，您可以将要传递给 JS 的任何值加入队列：

wp_localize_script(
    'my-main-script',
    'js_data',
    array(
        'my_image_url' => plugins_url( 'blocks/block-example/image.png', __FILE__ )
    )
);

这将确保图像路径可供 javascript 访问。然后从你的块本身中，你可以引用它：

<img src={js_data.my_image_url} />

您现在应该会看到在您的块中呈现的静态图像资产。

【讨论】：

【解决方案2】：

您也可以使用较新的 wp_add_inline_script 函数来实现相同的目标。

来自 WordPress 文档

虽然本地化是主要用途，但它 (wp_localize_script) 经常用于将通用数据从 PHP 传递到 JavaScript，因为它最初是唯一的官方方式。 wp_add_inline_script() 是在 WordPress 4.5 版中引入的，现在是该用例的最佳实践。 wp_localize_script() 只应在您真正想要本地化字符串时使用。

这是我使用wp_add_inline_script 将图像网址传递到自定义古腾堡块的代码。以下代码按照示例放在blocks.php 中。

在wp_enqueue_script 代码示例中，_get_plugin_url() 是我自己的自定义函数，用于检索我的插件的路径。

wp_enqueue_script(
    'my-main-script',
    _get_plugin_url() . $block_path,
    [],
    filemtime( _get_plugin_directory() . $block_path )
);

我为我希望传入的数据设置了一个数组，例如

$js_data = array(
    'image_url' => _get_plugin_url() . '/assets/images/BACK.png',
);

然后使用wp_add_inline_script函数

wp_add_inline_script(
    'my-main-script',
    'var jsData = ' . wp_json_encode( $js_data ),
    'before'
);

在注册块并定义其行为的/block-example/index.js 文件中，我可以像这样访问该变量：

jsData.image_url

【讨论】：