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

问题描述 投票:0回答:1

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

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

虽然

core/list
项目采用预期的颜色
"red"
,但我无法为
<li>
项目获取更多样式。 有什么我遗漏的或者 theme.json 真的不支持吗?

感谢您的帮助!

wordpress wordpress-gutenberg
1个回答
0
投票

我建议始终参考 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 的其他便捷信息。

© www.soinside.com 2019 - 2024. All rights reserved.