古腾堡 古腾堡项目是WordPress的新编辑器界面。编辑器改进了创建新内容的过程和体验,使编写丰富内容变得更加简单。它使用“块”来增加丰富性,而不是短代码、自定义HTML等。https://wordpress.org/gutenberg网站/13.8引入了流畅的排版特征,它允许主题作者定义适应视口的字体大小。版本13.9还将添加一些修复和增强。
因为这是一个新特性,它将主要影响主题作者构建设计的方式,所以需要主题开发社区进行彻底测试。请花点时间测试并在评论中分享反馈。
流体排版概述
流畅的排版功能允许主题作者通过他们的主题.json
文件,如以下视频剪辑所示:
新功能为主题作者提供了两个新键,可以在其主题.json
文件夹:
设置.打印.流体
可以设置为真的
启用流体排版功能(默认假
).- 然后,在
设置.typography.fontSizes
接受流体
具有的对象最小值
和最大值
值(在即将发布的Gutenberg 13.9中,他们可以将其设置为假
选择退出个人尺码。古腾堡使用这些值,现有的大小
值和默认公式(参见变更集)计算夹子()
CSS公司 CSS是级联样式表的缩写。这是控制网站设计或外观的因素。输出。
下面的代码片段显示了如何既启用功能又定义单个大小。下面有两个大小示例设置.typography.fontSizes
第一种尺寸,正常的
,增加了额外的最小和最大尺寸。第二种尺寸,大的
,禁用流体类型(需要Gutenberg 13.9)。
{“版本”:2,“设置”:{“排版”:{“流体”:正确,“字体大小”:[{“name”:“正常”,“大小”:“1.125rem”,“流体”:{“最小”:“1rem”,“最大”:“1.5rem”},“slug”:“正常”},{“name”:“大”,“大小”:“2rem”,“流体”:假,“slug”:“大”}]}}}
计算完成后,这将导致以下预设:
--wp——预设——字体大小——正常:夹钳(1rem,1rem+((1vw-0.48rem)*0.962),1.5rem);--wp——预置——字体大小——大:2rem;
如何测试
要进行测试,您必须至少古腾堡13.8已安装和主题主题.json
文件,例如Twenty Twenty-Two。或者,您可以添加自定义主题.json
文件到您自己的主题。
第一步是启用设置.排版.流体
在中主题.json
文件,其外观应类似于以下内容:
{“版本”:2,“设置”:{“排版”:{“流体”:正确,}}}
然后,您需要在设置.typography.fontSizes
.您的主题.json
代码现在应该类似于以下代码片段:
{“版本”:2,“设置”:{“排版”:{“流体”:正确,“字体大小”:[{“name”:“正常”,“大小”:“1.125rem”,“流体”:{“最小”:“1rem”,“最大”:“1.5rem”},“slug”:“正常”}]}}}
对于测试,您可以在编辑器中选择“正常”字体大小,或将以下内容直接复制/粘贴到块 块是一个抽象术语,用于描述使用WordPress编辑器组合在一起形成网页内容或布局的标记单元。这个想法结合了过去可能通过短代码、自定义HTML实现的概念,并将发现嵌入到单一一致的API和用户体验中。编辑:
<!-- wp:段落{“fontSize”:“normal”}--><p class=“has-normal-font-size”>酥饼棉花糖巧克力棒杏仁蛋糕。Dragée纸杯蛋糕馅饼苹果派冰淇淋芝士蛋糕糖李子酥饼威化饼。布朗尼口香糖熊口香糖饼干布朗尼</p>(第页)<!-- /wp:段落-->
如果使用Gutenberg 13.9进行测试,请尝试添加第二个字体大小,以禁用流体类型功能并运行相同的场景(命名此场景大的
):
{“name”:“大”,“大小”:“2rem”,“流体”:假,“slug”:“大”}
以下是一些需要记住并回答的问题:
- 字体大小是否适应视口?
- 是否执行了
主题.json
代码与您期望的前端匹配吗? - 前端和编辑器的行为相同吗?注:这需要Gutenberg 13.9才能在站点编辑器中工作。
- 类型在
最小值
和最大值
范围? - 禁用单个尺寸的流体功能是否有效(仅限Gutenberg 13.9+)?
- 作为一名开发人员,是否缺少可以改善这种体验的功能或选项?
- 这是否适用于经典和区块主题,取决于您测试的主题?
- 你觉得这个功能有什么令人沮丧或困惑的地方?
- 有没有你特别欣赏的地方?
请在评论中分享所有反馈。
即将发布的版本中预期的更改和功能
目前,fluid排版基本上是一个早期的、仅用于开发的功能,没有任何未来的改进可以让它发光。这是一个坚实的开端,将大量权力直接交给主题作者。然而,还有更多的前景。
古腾堡13.9包括两项改进:
开发人员还应该关注几个相关的问题:
道具到@卡夫列格以获取技术反馈和审查。
#测试