如何禁用register_block_style的区块样式预览以解决编辑器性能问题

以下方案均不需要修改WordPress核心文件，版本更新不会被覆盖：

方案1：全局/指定区块禁用预览 #

通过WordPress官方提供的编辑器过滤器修改块样式配置，清空预览字段即可停止渲染预览组件：

// 请将your-namespace替换为你自己的命名空间
wp.hooks.addFilter(
  'blockEditor.useBlockStyles',
  'your-namespace/disable-style-preview',
  (styles, blockType) => {
    // 可选：只针对你的自定义区块禁用，放开下面这行注释和对应的闭合括号即可
    // if (blockType.name !== 'your-plugin/your-custom-block') return styles;

    return styles.map(style => ({
      ...style,
      preview: []
    }));
  }
);

将上述代码放入你的自定义区块注册脚本，或者单独创建编辑器脚本，通过enqueue_block_editor_assets钩子加载到后台编辑器即可生效。

方案2：注册自定义区块样式时直接禁用预览 #

如果你只需要禁用自己开发的自定义区块的样式预览，在注册样式时直接不配置preview参数，或者将其设为空数组即可：

wp.blocks.registerBlockStyle('your-plugin/your-custom-block', {
  name: 'custom-style-1',
  label: '自定义样式1',
  // 新增这行即可禁用该样式的预览
  preview: []
});

方案3：CSS隐藏（应急方案） #

不需要修改JS代码的前提下，可通过后台自定义CSS直接隐藏预览元素，避免渲染带来的性能消耗：

.block-editor-block-styles__item-preview {
  display: none !important;
}

将上述CSS通过admin_enqueue_scripts钩子加载到后台即可生效。

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