Trước khi bắt tay vào sử dụng Block Editor, bạn cũng nên tìm hiểu cách sử dụng song song, linh hoạt giữa Classic Editor (TinyMCE) và Gutenberg Editor, điều này đã được hướng dẫn chi tiết trong bài viết này:

Cấu hình chung WordPress trên WordPress Settings

Sử dụng Gutenberg Block Editor là thao tác trực tiếp với các blocks – vì mọi thứ trên trang web khi dùng Gutenberg Editor đều là block.

A. Thao tác với Blocks

Trước tiên ta làm quen giao diện (User Interface – UI) của Gutenberg Block Editor.

a1. Tìm hiểu giao diện Gutenberg Block Editor

So với Classic Editor, thì giao diện của Gutenberg khác hoàn toàn, nếu bật chế độ toàn màn hình (Full Screen Mode) phần WordPress Dashboard Panel không còn xuất hiện ở bên trái nữa, giao diện Gutenberg Editor chiếm toàn trang, với 3 phần: (1) Top Toolbar, (2) Sidebar và (3) Content.

Ta xem qua các mục ở Topbar:

(1) Topbar Menu

Topbar menu chứa các phần thao tác nhanh, bao gồm:

Icon (WP) – ở góc trái, để thoát khỏi giao diện Gentenberg – trở lại WordPress Dashboard, icon này chỉ xuất hiện khi Gutenberg ở chế độ Full Screen (xem thêm ở phần Options ngay bên dưới).
Icon Plus (+) – để thêm một block vào trang
Icon Pencil (bút chì) – đổi giữa chế độ Edit/ Select
Icon Undo/ Redo – nút phục hồi/ làm lại khi soạn thảo, thiết kế
Icon (i) – nút details – hiển thị thống kê về nội dung trên trang, như số block, ký tự, từ, số đoạn văn, số thẻ tiêu đề.
Icon (3 gạch) – nút list view – rất hữu ích – cho phép hiển thị panel về bố cục block trên trang theo dạng list và có phân cấp, giúp truy cập nhanh tới bất kỳ block nào trên trang.
Nút Swith to Draw, Preview, Update trang.
Icon (bánh xe) – Settings: chuyển qua lại giữa 2 chế độ ẩn hiện Sidebar (2)
Icon (3 chấm) – Options: hiển thị panel các tùy chọn UI ở Gutenberg, ta sẽ nói chi tiết hơn bên dưới vì ở phần Options có nhiều tùy chọn rất hữu ích.
Các icon còn lại sẽ xuất hiện tùy vào các plugin bạn cài hỗ trợ Gutenberg, giúp truy cập vào các block của chúng, như hình trên ta có thể thấy icon của Yoast SEO hay WP Stackable và Astra (Ultimate Addons for Gutenberg)

Ta tìm hiểu kỹ về mục Options một xíu, để mở Options, ta chọn icon 3 chấm ở góc bên phải của Topbar:

Đầu tiên là phần VIEW, có các tùy chọn:

Top toolbar: đưa toolbar cấu hình của mỗi block lên top của Gutenberg Editor – ngay bên dưới Topbar menu, đây là toolbar hiển thị ngay trên đầu mỗi block để truy cập các tùy chọn chỉnh sửa của block đó.
Spotlight mode: bật chế độ này để làm mờ các blocks khác để tập trung vào block hiện tại.
Full Screen Mode: chế độ toàn màn hình, ở chế độ này, WP Dashboard Panel sẽ bị ẩn đi nhằm mở rộng không gian thao tác cho Gutenberg, lúc này icon WP sẽ hiển thị ở Topbar Menu cho phép thoát Gutenberg và trở lại Dashboard.

Tiếp theo là phần EDITOR, có 2 chế độ có thể chuyển qua lại:

Visual Editor: chế độ mặc định của Block Editor
Code Editor: hiển thị nôi dung trang ở giao diện code gốc của Gutenberg, ở đây có mã markup của Gutenberg, chỉ khuyên dùng cho người có kinh nghiệm code với Gutenberg, người dùng bình thường không nên táy máy tới phần này.

Phần PLUGINS: tương tự các icon ở Topbar Menus, cho phép truy cập vào tùy chọn của các plugin có hỗ trợ Gutenberg.

Cuối cùng là phần TOOLS, với 3 phần rất quan trọng: Manage Reusable blocks (truy cập vào trang quản lý reusable blocks), Keyboard shortcut (mở popup chứa danh sách phím tắt) và đáng chú ý nhất là nút Copy all content – cho phép copy toàn bộ nội dung hiện có trên trang.

(2) Sidebar

Mục Sidebar trên Gutenberg như đã nói, có thể ẩn/ hiện bằng icon Settings trên Topbar menu, mục này chứa 2 tab riêng biệt: Post và Block.

Tab Post chứa các thông tin – cài đặt cho nội dung trang như ở giao diện Classic Editor, nó chính là toàn bộ phần Sidebar của Classic Editor, kèm theo các mục khác ở trên và dưới trình soạn thảo Classic Editor trước đây như Permalinks, Excerpt, Discussion. Ngoài ra nó còn chứa một số mục hiển thị thông tin của plugin (ví dụ thông tin SEO của Yoast SEO):

Tab Block – là phần cài đặt – cấu hình của các block trên trang, khi nhấp vào một block trên trang thì phần thiết lập của block đó sẽ hiển thị tương ứng. Đối với mỗi block, các thuộc tính cho phép tùy chỉnh là khác nhau, tùy vào độ phức tạp mà block đó hỗ trợ, ví dụ với paragraph block, thì các thuộc tính tùy chỉnh chỉ đơn giản là thế này:

Còn với các block phức tạp, như grid block của GenerateBlock plugin, thì phần cấu hình sẽ có rất nhiều thứ để chúng ta tùy chỉnh:

(3) Content

Phần chính của giao diện Gutenberg Editor là Content – nội dung và thiết kế của trang được tạo thành từ các block, ở đây mỗi block khi chỉnh sửa sẽ có một menu nổi – floating topbar chứa các tùy chọn định dạng – căn chỉnh cơ… Như đã nói ở phần Options, chúng ta có thể đưa floating topbar cố định trên đầu trang – ngay bên dưới Topbar Menu để dễ dàng thao tác.

Cũng lưu ý là phần tiêu đề (Post/ Page Title) luôn nằm ở đầu phần Content, nó không phải là một block như các phần bên dưới nó. So với giao diện Classic Editor, thì mục chỉnh url slug (permalinks) không nằm bên dưới tiêu đề, mà nó nằm ở tab Post của Sidebar:

Như vậy bạn đã làm quen với các mục trên giao diện Gutenberg Block Editor, tiếp theo chúng ta sẽ tìm hiểu các thao tác quan trọng nhất khi soạn thảo, thiết kế.

a2. Cách thêm một Block vào trang

Để thêm một block vào trang, có 2 cách, trước hết cần click vào vị trí cần thêm block và click vào plus icon (+) ở Topbar Menu hoặc ngay phía dưới của phần Content trong giao diện Gutenberg.

Nếu click vào plus icon (+) ở trên, thì Blocks Panel sẽ hiển thị toàn bộ danh sách blocks hiện có, rà chuột (hover) vào từng cái để xem trước (nếu block đó có hỗ trợ ảnh xem trước) , và click vào một block để thêm nó vào trang:

Nếu thêm block bằng plus icon (+) ở bên dưới phần nội dung, thì chỉ hiển thị phần rút gọn của blocks panel, và tính năng xem trước không hỗ trợ ở phần này:

Sau khi click để thêm 1 block, bạn cần nhập nội dung (block content), tùy chọn định dạng/ căn chỉnh (ở block topbar) và thiết lập các cấu hình cho nó (block – block setting):

a3. Thao tác với block Topbar

Với mỗi block, phần block topbar của nó sẽ chứa các tùy chọn định dạng và căn chỉnh, cũng như một số thuộc tính riêng cho từng loại block.

Ví dụ Text block (paragraph, heading, quote.. block) thì có các thuộc tính về font màu sắc (A), in nghiêng (I), bôi đậm (B) và thêm link:

Với text block (p, heading, quote..) còn có tùy chọn định dạng thêm (more block tools), ở đây hỗ trợ viết định dạng inline code, highlight text hay các cách viết đặc biệt khác:

Với tất cả các block, topbar có chung các mục như change block type/ style (đổi loại, định dạng block), drage & move block up/ down (kéo block hoặc di chuyển block lên xuống) và change alignment (canh chỉnh). Ở cuối topbar có 3 dấu chấm – truy cập vào phần options của block đó:

Phần change block (1) luôn ở vị trí đầu tiên của topbar (các icon đại diện mục này có thể khác nhau tùy vào mỗi loại block), còn phần block options (4) luôn ở vị trí cuối của topbar:

Ở block options, có nhiều tính năng quan trọng:

Copy: cho phép copy nguyên một block, tức cả nội dung lẫn thuộc tính (style) của block, lưu ý nếu bạn copy bằng phím Ctrl+C như trước đây thì chỉ có thể copy phần nội dung, còn thuộc tính của block thì không.
Duplicate: nhân bản block đó
Insert before/ after: chèn một block khác vào trước hoặc sau block hiện tại
Edit as HTML: mở chế độ chỉnh sửa block dưới đạng code HTML, ở đây bạn cũng có thể dán một đoạn code HTML bất kỳ vào vị trí của block hiện tại. Khi cần chuyển trở lại chế độ cũ thì nhấp vào Edit visually.
Add to Reusable blocks: thêm block hiện tại vào danh sách Reusable blocks, ta sẽ tìm hiểu kỹ reusable block là gì ở bên dưới.
Group: nhóm block, tính năng này sẽ giúp bạn thêm các block khác vào nhóm với block hiện tại, qua đó có thể thiết lập các thuộc tính (style) chung cho nhóm này (ví dụ thiết lập màu nền, thuộc tính padding/ margin hay border, box-shadow,… cho cả nhóm).
Remove: xóa block (cả nội dung và thuộc tính), tương tự tính năng copy ở trên. Lưu ý nếu bạn chỉ dùng phím delete để xóa thì nó chỉ xóa phần nội dung của block, chứ bản thân block và thuộc tính (style) vẫn còn nằm nguyên ở đó.

a4. Cấu hình cài đặt Block (Block Settings)

Phần cài đặt của mỗi block cũng khác nhau tùy vào loại block. Ngoài ra, trong quá trình nâng cấp của chính Gutenberg, các tùy chọn ở phần cài đặt cũng được nâng cấp để mở rộng khả năng tùy biến, chỉnh sửa.

Hiện tại, các block của Gutenberg đã cơ bản đáp ứng được việc thiết kế giao diện, nhưng so với các Page Builder thì vẫn còn hạn chế ở việc hỗ trợ tùy chỉnh thiết kế cho mỗi block – rõ nhất là các tính năng như thiết lập margin/ padding hay tùy chỉnh cho từng thiết bị (desktop, tablet, mobile) vẫn chưa được hỗ trợ đầy đủ.

Với công việc viết bài, thì phần thao tác với text block như heading block, paragraph block không cần nhiều tùy chỉnh về thiết kế, hiện tại Gutenberg cũng chỉ hỗ trợ về màu sắc, kích cỡ font chữ, còn các thuộc tính thiết kế như margin/ padding hay border, shadow vẫn chưa có:

Với column block – phần rất quan trọng để thiết kế bố cục trang (page layout) thì cũng chưa hỗ trợ thiết lập margin/padding, border/ shadow và chưa hỗ trợ thiết lập riêng cho thiết bị tablet, mobile – Điều này đồng nghĩa với việc để thiết kế layout phức tạp – chính xác theo yêu cầu thiết kế chuyên nghiệp thì bạn cần column block hoặc grid block nâng cao hỗ trợ bởi các addon (như Generateblocks, Stackable) chứ không thể dựa vào tính năng có sẵn của Gutenberg:

Nói chung, với Gutenberg phiên bản mới nhất, chúng ta phải hài lòng với các hỗ trợ cơ bản nhất trong thiết kế mỗi block và khi cần thiết kế layout phức tạp hơn – phải cài đặt thêm các plugin hỗ trợ (Gutenberg addons) như GenerateBlocks, KadenceBlocks hay WP Stackable…

a5. Sắp xếp các Blocks

Vì toàn bộ trang web là các block của Gutenberg, do đó trong quá trình thiết kế hay viết bài, chúng ta thường xuyên phải duyệt qua danh sách block và truy cập block cụ thể, sắp xếp lại các block.

Với tính năng List View ở Topbar Menu, ta có thể làm điều này rất dễ dàng. Bạn có thể click để đi tới một block trong list – hoặc kéo thả sắp xếp lại vị trí block ngay trên List View:

a6. Nhúng nội dung từ nguồn ngoài

Điểm nổi bật của Gutenberg so với Classic Editor là hỗ trợ nhúng nội dung từ các nguồn ngoài vào trang cực kỳ dễ dàng với sự hỗ trợ của danh sách Embed Blocks cực đầy đủ.

a7. Cách tạo layout nâng cao – Column & Group

Nói đến thiết kế web, layout là chìa khóa. Để thiết kế layout tốt, chúng ta cần sử dụng Column & Row (cột & hàng).

Đa số các page builder như Elementor, Brizy, Divi… đều hỗ trợ sẵn các tính nanwg Column & Row mạnh mẽ để người dùng dễ dàng tạo các dạng layout phức tạp – có thể tùy biến trên nhiều kích cỡ màn hình (desktop, tablet, mobile).

Gutenberg cũng hỗ trợ Column & Row dưới dạng block là Column block, Row block & Group block, khi sử dụng kết hợp 3 cái này, chúng ta có thể tạo layout phức tạp như grid layout:

Group block: giống như section/ container – là một block chứa nhiều block khác, nhờ đó có thể tạo các thuộc tính thiết kế như background chung cho các block trong đó.
Row block: hàng, có thể chứa cột (column blocks) hoặc nằm trong column block.
Column block: cột, Gutenberg hiện hỗ trợ 6 layout cột có sẵn, ta có thể kết hợp với row block để tạo ra không giới hạng các grid layout.

Điểm hạn chế của Gutenberg là thiếu thiết lập chế độ responsive riêng, tùy chỉnh độ cao (height) và margin/ padding cho cả 3 block group, row, column.

B. Cách sử dụng Block Pattern và Reusable Block

Block Pattern và Reusable Block là 2 khả năng cực mạnh của Gutenberg để tối ưu thời gian thiết kế Website, nó cũng là chìa khóa để Full Site Editing trở thành dễ dàng hơn với người dùng phổ thông.

Cụ thể:

Block Pattern giống như các template của blocks, nó là các template có sẵn để chúng ta thêm vào trang và chỉnh sửa lại theo ý mình.
Reusable blocks là các blocks có khả năng dùng chung trên nhiều trang, mỗi sự thay đổi của nó sẽ có hiệu lực trên toàn bộ các trang đang dùng nó.

Block Patterns

Patterns thực chất là các template (thiết kế mẫu), được WordPress hỗ trợ để người dùng có thể đạt được kết quả thiết kế nhanh chóng dựa vào các mẫu có sẵn.

Để dùng block patterns, ở Block Panel ta sẽ click vào mẫu cần dùng để thêm phần thiết kế đó vào trang, sau đó có thể tùy biến style và nội dung theo ý mình:

Block Pattern khi thêm vào một trang thì trở thành block độc lập của trang đó, việc chỉnh sửa – tùy biến trên nó không tác động gì tới block pattern gốc nên không ảnh hưởng gì đến các trang khác nếu cũng có dùng pattern tương ứng – điều này khác hoàn toàn với reusable block bên dưới.

Hiện nay chúng ta chưa thể chuyển một block thành block pattern ngay trên Gutenberg, mà chỉ có thể dùng các pattern có sẵn do theme hỗ trợ, hoặc dùng các pattern mặc định của WordPress. WordPress hiện tại đã mở thư viện block patterns để nhà phát triển đóng góp thêm nhiều mẫu mới, xem chi tiết:

Block Pattern Directory

Điều thú vị là nếu cần dùng bất kỳ pattern nào ở Block Pattern Directory, bạn chỉ cần rà chuột – click vào nút copy rồi dán (Ctrl + V) vào Gutenberg Editor trên site mình, toàn bộ nội dung & thuộc tính của nó sẽ được copy:

Click chuột vào vị trí cần dùng pattern trên Gutenberg Editor, rồi dùng phím tắt Ctrl + V hoặc mở chuột phải chọn paste để dáng pattern từ Directory vào trang web, pattern trở thành block trên trang và bạn có thể chỉnh sửa tùy thích như một block thông thường:

Trong tương lai số lượng pattern miễn phí của WordPress sẽ tăng lên hàng nghìn, hàng triệu, chắc chắn việc thiết kế trên Gutenberg Editor sẽ trở nên dễ dàng hơn rất nhiều nhờ thư viện templates này.

Reusable Blocks

Một ví dụ về Resuable Block:

Giả sử bạn tạo một banner dạng CTA (Call to action) để thu thập emails đăng ký từ người dùng, banner này sẽ hiển thị ở ngay trên footer của nhiều trang bài viết:

Lúc này, ta không cần tạo banner này riêng cho từng trang, mà chỉ cần tạo tại một trang, sau đó thêm nó vào mục Reusable Blocks, rồi có thể dùng nó ở bất kỳ trang nào khác khi cần:

Các reusable blocks sẽ hiển thị ở tab riêng trong Block Panel, khi dùng chỉ cần click vào block đó:

Lưu ý là khác với pattern (dạng template), mỗi reusable block khi chỉnh sửa ở bất kỳ trang nào thì kết quả chỉnh sửa sẽ đồng thời có hiệu lực trên mọi trang khác đang dùng nó. Do vậy, phải thật cẩn thận khi tiến hành chỉnh sửa reusable block trên Website.

C. Phím tắt trên Gutenberg

Khi chuyển từ Classic Editor hay các Page Builder qua sử dụng Gutenberg, bạn sẽ mất khá nhiều thời gian để quen tay với các tác vụ trên giao diện Block Editor, nên hệ thống phím tắt sẽ giúp rút ngắn thời gian soạn thảo và thiết kế đáng kể.

Để truy cập danh sách phím tắt trên Gutenberg, ta vào mục Tools trên Options (của Gutenberg) ở Topbar Menu:

Danh sách phím tắt khá dài, dưới đây là một số tổ hợp phím tắt thường dùng nhất:

Mở block List View — Shift + Alt + O
Lưu trang — Ctrl + S
Select text trên block đang chọn — Ctrl + A
Select all blocks (chọn toàn bộ blocks trên trang) — nhấn 2 lần liên tiếp tổ hợp Ctrl + A
Xóa nội dung hoặc blocks đã được select — Delete hoặc Backspace
Undo — Ctrl + Z
Redo — Ctrl + Shift + Z
Nhân bản block đang chọn — Ctrl + Shift + D
Xóa block đang chọn — Shift + Alt + Z
Thêm 1 block mới ngay trước block đang chọn — Ctrl + Alt + T
Thêm 1 block mới ngay sau trước block đang chọn — Ctrl + Alt + Y

Các phím tắt văn bản vẫn tương tự như Classic Editor:

Bôi đậm văn bản — Ctrl + B
In nghiêng văn bản — Ctrl + I
Chèn link cho đoạn text được chọn — Ctrl + K
Xóa link — Ctrl + Shift + K
Gạch chân — Ctrl + U

Cuối cùng, nếu quên phím tắt, bạn có thể mở nhanh mục phím tắt bằng tổ hợp phím Shift + Alt + H.

D. Các mẹo hay khi sử dụng Gutenberg

Ngoài các phím tắt, còn có một số mẹo giúp ta tiết kiệm thời gian khi làm việc với Gutenberg.

d1. Tối ưu giao diện sử dụng Gutenberg Editor

Có quá nhiều block trên Block Panel sẽ khiến việc tìm block mình cần lâu hơn, chưa kể làm rối giao diện, đặc biệt khi dùng các Gutenberg Addons, addons sẽ có thêm nhiều block cùng tên với block có sẵn trên Gutenberg (thường tính năng của block trên addons sẽ tốt hơn mặc định của Gutenberg).

Chúng ta nên chọn ẩn bớt rất nhiều block không hoặc chưa cần dùng tới.

Đơn giản là dùng tính năng Block Manager (Visible Block), trước đây Block Manager đặt ở mục Tools của Gutenberg Options, nhưng hiện tại nó đã được chuyển vào mục Preferences (cũng ở Gutenberg Options):

d2. Thêm nhanh block muốn dùng

Thay vì phải tìm và chọn trong Block Panel, khi cần thêm một block nào đó, bạn không cần tìm trong Block Panel mà chỉ cần dùng phím slash (/) và gõ tên block để chọn nhanh. Ví dụ bạn gõ /table để chọn nhanh table block:

d3. Chọn nhanh block cần chỉnh sửa

Đã giới thiệu ở trên, với tính năng List View ở Topbar Menu, chúng ta có thể truy cập danh sách toàn bộ block có trên trang theo phân cấp, ở đây bạn có thể truy cập ngay vào một block cụ thể mà không cần phải cuộn trang:

Trên List View, bạn có thể kéo thả để thay đổi vị trí một block, đặc biệt có thể truy cập nhanh vào block options để thao tác mà không cần làm trong phần nội dung:

d4. Kéo thả image từ máy tính

Với Gutenberg, bạn có thể trực tiếp kéo ảnh vô trang trực tiếp từ máy tính:

d5. Copy block (cả content lẫn setting)

Để copy một block, cả nội dung lẫn các thuộc tính, cấu hình của nó, ta vào block option và chọn copy, thay vì dùng phím Ctrl + C như khi copy nội dung trên Classic Editor trước đây:

Khi cần paste, bạn click vào vị trí muốn paste và chọn phím tắt Ctrl + V quen thuộc, hoặc chọn paste trên menu chuột phải.

d6. Tạo HTML anchor cho Jump link

Tính năng HTML anchor nằm trong phần Advanced của block settings, cho phép tạo điểm neo (anchor) cho một mục nào đó trên trang, và ta có thể tạo link nhanh đến phần đó bằng HTML anchor đã khai báo.

Ví dụ bạn có mục Câu hỏi thường gặp ở cuối trang, ta có thể tạo HTML anchor cho phần tiêu đề của nó, ví dụ ta sẽ thêm anchor là jumptofaq cho phần này:

Sau đó, muốn tạo link nhanh tới phần trên, chỉ cần thêm link #jumptofaq là được:

So với lúc mới ra mắt, đến năm 2023 Gutenberg Block Editor đã có rất nhiều cải thiện, đặc biệt với các addons như WP Spectra và GenerateBlocks, Stackable, … chúng ta có thể thiết kế các dự án website phức tạp với hiệu quả cao trong thời gian ngắn.

Case Study trên WPVUI Premium sẽ hướng dẫn chi tiết từng bước sử dụng Gutenberg Block Editor kết hợp với Addons để xây dựng dự án Website thực tế.

Hẹn gặp lại!

Twitter Facebook Telegram