相对于#40778

虽然我认识到这一点的必要性，但我真的不认为我们应该使用伪选择器语法。AFAIK公司：当前不是有效的CSS伪类。我觉得我们应该预订：{选择器}仅用于有效选择器的语法。

如果我们想设计当前的样式，我们应该考虑另一种语法。

我找到的信息说：

这些伪类适用于查看具有计时的对象，例如网络VTT字幕曲目。

我不认为当前选择的Navigation元素具有规范建议的“计时”功能。你在野外见过一种用法吗：当前在导航上下文中使用？

我认为theme.json语法没有必要匹配CSS规范。theme.jsen是CSS到Global Styles可以理解的系统中的抽象，所以我们完全可以用适合块主题的方式来实现东西，即使它没有完全映射到CSS规范中。

@米提亚斯

我真的认为我们会走错方向。我们有一个既定的期望，即在主题.json（例如。：悬停)映射到CSS中的等效项（例如。：悬停).

这里提出的是，我们绕过了对单个给定用例的期望（即，仅仅因为它便于我们使用：当前指的是不伪选择器）。

我很感激我们需要优化用户经验超过开发商体验。然而，我认为从长远来看，所提议的方法可能会为更多这样令人困惑的边缘案例打开大门，人们需要记住这些案例。

让我们花点时间考虑一下我们真正为谁而优化。

我们有两种类型的“用户”：

1. 网站所有者
2. WordPress开发人员

我们可以很容易地保护“站点所有者”不受我们在主题JSON中做出的任何决定的影响，因为我们将Global Styles UI作为代码和用户界面之间的一层因此，我们在这里实际优化的用户是WordPress Developer。

IMHO要求开发人员在编写Theme JSON时记住一些随机异常，否则这些异常是明确的约定。

还要考虑一下，如果我们继续进行提议，然后再进一步，我们想添加一个：当前伪选择器<视频>元素，那么我们将无法做到这一点。这是因为我们将“用完”：当前选择器用于其他不相关的目的，因此无法使用：当前按预期方式选择。

我的观点是，我们应该想出一种替代语法，允许我们在Theme JSON中添加这些状态，而不会影响既定的约定并造成混乱。

这只是一个想法，但我们如何利用@来表示这些状态？

“核心/导航”：{“：悬停”：{“颜色”：“红色”},“@current”：{“颜色”：“热粉红色”}}

对我来说，这读作“在项目是当前活动的项目时的状态下，然后应用这些样式”。你怎么认为？

最后一点说明，如果/当“当前”状态在全局样式UI我完全期望它与其他“州”一起列出，例如：悬停,：焦点等。

@WordPress/block-themers你对这个提议有什么意见吗？我已经概述了上述论点，我们需要决定我们打算在这里优化谁。

IMHO无论我们在主题JSON中做什么，都应该为开发人员而不是网站所有者进行优化。站点所有者通过Global Styles UI体验样式，因此我们可以轻松“屏蔽”他们，使其免受我们在原始中实现的任何内容的影响主题.json.

IMHO无论我们在主题JSON中做什么，都应该为开发人员而不是网站所有者进行优化。站点所有者通过Global Styles UI体验样式，因此我们可以轻松地“屏蔽”他们，使其免受我们在原始主题.json中实现的任何内容的影响。

是的，我遵循这个逻辑。

我认为使用：当前这将是一个错误，并有可能进一步引发冲突。

我喜欢@格特戴夫使用建议@电流。这似乎是一个很好的折衷方案，并清楚地表明了状态（在命名中）。

我同意：当前可能不合适，并支持@前缀。
我还建议@已选择而不是。
不仅仅是一个状态，我认为它是一个块的变体，它可以有如下状态：悬停在里面。
可能没有意义：在里面徘徊@已选择用于导航菜单，但考虑前缀的更广泛语法@.

“@选中”：{颜色：{…}，：悬停：{颜色：{…}}}

跳出当前上下文进行思考，例如按钮具有诸如填满和概述，采用类似的语法有意义吗。将其带到讨论中，以获得更广泛的背景。

我的意思是使用前缀@或其他表示块的特殊变体。如果我们想设计大纲按钮的样式，可以使用相同的前缀表示，而不是在将来为此类场景添加另一个前缀。

按钮：{颜色：{…}，@大纲：{//或@filled颜色：{…}},}

不仅仅是一个状态，我认为它是块的变体

我认为我们在混淆变体的讨论时偏离了正题，应该将使用重点放在状态上。

IMHO无论我们在主题JSON中做什么，都应该为开发人员而不是网站所有者进行优化。站点所有者通过Global Styles UI体验样式，因此我们可以轻松地“屏蔽”他们，使其免受我们在原始主题.json中实现的任何内容的影响。

完全同意这一点，并希望+1@电流语法。

但如果我们坚持@为他们所有人？@悬停,@电流?

这是为了给已经有CSS类的菜单项设置样式，该类表示它是当前页面，对吗？
那就不会是：

“核心/导航”：{“：悬停”：{“颜色”：“红色”},“.current-menu-item”：{“颜色”：“热墨迹”}}

“核心/导航”：{“：悬停”：{“颜色”：“红色”},“.current-menu-item”：{“颜色”：“热粉红色”}}

我对此感到担忧的是，它可能会产生一种期望，即我可以在这里指定任何类名，并期望它能够正常工作，但这是不可能的！

此样式应适用于链接导航块中的元素。因此，我们得到的语法应该以通用的方式应用于所有链接元素IMO。

“核心/导航”：{“：悬停”：{“颜色”：“红色”},“.current-menu-item”：{“颜色”：“热墨迹”}}

我对此感到担忧的是，它可能会产生一种期望，即我可以在这里指定任何类名，并期望它能够正常工作，但这是不可能的！

是的，这是一个值得关注的问题：我认为将来不太可能支持更多（不是全部或自定义）类。

但如果我们坚持@为了他们所有人？@悬停,@电流?

然后我们回到最初的论点.

我已经将此添加到核心编辑器聊天议程看看我们是否能就此获得更多信息。

然后我们回到#42299（评论）.

我目前的观点是，虽然我们做了很大的努力，但将CSS映射到主题.json就伪类而言。通过将一些道具映射到CSS:还有一些没有通过地图@增加了复杂性。很少有人会记住这些，我们将介绍一个很好的写作机会@悬停和：当前想知道怎么了。

我完全同意使用CSS样式:因为在某些情况下不存在的道具是错误的，所以我个人倾向于使用统一的道具@因为我们将来可能需要块元素的其他更奇怪的状态@都被覆盖了。

再一次，我确实认为两者兼而有之理想的但同时拥有一种语法只是一种更好的体验。

啊，我明白了@德拉加内斯库。所以你建议我们使用@而不是:在所有情况下（有效的CSS伪选择器和为了明确CSS和主题JSON之间没有映射二者都案例。

这是一个有趣的替代建议。

@并非没有其自身的含义：https://www.w3.org/TR/css-syntax-3/#网址-规则

还要考虑一下，如果我们继续进行建议的工作，然后再进一步，我们想为添加一个：current伪选择器

我不确定这是否是一个合理的担忧。我们实施的方式：悬停和：焦点目前为止是关于link元素的。我不认为使用：当前控制链接元素的各个方面会阻止我们使用：当前当在块级而不是链路级使用时，要控制块的其他方面，会吗？

这肯定不是最后一次出现这个问题，我同意任何在CSS语法和主题.json会增加不必要的精神负担，并减少我全力以赴的可能性主题.jsonCSS公司。作为@马克·皮注意，当前菜单祖先是另一个被请求的类，可能很快就需要样式化，因此无论使用什么解决方案，理想情况下都应该适用于该类（或者有一个计划和为什么会不同）。

我更喜欢@卡罗来纳州人的建议。它映射到CSS概念.parent.child（.parent孩子）选择器，我可以想象，扩展它以支持任何与核心相关的CSS类将非常有意义，并可能解决许多类似的问题，例如#40778.两者:和@-以及~,+,::,>还有一些我确信我已经忘记了CSS中的got-have含义，所以它们应该保留为预期用途，特别是当其他选项可用时！

我还要指出，这种款式的商品应该有aria current=“页面”它映射到有效的CSS选择器[ariacurrent=“page”].有一个使用这样的选择器是一个很好的论据是确保正确标记到位的好方法，因为它不仅需要类，还需要赋予类语义的属性。这是一个不适用于所有类的解决方案，但它可能会激发其他人的想法（也许应该考虑属性选择器，以便更容易设计这样的样式输入[类型=“数字”].

好吧，我听到了@可能不受欢迎。是否有替代语法不是CSS词汇的一部分，可能在这里表示“状态”？

虽然我很欣赏这种逻辑并认为建议很有价值，但我也与大家分享@扒手的担忧允许在此处引入特定的CSS类可能会导致以下期望任何可以使用CSS选择器。

这又回到了我的观点，即我们应该避免人们需要理解太多关于在特定环境中什么是/不允许的“规则”。在这种情况下，开发人员需要知道，在特定的情况下，您可以在特定的位置使用特定的CSS选择器。我认为这是一种过度的认知开销。

也许有一种方法可以预先结束或嵌套选择器，以表示它是一种特殊情况？例如：

“核心/导航”：{“：悬停”：{“颜色”：“红色”},“状态”：{“.current-menu-item”：{“颜色”：“热粉红色”}}}

这清楚地将它与伪选择器区分开来，同时也有助于避免它会接受任何CSS选择器的印象？

我们还需要考虑，我们可能希望将伪选择器样式应用于当前项。例如，如何在上设置当前项的样式：悬停? 还是这太过分了？应该由自定义CSS处理吗？

我意识到这还远远不够完美，我不会做出任何决定，只是列出一些建议供考虑：男人鞠躬：

遵循咏叹调标签并使用：当前页面?

虽然我很欣赏这种逻辑并认为建议很有价值，但我也与大家分享#42299（评论）允许在此处引入特定的CSS类可能会设置可以使用任何CSS选择器的期望。

感觉这个问题真的需要一些高层讨论-我希望已经有了一些，虽然我还没有看到（2022年7月29日更新：以下是去年的一次小讨论)-关于CSS支持的总体规划范围主题.json（因此也包括全球风格？）。在我看来，支持全部的因此，讨论CSS的极限是非常有意义的。

一个可能有用的限制是将其仅限制为按核心输出的元素和CSS类（可能还包括注册的块样式？）。这将排除父上下文之类的内容（例如。，.wp-block-column.wp-block按钮)，自定义类(.wp-block-button.野生和疯狂阶层)和更高级的关系CSS选择器（例如。h2~.wp块按钮：第n个子（奇数）：最后一个子)这也让人觉得它与票中所讨论的“国家”概念有足够的一致性，比如#38694和#38998并成为一个有用的限制原则。

如果使用这种理想状态由提议@格特戴夫这对我来说很有意义。我想我会放弃.在选择器中减少与CSS选择器语法的相似性：

“核心/导航”: {“：悬停”: {“颜色”:"红色"},“状态”: {“当前-项目”: {“颜色”:"热情的粉红"},“当前菜单祖先”: {“fontWeight”:"大胆的"},“menu-item-has-children”: {“边框”: {“样式”:"星罗棋布的",“颜色”:"教皇职位",“宽度”:"0 0.25雷姆"}}}}

唯一的缺点是：悬停也是一种不同意义上的“状态”。如果这艘船还没有航行，那么把hover/foccus/active/checked/required等放在另一个对象（如“states”）中是个好主意。

我肯定认为我们应该从限制核心想要尊重并致力于自己生成的类开始。支持任何类的一个问题是，我们不控制类的输出，这将违反我们在theme.json上的约定，这是一种全面支持的基本功能，您无需担心它们是否被输出。

我不太喜欢给定的“states”对象：悬停也代表一种状态，处于外部。它似乎也是你会一次又一次忘记的事情之一（这是一个状态描述符还是根属性描述符？）。

从这个意义上说，这可能没问题：

“核心/导航”：{“：悬停”：{“颜色”：“红色”},“.current-menu-item”：{“颜色”：“热粉红色”}}

我想@贾斯穆森设计方案是一个很好的、易于理解的解决方案，用于添加功能块设置。我很想看到这个添加到导航块中。

我们在Slack中讨论昨天这个问题有多棘手(链接需要注册)但谈话结束后，我又一次很快地捅了一刀(肥姑妈):

存在此UI只有在Global Styles中，这里显示的模型本质上是为每个块的特殊状态添加类似样式变量的按钮。在这种情况下，对于导航块。

通过在预览上下文中显示这些按钮，并朝向检查器的顶部，下面的所有面板都可以在层次结构中处于较低位置，因此可用于特定的选定状态。通过互斥的切换按钮，我们还可以在其上为将来探索一个单独的层，即伪状态（悬停、活动、访问、聚焦），它将是每个状态之上的一个单独层。也就是说，我们可能会有一个单独的伪状态下拉列表，即下面的模型，该下拉列表可用于默认和“活动项”主要状态：

但就下一步而言，如果这里提供的模型与人们融为一体，我们可能真的会从麦琪建议的theme.json道具开始。这里的UI应该很好地映射到它，并且可以始终遵循theme.json实现。你怎么认为？我们可以让开发人员从theme.json片段开始吗？如果幸运的话，这可以达到6.4🤞

只是为了澄清这是我们的目标API

“核心/导航”：{“：悬停”：{“颜色”：“红色”},“.current-menu-item”：{“颜色”：“热粉红色”}}

我们需要调整模式以接受这种值。在我看来，它应该被锁定，只允许某些块上的某些“选择器”。我认为需要修改消毒PHP中主题JSON类的方法。

@德拉加内斯库明天我会调查一下。无法确定是否会达到6.4。

这里只需注意，我真的希望我们可以在将来将用于定义块中状态的API开放给具有自定义状态的自定义块：）例如，当前活动项的概念是选项卡块非常需要的元素。

我将其想象为创建所需的底层代码更改，以便将来将相同的概念扩展到其他块。所以会有一个块->选择器的白名单，就像我们有块到伪状态一样。

是的，我之所以提到它，是因为在伪状态下，它目前不可扩展，甚至不能被第三方块使用：）

仅供参考，我已经将此移到了进行中，尽管有设计反馈和工作要做，但我认为专注于主题。json first是一个很好的首次发布。我们可以创建一个后续问题，看看我们应该如何处理一般状态（例如按钮悬停等）

这个问题有意与样式化伪状态分开，这是因为一个伪状态可能会发生，而另一个也可能发生，而且还因为接口方面虽然需要将它们一起考虑，但最终您需要能够设置活动菜单项的悬停颜色的样式，所以他们在复合。对于伪状态，有#38277.

我的理解是，我们的目标主题JSON类似于：

“样式”：{“区块”：{“核心/导航”：{“元素”：{“链接”：{“：悬停”：{“排版”：{“textDecoration”：“下划线”}},“：焦点”：{“排版”：{“textDecoration”：“下划线-虚线”}},“：活动”：{“排版”：{“textDecoration”：“无”}},“.current-menu-item”：{“排版”：{“textDecoration”：“无”},“：悬停”：{“排版”：{“textDecoration”：“下划线”}},}}}}}}}

我的主要问题是如何嵌套伪状态，以便您可以设置当前选定项的悬停状态的样式。

建议的备选方案@MaggieCabrera公司和@邋遢鬼

“样式”：{“区块”：{“核心/导航”：{“.当前项目”：{“排版”：{“textDecoration”：“无”},“元素”：{“链接”：{“：悬停”：{“排版”：{“textDecoration”：“下划线”}},}}                   },“元素”：{“链接”：{“：悬停”：{“排版”：{“textDecoration”：“下划线”}},“：焦点”：{“排版”：{“textDecoration”：“下划线-虚线”}},“：活动”：{“排版”：{“text装饰”：“无”}},}}}}}

建议API

@德拉加内斯库,@邋遢鬼,@MaggieCabrera公司我离开Github坐下来，设计了以下API和实现：

• 修改主题JSON API以允许.电流-项目（语法待定）作为中任何块的顶级项主题.json
• 允许块确定在其实现中哪些概念映射到“当前”。例如，导航（项目）块是如何做到这一点的：
  

  gutenberg/packages/block-library/src/navigation-link/index.php

  第185至193行在里面a8c5605型

  	$处于活动状态（_A）= !空的($属性['身份证件'] ) &&获取查询对象id() === (整数)$属性['身份证件'] && !空的(获取查询对象()->$友善的);
  	$包装器属性=获取块包装属性(
  	阵列(
  	'班'=>$css类.'wp-block-navigation项'. ($has_子菜单?'有孩子的':'') .
  	($处于活动状态（_A）?'当前菜单项':''),
  	'风格'=>$样式属性,
  	)
  	);

• 而不是应用硬编码类名（例如。当前菜单项)块可以查询中央API（TBC），该中央API返回要用于给定块中的“当前项”的类名选择器。然后，块将该类名应用于其“当前”状态。

笔记

我们应该调查选择器API因为这可能允许我们通过块.json.

对api的一个不太面向实现的解释：

当前项目

我们提出了一个新的API，当这些项以某种方式成为最新项时，它允许用户设置块中当前项的样式，从而公开多个项。例如：

• 导航块
• 详细信息块
• 第三方选项卡块
  设置当前项样式的API允许用户设置其样式主题.json以及使用块编辑器UI的用户使用全局样式和块支持UI。
  对于他们来说，每个块都有一个名为“currentItem”的新键。

//...“核心/导航”{//...“当前项”：{颜色：{//...}}}

从当前项JSON设置的设置生成的CSS将以块通过选择器API定义的特殊选择器为目标。因此，块必须支持当前项，并定义用于应用样式的选择器。
对于用户，块支持和全局样式UI将允许他们将块支持的任何样式应用于当前项。

为什么选择当前项目

当前项样式之所以有用，是因为用户可以在编辑器中看到列表中的其他项（第一项、最后项、第n项）。如果他们想在可见的位置上设置样式，这在今天可以通过块样式UI实现。
然而，由于各种原因，当前是不可见的，在编辑时无法始终模拟。添加简单的方式来设计这些项目是一个强大的定制功能。
例如，导航块可以在子菜单级别和导航链接级别支持当前项。因此，用户和他们可以设置当前子菜单和当前导航链接的样式。

@德拉加内斯库根据你分享的内容，我有几个问题/反馈。

1. 导航块绝对是最容易理解的例子。它还与aria电流属性应该在.电流-项目清单项目。因此，“当前项”对我来说最有意义的其他类型的块是其他类型的情况，其中aria电流是合适的：面包屑块、分页导航、页面列表块，甚至地图和日期选择器。有一个好的论据用于实现这些样式的CSSaria电流作为选择器。
2. 我不太清楚什么是“当前”详细信息块，因为没有“一次一个”的限制细节（至少到目前为止，还存在添加HTML规范的争议）。它是否代表打开HTML中的属性？它是否代表：焦点或：聚焦-内状态（或两者）？也许它事件映射到：活动? 我真的有不知道将为细节块的“当前项”生成什么样式/选择器。

综合这两点，我觉得：

1. 这个.电流-项目样式可能只应称为“当前”，并且只应应用于使用aria电流属性。这让人感觉同样清楚，而且在各种各样的第三方环境中可能更有意义。
2. 使用打开属性-如果这是我的意图，这是我最好的猜测-是一个完全独立的概念，因此提供一个打开Details块的可样式状态。
3. 有趣的是，“打开”状态也可以应用于导航块。（令人惊讶的是，我认为在这个问题上并没有出现这种情况。）对于可点击的顶级项目，这些项目已经被扩展以显示其孩子。因此，我可以看到打开样式可能映射到打开属性，但也包括aria-expanded（变量扩展）属性。同样，这将清楚地映射到其他第三方块的需求，因为它与现有的HTML属性有直接连接。

潜在的take-home点：许多交互状态都有与之相关联的HTML属性和/或CSS伪选择器。（例如当前、扩展、甚至“被抓住”)由于CSS样式和HTML已经明确定义，因此尽可能将styles API基于这些样式和HTML是有意义的。

@贾斯穆森你认为如何利用Global Styles中现有的块样式变化控制？他们在理论上已经非常接近了。如果它们是1:1，那么我们可以从整体上改进它们——即使是像右插入符号这样简单的符号也会有助于传达。

在未来的迭代中，可能是一个带有可用控件的popover（如duotone），而不是一个完全不同的抽屉/面板。只是大声思考。🤔

从当前项JSON设置的设置生成的CSS将以块通过选择器API定义的特殊选择器为目标。因此，块必须支持当前项，并定义用于应用样式的选择器。
对于用户，块支持和全局样式UI将允许他们将块支持的任何样式应用于当前项。

嘿@德拉加内斯库👋

我可能误解了这一点，如果不是这样，请告诉我：）

当你说“块支持和全局样式UI”时，我把它读作单个块上的设置和全局样式中的设置。然而，目前选择器API仅用于在全局样式中配置的样式。例如，当块选择supports.color.background支持并将颜色背景选择器设置为自定义类，该类仅适用于全局样式中定义的背景色。不是在块的单个实例上设置的。（遗憾地=D）

这是否意味着这些状态（有点像已经存在的伪选择器）只能作为全局设置在站点编辑器中工作？

如果是这样，我认为这将非常局限于此API，因为当我们查看导航块时，最基本的站点通常至少有两个导航。一个在网站的页眉，一个在站点的页脚。它们几乎从不共享当前活动菜单项的相同样式，因为它们的背景颜色通常不同。此外，标题中的导航通常被视为主要导航，因此通常会应用更具视觉趣味的处理方式。

谢谢你提出的问题，它们非常有用。

@mrwweb公司我认为您已经准确地确定了伪类、HTML和ARIA属性，这些属性应该用于为用户确定“当前”的目标。这里描述的API并不是要取代它。

这个@电流API是一种通过主题json为主题开发人员定义样式规则，以及通过块支持和全局样式UI为用户定义样式规则的方法。目标就是要有解决“当前”概念的统一方法-然后在实现时应该严格遵循您所描述的。

更直接地回答你的观点区块作者在输出块的HTML时，可以并且应该使用伪类、HTML和ARIA属性不是这个@电流美国石油学会。API只允许块作者指定CSS规则输出的选择器。API也不会生成选择器，因为这样会不可能的太难涵盖所有可能性（例如，在导航块中，当前可能是子菜单，也可能是用户所在的链接）。

这是当前的想法，至少允许最大的灵活性，并尝试检查粒度-例如，如果我们为每个可能的状态实现一个选项卡，就没有办法实现良好的用户体验）。但如果这个API有看不到的差距，让我们来解决它们。

@法比安凯很好，我希望选择器API将用于所有功能。API允许定义选择器的用途，然后系统的任何部分、全局样式或块支持都应该“获取”该选择器并使用它。

简单地说，目标不受限制@电流设置为全局设置，但允许用户和主题开发人员设置全局块和元素以及每个块和元素的本地实例的样式。如果这需要“更新”其他API，那就没有办法了。

@德拉加内斯库

这个@电流API是一种通过主题json为主题开发人员定义样式规则，以及通过块支持和全局样式UI为用户定义样式规则的方法。目的是有一个统一的方法来处理“当前”的概念，然后在实现时应该严格遵循您所描述的内容。

谢谢你的回复。每个块指定唯一选择器的要点很有帮助。

我最想说的是，我认为现在的计划@电流据我所知，API感觉它很模糊，同时引入一两个状态可能是有意义的。您提到Details还支持“当前”样式，作为主题作者，我不知道该应用于什么样的现实世界状态。

如果还有其他@打开API，然后我可以看到一个或两个如何对许多块有意义：

• 导航将支持@电流和@打开
• 详细信息将支持@打开
• 面包屑块将支持@电流

我对CSS和HTML API的观点是，将主题.json尽可能使用现有HTML/CSS状态的API是消除这种模糊性的一种方法（无论实际实现如何）。

由于缺乏活动，从6.5版的板子上推送此消息。

安妮，谢谢你在这里更新。

在这个发行周期中，一些额外的内容主要集中在尝试使导航覆盖（移动视图）可定制以及改进移动断点检测上。这就是为什么这里缺乏活动。您可以在中阅读更多内容跟踪问题更新.

注意到中包含实物模型#38277（评论）也试图解决这个问题。如果开发者订阅后可以查看，我们将不胜感激！

我再次探讨了伪国家问题可能更简单的设计。该设计包括菜单项的“当前”状态。这是将此问题与其他问题合并的原因吗？如果没有，那么一个实现至少可以解决这两个问题！请分享您对其他问题的看法🙏