Trong hệ sinh thái Gutenberg Block của WordPress, attributes là khái niệm cốt lõi giúp mỗi block lưu trữ dữ liệu và tùy biến giao diện linh hoạt. Nhờ đó, block không bị “cứng” về cấu trúc và có thể thay đổi theo nhu cầu người dùng.

Bài viết này sẽ giúp bạn hiểu rõ attributes trong Block WordPress, cách khai báo, cách sử dụng trong phần edit/save, và cách áp dụng attributes để tạo các block tái sử dụng, hiện đại và tối ưu hóa trải nghiệm biên tập.

Attributes Trong Block WordPress Là Gì?

Attributes là các dữ liệu mà block sử dụng để hiển thị hoặc xử lý trong Gutenberg Editor và trên frontend. Những dữ liệu này có thể là:

• Nội dung văn bản, hình ảnh, liên kết.
• Các tùy chọn thiết kế (màu sắc, kích thước, bố cục).
• Các giá trị điều khiển như boolean on/off.
• ID, class CSS, data attributes phục vụ style hoặc JavaScript.

Mỗi block có thể sở hữu nhiều attributes tùy theo chức năng mà developer định nghĩa.

Các Loại Attributes Thường Dùng

• Class: Thêm class CSS giúp style block linh hoạt.
• ID: Dùng cho anchor, scroll, JS hoặc unique identifier.
• Style: Lưu màu nền, màu chữ, spacing… dưới dạng inline style.
• Data Attributes: Dùng để truyền dữ liệu cho JavaScript.
• Dữ liệu nội dung: text, heading, image URL, icon, layout config…

Cách Khai Báo Attributes Trong Gutenberg Block

Attributes được thiết lập trong registerBlockType hoặc bên trong block.json (cách mới, chuẩn hơn). Ví dụ:

attributes: { myClass: { type: 'string', default: 'default-class', }, myId: { type: 'string', }, } 

Các thuộc tính quan trọng khi khai báo

• type: Kiểu dữ liệu (string, number, boolean, array, object).
• default: Giá trị ban đầu khi block được thêm vào.
• source / selector: Cách WordPress đọc dữ liệu từ DOM (với block static).

Các Bước Làm Việc Với Attributes

1. Khai báo attributes trong block metadata hoặc JS.
2. Sử dụng attributes trong edit và cập nhật bằng setAttributes.
3. Hiển thị trong save bằng cách render markup theo dữ liệu attributes.
4. Tạo UI chỉnh sửa qua InspectorControls, PanelBody, TextControl, ColorPalette…

Ví dụ: Block Với Hai Attributes (Class & ID)

import { registerBlockType } from '@wordpress/blocks'; import { InspectorControls } from '@wordpress/block-editor'; import { PanelBody, TextControl } from '@wordpress/components'; registerBlockType('my/plugin-block', { title: 'My Custom Block', category: 'widgets', attributes: { myClass: { type: 'string', default: 'default-class', }, myId: { type: 'string', }, }, edit: (props) => { const { attributes, setAttributes } = props; const { myClass, myId } = attributes; return ( <> <InspectorControls> <PanelBody title="Block Settings"> <TextControl label="CSS Class" value={myClass} onChange={(value) => setAttributes({ myClass: value })} /> <TextControl label="HTML ID" value={myId} onChange={(value) => setAttributes({ myId: value })} /> </PanelBody> </InspectorControls> <div className={myClass} id={myId}> <p>Hello World! Đây là block tùy chỉnh sử dụng attributes.</p> </div> </> ); }, save: (props) => { const { myClass, myId } = props.attributes; return ( <div className={myClass} id={myId}> <p>Hello World! Đây là nội dung được render từ block.</p> </div> ); }, }); 

Sử Dụng InspectorControls Để Tùy Chỉnh Attributes

InspectorControls giúp bạn thêm UI trong sidebar Gutenberg. Đây là nơi lý tưởng để:

• Nhập class và ID.
• Chọn màu sắc, spacing, border.
• Bật/tắt các tính năng của block.

Nhờ InspectorControls, block trở nên thân thiện với người dùng và cực kỳ linh hoạt.

Ứng Dụng Attributes Trong Thiết Kế & Chức Năng

• CSS: Dùng class hoặc data-attributes để tạo style theo từng block.
• JavaScript: Gắn animation, event, xử lý động theo ID hoặc data-value.
• PHP render: Với block dynamic, attributes được truyền vào render_callback.

Lợi Ích Khi Sử Dụng Attributes Đúng Cách

• Tối ưu khả năng tái sử dụng: Một block → nhiều biến thể khác nhau.
• Giảm số lượng block cần tạo: Tất cả tuỳ chỉnh nằm trong attributes.
• Dễ bảo trì & mở rộng: Code rõ ràng, logic mạch lạc.

Kết Luận

Attributes trong Block WordPress đóng vai trò rất quan trọng trong việc phát triển block hiện đại, tùy biến cao và thân thiện với người dùng. Khi bạn hiểu cách khai báo, cách sử dụng attributes và cách kết hợp với InspectorControls, bạn có thể xây dựng các block mạnh mẽ, linh hoạt và dễ mở rộng cho mọi loại theme hoặc plugin.

Nếu bạn đang phát triển theme hoặc hệ thống block FSE, hãy chuẩn hóa việc sử dụng attributes ngay từ đầu để tối ưu hiệu suất và trải nghiệm người dùng.