WordPress 中段落块的 theme.json 中的字体大小名称和默认值答案

【问题标题】：Font size names and defaults from theme.json for paragraph blocks in WordpressWordPress 中段落块的 theme.json 中的字体大小名称和默认值
【发布时间】：2022-07-08 20:16:27
【问题描述】：

我正在使用theme.json 设置段落块的字体大小，就像这样...

...
"core/paragraph": {
    "typography": {
        "customFontSize": false,
        "customLineHeight": false,
        "dropCap": true,
        "fontSizes": [
            {
                "name": "Small",
                "slug": "small",
                "size": "clamp(14px, 1.25, 28px)"
            },
            {
                "name": "Medium",
                "slug": "medium",
                "size": "18px"
            }
        ]
    }
},
...

这很好用，并且在将段落添加到页面时可以选择字体大小，但字体大小名称以整数 1 和 2 的形式出现：

当我将small 的值更改为像14px 这样的像素大小时，名称就是不带“px”的像素大小：

两个问题：

如何设置有意义的字体大小名称以显示在编辑器侧边栏中？
如何设置预选的默认字体大小？

谢谢。

【问题讨论】：

您正在测试哪个版本的 WordPress，您是否还启用了 Gutenberg 插件？
在没有 Gutenburg 插件的情况下使用 5.9.2

标签： wordpress wordpress-gutenberg

【解决方案1】：

在“small”设置为clamp(14px, 1.25, 28px) 的示例中，Font Size Picker 组件尝试将值转换为整数，但不幸的是，parseInt() 不喜欢“clamp”。相反，所选字体大小的索引显示在 UI 中。如果您使用 px 或 em 的大小，它将按预期显示一个整数值。

例如使用夹子

例如使用像素

如果您设置的字体大小超过五种，组件将改为呈现一个下拉列表/选择字体大小名称：

这可能是“clamp”处理方式的疏忽，但 theme.json 也发生了许多变化，基于构建块的主题仍在开发中，所以这可能会改变..

在 WordPress 5.9.2 中测试，没有 Gutenberg 插件。

【讨论】：

好有趣。我想我会忍受它，直到对 theme.json 处理大小名称的方式进行更新。也许他们可以添加一个“标签”键
@koosa 我同意，标签键似乎很明显，但我也看到字体数字大小的用例对于只专注于设置大小的编辑/用户来说是有意义的。如果您将鼠标悬停在大小上，它会将名称显示为工具提示。

【解决方案2】：

我喜欢 Gutenberg 的发展方向，但像这样未经修饰的东西才真正突出了它仍然是测试版软件。我今天有一个客户给我发电子邮件，她不小心更改了段落的字体大小，并且不知道如何修复它 - 她只能看到一些标有“1”、“2”和“3”的字体大小按钮.当然，将鼠标悬停在按钮上会将标签显示为工具提示，但这是一个非常糟糕的用户界面。

我现在添加了一些 hacky CSS 来整理它（我相信这将在下一个 Gutenberg 版本中打破......）：

/* use the font size name as the button label */
.components-font-size-picker__controls button::after {
    content: attr(aria-label);
}

/* hide the original label ("1", "2", ...) and the tooltip */
.components-font-size-picker__controls button div,
.components-font-size-picker__controls button span {
        display: none;
    }
}

【讨论】：