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最大限度地发挥了主题流体设计系统的功能?
这是一场大对话,让我们听听不同的评论!欢迎在下面发表评论,或与我在推特上.