移除Gutenberg后台图库图片分辨率选择选项的技术求助

问题场景 #

用Gutenberg制作图库时，选择高分辨率尺寸会遇到部分图片无对应选项的情况，导致图库内图片高度参差不齐。打算通过CSS统一图片样式，因此需要移除编辑器里的图片分辨率选择项。此前尝试过theme.json及JS代码，均未实现目标。

现有尝试的问题点 #

theme.json配置错误 #

原配置里的settings.sizes和elements.image.resizeMode并不作用于图库的图片尺寸选择控件，Gutenberg图库的尺寸由imageSize属性控制，配置路径不对，所以没有效果。

JS代码存在缺陷 #

之前的JS仅删除了imageSize属性，但未处理编辑器侧边栏的控制面板，且脚本依赖未添加全，导致代码无法正常运行。

正确解决方案 #

方案1：通过theme.json直接禁用控件 #

在theme.json中对core/gallery块进行配置，禁用图片尺寸的编辑控制，同时设置默认尺寸：

{
  "settings": {
    "blocks": {
      "core/gallery": {
        "attributes": {
          "imageSize": {
            "default": "medium",
            "__experimentalDefaultControls": {
              "imageSize": false
            }
          }
        }
      }
    }
  }
}

方案2：修改JS代码移除控件 #

更新custom-gallery-settings.js，既要移除属性，还要过滤掉编辑器里的尺寸控制面板：

wp.hooks.addFilter(
  'blocks.registerBlockType',
  'custom/remove-gallery-image-sizes',
  (settings, name) => {
    if (name === 'core/gallery') {
      // 删除imageSize属性
      delete settings.attributes.imageSize;
      // 移除侧边栏的尺寸控制项
      if (settings.inspectorControls) {
        settings.inspectorControls = settings.inspectorControls.filter(control => 
          control.name !== 'imageSize'
        );
      }
    }
    return settings;
  }
);

// 或者通过BlockEdit组件过滤移除控件
wp.hooks.addFilter(
  'editor.BlockEdit',
  'custom/hide-gallery-size-control',
  (OriginalBlockEdit, props) => {
    if (props.name !== 'core/gallery') return OriginalBlockEdit;
    
    return (
      <OriginalBlockEdit {...props}>
        {props.children.filter(child => 
          child.props?.label !== '图片尺寸'
        )}
      </OriginalBlockEdit>
    );
  }
);

注意：JS脚本的依赖需包含wp-blocks、wp-element、wp-hooks，确保钩子能正常加载。

方案3：PHP配合加载JS脚本 #

在functions.php中正确注册脚本，添加必要依赖：

function enqueue_gallery_custom_script() {
    wp_enqueue_script(
        'gallery-custom-settings',
        get_template_directory_uri() . '/inc/js/custom-gallery-settings.js',
        array('wp-blocks', 'wp-element', 'wp-hooks'),
        '1.0.0',
        true
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_gallery_custom_script');

最终：CSS统一图片样式 #

无论使用哪种方案，都需要添加CSS保证前端图片高度一致：

.wp-block-gallery .wp-block-image img {
    height: 280px; /* 按需设置固定高度 */
    object-fit: cover; /* 保持图片比例裁剪，避免拉伸变形 */
    width: 100%;
}

验证效果 #

修改后刷新编辑器，侧边栏的图片分辨率选择项应消失；前端图库的图片会统一高度，不再出现参差不齐的问题。

内容的提问来源于stack exchange，提问作者Lino Sousa