跳到内容
新问题

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

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

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

响应块和固有网页设计 #34641

正常开放
跟踪人 #33447
贾斯穆森打开本期2021年9月8日·21条评论
正常开放
跟踪人 #33447

响应块和固有网页设计 #34641

贾斯穆森打开本期2021年9月8日·21条评论
标签
[功能]设计工具 影响块外观的工具,既可以增加工具数量,又可以改进实验 [类型]概述 一个重点领域的全面、高层次视图,通常存在多个跟踪问题

评论

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

贾斯穆森 评论2021年9月8日

通往5.9号桩的初步道路,内在的网页设计原则被概述为为区块提供基本响应默认值的潜在途径:

  • 模式和主题构建者最大的摩擦点之一是缺乏块级别的响应工具。这需要以一种不会不成比例地增加接口复杂性的方式来解决。
  • 块模型是应用一些内在设计原则的好例子,因为块可以在许多不同的布局和容器中占据一个位置,对于这些布局和容器,不考虑上下文的规定性媒体查询是不灵活的。
  • 每个块区域都应该具有内在的响应性,允许块组合、包装、堆叠和组织起来,以适应不同的空间和屏幕。为了更好地工作,容器块需要吸收更多的布局控件。(容器查询可能有助于将来进一步扩展此功能。)
  • 排版工具需要变得更加灵活,并在内部支持算法钳制。只要可能,模式就应该工作并适应自己。

要稍微提炼一下,如果插入足够宽的主题,则具有多个列和复杂布局的奢华模式看起来可能很棒,但如果插入狭小的上下文或布局,则可能会崩溃。媒体查询(#19909)仅关注视口宽度将无法为插入到列中的模式提供良好的后备视图。即使在媒体查询按预期工作的情况下,它也可能会为感觉应该内置的基本行为增加过度的复杂性:

响应式桌面

响应式移动电话

如果我们看看我们有哪些可用的内在工具,特别是CSS网格之类的工具自动调整极小极大以及夹紧基于算法,我们可以走得更远。当容器(或视口)宽度小于480px时,以下3列布局折叠为1列:

网格

使用夹紧我们可以为字体大小提供最小/最大值:

字体大小

我们可以创建独立堆叠的列,因为单个列的大小低于某个最小值:

卡

上面的例子可以在中进行修改这个代码笔.

归根结底,动机不一定是完全摆脱媒体查询,而是探索一个问题:一个单一的块模式能在多大程度上做到开箱即用?一个受欢迎的副作用可能是大大简化了用于编辑的UI。媒体或容器查询可视为对内置内在行为的逐步增强。

如果我们能够重构块,使其具有内置的内在响应性,那么我们可能需要发展设计工具,以适应一些值的配置:

  • 如果可以指定最小值和最大值,那么字体大小选择器是什么样子的?
  • 决定库中列的最大和最小数量的控件是什么样子的?
  • 对于逐步堆叠的列,是否需要最小列宽滑块?

这些想法需要一些视觉探索。

@贾斯穆森 贾斯穆森补充这个[功能]设计工具 影响块外观的工具,既可以增加工具数量,又可以改进实验标签2021年9月8日
@米提亚斯 米提亚斯提到了这个问题 2021年9月8日
66项任务
@米提亚斯 米提亚斯补充这个[类型]概述 一个重点领域的全面、高层次视图,通常存在多个跟踪问题标签2021年9月8日
@乔斯内尔普德克斯
复制链接

虽然我喜欢使用响应性文本和上下文感知开发的想法,但我觉得这应该由主题开发人员来处理,而不是在核心中。

我担心的是,这将是非常固执己见的,并且可能会导致更多的债务,主题开发人员将需要在自定义构建中定期分解、删除或覆盖这些样式。这也假设所提供的解决方案将与大多数视觉设计解决方案相匹配,但我不相信会这样。

我建议将响应性文本和上下文感知开发交给主题开发人员处理。然而,如果我们启用了响应性文本(或其他上下文感知开发),那么它是可选的,可以被theme.json轻松删除。利用容器查询(也由主题开发人员)作为附加整体解决方案的路线图。

@cbirdsong公司
复制链接

我确实认为排版对核心插件来说太过分了,但库存块的内在布局风格会比当前的好得多,因为它们可以在更多的上下文中工作,而主题作者不需要与之斗争。在使用块编辑器对项目进行自定义主题开发时,我最终完全禁用了库存编辑器样式,以便用内部布局替换它们。

@ouw-jvt公司
复制链接

[……]我觉得这应该由主题开发人员来处理,而不是在核心中。

[……]这将是非常固执己见的,并可能导致主题开发人员需要在自定义构建中定期分解、删除或覆盖这些样式的更多债务。

古腾堡已经跨过了这些门槛——这些东西需要在那里,它们应该可以被主题开发人员和最终用户扩展。现在我们仍然有你列出的所有负面信息,但没有我们需要的控制(以及其他平台中的控制)。

@米提亚斯
复制链接
成员

这里的下一步应该从可以设置嵌套组块的宽度开始,这样我们就可以用行+堆栈来表示列。我想探讨一下这些宽度元素的最小/最大值。

@斯特拉斯
复制链接
贡献者

斯特拉斯 评论2022年11月14日

我还想提到尺寸响应的属性<图像>需要有关元素绝对宽度的信息-在许多情况下,可以通过知道其容器到根的宽度来实现。

@亚里士多德
复制链接
成员

亚里士多德 评论2022年11月16日

我100%同意内在设计是前进的道路。。。
我们生活在一个消费类设备可以是任何东西的世界,从1英寸的智能手表到100英寸的智能电视。“像素完美”不再有效,因为当设备变化如此之大时,“像素”不再有意义。它太有限,非常脆弱。
现在是我们走向像素无关设计原则的时候了,让每个人都能更轻松地完成任务。

这里的下一步应该从有权设置嵌套组块的宽度开始,这样我们就可以用行+堆栈来表示列。我想探讨一下这些宽度元素的最小/最大值。

去年,我做了一个关于专栏内在风格的实验。。。(#33330)
我从来没有完成公关,因为其他事情都被优先考虑,但这个概念运作得很好。我可以重写它并重新开始工作👍
从我当时的实验来看,我们不一定需要最大值值,使用最小值例如,我们可以定义需要3列,然后每列都有一个列最小宽度属性。“3列”部分表示子级的最大值。这个列最小宽度值可以确保内容易于阅读,并在需要时用于折叠/堆叠内容(例如,使用列最小宽度属于2000万将是文本内容的合理值)

@彩色电视机
复制链接
成员

@贾斯穆森我正在尝试吸收这里的一些理由,我相信我95%的人都支持内在设计,但我忍不住注意到你最初的CodePen有显示:网格;。然而,目前没有使用显示:栅格在今天的古腾堡(WordPress)。我不确定这对我来说是否是一个关键的阻碍,我只是好奇为什么显示:栅格尚未使用,是否有考虑和关注将其纳入古腾堡的更多布局?

我看到里面有讨论#44557但没有进展。🤔

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

网格可以进入编辑器,但它不是内在行为的前提,甚至不是其唯一的实现。我认为Row块中内置的“允许包装”功能以及流畅的排版是这方面的两个现有示例。此线程中链接的宽度行为(#45364)代表另一个。同样值得重申的是,内在行为并不排除查询,它们可以共存。

一个想法是网格,当启用时,包含内容、宽对齐和完全对齐。我在几个较老的分支但网格在整个编辑器中的应用(而不是仅仅作为单个块的一部分,例如Row和Stack如何应用flex)需要进行一些权衡,包括打破边距崩溃。这不是我们不能使用的东西,猫头鹰选择器(* + *)对于大多数区块主题中应用的利润率来说,这减轻了这一点,但网格仍会级联并带来其他挑战。如果要进行这样的权衡,这意味着它还应该带来更多的智能,而不仅仅是包含对齐,例如调整手柄大小等。这就是说:我认为这是可能的,但它需要正确的想法。我不确定这是不是一个“网格”块,但是Row添加flex属性的方式效果很好,IMO。

@cbirdsong公司
复制链接

画廊区块的一个新选项似乎很合适,因为它可以让更仔细的艺术指导照片集。

@彩色电视机
复制链接
成员

伴随着一系列权衡,包括打破利润崩盘。这不是我们无法处理的,大多数块主题中应用的用于边距的owl选择器(*+*)缓解了这一问题,

我完全忘记了这个挑战及其在布局中的含义,以及它如何与建设者的期望交互。谢谢你给我启发。

我认为这是可能的,但它需要正确的想法。

听到。👍

我不确定这是否是一个“网格”块,但Row添加flex属性的方式效果相当好,IMO。

是的,街区进展顺利。🤘

@tomxygen公司
复制链接

虽然我真的很喜欢内部设计,但我认为它解决了99%的情况,使得响应控制变得毫无用处。然而,仍有1%的情况需要在手机和桌面上进行不同的设计。

也许不一定需要经典的响应控件,但我认为能够根据视口大小显示/隐藏元素是实现更复杂设计的最低要求。

下面是一个示例:
我正在尝试使用WooCommerce构建单一产品模板。在手机上,我希望产品照片是全宽的,上面、左边和右边都没有填充。它在小屏幕上工作得很好。
相反,在桌面上,它周围应该有填充物。下面是它在手机和桌面上的外观:
236837823-30df7472-4e09-41c4-a264-a5d092be15ce
236844404-f8e71117-e3f9-4c9d-8a59-015b89d517b1

为了实现这一点,我必须使用插件响应块控制插件并有两张不同的产品照片,一张在手机上显示,另一张在桌面上。
这种简单的设计是无法实现的核心gutenberg。

在本期中,我列出了响应性控件的其他用例(至少需要根据视口大小显示/隐藏):#50431

@斯特拉斯
复制链接
贡献者

斯特拉斯 评论2023年5月10日

CSS容器查询终于在这里了(所有相关浏览器都支持)!
这对列块、图像等的断点有很大帮助。

@亚里士多德
复制链接
成员

对于填充,可以使用如下内容:最小值(计算值((100vw-960px)*100),20px)这将使用20像素填充大于960px的屏幕,否则将为零。
你没有不得不使用响应式控件,大多数事情在现有控件中都是可能的&只要有人可以为这些事情编写自己的值。当然,这并不像大多数人希望的那样简单。。。但是,我们不应该在不考虑所有影响、架构等的情况下匆忙为所有内容添加响应性控制。
你链接到的插件看起来不错,Core不一定需要包含所有内容。。。使用插件很好,这就是它们的用途!

至少需要根据视口大小显示/隐藏

如果可能的话,这实际上是应该不惜一切代价避免的。。。手机和桌面应始终具有相同的选项和体验。这不仅关乎用户体验,还关乎可访问性。根据视口显示不同的元素是最糟糕的情况。

@tomxygen公司
复制链接

只要有人能写下自己的价值观

这正是关键所在。
对于那些不会写代码和css的人来说,全网站编辑尤其好,但如果不写css就无法实现更复杂的设计,许多人会继续使用Elementor等页面生成器,甚至考虑WebFlow等其他平台。

核心不一定要包括阳光下的一切。。。

我并不是说核心需要包含任何可能的选项,然而,任何WordPress页面生成器和任何页面生成器平台都支持某种响应控件。
如果不在核心中实现它们,第一次接触FSE的人首先会惊讶于Gutenberg不支持这样一个基本功能,然后他们会感到恼火,因为他们必须寻找第三方插件来启用它。

事实上,如果可能的话,应该不惜一切代价避免这种情况

我为那些经常想添加许多细节、资产、长段落等的客户构建登录页。
它在桌面上运行良好,但在较小的屏幕上运行不太好。
这就是为什么我有时会减少手机上的内容量,虽然在每个页面生成器软件上都很容易做到这一点,但在古腾堡是不可能的。

@米提亚斯
复制链接
成员

@tomxygen公司当然,内在的设计原则是一个有用的视角,可以以可持续的方式设计大部分功能和布局工具,但它并不能捕捉到你想做的一切,比如在移动设备或反之亦然。面临的挑战是找到一种方法来引入更具体的响应工具,而不大幅降低编辑器在最常见用例中的整体可用性。大多数添加断点控件的库都是在按性能计算的基础上添加的,这很容易导致人们不知道应用了什么,或者被选项淹没。

有一些插件工具,如“块可见性”,可以弥补这些差距,直到我们有空间和带宽在核心中做一些可持续的事情。例如,已经讨论过几次的一个想法是,允许在查看“mobile”时进行的编辑仅应用于该断点。您可以进行的编辑量自然会局限于具有表现力的内容(例如,在这种情况下,删除块可能会变成“隐藏此块”)。这可能是一个探索的选择。

@tomxygen公司
复制链接

允许在查看“mobile”时所做的编辑仅应用于该断点

我真的很喜欢这个想法,我认为它值得进一步探讨。
它无疑是最用户友好的概念,因为您所看到的正是您正在编辑的内容。
当我第一次见到网站编辑时,我无意中对手机视图中的组填充进行了编辑,以为我只是在编辑手机视图,然后发现我把整个页面都弄乱了。

@tomxygen公司
复制链接

@米提亚斯

例如,已经讨论过几次的一个想法是允许在查看“mobile”时所做的编辑仅应用于该断点

你有机会把这次讨论联系起来吗?

@米提亚斯
复制链接
成员

是的,这个问题抓住了它的本质:#19909.

@tomxygen公司
复制链接

tomxygen公司 评论2023年5月21日

谢谢你,马蒂亚斯。
我认为这是一个非常重要的主题,我发现OllieWP的开发人员写了一篇很棒的文章,全面总结了我对响应性控件的可能实现的看法,它不能使界面膨胀,应该只用于非常具体的实例。他还在文章中添加了有趣的模型。

WordPress中响应控制的本地迭代方法由OllieWP提供。
这是他们建造的一个非常有趣的模型,这也在文章中:
视频模型:https://github.com/WordPress/gutenberg/assets/47855768/176d4000-6c3c-4988-9dfd-16dd5f0d3d7f

正如我们许多人所认同的那样,虽然固有设计很酷,效果也很好,但有时需要响应性控制来实现更高级的造型。
我曾多次看到,在添加某种响应控件之前,人们不会切换到完整的网站编辑。
例如,在这篇文章WPTavern上:

是否没有推动更灵敏的控制?[……](它)仍然让我远离古腾堡。

此外,这是一个有趣的阅读在推特上。

上午9点42 29分截屏2023-05-21

我认为,对这个问题的首次探索可能会大大改进古腾堡的页面生成器/界面。

@地线
复制链接

是否努力引入响应性控制?目前不可能实现简单的操作,比如将文本集中在小屏幕上,并在大屏幕上左对齐。这只是冰山一角,当你为不同的屏幕尺寸进行特定的设计时。

@路易斯7777
复制链接

只要有人能写下自己的价值观

这正是关键所在。对于那些不能编写代码和css的人来说,完整站点编辑尤其有用,但如果不编写css就无法实现更复杂的设计,许多人会继续使用Elementor等页面生成器,甚至考虑使用WebFlow等其他平台。

核心不一定要包括阳光下的一切。。。

我并不是说核心需要包含任何可能的选项,然而,任何WordPress页面生成器和任何页面生成器平台都支持某种响应控件。如果不在核心中实现它们,第一次接触FSE的人首先会惊讶于Gutenberg不支持这样一个基本功能,然后他们会感到恼火,因为他们必须寻找第三方插件来启用它。

如果可能的话,这实际上是应该不惜一切代价避免的

我为那些经常想添加许多细节、资产、长段落等内容的客户构建登录页。它在桌面上运行良好,但在较小的屏幕上运行不太好。这就是为什么我有时会减少手机上的内容量,虽然在每个页面生成器软件上都很容易做到这一点,但在古腾堡是不可能的。

如果古腾堡不提供每个帖子的自定义CSS(不仅仅是每个块!),我将继续使用Elementor或其他软件进行页面构建。此外,是的,必须使用第三方插件来获得响应控制,这确实令人恼火。

免费注册 在GitHub上加入此对话.已经有帐户了吗?登录以发表评论
标签
【功能】设计工具 影响块外观的工具,既可以增加工具数量,又可以改进实验 [类型]概述 一个重点领域的全面、高层次视图,通常存在多个跟踪问题
项目
还没有
发展

没有分支或拉请求