跳到内容
新问题

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

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

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

考虑一个根级别的站点填充解决方案,该解决方案仍然允许某些项全屏显示 #35607

关闭
凯勒已打开此问题2021年10月13日·50条评论 ·由修复#42085
关闭
受让人
标签
全球风格 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json [状态]正在进行 跟踪正在进行的工作中的问题 [类型]增强功能 改进建议。

评论

@凯勒
复制链接
贡献者

凯勒 评论2021年10月13日

中引入的根级填充#35241允许您在整个站点周围添加填充。这很管用,但前提是你不想让网站上的任何东西出现边缘对边缘。

WordPress/twenty-twent22#88,我们试图在Twenty Twenty-Two中实现站点范围的填充值,但由于这个原因,我们发现它对我们不起作用。Twenty Twenty-Two旨在让某些全宽元素在屏幕上边到边延伸。最明显的例子是它的黑色主页标题,旨在延伸到屏幕边缘:

这种事很常见太多了尤其是古腾堡推出“全幅”路线后。主题希望全宽元素延伸到屏幕边缘,并且希望为其他内容添加某种填充。这就是过去三个默认主题的功能:

今天全局填充设置的实现对这些主题都不起作用。

也就是说,一般来说,全局填充值仍然非常有用。例如,在Twenty Twenty-Two主页截图中,您可以看到组块标题内部和下面的内容中有一个共享的填充值,以确保非全宽内容不会撞到屏幕边缘:

一般来说,经典主题通过设置全局填充规则,然后对齐项目用负边距和修改后的最大宽度如果有必要,他们也会在全宽组块中应用相同的规则,以便填充一致。

让我们讨论一下,是否有一个解决方案可以在不需要块主题来提供自定义CSS的情况下解决此场景。

@凯勒 凯勒已添加[类型]增强功能 改进建议。 全球风格 与更广泛的Global Styles工作相关的任何内容,包括Styles Engine和theme.json标签2021年10月13日
@jffng公司
复制链接
贡献者

谢谢你这么清楚地表达出来@凯勒,这是我们制作的每个主题都会遇到的问题。@贾斯穆森很好地总结了一下这个评论:

最终,我们需要输出CSS,因此缩小范围后,这里的问题仍然是决定在哪里应用填充

与其将填充应用于根容器,不如让单个块使用全局填充值来选择加入(或退出)呢?该值可以存储为变量并以全局样式配置,给定的块可以选择应用它对齐根级别的块仍会接触到屏幕边缘,但会对其子级应用共享的填充值。

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

很好的讨论问题,很好的问题提纲。如果我理解正确的话,您建议使用一个值来控制所有根级别块的内部填充,对吗?

正如所建议的那样,此值对于利用您概述的相同分段设计样式的广泛主题可能非常有用。同时,由于衬垫是一种用途广泛、用途多样的财产。

从不同的角度来看,块编辑器有一个新的块间隙属性,它定义块之间的间距,一直到层次结构。您可以(或将能够)在每个控制器的基础上覆盖此间距。这感觉有点自然,感觉就像你建议的填充物,如果你愿意的话,是一种“基础填充物”。棘手的部分是将其系统化。例如,拥抱内容的垂直流动似乎是明智的,只在左侧和右侧应用此填充-如果我们还必须在第一个块上应用顶部填充,在最后一个块上使用底部边距,这可能会变得很难处理。

@凯勒
复制链接
贡献者 作者

与其将填充应用于根容器,不如使用全局填充值让单个块选择加入(或退出)该怎么办?

经典主题已经为文章和页面编辑器提供了一种既定的方式:标准和宽对齐的块在两侧使用本质上是“全局填充值”的内容,而全宽块则不使用。全宽块实际上选择了不使用全局填充。但是,对于根级块,我们没有这样的机制。

如果我理解正确的话,您建议使用一个值来控制所有根级别块的内部填充,对吗?

某种程度上。有很多不同的方式来构建这个框架,但我认为我想传达的主要内容是,我们只想复制大多数经典主题已经实现的“默认”行为:

  • 标准块和宽块不接触屏幕边缘。
  • 全宽块确实接触屏幕边缘(除非它们是嵌套的,并且其父块不接触屏幕边缘)。

嵌套使这一点变得相当复杂,但这就是它的要旨。对于经典的主题布局CSS来说,正确处理这一点是最复杂的问题,我们在这里有点回避它。

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

这个用例是绝对有效的。我纯粹是在考虑一种解决方案,它可以在用户期望和技术实现之间小心地穿针引线。在某种程度上,如果我们能构建一个很好的代码笔,提取一个CSS变量作为填充,这可能有助于解决细节问题。

@chthonic-ds公司
复制链接
贡献者

是否考虑过使用CSS网格布局来解决根级填充?我用来管理这个问题的方法如下:https://codepen.io/chthonic/pen/mdMeoGN?编辑器=1100

只有一个填充值,没有负边距的杂耍或意外的滚动条溢出。这决不是一个完美的解决方案,但在权衡各种替代方案时,我一直在考虑这个解决方案。

很抱歉这样打断你的谈话。我发现自己在这里查看《二十二》的进度👍

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

CSS网格确实被考虑过。为了在直观的UI和同时释放CSS网格的全部功能之间取得平衡,需要管理大量的复杂性。

然而,在这种情况下,这将是一个类似的用户体验问题:当前填充值应用于身体元素。CSS网格和负边距解决方案都要求“根填充”是一个单独的变量,而不是分配给其他地方。哪一个可能是解决方案,但问题是,对于想要使用Global Styles界面调整其站点填充的用户来说,这是否是直观的:他们必须在哪里查找此填充值?

@chthonic-ds公司
复制链接
贡献者

CSS网格确实被考虑过

探索#16998似乎更广泛,因为它也合并了管理内部布局,而#35607(评论)只关心块应该如何相对于浏览器的边缘进行约束。我个人发现,很难在不需要指定实际填充属性的情况下传递内在确定块宽度的能力。

但是!我可以看出,我建议的方法在全球风格的更广泛背景下是一种不可取的做法。由公开的UI控件#35241需要与顶级块的父容器配对,而不是身体让它与之协同工作衬垫值。

感谢您的洞察力:)

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

这不一定是否定的,这只是一个困难的UI挑战,在一个直观地传达它影响多个块的内部间距的地方浮现我们同意的填充,只是不全宽的块。

这就是说,从概念上讲,我很欣赏CSS网格如何具有“gutter”属性,这让人觉得应该在一个地方设置,而不是在多个地方设置(即使可以)。这有点类似于blockGap属性,即使现在也可以在一个地方设置它按等级划分.

@弗瓦泽特
复制链接
成员

弗瓦泽特 评论2021年11月3日

我必须查找我所做的精确实现(我很可能完全记错了,我在第26个小时的编码工作中,脑子里可能只有幻想的代码修复),但我相信我在使用全局填充时在我的一个主题中覆盖了此设置。

实现是在.wp-site-blocks标记上显式使用padding-inline-start/end和padding-block-start/end,这将覆盖主题设置的padding-TRBL。JSON或其他类似版本,目标是WP容器和站点块的组合。(我不记得使用了负边距,但我一直在与主题作斗争。JSON和间距,我已经经历了一百万个不同的版本。

如果简单到通过主题使用padding-inline/block显式设置覆盖父块。JSON API,这可能是一个非常可行的解决方案。

@凯勒
复制链接
贡献者 作者

@吵闹声我认为我们现在应该把它保留在5.9必备款中。这仍然是二十二世纪的一个必须解决的问题,我认为如果没有一个非常奇怪的解决方案,我们将无法找到解决方案。

@凯勒
复制链接
贡献者 作者

凯勒 评论2021年11月22日

周五我花了一些时间与@jffng公司,我有一个想法值得一试。这与@你知道riad的探索#36214,但它被分成了几个新控件,以便用户/主题作者在何时以及如何突破站点填充方面具有更大的灵活性。

这个想法的根源很简单:

  • 添加一个新的“覆盖站点填充”选项,该选项仅适用于顶级块。这仅在站点填充处于活动状态时可用,并且默认为。当此选项处于活动状态时,顶级块将获得负边距,允许它占据屏幕的整个宽度。如果将顶级块移出顶级,则该选项将从UI中消失,并且该选项的任何保存标记都应无效。
  • 将新的“Use site padding for children”设置添加到任何可选择布局的块中。这仅在站点填充处于活动状态时可用,并且默认为。当它处于活动状态时,站点填充将应用于容器,这意味着默认+宽对齐的项目将考虑填充,并且不会碰到屏幕边缘。完全对齐的项目将继续占据其容器的整个宽度。

这里的主要思想是,我们只需要在页面的顶层覆盖一次站点填充。。。但我们也可能希望稍后将该填充再次添加到子块中。😅

下面是对情况的快速回顾,因为它帮助我思考问题。大多数块已经占据了其父块的整个宽度:

上午8 54 08时截屏2021-11-22

如果布局处于活动状态,则默认情况下,全宽项目占据其父项的全宽(子项将占据小屏幕上的全宽):

上午8点51分30秒截屏2021-11-22

当主题选择使用站点填充时,它会在整个站点的左右两侧添加一些空间。如果我们设置一个顶级块来消除该空间,那么它的所有子块都会继续如上所述:当布局关闭时,所有块都会边对边,当布局打开时,只有全宽块才会边对边:

布局

这适用于许多用例,不需要太多其他操作。例如,如果您在站点顶部有一个图像,并且您想将其设置为全宽,那么应该这样做。

但是,有一个重要的情况是它失败了:我们通常希望重用子块内部的填充值。因此,在Twenty Twenty-Two中,我们希望这里的黑框是全宽的,但我们希望其中的内容反映站点填充,这样它就不会撞到边缘:

上午9点35 29分截屏2021-11-22

对于这样的情况,以及发布内容块(我们也希望这种行为),我们可以利用一个新选项,基本上是“将站点填充添加到此子块”。我们已经看到这种方法在#36214,但它有点太激进了&每当块选择布局时,它都会默认添加站点填充,并且没有提供退出的方法。根据需要通过手动添加它将为主题作者提供更多控制:

布局布线

这有点难以想象(即使是在GIF格式中),所以我创建了一个CodePen来尝试一下,让它旋转起来——我很想知道我是否遗漏了一些重要的东西。。。

https://codepen.io/kjellr/full/porBBdY

@吵闹声 吵闹声已将此添加到📥 待办事项在里面WordPress 5.9必须持有通过自动化 2021年11月23日
@贾斯穆森
复制链接
贡献者

感谢您考虑这一点,也感谢非常有用的代码笔!

这肯定是一件很麻烦的事。我认为这也说明了我对这种方法的主要担忧:我不知道从哪里开始,而且我也不清楚这会对我的主题产生什么样的影响。尝试代码笔时会更清楚:
单开关

但在GIF中,我忍不住觉得这些概念中的许多都可以被吸收。“忽略站点填充”本身并不有用,我可以将站点填充设置为0然而,如果将其折叠为“为儿童使用网站填充”,则会立即更有意义。也就是说,我可以将其视为单个切换。

大多数情况下,我觉得我们不应该分割哪些块是“顶层”而不是“子块”,尤其是在标记中。我们得出的任何解决方案似乎都应该知道这一点,而不需要额外的控制或值。

我意识到这将我们带回到#35919,甚至#36214。阻碍这些问题的主要问题是什么,我们能解决吗?(抄送@你知道riad)

乌托邦式的梦想感觉像是一个单一的切换控件,它同时应用“忽略站点填充”和“为儿童使用站点填充”,只针对需要它的顶级块,不需要额外的标记。作为一个稻草人的想法:

  • 保留站点填充变量。
  • 在控件所在的位置下方添加一个切换,类似于“吸收顶级块的填充”

关闭切换后,填充将按当前情况保留在body元素上。但当切换被翻转时会发生什么呢?一些想法:

  1. 填充保留在body元素上,但全宽元素的边距为负,并且继承了填充。
  2. 填充将完全删除主体元素,并应用于每个顶层块的左侧和右侧。也可能是第一块的顶部和最后一块的底部。

我可以想象1和2的利弊得失。但我真的认为,寻找一种解决方案是值得的,它可以归结为一个没有标记更改的布尔切换。你怎么认为?

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

我意识到这将我们带回到#35919,甚至#36214。阻碍这些问题的主要问题是什么,我们能解决吗?(抄送@你知道riad)

我个人认为#36214是我目前的首选,我需要大家的支持和投入。

@凯勒
复制链接
贡献者 作者

凯勒 评论2021年11月23日

但在GIF中,我忍不住觉得这些概念中的许多都可以被吸收。“忽略站点填充”本身并没有什么用处,我可以将站点填充设置为0。然而,如果将其折叠为“为儿童使用网站填充”,它将立即更有意义。也就是说,我可以将其视为单个切换。

它被绑定到单个块的原因(而不仅仅是设置为0)是因为您可能不想全部的顶级块忽略站点填充。如果你这样做了,你就不会一开始就输入站点填充。😄

实际上,我最初构建它是为了在“忽略站点填充”切换处于活动状态时自动应用“儿童站点填充”样式。但这也并非在所有情况下都有效。有时你不想让这些垫子处于活动状态。这实际上是我最关心的#36214:无法关闭或编辑添加到子块的填充。当您没有为站点输入顶部/底部填充值时,结果会特别尴尬。在这种情况下,每个应用了布局的块也不能有顶部/底部填充。

无论如何,这在你的脑海中并没有“发挥作用”,这足以让你放弃它。整个布局功能感觉太难理解了,所以我不想在上面添加其他复杂的控件。

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

您可能不希望所有顶级块都忽略站点填充

这实际上是我最关心的#36214:无法关闭或编辑添加到子块的填充

原谅我这个愚蠢的问题,将其视为一种挑衅,以确保我们看到问题的所有角落:为什么我们不希望所有顶级区块都忽略站点填充?考虑到这将与正在应用的所述站点添加相匹配里面相反,至少在斯特拉曼选项2中这个评论.

我还想认为,作为控件的填充最终可以/应该/将应用于所有块,如果不是这样的话,那么您就可以覆盖像这样的顶级块上继承的任何填充吗?

@克杰尔
复制链接
贡献者 作者

原谅我这个愚蠢的问题,将其视为一种挑衅,以确保我们看到问题的所有角落:为什么我们不希望所有顶级区块都忽略站点填充?考虑到这将与块内应用的所述站点添加相匹配,至少在本评论的第2个斯特拉曼选项中如此。

这是一个好问题!从技术上讲,站点编辑器中的所有块默认都是“全宽”的,那么为什么我们不让它们都忽略站点填充呢?我很确定这基本上就是#36214takes—当我激活它时,站点编辑器中的所有根级块仍然是边对边的。

我还想认为,作为控件的填充最终可以/应该/将应用于所有块,如果不是这样的话,那么您就可以覆盖像这样的顶级块上继承的任何填充吗?

是的,应该是这样。👍 我的问题是#36214年它当前添加了默认填充,然后特别地删除布局处于活动状态时的填充控件。

@吵闹声 吵闹声已从中删除此📥 待办事项在里面WordPress 5.9必须持有 2021年12月1日
@自我
复制链接
成员

同意,谢谢@jffng公司!

@邋遢鬼
复制链接
贡献者

我认为这是解决问题的一种方法:#41377,但我想了解更多信息

@告诉机器
复制链接
贡献者

在现有公关基础上再添加一个公关之前,我想确保我们对这个问题的看法一致。以下是我对它的理解:

  • 我们希望将根填充设置为“仅适用于拉伸视口全宽的块的所有子项”,但也适用于全宽的子项除外。
  • 问题是,我们无法判断一个全宽块是否实际延伸了整个视口的宽度,而不是在一个列中。

因此,虽然通过使根填充仅适用于的直系子代(全宽子代的子代)可以实现以下内容wp-site-块:
屏幕截图2022-06-27,下午6点14分13分
它并没有完全解决问题,因为我们希望根填充值也应用于组I的子级。

但是,如果我们在哪里做这样的事情

.alignfull>*:不(.alignfall){向左填充:19px;右侧填充:19px;}

然后我们得出以下结论:
下午6点17 01分截屏2022-06-27
我们可能不希望C、F和G组在他们的孩子身上有额外的填充物。

所以,我的问题是:

  • 这个问题的描述是否反映了其他人的观点?(如果没有,请告诉我!)
  • 如果以上是正确的,那么将根填充也应用于仅拉伸其容器(而不是视口)全宽的元素的子元素是可以接受的折衷方案吗?
  • 我还可能错过什么?😄

@安德鲁·斯塔尔

我如何给出一个有效的填充解决方案(仅限FSE),就是为默认内容和宽内容提供最大宽度100%的视口减去一些值,当视口宽度小于块宽度时,所述值的一半有效地成为任意一侧的填充。

例如

“布局”:{“contentSize”:“最小(计算值(100vw-64px),600px)”,“wideSize”:“最小(计算值(100vw-64px),1200px)”}

这使得全宽块可以边到边全宽,同时在狭窄的视口中需要时,仍可以为默认块或宽块提供32px填充的外观。

我最近遇到的一个问题是安全_过滤器_属性()无法识别最小()最大()并返回空,导致布局中断,但这是一个单独的问题。
https://core.trac.wordpress.org/ticket/55966

@邋遢鬼
复制链接
贡献者

@告诉机器,听起来不错。还有一些额外的复杂性:

我们希望将根填充设置为“仅适用于拉伸视口全宽的块的所有子项”,但也适用于全宽的子项除外。

这感觉有点模棱两可,所以我想试着重申一下……当一个全宽块延伸到视口边缘时,视口边缘和文本之间应该始终有一个间隙,等于根填充大小。如果将多个全宽块堆叠在一起,则视口边缘和文本之间的填充应与根填充相同。

我对这个问题的理解是:

  1. 在根级别,所有块都是全宽的,应该达到视口的边缘。这些块中的文本周围应该有一个与站点填充相同的填充。
  2. 当块被堆叠时,它们应该继续与根级块相同的行为,除非它们的宽度受到布局集或填充集的约束。
  3. 如果块具有宽度约束(通过布局或填充),则其内部的块(有时)可以选择对齐.
  4. 如果块具有对齐选项,则其宽度将不再受其父级的约束,并将拉伸到其父级限制。此alignfull块内文本周围的填充将由父块设置。
  5. 当一堆块选择了“继承默认布局”选项时,这些块中对齐的块将到达视口的边缘,因为默认布局沿堆栈一直继承。

因此,虽然通过使根填充仅适用于wp-site-blocks的直系子代(全宽子代的子代),可以实现以下内容:

这可能不起作用还有另一个原因——假设wp-site-块他们甚至可以选择全幅拍摄。在许多主题(包括TwentyTwenty Two)中,第一个到达视口边缘的对齐块位于堆栈的更深处。与块级填充相比,这是根填充面临的挑战之一——在设置填充的级别和块变为全宽的级别之间,块的层数不可预测。

另一件让这变得复杂的事情是,我们需要不同类型块的不同行为。图像块中的图像应该延伸到父容器的全宽,而在分组块中,块中的文本应该在它和块边缘之间有填充。我们也不想将CSS中的特定块作为目标,因为我们需要它来处理第三方块。这使得一致地应用全宽变得更加复杂。

如果以上是正确的,那么将根填充也应用于仅拉伸其容器(而不是视口)全宽的元素的子元素是可以接受的折衷方案吗?

我认为是这样,但有以下几点需要注意:

  1. 图像、视频(非文本内容)不应该有填充,就像它不在根目录中一样)
  2. 如果父块设置了填充,则应该使用它来代替根填充。

希望能有所帮助。。。。

@告诉机器
复制链接
贡献者

谢谢你的意见@邋遢鬼! 我还有几个问题😅

如果将多个全宽块堆叠在一起,则视口边缘和文本之间的填充应与根填充相同

你所说的“堆叠”是指相互嵌套吗?还是一个接一个?

如果一个块有宽度约束(通过布局或填充),那么它里面的块(有时)可以选择对齐。

单独在块上设置填充当前无法使其后代使用全角对齐,必须更改内容大小(继承自主题设置或在该块上设置)。据我所知,如果块类型允许,设置内容大小总是允许子代选择全宽(例如,段落不能变为全宽,但图像可以)。

当一堆块选择了“继承默认布局”选项时,这些块中对齐的块将到达视口的边缘,因为默认布局沿堆栈一直继承。

这一点并不完全清楚。在我上面的例子中,D组及其所有子组继承默认布局(我将其表示为“继承内容宽度”,因为命名法已更改#41893). 但是,由于组E未配置为全宽,因此它及其子项仅延伸到内容宽度。

如果我们希望嵌套的几层中的块是全视口宽度,那么它的所有父对象都应该继承内容宽度(或设置自定义宽度),并显式设置为全宽度,一直到的直接子对象wp-site-块(默认情况下应该已经是全宽)。

如果最外面的块没有内容宽度集,并且有一个非零的根填充值集,那么它的子块将无法扩展全宽度,并且必须尊重根填充-例如我上面的示例中的Group a。

我错过了什么吗?

图像、视频(非文本内容)不应该有填充,就像它不在根目录中一样)

我不确定我明白了。我希望图像和视频块具有与段落相同的填充,除非它们明确设置为全宽。

@邋遢鬼
复制链接
贡献者

邋遢鬼 评论2022年6月29日

你所说的“堆叠”是指相互嵌套吗?还是一个接一个?

嵌套

单独在块上设置填充当前无法使其后代使用全角对齐,必须更改内容大小(继承自主题设置或在该块上设置)。据我所知,如果块类型允许,设置内容大小总是允许子代选择全宽(例如,段落不能变为全宽,但图像可以)。

同意!

如果我们希望嵌套的几个层中的块是全视口宽度,那么它的所有父块都应该继承内容宽度(或设置自定义宽度),并显式设置为全宽度,一直到wp-site-blocks的直接子块(默认情况下应该已经是全宽度)。

你是对的,我不是很清楚,但这是正确的。

如果最外面的块没有内容宽度集,并且有一个非零的根填充值集,那么它的子块将无法扩展整个宽度,并且必须尊重根填充-例如我上面的示例中的Group a。

这也是正确的,但这种行为正是我们想要改变的。

我不确定我明白了。我希望图像和视频块具有与段落相同的填充,除非它们明确设置为全宽。

不同之处在于,全角组和列块中的文本内容应该在它和视口边缘之间有一些填充,而图像和视频则没有。

换句话说,我们可能应该将站点填充视为内容填充——这种填充应该应用于块中的文本内容,而不是图像、视频和背景色等图形内容。这很难,因为我们真的没有办法检测这些不同类型的块之间的差异。这是我建议的#26407.

@告诉机器
复制链接
贡献者

如果最外面的块没有设置内容宽度,并且设置了非零的根填充值,那么它的子块将无法扩展全宽度,并且必须尊重根填充,例如上面的示例中的组a。

这也是正确的,但这种行为正是我们想要改变的。

你能详细说明一下吗@邋遢鬼? 到目前为止,我从这个问题的对话中并没有得到这样的信息。

据我所知,上面提出了三种不同的方案:

  • 只在拉伸到全视口宽度的块内部应用根填充(这是从开始注释中获得的);
  • 在定义了布局/内容宽度的所有块中应用根填充,无论它们是否为全宽(我认为这是布局外部填充的替代方法 #36214);
  • 允许块选择根填充(我猜不是所有的块?这不是指定的)

我暂时不考虑第三种选择,因为它的支持者似乎较少😅 , 而且还因为在需要填充的每个块上都应用填充会很麻烦。

第二个选项的问题是,具有布局的块已经具有内容宽度,因此填充实际上只对小视口有影响。但在大型视口中,填充在没有布局的块中非常方便,例如上面的TT2标题示例中。

这给我们留下了第一个选择,这就是我正在探索的方向#42034.

最外面的块(的直接子级wp-site-块)默认情况下为全宽,因此使用第一个选项,我希望它们内部有根填充。因此,他们的孩子总是受到这种填充物的限制。就我个人而言,我认为这很好,因为如果我们想让最外面街区的孩子们全速前进如果应用了一些根填充,我们总是可以为外部块定义布局/内容宽度。

(例外是模板部分,我们无法定义布局。这感觉有点尴尬,尤其是模板部分正在生成HTML包装。也许我们可以添加模板部分定义布局的功能?)

不同之处在于,全角组和列块中的文本内容应该在它和视口边缘之间有一些填充,而图像和视频则没有。

恐怕我还是不明白😅 . 我希望图像和视频与文本内容对齐,除非明确设置为全宽或宽。这是博客帖子和文章中混合文本和媒体内容的常见情况。你能给我举一个例子,说明默认情况下我们需要所有媒体块都是全宽的吗?

@邋遢鬼
复制链接
贡献者

恐怕我还是不明白😅 . 我希望图像和视频与文本内容对齐,除非明确设置为全宽或宽宽。这是博客帖子和文章中混合文本和媒体内容的常见情况。你能给我举一个例子,说明默认情况下我们需要所有媒体块都是全宽的吗?

这就是Twenty2Two中这两个“alignfull”区块的情况:
屏幕截图2022-06-30,13 02 19
屏幕截图2022-06-30,13 00 53

如您所见,“对齐”图像延伸到视口的边缘,而组块内的文本具有填充。

@邋遢鬼
复制链接
贡献者

这给我们留下了第一个选择,这就是我正在探索的方向#42034.

中解决方案的问题#42034是它对alignfull块嵌套的级别所做的假设。你可以在TwentyTwenty上用本公关。当你比较PR时+#42034与主干上的结果相比,alignfull块的结果大不相同。

@邋遢鬼
复制链接
贡献者

中解决方案的问题#2012年是它对alignfull块嵌套的级别所做的假设。你可以在TwentyTwenty上用WordPress/WordPress-develop#2578。当你比较PR时+#42034与主干上的结果相比,alignfull块的结果大不相同。

我试着在#42034具有#39871但仍然发现了同样的问题。

@告诉机器
复制链接
贡献者

中的解决方案问题#42034是它对alignfull块嵌套的级别所做的假设。你可以在TwentyTwenty上用WordPress/WordPress-develop#2578。当你比较PR时+#42034与主干上的结果相比,alignfull块的结果大不相同。

唯一的假设#42034makes是指alignfull块需要嵌套在块中,并一直向下布局。在TT2上测试PRWordPress/WordPress-develop#2578应用时,我看到的唯一问题是帖子内容中的对齐项目没有延伸到视口的整个宽度。这是因为post内容嵌套在外部Group块中(输出主要的tag)没有设置布局,因此无法将其子项显式设置为全宽。如果要将布局添加到主要的分组并将其子项设置为对齐,一切都将按预期运行。

这不是解决问题的超直观解决方案,但它比TT2中的自定义代码要好。为什么?

TT2在根级别设置填充,然后为所有对齐块添加负边距,但有一些例外。问题是,对齐块并不总是与视口的整个宽度一致,虽然TT2代码中的异常考虑了其中一些情况,例如列中的对齐块,但它们不可能覆盖所有这些情况。

例如,这是一个组内的对齐图像,布局在一行内:

屏幕截图2022-07-01下午2点32分

这是一个有点深奥的例子,但如果没有这些负利润,它会很好地工作:

下午2点15分47分截屏2022-07-01

我的意思是,我们不应该试图猜测用户会想出什么布局。添加一个不太起作用的CSS规则,然后对其进行硬编码的一系列异常总是很脆弱的。在主题中这样做只意味着主题会有点破损(这也是不应该的,特别是考虑到它是默认主题),但在Core中这样做会破坏每个人的行为,不管他们使用的是哪个主题。我们负担不起这样做。

如果,而不是#42034,我们采用我上面概述的解决方案2(只对具有布局的块应用根填充,并使用负边距对齐这些块的子块),然后在TT2上会出现另一种破坏:没有定义布局的块会突然使其内容撞到视口的侧面。(通过在包装块上设置布局也可以很容易地解决这个问题,如果我们不希望它具有默认的内容宽度,也可以给它一个自定义的内容宽度。)

屏幕截图2022-07-01,下午2 02 56

我不确定在没有布局的块上使用根填充是否理想,但如果每个人都认为这是最好的,那么我很乐意使用它🤷

我试着在#42034具有#39871仍然发现了同样的问题。

是 啊,#39871只使用布局来处理块中的填充,因此取消根填充是行不通的#42034正在向块提供没有布局。我也不相信#39871-它覆盖用户设置填充的方式对我来说有点过于激进。

@告诉机器
复制链接
贡献者

好的,我在中创建了草稿#42085解决方案2:仅对具有布局的块应用根填充。请随时测试并给出反馈!

@邋遢鬼
复制链接
贡献者

如果您要将布局添加到主组并将其子组设置为对齐,则一切都会按预期运行。

我已经测试过了#42034对照TT2 PR,将主组设置为alignfull,并将内容发布为alignfull,正如您所说的那样,它按预期工作。唯一的例外是我建议的公关中出现的问题(#41377),这可能表明测试用例本身有缺陷。
屏幕截图2022-07-01,14 16 28

正如您所说,此解决方案依赖于:

唯一的假设#2012年makes是指alignfull块需要嵌套在块中,并一直向下布局。

我觉得这不太理想,有几个原因:

  1. 在“布局”容器中之前,块已经填充了整个视口宽度,因此将布局添加到嵌套结构中的所有块感觉是不必要且无意义的添加。你可能想知道是否有一种情况下,块不需要定义布局!

  2. 很难理解并向他们解释,当布局外的块已经全宽时,他们需要向所有嵌套块添加布局并将其设置为对齐。

如果这是唯一可行的解决方案,那么这是我们必须接受的妥协,但我相信还有其他选择。

TT2在根级别设置填充,然后为所有对齐块添加负边距,但有一些例外。问题是,对齐块并不总是与视口的整个宽度一致,虽然TT2代码中的异常考虑了其中一些情况,例如列中的对齐块,但它们不可能覆盖所有这些情况。

我同意,我们不能依赖每个块的自定义CSS,尤其是因为我们还需要支持第三方块。

我的意思是,我们不应该试图猜测用户会想出什么布局

然而,这一点我并不同意。我认为我们应该尝试构建一个足够灵活的解决方案,以便在不对用户实施布局约束的情况下按预期工作。

好的,我在中创建了草稿#42085解决方案2:仅对具有布局的块应用根填充。欢迎测试并提供反馈!

谢谢你创造了这个。我也不确定这个主意行得通。问题是标题通常需要跨越视口,并且需要使用根填充。当然,我们也可以给它们添加布局,但这样我们基本上就可以在所有东西上都有布局了!

让我试着总结一下我认为我们的现状:

  1. 块填充其父对象的宽度,
  2. 除非它们通过布局设置具有约束宽度。
  3. 只有“布局”块内的块可以选择设置“完整”和“宽”对齐
  4. 当块具有“完全”对齐时,它将拉伸到其父块的边缘(此处的边缘包括父块的内部填充)

第4点的例外是,对于第一个alignfull块,需要补偿的填充不是父块的填充,而是根级别的填充,因为在第一个alingfull块和根填充之间可能有多个级别的块。

@邋遢鬼
复制链接
贡献者

这里有另一个想法。。。。

与其尝试以全局方式应用填充来对齐整个块,不如将其设置为块本身的属性。例如:

  1. 如果我创建了一个延伸到视口边缘的对齐块,我们会挂接此操作,并在块上设置相当于根填充的填充值。
  2. 如果我创建了一个延伸到其父级边缘的alignfull块,我们会挂接此操作,并在块上设置一个相当于父级填充的填充值。

这种方法的一个优点是,在块控件中显式设置填充,并且对用户可见。它也是可编辑的。

@DaveBoydy公司
复制链接

如果组块有另一个变体,具有语义命名,可以将其与通用组块和行堆栈变体区分开来,该怎么办?

新变体组块背后的意图是作为设置站点根填充的块特别突出,并且作为默认设置,“继承默认布局”设置为打开。主题作者可以从Theme.json中专门针对新块设置自定义填充值。

这只是一个小小的建议,我不确定这是一个好主意,尽管它可能会使侧边填充的应用程序对主题作者来说更直观一些。

我反对像二十二年那样硬编码边填充,你怎么可能硬编码填充适用于每个主题,每个主题在块布局中都有多个可能的变化?

这就是为什么我认为主题作者最好自行手动设置填充,创建一个专门用于设置外侧填充的变体组块可以帮助主题作者从视觉上区分应该应用布局和填充的组块和不应该应用布局的组块。

@DaveBoydy公司
复制链接

与其尝试以全局方式应用填充来对齐整个块,不如将其设置为块本身的属性。

这就是应该做的!我想我一直想说的是,如果我可以设置一个自定义填充值,即不使用px、%、rem、vw等单位设置,而是使用块本身属性的自定义值“max(3.5vw,16px)”,那就太棒了!

我可以在theme.json中定义自己的字体大小,如
{
“slug”:“max-48”,
“尺寸”:“夹具(2rem,4vw,3rem)”,
“名称”:“最小值:32-48”
},
然后从块排版大小下拉列表中进行设置。

我希望在填充方面也能做到这一点。

@电视机
复制链接
贡献者

在它们位于“布局”容器中之前,块已经填满了整个视口的宽度,因此将布局添加到嵌套结构中的所有块中,感觉是一种不必要且毫无意义的添加。你可能想知道是否有一种情况下,块不需要定义布局!

它们填充视口宽度,除非其容器有填充😅 但是的,仅仅为了让一个孩子在树下的某个地方达到全宽,就给一堆块添加内容宽度,确实让人感到很尴尬。

谢谢你创造了这个。我也不确定这个主意行得通。问题是标题通常需要跨越视口,并且需要使用根填充。

在这种情况下,如果使用第一个选项,就不需要定义布局😁

如果我们不希望没有布局的块在默认情况下获得根填充,但我们也不希望它们这样做从未有根填充,那么我能想到的唯一折衷办法就是为这些块添加一个设置,允许我们在它们上切换根填充🤷 (我认为这是关于这个问题的最初想法之一@jffng公司)

第4点的例外是,对于第一个alignfull块,需要补偿的填充不是父块的填充,而是根级别的填充,因为在第一个alingfull块和根填充之间可能有多个级别的块。

但是,没有布局的块上仍然可以设置填充。如果根和我们的第一个alignfull块之间的多个级别的块中有一个具有自定义填充集,那么我们期望alignfull块的行为如何?在这种情况下,我不确定它是否仍应该达到全视口宽度。

与其尝试以全局方式应用填充来对齐整个块,不如将其设置为块本身的属性。例如:

  1. 如果我创建了一个延伸到视口边缘的对齐块,我们会挂接此操作,并在块上设置相当于根填充的填充值。
  2. 如果我创建了一个延伸到其父级边缘的alignfull块,我们会挂接此操作,并在块上设置一个相当于父级填充的填充值。

问题是我们无法知道对齐块是否延伸到视口边缘。这就是为什么我们实现的任何功能都需要对所有对齐块进行同等工作。

我认为我们能做的最好的事情是使用根填充作为alignfull块的基本值或默认值,然后确保可以在自定义填充设置中覆盖该值。这就是我们讨论的内容在这里.

@告诉机器
复制链接
贡献者

好的,我为没有设置内容宽度的块添加了一个全局填充切换#42085:
下午3点56分54分截屏2022-07-04

在草稿PR上还需要做的是确保alignfull在父级具有自定义填充(目前在主干上也不起作用)时仍然有效。

@邋遢鬼
复制链接
贡献者

感谢您添加此内容@电视机。我喜欢这种方法的地方是:

  1. 这是陈述性的,没有幕后魔术
  2. 它是可控的,所以用户可以打开或关闭它

@告诉机器
复制链接
贡献者

好的,我已经修复了自定义填充的问题,以便对齐块仍然可以拉伸整个宽度,并标记#42085准备审查。最好在所有可能的情况下进行测试,以确保没有遗漏任何边缘案例。

@DaveBoydy公司
复制链接

DaveBoydy公司 评论2022年7月5日

将右填充和左填充应用于设置了内容宽度的所有块(无论是默认主题宽度还是自定义值),也可以选择应用于可以使用流布局但没有设置内容宽度的块。通过侧边栏中的切换选择加入

我想我不同意#42085:如果我理解正确的话。

填充应该单独手动设置,我认为在某些特定的情况下,您需要设置内容宽度,而不是填充。

或者,如果使用内容宽度设置自动设置填充,则应该能够关闭填充。如果帖子内容块上的“继承默认布局”设置为true,并自动应用填充,则需要有一个选项来关闭填充。

免费注册 在GitHub上加入此对话.已经有账户了吗?登录以发表评论