如何在WordPress新版Gutenberg编辑器中使用<picture>标签？

我太懂这种头疼的感觉了——好不容易折腾完旧编辑器的图片输出适配，结果Gutenberg一来直接把之前的修改全盘覆盖，新文章的布局眼看就要崩。别慌，针对Gutenberg的图片输出逻辑，我们可以用**自定义块过滤器（Block Filters）**来拦截并替换它默认的HTML，确保新插入的图片自动生成你需要的<picture>标签，完美衔接之前的修改。

具体实现方案 #

1. 用PHP拦截Gutenberg图片块的渲染 #

在你的主题functions.php文件里添加以下代码，专门针对Gutenberg的核心图片块做输出替换：

function custom_gutenberg_picture_render($block_content, $block) {
    // 只处理Gutenberg的核心图片块
    if ($block['blockName'] !== 'core/image') {
        return $block_content;
    }

    // 提取图片的关键属性
    $image_id = $block['attrs']['id'];
    $alt_text = $block['attrs']['alt'] ?? '';
    // 获取不同尺寸的图片URL，可根据需求调整尺寸名称
    $mobile_url = wp_get_attachment_image_url($image_id, 'medium');
    $tablet_url = wp_get_attachment_image_url($image_id, 'large');
    $desktop_url = wp_get_attachment_image_url($image_id, 'full');

    // 构建响应式<picture>标签的HTML
    $picture_html = sprintf(
        '<picture>
            <source media="(max-width: 767px)" srcset="%s">
            <source media="(max-width: 1023px)" srcset="%s">
            <img src="%s" alt="%s" loading="lazy" decoding="async">
        </picture>',
        esc_url($mobile_url),
        esc_url($tablet_url),
        esc_url($desktop_url),
        esc_attr($alt_text)
    );

    return $picture_html;
}
add_filter('render_block', 'custom_gutenberg_picture_render', 10, 2);

2. 根据需求调整细节 #

• 你可以修改代码里的断点（767px、1023px）来匹配客户网站的响应式规则；
• 图片尺寸（medium、large、full）也可以换成你自定义的图片尺寸名称；
• 如果需要支持WebP格式，还可以在<source>标签里添加type="image/webp"属性，同时生成对应格式的图片URL。

3. 兼容旧文章 #

之前用旧编辑器发布的文章，你之前的修改依然会生效；新用Gutenberg插入的图片，会自动套用新的<picture>标签输出，完全不会破坏现有布局。

要是你需要更灵活的控制（比如让客户在编辑器里自定义图片的响应式规则），还可以给Gutenberg图片块添加自定义设置面板，但上面的基础方案已经能解决你当前的核心问题了。

内容的提问来源于stack exchange，提问作者Goran Tesic