WordPress中的造型按钮阻止主题

WordPress 6.1 引入的新功能为在区块编辑器和站点编辑器 UI 中直接应用阴影提供了控制，这篇文章将深入探讨在 WordPress 区块主题中设置按钮样式的方法，特别是利用 theme.json 文件。

为什么选择按钮？这是个好问题，让我们从这里开始。

不同类型的按钮

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

1. 按钮区块内的子区块。
2. 嵌套在其他区块内的按钮（例如，“文章评论表单”区块）。

如果我们将这两种区块添加到模板中，它们默认情况下具有相同的外观。

但其标记却大相径庭：

<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 的三个主要优点：

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

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

以上是WordPress中的造型按钮阻止主题的详细内容。更多信息请关注PHP中文网其他相关文章！