Giới thiệu Gutenberg Editor và cách sử dụng chi tiết – Phần 1

Gutenberg Editor là một trình soạn thảo nội dung động của WordPress, được giới thiệu từ phiên bản WordPress 5.0 trở đi. Đây là một công cụ mạnh mẽ giúp bạn tạo và chỉnh sửa các bài viết và trang web của mình một cách dễ dàng và linh hoạt hơn bao giờ hết. Với khả năng kéo và thả, các khối nội dung có sẵn, và một giao diện thân thiện với người dùng, Gutenberg đã mang lại một trải nghiệm làm việc mới mẻ và tiện lợi cho các nhà phát triển web và người dùng WordPress.

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn chi tiết cách sử dụng Gutenberg Editor để tạo và quản lý nội dung trên trang web của bạn. Chúng tôi sẽ khám phá từng chức năng cùng với các mẹo và thủ thuật để bạn có thể tận dụng tối đa công cụ này và tạo ra những trang web đẹp và chất lượng. Hãy cùng chúng tôi khám phá cách Gutenberg Editor có thể giúp bạn thực hiện điều đó!

Giới thiệu lịch sử hình thành, khái quát về Gutenberg và so sánh nó với các Page Builder khác

Trong hệ thống quản lý nội dung WordPress, Trình soạn thảo nội dung (Content Editor) đóng một vai trò cực kỳ quan trọng. Đây là nơi chúng ta tạo và biên tập nội dung cho các trang web, bài viết và thậm chí cả các loại nội dung khác như sản phẩm, tour du lịch hoặc khóa học.

Trước khi Gutenberg ra đời và trở thành Trình soạn thảo mặc định trên WordPress vào tháng 12 năm 2018, Trình soạn thảo WordPress dựa trên TinyMCE, một trình soạn thảo mã nguồn mở phổ biến nhất trên toàn cầu. TinyMCE không chỉ được sử dụng rộng rãi trong WordPress mà còn được tích hợp vào nhiều hệ thống quản lý nội dung khác và ứng dụng web, ví dụ như Joomla và Shopify.

Trình soạn thảo TinyMCE (Trình soạn thảo cổ điển)

TinyMCE là một trình soạn thảo văn bản trực tuyến, được thiết kế theo mô hình “What You See is What You Get” (WYSIWYG), tương tự như các trình soạn thảo như MS Word, MS FrontPage, Dreamweaver và nhiều ứng dụng khác dành cho biên tập nội dung web.

Trình soạn thảo TinyMCE trong WordPress cho phép chúng ta nhanh chóng tạo ra các bài viết và trang web, cung cấp khả năng tạo nội dung trực quan với các tính năng như:

• Sử dụng các tiêu đề (Heading: H1, H2,.. H6)
• Định dạng văn bản (in đậm, in nghiêng, gạch chân,…)
• Chèn và chỉnh sửa hình ảnh (thay đổi kích thước, canh giữa, canh lề…)
• Chèn liên kết
• Và nhiều tính năng khác.

Ngoài ra, trong WordPress, nếu chúng ta muốn thêm các thành phần khác vào bài viết, chúng ta có thể sử dụng mã ngắn (shortcode), một cách tiện lợi để nhúng các phần tử khác vào Trình soạn thảo, như nút bấm, biểu mẫu, và nhiều phần tử khác.

Trước và sau khi Gutenberg xuất hiện, Trình soạn thảo TinyMCE vẫn được ưa chuộng rộng rãi vì tính tiện lợi và là sự lựa chọn tốt cho việc biên tập nội dung trên WordPress. Khi Gutenberg trở thành Trình soạn thảo mặc định, TinyMCE vẫn được hỗ trợ thông qua một plugin gọi là “Classic Editor”. Điều này cho phép người dùng chọn sử dụng Trình soạn thảo cổ điển thay vì Gutenberg nếu họ cảm thấy thoải mái hơn với giao diện cũ. Classic Editor đã trở thành một plugin phổ biến với hơn 5 triệu lượt kích hoạt và vẫn đang được sử dụng rộng rãi cho đến ngày nay.

Sự ra đời của Gutenberg Editor

Gutenberg Editor ra đời như một phản ánh của sự thay đổi trong nhu cầu của người dùng WordPress. Nó thỏa mãn nhu cầu mới, đó là việc thiết kế trang web trở nên dễ dàng hơn, đặc biệt là với người dùng không cần có kiến thức lập trình sâu.

Trong quá khứ, thiết kế trang web trên nền tảng WordPress thường dựa hoàn toàn vào theme. Người dùng hầu như chỉ có khả năng bật hoặc tắt các phần tử có sẵn trong giao diện theme. Việc tùy chỉnh hoặc tạo ra một thiết kế hoàn toàn mới thường đòi hỏi kiến thức về mã nguồn và đôi khi phải sử dụng child theme.

Sau giai đoạn tùy chỉnh thông qua Theme Option và Widget, cách tiếp cận trong thiết kế trang web WordPress đã trải qua một cuộc cách mạng với sự ra đời của các plugin gọi là Page Builder. Những plugin như Divi, Page Builder Origin, Thrive Builder và đặc biệt là Visual Composer đã mở ra một cách tiếp cận mới. Chúng cho phép người dùng xây dựng các trang web linh hoạt hơn, cung cấp nhiều tùy chọn và mẫu có sẵn.

Tuy nhiên, quá trình xây dựng trang web bằng Page Builder thế hệ đầu thường diễn ra ở phía Back-End, nghĩa là trên bảng điều khiển của WordPress, và hỗ trợ cho Front-End Editor (trình soạn thảo trực quan ở giao diện trang web) còn hạn chế.

Trong giai đoạn này, quá trình xây dựng trang web thường không trôi chảy, thậm chí có thể gặp tình trạng trang web chậm hoặc bị treo khi đang chỉnh sửa. Có nhiều lỗi phát sinh do sự không tương thích với theme, plugin hoặc dịch vụ lưu trữ (hosting) trong quá trình sử dụng, đòi hỏi người dùng có kinh nghiệm để tìm ra nguyên nhân và khắc phục chúng.

Thêm vào đó, khả năng tùy chỉnh bố cục (layout) và thiết kế (style) của các thành phần trên trang web vẫn còn giới hạn và phụ thuộc vào mức độ hỗ trợ của theme cho Page Builder. Page Builder chỉ tương tác được với phần nội dung (Page Content) của trang web, trong khi những phần khác như Header, Footer, Single Post, Product… vẫn do theme quyết định và Page Builder không thể can thiệp vào.

Giai đoạn này (trước năm 2017) đã mang lại sự linh hoạt cho người dùng, nhưng mọi thứ đã thay đổi khi Elementor xuất hiện. Elementor cho phép người dùng xây dựng trang web trực tiếp trên Front-End, bằng cách kéo và thả các phần tử và tùy chỉnh chúng trực tiếp trên màn hình, giúp quá trình xây dựng trang web trở nên dễ dàng và trôi chảy hơn so với các Page Builder trước đó.

Sự xuất hiện của Elementor đã tạo đà cho sự ra đời của một loạt Page Builder thế hệ mới như Brizy, Oxygen, và nhiều người đàn anh như Divi, Thrive Builder, Visual Composer đã phải thay đổi để hỗ trợ Front-End Editor và tích hợp tính năng Theme Builder.

Bây giờ, việc thiết kế trang web trên WordPress đang trở thành nhiệm vụ chính của Page Builder, trong khi theme chỉ đóng vai trò hỗ trợ tích hợp thiết kế mẫu cho Page Builder. Các theme tiên phong, như Astra, OceanWP, GeneratePress, đã chuyển sang hỗ trợ việc xây dựng trang web hoàn toàn bằng Elementor trong thời gian ngắn.

Trên chợ theme lớn nhất thế giới, Themeforest, nhiều theme hàng đầu cũng đã thay đổi để tương thích và phát triển thiết kế bằng Elementor thay vì Visual Composer như trước đây. Một số theme khác đã quyết định xây dựng Page Builder riêng cho họ như Avada (Fusion Builder), Flatsome (UX Builder), Newspaper (Tagdiv Composer), X (Conerstone Builder),…

Từ năm 2019, việc thiết kế trang web trên WordPress gần như đã hoàn toàn được Page Builder chiếm lĩnh. Các nhà phát triển theme thương mại quyết định phát triển thiết kế dựa trên Page Builder, giúp người dùng có khả năng tự tạo lại toàn bộ giao diện của trang web mà không bị ràng buộc bởi thiết kế cố định của theme.

Trong vài năm ngắn ngủi, Elementor đã trở thành Page Builder số 1 thế giới, với hơn 5 triệu lượt kích hoạt. Nhiều Page Builder khác như Oxygen, Brizy, Divi, Visual Composer, Thrive Architect, cũng đã lấp đầy các ngóc ngách trên thị trường thiết kế web WordPress.

Tuy nhiên, Page Builder thế hệ thứ hai cũng đặt ra những thách thức mới. Khả năng tùy chỉnh thiết kế một cách toàn diện thường đi kèm với việc tạo mã nguồn phức tạp hơn, làm cho trang web có thể tải chậm hơn. Với Page Builder mạnh mẽ hơn, việc tối ưu hóa tốc độ trở nên phức tạp hơn.

Ngoài thế giới WordPress, đã xuất hiện nhiều công cụ xây dựng trang web với tính năng thiết kế kéo và thả tương tự như Page Builder trên WordPress, chẳng hạn như EditorX (thuộc Wix) và Webflow.

Điều này cho thấy nhu cầu này không chỉ dành cho người dùng cuối mà còn dành cho những freelancer và công ty thiết kế web. Việc thiết kế trang web không còn đòi hỏi thời gian và kiến thức về mã nguồn mà có thể thực hiện hoàn toàn trên giao diện trực tiếp bằng cách kéo và thả.

Automattic, công ty đứng sau mã nguồn WordPress, không thể bỏ lỡ xu hướng này. Họ đã quyết định tích hợp tính năng thiết kế trực tiếp vào mã nguồn WordPress, thay thế Editor cũ TinyMCE bằng Gutenberg – một Editor dựa trên khối, với kế hoạch Full Site Editing – cho phép chỉnh sửa toàn bộ trang web WordPress chỉ bằng trình soạn thảo mặc định – Gutenberg Editor.

Gutenberg, còn được biết đến với tên gọi Block Editor, đã đánh dấu một bước tiến lớn đối với nền tảng WordPress bằng việc thay thế trình soạn thảo cũ TinyMCE Editor.

Gutenberg xoay quanh khái niệm block-based, nghĩa là mọi thành phần trên trang web được xem xét như là một khối độc lập – hoàn toàn có thể tùy chỉnh với các thuộc tính thiết kế như căn chỉnh, khoảng cách, viền, bóng đổ… Với Gutenberg, mọi thứ, từ các tiêu đề (H1, H2,… H6), đoạn văn bản (P – Paragraph), đến hình ảnh (Image), đều được coi là một block.

Điều này đồng nghĩa với việc người dùng không chỉ có khả năng soạn thảo nội dung giống TinyMCE Editor, mà còn có khả năng thiết kế toàn bộ các thành phần của trang web bằng cách làm việc với các loại block mà Gutenberg hỗ trợ.

Hơn nữa, với tính năng Full Site Editing, người dùng có thể thiết kế hoàn toàn các thành phần của trang web, không chỉ giới hạn trong nội dung, mà còn bao gồm Header, Footer, Navigation (Menus), Single Post Template, Archive Templates, Widgets…

Tất cả loại nội dung trên WordPress đều có thể được thiết kế hoàn toàn bằng Gutenberg Block Editor, trong khi theme đóng vai trò hỗ trợ bổ sung tính năng và thiết kế mẫu cho Gutenberg.

Đây là mục tiêu của Gutenberg Block Editor – giúp WordPress tiến đến việc Full Site Editing một cách thành công. Tuy nhiên, quá trình này vẫn đang trong quá trình phát triển, và vẫn còn nhiều thách thức và khó khăn để Gutenberg có thể đánh bại các đối thủ như Elementor đang thống trị thị trường thiết kế WordPress. Chúng tôi sẽ bàn thêm chi tiết trong phần so sánh dưới đây.

Hành trình phát triển của Gutenberg Block Editor

Gutenberg, còn gọi là Block Editor, đã trải qua một hành trình dài để trở thành trình soạn thảo mặc định của WordPress từ phiên bản WordPress 5.0 (Bebo) vào tháng 12/2018. Trong hơn 3 năm qua, Gutenberg Editor đã trải qua nhiều phiên bản nâng cấp và sửa lỗi:

• Từ cuối 2018 đến cuối 2021: Gutenberg đã bổ sung các loại block phổ biến để hỗ trợ thiết kế trang, nâng cấp trải nghiệm người dùng và giao diện người dùng, và mở rộng khả năng tùy chỉnh thiết kế cho các block. Trong giai đoạn này, Gutenberg chỉ hỗ trợ Page Builder, tức là hỗ trợ thiết kế các phần nội dung của trang, và chưa hỗ trợ các thành phần như Header, Footer…
• Từ đầu năm 2022: Tính năng Full Site Editing đã được tích hợp vào Gutenberg, ở chế độ Beta, chỉ hoạt động với các theme hỗ trợ nó. Tính năng Full Site Editing này được gọi là Site Editor, cho phép người dùng thiết kế toàn bộ các thành phần của trang web WordPress như Header, Footer, các template cho Single Post, Archive Page…

Việc phát triển hướng Full Site Editing của Gutenberg vẫn đang tiếp tục qua từng bản cập nhật, và dự kiến sẽ hoàn thành trong giai đoạn từ 2023 đến 2024.

Trong khi đó, tính năng thiết kế Page Builder đã được sử dụng rộng rãi, và số lượng theme và plugin hỗ trợ thiết kế với Gutenberg cũng đang gia tăng.

Tính năng Full Site Editing đã bắt đầu được sử dụng và hỗ trợ bởi các theme chuyên biệt, được gọi là block-based themes.

Khi nào nên sử dụng Gutenberg Block Editor?

Gutenberg Block Editor có thể được sử dụng trong các dự án thiết kế Website WordPress chuyên nghiệp, đặc biệt là trong các trường hợp không đòi hỏi các thành phần thiết kế quá phức tạp. Dù còn kém so với Elementor, nhưng với sự hỗ trợ của các addons như GenerateBlocks, WP Stackable, chúng ta đã sẵn sàng để sử dụng Gutenberg Block Editor cho các dự án thiết kế Website WordPress chất lượng cao.

Một điều quan trọng mà nhiều người dùng WordPress không biết là có thể sử dụng cùng lúc cả Classic Editor (TinyMCE), Gutenberg Block Editor và page builder (như Elementor) trên cùng một trang web WordPress, mỗi cái phục vụ cho một nhu cầu riêng biệt và không gây xung đột. Ví dụ, bạn có thể sử dụng Classic Editor khi soạn thảo bài viết thông thường, Gutenberg Block Editor để thiết kế các trang cơ bản, và page builder để thiết kế các trang đòi hỏi thiết kế phức tạp.

Kết hợp với việc tối ưu hóa tốc độ một cách hợp lý, bạn có thể xây dựng một dự án Website WordPress cao cấp mà vẫn đảm bảo tốc độ tải nhanh.

Giới thiệu các block hiện có trên Gutenberg Editor

Ở phần này chúng ta sẽ xem qua các blocks hiện có trên Gutenberg 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.

Khái quát

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 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:

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

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 sẽ nói riêng ở với phần block patterns phía dưới.
• Separator: đường chia 2 phần trên trang.

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, chúng ta sẽ hiểu chi tiết cách sử dụng các blocks này ở Case study  – Thiết kế Website WordPress với Gutenberg Block Editor.

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 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:

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