Hướng Dẫn Sử Dụng @wordpress/scripts Để Tạo Block Trong WordPress

Hướng Dẫn Tạo Block WordPress Bằng @wordpress/scripts Dành Cho Người Mới Bắt Đầu

Trong hệ sinh thái Gutenberg của WordPress, việc xây dựng block tùy chỉnh đã trở thành xu hướng quan trọng giúp mở rộng chức năng và tối ưu trải nghiệm biên tập nội dung. Công cụ @wordpress/scripts được ra đời nhằm đơn giản hóa quá trình thiết lập môi trường lập trình, giúp lập trình viên tạo block WordPress một cách nhanh chóng, gọn nhẹ và chuyên nghiệp hơn.

Bài viết này hướng dẫn chi tiết cách sử dụng @wordpress/scripts để tạo block từ A–Z, phù hợp cho cả người mới và lập trình viên muốn tối ưu workflow.

1. Chuẩn Bị Môi Trường Phát Triển

Trước khi bắt đầu tạo block WordPress, bạn cần chuẩn bị đầy đủ công cụ sau:

  • Một website WordPress chạy local hoặc trên hosting.
  • Node.js và npm phiên bản mới nhất.
  • Theme hoặc plugin tùy chỉnh để chứa file block.

Khi đã có đầy đủ các thành phần trên, bạn có thể bắt đầu cài đặt @wordpress/scripts để biên dịch mã JavaScript hiện đại (ESNext) sang mã tương thích với WordPress.

2. Cài Đặt @wordpress/scripts

Trong thư mục theme hoặc plugin của bạn, mở terminal và chạy lệnh:

npm install --save-dev @wordpress/scripts

Lệnh này sẽ thêm gói @wordpress/scripts vào dự án, cho phép bạn sử dụng các lệnh build, start, lint… nhằm tối ưu quá trình lập trình block.

3. Tạo Block WordPress Cơ Bản

Tạo thư mục block mới, ví dụ:

my-custom-block/

Bên trong, tạo file block.js và thêm đoạn mã sau:

 const { registerBlockType } = wp.blocks; registerBlockType( 'myplugin/my-custom-block', { title: 'My Custom Block', icon: 'smiley', category: 'widgets', edit() { return 
Hello, this is my custom block!
; }, save() { return 
Hello, this is my custom block!
; } });

Đây là cấu trúc block đơn giản nhất gồm hai hàm quan trọng:

  • edit() – hiển thị block trong trình chỉnh sửa Gutenberg
  • save() – nội dung block được lưu và hiển thị trên frontend

4. Kết Nối Block Với WordPress Qua PHP

Trong cùng thư mục, tạo file index.php và thêm mã:

 function my_custom_block_register() { wp_register_script( 'my-custom-block-script', plugins_url( 'block.js', __FILE__ ), array( 'wp-blocks', 'wp-element', 'wp-editor' ), true ); register_block_type( 'myplugin/my-custom-block', array( 'editor_script' => 'my-custom-block-script', ) ); } add_action( 'init', 'my_custom_block_register' );

Hàm này đăng ký file block.js và thông báo cho WordPress biết rằng đây là block mới.

5. Thiết Lập package.json Để Build Mã

Tạo file package.json với nội dung:

 { "name": "my-custom-block", "version": "1.0.0", "scripts": { "build": "wp-scripts build", "start": "wp-scripts start" } }

Bây giờ bạn có thể chạy:

  • npm run build – biên dịch mã để đưa lên production
  • npm run start – mode phát triển, tự động reload

6. Tạo Block Có Attributes (Nâng Cao)

Để block lưu trữ nội dung động, bạn cần dùng attributes. Ví dụ:

 registerBlockType('myplugin/my-custom-block', { attributes: { content: { type: 'string', source: 'text', selector: 'p' } }, edit({ attributes, setAttributes }) { return (