,

WordPress中响应控制的本地迭代方法

我们的设计在移动设备上的外观非常重要。因此,我们需要讨论WordPress中的响应设计控件,以及是否需要它们。

Ollie Responsive公司

WordPress区块主题最强大的功能之一是能够创建一个设计系统来塑造主题的美学。这个设计系统由主题的theme.json文件中的设置提供支持,它规定了块、模式、模板的设计语言,以及所有这些元素如何相互作用。

除此之外,用户可以自定义这些样式,以便在WordPress UI中对其站点进行彻底更改。与经典的WordPress主题相反,区块主题旨在提供无代码(或非常接近代码)的体验,使用户能够使用本机控件设计、构建、自定义和启动网站。

这种向无代码体验的转变意味着WordPress必须找到创造性的方法来处理复杂的问题,而不会让用户不知所措(其中许多用户仍在缓慢过渡到块时代)。在这一过程中,WordPress UI不断发展和演变,以满足构建现代网站的许多需求。

控制力强,责任心强

现在用户正在深入研究区块主题,他们看到的第一个障碍之一是WordPress UI中缺少响应控件。这是一个完全现实的期望——几乎所有其他网站构建者都有针对平板电脑和手机视图调整样式的精细控制。

现在,由于缺乏核心标准,许多WordPress块解决方案已经开始实现自己的响应控制。当然,用户想知道这些控件何时会进入WordPress核心以获得更统一的体验。

WordPress核心决策者的反应各不相同。有人说它太复杂了,无法在UI中实现,有人说这是一种抱负,有人认为它是流动的,或者说“内在设计”(稍后会详细介绍)就足够了,当你需要更多东西时,只需添加CSS即可。

然而,对于仍在决定是否完全购买区块主题范例的创作者、机构和自由职业者来说,这种反应并没有真正激发他们的信心。对许多人来说,在响应控制方面停滞不前,与无代码主题化未来的承诺背道而驰。

这种情绪完全引起了我的共鸣。去年我深深地融入了区块主题,学习了我能学到的一切创建WordPress主题这将所有这些强大的新功能结合在一起。根据我的经验,我们大约有90%在那里。这就是现在区块主题的好!

但是有这么大的潜力剩下的10%,今天我想探讨一下如何才能接近100%。

未来是灵活的

如果你已经关注对话围绕WordPress块主题,您可能已经看到了“内在设计”一词在不同上下文中的使用。虽然这不是一个特别新的概念,但快速复习很重要,因为这将有助于我们了解如何看待区块主题。

正如Jen Simmons在2018年的演讲中所说“你所知道的关于网页设计的一切都改变了“,内在设计是我们如何处理我们所知道的响应性设计的演变。

  • 承包与扩建–我们考虑设计如何适应可用空间变化的方式
  • 灵活性–主要将Flexbox和Grid与较新的单元和功能结合使用,使我们的布局能够以不同的速度适应可用空间
  • 视口–能够使用视口的所有四边以及利用视口单元

传统上,我们认为响应式设计是指设计在特定视口大小下的变化(即在768px时,我希望列向下折叠为一列)。

在这个模型中,我们本质上是说内容应该转换为适合任意约束,而不是让内容根据上下文决定何时应该转换为更合适的布局。由于需要考虑数千种设备屏幕大小,因此寻找断点在很大程度上是徒劳的。

相反,通过CSS Grid、Flexbox、容器查询等强大功能,夹紧,最小(),最大()、和适合的,我们可以设计更智能的布局,以适应其存在的上下文。我们可以也应该摆脱断点,从流体优先的方法开始考虑我们的整个设计。这是内在设计的基础。

到目前为止我们做得怎么样

实现内在设计的所有好处将是一项巨大的努力,需要广泛采用新的建筑标准,但我们已经有了一个很好的开端!

事实上,我们更处于流动设计阶段,而不是内在阶段。(也许区别无关紧要?)流体印刷术、边距、填充和间距CSS格式夹子(),我们可以实现通用内容元素的流畅而优雅的缩放,同时还可以为用户提供通用的UI控件。这是部分内在设计的承诺。

然而,为了达到那种史诗般的内在网页设计水平,WordPress将不得不进一步向大规模倾斜CSS网格和Flexbox实现这可以抽象出基于网格布局的建筑的复杂性。除此之外,还必须进行持续的教育工作,以帮助主题构建者开始思考和构建这些原则。这是一个整体的氛围。

流体优先方法

当我们努力实现原生内在网页设计的光明未来时,我们仍然对WordPress网站建设的现实负有责任今天。我们仍然有许多经验丰富的用户和新手用户想知道响应式设计控制,以及我们是否可以与其他现代网站建设解决方案竞争。

在短期内,我们可以而且应该促进采用流体设计作为构建块主题的“go-to”方式。通过在排版、边距、填充和块间距之间共享流畅的风格,您的设计系统可以处理您的大部分响应需求,同时在整个网站上保持美丽的凝聚力。

但是,即使有像我这样的全面流体设计系统内置于奥利,你是仍然在某些情况下,您需要进行微调(只需询问拥有客户名册的任何人),而媒体查询在这里仍然有一个实用程序。我们只是还没有到那个时候,我们可以简单地把它们刷掉。

短期内,我们可以而且应该促进采用流体设计作为构建模块主题的go-to方式

那么,我们该怎么处理最后的10%呢?我们如何在不被响应性控制淹没的情况下实现响应性控制?我们能做得比告诉人们使用自定义CSS更好吗?我想是的,我有一些想法!

探索本机响应控制

在过去的几周里,我一直在考虑如何实施常识性的响应控制,以解决流体设计可能带来的差距。

考虑添加时任何东西对于WordPress来说,应该始终保持克制。大功能很难获得批准,实施成本也很高,因此我们必须保持我们的方法超级简单、直观,并尽可能多地使用当前的产品。

考虑到这一点,下面是一些基线需求,我用它们来进行概念验证。

  • 只有在例外情况下才需要响应型风格
  • 响应设置只应在上下文中显示
  • 响应设置应限于特定的样式设置

仅显示上下文中的控件

首先,我们必须不惜一切代价避免混乱WordPress UI。添加只有一些用户需要有时不是正确的方法。

相反,我们应该只在最需要的上下文中显示这些控件。为此,我们可以进入已经内置在WordPress编辑器中的Tablet和Mobile视图。

现在,这个视图只是在WordPress定义的各种视口中作为内容的简单预览。如果我们把这个观点再往前看一点呢?如果你不仅能看法你的风格在这种反应性语境中,但你也可以在语境中修改他们在这里?

引入样式替代

接下来,我们需要一种机制来调整这种响应视图中的样式。让我们重用我们已有的相同UI,但更改其上下文。

在本建议中,当您处于编辑器的响应视图中时,选择样式设置上会出现一个新菜单项。点击启用样式替代会将各自的样式转换为覆盖,从而在该视口大小上占据先机。

在本例中,更改填充滑块只会影响780px以下的屏幕(或主题中定义的任何断点)。理想情况下,我们默认使用WordPress定义的平板电脑和移动设备断点,但允许通过theme.json自定义这些断点。

除了指示样式覆盖处于活动状态之外,我们不需要真正地必须进一步修改本机设置UI。通过烤肉串菜单,可以像其他任何样式设置一样启用和禁用覆盖。

对于一些内联教育,我们可以在用户第一次与功能交互时使用指导模式。这将是一个很好的机会,可以设定一些现实的期望,并鼓励用户在添加样式覆盖之前考虑其流体设计系统。

总之,样式覆盖的流可能看起来像这样。在本演示中,我们将为平板电脑上的填充添加样式覆盖,然后在返回桌面视图之前将其删除。

缩小范围

回到约束的概念,我们必须决定哪些块样式设置应该接收样式替代设置。首先,我们可以安全地将其范围缩小到仅支持支持流体样式的设置面板,例如排版和尺寸(边距、填充和块间距)。

Columns块也有一个很好的例子,它目前试图自动处理响应堆栈。事实上,Columns块通常是用户意识到缺少响应控件的第一个块。

迭代和有意

我喜欢这个概念的地方是它是迭代的和有意的。它摆脱了断点样式的过度使用,并且不会用新UI淹没用户。相反,样式覆盖被负责任地隐藏在一个有意义的上下文中,为可能在范围内膨胀的功能提供约束。

总结

那么,你觉得这个概念怎么样?当然,我还没有涵盖这里的所有情况,所以我很想听听你的想法。如果有什么不同的话,也许这是一个更大对话的良好开端。

像这样的本地迭代方法是不是一个好的起点?你在工作中需要什么样的反应风格?在考虑是否需要响应性控制之前,您是否已经通过theme.json最大限度地发挥了主题流体设计系统的功能?

这是一场大对话,让我们听听不同的评论!欢迎在下面发表评论,或与我在推特上.

对“WordPress中响应控制的本地迭代方法”的10个回应

  1. 马吕斯阿凡达
    马吕斯

    感谢您的精彩文章和见解!

    *Block Enhancements*插件已经使用了本机响应控件,它非常适合文本对齐。

  2. 任阿凡达

    好主意!这是我现在用CSS做的事情,但有方便的UI控件更好。

    我希望编辑器中的侧面板更大或滑出以减少菜单切换,甚至可以先移动。

    在使用Tailwind CSS做网站时,我一直喜欢移动优先的方法。为什么它不在WP中?

  3. 卡斯滕·巴赫阿凡达

    我喜欢你的想法,希望你已经申请了公关!

    我真正喜欢的是,它在当前UI中逐步工作,而不像你说的那样,需要新的膨胀。伟大的。

  4. 马西奥·阿凡达

    你好,迈克,

    响应式设计是该领域的一个基础性课题。我只是不明白为什么一开始就没有解决。

    然而,UI混乱的问题是一个实际问题,您的建议是在响应控件的需要和使用编辑器时最大限度地减少摩擦之间的一个很好的折衷,而这正日益成为一个问题。

    关于视口选择:选择所需视口后立即激活覆盖选项不是更好吗?我理解,如果用户努力选择它,主要是因为他们正在检查布局是否按预期工作,如果不是这样,则进行更正。

    也许这需要一些用户测试,但考虑到这是真的,自动激活覆盖将节省一些鼠标移动和点击,这总是很好的用户体验,对吧?

    无论如何,非常感谢你发表这些文章,他们总是考虑周到

  5. 莎莉·G·阿凡达
    萨利·G。

    我觉得这很好!易于理解和使用。

  6. 特雷弗·R阿凡达
    特雷弗·R

    这篇文章很吸引人,我喜欢你对轻触响应式覆盖解决方案的思考。我真的很受鼓舞,要把内在设计作为我比赛的起点。

    现在,因为我正在进行传统的响应式设计,为了解决核心块中缺少响应控制的问题,我使用GenerateBlocks Pro。它也使用核心的“预览”功能来更改不同视口大小的样式,因此很方便。虽然它工作得很好,并为您提供了所需的许多功能,但它会很快让客户(有时也会让我作为开发人员)感到困惑。我经常希望我只使用CSS和一些自定义类。🙂

    这就是为什么我喜欢用内在设计来简化事物。然后,如果你能拥有你概述的这个核心功能,那么当你必须通过一些小的改变来“恰到好处”地做一些小的调整时,它将是完美的。

  7. 米歇尔·阿凡达
    米歇尔

    很好的反射,非常感谢您将响应性/内在微调设置的重要性带到讨论中。

    我们在WordPress.org上看到,很多古腾堡布局课程总是在桌面端完成,但从来没有在平板电脑/手机端完成。这是一个很大的问题,因为现在大多数人都在手机上浏览网站。座右铭是“移动第一”。

    就我个人而言,我还有一些其他疑问:
    –响应式菜单功能如何?这是目前缺失功能的一大部分。
    –如何管理块的重新排序显示?
    –当你有Flexbox(很快就会有CSS网格)时,列块还需要存在吗?
    -条件显示也是需求的一部分

    最后,当你处理响应性(内在)设置时,管理记住所有细微变化可能会很快成为一项令人胆怯的任务。因此,应该有一个中心位置来显示所有已完成的更改。(可以在“样式”的同一级别的外观>编辑器中)

  8. 拉尔斯·伊贾斯阿凡达

    让块样式由容器查询处理(我们需要完整的浏览器支持),这样做有意义吗?
    让每个块的样式都适合自己的大小,而不是视口的大小,这将是一件很好的事情。将使设计过程更加直观…

    1. Mike McAlister阿凡达

      我喜欢容器查询,但我不确定这是否是核心路线图的一部分。这将需要一种与我们现在的方法稍有不同的方法。但这并非不可能!

      也就是说,在某些情况下,总是会出现元素位置不对或上下文要求修改它的情况。这正是web设计/开发的本质,我们希望在其中推进边界,而客户有特定的请求。

  9. 皮埃尔·蒂尔斯顿阿凡达
    皮埃尔·蒂尔斯顿

    我希望响应性设计控制不会被认为只是“微调”。

    有时手机上出现的东西会完全破坏内容创建者的意图。

    例如,如果创作者将两个封面图像并排放置,因为他们希望它们在其他内容中显示为拇指按钮。
    然后在手机上,低分辨率图像占据了整个屏幕。用户不知道为什么他们突然看到一幅巨大的低分辨率图像。对于用户来说,这是一个总的WTF时刻。

    没有开发人员能够预测创作者的意图。

    此外,FSE的巨大价值在于能够“修复”主题中的奇怪行为。因此,依靠开发人员来解决问题是不好的。通常情况下,这会让创建者陷入困境。

留下回复

您的电子邮件地址将不会被发布。 已标记必填字段*