Gutenberg là gì?​

​Nói ngắn ngọn:

Gutenberg là sự thay thế TinyMCE Editor

 

Gutenberg không phải là sự thay đổi đơn giản về giao diện. Mà nó là sự thay đổi cách thức bạn biên soạn nội dung trong website.

Với Gutenberg, phương pháp tạo nội dung sẽ dựa trên các khối (giải thích thêm bên dưới). Mục tiêu của Gutenberg giúp bạn có được công cụ mạnh mẽ và linh hoạt để xây dựng toàn bộ website bao gồm landing page và những nội dung quan trọng khác. Nghĩa là: bạn không chỉ thuần tùy sử dụng Gutenberg để tạo nội dung đơn giản.

Cách Gutenberg làm việc

Thông thường bạn sẽ có một khung soạn thảo để nhập vào nội dung và chỉnh sửa giống như Word. Nhưng với Gutenberg bạn sẽ làm việc với các khối riêng lẻ.

Các khối này cho phép bạn tạo ra các thiết kế phức tạp. Điều này bạn không thể làm được với trình biên tập hiện tại.

Vậy khối là gì?

Khối trong Gutenberg có thể là bất cứ thừ gì. Ví dụ bạn có thể có các khối sau:

• Khối văn bản đơn giản.
• Khối hình ảnh
• Video embed (khối nhúng video)
• Button
• Widget (bạn có thể sử dụng widget như ở trên sidebar)
• Bảng

Mỗi khối trong Gutenberg là một thực thể độc lập bạn có thể tùy chỉnh riêng rẽ.

Ví dụ đây là một bài post gồm 2 khối: text và image. Bạn có thể sắp xếp hai khối bằng click nút mũi tên. ​

Vậy Gutenberg là một page builder có đúng không?

Không hoàn toàn.

Gutenberg cho phép bạn dễ dàng định kiểu nội dung thông thường bài post hay page chuẩn. Nhưng nó không phải là sự thay thế 1:1 cho page builder.

Gutenberg vẫn thiếu 2 thứ cơ bản quan trọng:

• Cột
• Kéo thả

Tuy nhiên, Gutenberg loại bỏ nhu cầu page builder nếu bạn muốn xây dựng nội dung đơn giản. Nó tạo ra một cách thức thống nhất để tạo layout phức tạp hơn một chút.

Nhưng nếu bạn cần xây dựng page với bố cục phức tạp, như landing page, bạn vẫn cần tới page builder. Gutenberg vẫn cần nhiều thời gian mới có thể thay thế được page builder tốt nhất ngoài kia.

​Cách cài đặt và sử dụng Gutenberg

Bạn có thể nhìn thấy giao diện Gutenberg bằng việc tạo một bài viết mới: ​

 

Xây dựng layout đầu tiên sử dụng Gutenberg editor

Trước khi bắt tay vào việc bổ sung một vài khối, chúng ta cùng xem chi tiết giao diện của Gutenberg:

• (A): cho phép bạn bổ sung khối mới
•  (B): undo/redo
•  (C): truy cập phần document setting bao gồm category và tag, ảnh đại diện giống như phần sidebar trong WordPress editor hiện tại.
•  (D): khi bạn chọn một khối, phần này cho phép truy cập setting cho khối đang chọn.
•  (E): cho phép truy cập preview bài post/page đang soạn thảo.
•  (F): Ngay khi bạn bổ sung khối, đây là nơi bạn thực sự làm việc với nội dung của post.

Cách làm việc với khối trong Gutenberg

​Để bổ sung một khối mới bạn chỉ cần click vào icon có dấu cộng và chọn khối bạn muốn:

Ở trên bạn đã nhìn thấy cách thêm một khối paragraph cơ bản. Nhưng Gutenberg cung cấp cho bạn rất nhiều khối khác nhau được nhóm thành những phần khác nhau:

Phần Recent và Saved duy nhất giúp bạn dễ dàng truy cập những khối bạn hay dùng.

Để truy cập tới tất cả các khối, bạn click vào tab Blocks và Embeds.

​Ở tab Blocks bạn sẽ có:

• 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.

Trong tab Embed, bạn có thể nhúng nội dung từ các nguồn bên ngoài, bao gồm:

• Youtube
• Facebook
• Twitter
• Instagram​

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

Ở đây chúng ta thử xây dựng một layout cơ bản bao gồm:

• Text cơ bản
• Hình ảnh
• Pull quote
• Nhúng video từ Youtube​

Mặc định khối text đã được bổ sung. Chúng ta xem cách bổ sung khối không phải là text.

Thêm block không phải là text

Bây giờ bạn click vào nút dấu cộng và thêm khối Image:

​

Bây giờ bạn chỉ cần upload ảnh từ máy hoặc chèn một ảnh có sẵn từ Media Library:

Khối ảnh sẽ hiển thị như bên dưới:

Bây giờ bạn sẽ chèn tiếp khối Pull Quote như dưới:

​Nhập vào nội dung cho Pull Quote:

Click vào tab Embeds để chèn Youtube video:

Cuối cùng xuất bản bài viết: