新的区块在所有主题中均包含基础支持功能，并增强了选择加入以及扩展和自定义的能力。
在构建主题时，有几个新概念需要考虑：
- 编辑器颜色调色板 – 提供了一组默认颜色，但主题可以注册自己的颜色，并可选择锁定用户只能从定义的调色板中进行选择。
- 编辑器文本大小调色板 – 提供了一组默认大小，但主题可以注册自己的大小，并可选择锁定用户只能从预选的大小中进行选择。
- 响应式嵌入 – 主题必须选择加入响应式嵌入功能。
- 前端与编辑器样式 – 为了充分利用区块，主题作者应确保核心样式看起来良好并选择加入，或者编写自己的样式以最好地适配其主题。
- 区块工具 – 主题可以选择加入多种区块工具，如行高、自定义单位等。
- 核心区块图案 – 主题可以选择不使用默认的区块图案。
默认情况下，区块提供其样式以在无需任何更改的情况下为没有这些样式的主题启用对区块的基础支持。它们还 提供选择加入的特定样式。主题可以添加/覆盖这些样式，或者不提供任何样式，并完全依赖区块提供的功能。
某些高级区块功能需要在主题本身中启用支持，因为区块很难提供这些样式，可能需要对主题本身进行一些架构设计，以便能正常工作。
若要启用其中某项功能，请在主题的 functions.php 文件中调用 add_theme_support。例如：
function mytheme_setup_theme_supported_features() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => esc_attr__( 'strong magenta', 'themeLangDomain' ),
'slug' => 'strong-magenta',
'color' => '#a156b4',
),
array(
'name' => esc_attr__( 'light grayish magenta', 'themeLangDomain' ),
'slug' => 'light-grayish-magenta',
'color' => '#d0a5db',
),
array(
'name' => esc_attr__( 'very light gray', 'themeLangDomain' ),
'slug' => 'very-light-gray',
'color' => '#eee',
),
array(
'name' => esc_attr__( 'very dark gray', 'themeLangDomain' ),
'slug' => 'very-dark-gray',
'color' => '#444',
),
) );
}
add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );
选择加入的功能
默认区块样式
核心区块包含默认的结构性样式。这些样式默认在编辑器和前端中加载。这些样式的示例是驱动列区块的 CSS。如果没有这些规则，区块将导致布局损坏，根本没有任何列。
特定风格的区块样式
区块编辑器允许主题为前端选择加入稍微更具体的样式。这些样式的示例是引语块左侧的默认颜色条。如果您想在经典主题中使用这些特定风格，请为主题添加 wp-block-styles 的支持：
add_theme_support( 'wp-block-styles' );
您可以查看将包含在 区块库主题文件 中的 CSS。
对于提供 theme.json 文件的区块主题或主题，不建议使用此主题支持。相反，为了确保全局样式规则与区块样式之间没有样式冲突，请将所需的区块样式添加到主题的 theme.json 文件中。
宽对齐：
某些区块（如图像区块）可以通过向区块的包装器添加相应的类名来定义“宽”或“全”对齐（alignwide 或 alignfull）。主题可以通过调用以下代码启用此功能：
add_theme_support( 'align-wide' );
有关此函数的更多信息，请参阅 开发者文档中关于 add_theme_support() 的内容。
宽对齐与浮动
创建能够容纳宽图像、侧边栏、居中列以及保持在该居中列内的浮动元素的响应式布局可能很困难。
区块编辑器会向浮动图像添加额外的标记，以便更容易对其进行样式设置。
以下是带说明的 Image 的标记：
<figure class="wp-block-image">
<img src="..." alt="" width="200px" />
<figcaption>Short image caption.</figcaption>
</figure>
以下是左浮动图像的标记：
<div class="wp-block-image">
<figure class="alignleft">
<img src="..." alt="" width="200px" />
<figcaption>Short image caption.</figcaption>
</figure>
</div>
这是一个使用上述标记实现具有侧边栏、宽图像以及带边界说明的浮动元素的响应式布局的示例 CodePen。
区块颜色调色板
不同的区块可以自定义颜色。区块编辑器提供默认调色板，但主题可以覆盖它并提供自己的：
add_theme_support( 'editor-color-palette', array(
array(
'name' => esc_attr__( 'strong magenta', 'themeLangDomain' ),
'slug' => 'strong-magenta',
'color' => '#a156b4',
),
array(
'name' => esc_attr__( 'light grayish magenta', 'themeLangDomain' ),
'slug' => 'light-grayish-magenta',
'color' => '#d0a5db',
),
array(
'name' => esc_attr__( 'very light gray', 'themeLangDomain' ),
'slug' => 'very-light-gray',
'color' => '#eee',
),
array(
'name' => esc_attr__( 'very dark gray', 'themeLangDomain' ),
'slug' => 'very-dark-gray',
'color' => '#444',
),
) );
name 是一个人类可读的标签（如上所示），出现在工具提示中，并向用户提供颜色的有意义描述。这对于依赖屏幕阅读器或其他难以感知颜色的人来说尤为重要。slug 是颜色的唯一标识符，用于生成区块编辑器调色板使用的 CSS 类。color 是指定颜色的十六进制代码。
某些颜色会动态变化——例如“主色”和“次级色”，如 Twenty Nineteen 主题中所示，无法通过编程方式描述。尽管如此，在适用时，仍建议为默认值提供有意义的 name。
颜色将按顺序显示在调色板上，并且没有指定数量的限制。
主题负责创建在不同上下文中应用颜色的类。核心区块使用“color”、“background-color”和“border-color”上下文。因此，为了正确地将“强洋红色”应用于核心区块的所有上下文，主题应自行实现这些类。类名是通过追加‘has-‘、然后是使用连字符命名的类名（kebab case）并以上下文名称结尾来构建的。
.has-strong-magenta-color {
color: #a156b4;
}
.has-strong-magenta-background-color {
background-color: #a156b4;
}
.has-strong-magenta-border-color {
border-color: #a156b4;
}
从 WordPress 5.9 开始，为了覆盖核心定义的颜色值，没有 theme.json 的主题必须通过 CSS 自定义属性设置其值，而不是提供类。CSS 自定义属性使用以下命名格式 --wp--preset--color--<slug>。更多信息请参见 此开发笔记。例如：
:root {
--wp--preset--color--cyan-bluish-gray: <new_value>;
--wp--preset--color--pale-pink: <new_value>;
}
区块渐变预设
不同的区块可以从预定义的渐变列表中进行选择。区块编辑器提供默认渐变预设，但主题可以覆盖它们并提供自己的：
add_theme_support(
'editor-gradient-presets',
array(
array(
'name' => esc_attr__( '鲜活的青蓝色到鲜活的紫色', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
'slug' => 'vivid-cyan-blue-to-vivid-purple'
),
array(
'name' => esc_attr__( '鲜活的绿色青蓝色到鲜活的青蓝色', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)',
'slug' => 'vivid-green-cyan-to-vivid-cyan-blue',
),
array(
'name' => esc_attr__( '浅绿色青蓝色到鲜活的绿色青蓝色', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
'slug' => 'light-green-cyan-to-vivid-green-cyan',
),
array(
'name' => esc_attr__( '明亮的鲜活的琥珀色到明亮的鲜活的橙色', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
'slug' => 'luminous-vivid-amber-to-luminous-vivid-orange',
),
array(
'name' => esc_attr__( '明亮的鲜活的橙色到鲜活的红色', 'themeLangDomain' ),
'gradient' => 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)',
'slug' => 'luminous-vivid-orange-to-vivid-red',
),
)
);
name 是一个人类可读的标签（如上所示），出现在工具提示中，为用户提供有意义的渐变描述。对于那些依赖屏幕阅读器或否则难以感知颜色的人来说，这一点尤为重要。gradient 是应用于块背景图像的渐变的 CSS 值。有关有效渐变类型的详细信息，请参阅 Mozilla 文档。slug 是渐变的唯一标识符，用于生成块编辑器使用的 CSS 类。
主题负责创建应用渐变的类。因此，要正确应用“鲜活的青蓝色到鲜活的紫色”，主题应实现以下类：
.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
background: linear-gradient(
135deg,
rgba( 6, 147, 227, 1 ) 0%,
rgb( 155, 81, 224 ) 100%
);
}
从 WordPress 5.9 开始，为了覆盖核心定义的渐变值，没有 theme.json 的主题必须通过 CSS 自定义属性设置其值，而不是提供类。CSS 自定义属性使用以下命名 --wp--preset--gradient--<slug>。更多信息请参阅 此开发笔记。例如：
:root {
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: <new_value>;
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: <new_value>;
}
块字体大小
块可以允许用户配置他们使用的字体大小，例如段落块。块提供一组默认字体大小，但主题可以覆盖它并提供自己的：
add_theme_support( 'editor-font-sizes', array(
array(
'name' => esc_attr__( '小', 'themeLangDomain' ),
'size' => 12,
'slug' => 'small'
),
array(
'name' => esc_attr__( '常规', 'themeLangDomain' ),
'size' => 16,
'slug' => 'regular'
),
array(
'name' => esc_attr__( '大', 'themeLangDomain' ),
'size' => 36,
'slug' => 'large'
),
array(
'name' => esc_attr__( '巨大', 'themeLangDomain' ),
'size' => 50,
'slug' => 'huge'
)
) );
字体大小按照主题提供的顺序在块编辑器中的字体大小选择器上渲染。
主题负责创建应用正确字体大小样式的类。
类名是通过追加‘has-‘，然后使用连字符形式（kebab case）的字体大小名称 加上 并以 -font-size 结尾构建的。
以常规字体大小为例，主题可以提供以下类。
.has-regular-font-size {
font-size: 16px;
}
从 WordPress 5.9 开始，为了覆盖核心定义的字体大小值，没有 theme.json 的主题必须通过 CSS 自定义属性设置其值，而不是提供类。CSS 自定义属性使用以下命名 --wp--preset--font-size--<slug>。更多信息请参阅 此开发笔记。例如：
:root {
--wp--preset--font-size--small: <new_value>;
--wp--preset--font-size--large: <new_value>;
}
禁用自定义字体大小
主题可以使用以下代码禁用设置自定义字体大小的功能：
add_theme_support( 'disable-custom-font-sizes' );
设置后，用户将仅限于块编辑器中提供的默认大小或通过 editor-font-sizes 主题支持设置提供的大小。
在块颜色调色板中禁用自定义颜色
默认情况下，提供给块的调色板允许用户选择与编辑器或主题默认颜色不同的自定义颜色。
主题可以使用以下代码禁用此功能：
add_theme_support( 'disable-custom-colors' );
此标志将确保用户只能从主题提供的 editor-color-palette 中选择颜色，或者如果主题未提供调色板，则从编辑器默认颜色中选择。
禁用自定义渐变
主题可以使用以下代码禁用设置自定义渐变的功能：
add_theme_support( 'disable-custom-gradients' );
设置后，用户将仅限于块编辑器中提供的默认渐变或通过 editor-gradient-presets 主题支持设置提供的渐变。
禁用基础布局样式
注意： 自 WordPress 6.1 起。
主题可以选择退出为包括组、列、按钮和社交图标在内的核心块提供默认结构样式的生成块布局样式。通过使用以下代码，这些主题承诺提供自己的结构样式，因为使用此功能将导致核心块在编辑器和站点前端中显示不正确：
add_theme_support( 'disable-layout-styles' );
对于希望自定义 blockGap 样式或块间距的主题，请参阅 全局设置和样式的开发者文档。
支持自定义行高
一些块（如段落和标题）支持自定义行高。主题可以使用以下代码启用对此功能的支持：
add_theme_support( 'custom-line-height' );
支持自定义单位
除了像素外，用户还可以使用其他单位来定义大小、内边距等。可用的单位有：px, em, rem, vh, vw。主题可以使用以下代码禁用对此功能的支持：
add_theme_support( 'custom-units', array() );
主题还可以过滤可用的自定义单位。
add_theme_support( 'custom-units', 'rem', 'em' );
禁用默认块图案。
WordPress 内置了一些块图案，主题可以退出捆绑的图案并提供自己的集合，使用以下代码：
remove_theme_support( 'core-block-patterns' );
编辑器样式
块编辑器支持主题的 编辑器样式，但其工作方式与经典编辑器略有不同。
在经典编辑器中，编辑器样式表直接加载到 WYSIWYG 编辑器的 iframe 中，没有任何更改。块编辑器使用 iframe 用于站点编辑器，并且在 Gutenberg 23.6 中用于帖子编辑器。WordPress Core 7.1 之前的版本在某些配置下仍可以回退到非 iframe 的帖子编辑器。为了在这些上下文中将编辑器样式限制为内容，WordPress 有选择地重写或调整某些 CSS 选择器。这也允许块编辑器在块变体预览中使用您的编辑器样式。
例如，如果您在编辑器样式中编写 body { ... }，这将被重写为 .editor-styles-wrapper { ... }。这也意味着您 不应 直接针对任何编辑器类名。
因为它的工作方式略有不同，您需要通过向主题添加额外的代码片段来启用此功能，除了 add_editor_style 函数：
add_theme_support( 'editor-styles' );
您通常不需要对编辑器样式进行太多更改；大多数主题可以添加上述代码片段，并在经典编辑器和区块编辑器中获得类似的结果。
加载编辑器样式
使用 add_editor_style 函数在编辑器屏幕上加载和加载 CSS。对于经典编辑器，这是唯一需要添加到编辑器的样式的函数。对于新的区块编辑器，您首先需要添加上面提到的 add_theme_support( 'editor-styles');。
add_editor_style( 'style-editor.css' );
将其添加到您的 functions.php 文件中会将样式表 style-editor.css 添加到要在编辑器中加载的样式表队列中。
基本颜色
您可以像任何其他网页一样对编辑器进行样式设置。以下是如何更改背景颜色和字体颜色为蓝色：
/* Add this to your `style-editor.css` file */
body {
background-color: #d3ebf3;
color: #00005d;
}
更改编辑器宽度
要更改编辑器的主列宽度，请将以下 CSS 添加到 style-editor.css：
/* Main column width */
.wp-block {
max-width: 720px;
}
/* Width of "wide" blocks */
.wp-block[data-align='wide'] {
max-width: 1080px;
}
/* Width of "full-wide" blocks */
.wp-block[data-align='full'] {
max-width: none;
}
您可以使用这些编辑器宽度来匹配您的主题中的宽度。您可以使用任何 CSS 宽度单位，包括 % 或 px。
进一步阅读：使用样式表应用样式。
响应式嵌入内容
嵌入块会自动对嵌入的内容应用样式，以反映在 iFrame 中嵌入的内容的宽高比。使用宽高比响应式样式样式的块看起来如下：
<figure class="wp-embed-aspect-16-9 wp-has-aspect-ratio">...</figure>
为了使内容调整大小并保持其宽高比，<body> 元素需要 wp-embed-responsive 类。这默认不设置，并且需要主题选择加入 responsive-embeds 功能：
add_theme_support( 'responsive-embeds' );
间距控制
某些块可以具有内边距控制。这默认关闭，并且需要主题通过声明支持来选择加入：
add_theme_support( 'custom-spacing' );
链接颜色控制
链接支持已在 WordPress 5.8 中作为稳定版本发布。它默认值为 false，主题可以通过 theme.json 文件 启用它：
{
"settings": {
"color": {
"link": true
}
}
}
或者，在 Gutenberg 插件激活的情况下，旧的遗留支持
add_theme_support( 'experimental-link-color' )也会起作用。当 Gutenberg 插件将 WordPress 5.9 作为最低版本要求时，此后备将被移除。
当用户设置块的链接颜色时，将以以下形式添加新样式：
.wp-elements-<uuid> a {
color: <link-color> !important;
}
其中
<uuid>是一个随机数<link-color>是var(--wp--preset--color--slug)（如果用户选择了预设值）或原始颜色值（如果用户选择了自定义值）
块将附加类 .wp-elements-<uuid>。
外观工具
使用此设置启用以下全局样式设置：
- 背景：背景图像，背景大小，渐变
- 边框：颜色，半径，样式，宽度
- 颜色：链接，标题，按钮，说明
- 间距：块间隙，边距，内边距
- 排版：行高，文本列
- 尺寸：宽高比，高度，最小高度，最小宽度，宽度
- 位置：粘性
add_theme_support( 'appearance-tools' );
边框
使用此功能启用所有边框设置：
add_theme_support( 'border' );
链接颜色
使用此功能启用链接颜色设置：
add_theme_support( 'link-color' );
基于区块的模板部分
基于区块的模板部分允许管理员使用区块编辑站点的部分。这默认关闭，并且需要主题通过声明支持来选择加入：
add_theme_support( 'block-template-parts' );
此功能仅适用于非基于区块的主题，因为基于区块的主题已经在站点编辑器中支持基于区块的模板部分。
独立的模板部分编辑器不允许编辑器创建新或删除现有的模板部分。这是因为主题需要在 PHP 模板中手动包含模板部分。
您可以在 主题手册块模板和模板部分部分 中了解更多关于基于区块的模板部分的信息。