Thành thạo cách sử dụng Block Editor trong WordPress chỉ trong 5 phút! (Hướng dẫn với Gutenberg)

Bạn muốn tối ưu trải nghiệm người dùng trên website mà không cần cài quá nhiều plugin phức tạp? Block Editor trong WordPress chính là chìa khóa giúp bạn dễ dàng thiết kế bố cục trang web, tạo landing page ấn tượng và tối ưu SEO mà không cần chạm vào mã nguồn! Trong bài viết này, Tino sẽ hướng dẫn bạn cách sử dụng Block Editor trong WordPress một cách hiệu quả nhất để nâng cao chất lượng website và tăng tỷ lệ chuyển đổi!

Gutenberg là gì?

Gutenberg là tên gọi ban đầu của Block Editor, trình chỉnh sửa hiện đại được tích hợp sẵn trong WordPress. Trình chỉnh sửa này ra đời nhằm thay thế Classic Editor – công cụ soạn thảo cũ đã xuất hiện nhiều năm nhưng không có nhiều cải tiến đáng kể.

Điểm khác biệt lớn nhất của Gutenberg hay còn gọi là Block Editor là cơ chế hoạt động theo từng khối nội dung (block). Thay vì soạn thảo văn bản như trước đây, người dùng có thể thêm, di chuyển và tùy chỉnh từng khối riêng lẻ như văn bản, hình ảnh, video, nút bấm, bảng biểu,… Đây là cách giúp việc tạo nội dung trên WordPress trở nên trực quan, linh hoạt hơn, tương tự như cách các trình dựng trang (page builder) hoạt động.

Với Block Editor, bạn có thể dễ dàng kéo thả các khối, chèn nội dung chờ chỉnh sửa sau hoặc sắp xếp lại bố cục bài viết chỉ với vài thao tác đơn giản. Hiện tại, Gutenberg tiếp tục được phát triển như một plugin thử nghiệm, đóng vai trò quan trọng trong việc thử nghiệm và cải tiến các tính năng mới cho WordPress trong tương lai.

Tại sao nên chọn Gutenberg?

Bạn có bao giờ thắc mắc, WordPress vốn đã có trình chỉnh sửa nội dung, vậy tại sao cần đến Gutenberg? Trên thực tế, sự ra đời của Block Editor bắt nguồn từ xu hướng thay đổi trong cách người dùng tạo nội dung trên web. Trình chỉnh sửa Classic Editor không hề có vấn đề gì nghiêm trọng, nhưng trình này bị hạn chế về mặt tuỳ chỉnh. Có không ít người dùng muốn có nhiều sự lựa chọn linh hoạt hơn và thường tìm đến các plugin xây dựng trang (page builder) như Elementor, Divi để có trải nghiệm kéo-thả trực quan.

Từ đó, WordPress nhận ra rằng người dùng ngày càng ưa chuộng trình chỉnh sửa kéo-thả bởi tính linh hoạt và dễ sử dụng. Gutenberg ra đời để mang lại trải nghiệm này ngay trong nền tảng WordPress, giúp người dùng không cần cài đặt thêm plugin bên ngoài mà vẫn có thể tạo nội dung một cách trực quan, nhanh chóng. Với Block Editor, việc chỉnh sửa trang web trở nên dễ dàng hơn bao giờ hết!

Sự khác biệt giữa Gutenberg và trình soạn thảo cổ điển

Classic Editor là trình chỉnh sửa văn bản cũ của WordPress, hoạt động giống như một trình soạn thảo đơn giản với các nút định dạng tương tự Microsoft Word. Giao diện của trình này chỉ bao gồm 1 hộp văn bản và một số tùy chọn cơ bản để định dạng nội dung. Vì hạn chế về tính năng, Classic Editor không hỗ trợ trực quan trong việc thiết kế bố cục trang hoặc bài viết.

Block Editor (hay còn gọi là Gutenberg Editor) là trình chỉnh sửa mới trong WordPress, hoạt động theo cơ chế khối (block). Mỗi nội dung trong bài viết hoặc trang web (như đoạn văn, hình ảnh, video, danh sách, bảng biểu…) đều được xây dựng dưới dạng một khối riêng biệt, giúp bạn dễ dàng di chuyển, tùy chỉnh và sắp xếp nội dung một cách trực quan.

Ví dụ, thay vì phải cài thêm plugin để tạo bảng trong Classic Editor, với Block Editor, bạn chỉ cần thêm khối “Bảng“, chọn số hàng, số cột và điền nội dung trực tiếp.

Vậy tại sao Block Editor tốt hơn Classic Editor?

• Giao diện trực quan, dễ sử dụng: Người dùng có thể kéo-thả, di chuyển các khối nội dung mà không cần can thiệp vào mã HTML.
  
• Đa dạng định dạng nội dung: Hỗ trợ sẵn nhiều loại khối như văn bản, hình ảnh, video, bảng, trích dẫn, nút bấm,…
  
• Không cần cài thêm plugin hỗ trợ: Các tính năng trước đây phải cài plugin, giờ đây đã được tích hợp sẵn.
  
• Phù hợp với người mới: Nếu đang bắt đầu viết blog hoặc thiết kế website, Block Editor sẽ giúp bạn tạo nội dung nhanh chóng mà không cần biết lập trình.
  

Với tất cả những ưu điểm trên, Block Editor giúp người dùng dễ dàng tạo nội dung chuyên nghiệp hơn, tối ưu trải nghiệm chỉnh sửa và tiết kiệm thời gian đáng kể.

Hướng dẫn cách sử dụng Block Editor trong WordPress

Trình soạn thảo khối được thiết kế để dễ sử dụng và linh hoạt. Dù trông khác với trình soạn thảo WordPress cũ, nhưng trình này vẫn có thể thực hiện được tất cả các chức năng mà bạn từng làm trong trình soạn thảo cổ điển.

Cách tạo bài viết hoặc trang mới bằng trình soạn thảo khối

Để bắt đầu, bạn cần tạo một bài viết hoặc trang mới như thông thường:

• Vào Bài viết (Posts) > Thêm bài viết mới (Add New Post) nếu muốn tạo bài viết.
  
• Vào Trang (Pages) > Thêm trang mới (Add New) nếu muốn tạo một trang mới.
  

Ngay khi chọn, trình soạn thảo khối sẽ tự động mở ra để bạn bắt đầu chỉnh sửa nội dung.

Cách thêm khối trong trình soạn thảo

• Tiêu đề: Khối đầu tiên của mỗi bài viết hoặc trang chính là tiêu đề. Sau khi nhập tiêu đề, bạn có thể nhấn phím Tab hoặc dùng chuột để di chuyển xuống khối tiếp theo.
  

• Đoạn văn: Theo mặc định, khối tiếp theo sẽ là khối Đoạn văn (Paragraph block) để bạn có thể bắt đầu viết ngay lập tức.
  

Nếu muốn thêm các loại nội dung khác, bạn có thể:

• Nhấp vào biểu tượng [+] ở góc trên cùng bên trái, bên dưới một khối hiện có hoặc bên phải khối hiện tại.
  

• Một menu sẽ xuất hiện với thanh tìm kiếm phía trên và danh sách các khối thường dùng bên dưới. Bạn có thể nhập từ khóa để nhanh chóng tìm khối mong muốn.
  

• Ngoài ra, bạn cũng có thể sử dụng phím tắt: chỉ cần gõ / rồi nhập tên khối cần thêm, sau đó nhấn Enter để chèn vào bài viết.
  

Làm quen với các khối trong trình soạn thảo mới

Thanh công cụ của mỗi khối hoạt động thế nào?

Mỗi khối trong trình soạn thảo đều có một thanh công cụ xuất hiện phía trên. Các nút trong thanh công cụ sẽ thay đổi tùy thuộc vào loại khối bạn đang chỉnh sửa.

Ví dụ, khi làm việc với Paragraph block (khối Đoạn văn), bạn sẽ thấy các nút chỉnh sửa cơ bản như căn chỉnh văn bản, in đậm, in nghiêng, chèn liên kết và các tùy chọn khác trong menu ba chấm.

Bên cạnh thanh công cụ, mỗi khối còn có cài đặt riêng hiển thị ở cột bên phải của màn hình chỉnh sửa.
Các cài đặt này thay đổi tùy từng loại khối. Ví dụ, Paragraph block (khối Đoạn văn) cho phép bạn chỉnh sửa nội dung văn bản, màu nền, màu liên kết và kiểu chữ.

Bạn cũng có thể di chuyển các khối bằng cách kéo thả hoặc dùng các nút mũi tên lên/xuống trong thanh công cụ.

Cách sắp xếp các khối thành nhóm hoặc cột

Trình soạn thảo khối cung cấp công cụ giúp bạn tổ chức nội dung một cách linh hoạt. Bạn có thể chọn nhiều khối cùng lúc bằng cách giữ phím Shift và bấm vào các khối mong muốn.

Sau đó, bạn nhấp vào nút loại khối (block type button) trong thanh công cụ để nhóm các khối thành Groups (Nhóm) hoặc Columns (Cột).

• Với khối Nhóm (Group block): Bạn có thể thay đổi căn chỉnh, khoảng cách giữa các khối trong nhóm.
  
• Với khối Cột (Columns block): Bạn có thể thêm nội dung vào từng cột và sắp xếp chúng theo bố cục mong muốn.
  

Ngoài ra, bạn cũng có thể tạo một Group block (khối Nhóm) hoặc Columns block (khối Cột) rỗng, sau đó chèn các khối khác vào bên trong để tùy chỉnh nội dung.

Đây là cách giúp bạn tạo bố cục chuyên nghiệp và đẹp mắt phù hợp với nhiều mục đích khác nhau.

Lưu và tái sử dụng khối trong Gutenberg

Một trong những ưu điểm lớn nhất của việc sử dụng khối là bạn có thể lưu lại và tái sử dụng chúng. Tính năng này đặc biệt hữu ích cho các chủ website và blogger cần thêm các đoạn nội dung cụ thể vào bài viết hoặc trang của mình.

Để lưu và tái sử dụng khối, bạn chỉ cần nhấp vào nút Menu ở góc phải của thanh công cụ của mỗi khối. Từ Menu, bạn chọn mục Create Pattern.

Lưu ý: Bạn cũng có thể sử dụng toàn bộ nhóm và cột làm khối có thể tái sử dụng. Với cách này, bạn có thể lưu lại toàn bộ các phần và sử dụng chúng bất cứ khi nào. Lúc này, bạn sẽ thấy một cửa sổ popup và đặt tên cho mẫu này.

Sau đó, bạn có thể tùy chọn các danh mục để sắp xếp các mẫu của mình một cách có tổ chức.

Tiếp theo, bạn click vào nút Create để lưu mẫu. WordPress sẽ lưu trữ mẫu của bạn với tất cả các khối bên trong chúng.

Để sử dụng lại mẫu, bạn chỉ cần chỉnh sửa bài viết hoặc trang mà bạn muốn thêm.

Sau đó, bạn có thể nhấp vào nút thêm khối [+] hoặc sử dụng phím tắt /. Bạn có thể tìm mẫu bằng cách gõ tên bạn đã đặt.

Các mẫu khối (Patterns) giúp chủ website dễ dàng thêm các thành phần phổ biến vào bố cục trang web, chẳng hạn như nút kêu gọi hành động (Call to Action), nút mạng xã hội, banner quảng cáo và nhiều nội dung khác.

Ngoài ra, theme hoặc plugin WordPress của bạn có thể đi kèm với một số mẫu có sẵn. Bạn cũng có thể tìm thêm các mẫu được tạo bởi cộng đồng trong thư viện WordPress Block Patterns.

Xuất bản và quản lý các tùy chọn trong trình soạn thảo Gutenberg

Mỗi bài viết trong WordPress đi kèm với rất nhiều metadata (dữ liệu bổ sung). Đó có thể là: ngày xuất bản, danh mục, thẻ (tags), ảnh đại diện (featured images) và nhiều thông tin khác. Tất cả các tùy chọn này đều được sắp xếp gọn gàng ở cột bên phải của màn hình trình soạn thảo.

Tuỳ chọn plugin trong Gutenberg

Nhiều plugin WordPress có thể tích hợp trực tiếp vào Gutenberg để bạn dễ dàng sử dụng các tính năng của chúng ngay trong trình soạn thảo. Một số plugin phổ biến thậm chí có khối riêng, giúp bạn chèn nội dung chỉ với vài thao tác đơn giản.

Ví dụ:

• WPForms – một trong những plugin tạo biểu mẫu liên hệ tốt nhất – có khối riêng giúp bạn thêm biểu mẫu vào bài viết dễ dàng.
  

• All in One SEO for WordPress cung cấp một khu vực ngay bên dưới trình soạn thảo để chỉnh sửa cài đặt SEO cho bài viết.
  

• Nếu đang sử dụng WooCommerce để bán hàng online, bạn sẽ thấy plugin này cũng có các khối riêng giúp bạn thêm sản phẩm vào bài viết hoặc trang web nhanh chóng.
  

Nhờ các tích hợp này, bạn có thể quản lý nội dung, SEO và sản phẩm ngay trong Gutenberg, giúp việc chỉnh sửa cũng như tối ưu website trở nên thuận tiện hơn.

Cách thêm các khối phổ biến trong trình soạn thảo Gutenberg

Trình soạn thảo khối có thể thực hiện mọi tính năng mà trình soạn thảo cổ điển có. Hơn nữa, với trình soạn thảo này, các thao tác bạn thực hiện sẽ diễn ra nhanh chóng và dễ dàng hơn. Gutenberg còn cung cấp các tính năng mới, cho phép bạn tuỳ chỉnh nội dung dễ dàng mà không cần viết mã.

Thêm ảnh trong trình soạn thảo WordPress

Gutenberg có sẵn khối Ảnh (Image block) rất dễ sử dụng:

• Thêm khối và tải ảnh lên
  
• Hoặc chọn ảnh từ thư viện media
  
• Có thể kéo và thả ảnh trực tiếp từ máy tính
  

Sau khi thêm ảnh, bạn có thể:

• Chỉnh sửa văn bản thay thế (alt text)
  
• Điều chỉnh kích thước ảnh
  
• Thêm liên kết cho ảnh
  

Thêm liên kết trong trình soạn thảo

Có nhiều cách để chèn liên kết:

• Sử dụng nút chèn liên kết trong khối văn bản (như khối Đoạn văn)
  
• Dùng phím tắt:
  • Mac: Command + K
    
  • Windows: CTRL + K
    

Tạo thư viện ảnh trong Gutenberg

Khối Thư Viện (Gallery block) hoạt động tương tự khối Ảnh:

• Thêm khối
  
• Tải hoặc chọn nhiều ảnh
  
• Sắp xếp và trình bày linh hoạt
  

Sử dụng Shortcode trong bài viết

Đối với trình soạn thảo mới, tính năng Shortcode sẽ:

• Hoàn thành tương thích như ở trình soạn thảo cũ.
  
• Có thể chèn vào khối đoạn văn.
  
• Sử dụng khối Shortcode chuyên dụng.
  

Các khối hữu ích trong trình soạn thảo Gutenberg

Trình soạn thảo Gutenberg giúp bạn dễ dàng chỉnh sửa bài viết trên WordPress nhờ vào hệ thống khối nội dung (blocks). Dưới đây là một số khối quan trọng giúp bạn tạo bài viết chuyên nghiệp và đẹp mắt hơn.

Chèn hình ảnh cạnh văn bản

Trước đây, nếu muốn đặt hình ảnh bên cạnh văn bản, bạn phải chỉnh sửa rất phức tạp. Giờ đây, với Media & Text block (Khối Hình Ảnh & Văn Bản), bạn có thể dễ dàng:

• Chèn hình ảnh và văn bản song song nhau
• Điều chỉnh kích thước hình ảnh và bố cục một cách linh hoạt
• Giúp bài viết trực quan, chuyên nghiệp hơn
  

Thêm nút bấm (button) vào bài viết

Trước đây, muốn chèn nút bấm, bạn phải dùng plugin hoặc viết mã HTML. Nhưng với Button block (Khối Nút Bấm), bạn có thể:

• Thêm nút bấm nhanh chóng
  
• Đặt liên kết, chỉnh màu sắc, thay đổi kích thước dễ dàng
  
• Giúp bài viết trông chuyên nghiệp hơn mà không cần biết lập trình
  

Thêm ảnh bìa đẹp mắt

Bạn muốn bài viết có điểm nhấn bắt mắt? Hãy sử dụng Cover block (Khối Ảnh Bìa). Khối này giúp bạn:

• Thêm ảnh bìa lớn ở đầu bài hoặc giữa các phần nội dung
• Chỉnh màu nền, thêm hiệu ứng làm mờ hoặc cố định ảnh (parallax)
• Giúp bài viết trông hấp dẫn và chuyên nghiệp hơn
  

Chèn bảng dữ liệu (Table) đơn giản

Trước đây, nếu muốn tạo bảng trong WordPress, bạn cần dùng plugin hoặc viết mã. Nhưng giờ đây, Table block (Khối Bảng) giúp bạn:

• Tạo bảng dễ dàng chỉ với vài cú nhấp chuột
  
• Thêm hoặc xóa hàng, cột nhanh chóng
  
• Không cần dùng mã HTML hay CSS phức tạp
  

Chia nội dung thành nhiều cột

Nếu muốn trình bày bài viết theo dạng nhiều cột, giống như tạp chí hay trang tin tức, bạn có thể sử dụng Columns Block (Khối cột). Tính năng này sẽ giúp bạn:

• Chia nội dung thành nhiều cột (Tối đa 6 cột).
  
• Thêm văn bản, hình ảnh và nút bấm vào từng cột.
  
• Tạo bố cục bài viết rõ ràng, chuyên nghiệp hơn.
  

Bí quyết sử dụng Gutenberg như chuyên gia

Khi vừa làm quen trình soạn thảo Gutenberg, bạn có thể sẽ cảm thấy khó khăn và tốn thời gian để thêm cũng như chỉnh sửa khối. Tuy nhiên, về bản chất, Gutenberg là trình soạn thảo văn bản được tạo ra để bạn tiết kiệm thời gian. Chỉ sau một thời gian ngắn, bạn sẽ nhận thấy được quy trình viết bài của mình trở nên mượt mà, hiệu quả hơn rất nhiều.

Dưới đây là một số mẹo hữu ích giúp bạn sử dụng trình soạn thảo Gutenberg nhanh và chuyên nghiệp hơn.

Chuyển thanh công cụ (Toolbar) lên trên

Mặc định, mỗi khối nội dung đều có một thanh công cụ xuất hiện ngay phía trên nó. Nếu muốn giữ giao diện gọn gàng hơn, bạn có thể di chuyển thanh công cụ này lên phía trên trình chỉnh sửa.

Để làm điều này, hãy nhấp vào biểu tượng ba dấu chấm ở góc trên bên phải màn hình, sau đó chọn ‘Top toolbar’ (Thanh công cụ trên cùng).

Sử dụng phím tắt để làm việc nhanh hơn

Gutenberg hỗ trợ nhiều phím tắt giúp bạn thao tác nhanh chóng. Một trong những phím tắt hữu ích nhất là / (dấu gạch chéo).

Chỉ cần nhập /, sau đó gõ tên khối bạn muốn chèn, trình soạn thảo sẽ tự động hiển thị danh sách khối phù hợp để bạn chọn ngay lập tức.

Để xem danh sách đầy đủ các phím tắt, hãy nhấp vào biểu tượng ba dấu chấm ở góc trên bên phải màn hình, sau đó chọn ‘Keyboard shortcuts’ (Phím tắt). Một cửa sổ bật lên sẽ hiển thị danh sách các phím tắt dành riêng cho Windows và Mac.

Kéo thả hình ảnh hoặc khối video để tạo khối phương tiện

Thay vì phải chèn hình ảnh hoặc video theo cách thủ công, bạn có thể kéo thả trực tiếp các tệp vào màn hình chỉnh sửa. Gutenberg sẽ tự động tạo khối phương tiện phù hợp cho bạn.

Ví dụ:

• Nếu bạn thả một hình ảnh, Gutenberg sẽ tự động tạo một Image block (Khối Hình Ảnh).
  
• Nếu bạn thả nhiều hình ảnh cùng lúc, một Gallery block (Khối Thư Viện Ảnh) sẽ được tạo ngay lập tức.
  

Thêm video Youtube, bài đăng trên Twitter, Vimeo và các nội dung nhúng khác

Gutenberg giúp bạn nhúng (embed) nội dung từ bên thứ ba vào bài viết dễ dàng hơn bao giờ hết. Bạn có thể sử dụng các khối chuyên biệt như YouTube block (Khối YouTube), Twitter block (Khối Twitter), Vimeo block (Khối Vimeo),…

Tuy nhiên, một cách đơn giản hơn là chỉ cần sao chép và dán đường link (URL) vào bài viết. Trình soạn thảo sẽ tự động nhận diện và tạo khối nhúng phù hợp.

Ví dụ: Nếu bạn dán một liên kết video YouTube, Gutenberg sẽ tự động tạo một YouTube embed block (Khối nhúng YouTube) và hiển thị video ngay lập tức.

Block Editor trong WordPress không hề phức tạp như bạn nghĩ! Với những thao tác đơn giản, bạn có thể nhanh chóng làm chủ Gutenberg và nâng cao hiệu quả sáng tạo nội dung. Hãy thực hành ngay để tận dụng tối đa những tiện ích tuyệt vời này!

Những câu hỏi thường gặp