Gutenberg là gì? Cách sử dụng Blocks Editor mới trên WordPress

Mắt Bão 27/12/2021 26 phút đọc

 

Gutenberg là gì?

Gutenberg là trình soạn thảo văn bản mới ở dạng khối của WordPress và trở thành Editor mặc định từ phiên bản WordPress 5.0. Nguồn gốc tên của Editor WordPress –  Gutenberg là gì? Tên Gutenberh được bắt nguồn bởi Johannes Gutenberg, “cha đẻ” của máy in di động hơn 500 năm trước. Cùng Mắt Bão tìm hiểu thêm các thông tin cũng như cách sử dụng cơ bản của Gutenberg nhé!

Hướng dẫn sử dụng Gutenberg – Block Editor từ A – Z
WordPress Gutenberg là gì?Gutenberg đang dần trở nên phổ biến không kém gì những trình soạn thảo văn bản khác
Gutenberg đang dần trở nên phổ biến không kém gì những trình soạn thảo văn bản khác

Tiến bộ hơn trình soạn thảo TinyMCE được sử dụng trước đó, Gutenberg cho người dùng nhiều trải nghiệm thú vị và phong phú hơn khi soạn thảo văn bản.

Trình soạn thảo GutenbergTrình soạn thảo Gutenberg
Trình soạn thảo Gutenberg

Cụ thể, nó không tạo ra các shortcodes và HTML mà tất cả được đơn giản hóa thành sử dụng một số công cụ có sẵn, rất phù hợp cho người mới bắt đầu sử dụng WordPress.

Gợi ý tìm hiểu thêm thông tin:

Ngoài ra, Gutenberg không chỉ là một giao diện được cập nhập mới mà nó còn nâng cấp trình xây dựng nội dung văn bản bằng cách tiếp cận dựa trên mô hình khối (block). 

Ưu điểm và nhược điểm của Gutenberg là gì?

Tương tự như bất kỳ trình soạn thảo nào, Gutenberg cũng có những ưu và khuyết điểm nhất định - WordPress Gutenberg là gì?
Tương tự như bất kỳ trình soạn thảo nào, Gutenberg cũng có những ưu và khuyết điểm nhất định

Ưu điểm của Blocks Editor WordPress – Gutenberg là gì?

Gutenberg là công cụ hữu ích cho mọi đối tượng từ người mới bắt đầu cho đến các lập trình viên chuyên nghiệp. Chúng bao gồm nhiều tính năng ưu việt, dễ dàng thao tác để có được hàng loạt văn bản bố cục đẹp mắt, có sức thu hút mạnh mẽ với người truy cập. Những tính năng này bao gồm: 

  • Gutenberg sở hữu khả năng tùy biến bố cục phong phú cho phép người dùng linh hoạt sáng tạo văn bản với nhiều bố cục khác nhau. 
  • Tuy là trình soạn thảo văn bản cách tân nhưng Gutenberg vẫn giữ lại nhiều tính năng cơ bản tương tự như blog Medium.com.
  • Gutenberg làm việc qua các blocks với nhiều công cụ tùy chọn căn chỉnh: tương thích với đa dạng các loại màn hình với kích thước lớn nhỏ khác nhau. 
  • Trình soạn thảo văn bản này có thể hoạt động tốt trên mobile.
  • Khả năng mở rộng các blocks mới thông qua các chủ đề và plugin hiệu quả, do đó, Gutenberg rất phù hợp cho các lập trình viên.
  • Các tính năng của Gutenberg được đơn giản hóa bằng cách thao tác với thanh công cụ.

Nhược điểm của Blocks Editor WordPress – Gutenberg là gì?

Tuy nhiên, bên cạnh những tính năng vượt trội, người dùng vẫn còn bối rối trước một vài khuyết điểm khiến họ gặp khó khăn khi sử dụng Gutenberg như:

  • Gutenberg chưa được hỗ trợ Markdown.
  • Tuy Gutenberg khá phong phú về các dạng blocks nhưng dường như một phần trong số chúng vẫn chưa thực sự dễ dàng để sử dụng.
  • Các nhà phát triển vẫn còn lo ngại về việc hỗ trợ meta boxes của Gutenberg.
  • Không hỗ trợ bố cục cột responsive, tuy nhiên tính năng này đang beta để sẵn sàng.
  • Chưa tích hợp với các plugin và giao diện cũ nên người dùng tạm sử dụng trình soạn thảo cũ.
  • Việc hỗ trợ accessibility cho những người khuyết tật có thể gây khó khăn cho người sử dụng bình thường. 

Cách cài đặt Blocks Editor Gutenberg

WordPress Gutenberg là gì? Cách cài đặt Gutenberg tương tự như các trình soạn thảo cũ
Cách cài đặt Gutenberg tương tự như các trình soạn thảo cũ

Mặc dù có một số hạn chế nhưng các tính năng hấp dẫn của trình soạn thảo Gutenberg luôn được tin cậy cài đặt và sử dụng. Đây là trình soạn thảo WordPress mặc định từ phiên bản 5.0, tuy nhiên vẫn có thể cài đặt như thao tác cài đặt plugins thông thường trong thư viện WordPress. Bạn có thể tìm hiểu thêm về cách cài đặt Plugin trong bài viết:

Hoặc bạn có thể Download Plugin Gutenberg trực tiếp.

Lời khuyên từ Mắt Bão:

Gutenberg là Editor mặc định từ WordPress 5.0 trở đi. Bạn vẫn chưa thấy trình soạn thảo này khi soạn bài viết mới? Hãy cập nhật ngay phiên bản mới nhất WordPress của bạn. Nếu đang thuê Hosting WordPress hay Managed WordPress Hosting, hãy liên hệ với nhà cung cấp đảm bảo rằng WordPress trên website của bạn luôn được cập nhật.

WordPress Editor – Gutenberg hoạt động như thế nào?

WordPress Gutenberg là gì? Trình soạn thảo Gutenberg hoạt động dưới dạng các blocks riêng lẻ
Trình soạn thảo Gutenberg hoạt động dưới dạng các blocks riêng lẻ

Về cơ bản, sự xuất hiện của Gutenberg là sự thay thế trình soạn thảo mặc định WordPress TinyMCE. Chúng hoạt động bằng nhiều blocks riêng lẻ, các blocks này cho phép người dùng thiết kế phức tạp hơn trong trình chỉnh sửa cũ. Đặc biệt, bạn có thể tạo thêm block mới có thể dễ dàng truy cập thông qua các plugin để được linh hoạt hơn. 

Bên cạnh đó, vì mỗi block đều có thể tùy chỉnh riêng lẻ nên qua các thao tác cụ thể, bạn có thể kiểm soát sâu hơn với từng mục nội dung được trình bày trong văn bản. 

Bố cục giao diện của Blocks Editor WordPress – Gutenberg

WordPress Gutenberg là gì? Giao diện thân thiện của Gutenberg
Giao diện thân thiện của Gutenberg

Các điểm cần lưu ý trong giao diện Editor Gutenberg là gì? Giao diện Gutenberg khá đơn giản: xoay quanh các blocks được sử dụng để tạo nội dung bài viết trên mỗi trang. Các thao tác sử dụng các block này cũng rất tiện lợi và dễ dàng, phù hợp với nhiều người dùng. Theo đó, bạn chỉ cần kéo thả block để đạt được mục đích trình bày thay vì sử dụng các code hay HTML cầu kỳ và phức tạp khác.

Hướng dẫn xây dựng nội dung với các khối Blocks
WordPress Gutenberg là gì?  Giao diện soạn thảo cơ bản của Gutenberg
Giao diện soạn thảo cơ bản của Gutenberg

Cụ thể như sau:

  • Khu vực (A): Thêm Blocks mới
  • Khu vực (B): Undo, Re-undo
  • Khu vực (C): Thông tin bài viết
  • Khu vực (D): Chỉnh sửa khối
  • Khu vực (E): Công bố, nháp
  • Khu vực (F): Khu vực soạn thảo

Bố cục cơ bản của Gutenberg là các blocks được sắp xếp độc lập và chia ra làm bốn nhóm chính gồm:

  • Common Blocks: các khối nội dung thông dụng được dùng phổ biến nhất.
  • Formatting Blocks: các khối có chức năng Formatting.
  • Layout Blocks: các khối có liên quan đến tạo bố cục văn bản.
  • Widgets: các khối tạo tiện ích. 

Tính năng bổ sung của Gutenberg là gì?

WordPress Gutenberg là gì? Gutenberg có nhiều tính năng bổ sung khác bên cạnh các chức năng cơ bản 
Gutenberg có nhiều tính năng bổ sung khác bên cạnh các chức năng cơ bản

Sau khi đã thành thạo các thao tác sử dụng Gutenberg, để có những trải nghiệm thú vị và sáng tạo ra nhiều văn bảo độc đáo hơn, bạn có thể tham khảo thêm những tính năng bổ sung sau đây: 

Mục lục

WordPress Gutenberg là gì? Mục lục

Giờ đây bạn có thể chọn và di chuyển tới phần heading thật dễ dàng. Gutenberg sẽ xác định tất cả các blocks heading (<h1>,<h2>,…) trong bài viết và hiển thị một mục lục ở sidebar để liệt kê tất cả. Nó thật sự rất hữu ích cho những người dùng điện thoại và soạn lập các văn bản dài mà không tốn nhiều thời gian cuộn trang.

Anchors

WordPress Gutenberg là gì?

Anchors là một kiểu gắn tag cho bài viết, người truy cập web sẽ đến được với nội dung khi tìm kiếm bằng các Anchors Tag này. Để sử dụng nó, khi chọn một heading trong block, bạn hãy gõ tag và chọn “Copy Link” trong HTML Anchor để lấy liên kết. Bạn có thể đặt các heading và gán các tag anchors cho các heading này.

Các kiểu CSS bổ sung

WordPress Gutenberg là gì?

Bạn có thể tùy chỉnh/biến đổi style của các block qua các đoạn CSS bổ sung. Trong phần “Additional CSS Class”, bạn phải nhập và các CSS Class để thay đổi style cho các blocks của mình. Tại đây, người dùng có thể ghi đè hoặc thay đổi block thành các kiểu dáng mặc định sẵn có trong Gutenberg.

WordPress Gutenberg là gì?

Gallery là công cụ giúp người dùng thêm hình ảnh vào bài đăng và lưu trữ chúng trong một thư viện hình feedback. Để tải ảnh từ máy lên, Gallery sẽ hiển thị cho bạn một liên kết hoặc, người dùng có thể chọn từ tài nguyên có sẵn trong Media của WordPress. 

Bên cạnh đó, tính năng “crop images” sẽ giúp bạn điều chỉnh kích thước hình ảnh về cùng một kiểu trước khi tải lên.

Cover Image/Hero Image

WordPress Gutenberg là gì?

Cover images (hero images) là phần ảnh đại diện lớn ở đầu văn bản. Đây là một trong những yếu tố được chú ý nhất ở nhiều văn bản điện tử. Để thêm Cover images, Gutenberg hiển thị hình ảnh dưới dạng hộp (nhiều tấm ảnh tập trung lại) theo chiều ngang hoặc dọc, tuỳ kích thước màn ảnh.

Pull Quotes & Block Quotes

WordPress Gutenberg là gì?

Pull quote là một đoạn văn hấp dẫn nhất được trích ra từ bài viết, có nhiệm vụ thu hút người đọc.

WordPress Gutenberg là gì?

Với Block quotes, bạn có thể tuỳ chỉnh định dạng cho đoạn trích này bằng cách nhấp vào nút “Quote Style” trên thanh công cụ.

Tùy chỉnh HTML

WordPress Gutenberg là gì?

Bạn muốn thêm các đoạn mã HTML vào block? Hãy sử dụng block HTML! Sau khi thêm vào các đoạn mã HTML, bạn vẫn có thể di chuyển nó đi như những block khác. Tùy chỉnh cũng có một tính năng hết sức thú vị là tab Preview – khi click vào đây, bạn có thể xem xét văn bản trước khi nó được xuất bản.

Classic Text

WordPress Gutenberg là gì?

Block classic text hiển thị toàn bộ các công cụ tuỳ chỉnh cơ bản của TinyMCE, điểm khác duy nhất là xuất hiện thêm mục Additional CSS Class. Tuy nhiên, người dùng vẫn phải di chuyển và xóa block bằng công cụ của Gutenberg. Các tuỳ chỉnh này sẽ trở về dạng HTML khi bạn quay lại giao diện soạn thảo văn bản.

Verse

WordPress Gutenberg là gì?

Với những đoạn thơ hoặc đoạn văn, bạn có thể tùy chỉnh bố cục với Verse block. Nhiệm vụ của nó là ngắt dòng một cách chính xác và thiết lập khoảng cách giữa các ký tự sao cho phù hợp. Ngoài ra, Verse block cũng căn chỉnh một lề nhỏ ở bên trái của văn bản.

Text Columns

WordPress Gutenberg là gì?

Để thêm các block nội tuyến, người dùng phải sử dụng Text Columns. Những khối văn bản được thêm vào này sẽ được viết bằng HTML hoặc CSS qua trình soạn thảo văn bản có sẵn hoặc HTML block.

Buttons

WordPress Gutenberg là gì?

Bạn có thể dễ dàng thêm các nút bấm với nhiều kiểu khác nhau cũng như định dạng nó với các kiểu text mong muốn cũng như đổi màu nền. Tuy nhiên ở hiện tại, người dùng không thể thay đổi màu chữ từ màu trắng nhưng công cụ “Additional CSS Class” sẽ hỗ trợ bạn định nghĩ lại màu sắc bằng CSS style.

Widgets

Gutenberg Widgets bao gồm 3 loại rất đáng giá thuộc latest posts ( bài viết mới nhất). Tuy nhiên, mọi category và tùy chỉnh shortcodes đều không khả dụng với các block Gutenberg.

Latest Posts

WordPress Gutenberg là gì?

Có hai hình thức để lựa chọn hiển thị danh sách Latest Posts – các bài viết mới nhất là: List View (dạng list cơ bản) và Grid View (dạng dưới). Nếu chọn cách bố trí theo dạng lưới, bạn có thể tuỳ chỉnh số cột để hiển thị bài viết. Và đừng quên, hãy chọn xem ngày xuất bản để tiêu đề bài viết được hiển thị với thời gian xuất bản nhé. Việc này sẽ khiến người truy cập dễ dàng chọn xem nội dung hơn.

Categories

WordPress Gutenberg là gì?

Với Categories, bạn có thể tuỳ chỉnh danh sách các mục theo kiểu list thông thường hoặc danh sách cuộn. 

Shortcode

Gutenberg đã bổ sung chức năng thêm Shortcode cho người dùng. Giờ đây, bạn chỉ cần nhập Shortcode để Gutenberg hiển thị kết quả.

Cách sử dụng Editor Gutenberg trên WordPress

WordPress Gutenberg là gì? Bạn sẽ có trải nghiệm soạn thảo rất thú vị với tính năng Visual Editor và Text Editor của Gutenberg
Bạn sẽ có trải nghiệm soạn thảo rất thú vị với tính năng Visual Editor và Text Editor của Gutenberg

Sau khi đã nắm bắt được thông tin “Gutenberg là gì?“. cùng đến cách sử dụng nhé! Khi mới bắt đầu dùng Blocks Editor WordPressGutenberg, chắc chắn người dùng sẽ gặp khó khăn hơn so với giao diện mặc định cũ TinyMCE. Theo đó, thay vì tất cả các thanh công cụ gần như chiếm hết diện tích phần mềm, người dùng cần phải thao tác kéo lên xuống thì với trình soạn thảo Gutenberg, các thiết lập meta và blocks đã được ẩn bớt, chỉ xuất hiện khi bạn click vào nút “Thiết lập”. 

Để người dùng nắm rõ hơn về cách sử dụng của trình soạn thảo này, sau đây là một vài thao tác sử dụng Gutenberg cụ thể:

  • Thêm Blocks mới
  • Thêm các khối phi văn bản
  • Tạo các cột khác nhau
  • Cách tùy chỉnh các khối riêng lẻ
  • Cách sắp xếp lại các khối riêng lẻ
  • Visual Editor và Text Editor

Hãy cùng tìm hiểu chi tiết!

Thêm Blocks mới

WordPress Gutenberg là gì? Cách thêm khối mới
Cách thêm khối mới

Để thêm một block mới hoặc nội dung khác, bạn phải click chọn biểu tượng “+” bên dưới tất cả các blocks đã được tạo hoặc nhấn vào nút “Chèn” ở phần trên của mỗi trang. Ngoài ra, trên menu điều hướng còn có các trang:

  • Recents: Nhấp vào nút “+” hoặc nút “Chèn”, màn hình sẽ hiển thị danh sách 8 tác vụ gần nhất được sử dụng trong blocks và nội dung.
  • Blocks: Đây là danh sách các blocks được chia thành bốn headings chính gồm Common Blocks, Formatting, Layout, Widgets.
  • Embeds: Ở đây, bạn có thể thêm nội dung từ các trang web phổ biến hoặc chỉ cần nhập URL thì trình biên tập sẽ tự động phát hiện và thêm vào. 

Thêm các khối phi văn bản

Sau khi nội dung được chia thành các khối cụ thể, bạn có thể chèn các khối phi văn bản như hình ảnh bằng cách nhấp hai lần vào nút “+”.

Cách thêm blocks hình ảnh
Cách thêm block hình ảnh
Cách thêm khối trích dẫn Quotes
Cách thêm khối trích dẫn Quotes
Cách thêm khối Embed để nhúng video từ Youtube
Cách thêm khối Embed để nhúng video từ Youtube

Tạo các cột khác nhau

Bạn có thể tạo nhiều cột bằng cách thêm khối “Cột” từ phần “Bố cục phần tử”, sau đó chèn thêm các khối khác.

Cách tạo cột các khối khác nhau
Cách tạo cột các khối khác nhau

Cách tùy chỉnh các khối riêng lẻ

Trên nội dung, các khối hoàn toàn riêng lẻ, để tạo kiểu và căn chỉnh văn bản cơ bản, bạn chỉ cần di chuột qua một khối và sử dụng công cụ xuất hiện trên thanh menu.

WordPress Gutenberg là gì? Cách canh lề cho khối Blocks
Cách canh lề cho khối Blocks
WordPress Gutenberg là gì? Cách đổi màu cho khối Blocks
Cách đổi màu cho khối Blocks

Cách sắp xếp lại các khối riêng lẻ

Cách sắp xếp lại các khối riêng lẻ
Cách sắp xếp lại các khối riêng lẻ

Để sắp xếp lại các khối riêng lẻ, hãy sử dụng mũi tên lên hoặc xuống khi di chuột qua khối theo hướng tương ứng, hoặc kéo – thả khối. 

Visual Editor và Text Editor

Visual Editor và Text Editor
Visual Editor và Text Editor

Visual Editor có thanh công cụ hiển thị các tính năng liên quan tới khối được chọn. Khi chuyển qua công cụ Text Editor, màn hình sẽ hiển thị các cách tạo ra hiệu ứng cho nội dung.

Thủ thuật giúp tối ưu Blocks Editor – Gutenberg

Các thủ thuật giúp người dùng tối ưu hóa Blocks Editor - Gutenberg là gì?
Các thủ thuật giúp người dùng tối ưu hóa Blocks Editor – Gutenberg là gì?

Ý nghĩa của việc tối ưu Editor Gutenberg là gì? Trước sự thay đổi lớn của Editor mặc định trên WordPress, người dùng gặp khá nhiều khó khăn và mất thời gian. Chính vì vậy cần tối ưu những thao tác của bạn khi sử dụng Gutenberg để tiết kiệm thời gian. Sau đây là một số giải pháp tối ưu cho bạn:

  • Tạo nhanh một khối mới bằng cách gõ
  • Kích hoạt chế độ toàn màn hình Editor
  • Tạo các khối mẫu để tái sử dụng
  • Chỉnh sửa mã nguồn trực tiếp
  • Sử dụng phím tắt Gutenberg để tiết kiệm thời gian
  • Mở rộng trình chỉnh sửa khối bằng các plugin
  • Cách chuyển đổi nội dung cũ thành Blocks

Hãy cùng Mắt Bão tìm hiểu chi tiết!

Tạo nhanh một khối mới bằng cách gõ

WordPress Gutenberg là gì? Tạo nhanh một khối mới bằng cách gõ
Tạo nhanh một khối mới bằng cách gõ

Đây là một cách nhằm giúp bạn tiết kiệm thời gian hơn cho bạn. Theo đó, một hộp gợi ý tự động sẽ xuất hiện để giúp người dùng tìm block liên quan. Bạn chỉ việc gõ vào đó block mình cần tìm, Gutenberg sẽ giúp bạn tìm khối nội dung đó.

Kích hoạt chế độ toàn màn hình Editor

WordPress Gutenberg là gì?

Với Gutenberg, bạn có thể chọn nhiều chế độ chỉnh sửa khác nhau. Ví dụ như:

  • Thêm thanh công cụ cố định như TinyMCE
  • Toàn màn hình
  • Đặt một bài nổi bật trên khối hoạt động

Để sử dụng các tiện ích này, nhấp vào  biểu tượng ba chấm ở góc trên bên phải.

Tạo các khối mẫu để tái sử dụng

WordPress Gutenberg là gì? Tạo các khối mẫu để tái sử dụng
Tạo các khối mẫu để tái sử dụng

Với Gutenberg, ngoài soạn thảo, bạn còn có thể tạo khối mẫu để tái sử dụng. Sau đó bạn chỉ việc chèn nó như các khối thông thường.

Chỉnh sửa mã nguồn trực tiếp

Tại bất kỳ thời điểm nào, bạn có thể chỉnh sửa mã nguồn của toàn bộ bài đăng bằng cách nhấp vào ba dấu chấm ở góc trên bên phải và chọn “Code editor”. 

Sử dụng phím tắt Gutenberg để tiết kiệm thời gian

WordPress Gutenberg là gì?
Sử dụng phím tắt Gutenberg để tiết kiệm thời gian

Ngoài các phím tắt định dạng tiêu chuẩn, trình chỉnh sửa block có một số phím tắt chuyên dụng giúp bạn:

  • Chèn các block mới bên trên hoặc bên dưới block đã chọn.
  • Xóa một block.
  • Nhân đôi một block.

Để mở danh sách đầy đủ các phím tắt, hãy sử dụng tổ hợp phím Shift + Alt + H.

Mở rộng trình chỉnh sửa khối bằng các plugin

Otter Blocks là một lựa chọn tốt để giúp bạn bắt đầu chỉnh sửa các khối nội dung. Nó cung cấp cho bạn các block bổ sung yếu tố giá cả, Google Maps, biểu tượng chia sẻ, nhấp chuột vào nút tweet,… và nhiều hơn thế nữa.

Cách chuyển đổi nội dung cũ thành Blocks

WordPress Gutenberg là gì? Chuyển đổi từ khối cũ TinyMCE sang blocks
Chuyển đổi từ khối cũ TinyMCE sang blocks

Giờ đây bạn không cần lo lắng nội dung cũ của mình biến mất nữa. Hãy để nó trong khối Classic và chỉnh sửa giống như bạn làm với trình soạn thảo cũ của WordPress – sử dụng biểu tượng dấu ba chấm và chọn “convert to block”. Nó sẽ phá vỡ nội dung thành các khối riêng lẻ để sau đó, bạn có thể sắp xếp lại. 

Đánh giá trình soạn thảo Gutenberg trên Desktop và Mobile

Gutenberg hoạt động tốt trên cả nền tảng Desktop và Mobile
Gutenberg hoạt động tốt trên cả nền tảng Desktop và Mobile

Với Desktop, những trình soạn thảo bình thường chạy rất “mượt”, kể cả với Gutenberg. Theo phản hồi từ những người đang sử dụng, họ không nhận thấy sự chậm trễ nào từ nó trong quá trình soạn văn bản hay tuỳ chỉnh – thêm, xoá các block. 

Mặt khác, dù không tập trung phát triển trên mobile nhưng theo thử nghiệm, Gutenberg vẫn cho trải nghiệm phản hồi nhanh, dù là với một nội dung khá nặng. Các chức năng xóa block hay đổi màu font chữ vẫn diễn ra suôn sẻ và nhanh chóng trên nền tảng di động. Mặc dù còn vài khuyết điểm nhưng đội ngũ phát hành Gutenberg tin rằng, trình soạn thảo này sẽ rất phát triển trên thiết bị di động.

Trên đây là toàn bộ những thông tin về trình soạn thảo văn bản Gutenberg của WordPress. Hy vọng bạn đã có cái nhìn khái quát về công cụ này và có thể cài đặt sử dụng chúng một cách thuận lợi. 






Bài viết liên quan