WordPress 6.1 引入的新功能为在区块编辑器和站点编辑器 UI 中直接应用阴影提供了控制，这篇文章将深入探讨在 WordPress 区块主题中设置按钮样式的方法，特别是利用 theme.json 文件。
为什么选择按钮？这是个好问题，让我们从这里开始。
在 WordPress 区块编辑器的上下文中，我们必须区分两种不同类型的按钮：
如果我们将这两种区块添加到模板中，它们默认情况下具有相同的外观。
但其标记却大相径庭：
<div> <a>Button 1</a> </div> <p> </p>
我们可以看到，HTML 标签名称不同。正是通用的类名——.wp-block-button 和 .wp-element-button——确保了这两个按钮的一致样式。
如果我们编写 CSS，我们会定位这两个类。但众所周知，WordPress 区块主题有不同的样式管理方式，那就是通过 theme.json 文件。
那么，如何在不编写实际 CSS 的情况下在 theme.json 中定义按钮样式呢？让我们一起完成它。
theme.json 是一个结构化的模式集，以属性：值对的形式编写。顶级属性称为“sections”，我们将使用 styles 部分。这是所有样式指令所在的位置。
我们将特别关注 styles 中的 elements。此选择器定位在区块之间共享的 HTML 元素。这是我们正在使用的基本框架：
// theme.json
{
"version": 2,
"styles": {
"elements": {
// etc.
}
}
}我们需要做的就是定义一个按钮元素。
{
"version": 2,
"styles": {
"elements": {
"button": {
// etc.
}
}
}
}该按钮对应于用于在前端标记按钮元素的 HTML 元素。这些按钮包含可能是我们两种按钮类型之一的 HTML 标签：独立组件（即按钮区块）或嵌套在另一个区块中的组件（例如，文章评论区块）。
与其必须为每个单独的区块设置样式，不如创建共享样式。让我们继续为主题中的两种按钮类型更改默认背景色和文本颜色。其中有一个颜色对象，它反过来支持背景和文本属性，我们在其中设置所需的值：
{
"version": 2,
"styles": {
"elements": {
"button": {
"color": {
"background": "#17a2b8",
"text": "#ffffff"
}
}
}
}
}这会更改两种按钮的颜色。
如果打开 DevTools 并查看 WordPress 为按钮生成的 CSS，我们会看到 .wp-element-button 类添加了我们在 theme.json 中定义的样式：
.wp-element-button {
background-color: #17a2b8;
color: #ffffff;
}这些是我们的默认颜色！接下来，我们希望在用户与按钮交互时向他们提供视觉反馈。
由于这是一个关于 CSS 的站点，我敢打赌你们中的许多人已经熟悉链接和按钮的交互状态。我们可以将鼠标光标悬停在它们上面（:hover），将它们制表到焦点（:focus），点击它们以使它们处于活动状态（:active）。甚至还有一个 :visited 状态，可以向用户直观地表明他们之前点击过这个。
这些是 CSS 伪类，我们使用它们来定位链接或按钮的交互。
在 CSS 中，我们可能会像这样设置 :hover 状态的样式：
<div> <a>Button 1</a> </div> <p> </p>
在 theme.json 中，我们将使用这些伪类扩展现有的按钮声明。
// theme.json
{
"version": 2,
"styles": {
"elements": {
// etc.
}
}
}请注意其“结构化”特性。我们基本上遵循一个概要：
我们现在已经完成了按钮的默认和交互式样式的完整定义。但是，如果我们想设置嵌套在其他区块中的某些按钮的样式呢？
让我们假设我们希望所有按钮都具有我们的基本样式，但有一个例外。我们希望“文章评论表单”区块的提交按钮为蓝色。我们该如何实现呢？
此区块比按钮区块更复杂，因为它包含更多活动部件：表单、输入、说明性文本和按钮。为了定位此区块中的按钮，我们必须遵循与按钮元素相同的 JSON 结构，但应用于映射到 core/post-comments-form 元素的“文章评论表单”区块：
{
"version": 2,
"styles": {
"elements": {
"button": {
// etc.
}
}
}
}请注意，我们不再在 elements 中工作了。相反，我们在 blocks 内工作，它用于配置实际的区块。相比之下，按钮被认为是一个全局元素，因为它们可以嵌套在区块中，即使它们也可以作为独立区块使用。
JSON 结构支持元素内的元素。因此，如果“文章评论表单”区块中存在按钮元素，我们可以在 core/post-comments-form 区块中定位它：
{
"version": 2,
"styles": {
"elements": {
"button": {
"color": {
"background": "#17a2b8",
"text": "#ffffff"
}
}
}
}
}此选择器意味着我们不仅定位特定区块——我们还定位包含在该区块中的特定元素。现在，我们有一组应用于主题中所有按钮的默认按钮样式，以及一组应用于包含在“文章评论表单”区块中的特定按钮的样式。
WordPress 生成的 CSS 因此具有更精确的选择器：
.wp-element-button {
background-color: #17a2b8;
color: #ffffff;
}如果我们想为“文章评论表单”按钮定义不同的交互式样式呢？这与我们为默认样式所做的方法相同，只是这些样式是在 core/post-comments-form 区块内定义的：
<div> <a>Button 1</a> </div> <p> </p>
WordPress 会自动生成并应用正确的类来输出这些按钮样式。但是，如果您使用支持区块和全站编辑但还包含“经典”PHP 模板的“混合”WordPress 主题怎么办？或者，如果您创建了一个自定义区块，甚至有一个包含按钮的旧版短代码怎么办？这些都不受 WordPress 样式引擎处理！
别担心。在所有这些情况下，您都将在模板、区块或短代码标记中添加 .wp-element-button 类。然后将应用 WordPress 生成的样式。
在某些情况下，您可能无法控制标记。例如，某些区块插件可能过于武断，并随意应用其自己的样式。这时，您通常可以转到区块设置面板中的“高级”选项并在那里应用该类：
虽然一开始在 theme.json 中编写“CSS”可能会感觉很别扭，但我发现它会成为第二天性。与 CSS 一样，您可以使用正确选择器广泛或非常精确地应用有限数量的属性。
并且不要忘记使用 theme.json 的三个主要优点：
如果您在项目中使用了 theme.json 样式，请分享您的经验和想法。我期待阅读任何评论和反馈！
以上是WordPress中的造型按钮阻止主题的详细内容。更多信息请关注PHP中文网其他相关文章！
