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.

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:

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

Block Type Validation

Trường bắt buộc duy nhất cho một attributestype. 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.

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

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

html

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

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

query

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

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

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/

Làm quen với các components thường dùng khi tạo Gutenberg Block Cách tạo Gutenberg Block trong WordPress Tổng quan về Gutenberg trong WordPress Hơn 100 hình ảnh minh họa chất lượng cao, hoàn toàn miễn phí cho products của bạn Chuyển đổi các trường ACF được đăng ký bởi PHP sang định dạng JSON có thể Import 9 ứng dụng hữu ích cho Developers CSS Gap Space với Flexbox Làm tròn số trong PHP với ceil(), floor() và round() 10 mẹo để trở thành một nhà phát triển tuyệt vời Cách xóa một item khỏi Array trong JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.