+2

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ố 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
  • Facebook
  • Twitter
  • Instagram

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/


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí