此问题涉及中讨论的一些概念#36082和#35607和#42085

我对将布局抽象为一个概念，而不是像行/列/组这样的专用块的想法表示赞同。我很好奇与需要布局的语义块的关系。。。导航、社交链接、图库等。我的假设是他们只是“支持”布局，用户在使用这些块时会找到相同的面板。

如何看待固定列在嵌套容器上工作？

我很欣赏这里的大多数示例都是为了演示完整的功能，但最好是对智能默认值进行构思，并确定默认情况下要公开的最小控件数，这样我们就可以避免出现压倒性的初始体验。

干得好。这很全面：）

迷人的探索，也感谢分享精彩的互动演示！

该提案包括围绕创建单个容器块的几个更改

对于围绕Group、Row和Stack块的一些上下文，它们都是一个Group块，但使用块变体API在编辑器中根据其布局设置显示为不同的概念块。此时，Group块似乎是编辑器中的规范容器块获得注册当编辑器启动时。

因此，（至少在API术语中），我们已经有了一个从块类型本身抽象出来的布局概念，可以在块.json级别。Group块可以选择（几乎）所有内容，这些变化可以看作是布局设置的一种预设。例如，如果您取一个Row块并将方向切换为垂直，看起来它会将其转换为Stack块，但实际上它仍然只是具有特定Layout设置的组块。以下是堆栈变量在序列化为标记时的存在方式：

<!-- wp:group{“布局”：{“类型”：“flex”，“flexWrap”：“nowrap”，“方向”：“垂直”}}--><div class=“wp-block-group”><!-- /wp:组-->

考虑到这一点，这项提议似乎有几个不同的部分：1）对控件的更改以及哪些控件出现在布局面板中，2）引入网格布局类型，这与现有的流和灵活布局类型不同，和3）是否能够调整网格布局类型的子级大小以确定特定网格布局？

为了实现这一点，如果有一个额外的Grid布局类型，那么它也可以作为Group块的Grid变体在编辑器中公开。这样，用户可以通过现有的变体切换、用于在布局类型之间切换的新UI，或通过调整布局设置，将组块从默认流布局切换到网格或切换回网格？

当涉及到现有的概念块（如Group和Row）时，在编辑器中保持块命名的一些语义差异的好处包括：

• 一个用户希望两个或多个块位于同一行，但不关心每一个的布局-例如，我有一个网站标题和一个网站徽标，我想把它们放在标题中，所以我要找到“行”块。或者，我将它们“分组”，然后将“组”切换为“行”。
• 一个用户想要将一篇博客文章中的两个或多个区块组合在一起作为标注或旁白-例如，我有一些解释性文字，所以我将突出显示一个标题加上几个段落，单击group按钮，然后添加边框和背景色，使其看起来更像一个标注。

容器块的所有子块都具有可访问的大小属性，从宽度开始，但也包括填充和边距。

我真的很喜欢子块能够设置其宽度或列跨度的想法，其中一件很酷的事情是，如果Gallery块也支持它，那么用户可以设置图像网格，然后选择特定的图像跨越多个列，从而具有可自定义的马赛克式布局。

宽度可以设置为
填充基本上是弹性增长1
适合弹性增长0

对于这些类型的布局选项，您是否记得布局控件正在定义flexbox布局或CSS网格方法？

谢谢分享这些想法！

我们需要考虑的一件事是反应性行为。在当前的Columns块中，这表现为“移动堆栈”设置，但也可以设置以像素为单位的固定宽度，并完全取消设置宽度，这样一列就可以占用剩余空间。例如，这允许我们构建经典的固定边栏/响应内容区域布局。

默认情况下，柱捕捉到12柱网轴线
列处于“填充”状态（占用剩余空间）或具有设置的列宽

我很好奇12-col底层网格如何在固定/可变列宽的混合上下文中工作。无论屏幕大小如何，网格始终是12色的吗？固定像素宽度的列会忽略它吗？

这是一个非常酷的演示！我喜欢沙箱来测试功能！

我们需要考虑的一件事是反应性行为。在当前的Columns块中，这表现为“Stack on mobile”设置，但也可以以px为单位设置固定宽度，并取消设置宽度，以便列可以占用剩余空间。例如，这允许我们构建经典的固定边栏/响应内容区域布局。

这也是我立即感到好奇的。现在，古腾堡真的没有太多选择来控制屏幕缩小时的变化。在任何情况下，如果我想要更复杂的东西（比如3列移动到2/1而不是1/1/1），我通常会切换到行阻止并创建一些自定义CSS。

我花了更多的时间来思考这一点，并对上面的内容进行了迭代，以达到下面的目的。

所有容器块（例如，组甚至查询）和子块的布局和维度设置一致。我们根据块的设置以及某些情况下的子块设置来推断块是flex、grid还是auto。我们还根据子宽度设置推断出“内部块宽度”切换，并隐藏复杂的宽度/内容宽度设置，除非需要。

Saxon，我一直很欣赏你对UI/UX挑战的投入。干得好。

我很难从您所做的组件和检查器更改中提取Layout片段。我理解为什么上述组件的压缩可能在您的决策中起到了一定的作用，但它仍然会使与正在运送的内容相比变得有点棘手，因为可视增量更大。

你的模型上有两段即兴表演，看看我是否理解正确：

@贾斯穆森看起来差不多。有一个实验分支正在运行在这里我们将使用它来处理其中的一些更改。

很好，我把树枝转了一下，在那里留下了一些评论。

我也在这方面做了一些探索，主要是想找到一种方法，将我们今天所拥有的东西与更简单的东西融合在一起，同时也具有灵活性。

对齐/调整矩阵

喜欢@詹姆斯科斯特在中进行了探索#49448，我认为我们可以使用Figma使用的矩阵控件，在增加更多灵活性的同时，进一步精简。

对齐（分布）选择

一种设置块在布局中分布方式值的方法。即，之间、周围和均匀的空间。目前我们只支持介于两者之间，但使用select可以让我们灵活调整这一点，而不会使UI更加复杂。

我不是100%在标签上——可能是“Distribution”或“Districate”或“Space”（尽管我们在其他地方也有块间距）。

嵌套宽度

压缩Group块中存在的当前布局内容控件的方法。

• 不要总是显示内容/范围输入字段，而是利用现有的设置图标模式来显示其他控件。
• 使用ToggleGroup来命名选项，而不是切换到打开其中一种模式（令人困惑）。
• 使用基于值的相对帮助文本。
• 如果有自定义内容/范围输入值，则布局属性设置为“受约束”。
• 这就为Stack块提出了布局约束，因为Group块基本上是一个延展性较小的Stack块，但Stack当前缺乏对宽度的支持，因此如果需要，您必须使用Group。这将为一致使用Stack铺平道路，而不必决定是否需要Group或Stack。
• 标签上也不是100%，但它可以工作。

还有空间可以添加一个“Items”选项，用于将布局中的项目设置为对齐-项目：拉伸或其他。

我还探索了在Wrap中使用复选标记/减号（重置）。也许一个“包装”图标比一个复选标记更好用？

使用矩阵控件将对齐和对齐选项的子集与其他选项（空格和拉伸）的单独控件合并在一起，会引发几个问题：

• 在这种情况下，受约束的布局将如何选择？它会是二级控制中的一个选项吗？编辑：仔细想想，问题可能是当布局受到约束时，显示矩阵控件更有意义吗？我们需要理由选项，但不需要对齐。

• 如何同时应用拉伸和间隔？假设预期状态为“布局”：{“类型”：“灵活”，“垂直对齐”：“拉伸”，“justifyContent”：“空格-中间”}。如果我们最终需要对对齐和对齐进行单独控制，那么矩阵真的有用吗？（或者可能@萨克森F的主意将矩阵作为工具栏控件进行快速调整，与侧栏中更全面的控件相比效果更好）

• 当从其他控件中选择选项时，我们将如何管理矩阵控件中的选择状态？假设我们将矩阵设置为“布局”：{“类型”：“灵活”，“垂直对齐”：“底部”，“justifyContent”：“右侧”}然后我们选择了一个“space-between”的理由。矩阵状态是否发生变化？

• 矩阵在网格布局中的使用会像在flex中一样直观吗？

布局受限时显示矩阵控件有意义吗

我希望矩阵只出现在行、堆栈或网格变量上。我认为我们可以从这些块上的布局开始，然后在解决了这一问题之后，找出内容约束如何在该上下文中更好地工作。

如果我们最终需要对对齐和对齐进行单独控制，那么矩阵真的有用吗？

如果是这样的话，那么就不是了。但有一点需要说明的是，使用封面块中的矩阵有多么简单。是的，这是一个相当简单的模型，但我认为它值得探索。

（或者可能@萨克森F的#49448（评论）将矩阵作为工具栏控件进行快速调整，与侧栏中更全面的控件相比效果更好）

我们应该在这两个领域都有类似的控制（如果我们要同时拥有这两个方面）。与站点徽标块的演变过程相同，工具栏中有一个控件来替换媒体，检查器中的交互非常类似。

我不知道在工具栏中有一个覆盖块矩阵，但在检查器中有不同的选择控件是否可行。也许矩阵同时存在，但可能太多了。

当从其他控件中选择选项时，我们将如何管理矩阵控件中的选择状态？

我认为矩阵选择将根据对齐和对齐值以及行/堆栈变量进行调整。如果设置为拉伸，则可以选择三个较高的区域，而不是九个单独的区域。我还没有被矩阵说服，但值得再研究一点——它确实对封面块很有用，我们需要看看是否可以扩展它（以及它是否仍然简单/容易）。下面是一个粗略的视觉效果：

矩阵与网格布局一起使用（一旦我们支持内容的合理性并将项目与网格对齐）会像使用flex一样直观吗？

矩阵是不必要的，但我也不认为我们会需要用网格对齐/对齐项目。

--

喜欢这种想法。🖤 我想记住的一点是，我们不需要在UI中直接实现CSS规范。这是最有价值、最具影响力的控件，可以实现不同的布局结果。布局必须简单直观。

好主意到处都是。退一步，这里显示的所有参数都是有效的，值得进一步研究。一位朋友描述布局，因为它存在于插入USB密钥的位置，因为由于控件的复杂性，需要两次尝试才能使其正确😅

我认为，这就是为什么它如此重要，如果我们更新这些控制和基础，我们最终会得到非常直观的结果。原型是一个很好的测试平台，但它也对我们的组件和现有模式提出了一些挑战。比如使用现有的间隙措辞和控件，找到一种不那么强调的方式来切换换行或不换行，或者使用现有的行/堆栈图标而不是箭头，至少在第一次迭代中，只要我们仍然有不同的容器块。矩阵控制是一种有趣的方式，可以使它在空间上更直观，尽管在这里很难说明柔性和包装，也许这没关系？

矩阵是不必要的，但我也不认为我们会需要用网格对齐/对齐项目。

当网格子对象的大小不完全相同时，可能需要使用它们。这是一个代码笔并举例说明我的意思。

也许包含现有的行/堆栈图标，而不是箭头

这对其他具有柔性布局的块（如按钮或导航）有效吗？我想我们可以使行/堆栈图标在板上表示水平/垂直，但是否可以将与Group相同的切换控件添加到所有具有可配置方向的块？这将需要重新布线，因为目前这些控件与块变体绑定。

这是否适用于其他具有灵活布局的块，例如按钮或导航？

对，提出正确的观点。但事实上，我们在顶部有两个变换，现在还有其他图标做同样的事在布局面板中，无论解决方案如何，仍然建议我们需要在此进行迭代。无论是删除顶部的图标，还是使用更通用的布局图标，甚至从布局中删除方向控制。也许还有第三种选择？

在此处提供更新，并进行进一步迭代@里奇塔博我一直在探索。

有两个选项，这两个选项都添加了以下内容：

• 将填充和边距移到布局面板
• 移动布局下的尺寸面板
• 使用矩阵对齐
• 可通过间隙内的更多菜单（或对齐，如果这样更有意义）访问间距
• 宽度和高度始终可见，并遵循列出的规则
• 使用垂直方向时，子块默认设置为填充（拉伸）

选项1：将组与堆栈合并
这是对已经完成内容的迭代，因为我们仍在通过添加额外的“内容宽度”属性来合并堆栈和组。我们实际上已经在POC分支上有了这个，但我们添加了上面列出的几个更改。在此场景中，其他容器块（如Buttons和Navigation）将采用相同的布局更改。

选项2：保留组
第二个选项是暂时保留Group块，并在开始时重点更新Stack和Row。在这种情况下，我们可能只需在按钮和导航编辑等其他块上保留方向控制：或将布局选择移动到层面板中。

将变体选择移动到层面板

在这种情况下，我们可能只需在其他块（如按钮和导航）上保持方向控制。

我担心更改布局工具而不对所有具有布局的块进行测试会导致我们走上错误的道路。不同块类型的控件应该是相同的，所以我们需要确保它们适用于所有不同的块类型。

我同意你的观点@告诉机器选项2的另一种选择是将块变量选择（组、行、堆栈、网格）移动到层面板中，以便所有块都可以访问它（我认为@里奇塔博正在玩弄这个想法）。也许这是一个更好的起点，因为它与选项1一致，只是没有内容宽度控制。然后，我们可以决定删除组差异以支持内容宽度属性，或者将其保留在该属性中。

取得了巨大进步。通用块图标的使用感觉向前迈出了一大步，一般来说，将它们从顶部的“描述性”区域移出在这里效果很好。我想知道这是否适用于我们展示这些转换的其他地方？也许不是，但也许这表明其他地方可能根本不是正确的方法（例如：#46195).

“Wrap”是/否太突出，无法占据整排。添加它是因为它允许一些有用的响应细微差别，但看起来我们仍然可以有一个默认选项，然后有一个更隐藏的选项来切换它。也许它可以位于省略号菜单中？

非常重要的是，我们有意使用术语，选择“块间距”而不是“间隙”作为“间隙”的更明显替代。我知道这很重要@米提亚斯感觉也很强烈。我意识到这个词的长度使它很难适应这个空间，但无论如何，在堆叠版本中，滑块对我来说都没有那么成功，而且我们可能最终会导致翻译问题，最糟糕的情况是德语翻译可能是“Zwischenraum”。

最后，至少在第一次迭代中，将填充和边距与布局面板分开可能是值得的。我看到了将它们与布局面板统一的论点，但如果我们要将它们从Dimensions移到layout，也许必须同时在所有这样的面板上进行？

我喜欢将变体选择移动到布局面板。很容易看出这对所有容器块都有效。IE允许在网格中排列按钮。

Gap控件看起来有点奇怪，我认为其他地方没有输入+范围的垂直配置。还有其他选择吗？

我不太喜欢将变体移动到布局面板，因为它打破了他们旨在提供的层次结构和一致性。更改布局也会更改块变体，块变体在块图标中表示，并且在外观子面板之外相关。变量可以在更高级别渲染，因为它们也可以在块插入器和块转换中直接访问。将它们移动到属性面板中会打破我认为非常重要的心理模型。

我不太喜欢在布局面板上移动变体，因为它打破了它们旨在提供的层次结构和一致性

只有一个块（组）使用变量在方向之间切换，而有多个块依赖于布局工具。对于Buttons和Social Icons之类的块，让方向开关成为块变体感觉有些过分，我们还需要考虑已经使用布局的第三方块：删除布局面板中的方向开关将破坏这些块的兼容性。

Tbh我不完全相信集团的不同布局是有意义的；它似乎表明我们有不同类型的容器，而我们实际拥有的是一个具有不同方式组织内容的容器。

它似乎表明我们有不同类型的容器，而我们实际拥有的是一个具有不同方式组织内容的容器。

是的，尽管你可以开始通过插入器添加一行或一堆块是有益的。

从添加一行或一堆块的意图开始是有益的，即通过插入器。

嗯，是的，这一定是使行和堆栈变化的原因。

我想关于方向控制，我们有两种选择：

• 将其保留在所有区块的布局面板中，并删除Group的区块变化控制，以避免重复；或
• 将特性添加到布局以隐藏方向控件，并使用该特性仅为“组”隐藏它们，同时保持块变量控件不变。

第二个选项的缺点是在布局工具中引入了不一致性，但这可以通过使用与我们用于组变量的水平/垂直/网格方向相同的图标来缓解，因此即使控件位于不同的位置，它们也会看起来类似。

次要反馈：我们可以切换宽度和高度吗？既然我们从上到下和从左到右阅读布局，那么让我们先看水平，然后看垂直-至于填充、边距和图像纵横比（刚才看到图像和特征图像之间不一致）

其他问题和注释：

• 填充/边距不再显示在“尺寸”部分中。这是故意的吗？
• 我不确定是否将尺寸从“样式”选项卡移动到“设置”选项卡。我喜欢同时控制背景色、填充和边框。
• 我正在使用带有自定义间距预设的主题（例如在这里)，因此我也希望“Gap”是全宽的。还支持长翻译的参数。
• 我经常通过列表视图对块进行分组，然后将它们更改为行或堆栈。特别是如果这将被实施我更希望这些变化不会被移动到布局面板上——在顶部，它们更像是转换块的“快速链接”。

@告诉机器将方向反映为布局属性是可以的，我的意思是，这不应该意味着将变量函数重新定位到布局中。组块的变化更高。我们使用它们进行变换；多选；在列表视图中；我们在插入器中暴露了它们。它们为您可以使用布局表达的内容提供了直接的心理模型，而无需了解布局属性的复杂性。我认为这是一个以用户为中心的重要设计原则。其他利用布局工具的块（按钮、社交图标、导航）可以只依赖方向，因为那里的心理模型和上下文有点不同。

将方向反映为布局属性是可以的，我的意思是，这不应该意味着将变体函数也重新定位到布局中

@米提亚斯你能就你所期望的那种体验澄清一下你在这里的意思吗？听起来你可以选择#2 @告诉机器上述内容。事实上，我们目前有一个改变组变量的方向控件，这也在某种程度上打破了层次结构（从用户的角度来看）。

其他利用布局工具（按钮、社交图标、导航）的块可以仅仅依赖方向，因为那里的心理模型和上下文有点不同。

我认为我们作为开发人员的思维模式与最终用户的思维模式不匹配。我怀疑大多数用户甚至不知道什么是块变体。如果我们采用这种方法，我希望变体图标和方向/方向图标是相同的。

我不确定是否将尺寸从“样式”选项卡移动到“设置”选项卡。我喜欢同时控制背景色、填充和边框。
我正在使用带有自定义间距预设的主题（例如#52827)，因此我也希望“Gap”是全宽的。还支持长翻译的参数。

公正的探索；还有很多要熨烫的小块

@萨克森F我所期望的主要体验是保留由块提供的心理模型，而不是属性的心理模型。我认为后者是我们的开发者和系统思维，而不是用户直观理解的。因此，我希望我们在改进设计工具和块作为面向用户的主要抽象的价值之间取得平衡。简言之，我宁愿普通用户学习一件事——块，而不是一整套布局工具。

另一个示例：Cover块可以被视为具有给定属性集的组块。然而，用户在插入器中发现封面要比知道一个组可以完成复制封面所需的所有操作容易得多。如果我们最终发现Cover只是Group的一个变体，那么这并不重要，重要的是用户可以通过我们所有的主要界面（插入器、转换、列表视图）识别并与之交互。块封装了一个意图，并比属性更快地传递它。

块变体旨在让我们同时拥有这两种东西——一组一致的延展性属性，使我们能够减少重复和合并工具，而不会放弃块心理模型更直接的方面。我不介意布局方向作为一种属性存在，我介意的是将块埋在其中，并从插入器中消除快速变化的更高级别概念。

因此，就上面的建议而言，我实际上很满意带有箭头的布局工具中存在的方向，并且对于分组块，也可以看到这些变化中反映的方向。我想这就是我们现在所拥有的。

事实上，我们目前有一个改变组变量的方向控件，这在某种程度上也打破了层次结构（从用户的角度来看）

我认为不是这样。我们有一些块，在这些块中，给定的属性组合将匹配一个变量，并且变量将被启用。变体可以被视为属性组合的快捷方式，但用户不需要理解这一点。如果有什么不同的话，我认为改变布局方向并看到Stack变成Row有助于我更好地理解事情。

这里的更新是我们有了第二个原型分支在这里。我建议尝试复制常见的模式布局等。如果你习惯了现有的布局控件，则需要进行一些调整，但我个人认为从概念上来说，这更容易理解，并且添加可预测的高度/宽度控件非常有用。

这显然不适合6.4版，但我希望将一些测试放在一起，发送给不同的人群，以收集反馈并在6.5版之前迭代。

你好！建议我分享一个最近的场景，在帮助用户处理布局请求时遇到了一些困难：

一位用户希望在其“关于我们”页面的页脚上方显示“欢迎加入我们的团队”封面块横幅，同时保持页面其余内容的宽度不变。（页面模板中的内容块已设置为宽。）

在很多帮助下，我几乎确定了请求：我最终得到了一个全宽的横幅，但内容是窄的，而不是宽的。我们决定建议用户尝试Content块的布局>内容宽度设置，让他们手动设置理想的内容宽度。

尽管由于同事们的帮助和我的实验，我对这一问题有了更好的理解，但对于一个简单的请求来说，我还是付出了很多努力：在宽幅内容下放置一个全幅横幅。理解在何处应用“内部块使用内容宽度”设置也很困难，尤其是对于多层嵌套。也就是说，我很欣赏FSE的力量！