Wordpress 自定义块间距（填充和边距）响应式

Question

我花了一些时间构建一个自定义块，为我提供一个包装器，我可以为内部块设置主题。一切都好。我可以在块配置（block.json）中添加所需的支持：

"supports": {
        "html": false,
        "spacing": {
            "padding": ["top", "bottom"],
            "margin": ["top", "bottom"]
        }
    },

...以及 theme.json 中所需的设置：

"spacing": {
            "spacingScale": {
                "steps": 0
            },
            "spacingSizes": [
                {
                    "name": "xSmall",
                    "size": "2rem",
                    "slug": "x-small"
                },
                {
                    "name": "Small",
                    "size": "3rem",
                    "slug": "small"
                },
                {
                    "name": "Medium",
                    "size": "4rem",
                    "slug": "medium"
                },
                {
                    "name": "Large",
                    "size": "5rem",
                    "slug": "large"
                },

            ]
        }

然而，当我开始考虑响应式风格时，整个事情就崩溃了。我希望填充和边距值在不同的断点处发生变化。我通常会添加顺风类来为我提供响应式间距。

任何人都可以找到解决这个问题的方法。我确实考虑过向块添加属性以选择间距值（xs、s、md、l、xl），然后根据所选值分配类。这感觉工作量很大，应该有一种方法可以让一些响应式的工作发挥作用。

我认为clamp(x, y, z) css功能可能有效，但最小值和最大值不响应断点。

感谢任何想法。

Answer 1

clamp() Flui（相对）值可以使用两个目标断点来计算，您希望在这两个断点处分配两个固定值 - 与媒体查询完全相同。 示例：15 像素到 600 像素 - 流体值 - 1280 像素到 18 像素。 这只是关于数学。 请查看我关于钳位计算的文章（法语，如果您不会说法语，请使用 FireFox 或 Safari 翻译功能）和我的钳位生成器这里如果您想要一个干净且快速的解决方案。