如何为WordPress特定media-text区块变体单独注册样式？

你遇到的问题是因为区块变体并非独立区块，而是基于原始core/media-text的预设配置，因此registerBlockStyle无法直接绑定到变体名称。要实现样式仅对media-text-custom变体生效且不在原生区块样式选项中显示，可以通过以下两步操作：

1. 用过滤器控制样式选项的显示范围 #

添加block_style_settings过滤器，在编辑器中检查当前选中的区块是否为目标变体，若非则移除该样式选项：

wp.hooks.addFilter(
  'block_style_settings',
  'your-namespace/restrict-blue-border-style',
  (settings, blockName) => {
    if (blockName !== 'core/media-text') return settings;

    const selectedBlock = wp.data.select('core/editor').getSelectedBlock();
    // 仅当选中media-text-custom变体时，保留该样式选项
    if (selectedBlock?.variationName !== 'media-text-custom') {
      settings.styles = settings.styles.filter(
        style => style.name !== 'media-text-custom-blue-border'
      );
    }

    return settings;
  }
);

2. 限定CSS样式仅作用于目标变体 #

WordPress会为变体区块添加wp-block-media-text-variation-media-text-custom类，修改你的CSS代码，让样式仅在该类存在时生效：

.wp-block-media-text-variation-media-text-custom.is-style-media-text-custom-blue-border {
  border: 2px solid #007cba;
  /* 其他自定义样式 */
}

这样处理后，Blue Border样式只会在你选中media-text-custom变体时出现在样式选项中，且样式仅对该变体生效。

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