Các loại Blocks có trên Gutenberg – Block Editor

Chúng ta sẽ xem qua các blocks hiện có trên Gutenberg Block Editor, trước khi tìm hiểu cách sử dụng chúng để soạn thảo nội dung và thiết kế trang web.

Giới thiệu các blocks trên Gutenberg Editor

Trước hết, ta xem các blocks có trên Gutenberg, có 2 loại, bao gồm:

1. Các blocks có sẵn của Gutenberg (default blocks) : đây là những blocks chính chủ được tích hợp sẵn trên WordPress core, chúng ta có thể thấy mọi loại nội dung trên trang web WordPress đều được hỗ trợ dưới dạng block như paragraph, heading, image, …, mới hơn có thể thấy embed block – dùng để chèn video từ Youtube,..
2. Các blocks do theme, plugin tích hợp vào Gutenberg (addon blocks): đây là các block do các plugin hay theme tích hợp vào để hỗ trợ các tính năng chuyên biệt, ví dụ Yoast SEO có các block hỗ trợ Schema Markup như FAQs Block, How-to Block, WooCommerce có các product block, ContactForm 7 cũng hỗ trợ Form block… hoặc hỗ trợ mở rộng chức năng thiết kế cho Gutenberg như WP Stackable, GenerateBlocks, Kadence Block…

Nói chung khi làm việc với Gutenberg Editor, các block có sẵn (1) hỗ trợ cho các nhu cầu soạn thảo và thiết kế cơ bản, còn nhưng block do theme, plugin hỗ trợ (2) sẽ giúp chúng ta sử dụng các tính năng chuyên biệt và mở rộng khả năng thiết kế.

Việc bố trí các blocks trên Block Panel ở Gutenberg xếp theo thứ tự loại nội dung như Text blocks, Media blocks, Design blocks, Widget blocks,..

Default Gutenberg Blocks

Các blocks có sẵn trên Gutenberg có thể phân loại theo vai trò trong soạn thảo nội dung & thiết kế, bao gồm 6 loại: common blocks, formatting blocks, layout elements blocks, theme blocks, widgets block và embed blocks.

Lưu ý việc phân loại này không chính xác hoàn toàn như thứ tự sắp xếp trên Block Panel ở Gutenberg.

Common Blocks

Common Blocks là những blocks thường xuyên sử dụng nhất trong quá trình soạn thảo, biên tập nội dung, với các block này chúng ta có thể tạo các bài viết như trên TinyMCE Editor (Classic Editor) nhưng với bố cục linh hoạt và đa dạng hơn nhờ mỗi thành phần đều là block – nên có thể căng chỉnh – bố trí, tùy biến thiết kế dễ dàng:

• Paragraph: các đoạn văn bản, mỗi đoạn là một block, khi xuống dòng thì là một block mới.
• Image: ảnh, không trôi (float) như ở Classic Editor mà hoạt động như một block.
• Heading: các thẻ tiêu đề H1, H2,… H6 cũng là block, do đó có thể khai báo padding/ margin, hay border..
• Gallery: một tính năng trước đây cần phải dùng plugin chứ Classic Editor không hỗ trợ, nay bạn có thể tạo gallery ảnh với nhiều kiểu khác nhau ngay trên bài viết.
• List: bao gồm danh sách thứ tự (order list – ol) và không thứ tự (unorder list – ul), vì là block nên ta có thể canh chỉnh kích thước và tùy biến cách thuộc tính thiết kế mỗi ul/ ul khi tạo trang.
• Quote: phần trích dẫn bây giờ có thể tùy chỉnh như block.
• Audio: file âm thanh, có thể upload lên Media Libary hay khai báo đường link đến file trên website khác.
• Cover: nền, có thể upload images, videos hoặc tạo nền từ màu sắc có sẵn.
• File: tập tin, cần upload lên Media Library
• Video: file video, có thể upload hoặc dán link từ site khác.

Trên Classic Editor, với mỗi thành phần kể trên bạn không thể tùy chỉnh kích thước, khoản cách hay các thuộc tính màu sắc, font chữ… ngay trên editor mà phải cấu hình chung cho toàn bộ ở Theme Options hoặc Customize.

Với nhu cầu soạn thảo, biên tập bài viết thì khi cần tạo bài viết có bố cục và thiết kế nâng cao, nhóm common blocks giúp ích rất nhiều so với dùng Classic Editor.

Formatting Blocks

Formatting Blocks là các block hỗ trợ định dạng nội dung đặc biệt trên WordPress:

• Code: định dạng code, trước đây phải dùng plugin, bây giờ ta có thể viết các đoạn code vào bài viết dễ dàng hơn.
• Classic: block rất đặc biệt, nó chính là classic editor (bản rút gọn) nếu bạn cần soạn thảo một đoạn nội dung với classic editor.
• Custom HTML: block này cho phép nhúng mã HTML trực tiếp vào nội dung, rất tiện lợi.
• Preformatted: block hiển thị định dạng thô của văn bản.
• Pullquote: trích dẫn chèn vào một đoạn nội dung chính.
• Table: cho phép chèn bảng vào bài viết, đáp ứng nhu cầu chèn bảng cơ bản mà không cần cài plugin ngoài.
• Verse: block hỗ trợ viết nội dung kiểu định dạng các đoạn thơ, hiếm dùng nhưng rất hữu ích nếu chúng ta có website về thơ.

Layout Elements Blocks

Các blocks hỗ trợ bố cục trang, cực kỳ quan trọng cho nhu cầu thiết kế trang web nâng cao trên Gutenberg:

• Page Break: xuống dòng (giờ cũng phải là một block)
• Spacer: khoẳn trắng giữa 2 phần trên trang.
• Buttons: blocks cho phép chèn các nút với thiết kế có thể tùy chỉnh
• Columns: cột, thứ quan trọng nhất khi cần tạo bố cục phức tạp. Ta sẽ thao tác cái này nhiều ở topic thiết kế trang Web với Gutenberg phần tiếp theo.
• Group: nhóm các block lại, để chỉ định background chung chẳn hạn, cũng quan trọng cho thiết kế layout nâng cao.
• Media & Text: tạo banner chữ hay dạng hero banner…
• More: more block, tưởng đơn giản nhưng rất thú vị, cho phép bạn ẩn bớt nội dung trang và chỉ hiển thị phần giới thiệu, người dùng có thể xem đầy đủ khi nhấp vào more block link (ví dụ chữ Xem đầy đủ hay Read More/ Read Full Article chẳng hạn).
• Reusable block: block dùng chung, cái này rất hữu dụng – ta có thể lưu một block lại thành reusable block và dùng chung trên nhiều trang, khi chỉnh reusable block, kết quả sẽ áp dụng trên tất cả các trang đang dùng nó.
• Separator: đường chia 2 phần trên trang.

Theme Blocks

Theme Blocks là nhóm các block hỗ trợ cho các tính năng theme builder – cụ thể hơn là Full Site Editing, xuất hiện từ phiên bản 5.8 (cuối 2021), bổ sung thêm ở phiên bản 5.9 và sẽ được nâng cấp thêm liên tục về sau này.

Các block thuộc Theme blocks hỗ trợ thêm các loại nội dung trước đây thường đảm nhận bởi theme, ví dụ Navigation (Menus), Template parts, Post Title…

 

Dưới đây là danh sách toàn bộ các block thuộc theme blocks hiện nay, về cơ bản, đầy đủ để chúng ta xây dựng toàn bộ Website bằng Gutenberg, cả nội dung các trang, template cho các phần catetory, single post, header, footer…

Tuy nhiên, tính năng Full Site Editing của Gutenberg vẫn còn ở chế độ Beta, do đó các tính năng này chỉ ở mức dùng được – nghĩa là bạn có thể tạo các nội dung nhưng việc tùy chỉnh thiết kế cho mỗi block ở phần này còn hạn chế, chưa được như các page builder chuyên dụng như Elementor hay Visual Composer:

• Navigation (new in 5.9)
• Template Part (new in 5.9)
• Site Logo (new in 5.8)
• Site Tagline (new in 5.8)
• Site Title (new in 5.8)
• Query Loop (new in 5.8)
• Archive Title (new in 5.9)
• Term Description (new in 5.9)
• Post Title (new in 5.8)
• Post Content (new in 5.8)
• Post Date (new in 5.8)
• Post Excerpt (new in 5.8)
• Post Featured Image (new in 5.8)
• Post Categories (new in 5.8)
• Post Tags (new in 5.8)
• Login/out (new in 5.8)
• Page List (new in 5.8)

Ở đây chỉ đề cập sơ lượt.

Widgets Blocks

Widgets Block là các block tương ứng với các thành phần thuộc Widgets trước đây, nay mọi thứ có thể chuyển qua dạng block để cho phép cấu hình thiết kế nâng cao hơn dạng cũ.

Phần này thật ra vẫn chưa hữu dụng lắm nên WordPress có tùy chọn tắt Widgets Block đi, để người dùng sử dụng dạng Widget cũ.

• Shortcode
• Archives
• Calendar (new in 5.3)
• Categories
• Latest Comments
• Latest Posts
• RSS (new in 5.3)
• Search (new in 5.3)
• Social Icons (new in 5.4)
• Tag Cloud (new in 5.3)

Embed Blocks

Embed Blocks gồm các block giúp nhúng nội dung từ các mạng xã hội, trang videos,… phổ biến. Không cần giới thiệu nhiều vì cái này đã quá quen thuộc với người dùng WordPress trước đây:

Addon Gutenberg Blocks

Các block mở rộng (addons) dành cho Gutenberg được thêm vào bởi theme hoặc plugin, có thể để hỗ trợ cho thiết kế hoặc cho tính năng cụ thể nào đó.

Có thể sắp xếp:

• Loại hỗ trợ cho thiết kế: các addons như Stackable, GenerateBlocks, Kadence Blocks, Ultimate Addons for Gutenberg…
• Loại hỗ trợ cho tính năng: ví dụ các block cho Schema của Yoast SEO (FAQ block, How-to Block), form block của WPForms, ..

Trong panel blocks của Gutenberg, các block loại này có thể sắp riêng cho từng plugin hoặc cũng có thể để chung nhóm với các block mặc định có tính năng tương tự.

Ví dụ block của GenerateBlocks hay Stackable, Yoast.. để riêng:

Còn block của WPForms để chung trong nhóm Widgets block:

Hi vọng qua bài viết này, bạn có thể nhận biết được các loại Blocks có trên Gutenberg Editor. Hãy tham khảo bài hướng dẫn sử dụng nhé:

Hướng dẫn sử dụng Gutenberg Block Editor

Chúc thành công!