新功能块包括所有主题的基线支持、opt-in增强功能以及扩展和定制功能。
构建主题时需要考虑几个新概念：
- 编辑器调色板–提供了一组默认颜色，但主题可以注册自己的颜色，也可以选择锁定用户从定义的调色板中进行选择。
- 编辑器文本大小调色板–提供了一组默认的尺寸，但主题可以注册自己的尺寸，也可以选择锁定用户从预选的尺寸中进行选择。
- 响应式嵌入–主题必须选择响应嵌入。
- 前端编辑器样式（&E）–为了充分利用模块，主题作者将希望确保核心样式看起来很好并且易于使用，或者编写自己的样式以最适合他们的主题。
- 块工具–主题可以选择多个块工具，如线条高度、自定义单位。
- 核心区块模式–主题可以选择默认的块模式。
默认情况下，块提供其样式，以便在不做任何更改的情况下为主题中的块启用基本支持。他们还提供自以为是的风格。主题可以添加/覆盖这些样式，或者根本不提供样式，完全依赖于块提供的内容。
一些高级块功能需要在主题本身中提供opt-in支持，因为块很难提供这些样式，它们可能需要对主题本身进行一些架构设计才能正常工作。
要选择这些功能之一，请调用添加主题支持在函数.php主题的文件。例如：
函数mytheme_setup_theme_supported_features（）{add_theme_support（'editor-color-palette'，数组(阵列(“name”=>esc_attr__（“强洋红色”，“themeLangDomain”），“slug”=>“strong-magenta”，“颜色”=>“#a156b4”，),阵列(“name”=>esc_attr__（“浅灰品红”，“themeLangDomain”），“slug”=>“浅灰色-magenta”，“颜色”=>“#d0a5db”，),阵列(“name”=>esc_attr__（“非常浅的灰色”，“themeLangDomain”），“slug”=>“非常浅灰色”，“color”=>“#eee”，),阵列(“name”=>esc_attr__（“非常深的灰色”，“themeLangDomain”），“slug”=>“very-dark-gray”，“颜色”=>“#444”，),) );}add_action（'after_setup_theme'，'mytheme_setup-theme_supported_features'）；
核心块包括默认的结构样式。默认情况下，这些都会加载到编辑器和前端。这些样式的一个示例是为列块提供支持的CSS。如果没有这些规则，块将导致一个完全不包含列的破布局。
块编辑器允许主题为前端选择稍微更具主见的样式。这些样式的一个示例是块引号左侧的默认颜色栏。如果您想在经典主题中使用这些固执己见的风格，请为wp-block样式:
add_theme_support（“wp-block-styles”）；
您可以看到将包含在块库主题文件.
对于块主题或提供主题.json文件，不建议使用此主题支持。相反，为了确保全局样式规则和块样式之间没有样式冲突，请将所需的块样式添加到主题的主题.json文件。
一些块（如图像块）可以通过向块的包装器添加相应的类名来定义“宽”或“完全”对齐(对齐或对齐). 主题可以通过调用以下命令来选择此功能：
add_theme_support（'align-wide'）；
有关此函数的详细信息，请参阅开发人员文档添加主题支持（）.
创建一个能够容纳宽图像、边栏、居中列和停留在居中列中的浮动元素的响应式布局可能很困难。
块编辑器为浮动图像添加了额外的标记，使其更容易设置样式。
下面是一个图像带有标题：
<图class=“wp-block-image”><img src=“…”alt=“”width=“200px”/><figcaption>简短图像标题</图标题></图>
以下是左浮动图像的标记：
<div class=“wp-block-image”><图class=“alignleft”><img src=“…”alt=“”width=“200px”/>＜figcaption＞简短的图片说明</图标题></图></div>
这里有一个例子代码笔使用上述标记来实现响应性布局，该布局具有侧栏、宽图像和浮动元素以及限定标题。
不同的块可以自定义颜色。块编辑器提供了默认选项板，但主题可以覆盖它并提供自己的选项板：
add_theme_support（'editor-color-palette'，数组(阵列(“name”=>esc_attr__（“强洋红色”，“themeLangDomain”），“slug”=>“strong-magenta”，“颜色”=>“#a156b4”，),阵列(“name”=>esc_attr__（“浅灰品红”，“themeLangDomain”），“slug”=>“浅灰色-magenta”，“颜色”=>“#d0a5db”，),阵列(“name”=>esc_attr__（“非常浅的灰色”，“themeLangDomain”），“slug”=>“非常浅灰色”，“color”=>“#eee”，),阵列(“name”=>esc_attr__（“非常深的灰色”，“themeLangDomain”），“slug”=>“very-dark-gray”，“颜色”=>“#444”，),) );
名称是一个人类可读的标签（如上所示），显示在工具提示中，为用户提供了对颜色的有意义的描述。这对于那些依赖屏幕阅读器或难以感知颜色的人来说尤为重要。段塞是颜色的唯一标识符，用于生成块编辑器调色板使用的CSS类。颜色是用于指定颜色的十六进制代码。
有些颜色是动态变化的，例如“初级”和“次级”颜色，例如在“二十一世纪”主题中，无法通过编程进行描述。尽管如此，还是建议提供有意义的名称适用时，至少使用默认值。
颜色将按顺序显示在调色板上，并且可以指定的数量没有限制。
主题负责创建在不同上下文中应用颜色的类。核心块使用“颜色”、“背景颜色”和“边框颜色”上下文。因此，为了正确地将“强品红色”应用于核心块的所有上下文，主题应该实现类本身。类名在构建时附加“has-”，后跟类名使用烤肉串案例，以上下文名称结尾。
.has-strong-洋红色{颜色：#a156b4；}.has-strong洋红色背景色{背景色：#a156b4；}.has-strong洋红色-订单颜色{border-color:#a156b4；}
从WordPress 5.9开始，覆盖由核心、主题定义的颜色值，没有主题.json必须通过CSS自定义属性设置其值，而不是提供类。CSS自定义属性使用以下命名--wp—预设--颜色-->slug>。请在中查看更多信息这个devnote例如：
：root{--wp--预设--颜色--青色-流纹：<new_value>；--wp——预设——颜色——淡色：<new_value>；}
不同的块可以从预定义渐变列表中进行选择。块编辑器提供默认渐变预设，但主题可以覆盖它们并提供自己的：
添加主题支持('编辑器粒度预设'，阵列(阵列(“name”=>esc_attr__（“鲜艳的青蓝到鲜艳的紫色”，“themeLangDomain”），“梯度”=>“线性梯度（135度，rgba（6147227,1）0%，rgb（155,81224）100%）”，“鼻涕虫”=>“鲜艳的青蓝色到鲜艳的紫色”),阵列(“name”=>esc_attr__（“鲜艳的青绿色到鲜艳的青蓝色”，“themeLangDomain”），“gradient”=>“线性渐变（135度，rgba（0208132,1）0%，rgba（6147227,1）100%）”，“slug”=>“vivid-green-cyan-to-vivid-cyan-blue”，),阵列(“name”=>esc_attr__（“浅绿青色到鲜绿青色”，“themeLangDomain”），“gradient”=>“linear-gradient（135度，rgb（122220180）0%，rgb（0208130）100%）”，“slug”=>“浅绿-青色-鲜活-绿色-青色”，),阵列(“name”=>esc_attr__（“明亮的明亮琥珀色到明亮的明亮橙色”，“themeLangDomain”），“梯度”=>“线性梯度（135度，rgba（252185,0,1）0%，rgba（255105,0,1）100%）”，“鼻涕虫”=>“明亮鲜艳的琥珀色到明亮鲜艳的橙色”，),阵列(“name”=>esc_attr__（“明亮的鲜橙色到鲜红色”，“themeLangDomain”），“梯度”=>“线性梯度（135度，rgba（255105,0,1）0%，rgb（207,46,46）100%）”，“slug”=>“luminous-vivid-orange-to-vivid-red”，),));
名称是一个人类可读的标签（如上所示），出现在工具提示中，为用户提供了对渐变的有意义的描述。这对于那些依赖屏幕阅读器或难以感知颜色的人来说尤为重要。梯度是应用于块背景图像的渐变的CSS值。有关有效渐变类型的详细信息，请参阅mozilla文档.段塞是渐变的唯一标识符，用于生成块编辑器使用的CSS类。
主题负责创建应用渐变的类。因此，要正确应用“鲜艳的青蓝到鲜艳的紫色”主题，应实现以下类：
.has-vivid-cyan-blue-to-vivid-purple-gradient-背景{背景：线性渐变(135度，rgba（6，147，227，1）0%，rgb（155，81，224）100%);}
从WordPress 5.9开始，覆盖由核心、主题定义的渐变值，没有主题.json必须通过CSS自定义属性设置其值，而不是提供类。CSS自定义属性使用以下命名--wp—预设--渐变-->slug>。请在中查看更多信息这个devnote例如：
：root{--wp——预设——渐变——鲜艳的青蓝色到鲜艳的紫色：＜new_value＞；--wp——预设——渐变——浅绿-青色到生动的绿色-青色：<new_value>；}
块允许用户配置他们使用的字体大小，例如段落块。块提供了一组默认的字体大小，但主题可以覆盖它并提供自己的：
add_theme_support（'editor-font-sizes'，数组(阵列(“name”=>esc_attr__（“Small”，“themeLangDomain”），“大小”=>12，“slug”=>“small”),阵列('name'=>esc_attr__（'Regular'，'themeLangDomain'），'大小'=>16，“slug”=>“regular”),阵列(“name”=>esc_attr__（“大型”，“主题语言域”），“大小”=>36，“slug”=>“large”),阵列(“name”=>esc_attr__（“巨大”，“主题语言域”），“大小”=>50，“slug”=>“巨大”)) );
字体大小按主题提供的顺序显示在字体大小选取器上。
主题负责创建应用正确字体大小样式的类。
类名在构建时附加“has-”，后跟字体大小名称使用烤肉串，以-字体大小.
作为常规字体大小的示例，主题可以提供以下类。
.has规则字体大小{字体大小：16px；}
注：slug“default”和“custom”是保留的，不能由主题使用。
从WordPress 5.9开始，覆盖由核心、主题定义的字体大小值，没有主题.json必须通过CSS自定义属性设置其值，而不是提供类。CSS自定义属性使用以下命名--wp—预设--font-size--<slug>。请在中查看更多信息这个devnote例如：
：root{--wp—预设--字体大小--小：<new_value>；--wp--预设--字体大小--大：<new_value>；}
主题可以禁用使用以下代码设置自定义字体大小的功能：
add_theme_support（'禁用自定义大小'）；
设置后，用户将被限制为块编辑器中提供的默认大小或通过编辑字体大小主题支持设置。
默认情况下，提供给块的调色板允许用户选择不同于编辑器或主题默认颜色的自定义颜色。
主题可以使用以下方法禁用此功能：
add_theme_support（'禁用自定义颜色'）；
此标志将确保用户只能从编辑器调色板提供的主题或来自编辑器的默认颜色（如果主题未提供）。
主题可以使用以下代码禁用设置自定义渐变的功能：
add_theme_support（'禁用自定义粒度'）；
设置后，用户将被限制为块编辑器中提供的默认渐变或通过编辑器粒度预设主题支持设置。
注：从WordPress 6.1开始。
主题可以选择不使用为核心块（包括组、列、按钮和社交图标）提供默认结构样式的生成块布局样式。通过使用以下代码，这些主题致力于提供自己的结构样式，因为使用此功能将导致核心块在编辑器和站点前端中显示不正确：
add_theme_support（'禁用自由样式'）；
对于希望自定义的主题块间隙样式或块间距，请参见开发人员在Global Settings&Styles上的文档.
一些块（如段落和标题）支持自定义行高。主题可以通过以下代码支持此功能：
add_theme_support（'自定义线路高度'）；
除了像素外，用户还可以使用其他单位定义大小、填充…可用的单位是：px、em、rem、vh、vw。主题可以使用以下代码禁用对此功能的支持：
add_theme_support（'自定义单元'，数组（））；
主题还可以过滤可用的自定义单位。
add_theme_support（“自定义单位”、“rem”、“em”）；
WordPress内置了许多块模式，主题可以选择绑定的模式，并使用以下代码提供自己的模式集：
remove_theme_support（“核心块模式”）；
块编辑器支持主题编辑器样式然而，它的工作方式与经典编辑器略有不同。
在经典编辑器中，编辑器样式表直接加载到所见即所得编辑器的iframe中，没有任何更改。然而，块编辑器不使用iframe。为了确保您的样式只应用于编辑器的内容，我们通过选择性地重写或调整某些CSS选择器来自动转换您的编辑器样式。这也允许块编辑器在块变体预览中利用您的编辑器样式。
例如，如果你写正文{…}在您的编辑器样式中，这被重写为.editor-styles-wrapper{…}。这也意味着你应该不直接以任何编辑器类名为目标。
因为它的工作方式稍有不同，所以除了add_editor_style函数外，您还需要通过向主题添加额外的代码段来实现这一点：
add_theme_support（'编辑器样式'）；
你不需要太多地改变你的编辑器样式；大多数主题都可以在上面添加代码片段，并在经典编辑器和块编辑器中获得类似的结果。
使用添加编辑器样式函数在编辑器屏幕上排队并加载CSS。对于经典编辑器，这是向编辑器添加样式所需的唯一功能。对于新的块编辑器，首先需要add_theme_support（'编辑器样式'）；上述内容。
add_editor_style（'style-editor.css'）；
将其添加到您的函数.php文件将添加样式表样式编辑器.css到要在编辑器中加载的样式表队列。
你可以像其他网页一样设计编辑器。以下是如何将背景色和字体颜色更改为蓝色的方法：
/*将此添加到您的“style-editor.css`文件*/车身{背景颜色：#d3ebf3；颜色：#00005d；}
要更改编辑器的主列宽，请将以下CSS添加到样式编辑器.css:
/*主列宽度*/.wp-块{最大宽度：720px；}/*“宽”块的宽度*/.wp-block[data-align='wide']{最大宽度：1080px；}/*“全宽”砌块的宽度*/.wp块[数据对齐=“完整”]{最大宽度：无；}
您可以使用这些编辑器宽度来匹配主题中的宽度。您可以使用任何CSS宽度单位，包括%或二甲苯.
进一步阅读：使用样式表应用样式.
嵌入块会自动将样式应用于嵌入的内容，以反映嵌入iFrame的内容的纵横比。具有宽高比响应样式的块看起来像：
<figure class=“wp-embed-aspect-16-9 wp-has-aspect-ratio”></图>
要调整内容大小并保持其纵横比<body>元素需要wp-嵌入式响应类。这不是默认设置的，需要主题选择加入响应嵌入功能：
add_theme_support（'响应嵌入'）；
某些块可以具有填充控件。默认情况下，此选项处于禁用状态，需要主题通过声明支持来选择加入：
add_theme_support（'自定义间距'）；
作为WordPress 5.8的一部分，链接支持已经变得稳定。它是假默认情况下，主题可以通过主题.json文件:
{“设置”：{“颜色”：{“链接”：true}}}
或者，随着Gutenberg插件的激活，旧的遗留支持add_theme_support（'实验链接颜色'）当古腾堡插件要求WordPress 5.9作为最低版本时，此回退将被删除。
当用户设置块的链接颜色时，将以以下形式添加新样式：
.wp-elements-<uuid>a{颜色：<link-color>！重要；}
哪里
<uuid>是一个随机数<链接颜色>是其中之一var（--wp--预设--颜色--段塞）（如果用户选择了预设值）或原始颜色值（如果用户选择了自定义值）
块将附加到类.wp-elements-<uuid>.
使用此设置可以启用以下全局样式设置：
- 边框：颜色、半径、样式、宽度
- 颜色：链接
- 间距：块间距、边距、填充
- 排版：lineHeight
- 尺寸：纵横比，最小高度
- 位置：粘性
add_theme_support（'外观工具'）；
使用此选项可启用所有边界设置：
add_theme_support（'边框'）；
使用此选项可启用链接颜色设置：
add_theme_support（“链接颜色”）；
基于块的模板部件允许管理员使用块编辑站点的部件。默认情况下，此选项处于禁用状态，需要主题通过声明支持来选择加入：
add_theme_support（'block-template-parts'）；
此功能仅与非基于块的主题相关，因为基于块的专题已经支持作为站点编辑器一部分的基于块的模板部分。
独立模板部件编辑器不允许编辑器创建新的或删除现有模板部件。这是因为主题需要手动将模板部分包含在PHP模板中。
您可以在中找到有关基于块的模板零件的更多信息主题手册块模板和模板零件部分.