Nam Digital mở đầu tuyến nội dung Block Themes trong năm 2024 bằng việc xây dựng nội dung liên quan tới việc xây dựng các Block customized, giúp nhà phát triển có thể xây dựng được nhiều khối đặc biệt, có sử dụng thư viện từ bên thứ 3 nhưng vẫn mang lại trải nghiệm soạn thảo mượt mà.
Đây cũng là quá trình Nam vừa Blogging, vừa nghiên cứu về phương pháp xây dựng Block Themes cùng Oach Themes – mà khởi đầu là giao diện Oach Logistic
Vì sao Nam lại tách riêng phần giao diện (Themes) và các khối nội dung đặc biệt thành các Plugins
Lý do là bởi Nam thấy khá rối rắm khi gộp 2 khái niệm này vào…Đôi khi Slider cũng là 1 thành phần thuộc giao diện (Themes) và về Logic thì hoàn toàn có thể gộp chúng lại thành thành phần giao diện…Nhưng Nam thấy điều đó khá rối rắm, để đạt được sự tinh gọn và đơn giản hóa quá trình xây dựng giao diện với Block themes, chúng ta có thể áp dụng phương pháp Block hóa mọi thứ – Chỉ lấy những thành phần chúng ta cần, như vậy có nghĩa là
WordPress Block Themes giúp xử lý các vấn đề
- Màu sắc (Duotone, Gradient…)
- Font chữ
- Cỡ chữ, Design System
- Các Pattern, các thành phần tĩnh có tính biểu tượng…
WordPress Block Plugins giúp xử lý các vấn đề
- Slider
- Các tính năng đặc biệt…
- Những Logic được thêm mới theo từng nhu cầu, ví dụ nếu là Block Themes về Logistic thì thành phần cần thêm có thể là
- Đánh giá (Reviews)
- Maps…
- Danh sách thương hiệu….
Theo Nam thì đó là cách phân chia phù hợp nhất, giúp người dùng Themes có thể On / Off các khối theo ý muốn.
Cách xây dựng môi trường Dev Block plugins
Trong hướng dẫn của Block Editor Handbook thì lý tưởng nhất ta nên sử dung môi trường Nodejs để tận dụng được sức mạnh của javascript ES6 trong việc Build ra thành phẩm cuối cùng, như vậy khi thành phẩm được tạo ra ta chỉ việc gắn nó vào Themes để sử dụng.
Nam sẽ hướng dẫn bạn xây dựng môi trường Dev WordPress một cách chuẩn chỉnh nhất, lưu ý là hướng dẫn này Nam cũng tổng hợp từ nguồn Block Editor Handbook mà thôi (Tất nhiên cũng đi kèm những tư vấn và trải nghiệm sau quá trình ngồi xây dựng chúng rồi!)
Bước 1: Cài đặt Nodejs, Docker, Docker Desktop (với Windows)
Để làm việc với Webpack và các thư viện nodes_modules, bạn cần cài Nodejs vào máy, bạn có thể sử dụng một phiên bản lts (long term support) hoặc cài NVM (Node version manager) để quản lý. Nhưng theo Nam thì để đơn giản hóa, bạn cứ chọn phương án cài lts
Docker là phần mềm ảo hóa và đóng gói các gói phần mềm thành một bộ để dễ quản lý độc lập và bảo mật, bạn có thể tham khảo cách thức cài đặt Docker tại đây (Dành cho nhiều hệ điều hành khác nhau)
Với người dùng Windows để Dev như Nam thì sẽ lựa chọn Docker Desktop để có phần giao diện đồ họa cho tiện lợi hơn.
Sau khi cài xong Nodejs và Docker thì bạn đã sẵn sàng để bắt đầu lập trình các Plugins Block Editor rồi đó!
Bước 2: Hiểu về cách xây dựng môi trường Dev Block Editor Plugins Recommended bởi WordPress
Cách triển khai qua Docker này khá tiện ở chỗ Docker có thể chạy được ở bất cứ đâu, nhưng theo Nam thì tốt nhất lệnh này nên chạy ở thư mục chứa Plugins đang cần dev, vì nó sẽ bắt tên Plugins đó để tiến hành hiển thị trên môi trường ngay
Bước 3: Cài đặt gói wp-env để sẵn sàng sử dụng
Bạn sử dụng lệnh dưới đây để cài dưới dạng global gói @wordpress/env
npm -g install @wordpress/envBước 4: Tìm thư mục chứa Plugins, hoặc tự tạo mới rồi khởi tạo môi trường
Có 2 cách để bạn có thể khởi động môi trường ngay, một là truy cập vào root của 1 plugins, ví dụ
/wp-content/plugins/demo-plugins/*Hoặc nếu chưa có Scaffold (Nguyên mẫu) của một Plugins, bạn có thể tạo dễ dàng với lệnh
npx @wordpress/create-block@latest todo-listLúc này khi chạy lệnh wp-env start, bạn sẽ khởi động Docker với 2 container như hình phía trên, và chúng rất thuận tiện trong quá trình phát triển. Nam Digital khuyến khích sử dụng npx hơn vì nó có những yếu tố vô cùng thuận tiện như:
- Có thể live-reload và xem sự thay đổi khi ta đưa logic
- Có thể build thành plugins hoàn chỉnh và đưa vào sử dụng ở môi trường thực tế.
Xuyên suốt Series Nam sẽ hướng dẫn cách triển khai Block Themes, và cũng là cơ hội tuyệt vời để Nam tự học lại, tối ưu kiến thức của bản thân.
Array