在 WordPress 块主题中设置按钮样式

不久前，Ganesh Dahal 在 CSS-Tricks 上发表了一篇帖子，回复了一条关于在 WordPress 块和元素中添加 CSS 盒阴影的推文。其中有很多很棒的内容利用了 WordPress 6.1 中发布的新功能，这些功能提供了在块编辑器和站点编辑器 UI 中直接将阴影应用于内容的控制。

Ganesh 在那篇文章中简要提到了按钮元素。我想借此机会更深入地探讨在 WordPress 块主题中设置按钮样式的方法。具体来说，我们将打开一个新的 theme.json 文件，并分解在架构中设置按钮样式的各种方法。

你可能会问，为什么是按钮？这是一个好问题，所以让我们从这里开始。

不同类型的按钮

当我们在 WordPress 块编辑器的上下文中谈论按钮时，我们必须区分两种不同类型

1. 按钮块内的子块
2. 嵌套在其他块中的按钮（例如，帖子评论表单块）

如果我们将这两个块都添加到模板中，它们默认情况下具有相同的样式。

但标记非常不同

<div class="wp-block-button">
  <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button">
  <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> 
</p>

我们可以看到，HTML 标签名称不同。是常见的类——.wp-block-button 和 .wp-element-button——确保了这两个按钮之间的一致样式。

如果我们正在编写 CSS，我们会针对这两个类。但正如我们所知，WordPress 块主题有不同的样式管理方式，那就是通过 theme.json 文件。 Ganesh 也详细介绍了这一点，你可以读一读他的文章。

那么，如何在不编写实际 CSS 的情况下在 theme.json 中定义按钮样式呢？让我们一起做。

创建基础样式

theme.json 是一个结构化的架构集，以属性：值对的形式编写。顶层属性称为“部分”，我们将使用 styles 部分。这是所有样式指令所在的地方。

我们将重点关注 styles 中的 elements。此选择器针对块之间共享的 HTML 元素。这是我们正在使用的基本外壳

// theme.json
{
  "version": 2,
  "styles": {
    "elements": {
      // etc.
    }
  }
}

所以我们需要做的是定义一个 button 元素。

={
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        // etc.
      }
    }
  }
}

该 button 对应于用于在前端标记按钮元素的 HTML 元素。这些按钮包含 HTML 标签，这些标签可能是我们的两种按钮类型之一：独立组件（即按钮块）或嵌套在另一个块中的组件（例如，帖子评论块）。

与其为每个单独的块设置样式，不如创建共享样式。让我们继续更改主题中两种按钮类型的默认背景和文本颜色。其中有一个 color 对象，它反过来支持 background 和 text 属性，我们可以在其中设置我们想要的值

{
  "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 的网站，我相信你们中的许多人已经熟悉链接和按钮的交互状态。我们可以将鼠标光标悬停在它们上面，将它们制表到 :focus，点击它们使其 :active。哎呀，甚至还有一个 :visited 状态，以便在用户之前点击过它时提供视觉指示。

这些是 CSS 伪类，我们用它们来 定位链接或按钮的交互。

在 CSS 中，我们可以这样设置 :hover 状态的样式

a:hover {
  /* Styles */
}

在 theme.json 中，我们将使用这些伪类扩展现有的按钮声明。

{
  "version": 2,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "background": "#17a2b8",
          "text": "#ffffff"
        },
        ":hover": {
          "color": {
            "background": "#138496"
          }
        },
        ":focus": {
          "color": {
            "background": "#138496"
          }
        },
        ":active": {
          "color": {
            "background": "#138496"
          }
        }
      }
    }
  }
}

注意它的“结构化”性质。我们基本上遵循了一个大纲

• 元素
  • 元素
    • 对象
      • 属性
        • 值

现在，我们已经完整定义了按钮的默认样式和交互样式。但如果我们想为嵌套在其他块中的某些按钮设置样式呢？

设置嵌套在单个块中的按钮的样式

让我们假设我们希望所有按钮都具有我们的基础样式，但有一个例外。我们希望帖子评论表单块的提交按钮为蓝色。我们该如何实现呢？

此块比按钮块更复杂，因为它有更多活动部件：表单、输入、说明性文本和按钮。为了定位此块中的按钮，我们必须遵循与 button 元素相同的 JSON 结构，但应用于帖子评论表单块，该块映射到 core/post-comments-form 元素

{
  "version": 2,
  "styles": {
    "elements" {
      "button": {
        // Default button styles
      }
    }
    "blocks": {
      "core/post-comments-form": {
        // etc.
      }
    }
  }
}

请注意，我们不再在 elements 中工作。相反，我们正在 blocks 内工作，它专门用于配置实际的块。相比之下，按钮被认为是全局元素，因为它们可以嵌套在块中，即使它们也可以用作独立块。

JSON 结构支持元素内的元素。因此，如果帖子评论表单块中存在 button 元素，我们可以在 core/post-comments-form 块中定位它

{
  "version": 2,
  "styles": {
    "elements" {
      "button": {
        // Default button styles
      }
    }
    "blocks": {
      "core/post-comments-form": {
        "elements": {
          "button": {
            "color": {
              "background": "#007bff"
            }
          }
        }
      }
    }
  }
}

此选择器意味着我们不仅定位了特定块——我们还定位了该块中包含的特定元素。现在，我们有一组应用于主题中所有按钮的默认按钮样式，以及一组应用于帖子评论表单块中包含的特定按钮的样式。

WordPress 生成的 CSS 因此具有更精确的选择器

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link {
  background-color: #007bff;
}

如果我们想为帖子评论表单按钮定义不同的交互样式怎么办？这与我们为默认样式所做的方式相同，只是这些是在 core/post-comments-form 块内定义的

{
  "version": 2,
  "styles": {
    "elements" {
      "button": {
        // Default button styles
      }
    }
    "blocks": {
      "core/post-comments-form": {
        "elements": {
          "button": {
            "color": {
              "background": "#007bff"
            }
            ":hover": {
              "color": {
                "background": "#138496"
              }
            },
            // etc.
          }
        }
      }
    }
  }
}

那些不在块中的按钮呢？

WordPress 会自动生成并应用正确的类来输出这些按钮样式。但如果使用支持块和全站编辑，但也包含“经典”PHP 模板的“混合”WordPress 主题怎么办？或者，如果创建了一个自定义块，甚至有一个遗留的简码包含按钮呢？这些都不在 WordPress 样式引擎 的处理范围内！

不用担心。在所有这些情况下，你将在模板、块或简码标记中添加 .wp-element-button 类。WordPress 生成的样式将在此类情况下应用。

也可能存在你无法控制标记的情况。例如，某些块插件可能过于固执己见，并随意应用自己的样式。在这种情况下，你通常可以转到块设置面板中的“高级”选项并在其中应用该类

总结

虽然最初在 theme.json 中编写“CSS”可能感觉很别扭，但我发现它会成为第二天性。与 CSS 一样，你可以使用正确的选择器以广泛或非常狭窄的方式应用有限数量的属性。

并且不要忘记使用 theme.json 的三大优势

1. 样式应用于前端视图和块编辑器中的按钮。
2. 你的 CSS 将与未来的 WordPress 更新兼容。
3. 生成的样式适用于块主题和经典主题——无需在单独的样式表中复制任何内容。

如果你在项目中使用过 theme.json 样式，请分享你的经验和想法。我期待着阅读任何评论和反馈！