Gutenberg Block Attributes

Attributes trong Gutenberg Block

Các Attributes (thuộc tính) là cách một block lưu trữ dữ liệu, chúng xác định cách một block được phân tích cú pháp để trích xuất dữ liệu từ nội dung đã lưu.

Ví dụ: Khi bạn thêm một block image, bạn chuyển qua Code Editor sẽ thấy cấu trúc như sau.

<!-- wp:image {"id":4195,"sizeSlug":"large","linkDestination":"none"} -->
<figure>...</figure>
<!-- /wp:image -->

thì trong cái khúc này chính là Attributes {"id":4195,"sizeSlug":"large","linkDestination":"none"}, bao gồm id của image, size image và tuỳ chọn link tới image.

Một block khi được đăng ký sẽ có cấu trúc như thế này:

registerBlockType( 'cgb/my-block', {
	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
	title: __( 'my-block - CGB Block' ), // Block title.
	description: __('This is description of block.'),
	icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
	category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
	keywords: [
		__( 'my-block — CGB Block' ),
		__( 'CGB Example' ),
		__( 'create-guten-block' ),
	],

	attributes: {
		values: {
			type: 'array',
			default: []
		},
		anchor: {
			type: 'string'
		}
	},
	supports: {
		'anchor': true,
	},

	edit: ( props ) => {
		return (
			<div className={ props.className }>
				...
			</div>
		);
	},

	save: ( props ) => {
		return (
			<div className={ props.className }>
				...
			</div>
		);
	},
} );

Attributes được khai báo như bạn thấy ở trên.

...
	attributes: {
		values: {
			type: 'array', //required
			default: []
		},
		anchor: {
			type: 'string'
		}
	},
...

Block Type Validation

Trường bắt buộc duy nhất cho một attributes là type. Nó chỉ ra loại dữ liệu được lưu trữ trong thuộc tính.

Các giá trị được chấp nhận phải là một trong các giá trị sau:

• null
• boolean
• object
• array
• number
• string
• integer

Block Common Sources

Attribute sources được sử dụng để xác định các giá trị thuộc tính block được trích xuất từ ​​nội dung bài đăng đã lưu. Chúng cung cấp một cơ chế để ánh xạ từ dữ liệu đã lưu sang dữ liệu JavaScript của một block.

Một số nguồn thuộc tính được sử dụng:

attribute

Sử dụng attribute để trích xuất giá trị của một thuộc tính từ markup.

Ví dụ: Trích xuất thuộc tính src từ một hình ảnh được tìm thấy trong markup của block.

{
    url: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'src',
    }
}
// { "url": "https://lorempixel.com/1200/800/" }

Trích xuất width của một image

{
    width: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'width',
    }
}
// { "width": "50" }

text

Sử dụng text để trích xuất văn bản bên trong từ markup.

Ví dụ: Lấy 1 đoạn text trong class .my-content từ markup

{
    content: {
        type: 'string',
        source: 'text',
        selector: '.my-content',
    }
}

html

Sử dụng html để trích xuất HTML bên trong từ markup.

Ví dụ: Lấy html từ figcaption

{
    content: {
        type: 'string',
        source: 'html',
        selector: 'figcaption',
    }
}
// { "content": "The inner text of the <strong>figcaption</strong> element" }

query

Sử dụng query để trích xuất một mảng giá trị từ markup.

Ví dụ: Trích xuất src và alt từ mỗi phần tử image trong markup của block.

{
    images: {
        type: 'array',
        source: 'query',
        selector: 'img',
        query: {
            url: {
                type: 'string',
                source: 'attribute',
                attribute: 'src',
            },
            alt: {
                type: 'string',
                source: 'attribute',
                attribute: 'alt',
            },
        }
    }
}
// {
//   "images": [
//     { "url": "https://lorempixel.com/1200/800/", "alt": "large image" },
//     { "url": "https://lorempixel.com/50/50/", "alt": "small image" }
//   ]
// }

Ngoài ra còn có Meta attributes, bạn có thể xem chi tiết tại đây.

Để tìm hiểu kỹ hơn về Attributes trong Gutenberg Blocks bạn có thể xem trong developer document của WordPress: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/