Cách chúng tôi viết CSS cho các chủ đề WordPress đang có những thay đổi sâu rộng. Gần đây tôi đã chia sẻ một kỹ thuật cho thêm hỗ trợ kiểu linh hoạt trong WordPress bằng cách theme.json, một tệp mới WordPress đã và đang rất nỗ lực để trở thành nguồn chân lý trung tâm để xác định phong cách trong các chủ đề WordPress hỗ trợ các tính năng chỉnh sửa toàn trang (FSE).

Chờ đã, không style.css tập tin? Chúng tôi vẫn có điều đó. Trong thực tế, style.css is vẫn là một tập tin bắt buộc trong các chủ đề khối, mặc dù vai trò của nó bị giảm đi đáng kể đối với thông tin meta được sử dụng để đăng ký chủ đề. Điều đó nói rằng, thực tế là theme.json vẫn đang trong quá trình phát triển tích cực, có nghĩa là chúng ta đang trong giai đoạn chuyển tiếp, nơi bạn có thể tìm thấy các kiểu được xác định ở đó, trong styles.css hoặc thậm chí ở cấp độ khối.

Vì vậy, phong cách thực sự trông như thế nào trong những ngày WordPress FSE này? Đó là những gì tôi muốn đề cập trong bài viết này. Thiếu tài liệu về các chủ đề khối tạo kiểu trong Sổ tay dành cho nhà phát triển chủ đề WordPress, vì vậy mọi thứ chúng tôi đang đề cập ở đây là những gì tôi đã thu thập được về vị trí của mọi thứ hiện tại 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 các kiểu WordPress

Các tính năng phát triển mới được bao gồm 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 theme.json, nhưng vẫn còn rất nhiều việc phải làm trước khi chúng ta có thể hoàn toàn dựa vào nó. Một cách để chúng ta có thể biết được những gì sắp ra mắt trong các bản phát hành trong tương lai là sử dụng Plugin Gutenberg. Đây là nơi mà các tính năng thử nghiệm thường được chạy thử nghiệm.

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

Nhưng đừng bắt đầu giao dịch CSS trong style.css cho các cặp giá trị-thuộc tính JSON trong theme.json chỉ được nêu ra. Vẫn có các quy tắc tạo kiểu CSS cần được hỗ trợ trong theme.json trước khi chúng tôi nghĩ về việc làm điều đó. Các vấn đề quan trọng còn lại hiện đang được thảo luận với mục đích chuyển hoàn toàn tất cả các quy tắc kiểu CSS sang theme.json và hợp nhất các nguồn khác nhau của theme.json thành một Giao diện người dùng để thiết lập kiểu toàn cầu trực tiếp trong Trình chỉnh sửa trang web WordPress.

Điều đó khiến chúng tôi rơi vào tình thế tương đối khó khăn. Không chỉ ở đó không có đường dẫn rõ ràng để ghi đè các kiểu chủ đề, nhưng không rõ nguồn gốc của những phong cách đó đến từ đâu - nó có phải là từ các lớp khác nhau của theme.json Bức ảnh, style.css, plugin Gutenberg hay một nơi nào khác?

Tại sao theme.json thay vì style.css?

Bạn có thể tự hỏi 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 tại sao theme.json phương pháp tiếp cận là một lợi ích cho các nhà phát triển chủ đề.

Thật đáng để đọc bài đăng của Ben, nhưng phần thịt nằm trong câu trích dẫn này:

Ghi đè CSS, dù là kiểu bố cục, đặt trước hay 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 ngang bằng trực quan giữa giao diện người dùng và trình chỉnh sửa trở nên khó duy trì hơn, các nâng cấp để chặn nội bộ có thể xung đột với ghi đè. CSS tùy chỉnh, hơn nữa, ít di động hơn so với các chủ đề khối khác.

Bằng cách khuyến khích các tác giả chủ đề sử dụng theme.json Nếu có thể, hệ thống phân cấp của các kiểu xác định “cơ sở> chủ đề> người dùng” có thể được giải quyết một cách 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à một định dạng 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 WordPress Site Editor bằng cách tìm nạp một 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 viết bất kỳ CSS nào. Nó cũng cung cấp một cách để tạo kiểu cho 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ác cài đặt của người dùng có mức độ ưu tiên cao nhất so với các cài đặt được xác định trong theme.json. Sự tác động lẫn nhau giữa các kiểu cấp chủ đề trong theme.json và các kiểu do người dùng xác định trong Giao diện người dùng kiểu toàn cầu là điều làm cho cách tiếp cận JSON trở nên hấp dẫn.

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ố trong chuỗi Twitter này. Bạn có thể tìm thấy nhiều lợi ích hơn nữa trong điều này thảo luận chuyên sâu tại blog Tạo WordPress Core. Và 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 đè các 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ề các phần của một chủ đề theme.json có khả năng tạo kiểu. Trước khi có WordPress 6.1, tất cả những gì chúng ta thực sự có thể làm là tiêu đề và liên kết kiểu. Bây giờ, với WordPress 6.1, chúng ta có thể thêm các nút, chú thích, trích dẫn và tiêu đề để trộn.

Và chúng tôi làm điều đó bằng cách xác định Các phần tử JSON. Hãy coi các phần tử là 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 một tiêu đề, một đoạn văn và một nút. Những phần riêng lẻ đó là các phần tử, và có một elements đối tượng trong theme.json nơi chúng tôi xác định phong cách của họ:

{
  "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 sự phức tạp của các khối. Chúng là đại diện của các 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 biên tập viên khối và điều này Hướng dẫn chỉnh sửa trang web đầy đủ của Carolina Nymark.

Ví dụ: các liên kết được tạo kiểu trong elements đối tượng nhưng không phải là một khối theo đúng nghĩa của chúng. Nhưng một liên kết có thể được sử dụng trong một khối và nó sẽ kế thừa các kiểu được xác định trên elements.link đối tượng trong theme.json. Tuy nhiên, điều này không hoàn toàn đóng gói định nghĩa của một phần tử, vì một số phần tử cũng được đăng ký dưới dạng khối, chẳng hạn như khối Tiêu đề và Nút - nhưng những khối đó vẫn có thể được sử dụng trong các khối khác.

Đây là bảng các phần tử hiện có sẵn để tạo kiểu trong theme.json, lịch sự của Carolina:

Như bạn có thể thấy, vẫn còn là những ngày đầu và vẫn còn nhiều điều 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 thực hiện đ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 các bộ chọn trong tệp CSS hoặc DevTools.

Hơn nữa, bạn cũng có thể bắt đầu xem cấu trúc của theme.json loại hình thành các lớp cụ thể, đi từ các yếu tố toàn cục (ví dụ: headings) đến các phần tử riêng lẻ (ví dụ: h1) và các kiểu cấp khối (ví dụ: h1 chứa trong một khối).

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

Tính cụ thể của JSON và CSS

Hãy tiếp tục nói về tính cụ thể 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 theme.json được coi là phong cách chủ đề mặc định. Và bất kỳ thứ gì được người dùng đặt trong Giao diện người dùng kiểu toàn cầu sẽ ghi đè các giá trị mặc định.

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

Tôi đang sử dụng chủ đề trống, một chủ đề WordPress trống không có kiểu 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 đi kèm với 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ể thấy chính xác những phong cách mới đó đến từ đâu trong TT3's theme.json tập tin. Điều này cho chúng ta biết rằng các kiểu phần tử JSON được ưu tiên hơn các kiểu WordPress Core.

Bây giờ tôi sẽ sửa đổi TT3 bằng cách ghi đè nó bằng theme.json tệp trong chủ đề con, trong đó màu nền mặc định của khối Nút được đặt thành màu đỏ.

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? Điều đó có nghĩa là nó được tạo kiểu ở một cấp độ khác nếu thay đổi tôi thực hiện là ở cấp độ toàn cầu. Nếu chúng ta muốn thay đổi cả hai , chúng tôi có thể làm điều đó ở 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à sửa đổi văn bản cũng như sử dụ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 phong cách chủ đề!

Công cụ phong cách

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

Những phong cách đó có nội dòng không? Chúng có trong một biểu định kiểu riêng biệt không? Có thể chúng được đưa vào trang trong một ?

Đó là những gì mới Công cụ phong cách 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 về cách tạo kiểu và nơi các kiểu được áp dụng. Nói cách khác, nó lấy tất cả các nguồn có thể tạo kiểu và chịu trách nhiệm duy nhất trong việc tạo các 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 nằm trên những 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 thanh lịch nhất vì các kiểu có thể đến từ một số nơi.

Chúng tô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 ở phía sau để chúng được phân phối từ cùng một nơi (thay vì nhiều nơi). Điều này bao gồm các quy tắc CSS như lề, đệm, kiểu chữ, màu sắc và đường viền.
• Loại bỏ các kiểu lặp lại dành riêng cho bố cục và tạo các 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 lên 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ủ đề, cho dù chúng đến từ đâu. Nó làm sạch theo 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 cho các 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 phần này Thảo luận về WordPress Core. Bạn cũng có thể làm theo vấn đề theo dõi và Bảng dự án để biết thêm thông tin cập nhật.

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 theme.json và cách chúng về cơ bản là các nguyên thủy HTML để xác định các kiểu mặc định cho những thứ như tiêu đề, nút và liên kết, trong số những thứ khác. Bây giờ, chúng ta hãy nhìn vào thực tế sử dụng một phần tử JSON và cách nó hoạt động trong các ngữ cảnh tạo kiểu khác nhau.

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

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-dán viết tắt của TT3 theme.json tập tin (đây là mã đầy đủ) hiển thị phần kiểu toàn cục, nhưng bạn có thể tìm thấy mã gốc tại đây.

{
  "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 đều được tạo kiểu ở cấp độ toàn cầu (styles.elements.button).

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 gọi là .wp-element-button là bộ chọn. Lớp tương tự cũng được sử dụng để tạo kiểu cho các trạng thái tương tác.

Một lần nữa, phong cách này đang diễn ra ở cấp độ toàn cầu, đến từ theme.json. Bất cứ khi nào chúng ta sử dụng một nút, nó sẽ có cùng một nền vì chúng dùng chung một bộ chọn và không có quy tắc kiểu nào khác ghi đè nó.

Ngoài ra, WordPress 6.1 đã được thêm vào hỗ trợ tạo kiểu trạng thái tương tác cho các phần tử nhất định, như các nút và liên kết, sử dụng các lớp giả trong theme.json - kể cả :hover, :focusvà :active - hoặc Giao diện người dùng kiểu toàn cầu. Kỹ sư tự động hóa Dave Smith chứng minh tính năng này trong một video YouTube.

Chúng tôi có thể ghi đè màu nền của nút trong theme.json (tốt nhất là trong chủ đề con vì chúng tôi đang sử dụng chủ đề WordPress mặc định) hoặc trong cài đặt Kiểu chung trong trình chỉnh sửa trang web (không cần chủ đề con vì nó không yêu cầu thay đổi mã).

Nhưng sau đó các nút sẽ thay đổi tất cả 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? Đó là nơi mà các phong cách cấp khối phát huy tác dụng.

Các 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 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 styles.blocks đối tượng trong theme.json. Đúng vậy, nếu chúng ta xác định kiểu chung cho tất cả các nút trên styles.elements, chúng tôi có thể xác định các kiểu khối cụ thể cho các phần tử nút trên styles.block, theo một cấu trúc tương tự:

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

Thấy chưa? Tôi đặt background và text tài sản trên styles.blocks.core/search.elements.button với hai biến CSS được đặt trước trong WordPress.

Kết quả? Nút tìm kiếm hiện có màu đỏ (--wp--preset--color--quaternary), và khối Nút mặc định vẫn giữ nguyên nền màu xanh lá cây tươi sáng của nó.

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 chúng ta hãy xem xét một ví dụ khác.

Ví dụ: Tạo kiểu tiêu đề ở mỗi cấp độ

Hãy đưa tất cả thông tin này về nhà với 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ử Heading 2
• Tiêu đề kiểu 2 phần tử trong khối Vòng lặp truy vấn

Trước tiên, hãy bắt đầu với cấu trúc cơ bản cho theme.json:

{
  "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 phong cách 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 headings phản đối các kiểu toàn cầu của chúng tôi và áp dụng một số kiểu:

{
  "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 phần tử Heading 2 ở cấp độ toàn cục:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

Bây giờ, tất cả các phần tử 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 tôi muốn một fontSize cho phần tử Heading 2 khi nó được sử dụng trong khối Truy vấn Look:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

Bây giờ chúng ta có ba cấp độ kiểu cho các phần tử Heading 2: tất cả các tiêu đề, tất cả các phần tử Heading 2 và các phần tử Heading 2 được sử dụng trong khối Query Loop.

Các ví dụ chủ đề hiện có

Mặc dù chúng tôi chỉ xem xét các ví dụ tạo kiểu cho các nút và tiêu đề trong bài viết này, nhưng 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 “Xác định kiểu bằng các phần tử JSON” phần.

Có thể bạn đang tự hỏi các phần tử JSON nào hỗ trợ các thuộc tính CSS nào, chưa kể đến việc bạn sẽ khai báo những thuộc tính đó như thế nào. Trong khi chúng tôi chờ đợi tài liệu chính thức, các tài nguyên tốt nhất mà chúng tôi có sẽ là theme.json tệp cho các chủ đề hiện có. Tôi sẽ cung cấp các liên kết đến các chủ đề dựa trên các yếu tố mà họ tùy chỉnh và chỉ ra những thuộc tính nào được tùy chỉnh.

Hãy chắc chắn để cung cấp cho mỗi theme.json tạo một giao diện đẹp vì các chủ đề này bao gồm các ví dụ tuyệt vời về kiểu cấp khối trên styles.blocks vật.

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 một các nguồn chính gây kích ứng cho nhiều người, Bao gồm cả 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 với các chủ đề khối vì các lớp cụ thể mới chúng tôi đã đề cập trước đó.

Về một Đề xuất GitHub để thiết kế lại trình chỉnh sửa trang web trong một 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 đi vòng quanh Trình chỉnh sửa trang web trừ khi bạn đang làm việc cả ngày lẫn đêm bên trong công cụ này. Việc điều hướng rất phức tạp và khó hiểu, đặc biệt là khi chuyển từ duyệt mẫu sang chỉnh sửa mẫu đến sửa đổi các khối riêng lẻ.

Ngay cả với tư cách là một người sớm quan tâm đến thế giới của trình chỉnh sửa khối Gutenberg và các chủ đề khối mắt, tôi vẫn có rất nhiều sự thất vọng của riêng mình. Tuy nhiên, tôi 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 về công nghệ. Đây dòng tweet đầy hy vọng đã 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.

dự án

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.

Các phần tử JSON

Phong cách toàn cầu

Công cụ phong cách

Cảm ơn vì đã đọc! Tôi muốn nghe những phản ánh 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.