Advertisement
  1. Code
  2. WordPress
Code

Tạo ra các biến thể style cho Gutenberg Blocks của WordPress: phần 1

by
Difficulty:IntermediateLength:MediumLanguages:

Vietnamese (Tiếng Việt) translation by Vy Cam Nguyen (you can also view the original English article)

Giờ là thời điểm thú vị cho các nhà phát triển WordPress với bản phát hành chính thức của phiên bản 5.0 đang cận kề. Phiên bản này sẽ đánh dấu sự ra đời của một editor hoàn toàn mới: tên mã là Gutenberg. Nếu bạn làm việc với WordPress thường xuyên, dù là nhà phát triển hay người dùng, thì bạn sẽ có thể hiểu được vì sao đây là một tin quan trong.

Dù không phải tất cả mọi người đều trong đợi bản phát hành này, khi nó sẽ mang đến trải niệm rất khác biệt khi chỉnh sửa trong WordPress. Có vẻ không chắc về việc bản phát hành này sẽ tác động đến hệ sinh thái WordPress. Tuy nhiên, editor mới sẽ cách mạng hóa cách thức bạn tạo ra nội dung cho các trang WordPress. Và mặc dù nó có thể gặp phải sự kháng cự ban đầu khi nó đánh vào người dùng trong một nhóm, nhưng tôi nghĩ rằng cuối cùng nó có thể tạo ra kết nối rõ ràng hơn với nội dung của bạn theo cách mà editor cổ điển TinyMCE không thể làm được.

Bạn có thể thử qua editor mới qua bản phát hành WordPress 5.0 bằng cách cài đặt Gutenberg plugin từ kho plugin của WordPress. Nếu bạn vẫn chưa thử qua vậy tôi thực sự khuyên bạn làm thử đi, để có cái nhìn về trải nghiệm biên tập của WordPress trong tương lai!

Việc tạo ra nội dung trong editor mới hoàn toàn dựa trên các block. Mỗi phần nội dung bạn bổ sung vào editor đều là một block. Block này bao gồm tất cả thành phần ưa thích của bạn như slider, paragraph, buttons, lists, image, testimonial và nhiều nữa. Một khi đã được bổ sung vào editor, bạn có thể cấu hình thiết lập để kiểm soát hình dáng và hành vi của block. Những thành phần này có thể được chỉnh sửa trong block hoặc thông qua bảng inspector (nằm ở bên phải màn hình editor). Thiết lập của block đôi khi được nhân đôi ở cả hai vị trí nhưng nó khác nhau giữa các block.

Đa số tất cả block có một tùy chọn trong bảng inspector để tự bổ sung một hoặc nhiều CSS class để cho phép điều chỉnh block cao hơn. Có thể rất hữu dụng nếu bạn mong muốn thay đổi style của một core block hoặc block ở bên thứ 3.

Additional CSS Class text field

Mặc dù điều này hoạt động tốt, nhưng sẽ có ích khi mở rộng hành vi này và cho phép bổ sung các tùy chọn tùy chỉnh block thông qua một tập hợp các lựa chọn style được xác định trước. Đây chính xác là những gì biến thể style cho block mang đến cho chúng ta, và chúng ta sẽ tập trung vào xuyên suốt hướng dẫn này.

Điều kiện cần

Chúng tôi cũng sẽ xem cách thêm các biến thể style của block cho các block của riêng bạn cũng như cách mở rộng các block hiện có, vì vậy, để làm theo lý tưởng, bạn cần phải làm quen với những điều cơ bản về phát triển plugin cho WordPress và block được tạo nên ra sao.

Mặc dù vậy, đừng hoảng sợ, nếu bạn cần một khóa học nhanh thì hãy xem hướng dẫn gồm 4 phần của tôi creating custom blocks. Nó bao gồm khá nhiều thứ mà bạn cần biết cho bài hướng dẫn này ngoài các biến thể style cho block, trọng tâm của bài hướng dẫn này!

Ngoài ra, nếy bạn muốn theo sát cùng với code và muốn tự mình thử, vậy bạn sẽ cần một máy chủ phát triển cục bộ để vận hành WordPress (ví dụ WAMP, MAMP, hoặc tương tự) và một trình biên tập code.

Nền tảng

API cho biến thể style của block được giới thiệu ở dự án Gutenberg ở phiên bản plugin 3.2 và cho phép bạn áp dụng các style thay thế của block một cách trực tiếp thông qua giao diện editor.

Để đạt được cùng kết quả cho biến thể style của block bạn phải tự mình nhập vào các CSS class trong trường text Additional CSS Class trong bảng block inspector, nằm ở dưới phần Advanced.

Nếu bạn quan tâm đến đề nghị nguyên bản của biến thể block style bạn có thể đọc tiếp chi tiết đầy đủ qua yêu cầu pull trong repo chính thức của Gutenberg.

Bất kỳ biến thể style được định nghĩa cho block có thể được truy xuất trược tiếp qua thanh công cụ block. Chọn block sau đó nhấp vào biểu tượng trên cùng bên trái của thanh công cụ để hiển thị bảng Block Styles.

Block Styles pane

Nhớ trước đó khi tôi nói một số cấu hình block có thể được truy xuất trực tiếp trong block và trong bảng inspector? À, đây chính xác dành cho các biến thể style của block. Bảo đảm rằng block được chọn và nhìn vào bảng inspector.

Block style variations in the block inspector

Điều này thuận tiện và bạn có thể chọn các biến thể style từ vị trí bạn thấy phù hợp nhất. Ví dụ trên màn hình lớn bạn có thể chọn để thay đổi block style thông qua bảng inspector khi nó cho phép bạn thay đổi giữa các style thông qua một cú nhấp chuột. Nhưng trên các thiết bị nhỏ hơn bạn sẽ muốn ẩn đi bảng inspector và chỉ thay đổi style thông qua thanh công cụ của block.

Hỗ trợ core block

Một vài block đang hỗ trợ các biến thể style cho block gồm có;

  • Button
  • Pull Quote
  • Quote
  • Separator
  • Table

Tôi chắc các hỗ trợ sẽ được bổ sung cho các block cốt lõi khác trong tương lai khi tính năng này được đón nhận rộng rãi trong tương lai. Nó rất linh hoạt tôi chắc có rất nhiều người dùng sẽ mong chờ một chọn lựa các tùy chọn style được định nghĩa cho đa số block. Khi bạn đã dùng các biến thể style của block, sẽ rất dễ nhận ra tại sao điều này đúng.

Dĩ nhiên bạn cũng có thể các biến thể style của block vào block của riêng bạn. Chúng ta sẽ khám phá chi tiết triển khai cụ thể trong phần kế tiếp.

Triển khai các biến thể style của block

Có 2 phương pháp để triển khai các biến thể style của block. Nếu bạn truy xuất vào định nghĩa của block thì bạn có thể xác định các biến thể style của block một cách trực tiếp trong hàm registerBlockType() thông qua thuộc tính style.

Ví dụ, đây là định nghĩa thuộc tính style của button core block.

Ở đây, 3 biến thể style của block được đăng ký. Chú ý rằng style Rounded được chọn thành mặc định.

Tuy nhiên, nếu bạn không có quyền truy xuất vào mã nguồn của block, thì bạn có một phương pháp khác để thưc hiện. Trong Gutenberg 3.4 có hai hàm được bổ sung để đăng ký và hủy đăng ký các biến thể style của block ngoài phần định nghĩa block.

Để đăng ký một biến thể style của block, hãy dùng hàm registerBlockStyle() như sau:

Hàm này bổ sung một biến thể style của block gọi là custom-button-style vào block core button. Giờ khi button block là chèn vào editor bạn sẽ thấy biến thể style của block mới đang có.

Custom block style variation available

Ngay khi được chọn, biến thể style của block thêm vào CSS class is-style-custom-button-style vào trường văn bản Additional CSS Class trong bảng block inspector.

CSS class added to Additional CSS Class text field

Đây là lần lượt kích hoạt một bản cập nhật cho kết quả của block và class được thêm vào HTML markup.

Block markup showing the style variation class added

Bạn sẽ tự hỏi bạn đã bổ sung hàm registerBlockStyle() trong code của mình. Đừng lo chúng ta sẽ đề cập môt ví dụ đầy đủ trong bài kế tiếp và bạn sẽ có thể download code sau cùng của plugin vì thế bạn có thể tự mình kiểm tra.

Một lợi thế nho nhỏ!

Khi lần đầu bạn chèn một block có hỗ trợ các biến thể style của block, thú vị là không có CSS class nào thực sự được thêm vào trong markup của block cho đến khi bạn rõ ràng nhấp vào một biến thể style của block, thậm chí dù được chọn làm mặc định.

Hãy tự mình kiểm tra.

Chèn một button block vào editor và mở các tùy chọn biến thể style của block. Bạn sẽ thấy chọn lựa Rounded được chọn mặc định. Nếu bạn mở phần Advanced trong block inspector, không có CSS class nào được bổ sung vào text field. Và do đó không có CSS class nào được chèn vào block markup. Kiểm tra HTML đã xuất ra cho button block trong editor để tự bạn xác nhận.

Giờ quay lại thiết lập biến thể style của block cho button block của bạn và nhấp vào chọn lựa mặc định (đã được chọn) hoặc các chọn lựa block style bất kỳ. Ngay lập tức bạn sẽ thấy CSS class được bổ sung vào trường text Additional CSS Class và markup bao ngoài của block. Bất kỳ quy tắc CSS tùy biến nào đã được định nghĩa cho class tùy chỉnh sẽ được áp dụng ngay khi biến thể style của block đã được chọn.

Hành vi này hơi khó hiểu khi lần đầu tiếp xúc vì theo trực giác, bạn mong muốn CSS class sẽ được tự động thêm vào biến thể style cho block được chọn theo mặc định.

Tổng kết

Chúng ta đã học được biến thể style của block là gì và tại sao nó là bổ sung hữu dụng trong trải nghiệm biên tập block. Triển khai cơ bản của biến thể style của block đã được minh họa.

Trong bài tiếp theo, chúng ta sẽ xem kỹ các ví dụ toàn diện về cách để đăng ký các block style của riêng bạn và hook up CSS thông qua plugin, và cũng thông qua một child theme.

Chúng ta cũng sẽ xem làm sao để hủy đăng ký block style và làm sao để thiết lập biến thể style nào được chọn mặc định khi block lần đầu được chèn vào editor.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.