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

我要使用标准WordPress edit和save函数在index.js文件中显示图像：

import image from './image.png';

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

在WordPress Gutenberg编辑器中，图像仅指向图像文件名（./image.png或assets/image.png等），而不是图像在插件目录中的完整路径（即{ {1}}），导致找不到图片。

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

您现在应该看到在块中渲染的静态图像资源。

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

1 个答案: