Giải thích color.palette (ok)

https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/

• color.palette:

  • generates 3 classes per preset value: color, background-color, and border-color.

  • generates a single custom property per preset value

• color.palette:

  • tạo ra 3 lớp cho mỗi giá trị đặt trước: màu sắc, màu nền và màu đường viền.

  • tạo một thuộc tính tùy chỉnh duy nhất cho mỗi giá trị đặt trước

{
    "version": 1,
    "settings": {
        "color": {
            ...
            "palette": [
                {
                    "slug": "strong-magenta",
                    "color": "#a156b4",
                    "name": "Strong magenta"
                },
                {
                    "slug": "very-dark-grey",
                    "color": "rgb(131, 12, 8)",
                    "name": "Very dark grey"
                }
            ]
        },
        ...
}

Out

• • tạo ra 3 lớp cho mỗi giá trị đặt trước: màu sắc, màu nền và màu đường viền.

/* Top-level classes */
.has-strong-magenta-color { color: #a156b4 !important; }
.has-strong-magenta-background-color { background-color: #a156b4 !important; }
.has-strong-magenta-border-color { border-color: #a156b4 !important; }

• • tạo một thuộc tính tùy chỉnh duy nhất cho mỗi giá trị đặt trước

.has-blush-bordeaux-background { background: linear-gradient( 135deg, rgb( 254, 205, 165 ) 0%, rgb( 254, 45, 45 ) 50%, rgb( 107, 0, 62 ) 100% ) !important; }