Hướng dẫn sử dụng Gutenberg – New Block Editor trên WordPress [NEW]

Kể từ đó, WordPress 5.0 đã được phát hành kể từ ngày 6 tháng 12 năm 2018. WordPress đã thay đổi trình chỉnh sửa cổ điển thành trình chỉnh sửa khối.

Nó được đặt tên là Gutenberg (trình chỉnh sửa khối), và chính thức là một phần của WordPress (trình duyệt mặc định).

Gutenberg mang đến một cái nhìn và cách tiếp cận hoàn toàn mới cho việc sáng tạo nội dung.

Và trong bài viết này, Hawk sẽ hướng dẫn các bạn sử dụng Gutenberg.

Cho dù bạn có cập nhật lên WordPress 5.0 hay không

Hoặc vẫn sử dụng trình soạn thảo cổ điển, đừng bỏ lỡ!

Vì sớm muộn gì bạn cũng phải quen thôi.

Gutenberg là gì?

Gutenberg là tên dự án mới cho trình chỉnh sửa khối WordPress mới.

Trình chỉnh sửa này sẽ thay thế trình soạn thảo TinyMCE mặc định trong WordPress 5.0.

Mặc dù Gutenberg là tên của trình soạn thảo mới này, nhưng giờ đây nó thường được gọi là “trình chỉnh sửa khối” “trình chỉnh sửa khối WordPress” hoặc “trình chỉnh sửa WordPress”.

Vì nó đã trở thành một phần của WordPress.

Vì vậy, bạn sẽ thấy nó được gọi là trình chỉnh sửa khối nhiều hơn Gutenberg.

Gutenberg không chỉ là một bản cập nhật giao diện đơn thuần.

Nó đã thay đổi hoàn toàn trải nghiệm, bằng cách chuyển sang sử dụng các khối cho nội dung.

Mặc dù trọng tâm vẫn là tạo nội dung.

Nhưng mục tiêu cuối cùng của trình chỉnh sửa khối Gutenberg vẫn là “tạo ra các bài đăng không chỉ là một nơi để viết nội dung mà còn có thể tùy chỉnh”.

Sau đó, bạn có thể xây dựng toàn bộ trang web với các khối bao gồm: trang đích, trang và bài đăng, và các nội dung khác.

Gutenberg là một phần của WordPress?

Một cách chính xác !

Nếu bạn chưa cập nhật phiên bản mới, hãy cập nhật ngay!

Ngay cả khi bạn không thích Gutenberg.

Vì bản cập nhật WordPress 5.2 mới cũng liên quan đến các vấn đề về hiệu suất và bảo mật.

Trình soạn thảo Gutenberg hoạt động như thế nào?

Như tôi đã trình bày ở trên, Gutenberg là một trình soạn thảo khối hoạt động dựa trên các khối.

Dưới đây tôi sẽ giải thích rõ hơn.

Dựa trên khối là?

Về cơ bản, Gutenberg sẽ thay thế trình soạn thảo TinyMCE cũ bằng rất nhiều khối riêng lẻ.

Các khối này sẽ cho phép bạn xây dựng các thiết kế phức tạp hơn trình soạn thảo cổ điển.

Khối là gì?

Đây là phần thú vị nhất của Gutenberg.

Chặn nó có thể là bất cứ điều gì. Một số ví dụ về khối có thể là:

• Chữ
• Hình ảnh
• Video nhúng
• Cái nút
• Tiện ích (như thanh bên bạn thường thấy)
• Bàn
• ……

Và điều tốt hơn nữa cho các nhà phát triển là họ có thể tạo các khối (bên thứ 3).

Họ có thể viết các plugin và làm cho nó dễ sử dụng hơn.

Mỗi khối ở đây là một thể hiện riêng biệt, bạn có thể làm bất cứ điều gì bạn muốn.

Vì vậy, Glutenberg là một trình xây dựng trang phải không?

Không hẳn vậy! Thoạt nhìn thì có vẻ tương tự, nhưng nó vẫn chưa đạt đến điểm đó.

Nó sẽ giúp bạn dễ dàng hơn trong việc tạo nội dung thông thường như các bài đăng trên blog hoặc các trang.

Nhưng nó vẫn chưa phải là một trình xây dựng trang để trở thành một người xây dựng trang web.

Gutenberg đang thiếu hai điều quan trọng:

• Cột linh hoạt – mặc dù có khối cột cơ bản, Gutenberg vẫn không linh hoạt bằng các trình tạo trang.
• Kéo và thả – Gutenberg cho phép bạn sắp xếp các khối bằng cách kéo và thả, nhưng nó không miễn phí như trình tạo trang.

Okie vì vậy Gutenberg không phải là một người xây dựng trang, cho đến bây giờ.

Nhưng nó cũng cung cấp nhiều khả năng hơn để tạo các kiểu nội dung cho bài đăng.

Nếu bạn muốn tạo trang đích, hãy xem xét sử dụng các trình tạo trang tốt nhất hiện nay.

Bởi hiện tại Gutenberg sẽ còn mất nhiều thời gian để đạt được đẳng cấp đó.

Tôi có bắt buộc phải sử dụng Gutenberg không? Tôi vẫn thích sử dụng trình chỉnh sửa cũ hơn

Không ! bạn không cần phải sử dụng trình chỉnh sửa khối mới.

Bạn hoàn toàn có thể vô hiệu hóa Gutenberg ngay cả khi đã nâng cấp lên phiên bản WP 5.2.

Với plugin Classic Editor, hoặc đọc bài viết dưới đây.

Hướng dẫn tắt Gutenberg và giữ lại trình chỉnh sửa Cổ điển trong WordPress

Tôi có thể sử dụng tất cả các chủ đề với Gutenberg không?

Bây giờ nó là một phần của WP, vì vậy bạn có thể sử dụng nó với bất kỳ chủ đề WordPress nào.

Nhưng để chọn chủ đề nào hoàn toàn tương thích với Gutenberg.

Đó sẽ là một câu chuyện khác:

• Chủ đề đó sẽ phải có các khối mới được tích hợp sẵn
• Nó sẽ phải giống như một biên tập viên trực tiếp tốt hơn.

Tôi sẽ đi sâu hơn về chủ đề này sau.

Hướng dẫn sử dụng Gutenberg – Trình chỉnh sửa khối

Nếu bạn đã sẵn sàng sử dụng Gutenberg mới. Sau đó, đây sẽ là một phần dành cho bạn.

Tôi sẽ chỉ cho bạn cách sử dụng trình chỉnh sửa khối mới này.

Giúp bạn tận dụng các tính năng mới trong WordPress 5.0

Khám phá nhanh giao diện của trình chỉnh sửa khối

Trước khi bắt đầu thêm các khối, hãy cùng Hawk xem qua giao diện mới này nhé!

• AC: Cho phép bạn thêm các khối mới
• GỠ BỎ: Nút hoàn tác / làm lại
• D: Xem trước bài viết, bên cạnh là nút đăng bài
• E: Sẽ có các cài đặt cho bài viết như danh mục, thẻ, liên kết cố định, hình ảnh nổi bật …
• F: Sau khi bạn chọn bất kỳ khối nào, nút này cung cấp cho bạn nhiều tùy chỉnh chuyên sâu hơn về khối đó.
• G: Tại đây bạn sẽ điều chỉnh các chế độ xem trên trình chỉnh sửa này.

Thêm khối mới

Bây giờ mình sẽ hướng dẫn các bạn thêm một khối mới để chỉnh sửa trên trình chỉnh sửa khối.

Nhấp và biểu tượng [mks_icon icon=”fa-plus-circle” color=”#000000″ type=”fa”]và chọn loại nội dung bạn muốn

Tôi sẽ giới thiệu cho bạn một vài khối cơ bản, được sử dụng nhiều nhất.

Như trên bạn có thể thấy từ Được dùng nhiều nhất:

Bao gồm các hình thức như:

• đoạn văn
• hình ảnh
• phần mở đầu
• phòng trưng bày
• danh sách
• quoute

Gutenberg có nhiều khối và được chia thành các phần:

• Các phần tử nội tuyến: đây chỉ hình ảnh nội tuyến
• Khối chung: giống như hầu hết các sử dụng, đây là các khối thường được sử dụng
• Định dạng: các loại khối cho các định dạng khác (HTML, trích dẫn, bảng, mã)
• Các yếu tố bố cục: cho phép bạn chia bố cục thành 2 cột 3 cột, chia bài viết.
• Vật dụng: các loại mã ngắn, bài đăng hoặc danh mục mới nhất, thậm chí hiển thị các tiện ích con ngay trong gutenberg
• Nhúng: nhúng các loại nội dung bên ngoài như Facebook, Youtube …

Tạo giao diện cơ bản với Gutenberg

Nếu bạn chỉ muốn tạo một phần nội dung đơn giản, kiểu bài đăng trên blog sẽ cần:

• Đoạn văn
• Hình ảnh
• Danh sách
• Trích dẫn
• Nhúng video Youtube

Đây là cách thực hiện:

Bạn có thể viết nó trực tiếp trong trình chỉnh sửa mới.

Hoặc nếu bạn thích, bạn có thể viết trên Google Doc và dán nó vào đây.

Nó sẽ tự động chuyển đổi thành các khối.

Chèn định dạng cơ bản trong Gutenberg

Một trong những định dạng phổ biến nhất sau văn bản là hình ảnh

Để chèn hình ảnh vào bài viết bằng trình chỉnh sửa khối.

Bạn chỉ cần thêm một khối mới để chọn Hình ảnh, ở bất kỳ đâu ngay cả giữa hai khối văn bản.

Và khối ảnh mới sẽ được chèn vào giữa.

Nhấp vào nút Tải lên để tải hình ảnh lên hoặc kéo và thả hình ảnh vào hộp này.

Ở bên phải sẽ là tùy chọn cho hình ảnh (văn bản thay thế, kích thước hình ảnh ..)

Bạn có thể làm điều tương tự với trích dẫn.

Chèn video từ Youtube, chọn khối trong phần Nhúng »Youtube

Nhập liên kết video youtube và video sẽ xuất hiện ở đây.

Tách các cột bằng gutenberg

Trình chỉnh sửa khối cho phép bạn chia bố cục thành các cột.

Thêm khối mới »Phần tử bố cục» Cột

Nó sẽ được chia thành 2 cột riêng biệt, ở 2 cột này bạn có thể tiếp tục chèn khối bất kỳ.

Nếu bạn muốn chia thành 3, 4 cột, bạn có thể chọn lại các cột khối 1.

Sau khi hoàn thành bài viết, bạn có thể bấm xuất bản để xuất bản.

Cách tùy chỉnh các khối

Có rất nhiều khối, vì vậy trong hướng dẫn này tôi sẽ tập trung vào một vài khối cơ bản.

Chỉ cho bạn cách tùy chỉnh chúng.

Bạn có thể dễ dàng tùy chỉnh nội dung trong khối. Chỉ cần nhấp trực tiếp và nhập.

Bạn có thể định dạng nội dung này bằng các nút ở trên như: Căn trái, phải, giữa, in nghiêng, in đậm.

Ngoài ra, bạn cũng có thể thay đổi màu sắc, kiểu và màu nền bằng menu bên phải.

Về kiểu dáng sẽ cho phép bạn chọn kiểu nút, như hình vuông hoặc cạnh tròn.

Cách di chuyển các khối

Có 2 cách để di chuyển khối, đó là nhấn vào mũi tên [mks_icon icon=”fa-chevron-up” color=”#000000″ type=”fa”] [mks_icon icon=”fa-chevron-down” color=”#000000″ type=”fa”]

Hoặc giữ và kéo khối lên và xuống. Bạn phải nhấp và giữ vào 6 dấu chấm!

Okie, vậy là bạn đã có hiểu biết cơ bản về cách sử dụng trình chỉnh sửa khối mới.

Bạn sẽ mất một thời gian để làm quen với nó.

Nhưng sau khi bạn thành thạo trình soạn thảo mới. Bạn sẽ thấy Gutenberg linh hoạt hơn nhiều so với trình soạn thảo cổ điển.

Một số mẹo sử dụng Gutenberg

Dưới đây là một số mẹo nâng cao khi bạn làm quen với Gutenberg.

Nó sẽ giúp bạn làm việc nhanh hơn, tiết kiệm thời gian hơn.

Nhanh chóng tạo khối bằng bàn phím

Ngoài việc bấm nút [mks_icon icon=”fa-plus-circle” color=”#000000″ type=”fa”] để tạo khối.

Có một cách khác nhanh hơn để tạo khối là phím tắt.

Bạn chỉ cần sử dụng cú pháp: / name-block

Hộp gợi ý sẽ xuất hiện liên quan đến từ khóa bạn tìm kiếm

Đó là một tính năng rất tiện lợi và tiết kiệm thời gian.

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

Bạn có thể chỉnh sửa mã nguồn trực tiếp bằng cách nhấp vào menu 3 chấm ở góc bên phải

Và lựa chọn Trình soạn thảo mã.

Bật toàn màn hình, thanh công cụ cố định

Trình chỉnh sửa khối trình chỉnh sửa mới, cho phép bạn tùy chỉnh một số chế độ Lượt xem:

• Thanh công cụ trên cùng: thanh công cụ sẽ xuất hiện ở đầu trình soạn thảo văn bản
• Chế độ Spotlight: chỉ tập trung vào một khối bạn đang chỉnh sửa (các khối khác sẽ bị mờ)
• Chế độ toàn màn hình: chế độ toàn màn hình

Sử dụng phím tắt để tiết kiệm thời gian

Trên Gutenberg có các phím tắt riêng cho trình soạn thảo này.

Tôi cũng đã giới thiệu chi tiết trong bài viết:

Nhấn tổ hợp phím: Shift + Alt + SHIFT Bảng phím tắt sẽ xuất hiện.

Tạo các khối có thể tái sử dụng

Nếu bạn có các khối cần sử dụng nhiều lần, bạn có thể lưu chúng.

Và sử dụng lại trong những lần tiếp theo, hãy đặt tên cho chúng.

Lần sau bạn có thể chèn vào bài viết như các block khác.

Các bước:

• Chọn khối bạn muốn lưu
• Nhấp vào dấu 3 chấm
• Chọn Thêm vào khối có thể tái sử dụng

Sử dụng các plugin hỗ trợ trình chỉnh sửa khối

Đã có một số bên thứ 3 phát triển các khối cho Gutenberg.

Nó sẽ có nhiều khối và tính năng để bạn tùy chỉnh.

Tôi sẽ giới thiệu với các bạn trong bài tiếp theo.

Nội dung cũ thì sao?

Câu hỏi là “Sau khi tôi chuyển sang trình chỉnh sửa chặn, nội dung cũ có bị ảnh hưởng không?“

Đừng lo lắng – Tất cả nội dung của bạn vẫn giữ nguyên.

Khi bạn cập nhật lên WordPress 5.0 trở lên, nó sẽ tự động di chuyển tất cả nội dung cũ của bạn vào một khối cổ điển duy nhất.

Về cơ bản đây là TinyMCE (trình soạn thảo cũ) được nhúng trong khối

Có một số cách để chỉnh sửa nội dung cũ này:

• Để nó trong khối cổ điển và chỉnh sửa nó giống như trình chỉnh sửa cũ.
• Chọn 3 dấu chấm và chọn chuyển đổi thành khối. Nó sẽ chia nội dung của bạn thành các khối riêng lẻ và sau đó bạn có thể chỉnh sửa với các khối đó.

Gutenberg có gì mới trong tương lai?

Mặc dù Gutenberg hiện đã trở thành một phần của WordPress. Nhưng dự án này vẫn đang trong quá trình tiếp tục phát triển.

Hiện tại, nhóm phát triển đang làm việc để thay thế tiện ích con bằng trình chỉnh sửa khối.

Cũng như cho phép bạn tạo menu điều hướng bằng các khối.

Các tính năng này không có sẵn trong phiên bản hiện tại.

Nhưng nó vẫn đang được phát triển bởi các nhà phát triển và các bản cập nhật sắp tới.

Vì vậy, lời khuyên của tôi là, bạn nên tiếp cận và làm quen với Gutenberg sớm!

Tôi chắc rằng sẽ có rất nhiều thứ hay ho sắp ra mắt