如何在WordPress Gutenberg编辑器预览切换时为根容器添加自定义类

你不需要给每个区块都加类，直接监听预览模式变化，给.is-root-container根容器动态追加类即可，性能远高于原区块过滤器方案，代码如下：

import htm from 'https://unpkg.com/htm?module'
const html = htm.bind(wp.element.createElement);

const { useSelect } = wp.data;
const { render } = wp.element;

// 缓存上一次的预览模式，避免重复操作DOM
let lastPreviewMode = null;

// 监听编辑器状态变化
wp.data.subscribe(() => {
  // 获取当前预览设备类型
  const currentMode = wp.data.select('core/edit-post').__experimentalGetPreviewDeviceType().toLowerCase();
  // 仅在模式变化时更新类名
  if (currentMode === lastPreviewMode) return;
  lastPreviewMode = currentMode;

  // 选中根容器
  const rootContainer = document.querySelector('.is-root-container');
  if (!rootContainer) return;

  // 移除旧的设备类名
  rootContainer.classList.remove('mobile', 'tablet', 'desktop');
  // 追加新的类名 可按需求自定义类名规则
  if (currentMode === 'desktop') {
    rootContainer.classList.add('desktop', 'tablet');
  } else {
    rootContainer.classList.add(currentMode);
  }
  rootContainer.classList.add('tw');
});

该方案优势：

• 全局仅运行一次监听逻辑，不受区块数量影响，无额外渲染开销
• 类名直接挂载在根容器上，和前端生产环境的响应式结构完全一致，样式继承逻辑更直观

编辑器内样式适配参考：

/* 响应式样式示例 */
.is-root-container.mobile .wp-block-paragraph {
  font-size: 14px;
  padding: 0 12px;
}
.is-root-container.tablet .wp-block-paragraph {
  font-size: 16px;
  padding: 0 24px;
}
.is-root-container.desktop .wp-block-paragraph {
  font-size: 18px;
  padding: 0 48px;
}

注：当前使用的__experimentalGetPreviewDeviceType为实验性API，WordPress 6.0+版本均稳定支持，后续API正式化后仅需替换对应调用字段，核心逻辑无需修改。

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