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

Question

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

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

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

我希望找到一个 WordPress 方法 return 我的插件目录的路径，并用它来指向图像资产，不管它们是如何捆绑的，但我一直没能找到文档中的解决方案。

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

function _get_plugin_directory() {
  return __DIR__;
}

这似乎有帮助，但我不知道是否可以将 returned 插件路径传递到我的 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) 导致找不到图像。

Answer 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} />

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

Answer 2

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

来自 WordPress 文档

Though localization is the primary use, it (wp_localize_script) was often used to pass generic data from PHP to JavaScript, because it was originally the only official way to do that. wp_add_inline_script() was introduced in WordPress Version 4.5, and is now the best practice for that use case. wp_localize_script() should only be used when you actually want to localize strings.

这是我使用 wp_add_inline_script 将图像 url 传递到自定义 Gutenberg 块中的代码。根据示例，下面的代码放在 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

Answer 3

在这里为登陆这里的任何人弹出这个：

您可以使用 webpack 直接将图像导入 React 应用程序。

因此，假设您正在使用某种 webpack 配置（@wordpress/scripts、create-guten-block 或您自己的自定义设置），您只需像这样将图像导入到块文件中，假设您的图像与要导入的文件位于同一文件夹中：

import image1 from "./image1.jpg"

然后在任何需要的地方像 URL 一样使用它：

<img src={image1} alt="my image" />

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

Include image assets in a WordPress Gutenberg Block Plugin

wordpress

webpack

wordpress-gutenberg