Hướng dẫn sử dụng Gutenberg trong WordPress
Như trong bài viết trước chúng ta đã biết Gutenberg là một trình soạn thảo mới cho WordPress, với những tính năng mới hứa hẹn sẽ thay thế hoàn toàn trình soạn thảo hiện tại TinyMCE. Xem thêm: Gutenberg là gì Trong bài viết này chúng ta sẽ tìm hiểu về cách sử dụng Gutenberg như thế nào và một số ...
Như trong bài viết trước chúng ta đã biết Gutenberg là một trình soạn thảo mới cho WordPress, với những tính năng mới hứa hẹn sẽ thay thế hoàn toàn trình soạn thảo hiện tại TinyMCE. Xem thêm: Gutenberg là gì
Trong bài viết này chúng ta sẽ tìm hiểu về cách sử dụng Gutenberg như thế nào và một số phím tắt giúp cho việc sử dụng nhanh chóng và tiện lợi hơn.
Giao diện của Gutenberg
Chúng ta sẽ xem xét chi tiết giao diện của Gutenberg
A: Thêm block (khối) mới
B: Undo/Redo tương tự trình soạn thảo văn bản khác
C: Truy cập phần document setting bao gồm category và tag, featured image tương tự như phần sidebar trong WordPress editor hiện tại.
D: Truy cập setting cho block đang chọn.
E: Truy cập preview bài post/page đang soạn thảo và xuất bản.
F: Phần nội dung của post/page.
Sử dụng Block trong Gutenberg
Để thêm block mới chúng ta sẽ click vào icon có dấu + và chọn block cần thêm
Trong hình minh hoạ trên là cách thêm 1 khối paragraph cơ bản. Tuy nhiên Gutenberg có sẵn thêm nhiều các Block khác được nhóm thành các nhóm khác nhau:
- Phần Recent và Save: những block hay dùng
- Blocks & Embeds: tất cả các block Các Block trong tab Blocks:
- Common Blocks: chứa các khối cơ bản như Image, Paragraph, Heading, Quote...
- Formating: cho bạn thêm vào nội dung đã được định dạng sẵn như Pullquote, Table, Classic..
- Layout Blocks: bao gồm Text Columns (tác text thành 2 cột), Button, Separator, More..
- Widget: cho phép bạn thêm shortcode, bài viết mới nhất (latest posts), category. Các Block trong tab Embed
- Youtube
Các shortcut trong Gutenberg
Để sử dụng Gutenberg một cách chuyên nghiệp và tiết kiệm thời gian thì chúng ta nên tìm hiểu về các shortcut keyboard. Gutenberg Global Shortcuts
| Shortcut Action | Mac Shortcut | Windows Shortcut |
|---|---|---|
| Display shortcut window | Ctrl Opt H | Alt Shift H |
| Save your changes | Cmd S | Ctrl S |
| Undo your last changes | Cmd Z | Ctrl Z |
| Redo your last undo | Cmd Shift Z | Ctrl Shift Z |
| Show or hide the settings sidebar | Cmd Shift , | Ctrl Shift , |
| Navigate to the next part of the editor | Ctrl ` | Ctrl ` |
| Navigate to the previous part of the editor | Ctrl Shift ` | Ctrl Shift ` |
| Switch between Visual Editor and Code Editor | Cmd Opt Shift M | Ctrl Alt Shift M |
Gutenberg Block Shortcuts
| Shortcut Action | Mac Shortcut | Windows Shortcut |
|---|---|---|
| Duplicate the selected block(s) | Cmd Shift D | Ctrl Shift D |
| Remove the selected block(s) | Cmd Opt Backspace | Ctrl Alt Backspace |
| Insert a new block before the selected block(s) | Cmd Opt T | Ctrl Alt T |
| Insert a new block after the selected block(s) | Cmd Opt Y | Ctrl Alt Y |
| Change the block type after adding a new paragraph | / | / |
Kết luận
Hy vọng qua bài viết này sẽ giúp các bạn có thể bước đầu quen hơn với việc sử dụng Gutenberg trong WordPress. Trong các bài viết sau chúng ta sẽ tìm hiểu về cách code để thêm block cho Gutenberg. Tham khảo: https://atomicblocks.com/use-gutenberg-like-a-pro-with-keyboard-shortcuts/
