WordPress Gutenberg là gì? Cách sử dụng trình chỉnh sửa khối WordPress Gutenberg hiệu quả

WordPress Gutenberg là gì? Nếu bạn đang tìm kiếm giải pháp để tạo và chỉnh sửa nội dung trên website dễ dàng thì Gutenberg chính là ứng cử viên sáng giá. Với giao diện trực quan và tính năng mạnh mẽ, Gutenberg không chỉ thay đổi cách chúng ta tạo bài viết mà còn mang lại nhiều cơ hội sáng tạo. Mời bạn cùng Tino khám phá vì sao Gutenberg trở thành công cụ không thể thiếu đối với người dùng WordPress nhé!

WordPress Gutenberg là gì?

Giới thiệu chung về WordPress Gutenberg

Theo bài viết: “What is WordPress Gutenberg? Understanding the block editor” trên trang Hostinger, WordPress Gutenberg là trình soạn thảo mặc định của WordPress, thay thế cho trình soạn thảo cổ điển trước đây. Công cụ này giúp bạn dễ dàng tạo và thiết kế nội dung bằng cách sử dụng các khối (blocks) cho các phần tử khác nhau của trang web như văn bản, hình ảnh, video. Giao diện kéo, thả của Gutenberg cực kỳ dễ sử dụng, giúp bạn thiết kế website theo mong muốn nhanh chóng, hiệu quả.

Không chỉ là công cụ soạn thảo nội dung đơn thuần, Gutenberg còn là một phần trong dự án lớn của cộng đồng WordPress nhằm thay đổi toàn bộ trải nghiệm chỉnh sửa website. Được ra mắt từ phiên bản 5.0 (2018) và liên tục phát triển đến hiện tại, tính đến WordPress 6.5 (2025), Gutenberg đã trở thành công cụ chỉnh sửa toàn diện cho cả nội dung và thiết kế website.

Các tính năng nổi bật của Gutenberg trong giai đoạn 2024-2025

Gutenberg đang được nâng cấp mạnh mẽ để giúp bạn xây dựng website dễ dàng và hiệu quả hơn. Dưới đây là những điểm mới đáng chú ý:

Chỉnh sửa toàn diện trang web (Full Site Editing – FSE)

Tính năng này cho phép bạn kiểm soát mọi phần của website ngay trong giao diện chỉnh sửa:

• Chỉnh sửa trực tiếp Header, Footer, Sidebar: Bạn có thể thay đổi các khu vực này mà không cần động đến code hay vào các cài đặt phức tạp. Mọi thứ đều hiển thị trực quan để bạn chỉnh sửa.
• Chỉnh sửa giao diện với kéo & thả: Bạn có thể dễ dàng sắp xếp lại các thành phần trên trang bằng cách kéo và thả, giúp tạo ra bố cục mong muốn nhanh chóng.
• Đồng bộ hóa giao diện tổng thể: Khi bạn thay đổi một phần nào đó trong giao diện (ví dụ: font chữ, màu sắc), sự thay đổi này sẽ được áp dụng nhất quán trên toàn bộ website.

Hệ thống thiết kế đồng bộ (Design System Integration)

Gutenberg giờ đây giúp bạn duy trì sự nhất quán về thiết kế trên toàn bộ website:

• Design Tokens: Giúp bạn quản lý màu sắc, kiểu chữ một cách tập trung. Khi bạn thay đổi “token” này, mọi nơi sử dụng nó trên website cũng sẽ tự động cập nhật theo.
• Spacing Scale: Cung cấp một hệ thống các khoảng cách chuẩn, đảm bảo các phần tử trên trang luôn có khoảng cách hợp lý và đồng đều.
• Component Library: Một thư viện chứa các thành phần thiết kế sẵn có thể tái sử dụng. Bạn chỉ cần chọn và kéo vào trang mà không cần thiết kế lại từ đầu, tiết kiệm thời gian và đảm bảo tính nhất quán.

Cải thiện hiệu suất

Website của bạn sẽ tải nhanh hơn và hoạt động mượt mà hơn nhờ các cải tiến này:

• Tải từng phần theo nhu cầu (Lazy Loading): Các khối nội dung sẽ chỉ được tải khi người dùng cuộn đến chúng, giúp trang web tải nhanh hơn ban đầu.
• Tách mã tối ưu (Code Splitting): Mã code của website được chia nhỏ ra và chỉ tải những phần cần thiết, giảm gánh nặng cho trình duyệt.
• Giảm kích thước gói code (Bundle Size): Kích thước tổng thể của mã code đã giảm 30% so với năm 2023, giúp website nhẹ hơn và tải nhanh hơn đáng kể.

Hỗ trợ nhà phát triển (Developer Experience)

Gutenberg cũng mang đến nhiều công cụ mạnh mẽ hơn cho các nhà phát triển:

• API mới cho Block (Block API v3): Cung cấp giao diện lập trình ứng dụng mới giúp các nhà phát triển tạo ra các block tùy chỉnh dễ dàng và mạnh mẽ hơn.
• Hỗ trợ TypeScript: Ngôn ngữ lập trình TypeScript giờ đây được hỗ trợ native, giúp phát triển code an toàn và dễ bảo trì hơn.
• Cập nhật React 18: Gutenberg đã được cập nhật lên phiên bản React mới nhất, mang lại hiệu suất tốt hơn và các tính năng phát triển hiện đại.

Những cải tiến này cho thấy Gutenberg đang hướng tới việc trở thành một công cụ mạnh mẽ hơn, trực quan hơn cho cả người dùng cuối và nhà phát triển, giúp việc xây dựng và quản lý website trở nên dễ dàng và hiệu quả hơn rất nhiều. Có thể thấy, đến 2025, WordPress Gutenberg cơ bản đã dần hoàn thiện mong muốn của Matt Mullenweg, WordPress Co-founder: “Gutenberg không chỉ là trình soạn thảo, mà là hệ sinh thái thiết kế website hoàn chỉnh”.

Ưu điểm và hạn chế của WordPress Gutenberg

Ưu điểm

1. Dễ dàng sử dụng cho người mới bắt đầu: Gutenberg giúp quá trình tạo nội dung trở nên trực quan hơn, dễ hiểu và dễ tiếp cận, đặc biệt là với những người mới bắt đầu.
   
2. Dễ xem trước nội dung: Bạn có thể thấy nội dung của mình hiển thị gần như chính xác như khi xuất hiện trên trang web, giúp việc chỉnh sửa hiệu quả hơn.
   
3. Đồng nhất trải nghiệm tạo nội dung: Với Gutenberg, bạn không cần thiết phải sử dụng các mã shortcode riêng biệt, tạo ra một trải nghiệm đồng nhất trong việc tạo nội dung.
   
4. Tùy chỉnh linh hoạt: Gutenberg cung cấp nhiều lựa chọn để bạn tùy chỉnh nội dung qua các phần tử riêng biệt. Nhờ đó, bạn có thể thỏa sức sáng tạo và linh hoạt hơn khi thiết kế.
   
5. Không cần cài thêm plugin trình xây dựng trang: Bạn không cần cài đặt các plugin xây dựng trang riêng biệt, vì Gutenberg đã tích hợp các tính năng này trực tiếp vào trình soạn thảo.
   

Hạn chế

1. Khó học hơn so với Classic Editor: Dù Gutenberg được thiết kế để đơn giản hóa quá trình sử dụng. Tuy nhiên, với một loạt các tùy chọn và cài đặt, trình soạn thảo này có thể khó học hơn so với Classic Editor, nhất là đối với người dùng đã quen với phiên bản cũ.
   
2. Nhiều bất cập khi chuyển từ Classic Editor: Nếu bạn chuyển từ Classic Editor sang Gutenberg, có thể trang web của bạn sẽ gặp sự cố. Vì vậy, bạn cần xem và thiết kế lại từng bài viết, trang của mình để phù hợp với Gutenberg.
   
3. Không còn hỗ trợ Classic Editor: Từ năm 2022, WordPress đã ngừng hỗ trợ Classic Editor và chuyển hoàn toàn sang Gutenberg. Vì vậy, nếu bạn vẫn sử dụng trình soạn thảo cũ, đã đến lúc chuyển sang Gutenberg để đảm bảo tính tương thích và hiệu suất tốt nhất.
   

So sánh WordPress Gutenberg với các Page Builder phổ biến

Khi xây dựng website WordPress, bạn có nhiều lựa chọn để tạo nội dung và bố cục. Dưới đây là bảng so sánh chi tiết giữa Gutenberg (trình soạn thảo mặc định của WordPress) và các Page Builder phổ biến khác, giúp bạn đưa ra quyết định sáng suốt.

Lời khuyên: Nếu bạn muốn một website nhanh, tối ưu SEO và muốn tiết kiệm chi phí, WordPress Gutenberg là một lựa chọn tuyệt vời. Nếu bạn cần một giao diện kéo thả trực quan hơn và sẵn sàng chi trả, các Page Builder như Elementor hay Divi có thể là lựa chọn đáng cân nhắc.

Hướng dẫn cách sử dụng trình chỉnh sửa khối WordPress Gutenberg

#1. Cách thêm một khối mới

Để bắt đầu sử dụng trình soạn thảo Gutenberg, bước đầu tiên bạn cần làm là thêm một khối mới. Có 3 cách giúp bạn thực hiện:

Cách 1: Sử dụng biểu tượng “+”:

Khi bạn mở trình soạn thảo Gutenberg, bạn sẽ thấy một khối tiêu đề đã có sẵn. Để thêm một khối mới, di chuyển con trỏ chuột xuống dưới khối đó và nhấp vào biểu tượng “+” màu đen. Sau đó, bạn có thể chọn từ các khối có sẵn. Nếu không thấy khối bạn cần, nhấp vào “Browse all” để xem thêm các tùy chọn.

Cách 2: Sử dụng thanh công cụ Block Inserter:

Bạn cũng có thể sử dụng công cụ chèn khối ở góc trên bên trái, được đánh dấu bằng nút “+” màu xanh. Tại đây, bạn có thể nhấp vào khối để thêm vào vị trí con trỏ hoặc kéo vào giữa các khối đã có trong trình soạn thảo.

Cách 3: Nhập ký tự “/”:

Một cách khác là gõ dấu “/” theo sau tên của khối. Khi tên khối xuất hiện, bạn nhấn Enter để thêm khối đó vào trang hoặc bài viết của mình.

Gutenberg hỗ trợ 6 loại khối để người dùng lựa chọn, bao gồm: văn bản, phương tiện, thiết kế, widget, chủ đề và nhúng. Nếu khối bạn cần không có sẵn, công cụ chèn khối sẽ gợi ý các khối từ thư mục Gutenberg – một phần trong kho plugin của WordPress.

#2. Cách tùy chỉnh khối

Tùy chỉnh các khối trong Gutenberg rất đơn giản. Bạn chỉ cần nhấp vào khối muốn chỉnh sửa và thanh công cụ của khối đó sẽ hiện lên phía trên. Thanh công cụ này thay đổi tùy vào loại khối bạn đang sử dụng. Ví dụ, khi làm việc với khối bảng, bạn sẽ thấy các tùy chọn để căn chỉnh văn bản hoặc thêm hàng và cột.

Ngoài ra, bạn cũng có thể truy cập thêm những cài đặt khác bằng cách click vào biểu tượng bánh răng ở góc trên bên phải. Lúc này, màn hình sẽ hiển thị bảng điều khiển ở thanh bên phải – tại đây, bạn có thể điều chỉnh kiểu dáng, kích thước và font chữ của khối. Nếu đã có kinh nghiệm sử dụng WordPress, bạn còn có thể thêm HTML hoặc CSS tùy chỉnh để thực hiện những thay đổi chuyên sâu hơn cho khối của mình.

#3. Cách sắp xếp các khối

Một trong những lợi ích lớn khi sử dụng Gutenberg là khả năng sắp xếp các phần tử dễ dàng. Để di chuyển một khối, bạn chỉ cần click vào khối đó, chọn biểu tượng 6 chấm trên thanh công cụ rồi kéo khối đến vị trí mong muốn.

Di chuyển nhiều khối cùng lúc: Bạn cũng có thể di chuyển nhiều khối cùng lúc bằng cách giữ phím Shift, nhấp vào khối đầu tiên và chọn các khối khác mà bạn muốn di chuyển. Khi các khối đã được chọn, bạn có thể kéo tất cả chúng cùng lúc đến vị trí mới bằng cách dùng biểu tượng sáu chấm.

#4. Cách nhóm nhiều khối

Nếu muốn tạo một mục chính là: “Dịch vụ” trên trang chủ, trong đó có các mục nhỏ bao gồm: hình ảnh, tiêu đề và mô tả, bạn cần phải nhóm các khối lại để dễ quản lý hơn.

Các bước nhóm nhiều khối như sau:

• Truy cập công cụ chèn khối (Block Inserter) -> Chọn phần Design -> Chọn một trong các khối như Group, Columns, Row hoặc Stack. Những khối này cho phép bạn tạo các khối lồng nhau, tức là các khối con được đặt bên trong một khối cha, giúp bố cục rõ ràng và dễ quản lý.
  

• Mở công cụ chèn khối -> Chọn Design -> Columns -> Chọn bố cục có sẵn hoặc tùy chỉnh và thêm khối con vào từng cột bằng cách click dấu + bên trong cột.
  

• Sử dụng thanh công cụ hoặc thanh bên để điều chỉnh bố cục và căn chỉnh các khối. Trong thanh bên, bạn có thể bật tùy chọn Inner blocks use content width để đảm bảo các khối con được căn chỉnh phù hợp với chiều rộng của khối cha, tạo ra thiết kế đồng nhất.
  

Khi nhóm các khối lại với nhau, bạn sẽ dễ dàng quản lý và điều chỉnh toàn bộ phần nội dung hiệu quả, chuyên nghiệp.

#5. Cách thêm tiêu đề và văn bản

Trong Gutenberg, bạn có thể thêm văn bản vào bài viết hoặc trang bằng cách sử dụng các khối Paragraph (Đoạn văn) và Heading (Tiêu đề).

Thêm đoạn văn (Paragraph):

• Cách 1: Bắt đầu gõ trực tiếp vào trình chỉnh sửa Gutenberg.
  
• Cách 2: Click vào công cụ chèn khối (block inserter) và chọn Paragraph.
  

Tùy chỉnh khối đoạn văn:

• Thanh công cụ: Cho phép căn chỉnh văn bản, in đậm, in nghiêng, chèn liên kết hoặc thêm các yếu tố đặc biệt, như chú thích, đánh dấu, hình ảnh nội dòng, chỉ số trên/dưới.
  
• Thanh bên: Có thể chỉnh màu văn bản, kiểu chữ và kích thước để làm nội dung nổi bật và chuyên nghiệp hơn.
  

Thêm tiêu đề (Heading):

• Sử dụng công cụ chèn khối và chọn Heading.
  
• Trong thanh công cụ, chọn cấp độ tiêu đề (từ H1 đến H6) phù hợp với cấu trúc nội dung.
  

Tùy chỉnh khối tiêu đề:

• Thanh công cụ: Điều chỉnh căn chỉnh, chiều rộng và các thuộc tính khác.
  
• Thanh bên: Thay đổi màu sắc, kiểu chữ và các tùy chọn thiết kế để làm tiêu đề nổi bật hơn.
  

Không chỉ giúp nội dung của bạn dễ đọc, sử dụng khối Paragraph và Heading còn làm tăng khả năng tối ưu hóa cho công cụ tìm kiếm (SEO).

#6. Cách thêm hình ảnh và phương tiện

Gutenberg cho phép bạn dễ dàng thêm các loại phương tiện như hình ảnh, video, âm thanh và tệp vào bài viết hoặc trang. Bên cạnh đó, trình chỉnh sửa này còn cung cấp các khối động giúp bạn sáng tạo hơn, bao gồm:

• Media & Text (Phương tiện truyền thông và văn bản): Kết hợp phương tiện và văn bản cạnh nhau để kể chuyện hiệu quả hơn.
  
• Image Gallery (Thư viện ảnh): Hiển thị nhiều hình ảnh trong một khu vực, lý tưởng cho các trang portfolio hoặc nhiếp ảnh.
  
• Cover (Bìa): Thêm văn bản chồng lên hình ảnh hoặc video, thích hợp để tạo tiêu đề bắt mắt hoặc làm nổi bật nội dung.
  

Hướng dẫn thêm hình ảnh và phương tiện:

• Mở công cụ chèn khối (block inserter) và chọn loại khối phù hợp như Image, Gallery hoặc Media & Text.
  
• Tải phương tiện lên:
  • Tải từ máy tính: Chọn Upload để tải tệp từ thiết bị của bạn.
    
  • Chọn từ thư viện: Chọn Media Library để sử dụng các tệp đã tải lên trước đó.
    
  • Thêm qua URL: Dán liên kết để chèn hình ảnh, video hoặc âm thanh từ nguồn bên ngoài.
    
• Đối với khối Gallery, bạn chỉ cần kéo và thả nhiều hình ảnh cùng lúc hoặc chọn từ Media Library để tiết kiệm thời gian.
  

• Tùy chỉnh khối:
  
• Khối Image:
  • Chỉnh sửa góc bo, viền và bán kính.
    
  • Thêm chú thích hoặc liên kết vào ảnh.
    
• Khối Media & Text:
  • Căn chỉnh vị trí, màu sắc và kiểu chữ.
    
  • Kích hoạt chế độ Mobile stacking để hiển thị đẹp trên thiết bị di động.
    

• Nếu cần chèn thêm hình ảnh: Vào trình chèn khối -> Chọn mục Media -> Openverse để khám phá thêm bộ sưu tập hình ảnh được nền tảng cấp phép.
  

#7. Cách tạo và sử dụng các mẫu

Các mẫu (Patterns), trước đây gọi là khối tái sử dụng (Reusable blocks), là các đoạn nội dung giúp bạn tiết kiệm thời gian và giữ thiết kế đồng nhất trên toàn bộ trang web.

Có 2 loại mẫu:

• Mẫu đồng bộ (Synced patterns): Là các khối nội dung liên kết với nhau trên toàn trang web. Khi bạn thay đổi một mẫu đồng bộ, mọi nơi sử dụng mẫu này sẽ tự động cập nhật. Khối này phù hợp để tạo các phần như banner, nút kêu gọi hành động hoặc header.
  
• Mẫu không đồng bộ (Unsynced patterns): Là các mẫu hoạt động độc lập. Khi thêm vào bài viết hoặc trang, bạn có thể chỉnh sửa mà không ảnh hưởng đến các phiên bản khác. Khối này được sử dụng khi bạn cần giữ nguyên thiết kế nhưng muốn nội dung tùy chỉnh theo từng trang.
  

Cách tạo mẫu:

• Click vào Document Overview -> List View -> Giữ phím Shift và chọn các phần nội dung cần lưu thành mẫu.
  

• Click vào nút Options trên thanh công cụ và chọn Create pattern -> Đặt tên cho mẫu và chọn kiểu mẫu: Synced (đồng bộ) hoặc Unsynced (không đồng bộ) -> Create để hoàn tất.
  

• Mở công cụ chèn khối (block inserter) -> Patterns -> My patterns hoặc nhập dấu gạch chéo /. Sau đó, bạn chỉ cần gõ tên mẫu vào trình chỉnh sửa.
  

Quản lý và chỉnh sửa mẫu:

• Click vào mẫu và chọn Edit original. Sau khi chỉnh sửa, bạn nhấn Save để lưu thay đổi.
  

• Click vào Options ở góc trên cùng bên phải -> Manage patterns. Tại đây, bạn có thể chỉnh sửa hoặc quản lý hàng loạt các mẫu mặc định và tùy chỉnh.
  

• Mở menu ba chấm trên thanh công cụ của khối và chọn Detach pattern. Khối sau khi tách sẽ không còn liên kết với các phiên bản khác trên trang web.
  

#8. Cách sử dụng phím tắt Gutenberg

Phím tắt trong Gutenberg giúp bạn làm việc nhanh hơn, tiết kiệm thời gian và tập trung tối đa vào việc tạo nội dung mà không cần phải click chuột quá nhiều. Đây là công cụ đắc lực để nâng cao hiệu suất làm việc. Dưới đây là bảng tổng hợp các phím tắt phổ biến khi sử dụng Gutenberg:

Đối với Windows:

• Enter = Thêm một khối mới
  
• Ctrl + Shift + D = Sao chép (các) khối đã chọn
  
• Alt + Shift + Z = Xóa (các) khối đã chọn
  
• Ctrl + Alt + T = Chèn một khối mới trước (các) khối đã chọn
  
• Ctrl + Alt + Y = Chèn một khối mới sau (các) khối đã chọn
  
• / = Thay đổi kiểu khối sau khi thêm một đoạn văn mới
  
• Esc = Xóa lựa chọn
  
• Ctrl + Shift + Z = Làm lại lần hoàn tác cuối cùng của bạn
  
• Ctrl + Shift +, = Hiển thị hoặc ẩn thanh cài đặt
  
• Alt + Shift + O = Mở menu điều hướng khối
  
• Alt + Shift + N = Điều hướng đến phần tiếp theo của trình chỉnh sửa
  
• Alt + Shift + P = Điều hướng đến phần trước của trình chỉnh sửa
  
• Alt + F10 = Điều hướng đến thanh công cụ gần nhất
  
• Ctrl + Shift + Alt + M = Chuyển đổi giữa Trình chỉnh sửa trực quan và Trình chỉnh sửa mã
  

Đối với Mac:

• Enter = Thêm một khối mới
  
• / = Thay đổi kiểu khối sau khi thêm một đoạn văn mới
  
• Command + Shift + d = Sao chép (các) khối đã chọn
  
• Control + Option + z = Xóa (các) khối đã chọn
  
• Command + Option + t = Chèn một khối mới trước (các) khối đã chọn
  
• Command + Option + y = Chèn một khối mới sau (các) khối đã chọn
  
• Esc = Xóa lựa chọn
  
• Command + Shift + z = Làm lại lần hoàn tác cuối cùng của bạn
  
• Command + Shift +, = Hiện hoặc ẩn thanh cài đặt
  
• Option + Control + o = Mở menu điều hướng khối
  
• Option + Control + n = Điều hướng đến phần tiếp theo của trình chỉnh sửa
  
• Option + Control + p = Điều hướng đến phần trước của trình chỉnh sửa
  
• Fn + Option + F10 = Điều hướng đến thanh công cụ gần nhất
  
• Command + Option + Shift + M = Chuyển đổi giữa Visual và Code Editor
  

Với Gutenberg, bạn sẽ cảm nhận được sự khác biệt trong cách làm việc với WordPress. Từ việc tạo nội dung dễ dàng cho đến việc thiết kế trang web linh hoạt và đẹp mắt, mọi thứ đều nằm trong tầm tay bạn. Đừng quên theo dõi Tino để đón đọc những bài viết hay và hữu ích khác liên quan đến WordPress bạn nhé!

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