如何使用 theme.json 设置 WordPress 核心/列表的样式？

Question

我有一段时间尝试使用 wordpress theme.json 来设置普通列表块的样式。

   "blocks": {
        "core/list": {
            "color": {
                "text": "red"
            }
        },
        "core/list-item": {
            "style": "disc",
            "indent": "2em",
            "spacing": "5px"
        }
    },

虽然

core/list

项目采用预期的颜色

"red"

，但我无法为

<li>

项目获取更多样式。 有什么我遗漏的或者 theme.json 真的不支持吗？

感谢您的帮助！

Answer 1

我建议始终参考 theme.json 架构。您可以在 https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/theme.json.

找到它。

分析架构，您会发现某些样式/选项/值的表达方式略有不同。

例如，您可以这样设置其中一些：

"core/list": {
    "typography": {
        "fontSize": "var(--wp--preset--font-size--size-20)"
    }
},
"core/list-item": {
    "typography": {
        "fontSize": "var(--wp--preset--font-size--size-32)"
    },
    "spacing": {
        "margin": {
            "bottom": "1.5rem"
        }
    },
    "border": {
        "width": "1px",
        "style": "solid",
        "color": "var(--wp--preset--color--sunset-red)"
    }
}

也就是说，有些选项不可用。例如，我找不到设置光盘样式的方法。应该可以添加自定义 CSS 规则，但我不知道如何应用

list-style-type:disc

规则。

另外，我建议您在 theme.json 文件顶部设置“schema”属性。这样，您使用的编辑器将能够在您编写可用属性时建议它们。您可以通过以下方式设置架构：

"$schema": "https://schemas.wp.org/trunk/theme.json"

查看 https://fullsiteediting.com，了解有关如何设置 theme.json 的其他便捷信息。