Kể từ khi phiên bản WordPress 5.0 ra mắt vào ngày 6 tháng 12 năm 2018, WordPress đã thay đổi trình soạn thảo văn bản mới gọi là Gutenberg. Hiện tại Gutenberg là trình soạn thảo mặc định trên WordPress kể từ phiên bản 5.0.

Trình soạn thảo Gutenberg mang đến một cách tiếp cận hoàn toàn khác để tạo nội dung ở dạng khối. Và trong bài đăng này, bạn sẽ tìm hiểu chính xác cách sử dụng các khối đó và các tính năng khác của trình soạn thảo mới, để tạo nội dung tại trang web WordPress của bạn.

Cho dù bạn đã cập nhật trang web của mình lên WordPress 5.0 hay chưa, hãy tiếp tục đọc để tìm hiểu cách sử dụng trình chỉnh sửa khối Gutenberg mới để xây dựng nội dung và bố cục tại trang web của bạn.

Gutenberg là gì?

Gutenberg là tên trình soạn thảo văn bản ở dạng khối trên phiên bản WordPress mới nhằm thay thế trình soạn thảo WordPress TinyMCE vốn đã quen thuộc với người sử dụng.

Giao diện trình soạn thảo văn bản TinyMCE cũ:

Và đây là giao diện của trình soạn thảo mới Gutenberg:

Đó không chỉ là một bản cập nhật thay đổi chỉ về giao diện. Gutenberg thay đổi hoàn toàn trải nghiệm chỉnh sửa bằng cách chuyển sang cách tiếp cận dựa trên khối cho nội dung. Tuy có cùng mục đích là xây dựng các văn bản nhưng Gutenberg lại cung cấp một cách nâng cao hơn việc xây dựng nội dung.

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

Về cơ bản, Gutenberg thay thế trường chỉnh sửa duy nhất của trình soạn thảo WordPress TinyMCE hiện tại bằng rất nhiều khối khối riêng lẻ.

Các khối này sau đó cho phép bạn xây dựng các thiết kế phức tạp hơn các khối được phép trong trình chỉnh sửa WordPress cổ điển cũ.

Vậy khối là gì?

Vâng, các khối trong Gutenberg bao gồm rất nhiều nội dung có thể cung cấp. Ví dụ: bạn có thể có các khối cho:

- Văn bản thông thường

- Hình ảnh

- Video nhúng

- Nút

- Các widget ( vâng, những widget tương tự bạn sử dụng trong thanh bên)

- Các bảng

...

Và điều thú vị là các nhà phát triển sẽ có thể tạo các khối bên thứ ba của riêng họ mà bạn có thể truy cập thông qua các plugin để linh hoạt hơn nữa.

Mỗi khối là thực thể riêng của nó mà bạn có thể thao tác trên cơ sở cá nhân. Ví dụ: đây là một bài đăng nhanh của Gutenberg có ba khối:

2 khối văn bản

1 khối hình ảnh

Người dùng có thể dễ dàng sắp xếp lại các khối đó chỉ bằng cách kéo và thả chúng:

Và bởi vì mỗi khối là riêng biệt, bạn cũng có thể thêm những thứ như nền tùy chỉnh chỉ cho các khối cụ thể . Trình soạn thảo Gutenberg cho phép bạn linh hoạt hơn và kiểm soát sâu hơn với từng mục nội dung.

Xây dựng bố cục đầu tiên của bạn với trình chỉnh sửa khối Gutenberg WordPress

Giả sử bạn đang sử dụng WordPress 5.0 và trình chỉnh sửa khối mới, bạn đã sẵn sàng để tìm hiểu sâu về bài viết này. Dưới đây, tôi sẽ chỉ cho bạn cách thực sự sử dụng trình chỉnh sửa khối WordPress Gutenberg mới để xây dựng bố cục trang hoàn chỉnh.

Bằng cách đó, bạn sẽ sẵn sàng tận dụng tối đa WordPress WordPress và trình chỉnh sửa mới.

Tham quan nhanh giao diện trình chỉnh sửa khối WordPress

Trước khi bạn bắt đầu thêm một số khối, hãy xem qua các phần tử của giao diện trình chỉnh sửa khối chính:

(A)  - cho phép bạn thêm các khối mới.

(B)  - hoàn tác / làm lại các nút

(C)  - cung cấp cho bạn quyền truy cập vào cài đặt tài liệu, bao gồm những thứ như danh mục & thẻ, hình ảnh nổi bật, v.v ... Điều này tương tự như sidebar hiện tại trong trình chỉnh sửa WordPress

(D)  - khi bạn có một khối riêng lẻ được chọn, điều này cho phép bạn truy cập vào các cài đặt dành riêng cho khối đó

(E)  - cho phép bạn truy cập bản xem trước trực tiếp bài đăng của mình hoặc xuất bản / cập nhật bài đăng của bạn

(F)  - khi bạn thêm một số khối, đây là nơi bạn sẽ thực sự làm việc với nội dung bài đăng của mình

Thêm khối mới

Như tôi đã thảo luận trong phần giới thiệu, bạn sẽ sử dụng các khối riêng biệt của khối Cameron để xây dựng bố cục của bạn với trình chỉnh sửa mới.

Để thêm một khối mới, tất cả những gì bạn cần làm là nhấp vào biểu tượng + Plus và chọn loại nội dung bạn muốn thêm:

Trong ví dụ trên, tôi đã chỉ cho bạn cách thêm một khối đoạn cơ bản. Nhưng Gutenberg thực sự bao gồm một tấn các khối khác nhau, được chia thành các phần khác nhau:

Ở trên cùng, bạn thấy một danh sách các khối được sử dụng nhiều nhất của bạn. Nhưng nếu bạn cuộn xuống, bạn cũng sẽ thấy các phần dành cho Khối chung, Định dạng, Thành phần bố cục, Tiện ích và Nhúng:

Các phần tử nội tuyến  - chỉ chứa một khối cho một hình ảnh nội tuyến.

- Khối chung - chứa các khối xây dựng cơ bản như hình ảnh, đoạn văn ( văn bản thông thường ), tiêu đề, trích dẫn, v.v.

- Định dạng - cho phép bạn thêm nhiều nội dung được định dạng hơn như trích dẫn, bảng hoặc trình soạn thảo văn bản WordPress cổ điển

- Các thành phần bố cục - cho phép bạn chia văn bản thành hai cột, bao gồm các nút, dấu phân cách hoặc thẻ Thêm More.

- Widgets - cho phép bạn thêm mã ngắn, bài đăng mới nhất hoặc danh mục. Thậm chí có thể hiển thị các tiện ích thanh bên ngay trong Gutenberg.

- Nhúng - giúp bạn nhúng nội dung từ các nguồn bên ngoài như Twitter, YouTube, Facebook, Instagram, v.v

Xây dựng bố cục cơ bản với Gutenberg

Hãy bắt đầu đơn giản. Giả sử bạn chỉ muốn xây dựng bố cục bài đăng blog cơ bản bao gồm:

- Văn bản thông thường

- Một tấm ảnh

- Một câu trích dẫn

- Một video YouTube

Đây là cách bạn làm điều đó với Gutenberg:

Đầu tiên, bạn sẽ viết toàn bộ bài viết của mình trong trình chỉnh sửa. Hoặc, nếu bạn giống tôi và thích viết vào Google Docs , bạn có thể dán tất cả vào và sau đó Gutenberg sẽ tự động chuyển đổi nó thành các khối.

Thêm các khối phi văn bản

Bây giờ nội dung của bạn được chia thành các khối, bạn có thể di chuột qua vào trí bạn muốn chèn hình ảnh đầu tiên của mình và nhấp vào biểu tượng dấu cộng . Điều đó sẽ tạo ra một sự phá vỡ. Sau đó, nhấp vào biểu tượng dấu cộng một lần nữa để chèn khối hình ảnh:

Điều này sẽ cho phép bạn chèn một khối hình ảnh, từ đó bạn có thể tải lên hoặc chọn hình ảnh theo cách tương tự với trình chỉnh sửa WordPress hiện tại:

Khi bạn chọn hình ảnh của mình, bạn sẽ thấy nó ngay trong bố cục trang của mình:

Tiếp theo, di chuột qua vị trí mà bạn muốn chèn trích dẫn kéo và sử dụng cùng một cách tiếp cận để chèn một khối khác. 
 

Sau đó, bạn sẽ thấy khối trích dẫn mới của bạn. Để tạo trích dẫn của bạn, tất cả những gì bạn cần làm là nhấp vào khối và nhập:

Để chèn video YouTube, bạn có thể thêm một khối YouTube mới từ tab Nhúng . Để chèn video, tất cả những gì bạn cần làm là nhập URL và nhấp vào Embed:

Tùy chọn - tạo các cột khác nhau

Bạn muốn có được sáng tạo hơn nữa? Gutenberg hiện bao gồm một tính năng cột thử nghiệm cho phép bạn nhanh chóng tạo nhiều cột. Tất cả những gì bạn cần làm là thêm khối Cột (Beta) từ phần Bố cục phần tử . Sau đó, bạn có thể chèn các khối khác bên trong nó :

Khi bạn đã hoàn tất, tất cả những gì bạn cần làm là nhấp vào nút Publish:

Và bạn sẽ có bài đăng blog được định dạng của bạn ở mặt trước.

Cách tùy chỉnh các khối riêng lẻ

Vì trình chỉnh sửa WordPress Gutenberg bao gồm rất nhiều khối khác nhau, tôi không thể chỉ cho bạn cách sử dụng từng khối riêng lẻ.

Nhưng tôi có thể cung cấp cho bạn một khung cơ bản áp dụng cho tất cả các khối.

Về cơ bản, bạn kiểm soát nội dungtrong cơ thể thực tế của trình chỉnh sửa:
 
Để tạo kiểu và căn chỉnh văn bản cơ bản, bạn có thể sử dụng thanh menu xuất hiện khi bạn di chuột qua một khối:
 

Và để tạo kiểu nâng cao hơn, bạn sẽ phải tạo kiểu cho khối trong tab Cài đặt khối .

Để truy cập tab đó, chọn khối bạn muốn chỉnh sửa và duyệt đến tab Block :

Cách sắp xếp lại các khối riêng lẻ

Để sắp xếp lại các khối, bạn có hai tùy chọn. Bạn có thể sử dụng mũi tên Lên hoặc Xuống khi di chuột qua một khối để di chuyển khối theo hướng tương ứng:

Hoặc, bạn có thể kéo và thả khối. Để kích hoạt chức năng kéo và thả, bạn sẽ cần di chuột qua sáu dấu chấm giữa mũi tên lên và xuống
 

Để tất cả chúng cùng nhau

Khi bạn nắm bắt được cách mọi thứ hoạt động với trình chỉnh sửa khối mới, nó khá đau và trực quan.

Lúc đầu, bạn có thể trải qua một số cơn đau ngày càng tăng và đấu tranh để thực hiện các hành động cơ bản mà bạn đã thực hiện.

Nhưng một khi bạn hiểu rõ mọi khối nâng cao hơn mà Gutenberg đi kèm, bạn sẽ thấy nó linh hoạt hơn Trình chỉnh sửa WordPress TinyMCE.

Một số thủ thuật Gutenberg gọn gàng, nhưng tiên tiến hơn

Khi bạn trở nên quen thuộc hơn với trình chỉnh sửa khối WordPress Gutenberg, bạn có thể tìm thấy một số thủ thuật này để tiết kiệm thời gian.

Tạo nhanh một khối mới bằng cách gõ

Ở trên, tôi đã chỉ cho bạn cách tạo khối bằng nút chèn. Nhưng để tiết kiệm thời gian, bạn thực sự có thể tạo các khối bằng cách gõ cú pháp này:

/BLOCK-NAME

Một hộp gợi ý tự động sẽ xuất hiện để giúp bạn tìm khối liên quan.

Ví dụ: đây là cách tạo một khối hình ảnh chỉ bằng bàn phím của bạn:

Khá thuận tiện và tiết kiệm thời gian lớn!

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

Tại bất kỳ thời điểm nào, bạn có thể chỉnh sửa mã nguồn cho toàn bộ bài đăng của mình bằng cách nhấp vào ba dấu chấm ở góc trên bên phải và chọn Trình chỉnh sửa mã :

Kích hoạt chế độ toàn màn hình, thanh công cụ cố định, v.v.

Trình chỉnh sửa khối mới bao gồm một vài chế độ khác nhau cho phép bạn thay đổi trải nghiệm chỉnh sửa. Bạn có thể:

  • Thêm một thanh công cụ cố định như trình soạn thảo TinyMCE
  • Toàn màn hình
  • Đặt một bài nổi bật trên khối hoạt động

Để sử dụng các tiện ích này, nhấp vào  biểu tượng ba chấm ở góc trên bên phải.

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

Ngoài các phím tắt định dạng tiêu chuẩn, trình chỉnh sửa khối có một số phím tắt chuyên dụng có thể giúp bạn:

  • Chèn các khối mới bên trên hoặc bên dưới khối đã chọn
  • Xóa một khối
  • Nhân đôi một khối
  • V.v.

Để mở danh sách đầy đủ các phím tắt, sử dụng  Shift + Alt + H shortcut.

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

Nếu bạn có một bộ sưu tập / sắp xếp các khối cụ thể mà bạn cần sử dụng lại ở nhiều điểm, bạn có thể lưu một nhóm các khối làm mẫu có thể sử dụng lại. Bạn sẽ có thể đặt tên cho mẫu của bạn. Sau đó, bạn có thể chèn nó giống như bạn làm một khối thông thường.

Để tạo mẫu của bạn:

  1. Chọn các khối mà bạn muốn bao gồm
  2. Nhấp vào  biểu tượng ba chấm
  3. Chọn  Thêm vào khối tái sử dụng

Mở rộng trình chỉnh sửa khối bằng các plugin

Nếu bạn muốn có được sự ưa thích, bây giờ bạn có thể tìm thấy nhiều plugin mở rộng Gutenberg có thêm các khối riêng của chúng.

Otter Blocks là một lựa chọn tốt để giúp bạn bắt đầu. Nó cung cấp cho bạn các khối bổ sung cho những thứ như giá cả, lời chứng thực, Google Maps, biểu tượng chia sẻ, nhấp chuột vào nút tweet tweet và hơn thế nữa.

Điều gì xảy ra với tất cả nội dung cũ của bạn?

Trước khi tôi hoàn thành mọi việc, hãy để tôi nhanh chóng trình bày những gì sẽ xảy ra với tất cả nội dung cũ của bạn sau khi bạn cập nhật lên WordPress 5.0 ( nếu bạn chưa có ).

Đừng lo lắng - nó sẽ không biến mất! Nhưng trải nghiệm có một chút khác biệt:

Khi bạn cập nhật trang web của mình lên WordPress 5.0 và bạn có nội dung hiện có được xây dựng bằng trình chỉnh sửa TinyMCE ban đầu, trình chỉnh sửa khối sẽ đưa tất cả nội dung cũ của bạn vào một khối Cổ điển duy nhất . Khối Classic này về cơ bản là trình soạn thảo TinyMCE nhưng được nhúng bên trong trình chỉnh sửa khối mới.

Để làm việc với nội dung cũ của bạn, bạn có thể:

Để nó trong khối Cổ điển và chỉnh sửa nó giống như bạn làm với trình chỉnh sửa WordPress cũ

Sử dụng  biểu tượng ba chấm và chọn  Chuyển thành Khối . Điều đó sẽ phá vỡ mọi thứ thành các khối riêng lẻ. Sau đó, bạn có thể làm việc với nội dung của mình giống như ban đầu bạn đã tạo nó bằng trình chỉnh sửa khối Gutenberg.

 

 

Trình chỉnh sửa khối Gutenberg mới là tương lai

Mặc dù Gutenberg có những người không thích, nhưng nó chính thức là một phần của cốt lõi WordPress nhờ vào việc phát hành WordPress 5.0.

Đối với hầu hết người dùng thông thường, sau những khó khăn ban đầu thì sẽ mang lại trải nghiệm sáng tạo nội dung linh hoạt hơn.

Những người không phải là nhà phát triển sẽ có thể tạo ra các bố cục phức tạp hơn bằng các yếu tố bổ sung như nút , nội dung được nhúng và nhiều thứ khác. Và điều đó, hy vọng sẽ giúp WordPress tiếp tục phát triển.

Bây giờ, chúng tôi muốn nghe từ bạn. Tôi chắc rằng nhiều bạn có suy nghĩ mạnh mẽ về trình soạn thảo khối Gutenberg mới - vì vậy hãy cho chúng tôi biết về nó trong các bình luận!