Top-level styles #

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

{
    "version": 1,
    "styles": {
        "color": {
            "text": "var(--wp--preset--color--primary)"
        }
    }
}

Out

body {
    color: var( --wp--preset--color--primary );
}

Block styles #

Các kiểu được tìm thấy trong một khối sẽ được xếp vào hàng bằng cách sử dụng bộ chọn khối.

Theo mặc định, bộ chọn khối được tạo dựa trên tên của nó, chẳng hạn như .wp-block- . Ví dụ: .wp-block-group cho khối lõi / nhóm. Có một số khối muốn chọn không tham gia hành vi mặc định này. Họ có thể làm như vậy bằng cách thông báo rõ ràng cho hệ thống biết bộ chọn nào sẽ sử dụng cho họ thông qua khóa __experimentalSelector trong phần hỗ trợ của tệp block.json của nó.

{
    "version": 1,
    "styles": {
        "color": {
            "text": "var(--wp--preset--color--primary)"
        },
        "blocks": {
            "core/paragraph": {
                "color": {
                    "text": "var(--wp--preset--color--secondary)"
                }
            },
            "core/group": {
                "color": {
                    "text": "var(--wp--preset--color--tertiary)"
                }
            }
        }
    }
}

Out

body {
    color: var( --wp--preset--color--primary );
}
p { /* The core/paragraph opts out from the default behaviour and uses p as a selector. */
    color: var( --wp--preset--color--secondary );
}
.wp-block-group {
    color: var( --wp--preset--color--tertiary );
}

Element styles #

Ngoài các kiểu cấp cao nhất và cấp khối, còn có khái niệm về các phần tử có thể được sử dụng ở cả hai nơi. Có một nhóm khép kín trong số chúng:

link: maps to the a CSS selector.
h1: maps to the h1 CSS selector.
h2: maps to the h2 CSS selector.
h3: maps to the h3 CSS selector.
h4: maps to the h4 CSS selector.
h5: maps to the h5 CSS selector.
h6: maps to the h6 CSS selector.

Nếu chúng được tìm thấy ở cấp cao nhất, bộ chọn phần tử sẽ được sử dụng. Nếu chúng được tìm thấy trong một khối, bộ chọn được sử dụng sẽ là phần tử được thêm vào khối tương ứng.

{
    "version": 1,
    "styles": {
        "typography": {
            "fontSize": "var(--wp--preset--font-size--normal)"
        },
        "elements": {
            "h1": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--huge)"
                }
            },
            "h2": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--big)"
                }
            },
            "h3": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--medium)"
                }
            }
        },
        "blocks": {
            "core/group": {
                "elements": {
                    "h2": {
                        "typography": {
                            "fontSize": "var(--wp--preset--font-size--small)"
                        }
                    },
                    "h3": {
                        "typography": {
                            "fontSize": "var(--wp--preset--font-size--smaller)"
                        }
                    }
                }
            }
        }
    }
}

body {
    font-size: var( --wp--preset--font-size--normal );
}
h1 {
    font-size: var( --wp--preset--font-size--huge );
}
h2 {
    font-size: var( --wp--preset--font-size--big );
}
h3 {
    font-size: var( --wp--preset--font-size--medium );
}
.wp-block-group h2 {
    font-size: var( --wp--preset--font-size--small );
}
.wp-block-group h3 {
    font-size: var( --wp--preset--font-size--smaller );
}