Làm quen với Gutenberg WordPress Editor trong phiên bản WordPress 5.0

gutenberg wordpress editor  Làm quen với Gutenberg WordPress Editor trong phiên bản Wordpress 5.0 lazy

Gutenberg WordPress Editor là trình biên tập, soạn thảo mới của WordPress được đặt theo tên của Johannes Gutenberg – nhà phát minh máy in di động. Nó được tích hợp và là trình soạn thảo mặc định trong phiên bản WordPress 5.0. Nghĩa là Gutenberg sẽ thay thế WordPress TinyMCE Editor (trình biên tập chúng ta đang sử dụng trong WordPress hiện tại) trong lần cập nhật WordPress core tới đây.

Mục đích của Gutenberg là hỗ trợ người dùng thêm, chỉnh sửa và thao tác nội dung trên website.

Nếu bạn không muốn dùng hoặc chưa quen thì bạn hoàn toàn có thể quay lại Editor cũ bằng cách cài đặt thêm Plugin Classic Editor là được

Gutenber sẽ giúp người dùng trải nghiệm sự linh hoạt hơn khi xây dựng nội dung, viết bài, tạo trang nhờ việc xử lí nội dung theo các khối (blocks) – “the wonderful world of blocks“. Trình biên tập mới sẽ giúp bạn tạo ra các trang và bài viết đơn giản nhưng có chất lượng cao hơn, tạo bố cục độc đáo thay vì mất công tạo các shortcode, mã HTML tùy chỉnh thông thường. Gutenberg sẽ giúp bạn soạn thảo dễ dàng hơn với việc nhóm các section content thành các “little blocks“. Về cơ bản sử dụng các khối nội dung này giống như bạn thao tác kéo thả khối trong các Page Builder.

Làm quen với Gutenberg WordPress Editor trong phiên bản Wordpress 5.0 wordpress editor 626x400

Làm quen với Gutenberg WordPress Editor trong phiên bản Wordpress 5.0 gutenberg wordpress editor moi 640x332

Các Block trong Gutenberg WordPress Editor

Gutenberg Editor được phát triển dựa trên khái niệm block. Do vậy, mọi thứ trong Gutenberg sẽ xoay quanh block. Các block của Gutenberg cho phép bạn thêm mọi loại nội dung vào bài viết, trang và có thể edit chúng một cách độc lập với các block khác. Thao tác sử dụng block cũng rất tiện lợi, đơn giản. Bạn chỉ cần click kéo thả block phù hợp vào trong cấu trúc bài viết hoặc trang mà không cần sử dụng bất cứ code, tệp nhúng hay HTML nào. Các block sẽ được sắp xếp thành các category độc lập và chia làm 4 loại chính:

  • Common Blocks: các khối nội dung chung được dùng phổ biến
  • Formatting Blocks: các khối chức năng Formatting.
  • Layout Blocks: các khối liên quan đến bố cục
  • Widgets: các khối tạo tiện ích
Làm quen với Gutenberg WordPress Editor trong phiên bản Wordpress 5.0 block gutenberg wordpress editor 640x333

Các tệp nhúng (Embeded) trong Gutenberg: cho phép bạn nhúng các tệp video, audio, image, tweet…từ nguồn bên ngoài.

Làm quen với Gutenberg WordPress Editor trong phiên bản Wordpress 5.0 gutenberg wordpress editor embed 640x347

Chức năng của các block phổ biến:

  • Paragraph: thêm đoạn văn bản
  • Image: thêm ảnh
  • List: thêm danh sách
  • Heading: thêm thẻ tiêu đề
  • Quote: thêm trích dẫn
  • Video: thêm video
  • Button: thêm nút nhấn
  • Table: thêm bảng
  • Shortcode: thêm shortcode

Các ưu điểm của dùng block để soạn thảo:

  • Dễ dàng kéo, thả, lựa chọn block phù hợp. Việc thêm, xóa, thao tác với block rất trơn tru. Tất cả khối block đều responsive.
  • Có thể chuyển đổi loại block nhanh chóng: ví dụ bạn có thể chuyển từ Paragraph => Quote hoặc List => Paragraph.
  • Chỉnh sửa font, màu, hoặc bất cứ thao tác gì trực tiếp với block.
  • Các block là độc lập, bạn chỉnh sửa block này không ảnh hưởng gì đến block khác.
  • Tùy chỉnh layout bài viết khoa học, hợp lý nhất ngay trong trình soạn thảo.

Giờ đây, khi xây dựng nội dung, ví dụ viết 1 bài viết, bạn chỉ cần xác định các block tương ứng đưa vào khung bài viết (box) là xong.

Ví dụ, mình muốn chèn 1 ảnh, 1 video và 2 đoạn văn bản vào bài viết:

Làm quen với Gutenberg WordPress Editor trong phiên bản Wordpress 5.0 gutenberg wordpress editor detail 525x400
Chèn hình ảnh, video vào bài viết

Điều này giúp cho bố cục bài viết của bạn rất rõ ràng, bạn sẽ xác định được cách trình bày content làm sao cho khoa học, hợp lý nhất.

Hướng dẫn sử dụng Gutenberg

Có thể giao diện Gutenberg mới đầu sẽ khiến bạn bỡ ngỡ do mọi thứ gần như ẩn hết, tuy nhiên nếu quen rồi bạn sẽ thấy rất nhiều ưu điểm của Gutenberg khi soạn thảo bài viết. Trình soạn thảo rất trực quan, nội dung của khung soạn thảo bài viết được hiển thị nhiều hơn trên màn hình.

Làm quen với Gutenberg WordPress Editor trong phiên bản Wordpress 5.0 gutenberg wordpress editor chi tiet 1 640x304

Các vị trí:

  • 1-Add block: thêm khối
  • 2-Undo/Redo
  • 3-Content structure: thống kê bài viết: số lượng từ, thẻ heading, block, đoạn văn của bài viết.
  • 4-Block navigation: mục lục các block, cho phép bạn di chuyển nhanh tới block mong muốn
  • 5-Save draft: lưu bản nháp
  • 6-Preview: xem trước bài viết, trang & Publish: đăng bài viết
  • 7-Setting: ẩn hiện các cài đặt
  • 8-More tools & options: mở thêm các công cụ & tùy chọn

Ngoài ra, phía bên phải có 7 Document Setting và 1 tab Block để thao tác với block:

  • Status & Visibility Permalink
  • Categories
  • Tags
  • Featured image
  • Excerpt Discussion

Các mục này khá dễ hiểu nếu bạn thao tác quen với TinyMCE Editor. Ưu điểm nữa là Gutenberg hỗ trợ các phím tắt rất nhiều, giúp bạn thao tác nhanh chóng. Bạn có thể xem tất cả phím tắt bằng cách nhấn Shift + Alt + H hoặc tại More tools & options => Keyboard Shorcuts

Trên đây là các thông tin về trình soạn thảo WordPress Gutenberg và cách sử dụng Gutenberg khi biên tập nội dung. Có khá nhiều thứ bạn có thể tự mình khám phá, vọc vạch thêm.

Cá nhân mình thích sử dụng các Page Builder kéo thả nên đánh giá Gutenberg thực sự là trình soạn thảo quá tuyệt vời, 1 sự nâng cấp của WordPress 5.0 nhiều tác dụng – hỗ trợ mình rất nhiều khi kiếm tiền từ viết blog, website. Gutenberg cũng tương thích tốt với mobile và sẽ sớm trở thành một phần của WordPress core trong tương lai. Dù vậy, Gutenberg do vẫn đang trong quá trình hoàn thiện sửa lỗi từ đội ngũ phát triển nên có thể vẫn có lỗi xảy ra.

Hiện nay, Gutenberg vẫn chưa hỗ trợ bố cục cột responsive, đồng thời tính tương thích với tất cả theme/ plugin đã tốt hay chưa ? Nếu bạn chưa sẵn sàng hoặc không thích giao diện Gutenberg, bạn có thể tiếp tục sử dụng phiên bản soạn thảo cũ hiện nay với Class Editor. Nếu có bất cứ thắc mắc gì về Gutenberg như cách sử dụng, cài đặt,…nhớ để lại comment phía dưới nhé.

P/S: Bài viết tham khảo từ nguồn tuhocmmo.com