如何修改Gutenberg自定义块的悬浮预览窗口尺寸？

默认块插入面板的悬浮预览用的是BlockPreview组件，内部iframe默认视口宽度较窄，会自动触发响应式样式的移动端断点，你可以通过以下两种官方支持的方式调整预览视口宽度，让预览加载桌面端横向布局样式：

• 方法1：注册块时直接配置预览视口宽度
  在调用registerBlockType注册自定义块的配置项中，添加example.viewportWidth字段，指定你需要的桌面端触发宽度即可，配置后默认悬浮预览会直接按该宽度渲染内部内容，自动等比缩放适配外层悬浮容器，不会出现布局溢出：

  import { registerBlockType } from '@wordpress/blocks';
  
  registerBlockType( 'your-block-slug/your-block-name', {
    // 原有块配置：title、category、edit、save等
    example: {
      viewportWidth: 1280, // 填入你项目桌面端样式的最小触发宽度，比如1200、1280均可
      // 可按需配置预览用的默认块属性
      attributes: {}
    }
  } );
  

• 方法2：通过过滤器统一覆写预览参数
  如果你需要批量修改多个块（含第三方块）的预览尺寸，可使用WordPress官方提供的blocks.getBlockPreviewJS过滤器修改预览组件的传入参数：

  import { addFilter } from '@wordpress/hooks';
  import { cloneElement } from '@wordpress/element';
  
  addFilter(
    'blocks.getBlockPreview',
    'your-custom-slug/modify-preview-width',
    (previewElement, blockData) => {
      // 可按需添加判断逻辑，仅修改指定块的预览
      if (blockData.name.startsWith('your-block-slug/')) {
        return cloneElement(previewElement, {
          viewportWidth: 1280
        });
      }
      return previewElement;
    }
  );
  

补充说明：viewportWidth参数设置的是预览内部iframe的视口逻辑宽度，和外层悬浮容器的物理显示宽度无关，组件会自动按比例缩放内容，哪怕设置为1920也不会撑破外层容器，可放心配置。

默认纵向移动端预览效果参考：

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