跳到内容
新问题

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

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

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

阴影:在全局样式中创建/编辑阴影 #57100

关闭
马杜苏丹德已打开此问题2023年12月15日·10条评论 ·由修复#60706
关闭

阴影:在全局样式中创建/编辑阴影 #57100

马杜苏丹德已打开此问题2023年12月15日·10条评论 ·由修复#60706
受让人
标签
全球风格 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json [类型]增强功能 改进建议。

评论

@马杜苏丹德
复制链接
贡献者

马杜苏丹德 评论2023年12月15日

这解决了什么问题?

这是的子任务#44651

当前实施(in#44651),插件提供四个预设阴影,用户可以使用主题.json它们出现在全局样式和站点编辑器中。

下一步,添加编辑功能或从编辑器创建阴影。

你建议的解决方案是什么?

以下是建议的设计。

自定义阴影.mp4

查找与此相关的更多讨论在这里

@马杜苏丹德 马杜苏丹德补充[类型]增强功能 改进建议。 全球风格 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json标签2023年12月15日
@马杜苏丹德 马杜苏丹德更改了标题在全局样式中创建/编辑阴影 阴影:在全局样式中创建/编辑阴影 2023年12月15日
@马杜苏丹德
复制链接
贡献者 作者

马杜苏丹德 评论2024年2月28日

@贾斯穆森 @richtabor公司我对阴影的编辑体验有以下想法。

当前状态:
阴影在全局样式和块设置中可用,并且都使用通用的UI组件来显示核心预设和主题预设的列表。

形象

从对话中在这里,新UI应该具有创建或编辑阴影的选项,但不清楚此新UI属于何处。

您是建议将同一面板(如上所述)设置为可编辑面板,还是将其设置为单独的组件?
我认为更好的地方是在全球风格的设置如下。我的想法基于调色板编辑/创作经验。

形象 形象

请分享你的想法。

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

我想@詹姆斯科斯特@萨克森F可能参与了一些最新的阴影设计工具(看起来很有前途!),所以我很感谢他们的投入。

也就是说,我不认为全球风格有一个顶级项目叫做阴影。对于越来越多的不适合排版、颜色和布局的控件,可能会有额外的空间。但是,如何构建这些信息#47369.

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

我可能会看到一个“效果”部分,您可以在其中管理阴影、过滤器、双色调和类似样式。虽然我同意全球风格中的预设管理需要一些总体设计关注。

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

我认为“效果”是最近由@richtabor公司对于类似的东西,但也不确定这是否是正确的单词。最糟糕的情况是,阴影和边框可能与面板匹配。

@马杜苏丹德
复制链接
贡献者 作者

创建#60706探索有关阴影编辑体验的想法。它的灵感来自调色板,并解决了以下问题。

  1. 分类违约,主题习俗阴影
  2. 默认阴影和主题阴影是可编辑的,但它们的名称不能更改(应该吗?)
  3. 无法在默认阴影或主题阴影下添加新阴影。
  4. 只有自定义部分允许添加和编辑阴影。

以下是初始UI

默认/主题阴影的编辑体验。

自定义阴影的编辑体验。

问题/疑问

由于阴影可以是单个阴影字符串的组合(例如:默认预设值概述有两个阴影字符串6px 6px 0px-3px rgba(255255255,1),6px 6mpx rgpa(0,0,1)一起成为最后的阴影),
编辑器应该可以选择在一个阴影中添加多个阴影。

此面板中是否应该有选项卡布局,每个选项卡对应一个子阴影?
形象

我确信这不是最好的想法,也没有在PR草案它选择了,现在只剩下阴影的第一部分。

此外,这一初步探索不包括颜色选择器为了影子。

@WordPress/gutenberg-设计@richtabor公司请建议完整工作流的UI。

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

到目前为止做得很好,看到这方面的进展令人兴奋。

这里最突出的是预览UI,这一个:

截图2024-04-15,15 15 51

无论是在块检查器中还是在全局样式中,它都不能很好地在imo中工作。在块编辑上下文中,您可以在画布上看到更好、更准确的预览,而在全局样式下,它们不是交互式的,所以我们可以继续显示itemgroup UI,这一个:

2024-04-15第15 17 53页截图

编辑器应该有在阴影中添加多个阴影的选项

对于这个功能的扩展,以及我们在短期内不必重新设计它,这个细节对我来说很重要。以下是添加/编辑自定义阴影的示例:

自定义阴影.mp4

要点击的Figma原型.

  • 单击+立即产生阴影
  • 单击阴影深入到编辑界面(类似于在“排版”面板中编辑“元素”)
  • 明细表中的项组列出了所有阴影
    • 无法删除初始阴影
    • 单击阴影可在弹出窗口中打开详细信息
    • 可以通过单击+
  • 省略号菜单允许您重命名、复制或删除阴影

你们怎么想?


我在公关中注意到几个小细节:

  • 缺少主题/系统阴影的“重置阴影”操作
  • “完成”按钮与标题不对齐。
  • 删除按钮不起作用
  • 不应删除系统阴影
  • 项目组中的按钮之间有一个双冲程

@马杜苏丹德
复制链接
贡献者 作者

马杜苏丹德 评论2024年4月19日

@詹姆斯科斯特谢谢你的设计。他们看起来很棒,解决了所有问题。

我有一个关于颜色选择的问题。在下面的设计中,你会建议如何选择颜色?

形象

我认为这将是类似的经验,如文本颜色选择面板。你能确认吗?

形象

我在公关中注意到几个小细节:
缺少主题/系统阴影的“重置阴影”操作
“完成”按钮与标题不对齐。
删除按钮不起作用
不应删除系统阴影
项目组中的按钮之间有一个双冲程

很抱歉,我没有注意第一次迭代中的详细样式,因为我的目标是快速提出一些东西。这些问题应与建议的设计一起解决。

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

我认为这将是类似的经验,如文本颜色选择面板。你能确认吗?

没错。UI应相同:)

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

一种潜在的备选翻盖设计;

截图2024-05-01,17 26 28
  • Drop shadow/Inset shadow选项现在是用于单击切换的分段控件。
  • 添加了一个光源控件,用于同时操纵X和Y位置。

@马杜苏丹德
复制链接
贡献者 作者

@詹姆斯科斯特新设计看起来很棒。我在第一次迭代中参与了其中。
你能从这里查看一下最新的更改吗#60706.
此外,已发布几个问题在公关中,请提出相同的建议。

免费注册 在GitHub上加入此对话.已经有帐户了吗?登录以发表评论
标签
全球风格 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json [类型]增强功能 改进建议。
项目
还没有
开发

成功合并拉取请求可能会解决此问题。

3名参与者