Làm quen với các components thường dùng khi tạo Gutenberg Block

Trong bài viết này mình sẽ giới thiệu qua cho mọi người một số components thường sử dụng.

Component trong Gutenberg

Gói này bao gồm một thư viện các thành phần WordPress chung được sử dụng để tạo các phần tử giao diện người dùng chung được chia sẻ giữa các màn hình và các tính năng của bảng điều khiển WordPress.

Cài đặt

Cài đặt module này bằng cách

npm install @wordpress/components --save hoặc yarn add --dev @wordpress/components

Trong bài viết hôm trước về Cách tạo Gutenberg Block trong WordPress bằng create-guten-block thì nó đã tích hợp sẵn module trên rồi nên bạn không cần thiết phải cài đặt vào nữa, chỉ cần import và sử dụng thôi.

Ví dụ:

Các components thường sử dụng khi phát triển Gutenberg Blocks

RichText

RichText là một component cho phép các nhà phát triển hiển thị đầu vào có thể thay đổi nội dung, cung cấp cho người dùng tùy chọn định dạng nội dung block để làm cho nó in đậm, in nghiêng, được liên kết hoặc sử dụng định dạng khác.

RichText Reference
RichText Reference

Các bạn lưu ý lưu dữ liệu khi sử dụng RichText nên sử dụng <RichText.Content /> để có thể lưu đầy đủ định dạng bạn sử dụng như in đậm, nghiêng,…

Bạn có thể xem thêm danh sách thuộc tính của RichText tại đây.

Sử dụng:

Nested Blocks: Using InnerBlocks

Bạn có thể tạo một khối duy nhất lồng các khối khác bằng cách sử dụng thành phần InnerBlocks. Điều này được sử dụng trong Columns block, Social Links block hoặc bất kỳ khối nào bạn muốn chứa các khối khác.

Sử dụng:

  • Sử dụng thuộc tính ALLOWED_BLOCKS, bạn có thể xác định tập hợp các khối được phép trong InnerBlock của mình. Điều này hạn chế các khối chỉ có thể được đưa vào danh sách được liệt kê, tất cả các khối khác sẽ không được hiển thị.
  • Orientation: Theo mặc định, trong InnerBlocks các khối của nó được hiển thị trong một danh sách dọc. Bạn có thể sử dụng orientation để thay đổi hướng của các block trong InnerBlocks
  • Template: Sử dụng thuộc tính template để xác định một tập hợp các khối có sẵn trong InnerBlocks khi được chèn vào.

Sử dụng prop all để khóa template, không cho thực hiện thay đổi.

Button

Button là một trong những component được sử dụng nhiều trong Gutenberg.

Sử dụng:

TextControl

Component TextControl cho phép người dùng nhập và chỉnh sửa văn bản.

Sử dụng:

Ở đoạn code trên như bạn thấy thì mình có sử dụng attributes để lưu dữ liệu của input đó lại.

Khi bạn chỉnh sửa text trong input, sau đó bật qua chế độ code editor sẽ thấy dữ liệu dạng như sau:

SelectControl

SelectControl cho phép người dùng chọn từ menu một tùy chọn. Nó hoạt động như một phần tử <select> gốc của trình duyệt.

Sử dụng:

ColorPicker

ColorPicker hỗ trợ bạn chọn màu sắc, ví dụ như text color, background color.

Sử dụng:

Các components khác

Trên đây là một số components mình thấy thường được sử dụng trong quá trình phát triển Blocks Gutenberg. Ngoài ra còn rất nhiều components có sẵn khác, bạn có thể tham khảo thêm tại đây.

Component Reference
Gutenberg Block Attributes 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.