在 WordPress Gutenberg Block Plugin 中包含图像资产

Question

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

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

但是，当我尝试从我的 Block 的主 JS 文件中使用我的图像资产时，我无法找到一种方法来访问我在 WordPress 服务器上运行的图像的完整 URL 路径，该服务器目前在本地主机上的 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 文件是我想要显示图像的地方，使用标准的 WordPressedit和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）中的完整路径，这会导致找不到图像。

Answer 1

我仍在研究是否有官方的古腾堡方式来做到这一点，但现在我已经在我的插件中使用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} />

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