gutenberg-1-wolfactive-949x475
28/05/2021

[Gutenberg ] Tổng quan về Gutenberg trong WordPress

Chào mọi người đến với Series lập trình block Gutenberg trong WordPress. Series này giành cho những bạn thích Wordpess nhưng muốn tìm cảm giác làm theme, giao diện WordPress theo hướng mới mẻ không bị nhàm chán, thích làm giao diện trong CMS và trang web với React.

Tổng quan về Gutenberg

Gutenberg là gì ?

Gutenberg là trình soạn thảo văn bản mới ở dạng khối của WordPress và trở thành Editor mặc định từ phiên bản WordPress 5.0. JavaScript được tạo ra nhằm để người dùng có thể tạo một trang web bằng cách thêm các khối (block) để ghép thành 1 trang web hoàn chỉnh. Các bạn có thể trải nghiệm tại đây: https://wordpress.org/gutenberg/

gutenberg-trong-wordpress-la-gi

Gutenberg được phát triển nền React JS nên cũng khá hợp cho nhưng bạn nào thích React và WordPress. Để có thể lập trình các block xài trong trình soạn thảo thì chúng ta cần biết sơ qua webpack hoặc gulp js để có thể cấu hình 1 base source hỗ trợ complie code từ React sang JS.

Tại sao nên dùng Gutenberg ?

  • Tăng trải nghiệm người dùng
  • Được tích hợp sẵn trong WordPress
  • Có thể cài thêm plugin hoặc phát triển thêm các block hỗ trợ ngoài các block mặc dịnh.
  • Nhẹ giao diện trang web vì không cần cài nhiều plugin hỗ trợ ngoài Frontend
  • Có thể di chuyển các block bằng cách kéo thả không cần dùng thêm plugin nào hỗ trợ

Lưu ý trước khi tìm hiểu series.

Nghe về Gutenberg là thấy hay đó nhưng để tìm hiểu về series này các bạn cần lưu ý nhưng điều sau:

  • Có kiến thức cơ bản về HTML, CSS
  • Có kiến thức cơ bản về PHP WordPress
  • Có kiến thức cơ bản về webpack, gulp. (Có thể xem trước bài viết này)
  • Có kiển thức cớ bản vể JavaScript nói chung và JavaScript ES6 nói riêng đặc biệt là React.

gutenberg-trong-wordpress

Nội dung về series.

Nội dung bài viết còn sẽ được cập nhật liên tục

Phần 1: Cấu hình React vào plugin hỗ trợ viết block Gutenberg
Phần 2: Tạo Block Gutenberg đầu tiên

  • Tạo Block Gutenberg đầu tiên
  • Hướng dẫn tạo block Gutenberg với dynamic content

Phần 3: Thêm vào Gutenberg vào Theme Support
Phần 4: Tìm hiểu thêm vể các tính năng WordPress hỗ trợ cho Gutenberg Block
Phần 5: Tạo Complex Nested Block (không biết dịch sao cho hay 😀 😀 ) trong Gutenberg
Phần 6: Làm Dynamic Blocks
Phần 7: Sử dụng Redux trong Gutenberg
Phần 8: Cấu hình template tích hợp các khổi đã làm vào trang hay post type.
Phần 9: Tổng kết

Tổng kết

Như vậy mình đã giới thiệu cho các bạn sơ lược về series Gutenberg trong WordPress. Những bài viết sau mình sẽ đi sâu vào từng phần nhé. Hẹn các bạn ở bài sau.

Cảm ơn các bạn !

THÔNG TIN LIÊN HỆ

Vui lòng chọn size trước khi đặt hàng (*)