WordPress 块主题中的样式按钮

过了一会回来， Ganesh Dahal 在 CSS-Tricks 上发表了一篇文章 回应一条询问有关在 WordPress 块和元素上添加 CSS 框阴影的推文。 其中有很多很棒的东西利用了 WordPress 6.1 中提供的新功能，这些功能提供了直接在块编辑器和站点编辑器 UI 中将阴影应用于事物的控件。

Ganesh 在那篇文章中简要介绍了按钮元素。 我想选择它并更深入地研究在 WordPress 块主题中设置按钮样式的方法。 具体来说，我们要打开一个新的 theme.json 文件并分解在模式中设置按钮样式的各种方法。

为什么按钮，你问？ 这是一个很好的问题，让我们从这个开始。

不同类型的按钮

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

1. Buttons 块内的子块
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 也非常详细地介绍了这一点, 你最好读一读他的文章。

那么，我们如何定义按钮样式 theme.json 没有写实际的 CSS？ 我们一起做吧。

创建基础样式

theme.json 是用属性：值对编写的一组结构化模式。 顶级属性称为“部分”，我们将使用 styles 部分。 这是所有样式说明的位置。

我们将特别关注 elements ，在 styles. 该选择器以在块之间共享的 HTML 元素为目标。 这是我们正在使用的基本 shell：

// 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 的站点，我敢打赌你们中的许多人已经熟悉链接和按钮的交互状态。 我们可以 :hover 将鼠标光标悬停在它们上面，将它们标记为 :focus, 点击它们使它们 :active. 哎呀，甚至还有一个 :visited state 给用户一个视觉指示，表明他们之前点击过这个。

那些是 CSS伪类 和 我们使用它们来定位链接或按钮的交互.

在 CSS 中，我们可能会设计一个 :hover 状态是这样的：

a:hover { /* Styles */
}

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

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

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

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

嵌套在各个块中的样式按钮

假设我们希望所有按钮都具有我们的基本样式，只有一个例外。 我们希望 Post Comment Form 块的提交按钮是蓝色的。 我们将如何实现这一目标？

这个块比按钮块更复杂，因为它有更多的移动部分：表单、输入、说明文本和按钮。 为了定位这个块中的按钮，我们必须遵循我们为 button 元素，但应用于 Post Comment Form 块，该块映射到 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;
}

如果我们想为 Post Comment Form 按钮定义不同的交互样式怎么办？ 这与我们对默认样式所做的处理方式相同，只是那些是在 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 生成的样式将应用于这些实例。

在某些情况下，您可能无法控制标记。 例如，某些块插件可能有点过于固执己见并随意应用自己的样式。 这就是您通常可以转到块设置面板中的“高级”选项并在那里应用类的地方：

结束了

在编写“CSS”时 theme.json 一开始可能会觉得尴尬，我发现它变成了第二天性。 与 CSS 一样，您可以使用正确的选择器广泛或非常狭窄地应用有限数量的属性。

我们不要忘记使用的三个主要优点 theme.json:

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

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

• SEO 支持的内容和 PR 分发。 今天得到放大。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
• Sumber: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/