Vài năm trở lại đây, phát triển trình soạn thảo Gutenberg trong WordPress đang trở thành chủ đề nhiều người thảo luận sôi nổi. Thực tế cho thấy rằng, Gutenberg sẽ sớm trở thành một phần của WordPress, vấn đề chỉ là thời gian. Nếu bạn đang mơ hồ không biết Gutenberg là gì, thì bài viết này sẽ giúp bạn trang bị những kiến thức cơ bản về Gutenberg, bạn sẽ không còn bỡ ngỡ trước sự thay đổi có tính cách mạng trong WordPress.
Gutenberg là gì?
Gutenberg là một trình soạn thảo văn bản mới của nền tảng WordPress, được đưa vào làm hệ thống soạn thảo nội dung (post, page) từ phiên bản WordPress 5.0.
Gutenberg được bắt nguồn tên của Johannes Gutenberg – người đã giới thiệu in ấn đến châu Âu với công nghệ in ép, mở ra thời kỳ hiện đại của lịch sử loài người.
Tiến bộ hơn trình soạn thảo TinyMCE, Gutenberg thể hiện tất cả các nội dung như các blocks và xác định layouts bài viết trực tiếp trong trình soạn thảo. Hiểu đơn giản, trình soạn thảo này cho phép bạn biết bố cục bài viết cụ thể, rõ ràng mà không cần phải bấm xem thử.
Sử dụng Gutenberg, bạn không nhất thiết phải biết về HTML hoặc CSS để tạo 2 blocks nội dung bên cạnh nhau, tất cả được đơn giản hóa bằng một số công cụ có sẵn, phù hợp cho người mới bắt đầu sử dụng nền tảng WordPress.
Bên cạnh đó, các nhà phát triển Gutenberg đã thay thế việc sử dụng shortcodes khi thêm các nội dung bên ngoài vào bài viết hoặc trang. Theo đó, người dùng có thể thêm video trên YouTube, bài viết Spotify, Reddit, Tweets,… bằng cách “dán” URL vào trình soạn thảo thay vì yêu cầu plugin hoặc tạo mã nhúng trên trang web của bạn. Tính đến thời điểm hiện tại, có 34 trang web được hỗ trợ tính năng này.
Gutenberg không chỉ là sự thay đổi đơn giản về giao diện, mà còn là sự thay đổi cách thức bạn biên soạn nội dung trên WordPress. Trình soạn thảo văn bản này ảnh hưởng lớn tới các nhà phát triển theme và plugin.
Có thể thấy, Gutenberg đang trong giai đoạn phát triển và hoàn thiện, vậy nên việc xảy ra lỗi là không thể tránh khỏi, thậm chí là hiện cảnh báo chưa nên dùng cho website đang chạy. Nhưng hiện tại đã có 15 bản dịch khác nhau (kể cả tiếng Anh) sẽ giúp người dùng dễ dàng tiếp cận và khắc phục các lỗi.
Ưu, nhược điểm của Blocks Editor WordPress – Gutenberg là gì?
Ưu điểm:
Trình soạn thảo Gutenberg hỗ trợ 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. Dưới đây là một số tính năng ưu việt được người dùng đánh giá cao, cụ thể:
- Gutenberg tích hợp khả năng tùy biến bố cục đa dạng, cho phép người dùng linh hoạt sáng tạo văn bản với nhiều mục đích khác nhau.
- Là trình soạn thảo văn bản mới, Gutenberg vẫn giữ lại nhiều tính năng cơ bản tương tự như blog Medium.com.
- Các nội dung theo block với nhiều công cụ tùy chọn căn chỉnh: tương thích nhiều loại màn hình có kích thước lớn nhỏ khác nhau.
- Trên mobile, trình soạn thảo văn bản Gutenberg hoạt động rất tốt.
- Các công cụ thiết kế theo ngữ cảnh, chỉ hiển thị khi người dùng cần đến chúng.
- Xây dựng layout phức tạp với ít thao tác.
- Nhúng nội dung từ các nguồn như: youtube, Reddit, Tweets,.. chỉ với 1 thao tác.
Nhược điểm
Như đã phân tích ở trên, bên cạnh các tính năng vượt trội, người dùng vẫn còn gặp một số hạn chế khi sử dụng Gutenberg. Cụ thể như sau:
- Gutenberg chưa được hỗ trợ Markdown
- Gutenberg xây dựng nội dung theo blocks nhưng dường như một phần trong số đó vẫn còn gặp khó khăn khi sử dụng.
- Các nhà phát triển còn lo ngại hoạt động 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 trong quá trình hoàn thiện.
- Các plugin và giao diện cũ chưa được tích hợp nên người dùng đang sử dụng trình soạn thảo cũ.
- Hỗ trợ accessibility cho người khuyết tật có thể gây khó khăn cho người bình thường sử dụng.
Cách cài đặt và sử dụng Gutenberg
Dưới đây là trình soạn thảo WordPress mặc định từ phiên bản 5.0, cách cài đặt plugin tương tự như cài plugin khác trên WordPress Repository. Hoặc bạn cũng có thể Download Plugin Gutenberg trực tiếp.
Ngay khi sau khi cài đặt, người dùng có thể nhìn thấy giao diện Gutenberg bằng thao tác Posts -> Add New:
Gutenberg được thiết kế để làm việc với mọi theme WordPress, nhưng tốt nhất bạn nên chọn một theme tương thích với Gutenberg để có những trải nghiệm tốt nhất.
Thứ nhất, Gutenberg xây dựng các nội dung theo block và tải style trong editor. Do đó, người dùng dễ dàng nhìn thấy kết quả định dạng khối trong quá trình xây dựng nội dung mà không cần click vào Preview. (Giống như WYSIWYG)
Hiện tại, Gutenberg vẫn chưa phát hành chính thức nên chưa được nhiều theme hỗ trợ, bạn có thể tham khảo các theme từ Tammie Lister.
Xây dựng layout đầu tiên sử dụng Gutenberg editor
Giao diện Gutenberg khá đơn giản, phù hợp cho người mới bắt đầu. Theo đó, bạn chỉ cần kéo thả block để trình bày nội dung thay vì sử dụng các đoạn code hoặc HTML dài dòng, phức tạp.
Hướng dẫn các bước xây dựng nội dung theo khối Blocks
- (A): Bổ sung Blocks mới
- (B): Undo/ Re-undo
- (C): Thông tin bài viết gồm category, tag, ảnh đại diện ( tương tự phần sidebar trong WordPress editor ở hiện tại)
- (D): Cho phép truy cập setting cho khối đang chọn để chỉnh sửa
- (E): Công bố, nháp bài post/page đang soạn thảo.
- (F): Khu vực soạn thảo văn bản.
Cách làm việc với khối trong Gutenberg
Muốn bổ sung một khối mới, người dùng chỉ cần click vào icon dấu cộng và chọn khối muốn tạo.
Trên đây là cách thêm một khối paragraph cơ bản, Gutenberg còn cung cấp cho bạn rất nhiều khối khác nhau và được nhóm thành các phần khác nhau.
Theo đó, Recent và Saved là phần duy nhất giúp người dùng dễ dàng truy cập những khối bạn hay dùng.
Để truy cập tất cả các khối, bạn chỉ cần click vào Embeds và Blocks.
Bố cục cơ bản của Gutenberg là blocks được sắp xếp một cách độc lập và chia thành 4 nhóm chính, bao gồm:
- Common Blocks: các khối thường dùng như Image, Heading, Paragraph, Quote…
- Formatting Blocks: bổ sung nội dung được định dạng sẵn như Pullquote, Classic, Table,…
- Layout Blocks: các khối liên quan đến tạo bố cục văn bản như: Text Columns (tác text thành 2 cột), More, Button, Separator,…
- Widget: các khối tạo tiện ích bạn có thể chèn thêm shortcode, latest posts, category.
Trong tab Embed, người dùng có thể nhúng nội dung từ các nguồn bên ngoài điển hình như:
- Instagram
- Youtube
Xây dựng layout cơ bản với Gutenberg
Bạn có thể thiết kế một layout cơ bản, bao gồm:
- Text
- Hình ảnh
- Pull quote
- Nhúng video từ nền tảng Youtube
Mặc định khối text đã được bổ sung, bạn có thể thêm block không phải là text. Bây giờ, chúng ta hãy click vào nút dấu cộng và thêm khối Image vào nội dung bài viết.
Bạn chỉ cần thao tác đơn giản là upload ảnh từ máy tính hoặc chèn một ảnh có sẵn từ Media Library.
Khối ảnh sẽ hiển thị như hình minh hoạ bên dưới.
Tiếp theo, bạn có thể chèn tiếp khối Pull Quote như hướng dẫn bên dưới.
Sau đó, bạn hãy tiếp tục nhập nội dung cho Pull Quote.
Click vào tab Embeds để chèn video từ Youtube
Và cuối cùng là bước xuất bản bài viết.
Tính năng bổ sung của Gutenberg
Gutenberg thêm một số tính năng mới cho các bài viết của bạn thêm phần độc đáo, sinh động hơn. Dưới đây là một số tính năng bạn có thể tham khảo!
Mục lục
Gutenberg sẽ xác định tất cả các blocks heading (<h1>,<h2>,…) trong bài viết và hiển thị thành một mục lục ở sidebar nhằm liệt kê tất cả. Nó như một “cây thư mục” giúp người đọc dễ dàng theo dõi mà không cần cuộn trang.
Anchors
Anchors là cho phép bạn gắn liên kết khác có nội dung liên quan trong bài viết, giúp người người dùng dễ dàng tìm kiếm thông tin qua các Anchors Tag này.
Bạn chỉ cần chọn một heading trong block, sau đó gõ tag và chọn “Copy Link” trong HTML Anchor để lấy liên kết.
Các kiểu CSS bổ sung
Bạn hoàn toàn có thể tùy chỉnh style của block qua các đoạn CSS bổ sung. Tính năng này cho phép bạn gán các lớp đã được định nghĩa trong file styles.css của theme, từ đó người dùng có thể ghi đè hoặc thay đổi block thành những kiểu dáng mặc định sẵn có trong Gutenberg.
Gallery
Gallery là công cụ thêm các nhóm ảnh từ thư viện phản hồi trong bài đăng của bạn và đặt xung quanh các block khác. Để tải ảnh từ máy lên, Gallery sẽ hiển thị một liên kết hoặc bạn có thể sử dụng tài nguyên có sẵn trong Media của WordPress.
Bên cạnh đó, tính năng “crop images” giúp bạn dễ dàng điều chỉnh hình ảnh về cùng một hình ảnh trước khi đăng tải.
Cover Image/Hero Image
Cover images (còn được gọi là hero images) là những ảnh đại diện phần đầu bài viết ở đầu văn bản. Để thêm Cover images, trình soạn thảo 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 và chiều dọc, tùy vào kích thước màn ảnh.
Pull Quotes & Block Quotes
Pull quote là một đoạn trích dẫn quan trọng làm nổi bật nội dung bài viết, nhằm vụ thu hút người đọc.
Tính năng Block quotes, người dùng dễ dàng tùy chỉnh định dạng cho đoạn trích này bằng cách nhấp vào nút “Quote Style” ở thanh công cụ.
Tùy chỉnh HTML
Sau khi thêm vào các đoạn mã HTML, bạn vẫn có thể di chuyển nó đi đến bất cứ đâu như một block thông thường. Tính năng tab Preview – khi click vào đây, người dùng có thể xem văn bản trước khi xuất bản, rất tiện lợi phải không nào!
Classic Text
Block classic text hiển thị toàn bộ thanh công cụ tùy chỉnh TinyMCE, chỉ khác mục Additional CSS Class. Block vẫn có thể di chuyển và xóa bằng bằng công cụ của Gutenberg. Khi chuyển sang trình soạn thảo văn bản, block sẽ xuất hiện dưới dạng HTML.
Verse
Verse block được dùng cho các đoạn thơ hoặc đoạn văn nhằm định nghĩa đúng dòng ngắt và khoảng cách ký tự. Ngoài ra, Verse block còn có thể căn chỉnh một lề nhỏ ở bên trái văn bản.
Text Columns
Với Text Columns, bạn có thể thêm bất kỳ khối văn bản nội tuyến nào nếu muốn. Tuy nhiên, khối văn bản này phải được viết bằng HTML và CSS bằng trình soạn thảo văn bản hoặc HTML block.
Buttons
Người dùng dễ dàng thêm các nút bấm với nhiều kiểu khác nhau. Nhưng tính đến thời điểm hiện tại, bạn không thể thay đổi màu chữ từ màu trắng, tuy nhiên công cụ “Additional CSS Class” sẽ hỗ trợ định dạng màu sắc bằng CSS style.
Widgets
Block có sẵn 3 widget đáng giá về latest posts (các bài viết mới nhất), tuy nhiên categories và tùy chỉnh shortcodes đều không hoạt động trong các block của Gutenberg.
Latest Posts
Có hai hình thức hiển thị danh sách Latest Posts đó là: List View (dạng list cơ bản) và Gridview (dạng dưới). Với cách bố trí lưới, bạn có thể tùy chỉnh số cột và hiển thị bài viết giúp người truy cập dễ dàng chọn xem nội dung hơn.
Categories
Với Categories, người dùng hoàn toàn tùy chỉnh danh sách các mục theo kiểu list thông thường hoặc danh sách cuộn. Tính năng này cho phép căn chỉnh, nên bạn có thể di chuyển sang trái, giữa hoặc phải.
Shortcode
Gutenberg đã cung cấp thêm Shortcode, bạn chỉ cần nhập Shortcode như bình thường để Gutenberg hiển thị kết quả.
Thủ thuật giúp tối ưu Blocks Editor – Gutenberg
Đứng trước sự thay đổi lớn của Editor mặc định trên nền tảng WordPress, người dùng gặp mất khá nhiều thời gian thao tác. Vậy nên, để tiết kiệm thời gian sử dụng sử dụng Gutenberg, bạn có thể thực hiện các thao tác dưới đây:
- Tạo khối mới nhanh chóng bằng cách gõ
- Kích hoạt chế độ toàn màn hình Editor
- Tạo các khối nhằm mục đích tái sử dụng
- Chỉnh sửa mã nguồn trực tiếp
- Sử dụng phím tắt Gutenberg
- Mở rộng trình chỉnh sửa khối bằng plugin
- Chuyển đổi nội dung cũ thành các Blocks
Tạo khối mới nhanh chóng bằng cách gõ
Tạo khối mới nhanh chóng bằng cách gõ
Ở hình ảnh trên, bạn có thể thấy một hộp gợi ý tự động sẽ xuất hiện nhằm giúp người dùng dễ dàng tìm block liên quan. Việc của bạn là gõ tên block, Gutenberg sẽ hiển thị khối nội dung cần tìm.
Kích hoạt chế độ toàn màn hình Editor
Với trình soạn thảo văn bản Gutenberg, người dùng hoàn toàn có thể chọn nhiều chế độ chỉnh sửa khác nhau.
- Thêm thanh công cụ cố định có thể kể đến như TinyMCE
- Toàn màn hình
- Thêm một bài nổi bật trên block
Bạn chỉ cần nhấp vào biểu tượng ba chấm ở góc trên bên phải như hình minh hoạ.
Tạo các khối mẫu nhằm mục đích tái sử dụng
Với Gutenberg, ngoài tính năng soạn thảo văn bản, bạn có thể tạo khối mẫu để tái sử dụng.
Chỉnh sửa mã nguồn trực tiếp
Bạn dễ dàng chỉnh sửa mã nguồn của toàn bộ bài viết bằng cách nhấp vào ba dấu chấm ở góc trên bên phải sau đó chọn “Code editor”.
Sử dụng phím tắt Gutenberg
Trình chỉnh sửa block tích hợp một số phím tắt chuyên dụng giúp người dùng:
- Chèn các block mới ở trên hoặc dưới block đã chọn trước đó.
- Xóa block
- Nhân đôi block
Để bật đầ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 giúp bản chỉnh sửa, bổ sung yếu tố giá cả, Google Maps, nhấp chuột vào nút tweet, biểu tượng chia sẻ,… và nhiều hơn tính năng khác nữa.
Chuyển đổi nội dung cũ thành Blocks
Để tránh tình trạng nội dung cũ biến mất, bạn hãy để nó trong khối Classic và chỉnh sửa tương tự như 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” giúp bạn sắp xếp lại.
WordPress Editor – Gutenberg hoạt động như thế nào?
Về cơ bản, sự ra đời của Gutenberg là quá trình thay thế trình soạn thảo mặc định WordPress TinyMCE. Trình soạn thảo hoạt động bằng nhiều blocks riêng lẻ, các blocks cho phép bạn sử dụng các thiết kế phức tạp hơn trong trình chỉnh sửa cũ. Theo đó, bạn dễ dàng tạo thêm block mới và truy cập thông qua các plugin.
Thêm một tính năng vượt trội nữa, mỗi block đều có thể tùy chỉnh đơn lẻ chỉ với một vào thao tác đơn giản, bạn có thể kiểm soát sâu hơn từng mục nội dung được trình bày trong văn bản.
Đánh giá Gutenberg trên Desktop và Mobile
Trên Desktop, hầu hết các trình soạn thảo văn bản Gutenberg chạy rất “mượt”, trong đó có Gutenberg. Theo đánh giá của người dùng, họ không phát hiện lỗi nào trong quá trình soạn văn bản hoặc tùy chỉnh – thêm, xóa các block.
Tuy không tập trung phát triển trên nền tảng mobile nhưng theo trải nghiệm người dùng, Gutenberg chạy rất ổn định, dù là một nội dung khá nặng. Các chức năng xóa block hay đổi màu font chữ diễn ra nhanh chóng trên nền tảng di động. Mặc dù vẫn còn tồn tại một vài khuyết điểm nhưng đội ngũ phát triển Gutenberg tin rằng, trình soạn thảo này sẽ phát triển hơn 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ài viết sẽ giúp bạn có cái nhìn tổng quan về Gutenberg và có thể cài đặt một cách nhanh chóng. Theo dõi Wolfactive để nhận thêm nhiều bài viết bổ ích bạn nhé!