我偶然发现了 Ana Segota 的这条推文，她在寻找一种方法，在 WordPress 的 theme.json 文件中为按钮的悬停状态添加 CSS box-shadow。

是否可以在 theme.json 中为按钮的悬停状态添加阴影？#WordPress
— Ana Segota (@Ana_Segota) 2022 年 11 月 1 日

她之所以这样问，是因为 theme.json 是 WordPress 希望我们开始为块主题移动基本样式的地方。传统上，我们在“经典”主题中工作时，会将所有样式都放在 style.css 中。但是，随着最近随 WordPress 6.1 发布的默认 Twenty Twenty-Three (TT3) 主题将其所有样式都迁移到 theme.json，我们越来越接近能够对我们自己的主题执行相同的操作。我在最近的一篇文章中详细介绍了这一点。

我说“越来越接近”，因为 theme.json 仍然不支持许多 CSS 属性和选择器。例如，如果您希望使用 perspective-origin 在 theme.json 中设置某些内容的样式，那是不可能的——至少在我撰写本文时是这样。

Ana 正在查看 box-shadow，幸运的是，从 WordPress 6.1 开始，theme.json 支持该 CSS 属性。她的推文日期为 11 月 1 日，与 6.1 发布的同一天。这并不是说对该属性的支持是发布中的头条新闻。更大的头条新闻更多地与块和块主题的间距和布局技术相关。

以下是如何在 theme.json 中将 box-shadow 应用于特定块（例如特色图像块）的方法。

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "blocks" :{
      "core/post-featured-image": {
        "shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
      }
    }
  }
}

想知道新的颜色语法是否有效？我也是！但是当我尝试使用 rgb(0 0 0 / 0.66) 时，什么也没得到。也许这已经在开发中，或者可以使用拉取请求。

很简单，对吧？当然，它与在 style.css 中编写纯 CSS 完全不同，需要一些时间来适应。但它确实在最新的 WordPress 版本中成为可能。

而且，我们可以对单个“元素”（例如按钮）执行相同的操作。按钮本身就是一个块，但它也可以是另一个块内的嵌套块。因此，要将 box-shadow 全局应用于所有按钮，我们将在 theme.json 中执行以下操作。

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

但是 Ana 想在按钮的 :hover 状态下添加阴影。谢天谢地，对某些元素（如按钮和链接）使用伪类设置交互状态的样式的支持——包括 :hover、:focus、:active 和 :visited——也在 WordPress 6.1 中获得了 theme.json 支持。

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
        }
      }
    }
  }
}

如果您使用的是父主题，则当然可以在子主题中覆盖主题的样式。在这里，我完全覆盖了 TT3 的按钮样式。

查看完整代码

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--tertiary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        "outline": {
          "offset": "3px",
          "width": "3px",
          "style": "dashed",
          "color": "red"
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        },
        "shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          },
          "outline": {
            "offset": "3px",
            "width": "3px",
            "style": "solid",
            "color": "blue"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      }
    }
  }
}

以下是渲染效果

Showing two red buttons with box shadows. — 按钮的自然状态（左侧）及其悬停状态（右侧）

另一种方法：自定义样式

最近发布的 Pixl 块主题提供了 theme.json 中 box-shadow 属性的另一个实际使用示例，使用定义自定义值的替代方法。在主题中，自定义 box-shadow 属性定义为 .settings.custom.shadow

{
  "version": 2,
  "settings": {
    // etc. 
    "custom": {
      // etc.
      "shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
    },
    // etc.
  }
}

然后，在文件的后面，在按钮元素上调用自定义 shadow 属性。

{
  "version": 2,
  "settings": {
    // etc.
  },
  "styles": {
    "elements": {
      "button": {
        // etc.
        "shadow": "var(--wp--custom--shadow) !important",
        // etc.
        ":active": {
          // etc.
          "shadow": "2px 2px var(--wp--preset--color--primary) !important"
        }
      },
    // etc.
  }
}

我不太确定在此上下文中使用 !important 的含义。我的猜测是，它试图防止使用站点编辑器中的全局样式 UI 覆盖这些样式，全局样式 UI 的特异性高于 theme.json 中定义的样式。这是我之前关于管理块主题样式的文章中更多信息的锚链接。

更新：事实证明，在拉取请求 #34689 中对此进行了一整轮讨论，其中指出这在 WordPress 5.9 中已得到解决。

还有更多……

除了阴影之外，CSS outline 属性也在 WordPress 6.1 中获得了 theme.json 支持，并且可以应用于按钮及其交互状态。这 GitHub PR 展示了一个很好的示例。

"elements": {
  "button": {
    "outline": {
      "offset": "3px",
      "width": "3px",
      "style": "dashed",
      "color": "red"
    },
    ":hover": {
      "outline": {
        "offset": "3px",
        "width": "3px",
        "style": "solid",
        "color": "blue"
      }
    }
  }
}

您还可以找到其他主题中 outline 属性的工作原理的实际示例，包括 Loudness、Block Canvas 和 Blockbase。

总结

谁知道在 WordPress 6.1 中的块主题方面，一个简单的 CSS 属性会有这么多内容可谈？我们了解了在块和单个元素上设置 box-shadow 的官方支持方法，包括按钮元素的交互状态。我们还查看了如何在子主题中覆盖阴影。最后，我们打开了一个实际示例，该示例在自定义属性中定义和设置阴影。

您可以在此 GitHub PR 中找到有关 WordPress 及其 box-shadow 实现的更详细的深入讨论。还有一个 GitHub 建议，用于在 WordPress 中直接添加 UI 以在块上设置阴影值——您可以直接跳转到一个动画 GIF，展示其工作原理。

Justin Tadlock 最近开发了一个渲染进度条的块，并将阴影控件集成到其中。他在视频中展示了它。

另一种方法：自定义样式

还有更多……

总结

更多信息

发表评论 取消回复

发表评论取消回复