Gutenberg là gì? Hướng dẫn dùng Block Editor

Gutenberg là trình chỉnh sửa tích hợp trong WordPress mà mọi blogger hoặc chuyên gia trang web chắc chắn đều biết. Bài viết dưới đây IMO sẽ hướng dẫn bạn sử dụng Blocks Editor trong WordPress. Để làm theo!

Gutenberg là gì?

Gutenberg – Blocks Editor là trình soạn thảo văn bản khối WordPress, là trình chỉnh sửa mặc định của WordPress kể từ bản cập nhật WordPress 5.0.

Cái tên Gutenberg xuất phát từ Johannes Gutenberg, người đã tạo ra máy in di động hơn 500 năm trước.

Sử dụng công cụ này dễ dàng và nâng cao hơn một chút so với TinyMCE – Classic Editor (phiên bản trước). Người dùng có thể trải nghiệm nhiều công cụ tiêu chuẩn để chỉnh sửa và định dạng văn bản.

Với phiên bản mới, trình chỉnh sửa WordPress được đơn giản hóa, cho phép người dùng sử dụng các công cụ hiện có thay vì tạo HTML và mã ngắn. Điều này phù hợp với những ai mới làm quen với nền tảng website WordPress.

Ngoài ra, Gutenberg không chỉ là một bản nâng cấp giao diện thông thường. Phiên bản này đã cải tiến rất nhiều về trình xây dựng, trình soạn thảo văn bản nhờ tiếp cận mô hình khối – block.

Thiết Kế Website - Thiết kế web chuẩn SEO không chỉ đẹp mắt mà còn mang về nhiều lượt truy cập, nhiều đơn hàng. Và điều quan trọng nhất hiện nay là khi thiết kế website bắt buộc phải chuẩn SEO với Google. Giúp website thân thiện với Google và nhanh lên TOP hơn so với 1 website thông thường. Với đội ngũ thiết kế web luôn chăm chút từ nội dung, chức năng đến cả cách thức vận hành.

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

Nó là một trong những trình soạn thảo WordPress phổ biến nhất hiện nay. Vậy tại sao Gutenberg lại được sử dụng nhiều như vậy? Có lợi ích và hạn chế nào nổi bật không? Hãy cùng IMO tìm hiểu dưới đây.

Ưu điểm của trình soạn thảo Gutenberg

Nhìn chung, Gutenberg là một công cụ rất hữu ích cho những người làm việc trên nền tảng web. Bên cạnh đó, nó cũng tối ưu hóa nhiều yếu tố để người mới dễ dàng xử lý hơn.

Dưới đây là 6 tính năng phổ biến của Block Editor WordPress:

1. Hỗ trợ nhiều định dạng bố cục khác nhau, người dùng dễ dàng tạo hình thức văn bản.
2. Mặc dù là một công cụ cải tiến, trình chỉnh sửa này vẫn giữ lại các chức năng cơ bản để giúp người dùng mới bắt kịp tốc độ một cách nhanh chóng.
3. Gutenberg hoạt động trên các khối với nhiều công cụ cho các tùy chọn căn chỉnh: tương thích với hầu hết các loại và kích cỡ màn hình.
4. Người dùng có thể sử dụng thiết bị di động (điện thoại, máy tính bảng,…) để chỉnh sửa tại đây.
5. Trình chỉnh sửa khối WordPress có khả năng thêm nhiều khối hơn thông qua các plugin và chủ đề – phù hợp cho các nhà phát triển.
6. Đơn giản hóa giao diện chính bằng cách tích hợp chức năng vào thanh công cụ.

Nhược điểm của trình soạn thảo Gutenberg

Mặc dù phổ biến theo nhiều cách, các công cụ chỉnh sửa và định dạng nội dung mặc định của WordPress vẫn có một số hạn chế, bao gồm:

• Gutenberg hiện không hỗ trợ ngôn ngữ kịch bản Markdown.
• Một số block vẫn bộc lộ điểm yếu là chưa thực sự tối ưu và còn khá khó khăn cho người dùng.
• Hộp meta Gutenberg luôn được các nhà phát triển quan tâm.
• Bố cục cột đáp ứng chưa được tích hợp (hiện có bản beta).
• Người dùng vẫn nên sử dụng trình soạn thảo văn bản cũ vì giao diện và plugin trước đó chưa được tích hợp.
• Tính năng trợ năng (đặc biệt dành cho người khuyết tật) có thể gây khó khăn cho người dùng bình thường.

Cho đến nay, nhiều người dùng WordPress vẫn quen sử dụng plugin Classic Editor để hỗ trợ chuyển về trình soạn thảo cũ. Tuy nhiên, những nhược điểm trên của Gutenberg đã dần được khắc phục cùng với việc bổ sung thêm nhiều tính năng cao cấp hơn. Để giúp các bạn hiểu rõ hơn về trình soạn thảo này, IMO sẽ hướng dẫn chi tiết cách cài đặt và sử dụng tại đây.

Làm sao để cài đặt Gutenberg trên WordPress?

Mặc dù có một số hạn chế nhưng các tính năng chính của trình soạn thảo Gutenberg vẫn được một lượng lớn người dùng cài đặt và sử dụng. Như đã nêu ở trên, đây là trình chỉnh sửa mặc định của WordPress kể từ bản cập nhật 5.0. Bạn chỉ cần cài đặt WordPress là có thể sử dụng Gutenberg bình thường.

Blocks Editor WordPress – Gutenberg có bố cục giao diện như nào?

Về cơ bản, giao diện của Gutenberg được coi là đơn giản hóa và chỉ xoay quanh các khối hỗ trợ tạo văn bản cho trang. Hầu hết các thao tác đều đơn giản, chỉ cần kéo và thả khối tương ứng để định dạng.

Do đó, mọi thao tác của người dùng đều được tối ưu hóa cực tốt, hạn chế tối đa các bước thừa. Trong các phiên bản khác, bạn có thể phải sử dụng HTML hoặc kịch bản và rất nhiều điều phức tạp.

Bố cục trong giao diện Blocks Editor WordPress:

• Thêm khối mới: ở góc trên bên trái (dấu cộng).
• Undo/Re-undo: ở góc trên bên trái màn hình.
• Thông tin mục: Hộp tài liệu, khu vực phía trên bên phải.
• Chỉnh sửa khối: khu vực Khối, bên cạnh khu vực Tài liệu.
• Xuất bản, soạn thảo: khu vực phía trên bên phải (biểu tượng con mắt và danh sách thả xuống).
• Vùng soạn thảo văn bản: Khoảng trống ở giữa màn hình.

Nhìn rộng ra, Gutenberg sẽ được phân loại thành 4 nhóm chính, bao gồm:

Common Blocks: Chứa các khối nội dung được sử dụng phổ biến nhất.

Formatting Blocks: Bao gồm các khối chứa chức năng định dạng văn bản.

Layout Blocks: Bao gồm các khối tác vụ định dạng bố cục văn bản.

Widgets: Bao gồm các khối tiện ích khác.

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

Sau khi giao diện trình chỉnh sửa của bạn được cập nhật, bạn có thể bắt đầu sử dụng giao diện mới và các tính năng mới. Đối với phiên bản mới sẽ có một chút khác biệt, bạn phải cài đặt meta cũng như các khối thông qua hộp thoại Cài đặt. Sau đây là hướng dẫn cụ thể 6 thao tác cơ bản trên Block Editor WordPress:

Đầu tiên, để tạo bài viết mới, trong giao diện bảng điều khiển của WordPress, bạn vào Bài viết > Soạn bài mới để tạo bài viết và vào giao diện trình chỉnh sửa khối.

Thêm Blocks mới

Để thêm nội dung hoặc tạo các khối mới, chỉ cần nhấp vào biểu tượng “+” ở cuối các khối đã tạo trước đó.

Bạn cũng có thể nhấp và hộp Chèn ở đầu mỗi trang. Ngoài ra menu điều hướng còn hiển thị thêm 3 trang:

• Recents: Bạn có thể làm tương tự như thêm nội dung mới hoặc khối mới. Lúc này hệ thống sẽ hiện ra 8 tác vụ vừa sử dụng.
• Blocks: Danh mục này cung cấp cho bạn thông tin về 4 nhóm tiện ích, định dạng, bố cục, các khối chung.
• Embeds: Tại đây bạn có thể đưa nội dung từ các trang web hàng đầu vào bài viết của mình (hoặc chỉ cần cung cấp URL và biên tập viên sẽ tổng hợp và thực hiện thêm thông tin).

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

Khi bạn đã tạo nội dung văn bản và chia nó thành các khối riêng biệt trong Gutenberg, bạn có thể chèn các khối phi văn bản. Để thực hiện việc này, hãy chọn khối và nhấp đúp vào biểu tượng “+”, sau đó chọn Hình ảnh, Video, Trích dẫn Quotes.

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

Để thêm khối Cột vào bài viết, bạn chú ý đến phần Sắp xếp thành phần rồi chèn thêm các khối khác.

Tạo các khối khác nhau

Trong phần thân, tất cả các khối được định dạng riêng lẻ. Nếu muốn tạo kiểu và căn lề cho văn bản, hãy di chuột vào khối muốn chỉnh sửa, sau đó sử dụng các công cụ trên thanh hiện ra.

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

Bố cục của các khối riêng lẻ có thể được thực hiện theo hai cách:

Cách 1: khi rê chuột vào các khối sẽ xuất hiện mũi tên theo 2 hướng (lên – xuống). Bạn có thể sử dụng chức năng này để định vị lại các khối.

Cách 2: Bạn sử dụng thao tác kéo thả khối đến vị trí mong muốn.

Visual Editor và Text Editor

Với Visual Editor – Chế độ trực quan, nó sẽ cung cấp cho người dùng một thanh công cụ với chức năng tiêu chuẩn liên quan đến các khối mà bạn đã chọn. Hơn nữa, bạn có thể thêm hiệu ứng vào nội dung nâng cao nếu bạn có kiến ​​thức viết mã bằng cách chuyển sang chế độ soạn thảo văn bản – chỉnh sửa mã.

Cách thức hoạt động của WordPress Editor – Gutenberg

Block Editor WordPress là sự thay thế vượt trội của trình chỉnh sửa TinyMCE cũ. Nó hoạt động dựa trên một loạt các khối riêng biệt, cho phép bạn thiết kế các giao diện chuyên nghiệp và phức tạp hơn.

Hơn nữa, bạn có quyền tạo các khối mới và dễ dàng truy cập chúng từ các plugin giúp nó linh hoạt. Vì mỗi khối có thể tùy chỉnh riêng với các thao tác rõ ràng nên bạn có thể quản lý chi tiết hơn từng mục nội dung văn bản.

Các tính năng được bổ sung của Gutenberg là gì?

So với phiên bản cải tiến của trình soạn thảo văn bản Wordpress IMO, chúng tôi sẽ trình bày chi tiết từng tính năng mới trên Gutenberg:

Mục lục

Trong phần mục lục (Table of content) bạn sẽ liệt kê tất cả các khối tiêu đề (H1, H2, H3,…). Và nó được hiển thị dưới dạng sidebar giúp bạn dễ dàng điều hướng bằng một cú nhấp chuột và tránh lãng phí thời gian cuộn trang.

Tuy nhiên, đối với tính năng này, các plugin mục lục WordPress khác làm tốt hơn.

Anchors HTML

Anchors được hiểu đơn giản là việc đánh dấu các thông điệp cụ thể. Mọi người có thể tìm thấy nội dung trang web của bạn thông qua thẻ neo.

Để sử dụng tính năng này, bạn vào phần HTML Anchor và nhập một thẻ (khoảng cách giữa các từ thay bằng dấu “-“), sau đó bạn đánh dấu vào ô Copy link để lấy link. Ngoài ra, bạn có thể chọn tiêu đề và gắn thẻ cho tiêu đề đó.

Các kiểu CSS bổ sung

CSS bổ sung cho phép bạn tùy chỉnh và thay đổi kiểu khối. Trong phần Lớp CSS bổ sung, bạn cần nhập các lớp CSS để tùy chỉnh các khối của mình. Người dùng sẽ được phép ghi đè hoặc thay đổi định dạng của khối bằng cách sử dụng các lựa chọn của Gutenberg.

Gallery

Thư viện chỉ đơn giản là một công cụ giúp người dùng thêm hình ảnh vào bài viết và lưu trữ trực tiếp trong thư viện bình luận hình ảnh. Bạn sẽ nhận được một liên kết để tải lên một hình ảnh từ thiết bị hoặc người dùng chọn một hình ảnh có sẵn trong WordPress.

Bên cạnh đó, bạn cũng có thể điều chỉnh kích thước ảnh theo ý muốn thông qua công cụ được hỗ trợ mặc định là Crop Images.

Cover Image/Hero Image

Nói một cách đơn giản, đây là hình ảnh đại diện của mỗi mục. Có thể nói, ảnh bìa chính là điểm thu hút người đọc tài liệu điện tử của bạn.

Hình ảnh sẽ được trình chỉnh sửa khối WordPress hiển thị dưới dạng hộp ở định dạng dọc hoặc ngang. Phần lớn sẽ phụ thuộc vào kích thước màn hình của thiết bị và Gutenberg sẽ là tối ưu.

Pull Quotes & Block Quotes

Pulled quotes có thể hiểu là đoạn văn hấp dẫn, có thể là nội dung của bài viết. Mục đích của nó là lôi kéo người xem click vào các bài viết trên website của bạn.

Người dùng có thể tùy chỉnh định dạng của Pull Quotes snippets thông qua Block Quotes. Để thực hiện việc này, hãy nhấp vào hộp Kiểu trích dẫn ở phía bên phải của thanh công cụ.

Tùy chỉnh HTML

Nếu bạn muốn thêm các đoạn mã HTML vào khối, bạn có thể sử dụng tính năng khối HTML. Khi bạn đã hoàn tất việc thêm mã HTML, bạn vẫn được phép di chuyển nó xung quanh giống như các khối khác.

Bên cạnh đó, tab Preview cũng được coi là một tính năng tuyệt vời trong phần này. Bạn có thể bấm vào nó để đọc văn bản trước khi đăng nó trực tiếp trên trang web của bạn.

Classic Text

Tại Classic Text, bạn có thể tìm thấy tất cả các công cụ có trong phiên bản TinyMCE. Nhìn chung, bản cập nhật mới nhất có lẽ chỉ là bổ sung thêm phần Additional CSS Class.

Tuy nhiên, nếu người dùng muốn loại bỏ các khối hoặc di chuyển chúng xung quanh, họ vẫn cần công cụ tích hợp sẵn trong Gutenberg. Khi bạn quay lại trình soạn thảo văn bản, các tùy chỉnh sẽ trở về định dạng HTML.

Verse

Khối câu giúp bạn chuyển đổi bố cục cục bộ cho loại văn bản là đoạn văn hoặc đoạn văn. CHỨC NĂNG của nó ngắt dòng cho đoạn văn và điều chỉnh khoảng cách giữa các ký tự và căn chỉnh các lề nhỏ về bên trái của văn bản tạo ra sự đánh giá cao về mặt thẩm mỹ cho kỹ thuật viết.

Text Columns

Các cột văn bản cho phép người dùng thêm các khối nội tuyến vào bài viết. Các khối văn bản này được thêm vào bằng cách viết HTML hoặc CSS trên trình chỉnh sửa tích hợp sẵn hoặc khối HTML.

Buttons

Người dùng được phép thêm các nút với vô số kiểu dáng và tùy chỉnh, thông qua các kiểu văn bản yêu thích cũng như chọn màu nền phù hợp. Hiện tại, người dùng chưa thể tùy chỉnh màu chữ từ màu trắng, nhưng CSS style sẽ hỗ trợ xác định lại màu sắc.

Widgets

Widget sẽ có 3 danh mục rất hữu ích dưới mục latest posts (bài viết mới nhất). Tuy nhiên, các danh mục hoặc mã ngắn tùy chỉnh hầu như không có sẵn cho các khối Gutenberg.

Latest Posts

Người dùng có thể lựa chọn giữa 2 hình thức hiển thị bài viết mới nhất (latest posts), bao gồm: chế độ xem lưới (grid view) và chế độ xem danh sách tiêu chuẩn (list view). Đặc biệt, đối với Grid View, bạn được phép tùy chỉnh số lượng cột hiển thị theo nhu cầu của mình.

Ngoài ra, bạn nên lưu ý chọn xem ngày xuất bản bài viết để giúp tiêu đề của nội dung hiển thị có ghi thời gian xuất bản. Điều này sẽ tăng khả năng tiếp cận của người xem.

Categories

Bạn có thể thay đổi hiển thị danh sách mục thành danh sách tiêu chuẩn hoặc định dạng thả xuống thông qua Danh mục.

Shortcode

Với phiên bản WordPress 5.0, người dùng đã được hỗ trợ tính năng Shortcode. Vì vậy, bây giờ, bạn chỉ cần nhập Shortcode và WordPress Block Editor sẽ cho ra kết quả.

Các thủ thuật giúp tối ưu Blocks Editor – Gutenberg là gì?

Cùng với trình soạn thảo văn bản mặc định mới này, đã có một loạt cập nhật khác. Do đó, nhiều người dùng dường như mất nhiều thời gian để tải xuống nội dung. Dưới đây là 7 mẹo để tối ưu hóa trình chỉnh sửa khối.

Tạo khối mới nhanh chóng

Đối với phiên bản mới của trình chỉnh sửa, chỉ cần nhập khối mà bạn đang tìm kiếm và Gutenberg sẽ tự động lọc và hiển thị nó cho bạn. Hơn nữa, nó sẽ hiển thị một hộp các đề xuất liên quan sẽ giúp người dùng tiết kiệm hầu hết thời gian.

Mở chế độ toàn màn hình trong Blocks Editor

Với Blocks Editor, bạn có nhiều tùy chọn chỉnh sửa khác nhau, chẳng hạn như:

• Toàn màn hình (chế độ toàn màn hình).
• Thêm thanh công cụ cố định tương tự phiên bản TinyMCE (Unified Toolbar).
• Trên khối hoạt động, bạn có thể đặt một bài đăng nổi bật (chế độ Tiêu điểm).

Để sử dụng các tùy chỉnh trên, người dùng chọn biểu tượng ba chấm trên ở giữa thanh công cụ chuẩn.

Tạo khối mẫu – Block tái sử dụng

Các khối nguyên mẫu sẽ giúp bạn tiết kiệm thời gian trong trường hợp chúng cần được sử dụng lại. Bạn chọn biểu tượng ba chấm rồi bạn vào Add to Reusable Blocks. Khi cần bạn chỉ việc chèn vào nội dung như các block thông thường.

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

Bạn bấm vào dấu ba chấm rồi vào phần Code Editor để tùy chỉnh mã nguồn của toàn bộ bài viết bất cứ lúc nào.

Tối ưu thời gian bằng phím tắt

Ngoài các phím tắt cơ bản, Gutenberg còn hỗ trợ người dùng hàng loạt tổ hợp phím chuyên dụng để tối ưu thời gian sáng tạo nội dung cho bạn như:

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

Bạn có thể truy cập danh sách phím tắt bằng cách nhấn Shift + Alt + H.

Dùng Plugin để mở rộng trình chỉnh sửa khối

Otter Blocks có thể là một công cụ hỗ trợ tuyệt vời cho những người dùng mới bắt đầu tùy chỉnh các khối nội dung. Công cụ này sẽ mang đến cho bạn các khối có thêm danh mục, giá, lượt nhấp vào tweet, lượt chia sẻ, v.v. của Google Maps.

Biến nội dung cũ thành Blocks

Với tính năng này, bạn không phải lo lắng về nội dung cũ sẽ biến mất. Bạn có thể để nó trong các khối cổ điển và tùy chỉnh nó giống như bạn làm với trình chỉnh sửa WordPress cũ.

Để thực hiện việc này, hãy nhấp vào ba dấu chấm, tiếp theo là mục chuyển đổi thành khối. Hệ thống sẽ tách nội dung thành các khối riêng lẻ và sau đó bạn có thể sắp xếp chúng cho phù hợp.

Review về trình soạn thảo Gutenberg trên Desktop và Mobile

Hầu hết các trình chỉnh sửa bao gồm cả Gutenberg đều hoạt động trơn tru trên Máy tính để bàn. Theo đánh giá từ những cá nhân đang sử dụng trình soạn thảo mới của WordPress, họ đều cho những đánh giá tích cực.

Trên thực tế, Blocks Editor không được phát triển để tập trung vào nền tảng di động. Nhưng theo thử nghiệm, nó vẫn cho hiệu năng ổn định ngay cả khi soạn thảo bài viết dài và nặng.

Nhìn chung, các chức năng tiêu chuẩn như thay đổi phông chữ, xóa khối,… vẫn rất mượt mà trên cả hai nền tảng. Tùy từng lỗi, kỹ thuật viên của Gutenberg sẽ khắc phục và hoàn thiện trong thời gian ngắn nhất.

Kết luận

Trên đây IMO đã chia sẻ đến các bạn những thông tin cần thiết về Gutenberg editor. Hi vọng các bạn đã hiểu hơn về trình soạn thảo này. Nếu còn thắc mắc nào khác, hãy để lại bình luận IMO sẽ giải đáp.

Link bài viết Gutenberg là gì? Hướng dẫn dùng Block Editor: https://imo.com.vn/gutenberg-la-gi-huong-dan-dung-block-editor/