Gutenberg là gì? Hướng dẫn chi tiết cách cài đặt và sử dụng

Nếu đã từng sử dụng WordPress, chắc hẳn bạn đã nghe đến trình soạn thảo mới có tên Gutenberg. Đây là một cải tiến lớn được tích hợp từ phiên bản WordPress 5.0 trở đi, với mục tiêu thay thế trình soạn thảo truyền thống trước đó bằng một giao diện trực quan hơn, hiện đại hơn và hỗ trợ nhiều tính năng mạnh mẽ hơn. Bài viết dưới đây sẽ giúp bạn hiểu rõ Gutenberg là gì, lý do tại sao nó lại quan trọng, ưu điểm, nhược điểm, và cách bạn có thể cài đặt cũng như sử dụng hiệu quả Block Editor Gutenberg để xây dựng trang web chuyên nghiệp trên nền tảng WordPress.

Tổng quan về Gutenberg

Gutenberg là gì?

Gutenberg là trình chỉnh sửa nội dung dạng khối (block-based editor), được WordPress giới thiệu lần đầu trong phiên bản 5.0. Thay vì sử dụng trình soạn thảo văn bản đơn thuần như trong Microsoft Word, Gutenberg cho phép bạn tạo nội dung bằng cách thêm các “khối” khác nhau, mỗi khối tương ứng với một loại nội dung như tiêu đề, đoạn văn, hình ảnh, video, nút bấm, biểu mẫu, trích dẫn, bảng biểu và nhiều hơn thế nữa.

Mục tiêu chính của Gutenberg là cung cấp cho người dùng công cụ mạnh mẽ để tạo ra các bố cục phức tạp mà không cần phải biết mã HTML hay CSS. Nhờ đó, việc thiết kế website trên WordPress trở nên dễ dàng và trực quan hơn rất nhiều.

Các thành phần chính trong bố cục giao diện Gutenberg

Thêm khối nội dung mới: Biểu tượng dấu cộng (+) nằm ở góc trên cùng bên trái, nơi bạn có thể chọn loại block phù hợp như văn bản, hình ảnh, video.
Chức năng hoàn tác/làm lại thao tác (Undo/Redo): Nằm sát bên biểu tượng thêm khối, cho phép quay lại thao tác trước hoặc khôi phục thao tác đã hoàn tác.
Thông tin bài viết: Tại phần "Tài liệu" (Document) nằm ở phía trên bên phải, bạn có thể theo dõi trạng thái bài viết, thời gian đăng và các thiết lập cơ bản.
Cài đặt từng khối nội dung: Khi chọn một khối cụ thể, khu vực “Khối” (Block) nằm bên cạnh tab “Tài liệu” sẽ hiển thị các tùy chỉnh riêng cho block đó.
Quản lý trạng thái bài viết: Gồm các tùy chọn lưu bản nháp, xem trước và công bố bài viết, thường xuất hiện ở phía trên bên phải với biểu tượng con mắt và nút menu dạng drop-down.
Khu vực soạn nội dung chính: Là phần lớn ở giữa màn hình, nơi bạn có thể thoải mái viết bài và tổ chức bố cục bằng cách sắp xếp các khối.

Ưu điểm nổi bật của Gutenberg

Giao diện trực quan dễ sử dụng

Một trong những điểm mạnh của Gutenberg chính là giao diện người dùng hiện đại, được thiết kế theo kiểu trực quan kéo - thả (drag and drop). Giao diện này rất thân thiện, cho phép người dùng thêm và sắp xếp các khối nội dung một cách linh hoạt. Bạn có thể thấy được bố cục bài viết giống như giao diện hiển thị thực tế của trang web.

Khả năng kiểm soát bố cục linh hoạt

Với Gutenberg, bạn có thể tự do thiết kế bố cục trang tùy ý. Từ việc chia cột, căn chỉnh, thay đổi vị trí các khối, điều chỉnh kích thước, cho đến thêm đường viền, nền màu hay hiệu ứng đặc biệt. Những gì trước đây cần đến plugin bổ sung hoặc mã CSS tùy chỉnh thì nay bạn có thể làm trực tiếp trong trình chỉnh sửa.

Hỗ trợ đa phương tiện

Gutenberg giúp việc nhúng các nội dung đa phương tiện như hình ảnh, video, nhạc, GIF, bản đồ,.... vào bài viết trở nên dễ dàng hơn bao giờ hết. Bạn có thể tải lên trực tiếp từ máy tính, sử dụng thư viện Media hoặc chèn liên kết từ YouTube, Vimeo, SoundCloud,...

Khả năng mở rộng với các khối tùy chỉnh

Gutenberg hỗ trợ mở rộng thông qua các plugin cung cấp các khối bổ sung. Có rất nhiều plugin miễn phí và trả phí cho phép bạn thêm các khối như biểu đồ, lịch, bài đánh giá, call to action (CTA), slider ảnh, testimonial,... để trang web trở nên chuyên nghiệp và thu hút hơn.

Nhược điểm của Gutenberg

Mặc dù Gutenberg mang lại nhiều tính năng vượt trội, nhưng vẫn còn tồn tại một số hạn chế nhất định:

Thiếu hỗ trợ Markdown: Người quen với cách viết nội dung bằng cú pháp Markdown sẽ không thấy hỗ trợ tích hợp trong Gutenberg.
Đòi hỏi thời gian làm quen: Với những người mới bắt đầu, giao diện dạng khối có thể khiến họ cảm thấy rối rắm. Việc phải thao tác với nhiều khối riêng biệt có thể gây bối rối ban đầu.
Bố cục phản hồi (responsive layout) chưa tối ưu: Dù Gutenberg hỗ trợ nhiều tùy chỉnh về bố cục, nhưng khả năng hiển thị tự động đẹp trên mọi thiết bị (desktop, tablet, mobile) vẫn chưa thực sự mạnh mẽ nếu không có kiến thức về CSS.
Tải trang chậm hơn: Do sử dụng nhiều khối và hiệu ứng, một số trang có thể tải chậm hơn nếu không tối ưu hóa hợp lý.

Hướng dẫn cách cài đặt Gutenberg

Từ phiên bản WordPress 5.0 trở lên, Gutenberg đã trở thành trình soạn thảo mặc định, tức là bạn không cần cài đặt thêm. Tuy nhiên, nếu bạn đang sử dụng phiên bản cũ hoặc đã chuyển sang sử dụng Classic Editor (trình soạn thảo cũ), bạn vẫn có thể cài Gutenberg như một plugin.

Bước 1: Truy cập trang quản trị WordPress (Dashboard), bạn nhìn vào menu bên trái và chọn Plugins > Add New.

Bước 2: Tại ô tìm kiếm ở góc phải, gõ từ khóa Gutenberg.

Bước 3: Khi kết quả hiện ra, bạn bấm Install Now sau đó chọn Activate để kích hoạt plugin.

Vậy là bạn đã cài đặt xong Gutenberg và có thể bắt đầu sử dụng Block Editor để soạn nội dung.

Hướng dẫn sử dụng chi tiết Gutenberg Editor

Thêm khối nội dung mới

Bất kỳ bài viết hay trang nào cũng bắt đầu bằng một khối tiêu đề. Để thêm các khối khác:

Nhấn vào biểu tượng + (Add Block) trên thanh công cụ hoặc giữa màn hình.
Chọn loại khối bạn muốn thêm: Văn bản, hình ảnh, video, danh sách, bảng, biểu tượng,...
Nhấn Enter để tự động thêm khối đoạn văn mới.

Tùy chỉnh khối

Mỗi khối đều có các tùy chọn riêng, bạn có thể:

Thay đổi kiểu hiển thị (chữ đậm, nghiêng, căn giữa,...)
Thêm màu nền, màu chữ, đường viền, kích thước
Chèn liên kết, thẻ HTML tùy chỉnh, CSS class bổ sung

Các tùy chọn này nằm ở thanh công cụ khối hoặc trong Sidebar Settings bên phải màn hình.

Thêm tiêu đề và đoạn văn

Để phân chia nội dung rõ ràng:

Thêm khối Heading để tạo tiêu đề các phần (H2, H3, H4,…)
Thêm khối Paragraph để nhập nội dung văn bản thông thường
Dùng thanh công cụ để chỉnh định dạng như font chữ, kích thước, căn chỉnh

Thêm hình ảnh và phương tiện

Bạn có thể:

Chèn khối Image để thêm hình ảnh
Chọn từ 3 nguồn: Tải từ máy tính, chọn trong Media Library hoặc dán liên kết URL
Tùy chỉnh kích thước, căn lề, viền, tiêu đề ảnh,...

Ngoài ra còn có khối Gallery, Cover, Media & Text cho bố cục đặc biệt.

Sắp xếp lại các khối

Có hai cách:

Dùng mũi tên lên/xuống ở thanh công cụ khối để di chuyển khối.
Nhấn vào biểu tượng sáu dấu chấm để kéo - thả khối đến vị trí mong muốn.

Nhúng video hoặc nội dung ngoài

Gutenberg hỗ trợ hơn 30 nền tảng nhúng:

Chọn khối Embed hoặc các khối đặc thù như YouTube, Vimeo, Spotify, Twitter,...
Dán link nội dung, WordPress sẽ tự động nhận dạng và nhúng đúng kiểu.

Lời khuyên khi sử dụng Gutenberg hiệu quả

Tận dụng khối tái sử dụng (Reusable Blocks): Khi bạn thường xuyên dùng một kiểu nội dung, hãy lưu lại thành khối tái sử dụng để tiết kiệm thời gian.
Kết hợp với theme hỗ trợ tốt Gutenberg: Một số theme WordPress được tối ưu cho Gutenberg như Astra, Blocksy, Kadence sẽ giúp bạn khai thác tối đa khả năng trình chỉnh sửa.
Cân nhắc sử dụng plugin khối mở rộng: Ví dụ, Stackable, Ultimate Addons for Gutenberg, Genesis Blocks,... cung cấp hàng chục khối mới.

Tạm kết

Gutenberg là một bước tiến đáng kể của WordPress trong việc mang lại trải nghiệm soạn thảo hiện đại, trực quan và mạnh mẽ hơn cho người dùng. Mặc dù còn tồn tại một số hạn chế, nhưng trình soạn thảo dạng khối này đang ngày càng được cải tiến và mở rộng, hứa hẹn sẽ thay đổi cách chúng ta xây dựng nội dung trên web.

Mua laptop tại FPT Shop để trải nghiệm các dòng sản phẩm chính hãng từ Dell, HP, ASUS, Lenovo với cấu hình đa dạng, phù hợp cho học sinh, sinh viên, dân văn phòng và cả gamer chuyên nghiệp. Tất cả sản phẩm tại cửa hàng chúng tôi cam kết kiểm tra kỹ lưỡng trước khi giao hàng, đảm bảo chất lượng và an tâm trong suốt quá trình sử dụng.

Tham khảo ngay: Laptop

Xem thêm:

Gutenberg là gì? Hướng dẫn chi tiết cách cài đặt và sử dụng Block Editor Gutenberg trong WordPress