古腾堡块编辑器已经成为 WordPress 内容编辑的核心，为块添加主题专属样式是主题开发中的重要工作。好的块样式能让用户在编辑内容时自动匹配主题的设计语言。本文详细介绍块样式的定制方法。

核心块的样式覆盖

主题可以通过 CSS 覆盖核心块的默认样式。推荐使用块编辑器的 CSS 类名进行定位，避免使用全局选择器影响其他部分。在 style.css 中为目标块编写样式规则，确保这些样式在编辑器中和前端保持一致。

对于编辑器中的样式，需要额外在 editor-style.css 中定义，并通过 add_theme_support('editor-styles') 启用编辑器样式支持。

块样式变体的创建

块样式变体允许为同一个块提供多种预置外观。例如，“按钮”块可以提供主要按钮、次要按钮和轮廓按钮三种样式变体。在 functions.php 中使用 register_block_style 函数注册样式变体。

每个样式变体有一个名称、一个显示标签和一个 CSS 类名。用户在选择该样式变体时，对应的 CSS 类名会自动添加到块上，主题中的 CSS 规则根据这个类名呈现不同的样式。

块样式变体的适用场景

块样式变体适合为按钮、列表、引用、封面等核心块提供主题特定的样式选项。通过提供多样化的样式选择，用户可以更灵活地构建页面，同时保持整体设计的一致性。

自定义块的样式集成

对于主题中自定义的块，样式应该与主题设计系统保持一致。在 block.json 中定义块的样式依赖，在 theme.json 中配置块的颜色、字体、间距等设计令牌。这样自定义块可以自动继承主题的设计系统。

编辑器内的样式预览

为了让用户在编辑器中看到与前端一致的样式，需要确保编辑器样式和前端样式同步更新。使用 add_editor_style 函数加载编辑器样式文件，或者在 theme.json 中统一管理样式。