向 WordPress 块和元素添加框阴影

由柏拉图重新发布

关注： 0

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

是否可以在 theme.json 中为悬停状态的按钮添加框阴影？ #WordPress

— 安娜·塞戈塔 (@Ana_Segota) 2022 年 11 月 1 日

她问是因为 theme.json 是 WordPress 希望我们开始为块主题移动基本样式的地方。传统上，我们会在 style.css 在“经典”主题中工作时。但是随着 WordPress 3 最近附带的默认二十二十三 (TT6.1) 主题将其所有样式移动到 theme.json，我们越来越接近能够对我们自己的主题做同样的事情。我在最近的一篇文章中对此进行了详细介绍。

我说“越来越近”是因为仍然有很多 CSS 属性和选择器不受支持 theme.json. 例如，如果您希望使用类似 perspective-origin in theme.json，它不会发生——至少在我今天写这篇文章的时候是这样。

安娜在看 box-shadow 幸运的是，CSS 属性受支持 theme.json 从 WordPress 6.1 开始。她的推文日期为 1 月 XNUMX 日， 6.1 发布的同一天. 对属性的支持并不是版本中的标题功能。较大的标题与块和块主题的间距和布局技术更相关。

这是我们如何申请 box-shadow 到一个特定的块——比如特色图片块——在 theme.json:

{
  "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) ——我什么都没有。也许这已经在进行中或者可以使用拉取请求。

容易，对吧？当然，这与编写 vanilla CSS 有很大不同 style.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 ——也获得了 theme.json 支持 WordPress 6.1。

{
  "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)"
          }
        }
      }
    }
  }
}

这是呈现的方式：

按钮的自然状态（左）和悬停状态（右）

另一种方法：自定义样式

最近发布 PIXL 块主题提供了现实世界中使用的另一个例子 box-shadow 财产 theme.json 使用替代方法定义自定义值。在主题中，自定义 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 覆盖这些样式，它比在中定义的样式具有更高的特异性 theme.json. 这是指向更多信息的锚定链接来自我之前关于管理块主题样式的文章。

更新： 原来有一个关于这个的完整讨论拉取请求 #34689，其中指出它已在 WordPress 5.9 中得到解决。

还有更多……

除了阴影，CSS outline 财产也得到了 theme.json 在 WordPress 6.1 中支持并且可以应用于按钮及其交互状态。这个 GitHub公关展示了一个很好的例子。

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

您还可以找到有关如何 outline 其他主题的财产作品，包括响度, 块画布及块基.