Gutenberg – trình soạn thảo mặc định của WordPress – đã đánh dấu một bước ngoặt lớn trong cách chúng ta xây dựng nội dung. Với hệ thống “block-based” mạnh mẽ, Gutenberg không chỉ đơn thuần là công cụ viết bài mà còn trở thành nền tảng dựng giao diện hiện đại.

Tuy nhiên, để tận dụng hết tiềm năng của Gutenberg, bạn cần biết cách tạo ra các block tùy biến theo đúng nhu cầu người dùng hoặc dự án. Trong bài viết này, chúng ta sẽ khám phá toàn diện quy trình và nghệ thuật phía sau việc xây dựng các Gutenberg block tùy chỉnh.

---

Tại sao nên tạo Gutenberg block tùy biến?

Mặc dù Gutenberg đi kèm hàng chục block mặc định như đoạn văn, ảnh, gallery, heading… nhưng trong thực tế, bạn rất dễ gặp các yêu cầu như:

• Block hiển thị danh sách bài viết theo category
• Block pricing table theo design riêng
• Block testimonial, team member, portfolio…
• Block tích hợp API bên ngoài (ví dụ: hiển thị giá crypto, feed mạng xã hội, review sản phẩm…)

Đây là lúc custom block phát huy sức mạnh.

Tự tạo block giúp bạn:

• Làm chủ trải nghiệm giao diện
• Tối ưu hiệu suất
• Đảm bảo tính linh hoạt khi khách hàng yêu cầu chỉnh sửa

---

Các cách xây dựng Gutenberg block

WordPress cung cấp nhiều phương pháp để tạo block, tùy theo trình độ kỹ thuật và mục tiêu dự án:

1. Sử dụng InnerBlocks và block template

Phù hợp với trường hợp đơn giản, bạn chỉ định cấu trúc sẵn block con trong 1 block cha.

<InnerBlocks
  template={[
    ['core/heading', { level: 3 }],
    ['core/paragraph', { placeholder: 'Nhập nội dung...' }],
  ]}
  templateLock="all"
/>

2. Register block với @wordpress/create-block

Công cụ CLI chính thống của WordPress, giúp bạn scaffolding nhanh một block:

npx @wordpress/create-block ten-block-cua-ban

Nó tạo ra:

• File JS cho edit/save block
• File block.json định nghĩa metadata
• Hệ thống build với Webpack sẵn sàng

3. Viết hoàn toàn bằng tay (Advanced)

Phù hợp cho team lớn, plugin phức tạp. Bạn tự cấu hình Webpack, Babel, PostCSS để tối ưu performance, code splitting, dynamic block loading…

---

Cấu trúc cơ bản của một block

Một Gutenberg block thông thường gồm:

1. block.json – Metadata: tên, category, icon, support…
2. Edit component (edit.js) – Giao diện trong trình soạn thảo
3. Save component (save.js) – Cách render ra frontend
4. Styles (style.scss) – Style cho editor và frontend

Ví dụ đơn giản:

block.json

{
  "name": "custom/pricing-table",
  "title": "Pricing Table",
  "category": "design",
  "icon": "money",
  "editorScript": "file:./index.js"
}

edit.js

import { useBlockProps } from '@wordpress/block-editor';

export default function Edit() {
  return (
    <div {...useBlockProps()}>
      <h3>Gói Pro</h3>
      <p>Giá: 299.000đ/tháng</p>
    </div>
  );
}

save.js

import { useBlockProps } from '@wordpress/block-editor';

export default function Save() {
  return (
    <div {...useBlockProps.save()}>
      <h3>Gói Pro</h3>
      <p>Giá: 299.000đ/tháng</p>
    </div>
  );
}

Một số API hữu ích khi làm block

WordPress cung cấp nhiều API giúp việc xây dựng block trở nên dễ dàng và linh hoạt:

• useBlockProps – Gắn props mặc định
• RichText, MediaUpload, InnerBlocks – Thành phần giao diện
• InspectorControls – Tùy chọn hiển thị trong sidebar
• useSelect & useDispatch – Kết nối với store, quản lý state phức tạp

---

Thực tiễn tốt khi phát triển block

✅ Tách riêng phần logic và trình bày

Giúp dễ maintain và tái sử dụng code.

✅ Hạn chế inline style

Thay vào đó, sử dụng SCSS hoặc CSS Module để tối ưu performance.

✅ Hỗ trợ responsive và accessibility

Dùng các thẻ semantic, kiểm tra khả năng truy cập với keyboard/screen reader.

✅ Sử dụng 

block.json

 đầy đủ

Tận dụng các flag như supports, example, attributes để tối ưu trải nghiệm editor.

---

Gutenberg vs Page Builder: Cuộc chơi đã thay đổi

Khi Gutenberg mới ra mắt, nhiều người cho rằng nó sẽ không thể thay thế các page builder như Elementor, WPBakery. Nhưng hiện nay, với sự phát triển mạnh mẽ của block API, full site editing (FSE), và cộng đồng block library mở rộng như Kadence, GenerateBlocks, Stackable…, Gutenberg đã trở thành chuẩn tương lai của WordPress.

---

Lời kết

Xây dựng Gutenberg block tùy biến là kỹ năng quan trọng đối với mọi developer WordPress hiện đại. Nó không chỉ giúp bạn tạo nên giao diện đẹp mắt, tối ưu trải nghiệm người dùng mà còn mở ra cơ hội tạo ra sản phẩm thương mại mạnh mẽ (plugin, theme, block suite…).

Đừng chỉ dừng lại ở việc sử dụng block – hãy tạo ra block của riêng bạn.