尺寸变化：+456亿（0%）

总大小：1.75 MB

_{压缩尺寸作用}

我来这里是为了这个。希望它合并！

@贾斯穆森我一直在探索这个问题，似乎我们需要在前端设置相对位置，以便重叠工作。编辑器有它，所以它可以工作，但前端没有。它应该只在出现负边距时应用吗？

编辑器

前端

做得很好。我看到了问题，当没有应用相对职位时，只有团队的背景重叠：

相对于应用位置二者都或对应用了负边距的对象，使视觉匹配预期：

<!-- wp:group{“style”：{“spacing”：{“padding”：}“top”：“var:preset|spacing|10”，“bottom”：“val:preset| spacing/10”，“left”：“var:preset|10”}}，“backgroundColor”：“accent-4”，“layout”：{type：“constrained”}}--><div class=“wp-block-group has-accent-4-background-color has-background”style=“padding-top:var（--wp-preset--spacing-10）；padding-right:varwp：段落--><p>第1组</p><!-- /wp：段落--></div><!-- /wp:组--><!-- wp:group{“style”：{“spacing”：{“padding”：}“top”：“var:preset|spacing|10”，“bottom”：“val:preset| spacing/10”，“left”：“var:preset|10”}，“margin”：<div class=“wp-block-group has-accent-background-color has-background”style=“margin-top:-30px；padding-top:var（--wp-preset--spacing--10）；padding right:varwp：段落--><p>第2组</p><!-- /wp：段落--></div><!-- /wp:组-->

这里似乎有三条路：

1. 允许差异。
2. 应用位置：相对；全盘传到每个街区。
3. 应用位置：相对；一旦你也申请了负利润。

1并不理想。如果你试图构建一个没有自定义CSS的纯块主题，那么前端与编辑器匹配是很重要的。

2实际上会使前端更接近编辑器的实际状态。在编辑器中，位置：相对；应用于每个块，以便正确定位块UI，因此有理由认为，更广泛地应用它是为了解决这种差异。然而，这是一个更大的变化，所以也许应该在单独的上下文中进行明智的讨论。

三看起来这可能是一个goldilocks解决方案，可以阻止该功能的落地。当你应用负边际时，它会与上下文相关，在我的快速测试中，负边际可以解决手头的问题。需要注意的是，要么以非常低的特异性（即。：其中)，这样，如果您显式地将Group块的位置指定为粘性，则这不会与之冲突。这似乎是一个棘手的问题。

另一种选择是只应用位置：相对；默认为每组块，以解决那里的堆叠问题，但允许目前每个街区的差异？

房间里的大象是：只有在theme.json中，负边距已经是可能的了，所以这些堆叠问题已经成为可能。

@贾斯穆森我们如何瞄准利润率为负的区块？添加类？这似乎不是我们想要保持的。也许像布局一样吧？其他哪些区块可能受到影响？

我也用一个columns块检查了这一点，因为columns模块应用了display flex，所以问题没有发生。

如果我们将测试块包装在一个堆栈或一行中，问题就会消失，因为：

<!-- wp:group{“layout”：{“type”：“flex”，“orientation”：“vertical”}}--><div class=“wp-block-group”><！--wp:group{“style”：{“spacing”：{“padding”：}“top”：“var:preset|spacing|30”，“bottom”：“val:preset| spacing|10”，“left”：“var:preset@spacing/50”}}，“backgroundColor”：“contrast-2”，“layout”：{type：“constrained”}}--><div class=“wp-block-group has-contrast-2-background-color has-background”style=“padding-top:var（--wp-preset--spacing-30）；padding-right:var”（--wp--preset--space--50）；pading-bottom:varwp：段落--><p>第1组</p><!-- /wp：段落--><!-- wp：分隔符--><hr class=“wp-block-separtator has-alpha-channel-opacity”/><!-- /wp：分隔符--><!-- wp：段落--><p>Lorem ipsum悲哀坐在amet，奉献敬爱的精英。Sed sagittis libero posuere enim pellentesque，一个convallis mauris unmediate。埃涅阿斯在选帝侯（lectus eu tortor luctus convallis）。非舌间层最大Aliquam maximus。埃涅阿斯奉献给了梅特斯。Etiam sodales nec eros无效。Nullam libero urna，auctor vel ultrices sit amet，tincidunt vel lacus。Morbi ut ante risus。Morbi vulputate ante vel elit ultrices semper公司。最终莫尔比隐匿性疾病在各种疾病中传播。Interdum et malesuada在福克斯（faucibus）著名的“前伊普森·普里米斯”（ante ipsum primis）。Sed lectus arcu，ultrices vitae feugiat et，dapibus sit amet elit等。在ipsum ultrices porttitor euismod nec justo的nisi中的Nulla</p>（第页）<!-- /wp：段落--></div><!-- /wp:组--><!-- wp:group{“style”：{“spacing”：{-“padding”：}“top”：“var:preset|spacing|30”，“bottom”：“val:preset| spacing|10”，“left”：“var:preset | spacing |50”}，“margin”：<div class=“wp-block-group has-base-2-background-color has-background”style=“margin-top:-65px；padding-top:var（--wp-preset--spacing--30）；padding-right:var[--wp-preset--space--50）；pading-bottom:varwp：段落--><p>第2组</p><!-- /wp：段落--><!-- wp：分隔符--><hr class=“wp-block-separtator has-alpha-channel-opacity”/><!-- /wp：分隔符--><!-- wp：段落--><p>Lorem ipsum悲哀坐在amet，奉献敬爱的精英。Sed sagittis libero posuere enim pellentesque，一个convallis mauris unmediate。埃涅安在lectus eu tortor luctus convallis。非舌间层最大Aliquam maximus。埃涅阿斯奉献给了梅特斯。Etiam sodales nec eros无效。Nullam libero urna，auctor vel ultrices sit amet，tincidunt vel lacus。Morbi ut ante risus公司。Morbi vulputate ante vel elit ultrices semper公司。最终莫尔比隐匿性疾病在各种疾病中传播。Interdum et malesuada在福克斯（faucibus）著名的“前伊普森·普里米斯”（ante ipsum primis）。Sed lectus arcu，ultrices vitae feugiat et，dapibus sit amet elit等。在ipsum ultrices porttitor euismod nec justo的nisi中的Nulla</p>（第页）<!-- /wp：段落--></div><!-- /wp:组--></div><!-- /wp:组-->

这很令人困惑，因为CSS正在做它应该做的事情，差异是因为我们在编辑器中添加了额外的CSS规则。另一方面，我们希望为用户提供一个开箱即用的解决方案。

回顾整体行为，以下是GIF，描述如下：

• 两组有色人种相继出现。
• 测试检查器中的边距控制，以调整最底部组的顶部边距。
• 在输入中单击并拖动，作为快速递增/递减的快捷方式。
• 选择每个组以在选中时将其置于前台。
• 值得注意的是，选择块里面一组仍然保留起源在前台（按下has-child-selected添加以修复此问题）。
• 在列表视图中选择允许选择完全遮挡的块。
• 使用箭头键仍然可以单独选择每个块。

这就是过去努力停滞不前的地方：可以通过应用不幸的负边距来模糊块。然而，有了一些护栏，我会到达，我认为这可以向前推进：

• 这在theme.json中已经实现了。它就在那里，所以UI中的限制是人为的。
• 此PR中添加的“前置”行为直观地适用于画布和列表视图，即使选择了模糊父块的子块也是如此。
• 这是一个要求很高的特性，它扩展了表达式的范围。

我们可以添加的简单护栏是调整shift+箭头键并在范围字段中单击+拖动，因此它仅适用于正值。也就是说，您必须手动输入负值。目前尚不清楚在本次公关中会发生什么，甚至在最初，如果重叠问题成为一个问题，它可能会成为一个被探讨的护栏。

我们如何瞄准利润率为负的区块？添加类？

是的，这是一个棘手的问题。起初我的直觉是只输出位置：相对；内联，靠近负边距，如下所示：

边缘顶部：-65px；位置：相对；[...]

问题是，如果在组块上也应用了position sticky，那么内联CSS将赢得这场特殊性之战：

我们可以使用!重要的，但这不太理想。

我想知道：由于Sticky目前是一个仅限组块的功能，而这是受影响的主要因素，我们是否应该简单地添加默认情况下相对于所有组的位置？或者这会使这个“默认”值产生误导吗？

另一种选择是位置：在每个区块上相对，但特异性低。或者，如前所述，允许这种差异发生。

让我用代码笔试试另一个想法。

我认为这里首先要弄清楚除了组之外的其他块是否受此影响。让我来调查一下。正如我所说，Columns块不受影响，而设置为stack或row的group也不受影响。

我认为这里首先要弄清楚除了组之外的其他块是否受此影响。让我来调查一下。正如我所说，Columns块不受影响，而设置为stack或row的group也不受影响。

另一种选择是仅在存在hasbackground类时应用相对位置

任何有边距的块都会受到影响。下面是两段应用了背景的内容：

我认为问题是我们应该如何/在多大程度上“解决”这个问题。我仍在考虑一些选项，并发现这些位置具有粘性、绝对性和相对性，它们实际上都解决了重叠问题。该问题仅在位置静止时发生。发件人快速测试笔，位置：静态：

位置：粘性

位置：相对

当然，在正确的上下文中，sticky会像预期的那样随您向下滚动页面，这不太重要。让我继续修修补补。

探索没有产生明智的解决方案。我们现在的处境是：

• CSS很奇怪。当没有相对位置时，背景会堆叠，但其中的文本会混合在一起。
• 如果我们添加了适当的护栏，即必须在边距输入中手动键入减号，那么对我来说，这就可以防止意外输入。
• 最常见用例的快速修复方法是简单地应用位置：相对；指向Group块，如果使用该块，则将被sticky属性覆盖。段落仍然可以混合，但也可以。

我会很高兴看到以上内容。好奇你的想法，@巴德纳!

想在@WordPress/extraction中添加标签以获得关注和反馈。这是一个长期以来一直被要求的功能，在这项工作进行的过程中，如果能得到一些早期的想法，那就太棒了。

使用内联CSS添加位置或zindex等复杂规则已经在一些情况下造成了显著的问题，因为内联规则很难通过主题/插件CSS覆盖。(#40159)

我肯定可以看到为更复杂的布局添加分层控件（即zindex）的用途，例如重叠的粘性元素，我认为这应该具有优先权，这样，这种逻辑不仅可以应用于粘性元素，还可以在处理负边距时使用。我认为负边距只是布局工具的一个方面，它允许在编辑器中管理重叠元素。这可能是更好的关注点，而不是现在就为这一需求添加一个解决方案，然后再对其进行重构。

使用内联CSS添加位置或zindex等复杂规则已经在一些情况下造成了显著的问题，因为内联规则很难通过主题/插件CSS覆盖。

我倾向于在很高的层次上同意，这确实意味着整个区块在前端没有新的规则。

然而@马克豪威尔斯迈德你会反对添加吗位置：相对；总是指向组块本身？国际海事组织（IMO），它似乎几乎是一个群体：它组事物，所以其中的任何元素都应该与该组相关。它可以解决80%可能发生的奇怪情况。

@贾斯穆森我在为客户构建的主题中不时地将该规则添加到组块中，一般来说，这不会导致任何重大问题。然而，开发人员100%需要能够覆盖它，所以要么需要使用：其中，或通过附加的语义类名：在最佳情况下，仅当使用负边距时。在我的脑海中，我不确定这对组块上的新CSS网格功能有什么或是否有敲门效应。

这确实会被添加只有块的组变量，而不是行、堆栈或网格，是的，我们可以使用哪里以最小化特异性。

这似乎是前进的道路，然后在这里或作为后续，任何对数字控制输入的限制都会将0作为“拖动以增加/减少”启示的底线。也许这应该作为一个单独的问题写下来，你觉得怎么样@MaggieCabrera公司? 从技术上讲，这与本次公关无关，主要是一个有利于此的护栏。

这确实会被添加只有块的组变量，而不是行、堆栈或网格，是的，我们可以使用哪里以最小化特异性。

这似乎是前进的道路，然后在这里或作为后续，任何对数字控制输入的限制都会将0作为“拖动以增加/减少”启示的底线。也许这应该作为一个单独的问题写下来，你觉得怎么样@MaggieCabrera公司? 从技术上讲，这与本次公关无关，主要是一个有利于此的护栏。

所以我的理解是：

• 我们使用：where更改相对位置以仅影响组块（而不是行、堆栈或网格）。
• 在后续操作中将拖动更改为负数
• 更新可视化工具以在单独的请购单上显示负边距

听起来不错。

总的来说，我认为随着CSS的改变，该公关将准备好进行审查和测试

是的，听起来不错👍 👍 （编辑器只使用CSS对堆叠进行排序，我们保持原样）

希望其他人也有机会通过这种或那种方式参与进来。

我想知道如果我们考虑为这个实现使用语义类，会有什么挑战或副作用。例子：.wp位置--相对.

显然，这引入了一个全新的类命名约定(.wp文件-)并可能引起进一步的争论。

我正在与一些失眠症作斗争，我很可能（不恰当地）将这个问题与一直存在的不稳定困境混为一谈.has背景在里面#43110.

基本上，我只是担心怎样我们介绍位置：相对以便尝试避免将来对Group块的向后兼容性/弃用挑战。然而，我相信@MaggieCabrera公司,@贾斯穆森和@马克豪威尔斯迈德在他们现有的考虑中敏锐地意识到了这一点。❤️

我只是在大声思考，也许应该试着睡觉。🛌

到目前为止，这看起来像是在为组块工作，但其他块没有按预期工作，主要是因为需要相对位置以及在它们上。这是一个添加列块的测试：

编辑：

前端：

我想知道如果我们考虑为这个实现使用语义类，会有什么挑战或副作用。示例：“.wp-position--relative”。

显然，这引入了一个全新的类命名约定（“.wp-”），并可能引发进一步的争论。

我正在与一些失眠症作斗争，我很可能（不恰当地）将这个问题与“hasbackground”在#43110.

基本上，我只是担心怎样我们引入“position:relative”，以避免集团块未来的落后兼容性/弃用挑战。然而，我相信@MaggieCabrera公司,@贾斯穆森和@马克豪威尔斯迈德在他们现有的考虑中敏锐地意识到了这一点。❤️

我只是在大声思考，也许应该试着睡觉。🛌

从向后兼容性的角度考虑，添加一个类可能会更糟糕，所以如果我们可以避免这种情况。。。如果我们找到更好的解决方案，并且目前的特异性尽可能低，那么我们在本公关中现有的CSS可以在未来删除

我坚信，将语义类名用于各种目的比直接放置在元素上的值更好，但我也认识到，在某些情况下，编辑器中设置的值必须内联放置在某些元素上。

围绕CSS实现进行了很多讨论：其中许多讨论总结如下#54033通过@cbirdsong公司。几年前，我还在#40159（评论）我能找到的其他参考资料是#41230和#38719.

此外，我还没有通读#32644，但很容易看到后续的PR，它使用列表视图允许用户拖放具有负边距值的嵌套内部块，并让其更新z索引相应的值？🤔

很容易看到后续的PR，它使用列表视图允许用户拖放具有负边距值的嵌套内部块，并让其更新z索引相应的值？🤔

我不认为zindex可以自动设置；序列中的块有一些用法，这些块与它们的前身重叠和连续元素。

关于这一点的其他想法：如果控件值/设置可以在编辑器中过滤，那么这将非常有用，这样主题和插件开发人员可以阻止在定制情况下设置负值。我们的主题和插件开发人员迫切需要更多的可重写性，因此这将是一个添加一些内容的绝佳机会。

所有好主意！我确实想把这一点再回到手头的公关上，因为这是由一个非常强烈的愿望推动的，即允许在保证金控制中使用负值。我们能达到的最小公关是什么，我们相信在后续行动中可以修复的任何连锁效应都能得到解决？IMO，这是PR，允许负值并应用非常低的特异性位置：相对；上组块。你怎么认为？

当块重叠时，我看到编辑器和前端之间的区别：

我们在组块中包含了对此的修复，但决定不再扩展。剩下的街区，这是乔恩说的

👋 我注意到对BoxControl的更改与一个看起来错误的更改日志条目合并，并且有一个看似无意/不必要的破坏性更改。

明确地，这个变化打破输入属性道具。看起来我们本可以通过inputProps={{min:-Infinity}}不更改BoxControl中的代码？我不确定我是否理解动机，但我们至少需要恢复破坏性的更改部分。

👋 我注意到，对BoxControl的更改与一个看起来错误的更改日志条目合并，并且有一个看似无意/不必要的破坏性更改。

明确地，这个变化打破输入属性道具。看起来我们本可以通过inputProps={{min:-Infinity}}不更改BoxControl中的代码？我不确定我是否理解其中的动机，但我们至少需要恢复突破性的改变部分。

嘿！我不知道是什么坏了！你能解释一下吗？

我确实做了你所要求的回复，你的解决方案比我尝试的要简单得多，但我基本上是在尝试做同样的事情。如果你能复习一下PR描述并帮助我，因为我不知道我们首先破坏了什么（组件在主干中对我起作用）：#60984

嘿，伙计们，我们知道什么时候会变成核心吗？

对。WordPress 6.6计划于2024年7月26日发布