+1个用于此💯 它应该列在#33447也是。

+1

抄送：@WordPress/gutenberg-design

嘿，乔恩。这看起来是一个良好的开端！

@贾斯穆森谢谢你的设计。它们看起来很棒！

我模拟了角度和深度控制，而不是X位置和Y位置，因为这看起来更符合人体工程学。

我喜欢这个想法，我想相信，公式应该将这些值转换为十、 Y（Y）（在CSS中应用），并在没有问题的情况下对其进行反向转换。
我将致力于这个转换（公式）并提供更详细的反馈。

通过单击加号应用预设阴影，这会在右侧添加一个项目

我希望阴影预设的行为类似于颜色。
会有的默认阴影（定义见古腾堡）和主题阴影（在theme.json中定义）

阴影预设可以是创建独特效果的多个阴影的组合。
例如

这是两个阴影的结果方框阴影：5px 5px 0px-2px#DDCFFF，5px 5 px#040DE1。

主题应该能够在中定义它们主题.json如下所示。

{“设置”：{“颜色”：{}，“阴影”：[{“name”：“双线”，“slug”：“双线”，“value”：“5px 5px 0px-2px#DDCFFF，5px 5px#040DE1”}, {...}]}}

长话短说：

因为预设可以有多个阴影，它们会成为预设变量（基于给定的slug），所以它们的UI体验应该略有不同。

以下是我的想法：

• 面板显示预设，就像设计建议一样（但同时显示默认和主题阴影）
• 单击预设时，它会添加一行（就像自定义阴影一样），但它会保持不变只读
• 它表示为预设，名称来自主题.json。
• 在全局样式下应该有一个新的部分，样式->阴影（类似于编辑调色板），可以在其中进行编辑。

这样，预设阴影可以应用于任何块，在全局设置中更改它将影响所有块。

让我知道你的想法。

我喜欢这个想法，我想相信，一个公式应该将这些值转换为X，Y（在CSS中应用），并在没有问题的情况下进行反向转换。

谢谢您！如果它让人头疼，不要花太多时间，如果需要的话，我们可以从更简单的开始。例如，我突然想到，可能不可能用这个设置来表示所有的长方体阴影配置，因为角度+深度组件假设X和Y值总是相同的。我们可能需要一个不同的角度组件，一个更像地图/网格的组件，这样才能工作🤔

我想想象阴影预设的行为与颜色类似。
有默认阴影（在Gutenberg中定义）和主题阴影（在Theme.json中定义）
主题应该能够在theme.json中定义它们，如下所示。

对。

单击预设时，它会添加一行（就像自定义阴影一样），但它仍然是只读的

感谢你提出这个缺点。我认为我们不应该制作只读预设，它们都应该是可编辑的。但在应用预设时，我需要考虑如何最好地在面板中对多个堆叠阴影进行曲面处理。让我带着一些新的模型回来！

在全局样式下应该有一个新的部分，即样式->阴影（类似于编辑调色板），可以对其进行编辑。

在这个模型上工作使我意识到我们当前全球风格的一个缺点。现在你有排版，颜色，布局。布局包括各种值——按钮的边距和块间距，图像的边框和边框半径。对于排版和颜色，这两个块（按钮、图像）具有对应的面板。但是，在Global Styles for Dimensions and Border中没有对应项，而是放在“Layout”中。

所以我不确定我们是否应该在全局样式中添加一个新的“阴影”。我认为我们应该：

1. 接受Global Styles有三个字体、颜色和布局，并在Layout下放置“Shadows”。
2. 更改全局样式，使其获得新的“边框和阴影”部分以及“尺寸”部分，以匹配每个块的面板。这将使“布局”部分继续存在于像Group这样有“布局”面板的东西中，但也将使“布局”部分不会成为不适合颜色或排版的东西的垃圾抽屉。

我们可能应该从1开始，因为2有一些复合效应。你怎么认为？

现在我对此做了一些修改，很明显，我之前考虑过的关于分层阴影的方法，是受#39427，不太可能适用于堆叠阴影。非常简单，预置可以包含所有堆栈，这意味着需要在弹出按钮中显示控制每个层的UI。我认为我需要探索一种完全不同的预设方法，正如已经指出的那样，这感觉是最薄弱的方面。我需要更多的时间来考虑这个问题。

一个问题-我真的很喜欢这个阴影发生器，默认情况下创建3个阴影。默认编辑器可能有这样的功能吗？然后，也许我们可以将每个单独层的高级编辑置于一个切换之后，这样您就可以单独编辑每个层了？基本上，任何非标准预设，例如示例中的锐角方形阴影，都会变成“高级”阴影。

基于探索，我有一些新概念要分享，希望第一个版本会更简单。

我想我们可以从预设的设计开始：

• 结构保持不变：边框和阴影→块名称，单击加号添加阴影，默认情况下添加默认预设。
• 不过，现在单击弹出按钮可以首先在默认预设和主题预设之间进行选择，预设只是类似样式变体的文本按钮，依赖于检查器预览。
• 齿轮可以让您使用现有的基本属性编辑阴影。为了简单起见，这样做会将任何堆叠阴影塌陷为单个阴影。
• 我们甚至可以在没有任何阴影编辑控件的情况下启动第一个版本，如果更简单的话，只需预设即可。
• 确定是否创建一个名为“Border&Shadow”的新部分，并将Border+Radius控件移动到那里（CC:@WordPress/gutenberg-design）将非常有用。作为一种选择，我认为我们应该把“阴影”放在“布局”下，Border和Radius现在就在这里。对于第一个版本来说，这可能是最简单的。

接下来将在后期编辑器中启用阴影：

• 我认为这需要决定全局样式类别（颜色、排版、布局）如何映射到块面板（颜色、排版、布局、边框、尺寸），如上所述。它们很接近，但并不完全相同，我们应该避免仅为阴影创建一个全新的面板。那么什么是放置阴影控件的好地方呢？此模型建议将“边框”面板重命名为“边框和阴影”。

不是第一次，但我认为有一个有趣的机会与用户界面联系在一起，用于编辑阴影。通过在不同深度堆叠多个阴影，可以创建美丽的自然阴影，我希望我们能包含一个实现此目的的算法，该算法可能是可控的，如下所示：

这并不是短期的，但一旦你使用了阴影编辑控件，默认情况下我们也可以提供出色的阴影。

你怎么认为？复写的副本：@马杜苏丹德 @邋遢鬼

这似乎很有效。我们甚至可以进一步双击预设，并通过在+菜单中显示它们来节省用户的点击次数：

这可能最适合使用专用部分，类似于Figma的“效果”面板。如果我们打算在未来支持过滤器和其他类似功能，这可能值得考虑。

很好，我可以看到进一步的简化工作。虽然我放弃了在ItemGroup中的20x20小区域中显示阴影预设的想法，但它没有足够的空间以这样的大小清晰可见，毕竟上面有一个预览。

不过，我不确定取消链接：ItemGroup的主要操作是什么？

这看起来真的很好！

不过，我不确定是否存在未链接

我认为另一种方法是删除/删除操作。但是，您无法从预设基础创建自定义阴影。

ItemGroup的主要操作是什么？

你是说点击会发生什么吗？一个选项是只打开阴影菜单：

我也喜欢预设的想法——我们用它们来表示字体大小、间距、颜色。。。也可能是阴影。为什么我们不重用现有的步进距离控制模式？如果按下图标，您将看到该预设的详细编辑视图，基本上与边界控件的工作方式类似。

其次，如果我们想合并其中一些面板，我们可以将它们打包为“效果”面板中的工具带项目。例如，边界很适合。

而且它不一定是基于整数的（可能是slug，但不是标签）。

我倾向于认为我们应该坚持ItemGroups打开弹出菜单的模式，因为在画布中有一个供后期编辑使用的预览，在全局样式检查器的右上角，简单的阴影图标对我来说是一个更好的起点。但也许我们可以跟踪PR，看看当我们走近时感觉如何？

如果按下图标，您将看到该预设的详细编辑视图，基本上与边界控件的工作方式类似。

我不太明白。你的意思是这样的吗？

虽然我们可以在弹出按钮中设置预设，但阴影的独特挑战在于，在theme.json中，您可以应用由多个单独定义组成的堆叠阴影，并将其设置为预设。这就是为什么我最终认为预置优先方法是最简单的开始方式。如果我错过了一个节拍，请告诉我！

预置优先方法的另一个方面是，像Madhu分享的这个例子一样，能够更创造性地使用阴影：

为什么我们不重用现有的步进距离控制模式？

我的直觉是我们需要更精细的控制。这就是说，我知道你从哪里来了——滑块的每一步理论上都可以代表一个预定义的标高。这和我的直觉是一样的这个模型在这里，我将网格上的每个点想象成一个“标高槽”，然后根据标高、灯光位置和滑块计算多个堆叠阴影。所以你仍然有这些预定义的步骤，但你也有方向性。

伟大的设计！🎆

阴影预设的下拉列表缺少主题预设。
你能两者兼顾吗违约和主题带标签的预设可能是？

还有一个关于如何调用它的问题。
所有样式部分都使用工具面板带有选项，例如单击时重置样式垂直点

你建议有一个+旁边的按钮？或类似的标签添加阴影作为选项之一？

@马杜苏丹德我不认为我们应该使用即时下拉菜单，我仍然认为最好使用带有弹出模式的ItemGroup，该弹出模式使用与样式面板中相同的按钮显示“默认”和“主题”预设。不过，我们暂时可以省略“设置”图标。

这将使阴影控件暂时成为单个控件，因此还没有任何堆叠阴影。我还不确定如何最好地对这种堆叠阴影进行表面处理，但我倾向于如果我们这样做的话，它可能应该在弹出按钮中，因为预设本身可以作为堆叠定义。

这将使阴影控件暂时成为单个控件，因此还没有任何堆叠阴影。

从UI的角度来看，这将是一个良好的开端。

对于上下文，堆叠阴影不一定总是来自预设。
A类主题开发人员只能在中定义按钮的堆叠阴影（不是主题预设）主题.json这是一个定制的叠加阴影。在这种情况下，我们应该如何表示阴影应用于块？

在第一步中，由于没有编辑控件，UI应该以某种方式指示应用了自定义阴影，因为从主题.json已经可以了。

最终，它应该是双向的。
从用户界面设置自定义或预设阴影（单个或堆叠）。
分析自定义或预设阴影主题.json并在UI中显示。让用户编辑它。

我倾向于如果我们这样做的话，它应该在弹出按钮中，因为预设本身可以是堆叠定义。

我不确定是否最好从按钮样式面板编辑预设（本质上是全局的）。
用户可能认为他们正在编辑的阴影是针对按钮的，但因为预设是全局的，所以它们可以影响正在使用它的所有其他块。

但从另一个角度来看，用户可能希望对预设阴影进行微调，并应用于按钮。
我想，在编辑方面，最好是预设复制为自定义阴影，并应用于块。

我在考虑颜色，我无法更改默认或主题调色板颜色，例如主要从按钮样式面板。
我必须从全局样式->颜色中编辑它们，因为它们影响一切。

对于上下文，堆叠阴影不一定总是来自预设。
主题开发人员只能在theme.json中为按钮（而不是主题预设）定义堆叠阴影，它是一个自定义堆叠阴影。在这种情况下，我们应该如何表示阴影应用于块？

我假设这个阴影定义会直接来自theme.json？好问题。我们可能需要一个接口来实现这一点，但在不久的将来，在“主题”部分添加一个“默认”按钮是否有意义，它体现了这一点？

我不确定是否最好从按钮样式面板编辑预设（本质上是全局的）。
用户可能认为他们正在编辑的阴影是针对按钮的，但因为预设是全局的，所以它们可以影响正在使用它的所有其他块。

哦，我不是在这里谈论编辑预设，这可能是一件单独的事情，与#44417.如果我误解了什么，请告诉我。

也就是说，我可以理解，我们需要既能将预设应用于块，又能将完全自定义的阴影添加到块，并且我们需要能够在每个块的基础上在本地实现这一点，以及在默认情况下在所有按钮上实现全局应用。对吗？

这看起来真的很好。下面是一些我还没有提到的框阴影需要考虑的重要事项：

• 悬停状态
• 主题.json默认值
• Inset值

这是Blockify主题中如何处理每一项的屏幕记录：

只更改其中一个值将启用方框阴影，并从主题继承其余值。这也适用于悬停状态，该状态继承了未设置值的默认状态。

我们还应该考虑从一开始就增加对Inset值的支持，因为这在未来可能很难添加。

也就是说，我可以理解，我们需要既能将预设应用于块，又能将完全自定义的阴影添加到块，并且我们需要能够在每个块的基础上在本地实现这一点，以及在默认情况下在所有按钮上实现全局应用。对吗？

这是正确的。这将是最后一个进球。

这仍然是我们应该做的。我喜欢新的模型工作，以及后续的开发工作，但我承认它看起来很接近。

我认为这张纸条很好。它是完全封闭的，没有高曝光率。

@贾斯穆森 @里奇塔博如果我从6.3项目委员会? 我们几乎没有时间进行增强。

如果我从6.3项目委员会？

当然可以。

再次访问。@萨克森F有两件事我无法在你的概念中描述在这里:

1. 如何去除阴影？
2. 如果预设阴影（例如自然）有多个道具，当您单击设置切换时，这些道具是如何显示的？

如果预设阴影（例如自然）有多个道具，当您单击设置切换时，这些道具是如何显示的？

@詹姆斯科斯特这是一个好观点。我们必须做一些像菲格玛这样的事情，这对我们来说现在很复杂。如果我们可以开始建立一些关于何时使用vs定制的指导方针，我对“unlink”方法很满意。

如果我们可以避免添加一个新的模式（unlink），那么这可能是最佳的，所以这就像尝试回答上述问题一样。下面是一个尝试实现这一点的示例：

预设阴影可以通过popover移除（颜色popover中存在类似的图案）。如果有一个-按钮中的项目同样，这也可以很好地处理颜色，但不是必需的。

设置图标位于阴影面板标题上。单击它将分离预设并显示每个预设<道具>作为单独的项目。

这种方法有两个潜在问题：

1. Shadow需要保留自己的专门小组（我不清楚这有多重要）。
2. 无法堆叠预设阴影。

希望这能激发更多想法。

@詹姆斯科斯特回到这里，我想你的取消链接模式也许是最简单的起点，让我们向前迈进。当我们扩展其他工具时，我们可以重新访问整个unlink vs customise模式。

@马杜苏丹德我认为我们可以在这方面取得进展，并在开发过程中进行协作，因为我们希望这适用于6.4。

@詹姆斯科斯特介意把我们6.3中的设计更新到最新吗？例如，下面是我们现在的情况：

这将帮助开发人员更快地移动，并确保我们不会意外后退。

@安娜扎祖我用最新的设计更新了OP。

为了便于开发，剩下的工作被分解为单独的问题。以下是工作的当前状态。

• 通过theme.json为块添加box-shadow支持 #41972
• 阴影：通过theme.json添加阴影预设支持 #46813
• 向块添加方框阴影支持（现在使用代码编辑器）。 #46896
• 阴影：在全局样式中添加阴影预设和UI工具 #46502
• 阴影：在块设置中添加阴影（站点编辑器） #57101
• 阴影：为更多块启用阴影 #57103
• 阴影：在全局样式中创建/编辑阴影 #57100

状态更新

• 阴影：在块设置中添加阴影（站点编辑器） #57101-已准备好进行审查。现在，我们可以根据各个块是否支持该功能，在其上显示效果/阴影面板。
• 阴影：为更多块启用阴影 #57103-已开始为上一个PR中的阴影添加块支持。对按钮块所做的更改可用于指导其他块实现阴影支持。

在之后创建测试块支持的请购单#57101已合并：#57982

大家好，
我想检查一下，看看6.5版还剩下什么？看起来与我能说的很接近。

我们正在寻找更多的测试或添加更多的块支持吗？

我还想知道我们是否可以删除需要设计反馈标签？似乎超出了这一点。🤔

感谢你的出色进步。

想登记一下，看看还有什么可以为6.5做好准备？看起来与我能说的很接近。

除了按钮块和块内样式外，我们还针对更多块启用阴影支持。我们正在处理有关控件放置的一些反馈在这里

确认两个PR列在板中后，从6.5中删除此问题#57103&#57101因为这更多的是一个工作的概述问题，而不是基于任务的问题。

我一直在测试6.5 Beta版中长方体阴影的状态，也使用了theme.json中的阴影预设，我想知道如何删除核心长方体的阴影预设？

在屏幕截图中，前五个来自核心，自定义预设从红色开始。我不想提供太多选择，并删除所有核心预设或单个预设。

我应该为此创建一个问题，还是它已经内置了？

@前列腺增生有一个通过theme.json选择加入或退出的拉入请求#58766

谢谢你@卡罗来纳州人

我更新了OP的“设计”部分，根据中正在进行的工作更新了一些模型#57100。

阴影现在可以在编辑器中创建/编辑。
将此问题标记为已完成。🎉