Global Settings & Styles (theme.json)

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

WordPress 5.8 đi kèm với một cơ chế mới để định cấu hình trình chỉnh sửa cho phép kiểm soát chi tiết hơn và giới thiệu bước đầu tiên trong việc quản lý các kiểu cho các bản phát hành WordPress trong tương lai: tệp theme.json. Trang này ghi lại định dạng của nó.

Rationale

Cài đặt cho trình chỉnh sửa khối
Cài đặt có thể được kiểm soát trên mỗi khối
Phong cách được quản lý
Thuộc tính tùy chỉnh CSS: cài đặt trước và tùy chỉnh

Specification

version
settings
Khả năng tương thích ngược với add_theme_support
Cài đặt trước
Custom
Setting examples
styles
Top-level
Block-level
Elements
customTemplates
templateParts

FAQ

The naming schema of CSS Custom Properties
Tại sao sử dụng - làm dấu phân cách?
Cách cài đặt trong “tùy chỉnh” tạo Thuộc tính tùy chỉnh CSS mới

Rationale

API Block Editor đã phát triển ở các tốc độ khác nhau và có một số vấn đề ngày càng tăng, đặc biệt là trong các lĩnh vực ảnh hưởng đến chủ đề. Ví dụ về điều này là: khả năng điều khiển trình chỉnh sửa theo chương trình hoặc hệ thống kiểu khối tạo điều kiện cho người dùng, chủ đề và tùy chọn kiểu cốt lõi.

Điều này mô tả những nỗ lực hiện tại để hợp nhất các API khác nhau liên quan đến các kiểu vào một điểm duy nhất - một tệp theme.json nên được đặt bên trong thư mục gốc của thư mục chủ đề.

Settings for the block editor #

Thay vì sự gia tăng của các cờ hỗ trợ chủ đề hoặc các phương pháp thay thế, các tệp theme.json cung cấp một cách chuẩn để xác định cài đặt của trình chỉnh sửa khối. Các cài đặt này bao gồm những thứ như:

Những tùy chọn tùy chỉnh nào nên được cung cấp hoặc ẩn khỏi người dùng.
Màu sắc mặc định, kích thước phông chữ ... có sẵn cho người dùng.
Xác định bố cục mặc định của trình chỉnh sửa (chiều rộng và căn chỉnh có sẵn).

Settings can be controlled per block #

Để chi tiết hơn, các cài đặt này cũng hoạt động ở cấp khối trong theme.json.

Ví dụ về những gì có thể đạt được là:

Sử dụng giá trị đặt trước cụ thể cho một khối (ví dụ: bảng) nhưng giá trị chung cho các khối còn lại. Bật điều khiển giao diện người dùng kích thước phông chữ cho tất cả các khối ngoại trừ khối tiêu đề. Vân vân.

Styles are managed #

Bằng cách sử dụng tệp theme.json để đặt thuộc tính kiểu theo cách có cấu trúc, Trình chỉnh sửa khối có thể “quản lý” CSS đến từ các nguồn gốc khác nhau (người dùng, chủ đề và CSS lõi). Ví dụ: nếu một chủ đề và người dùng đặt kích thước phông chữ cho các đoạn văn, chúng tôi chỉ xếp hàng kiểu đến từ người dùng chứ không phải của chủ đề.

Some of the advantages are:

Giảm số lượng CSS xếp hàng.
Ngăn chặn các cuộc chiến tranh về tính cụ thể.

CSS Custom Properties: presets & custom #

Có một số lĩnh vực tạo kiểu sẽ được hưởng lợi từ việc chia sẻ các giá trị có thể thay đổi trên một trang web.

Để giải quyết nhu cầu này, chúng tôi đã bắt đầu thử nghiệm với Thuộc tính tùy chỉnh CSS, còn gọi là Biến CSS, ở một số nơi:

Các giá trị đặt trước: bảng màu, kích thước phông chữ hoặc độ dốc được khai báo bởi chủ đề được chuyển đổi thành Thuộc tính tùy chỉnh CSS và được xếp vào hàng cho cả giao diện người dùng và trình chỉnh sửa.

{
    "version": 1,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Black",
                    "slug": "black",
                    "color": "#000000"
                },
                {
                    "name": "White",
                    "slug": "white",
                    "color": "#ffffff"
                }
            ]
        }
    }
}

Thuộc tính tùy chỉnh: cũng có một cơ chế để tạo Thuộc tính tùy chỉnh CSS của riêng bạn.

{
"version": 1,
"settings": {
    "custom": {
        "line-height": {
            "body": 1.7,
            "heading": 1.3
        }
    }
}

Specification

Đặc điểm kỹ thuật này giống nhau đối với ba nguồn gốc khác nhau sử dụng định dạng này: cốt lõi, chủ đề và người dùng. Chủ đề có thể ghi đè mặc định của lõi bằng cách tạo một tệp có tên là theme.json. Người dùng, thông qua trình chỉnh sửa trang web, cũng sẽ ghi đè các tùy chọn của chủ đề hoặc cốt lõi thông qua giao diện người dùng đang được làm việc.

Version #

Trường này mô tả định dạng của tệp theme.json. Phiên bản hiện tại và duy nhất là 1.

WordPress 5.8 sẽ bỏ qua nội dung của bất kỳ theme.json nào có phiên bản không giống với phiên bản hiện tại. Nếu cần plugin Gutenberg, plugin sẽ cập nhật phiên bản và sẽ thêm các cơ chế di chuyển tương ứng từ các phiên bản cũ hơn.

The settings section has the following structure:

{
    "version": 1,
    "settings": {
        "color": {
            "custom": true,
            "customDuotone": true,
            "customGradient": true,
            "duotone": [],
            "gradients": [],
            "link": false,
            "palette": []
        },
        "custom": {},
        "layout": {
            "contentSize": "800px",
            "wideSize": "1000px"
        },
        "spacing": {
            "customMargin": false,
            "customPadding": false,
            "units": [ "px", "em", "rem", "vh", "vw" ]
        },
        "typography": {
            "customFontSize": true,
            "customLineHeight": false,
            "dropCap": true,
            "fontSizes": []
        },
        "blocks": {
            "core/paragraph": {
                "color": {},
                "custom": {},
                "layout": {},
                "spacing": {},
                "typography": {}
            },
            "core/heading": {},
            "etc": {}
        }
    }
}

Mỗi khối có thể định cấu hình riêng bất kỳ cài đặt nào trong số này, cung cấp khả năng kiểm soát chi tiết hơn đối với những gì tồn tại thông qua add_theme_support. Cài đặt được khai báo ở cấp cao nhất ảnh hưởng đến tất cả các khối, trừ khi một khối cụ thể ghi đè nó. Đó là một cách để cung cấp tính kế thừa và định cấu hình tất cả các khối cùng một lúc.

Tuy nhiên, lưu ý rằng không phải tất cả các cài đặt đều có liên quan cho tất cả các khối. Phần cài đặt cung cấp cơ chế chọn tham gia / chọn không tham gia cho các chủ đề, nhưng khối có trách nhiệm bổ sung hỗ trợ cho các tính năng liên quan đến chủ đề đó. Ví dụ: nếu một khối không triển khai tính năng dropCap, một chủ đề không thể bật nó cho một khối như vậy thông qua theme.json.

Backward compatibility with add_theme_support #

Để duy trì khả năng tương thích ngược, các khai báo add_theme_support hiện có cấu hình trình chỉnh sửa khối được trang bị thêm trong các danh mục thích hợp cho phần cấp cao nhất. Ví dụ: nếu một chủ đề sử dụng add_theme_support ('disable-custom-Colors'), thì nó sẽ giống như đặt settings.color.custom thành false. Nếu theme.json chứa bất kỳ cài đặt nào, những cài đặt này sẽ được ưu tiên hơn các giá trị được khai báo qua add_theme_support. Đây là danh sách đầy đủ các điểm tương đương:

add_theme_support

theme.json setting

custom-line-height

Set typography.customLineHeightto false.

custom-spacing

Set spacing.customPadding to true.

custom-units

Provide the list of units via spacing.units.

disable-custom-colors

Set color.custom to false.

disable-custom-font-sizes

Set typography.customFontSize to false.

disable-custom-gradients

Set color.customGradient to false.

editor-color-palette

Provide the list of colors via color.palette.

editor-font-sizes

Provide the list of font size via typography.fontSizes.

editor-gradient-presets

Provide the list of gradients via color.gradients.

experimental-link-color

Set color.link to true.

Presets #

Cài đặt trước là một phần của phần cài đặt. Chúng là các giá trị được hiển thị cho người dùng thông qua một số điều khiển giao diện người dùng. Bằng cách xác định chúng qua theme.json, công cụ có thể làm được nhiều việc hơn cho các chủ đề, chẳng hạn như tự động dịch tên đặt trước hoặc xếp hàng các lớp CSS tương ứng và thuộc tính tùy chỉnh.

Các giá trị đặt trước sau có thể được xác định thông qua theme.json:

color.duotone: không tạo lớp hoặc thuộc tính tùy chỉnh.
color.gradients: tạo một lớp duy nhất và thuộc tính tùy chỉnh cho mỗi giá trị đặt trước.
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.
typography.fontSizes: tạo một lớp duy nhất và thuộc tính tùy chỉnh cho mỗi giá trị đặt trước.
typography.fontFamilies: tạo một thuộc tính tùy chỉnh duy nhất cho mỗi giá trị đặt trước.

Lược đồ đặt tên cho các lớp và các thuộc tính tùy chỉnh như sau:

Custom Properties: --wp--preset--{preset-category}--{preset-slug} such as --wp--preset--color--black
Classes: .has-{preset-slug}-{preset-category} such as .has-black-color.

Custom #

Ngoài việc tạo Thuộc tính tùy chỉnh CSS cho các giá trị đặt trước, theme.json cũng cho phép tạo các chủ đề của riêng chúng, vì vậy chúng không cần phải xếp hàng riêng. Mọi giá trị được khai báo trong trường tùy chỉnh sẽ được chuyển đổi thành Thuộc tính tùy chỉnh CSS theo giản đồ đặt tên sau: --wp--custom--<variable-name>.

{
    "version": 1,
    "settings": {
        "custom": {
            "baseFont": 16,
            "lineHeight": {
                "small": 1.2,
                "medium": 1.4,
                "large": 1.8
            }
        },
        "blocks": {
            "core/group": {
                "custom": {
                    "baseFont": 32
                }
            }
        }
    }
}

body {
    --wp--custom--base-font: 16;
    --wp--custom--line-height--small: 1.2;
    --wp--custom--line-height--medium: 1.4;
    --wp--custom--line-height--large: 1.8;
}
.wp-block-group {
    --wp--custom--base-font: 32;
}

Styles #

Mỗi khối khai báo thuộc tính kiểu nào mà nó thể hiện thông qua cơ chế hỗ trợ khối. Các khai báo hỗ trợ được sử dụng để tự động tạo các điều khiển giao diện người dùng cho khối trong trình chỉnh sửa. Chủ đề có thể sử dụng bất kỳ thuộc tính kiểu nào thông qua theme.json cho bất kỳ khối nào - chủ đề có trách nhiệm xác minh rằng nó hoạt động đúng theo đánh dấu khối, v.v.

	
{
    "version": 1,
    "styles": {
        "color": {
            "background": "value",
            "gradient": "value",
            "text": "value"
        },
        "spacing": {
            "margin": {
                "top": "value",
                "right": "value",
                "bottom": "value",
                "left": "value"
            },
            "padding": {
                "top": "value",
                "right": "value",
                "bottom": "value",
                "left": "value"
            }
        },
        "typography": {
            "fontSize": "value",
            "lineHeight": "value"
        },
        "elements": {
            "link": {
                "color": {},
                "spacing": {},
                "typography": {}
            },
            "h1": {},
            "h2": {},
            "h3": {},
            "h4": {},
            "h5": {},
            "h6": {}
        },
        "blocks": {
            "core/group": {
                "color": {},
                "spacing": {},
                "typography": {},
                "elements": {
                    "link": {},
                    "h1": {},
                    "h2": {},
                    "h3": {},
                    "h4": {},
                    "h5": {},
                    "h6": {}
                }
            },
            "etc": {}
        }
    }
}

Previous====== End Hướng dẫn tạo một theme bằng theme.json =======NextHọc cách xuất bản ra css (ok)

Last updated 2 years ago