跳到内容
新问题

对这个项目有疑问吗?注册一个免费的GitHub帐户以打开一个问题,并联系其维护者和社区。

单击“注册GitHub”,表示您同意我们的服务条款隐私声明。我们偶尔会向您发送与帐户相关的电子邮件。

已经在GitHub上了?登录到您的帐户

样式:清楚地显示样式的层次结构(主题、用户、全局非特定、全局特定、本地等) #49278

正常开放
4项任务
跟踪人 #41232
安娜扎祖已打开此问题2023年3月22日·24条评论
正常开放
4项任务
跟踪人 #41232
受让人
标签
[功能]站点编辑器 与总体站点编辑器相关(以前称为“完整站点编辑”) [焦点]可访问性(a11y) 影响可访问性并需要相应审查的更改(例如标记更改)。 全球风格 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json 需要辅助功能反馈 需要可访问性的输入 需要设计反馈 需要一般设计反馈。 [状态]正在进行 跟踪正在进行的工作中的问题 [类型]增强功能 改进建议。

评论

@安娜扎祖
复制链接
贡献者

安娜扎祖 评论2023年3月22日

未检测到样式时

未检测到样式

当无法检测到样式(来自全局样式/theme.json等样式提供程序)时,不会显示任何控件。这消除了无法检测的继承样式(例如自定义css、浏览器样式)和空/未设置控件之间的混淆。请参见#43082用于其他上下文。

在全球范围内工作

在全球范围内工作

根据上面的约定,在设置值之前(在UI中或通过theme.json),面板都是空的。

在本地工作

在当地工作时,需要考虑三种状态:

继承的值
在本地工作

如果值是继承的(例如从全局样式继承的),控件将显示该值,并且标签具有表示全局上下文的紫色重音。悬停/聚焦标签会在工具提示中显示源代码。无法删除该控件,因为如果没有本地设置,将使用继承的值。

本地覆盖
本地覆盖

如果继承的值发生更改,则会在标签上附加一个蓝点。单击点会显示一个菜单,用户可以在其中重置为全局默认值,或将值推送到上游。某些控件(如背景图像,请参阅下文)可能需要额外的操作才能在本地“取消设置”该值。

本地样式
可以将样式添加到没有继承值的本地上下文中的块。这在UI中的表现与上面的“全局工作”案例基本相同:

在全球范围内工作

有一个警告:如果稍后添加此属性的全局样式,则本地控件将显示蓝点。

示例

除了上面的块空间示例之外,这里还有几个最近在其他问题中出现的其他示例。在每种情况下,编辑上下文都是文档的本地上下文:

灯箱
灯箱

背景图像
背景图像

故障

这并不需要一次性实现。工作可分为以下步骤:

重要注意事项

在上面的模型中,用来表示继承风格的紫色口音在实践中可能有点笨重。我们应该继续探索其他设计解决方案。

原始版本知道什么样式影响主题上的某些内容是很困难的(它是全局元素吗?它来自块类型吗?它是模板的局部元素吗?)。这已经在一些领域中显示出来,来自Custom CSShttps://github.com//问题/47946冲突风格的一般经验https://github.com//问题/45086https://github.com//问题/44931为了改进这一点,我们应该找到一种方法来清楚地显示样式的层次结构(主题、用户、全局非特定、全局特定、本地等)。在构建这一功能的同时,我们还应该考虑在进行设计时如何将某些东西推送到正确的级别,这与https://github.com//第44931期

图像

在大多数情况下,理解这种样式层次结构并不重要,因为您可以在没有可视化的情况下完成大部分需要完成的任务。您可以使用全局样式来设置网站范围的样式,也可以编辑页面以在本地设置样式。尽管如此,对于更复杂的会话,它可能对表面处理很有用,但由于很少需要表面处理,因此任何可视化功能的占用空间和UI权重都需要较小。

下面是一个使设计工具标签单击可显示继承:

图像

  • 单击标签以查看继承
  • 如果教皇有联系,那么这种联系应该是与继承起源的深层联系

为了使这个概念起作用,“颜色”弹出按钮收到了自己的标签。

想法?

@安娜扎祖 安娜扎祖补充需求设计 需要设计工作。 全球风格 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json [功能]站点编辑器 与总体站点编辑器相关(以前称为“完整站点编辑”)标签2023年3月22日
@贾斯穆森
复制链接
贡献者

作为风格继承的一个例子,它体现在以下几个方面:

  • 如果全局样式中没有设置字体,它将从浏览器样式表继承Times New Roman(尽管我认为我们可能已经将其覆盖为系统字体)
  • 如果将“深红Pro”设置为全局字体,则组将继承该字体。但组也可以在内部进一步设置自己的字体,例如DMSans。
  • 随后的嵌套组可以保持这种状态,创建一个深层继承层次结构,即Group集团全球风格浏览样式。

这里增加的细微差别是,在块编辑器中,我们不仅讨论CSS继承,还讨论全局样式继承,例如继承的内容/宽度。此外,您可以在“全局样式”>“块”中设置块默认值,然后在帖子中本地覆盖它。将来你甚至可能会参考colors(将此按钮的背景颜色设置为与全局文本颜色相同的颜色)。

最后,还有主题继承。您可以激活具有默认根填充的块主题。然后您可以创建自己的样式变体,它有自己的根填充。这里需要可视化您的样式变体正在替换theme.json中存在的根填充值。

分享这些例子作为解决这个问题的设计背景,理想情况下这样的设计可以解决这些问题,同时仍然是极简主义的,也许理想情况下可以导航到每个原点。

相关:

@贾斯穆森
复制链接
贡献者

我最终创造了#50659而不是更新这个。我很高兴关闭另一个并使用这个?让我知道。

@安娜扎祖
复制链接
贡献者 作者

这可能看起来很傻,但我已经把它联系在一起了。介意关闭你的设计并在这里分享吗?

@贾斯穆森 贾斯穆森补充需要设计反馈 需要一般设计反馈。和已删除需求设计 需要设计工作。标签2023年5月22日
@贾斯穆森
复制链接
贡献者

一点也不,另一个是错误创建的!更新了这个。谢谢安妮!

@安娜扎祖
复制链接
贡献者 作者

传递反馈FSE外联计划的快速改版测试呼吁强调了当前的痛苦:

当我更改标题类型h2的大小时,我希望查询块中的标题也会更改,但对我来说没有更改。然后,我认为进入查询块的Post Title块具有自定义大小,但具有默认大小。我查看了“样式中的块”部分,但它也有默认大小。摘录也有同样的问题,当我改变文本大小时,不要改变摘录。外观和线条高度也会出现。字体系列工作正常,可以预览更改。通过检查前端,我发现在查询块中获取默认值。例如,在标题中有.wp-block-query h2样式。我很困惑。我认为应该使用默认的h2样式,除非是定制的。

@贾斯穆森 贾斯穆森补充需要开发 准备好了,需要开发人员的努力和已删除需要设计反馈 需要一般设计反馈。标签2023年6月6日
@约旦设计 约旦设计补充这个[类型]增强功能 改进建议。标签2023年7月26日
@詹姆斯科斯特
复制链接
贡献者

在历史上,沟通一直具有挑战性的一件事是违约值。这里建议的标签处理方法以一种可以在所有控件中一致应用的方式有效地处理了这一问题。因此,可能有人认为可以通过使用紫色的“同步”颜色来帮助指示存在超出本地范围的连接,从而略微增加突出度。

下面是一个快速模型:

继承+本地样式

@贾斯穆森
复制链接
贡献者

因此,可能有人认为可以通过使用紫色的“同步”颜色来帮助指示存在超出本地范围的连接,从而略微增加突出度。

我明白你的来龙去脉,但我担心,当你看到一个完整的编辑器,有一个画布、一个顶部工具栏和一个更高的检查器,最后会出现一堆紫色斑点,这将不可避免地为真正的超级用户功能增加一些分量。在这种情况下,我不会高亮显示项目组中的项目-我仍会保持它的标签特定性(您仍然可以单击一个颜色项目,我们可以添加一个标签,您可以在弹出菜单中悬停)。

我想知道,我们可以在悬停时添加一些紫色吗只有? 我们还能对休息状态进行更温和的治疗吗?(也许我最近的AFK还在我的血液中,但回到这里,我甚至认为虚线下划线在这里太突出了🤔 )

@詹姆斯科斯特
复制链接
贡献者

我想知道,我们可以只在悬停时添加一些紫色吗?我们还能对休息状态进行更温和的治疗吗?

是的,如果我们认为一般的启发式是有意义的,那肯定是值得探索的。在这方面,我们可以考虑相反的机制:不是高亮显示设置为默认值的控件,而是高亮显示可能有一个蓝点或类似的东西。这也可以提供重置单个值的直接途径:

屏幕截图2023-07-31,10 59 13

@贾斯穆森
复制链接
贡献者

突出显示那些不是的,可能用蓝点或类似的东西。这也可以提供重置单个值的直接途径:

哦,这很有趣。因此,继承的任何内容,无论其来源如何,都会显示以编程方式检测到的值,但其他内容都有一个点。您示例中的滑块在两种状态下的外观如何?

  • 从全局样式继承
  • 本地重写

@詹姆斯科斯特
复制链接
贡献者

这些是我认为我们需要考虑的状态:

  • 继承的样式不能通过编程检测,例如自定义css或浏览器样式(这基本上是设计工具:更好地处理未设置/继承的值 #43082).
    • 替代上述内容的本地样式。例如,在全局样式面板中设置块的样式。另一种方法是在编辑帖子时向Group添加填充,而在全局样式中没有为Group块分配填充。
  • 继承的样式可以被检测到。
    • 替代上述内容的本地样式。例如,编辑帖子时本地设置块样式。

第二点是与用户沟通最重要的一点。

以下是上述方法的比较:

突出显示本地覆盖

蓝色斑点

突出显示从样式提供程序继承的默认值

紫色

@贾斯穆森
复制链接
贡献者

我认为这可能会奏效。@萨克森F @richtabor公司有什么想法,有什么细微差别吗?

@萨克森F
复制链接
贡献者

我喜欢用点来指示哪些属性已被覆盖。当以类似于注释记号的方式更改样式变体时,我们可以使用类似的模式。当有人将当地风格推向全球时,这些点就消失了,这是另一个很好的反馈。

@米提亚斯 米提亚斯提到了这个问题 2023年8月8日
17项任务
@萨克森F
复制链接
贡献者

正在复制响应在这里如果我们继续前进,我认为可以关闭它。

听起来我们可以将其分解为几个可交付的版本:

  1. 如果我们知道默认值,则始终在检查器中显示它们
  2. 突出显示这些样式的来源
  3. 如果局部样式覆盖全局样式,则用点表示更改(如图所示样式:清楚地显示样式的层次结构(主题、用户、全局非特定、全局特定、本地等)#49278(评论))它提供了重置和将更改推送到全局的快捷方式。
  4. 实现make-default/push-to-global功能

在进行开发之前,我们还需要澄清其他方面吗?我认为我们处于一个不错的位置,可以在出现边缘情况时进行处理。

@你知道riad
复制链接
贡献者

上述设计的一个缺点是,如果默认值为“3”,我想显式地将值“3”用于块样式/设置/任何内容。我的意思是,如果我切换主题或样式变化,我不想改变该值。我该怎么做?我只是“聚焦”输入,来回变换。这有点奇怪。

@詹姆斯科斯特
复制链接
贡献者

这是一个一点很奇怪,但我不认为这太糟糕。如果您想替换Figma中的全局值,并且它工作正常,则必须执行类似的操作:

半径

作为次要启示,我们可以提供一个操作,在一次单击中分离/取消与继承值的链接。要连接一个点,已经建议对方框阴影控件执行这样的操作,以自定义预设:#44651.

@你知道riad
复制链接
贡献者

对我来说很有用,只是想提一下,这样我们就会意识到这一点,并有意识地做出决定。

@詹姆斯科斯特
复制链接
贡献者

针对lightbox控件测试建议的设计,并尝试单击分离启示:

灯箱

我不完全确定我们是否需要它——在大多数情况下,我怀疑仅仅调整控制可能更容易。尽管如此,这是一个很好的方法,但我们可能需要比“分离”更直观的语言。

@你知道riad
复制链接
贡献者

@詹姆斯科斯特我还怀疑出于各种原因,我们必须将按钮与控件标签分开。

@詹姆斯科斯特
复制链接
贡献者

我更新了OP,以包括整个问题中讨论的设计的详细版本。我们可以(也应该)继续讨论,但希望它已经准备好用于开发。

@米夏尔扎普林斯基
复制链接
贡献者

我创建了一个非常首次且非常小的尝试,以解决显示特定值是否被继承的问题,并验证该方法。目前它仅适用于文本颜色:

#55952

@安娜扎祖 安娜扎祖远离的这个需要开发人员 准备好了,需要开发人员的努力标签2023年11月15日
@阿费西娅 阿费西娅补充这个[焦点]可访问性(a11y) 影响可访问性并需要相应审查的更改(例如标记更改)。标签2023年11月16日
@阿费西娅
复制链接
贡献者

@谢尔盖·比尤科夫@卡罗来纳州人我今天早上很快就研究了这个问题。Chimin很快注意到,关于“继承”样式/设置的任何信息都必须以可访问的方式提供。

看看这个模型,它似乎不太理想:

继承性反馈
  • 紫色:这只是一种颜色变化,不足以以可访问的方式提供信息。
  • 图标稍微好了一点,至少它很清晰视觉的指示。但不确定“unlink”图标是否合适。但仍然不理想,因为只有图标的控件具有固有的可用性和可访问性问题,应该避免。
  • 工具提示不应用于描述。工具提示的初衷是直观地显示仅图标控件的可访问名称。工具提示的使用应限于此目的。
  • 蓝点不足以说明问题。不久前,我们已经在模板列表中尝试了一个蓝点,并将其删除以支持可见文本。

理想情况下,为了让所有用户都能更好地理解和访问,可见文本总是更可取的。可能是这样的:

从全局样式/设置继承+用于禁用继承的UI控件。

免费注册 在GitHub上加入此对话.已经有账户了吗?登录以发表评论
标签
[功能]站点编辑器 与总体网站编辑器相关(以前称为“完整网站编辑”) [焦点]可访问性(a11y) 影响可访问性并需要相应审查的更改(例如标记更改)。 全球风格 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json 需要辅助功能反馈 需要可访问性的输入 需要设计反馈 需要一般设计反馈。 [状态]正在进行 跟踪正在进行的工作中的问题 [类型]增强功能 改进建议。
项目
还没有
8名参与者