Hướng dẫn sử dụng Block Editor (Gutenberg) trên WordPress

Block Editor (Gutenberg) là trình chỉnh sửa nội dung mang đến trải nghiệm hoàn toàn mới so với trình soạn thảo thông thường là Classic Editor. Với giao diện trực quan và cơ chế hoạt động theo “từng khối”, Block Editor sẽ giúp bạn dễ dàng tạo tùy chỉnh và sắp xếp bố cục bài viết một cách linh hoạt. Thông qua bài viết này, MONA Media sẽ hướng dẫn chi tiết cách sử dụng Block Editor WordPress, giúp bạn tối ưu hóa quy trình biên tập nội dung của mình. Đừng vội bỏ qua nhé!

Block Editor (Gutenberg) là gì?

Block Editor ám chỉ cho mọi thành phần nội dung sẽ được coi là một khối (block), các khối này cách nhau bằng một hàng và bạn có thể tùy chỉnh hay trang trí cho từng khối riêng biệt. Tương tự như khi soạn thảo văn bản, nếu nội dung của bạn có nhiều dòng, thì mỗi dòng cũng được xem là một block riêng biệt. Đồng thời, bạn cũng có thể tùy chỉnh font, màu chữ, màu nền, kích thước cho riêng từng block.

Ngoài ra, bạn cũng có thể bắt gặp cụm từ Gutenberg Editor khi tìm hiểu về tính năng Block Editor WordPress. Trên thực tế, Gutenberg là tên một dự án dài hạn của đội ngũ phát triển WordPress bao gồm 4 giai đoạn như sau:

• Giai đoạn 1 – Editing: Tập trung vào việc nâng cấp tính năng chỉnh sửa nội dung và Block Editor là một sản phẩm của giai đoạn này.
• Giai đoạn 2 – Customization: Mở rộng, cải tiến các tính năng liên quan để tăng cường trải nghiệm liền mạch trên website như Full Site Editing, Block Editor và bổ sung tính năng Site Editor.
• Giai đoạn 3 – Collaboration: Phát triển các tính năng liên quan đến cộng tác, cho phép nhiều người tham gia chỉnh sửa trên website.
• Giai đoạn 4 – Multilingual: Tập trung vào tính năng hỗ trợ đa ngôn ngữ trên website.

Cách sử dụng Block Editor WordPress update mới nhất

Phần tiếp theo, MONA sẽ đi sâu vào hướng dẫn Block Editor chi tiết nhằm giúp bạn biết cách sử dụng để tạo ra nội dung phong phú và hấp dẫn cho website của mình. Đầu tiên, khung soạn thảo của WordPress sẽ gồm phần soạn thảo bên tay trái và thanh công cụ bên tay phải. Bạn có thể nhấn vào dấu “+” ở góc trái trên cùng của trang để kích hoạt Block Editor.

Lúc này, giao diện soạn thảo sẽ hiển thị 3 phần như sau:

• Phần 1: Block Editor hiển thị danh sách các block được hỗ trợ.
• Phần 2: Khung soạn thảo nội dung để hiển thị ra bên ngoài website.
• Phần 3: Cột tùy chỉnh để hỗ trợ chỉnh bài viết/trang hoặc tùy chỉnh cho block được chọn.

Tại đây, các block sẽ tiếp tục được chia thành 3 mục gồm:

• Blocks: Danh sách các block được hỗ trợ, bao gồm các blocks mặc định của WordPress, blocks riêng của theme và của các plugin (nếu có).
• Patterns: Tập hợp các bản thiết kế có sẵn khi sử dụng blocks.
• Media: Hỗ trợ tái sử dụng lại các block chèn ảnh/video mà bạn đã sử dụng và sử dụng ảnh có sẵn trong thư viện Openverse.

Ngoài ra, để sử dụng một block nào đó, bạn chỉ cần chọn hàng và nhấp vào block ở khung tay trái để sử dụng. Không chỉ vậy, bạn cũng có thể chèn block nhanh bằng cách gõ “/” và nhập một phần tên block, lúc này hệ thống sẽ tự hiện ra để bạn chọn. Trong trường hợp nếu bạn muốn bắt đầu một block mới, bạn chỉ cần nhấp chọn vào block và gõ Enter để xuống hàng.

Hướng dẫn sử dụng các block thông dụng

Để nắm vững cách sử dụng Gutenberg Editor sẽ giúp bạn dễ dàng tạo ra bố cục mong muốn và định dạng nội dung một cách hiệu quả. Dưới đây, hãy cùng MONA tìm hiểu chi tiết những cách tùy chỉnh các block thông dụng trong Block Editor WordPress.

Thêm tiêu đề từng phần trong văn bản

Nếu nội dung văn bản của bạn có nhiều phần, thì mỗi phần đều sẽ có tiêu đề. Chính vì thế, bạn hoàn toàn có thể sử dụng block Heading hoặc cú pháp Markdown để thêm tiêu đề. Khi hoàn tất, bạn cũng có thể phân cấp tiêu đề (heading level) từ heading 1 đến heading 6.

Thêm màu nền và màu chữ

Như đã trình bày, WordPress phân loại mỗi hàng là một block và cho phép bạn tùy chỉnh riêng cho từng block. Do đó, bạn hãy thử nhấp chuột vào một hàng bất kỳ, rồi tiếp tục chọn Text (màu chữ), Background (màu nền), Typography (điều chỉnh kích cỡ chữ) bên tay phải để chỉnh sửa theo ý thích.

Thêm highlight và tô màu chữ

Để highlight cho nội dung (màu nền/ màu chữ) trên Block Editor WordPress, bạn chỉ cần bôi đen đoạn văn bản cần làm nổi bật. Hệ thống sẽ hiển thị thanh tùy chỉnh, lúc này bạn chỉ cần nhấp vào mục highlight để tô màu văn bản.

Những tính năng về Inline Text

Các tính năng Inline Text sẽ giúp bạn thao tác vào một block mà không cần phải xuống hàng. Cụ thể, bạn có thể tùy chỉnh văn bản với các tính năng như sau:

• Footnote: Chú thích/Trích dẫn văn bản.
• Inline Code: Biến một đoạn chữ trong block và đánh dấu nó là mã code, tương tự như <?php $color = ‘purple’; ?> mà không bị lỗi về ký tự đặc biệt.
• Inline Image: Giúp bạn chèn một bức ảnh (thường là hình ảnh nhỏ dạng icon) vào block mà không cần phải xuống hàng để chèn vào.
• Keyboard input: Đánh dấu một chữ hoặc một đoạn trong văn bản để tượng trưng cho nút bàn phím. 
• Language: Hỗ trợ đánh dấu mã ngôn ngữ cho một đoạn văn bản, phù hợp khi văn bản của bạn có nhiều ngôn ngữ khác nhau và cần đánh dấu cấu trúc HTML cho riêng từng ngôn ngữ.. 
• Strikethrough: Hỗ trợ gạch ngang cho văn bản.
• Subscript: Đánh dấu một chữ/chữ số có vị trí thấp hơn văn bản.
• Superscript: Đánh dấu một chữ/chữ số có vị trí cao hơn văn bản

Tạo danh sách (List)

Để chèn một danh sách vào văn bản, bạn có thể sử dụng tính năng List hoặc thêm nhanh bằng cách xuống hàng và gõ ký tự “-”. Để thoát tính năng dạng danh sách, bạn chỉ cần nhấn Enter 2 lần. Hơn nữa, bạn có cũng có thể tạo một danh sách con bằng cách gõ phím Tab trong lúc nhập văn bản.

Chia cột trong nội dung

Một tính năng hay ho khác của Block Editor đó là cho phép người dùng thêm nhiều cột vào nội dung một cách nhanh chóng. Theo đó, bạn chỉ cần thêm Block Column vào nội dung, chọn số cột muốn chèn và thêm block khác vào mỗi cột. Block Editor WordPress sẽ mặc định các cột này xếp chồng lại trên giao diện điện thoại, hoặc có thể tắt tính năng này đi.

Thêm nội dung ẩn với Block Details

Nếu muốn tạo nội dung ẩn, bạn có thể sử dụng block Details được tích hợp sẵn trong Block Editor trên WordPress. Cụ thể, bạn có thể tùy chỉnh nội dung ẩn hoặc hiển thị trong trạng thái mặc định, trang trí cho nội dung và lồng các block vào bên trong.

Chèn văn bản bằng Classic Editor vào Block Editor

Ngoài ra, nếu bạn muốn soạn văn bản bằng trình soạn thảo cũ Classic Editor, thì bạn có thể chèn block Classic vào và bắt đầu biên tập nội dung.

Cách dùng các Block Editor chèn hình ảnh và video

Block Editor sẽ cho phép bạn dễ dàng thêm và quản lý hình ảnh/video, giúp bài viết của bạn trở nên sinh động và hấp dẫn hơn. Dưới đây là hướng dẫn Block Editor WordPress sử dụng để chèn các block hình ảnh và video.

Chèn một hình ảnh/video vào bài viết

Để chèn một hình ảnh/video vào bài viết trên WordPress, bạn chỉ cần sử dụng block Image hoặc Video. Ngoài ra, bạn cũng có thể kéo thả trực tiếp tập tin từ máy tính vào thẳng khung soạn thảo. Đối với các video từ Youtube, bạn chỉ cần sao chép liên kết, hệ thống sẽ tự hiển thị ra video thông qua tính năng Embed.

Tùy chỉnh hiển thị hình ảnh

Sau khi đã chèn hình ảnh vào nội dung, bạn có thể thay đổi kiểu hiển thị của hình ảnh với Block Editor. Chỉ bằng một vài thao tác đơn giản, bạn hoàn toàn có thể điều chỉnh kích thước, thêm bộ lọc màu, thêm hiệu ứng, bo cong góc ảnh,…. trên Block Editor WordPress.

Hiển thị hình ảnh dạng gallery

Nếu bạn muốn hiển thị nhiều hình ảnh, thì nên chèn vào với dạng block Gallery để hiển thị đẹp mắt hơn. Khi chèn dạng Gallery, bạn hãy nhớ bật tính năng chèn liên kết của ảnh khi nhấp chuột, để người dùng có thể xem được kích thước ảnh gốc. Đối với các ảnh đã có sẵn ở thư viện, nếu muốn tạo Gallery, bạn nên chọn Media Library thay vì upload file.

Một số dạng Block Editor khác

Bên cạnh các block thông dụng mà MONA Media đã đề cập ở trên, bạn có thể khám phá và sử dụng một số dạng Block Editor khác để tối ưu hóa nội dung và nâng cao trải nghiệm người dùng bao gồm:

• Quote: Hỗ trợ chèn trích dẫn vào bài viết và đánh dấu hiển thị riêng biệt. Đây là Blockquote và được sử dụng khi dẫn trích dẫn từ bên ngoài vào văn bản.
• Preformatted: Chèn một văn bản và bỏ qua mọi định dạng, ký tự đặc biệt.
• Pullquote: Chèn trích dẫn nhưng thuộc loại Pull quote, nghĩa là các trích dẫn được lấy từ bên trong nội dung văn bản với mục đích tạo sự chú ý của người đọc.
• Table: Chèn bảng vào phần nội dung, theo đó bạn có thể tùy chỉnh số lượng cột, hàng theo nhu cầu.
• Verse: Cho phép tạo một block riêng để chèn thơ vào nội dung.
• Audio: Tương tự như chèn ảnh và video, nhưng dùng để chèn tập tin âm thanh.
• Cover: Đây là một block chèn ảnh, nhưng cho phép người dùng viết chữ lên trên ảnh.
• File: Chèn một tập tin từ thư viện Media, đồng thời hỗ trợ người dùng tải về dễ dàng bằng cách hiển thị nút tải File.
• Media & Text: Block chèn ảnh nhưng sẽ chia nội dung ra hai cột, một cột để hiển thị ảnh và cột bên cạnh hiển thị chữ.
• Button: Cho phép chèn nút bấm vào văn bản.
• Group: Gộp nhiều block lại thành một nhóm (Group) để cấu hình chung.
• Row: Tập hợp các block lại thành một hàng ngang (Row).
• Stack: Tập hợp các block lại thành một hàng dọc (Stack).
• Grid: Tập hợp các block lại thành dạng lưới (Grid).
• More: Hiển thị những nội dung trên block ra bên ngoài trang chủ hoặc trang danh mục
• Page Break: Chia nội dung văn bản thành nhiều trang con, theo đó các nội dung bên dưới sẽ được tách ra một trang riêng biệt.
• Separator: Cho phép kẻ một đường thẳng trong nội dung để biểu thị cho sự kết thúc một phần hoặc một ý tưởng nào đó.
• Spacer: Block này giúp bạn tạo khoảng đệm trống giữa các block.
• Các block trong mục Widget: Giúp bạn chèn trực tiếp một widget có hỗ trợ trong theme/plugin vào nội dung bài viết.
• Các block trong mục Theme: Đây là các block đặc biệt mà theme bạn đang dùng sẽ tương thích với Block Editor hoặc hỗ trợ Full-site Editing.
• Các block mục Embed: Cho phép chèn nội dung từ một website hoặc mạng xã hội khác vào bài viết của bạn.

Như vậy, Block Editor không chỉ đơn giản là công cụ soạn thảo, mà còn giúp người dùng WordPress thiết kế và chỉnh sửa nội dung một cách trực quan hơn. Hy vọng với hướng dẫn trên đây của MONA Media, bạn đã tự tin hơn khi sử dụng Block Editor trên WordPress và sẵn sàng khai thác tối đa tiềm năng mà trình soạn thảo này mang lại nhé.

→ Tìm đọc thêm:

• Hướng dẫn tạo bài viết trong WordPress
• Top plugin SEO WordPress tốt nhất