WordPress 6.1 新增填充边距块间隙预设值优化排版

WordPress 6.1版本带来了革命性的更新，引入了填充（padding）、边距（margin）和块间隙（block gap）的预设值系统。这一创新极大地提升了编辑器的易用性，实现了块之间的一致间距，并支持开箱即用的嵌套块功能。这些改进不仅简化了内容创建过程，还为用户提供了更灵活的布局控制选项。

文章目录 Toggle 问题解决方案：spacingScale对象在主题开关上启用后备禁用间距预设theme.json设置和样式的所有文档：背景资料问题块编辑器设计工具的设计理念是允许用户为块内容周围的间距添加自定义值，包括填充、边距或间隙。然而，这种设计限制了主题和插件作者的能力，无法将用户限制在固定的间距选项列表中，也无法在设置自定义空间后轻松调整整个站点的间距。

解决方案：spacingScale对象为了解决这一痛点，WordPress 6.1通过扩展theme.json文件中的spacingScale对象，引入了间距大小预设选项。这一功能与现有的字体大小预设类似，默认情况下，编辑器会生成一系列七种预设尺寸，这些尺寸在填充、边距和块间隙之间共享。这些预设尺寸的生成规则在theme.json的设置部分中有详细定义：

“spacing”: {
“spacingScale”: {
“operator”: “*”,
“increment”: 1.5,
“steps”: 7,
“mediumStep”: 1.5,
“unit”: “rem”
}
}

在上述配置中，中间步骤的任一侧会生成三个以1.5为乘数的步骤，形成以下spacingSizes数组：

[ {
“name”: “1”,
“slug”: “20”,
“size”: “0.44rem”
}, {
“name”: “2”,
“slug”: “30”,
“size”: “0.67rem”
}, {
“name”: “3”,
“slug”: “40”,
“size”: “1rem”
}, {
“name”: “4”,
“slug”: “50”,
“size”: “1.5rem”
}, {
“name”: “5”,
“slug”: “60”,
“size”: “2.25rem”
}, {
“name”: “6”,
“slug”: “70”,
“size”: “3.38rem”
}, {
“name”: “7”,
“slug”: “80”,
“size”: “5.06rem”
} ]

WordPress 6.1 新增填充边距块间隙预设值优化排版

用户可以根据实际需求生成更多或更少的步骤，也可以使用+运算符来创建不同的间距序列。如果主题需要特定的间距比例，可以在theme.json的settings.spacing.spacingSizes部分包含一组静态值。

间距大小转换为CSS属性的方式如下：

–wp–preset–spacing–20: 0.44rem;
–wp–preset–spacing–30: 0.67rem;
–wp–preset–spacing–40: 1rem;
–wp–preset–spacing–50: 1.5rem;
–wp–preset–spacing–60: 2.25rem;
–wp–preset–spacing–70: 3.38rem;
–wp–preset–spacing–80: 5.06rem;

在主题开关上启用后备选择 10、20、30 格式的slug有三大优势：首先，从最小到最大对尺寸进行排序比使用T恤尺寸之类的尺寸要直观得多；其次，对于希望在Core之间插入附加值的主题，例如Medium和Large之间的值，很容易使用55；最后，如果主题不支持现有内容中的间距预设slug（例如来自样板库的样板），则允许内容的跨主题/站点兼容性。数值可以回退到当前主题中最近的匹配，这也是在Medium两侧生成间距大小的原因。拥有一个已知的Medium slug 50有望使这些回退尽可能准确。

在编辑器UI的间距选项中，默认为预设选项提供切换回自定义值的切换功能，使用户可以轻松在预设和自定义之间切换。

禁用间距预设如果希望禁用间距预设选项，可以在theme.json中将settings.spacing.spacingScale.steps的值设为0。通过设置settings.spacing.customSpacingSize的值为false，可以禁用自定义间距大小。

theme.json设置和样式的所有文档：如何指导：全局设置和样式 (Theme.json)Theme.json 参考 (v2) 背景资料最终确定围绕这些间距预设的细节涉及与主题作者和核心贡献者的大量讨论。这些讨论可以在以下链接中找到：提案：标准化块标记、theme.json设计标记和CSS类以提高互操作性扩展theme.json以提供间距大小预设

文章网址：https://www.wpbull.com/news/2015.html

WordPress 6.1 新增填充边距块间隙预设值优化排版

相关推荐