自定义Gutenberg区块指定图片尺寸功能失效求助

核心问题分析 #

你的自定义Gutenberg区块无法自动应用160×160px的smaller-teaser尺寸，大概率是以下环节出了问题：旧图片未生成新尺寸、onSelectMedia函数未正确调用尺寸获取逻辑、functions.php存在无效代码或合并顺序问题。

分步修复 #

1. 移除functions.php中的无效代码 #

代码第一行的add_image_size( $name, $width, $height, $crop);是函数语法示例，并非实际调用，会引发语法错误，直接删除该行。

2. 确保自定义图片尺寸对所有图片生效 #

add_image_size仅对新增上传的图片生效，已存在的图片需要重新生成缩略图：

• 安装并激活「Regenerate Thumbnails」插件
• 进入后台「工具 → 重新生成缩略图」，点击按钮完成所有图片的尺寸更新

3. 修复onSelectMedia函数（关键） #

你未提供onSelectMedia的完整代码，但这是将选中图片的指定尺寸URL存入区块属性的核心环节。修改代码如下：

const onSelectMedia = (media) => {
  const thumbnailUrl = getThumbnailUrl(media);
  setAttributes({
    mediaId: media.id,
    mediaUrl: thumbnailUrl
  });
};

这段代码会在选中图片时，调用你写的getThumbnailUrl获取smaller-teaser尺寸的URL，再更新区块的mediaUrl属性。

4. 优化functions.php中的尺寸标签合并逻辑 #

当前代码会覆盖默认尺寸的友好标签（比如把「Medium」变成「medium」），调整合并顺序并添加友好标签：

add_image_size('smaller-teaser', 160, 160, true);
add_image_size('Home bottom', 270, 90, false);
add_image_size('Archive thumb', 150, 75, false);
add_image_size('Special', 397, 224, false);
add_image_size( 'Test cropped', 500, 500, false );

function sgr_display_image_size_names_muploader( $sizes ) {
    $new_sizes = array();
    $added_sizes = get_intermediate_image_sizes();
    
    foreach( $added_sizes as $value) {
        // 为自定义尺寸设置友好显示标签
        switch($value) {
            case 'smaller-teaser':
                $new_sizes[$value] = 'Smaller Teaser (160×160)';
                break;
            case 'Home bottom':
                $new_sizes[$value] = 'Home Bottom (270×90)';
                break;
            case 'Archive thumb':
                $new_sizes[$value] = 'Archive Thumbnail (150×75)';
                break;
            case 'Special':
                $new_sizes[$value] = 'Special (397×224)';
                break;
            case 'Test cropped':
                $new_sizes[$value] = 'Test Cropped (500×500)';
                break;
            default:
                $new_sizes[$value] = ucwords(str_replace('-', ' ', $value));
        }
    }

    // 保留默认尺寸的原有标签，将自定义尺寸追加到后面
    return array_merge( $sizes, $new_sizes );
}
add_filter('image_size_names_choose', 'sgr_display_image_size_names_muploader', 11, 1);

5. 验证区块属性定义 #

确保在注册区块时，mediaId和mediaUrl已正确声明为属性：

registerBlockType('nelga/teaser', {
  // ...其他配置
  attributes: {
    mediaId: {
      type: 'number',
      default: 0
    },
    mediaUrl: {
      type: 'string',
      default: ''
    },
    imageLocation: {
      type: 'string',
      default: 'left'
    }
  },
  // ...编辑与保存逻辑
});

验证步骤 #

1. 上传一张新图片到区块，查看控制台的media输出，确认media.sizes.smaller-teaser存在且URL正确
2. 检查页面上的图片是否加载了160×160px的版本

内容的提问来源于stack exchange，提问作者marwa ghanmy