Kiểu css không hoạt động wordpress

Cách chúng tôi viết CSS cho các chủ đề WordPress đang trong quá trình thay đổi sâu rộng. Gần đây tôi đã chia sẻ một kỹ thuật để thêm hỗ trợ loại linh hoạt trong WordPress bằng cách sử dụng

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Đợi đã, không có tệp

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

Vì vậy, kiểu dáng thực sự trông như thế nào trong những ngày WordPress FSE này? . Thiếu tài liệu về phong cách chủ đề khối trong Sổ tay nhà phát triển chủ đề WordPress, vì vậy mọi thứ chúng tôi trình bày ở đây là những gì tôi đã thu thập được về vị trí hiện tại của mọi thứ cũng như các cuộc thảo luận về tương lai của chủ đề WordPress

Sự phát triển của phong cách WordPress

Các tính năng phát triển mới có trong WordPress 6. 1 đưa chúng ta đến gần hơn với một hệ thống các phong cách được xác định hoàn toàn trong

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Một cách khác để chúng ta có thể cảm nhận được vị trí của mình là xem xét sự phát triển của các chủ đề mặc định của WordPress. Đến nay, có ba chủ đề mặc định hỗ trợ chỉnh sửa toàn trang

• Hai Mươi Mốt (TT1). Đây là phiên bản cổ điển đầu tiên của chủ đề mặc định tương thích với khối. Ngoài ra còn có một phiên bản khối (khối TT1) và kể từ đó đã trở thành tài nguyên truy cập để tạo chủ đề khối. Tuy nhiên, tất cả 5.900 dòng CSS trong TT1 đều nằm trong

  {
    "version": 2,
    "styles": {
      // Global-level syles
      "elements": { },
      // Block-level styles
      "blocks": { }
    }
  }

  5. Không có tệp

  {
    "version": 2,
    "styles": {
      // Global-level syles
      "elements": { },
      // Block-level styles
      "blocks": { }
    }
  }

  4. TT1 Blocks là giao diện đầu tiên chúng tôi có được về kiểu dáng trong kỷ nguyên Block Editor và chúng tôi có thể coi đó là một lời trêu ghẹo hơn là một mô hình
• Hai Mươi Hai Mươi Hai (TT2). Đây là chủ đề WordPress mặc định dựa trên khối thực sự đầu tiên và đó là nơi chúng ta gặp nhau lần đầu tiên

  {
    "version": 2,
    "styles": {
      // Global-level syles
      "elements": { },
      // Block-level styles
      "blocks": { }
    }
  }

  4. Tệp chỉ chứa 373 dòng mã. Các nhà phát triển chính của nó đã nỗ lực phối hợp để biến chủ đề này thành một chủ đề không có CSS;
• Hai Mươi Ba Mươi Ba. Đây là những gì được vận chuyển trong WordPress 6. 1 và đây là ví dụ đầu tiên về chủ đề không có bất kỳ CSS nào trong tệp

  {
    "version": 2,
    "styles": {
      // Global-level syles
      "elements": { },
      // Block-level styles
      "blocks": { }
    }
  }

  5 bắt buộc

Nhưng đừng bắt đầu giao dịch CSS trong

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Điều đó khiến chúng ta ở một vị trí tương đối khó khăn. Không chỉ không có đường dẫn rõ ràng để ghi đè các kiểu chủ đề mà còn không rõ nguồn gốc của những kiểu đó thậm chí đến từ đâu — có phải từ các lớp khác nhau của tệp

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Tại sao { "version": 2, "styles": { // Global-level syles "elements": { }, // Block-level styles "blocks": { } } }4 thay vì { "version": 2, "styles": { // Global-level syles "elements": { }, // Block-level styles "blocks": { } } }5?

Bạn có thể thắc mắc tại sao WordPress lại chuyển sang định nghĩa kiểu dựa trên JSON thay vì tệp CSS truyền thống. Ben Dwyer từ nhóm phát triển Gutenberg đã trình bày một cách hùng hồn lý do tại sao phương pháp tiếp cận

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Bài đăng của Ben rất đáng đọc, nhưng phần thịt nằm trong câu trích dẫn này

Ghi đè CSS, cho dù là kiểu bố cục, cài sẵn hoặc kiểu khối, đều gây trở ngại cho việc tích hợp và khả năng tương tác. tính tương đương trực quan giữa giao diện người dùng và trình chỉnh sửa trở nên khó bảo trì hơn, các bản nâng cấp để chặn nội bộ có thể xung đột với các phần ghi đè. Hơn nữa, CSS tùy chỉnh ít di động hơn trên các chủ đề khối khác

Bằng cách khuyến khích các tác giả chủ đề sử dụng API

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

4 nếu có thể, hệ thống phân cấp của các kiểu được xác định “cơ sở > chủ đề > người dùng” có thể được giải quyết chính xác

Một trong những lợi ích chính của việc chuyển CSS sang JSON là JSON là định dạng mà máy có thể đọc được, có nghĩa là nó có thể được hiển thị trong Giao diện người dùng Trình chỉnh sửa trang web WordPress bằng cách tìm nạp API, do đó cho phép người dùng sửa đổi các giá trị mặc định và tùy chỉnh giao diện của trang web mà không cần . Nó cũng cung cấp một cách để định kiểu các khối một cách nhất quán, đồng thời cung cấp một cấu trúc tạo ra các lớp cụ thể sao cho cài đặt người dùng có mức độ ưu tiên cao nhất so với cài đặt được xác định trong

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Các nhà phát triển duy trì tính nhất quán trong JSON và người dùng có được sự linh hoạt với các tùy chỉnh không cần mã. Đó là một đôi bên cùng có lợi

Chắc chắn là có những lợi ích khác và Mike McAlister từ WP Engine đã liệt kê một số lợi ích trong chủ đề Twitter này. Bạn có thể tìm thấy nhiều lợi ích hơn nữa trong cuộc thảo luận chuyên sâu này tại blog Make WordPress Core. Và sau khi bạn đã đọc xong, hãy so sánh lợi ích của phương pháp JSON với các cách có sẵn để xác định và ghi đè kiểu trong các chủ đề cổ điển

Xác định kiểu với các phần tử JSON

Chúng tôi đã thấy rất nhiều tiến bộ về những phần nào của chủ đề

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Và chúng tôi làm điều đó bằng cách xác định các phần tử JSON. Hãy nghĩ về các yếu tố như các thành phần riêng lẻ sống trong một khối WordPress. Giả sử chúng ta có một khối chứa tiêu đề, đoạn văn và nút. Những phần riêng lẻ đó là các phần tử và có một đối tượng

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

Một cách tốt hơn để mô tả các phần tử JSON là các thành phần cấp thấp cho các chủ đề và khối không cần độ phức tạp của các khối. Chúng là các biểu diễn nguyên thủy HTML không được xác định trong một khối nhưng có thể được sử dụng trên các khối. Cách chúng được hỗ trợ trong WordPress (và plugin Gutenberg) được mô tả trong Sổ tay Trình chỉnh sửa khối và hướng dẫn Chỉnh sửa trang web đầy đủ này của Carolina Nymark

Ví dụ: các liên kết được tạo kiểu trong đối tượng

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Đây là bảng các yếu tố hiện có sẵn để tạo kiểu trong

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

Như bạn có thể thấy, vẫn còn sớm và vẫn còn nhiều việc cần phải chuyển từ plugin Gutenberg sang WordPress Core. Nhưng bạn có thể thấy sẽ nhanh như thế nào khi làm điều gì đó như tạo kiểu cho tất cả các tiêu đề trong một chủ đề trên toàn cầu mà không cần tìm kiếm bộ chọn trong tệp CSS hoặc DevTools

Hơn nữa, bạn cũng có thể bắt đầu thấy cách cấu trúc của

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

Thông tin bổ sung về các phần tử JSON có sẵn trong đề xuất Make WordPress này và vé mở này trong repo GitHub của plugin Gutenberg

Tính đặc hiệu của JSON và CSS

Hãy tiếp tục nói về tính đặc hiệu của CSS. Tôi đã đề cập trước đó rằng cách tiếp cận JSON để tạo kiểu thiết lập một hệ thống phân cấp. Và đó là sự thật. Các kiểu được xác định trên các phần tử JSON trong

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Nói cách khác. kiểu người dùng mang nhiều tính đặc hiệu hơn kiểu chủ đề mặc định. Chúng ta hãy xem khối Nút để cảm nhận cách thức hoạt động của khối này

Tôi đang sử dụng Emptytheme, một chủ đề WordPress trống không có kiểu dáng CSS. Tôi sẽ thêm một khối Nút trên một trang mới

OK, chúng tôi biết rằng WordPress Core có một số kiểu dáng nhẹ nhàng. Bây giờ, tôi sẽ chuyển sang chủ đề TT3 mặc định từ WordPress 6. 1 và kích hoạt nó. Nếu tôi làm mới trang của mình bằng nút, nút sẽ thay đổi kiểu

Bạn có thể biết chính xác nguồn gốc của những phong cách mới đó trong tệp

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Bây giờ tôi sẽ sửa đổi TT3 bằng cách ghi đè nó bằng tệp

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Nhưng hãy chú ý đến nút tìm kiếm trong ảnh chụp màn hình cuối cùng đó. Nó cũng phải có màu đỏ, phải không? . Nếu chúng tôi muốn thay đổi cả hai nút, chúng tôi có thể thực hiện ở cấp độ người dùng bằng cách sử dụng Giao diện người dùng kiểu toàn cầu trong trình chỉnh sửa trang web

Chúng tôi đã thay đổi màu nền của cả hai nút thành màu xanh lam và cũng sửa đổi văn bản bằng Giao diện người dùng kiểu toàn cầu. Lưu ý rằng màu xanh từ đó được ưu tiên hơn các kiểu chủ đề

động cơ phong cách

Đó là một ý tưởng rất nhanh, nhưng hay, về cách quản lý tính đặc hiệu của CSS trong các chủ đề khối của WordPress. Nhưng nó không phải là bức tranh hoàn chỉnh vì vẫn chưa rõ những phong cách đó được tạo ra từ đâu. WordPress có các kiểu mặc định của riêng nó đến từ đâu đó, sử dụng dữ liệu trong

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Là những phong cách nội tuyến?

Đó là điều mà Style Engine mới hy vọng sẽ giải quyết được. Style Engine là một API mới trong WordPress 6. 1 nhằm mang lại sự nhất quán cho cách tạo kiểu và nơi áp dụng kiểu. Nói cách khác, nó lấy tất cả các nguồn tạo kiểu có thể và chịu trách nhiệm duy nhất cho việc tạo kiểu khối đúng cách. Tôi biết rồi mà. Tuy nhiên, một sự trừu tượng khác trên đầu trang của sự trừu tượng khác chỉ để tạo ra một số phong cách. Nhưng có một API tập trung cho các kiểu có lẽ là giải pháp tao nhã nhất vì các kiểu có thể đến từ một số nơi

Chúng tôi mới chỉ có cái nhìn đầu tiên về Style Engine. Trên thực tế, đây là những gì đã được hoàn thành cho đến nay, theo vé

• Kiểm tra và hợp nhất nơi mã tạo CSS hỗ trợ khối ở mặt sau để chúng được phân phối từ cùng một nơi (trái ngược với nhiều nơi). Điều này bao gồm các quy tắc CSS như lề, phần đệm, kiểu chữ, màu sắc và đường viền
• Xóa các kiểu bố cục cụ thể lặp đi lặp lại và tạo tên lớp ngữ nghĩa
• Giảm số lượng thẻ kiểu nội tuyến mà chúng tôi in ra trang để hỗ trợ khối, bố cục và phần tử

Về cơ bản, đây là nền tảng để thiết lập một API duy nhất chứa tất cả các quy tắc kiểu CSS cho một chủ đề, bất kể chúng đến từ đâu. Nó dọn sạch cách WordPress sẽ đưa vào các kiểu nội tuyến trước 6. 1 và thiết lập một hệ thống tên lớp ngữ nghĩa

Bạn có thể tìm thêm thông tin chi tiết về các mục tiêu dài hạn và ngắn hạn của Style Engine trong cuộc thảo luận Make WordPress Core này. Bạn cũng có thể theo dõi vấn đề theo dõi và bảng dự án để cập nhật thêm

Làm việc với các phần tử JSON

Chúng ta đã nói một chút về các phần tử JSON trong tệp

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Các phần tử JSON thường có hai bối cảnh. cấp độ toàn cầu và cấp độ khối. Các kiểu cấp độ toàn cầu được xác định với ít tính đặc hiệu hơn so với ở cấp độ khối để đảm bảo rằng các kiểu dành riêng cho khối được ưu tiên về tính nhất quán ở bất kỳ nơi nào sử dụng các khối

Kiểu toàn cầu cho các phần tử JSON

Hãy xem chủ đề TT3 mặc định mới và kiểm tra cách các nút của nó được tạo kiểu. Sau đây là bản sao chép-dán rút gọn của tệp TT3

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

Tất cả các nút được tạo kiểu ở cấp độ toàn cầu (

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Chúng tôi cũng có thể xác nhận điều này trong DevTools. Lưu ý rằng một lớp có tên là

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Một lần nữa, phong cách này đang diễn ra ở cấp độ toàn cầu, đến từ

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Bên cạnh đó, WordPress 6. 1 đã thêm hỗ trợ tạo kiểu cho các trạng thái tương tác cho một số phần tử nhất định, như nút và liên kết, sử dụng lớp giả trong

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Chúng tôi có thể ghi đè màu nền của nút trong

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Nhưng sau đó các nút sẽ thay đổi cùng một lúc. Điều gì sẽ xảy ra nếu chúng ta muốn ghi đè màu nền khi nút là một phần của một khối nhất định?

Kiểu cấp độ khối cho các phần tử

Để hiểu cách chúng ta có thể sử dụng và tùy chỉnh các kiểu ở cấp khối, hãy thay đổi màu nền của nút có trong khối Tìm kiếm. Hãy nhớ rằng, có một khối Nút, nhưng những gì chúng tôi đang làm là ghi đè màu nền ở cấp độ khối của khối Tìm kiếm. Bằng cách đó, chúng tôi chỉ áp dụng màu mới ở đó thay vì áp dụng nó trên toàn cầu cho tất cả các nút

Để làm điều đó, chúng tôi xác định các kiểu trên đối tượng

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Thấy không?

Kết quả?

Chúng ta cũng có thể thấy sự thay đổi trong DevTools

Điều này cũng đúng nếu chúng ta muốn tạo kiểu cho các nút được bao gồm trong các khối khác. Và các nút chỉ là một ví dụ, vì vậy hãy xem một ví dụ khác

Thí dụ. Tiêu đề kiểu dáng ở mỗi cấp độ

Hãy đưa tất cả thông tin này về nhà bằng một ví dụ. Lần này, chúng tôi sẽ

• Tạo kiểu cho tất cả các tiêu đề trên toàn cầu
• Tạo kiểu cho tất cả các phần tử Tiêu đề 2
• Style Heading 2 phần tử trong khối Vòng lặp truy vấn

Đầu tiên, hãy bắt đầu với cấu trúc cơ bản của

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Điều này thiết lập phác thảo cho các kiểu toàn cầu và cấp khối của chúng tôi

Tạo kiểu cho tất cả các tiêu đề trên toàn cầu

Hãy thêm đối tượng

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

Điều đó đặt màu cho tất cả các tiêu đề thành màu cơ bản đặt trước trong WordPress. Hãy thay đổi cả màu sắc và kích thước phông chữ của các thành phần Tiêu đề 2 ở cấp độ toàn cầu

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

Bây giờ, tất cả các thành phần của Tiêu đề 2 được đặt thành màu đặt trước chính với kích thước phông chữ linh hoạt. Nhưng có lẽ chúng ta muốn một

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { .. },
        "h1": { .. },
        "heading": { .. },
    },
  },
  "templateParts": {}
}

Bây giờ chúng ta có ba cấp độ phong cách cho các phần tử Heading 2. tất cả các tiêu đề, tất cả các thành phần Tiêu đề 2 và các thành phần Tiêu đề 2 được sử dụng trong khối Vòng lặp Truy vấn

Ví dụ chủ đề hiện có

Mặc dù chúng tôi chỉ xem xét các ví dụ về kiểu dáng cho các nút và tiêu đề trong bài viết này, WordPress 6. 1 hỗ trợ tạo kiểu cho các phần tử bổ sung. Có một bảng phác thảo chúng trong phần “Xác định kiểu với các phần tử JSON”

Có lẽ bạn đang tự hỏi phần tử JSON nào hỗ trợ thuộc tính CSS nào, chưa kể đến cách bạn thậm chí sẽ khai báo những phần tử đó. Trong khi chúng tôi chờ tài liệu chính thức, tài nguyên tốt nhất mà chúng tôi có sẽ là các tệp

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Đảm bảo giao diện đẹp cho từng tệp

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

kết thúc

Những thay đổi thường xuyên đối với trình chỉnh sửa toàn trang đang trở thành nguồn gây khó chịu lớn cho nhiều người, bao gồm cả những người dùng Gutenberg am hiểu công nghệ. Ngay cả các quy tắc CSS rất đơn giản, hoạt động tốt với các chủ đề cổ điển, dường như không hoạt động đối với các chủ đề khối vì các lớp cụ thể mới mà chúng tôi đã đề cập trước đó

Về đề xuất GitHub thiết kế lại trình chỉnh sửa trang web ở chế độ trình duyệt mới, Sara Gooding viết trong một bài đăng trên WP Tavern

Rất dễ bị lạc khi cố gắng khám phá Trình chỉnh sửa trang trừ khi bạn làm việc cả ngày lẫn đêm bên trong công cụ. Điều hướng không ổn định và khó hiểu, đặc biệt là khi chuyển từ duyệt mẫu sang chỉnh sửa mẫu rồi sửa đổi các khối riêng lẻ

Ngay cả khi là một tay đua sớm nhạy bén trong thế giới của trình chỉnh sửa khối Gutenberg và các chủ đề hình khối, tôi cũng có vô số nỗi thất vọng của riêng mình. Tuy nhiên, tôi rất lạc quan và dự đoán rằng trình chỉnh sửa trang web sau khi hoàn thành sẽ là một công cụ mang tính cách mạng cho người dùng cũng như các nhà phát triển chủ đề am hiểu công nghệ. Dòng tweet đầy hy vọng này đã xác nhận rằng. Trong khi chờ đợi, có vẻ như chúng ta nên chuẩn bị cho nhiều thay đổi hơn, và thậm chí có thể là một chuyến đi gập ghềnh

Người giới thiệu

Tôi đang liệt kê tất cả các tài nguyên tôi đã sử dụng khi nghiên cứu thông tin cho bài viết này

phần tử JSON

• API phần tử (Gutenberg GitHub Repo)
• chủ đề. json (Chỉnh sửa toàn trang)
• Các kiểu phần tử (Sổ tay Block Editor)

phong cách toàn cầu

• Lộ trình phong cách toàn cầu (Vấn đề Gutenberg GitHub)
• phong cách toàn cầu. Theo dõi hỗ trợ các yếu tố (Vấn đề Gutenberg GitHub)

Động cơ phong cách

• Kiểu trình chỉnh sửa khối. sáng kiến ​​và mục tiêu (Tạo Blog WordPress)
• Tạo kiểu khối (Style Engine) (Tạo blog WordPress)
• Phong cách cốt lõi và tùy chỉnh chủ đề. các bước tiếp theo (Tạo Blog WordPress)

Cảm ơn vì đã đọc. Tôi muốn nghe phản hồi của riêng bạn về việc sử dụng các chủ đề khối và cách bạn quản lý CSS của mình

Tại sao CSS tùy chỉnh của tôi không hoạt động trong WordPress?

Tại sao kiểu CSS của tôi không hoạt động?