Cách tạo Gutenberg Block trong WordPress

Trong bài viết này, mình sẽ giới thiệu cho các bạn những cách để tạo một Gutenberg Block.

1. Yêu cầu

Để bắt đầu, chúng ta cần cài đặt NPM và Node.js. NPM là một trình quản lý gói cho Node.js. Vì vậy, sau khi cài đặt Node.js, bạn cũng sẽ có quyền truy cập để sử dụng NPM. Bạn cũng có thể hứng thú với Yarn.

2. Các công cụ có sẵn

Chúng ta có thể tạo một khối Gutenberg từ đầu. Có nghĩa là chúng ta sẽ tự cài đặt, tùy chỉnh cấu hình webpack, Babel, v.v. nhưng để làm cho việc phát triển đơn giản nhất có thể, mình sẽ sử dụng các công cụ dưới đây để tạo khối Gutenberg.

Chúng ta có 3 tools cung cấp môi trường cho việc phát triển Block Gutenberg dễ dàng hơn:

• create-guten-block – Gói NPM không chính thức nhưng khá tuyệt vời được tạo bởi Ahmad Awais.
• @wordpress/block – Gói của WordPress chính thức trên NPM để tạo Gutenberg block.
• wp scaffold block – tạo một Gutenberg block bằng WP CLI.

Tất cả những công cụ này đều rất tốt để tạo ra một bản mẫu Gutenberg block. Tuy nhiên, mình khuyến nghị các bạn nên sử dụng create-guten-block hoặc @wordpress/block để phát triển.

Mình thường sử dụng create-guten-block nên mình sẽ chỉ giới thiệu về tools này, còn 2 cái kia các bạn tự tìm hiểu nhé.

3. Tạo Gutenberg Block với create-guten-block

create-guten-block là một công cụ tuyệt vời để phát triển các Gutenberg Block. create-guten-block được phát triển bởi ahmadawais.

Với create-guten-block bạn không cần phải config gì nữa cả, vì công cụ này đã setup môi trường webpack, babel,… từ a-z cho bạn rồi.

Để bắt đầu:

• Mở Terminal hoặc CMD lên.
• Đi đến folder bạn muốn create plugin, mình thường để trong folder plugins của wp luôn \wp-content\plugins\

Gõ lệnh npx create-guten-block {your-gutenberg-block-plugin}.

Lưu ý: Lệnh trên tạo một plugin WordPress với tên plugin đã cung cấp của bạn.

Ví dụ: Mình tạo một plugin tên là my-block

npx create-guten-block my-block

sau đó đi vào folder plugin my-block để bắt đầu phát triển

cd my-block
npm start

để build production thì bạn dùng

npm build

Những file và folder bạn cần quan tâm nằm trong thư mục src nha, đây là folder chính để phát triển các block của bạn.

.
├── block
│   ├── block.js
│   ├── editor.scss
│   └── style.scss
├── blocks.js
├── common.scss
└── init.php

Như các bạn có thể thấy, trong folder src này có 3 file và 1 folder:

• init.php: Đây là file để bạn Enqueue Gutenberg Block assets cho cả frontend + backend.
• common.scss: Đây là file để tạo các biến, mixins, style chung cho các block.
  • Nhưng có một vấn đề khi bạn viết style trong file này đó là css trong file này sẽ bị lặp lại trên mỗi block bạn tạo, dẫn đến việc bị dư css không cần thiết. Hiện tại thì author vẫn chưa có phản hồi, bạn có thể xem chi tiết issue tại đây https://github.com/ahmadawais/create-guten-block/issues/295
• blocks.js: Là file main js, tất cả các tệp JavaScript liên quan đến block phải được nhập vào đây. Bạn có thể tạo một thư mục block mới và includes cho block đó ở đây.
• folder block: Đây là 1 folder block
  • block.js: là file main js của chính block này, các logic, UI/UX sẽ được viết trong này bằng ReactJS
  • editor.scss: đây là css ở phần editor backend
  • style.scss: đây là css ở phần frontend

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>
		);
	},
} );

Để plugin có thể chạy được, bạn cần phải build các file js, scss bằng cách sau:

• Open cmd lên và đi vào folder plugin của bạn:  \wp-content\plugins\{your-gutenberg-block-plugin}
• Chạy lệnh npm run build hoặc yarn build

Trong chế độ dev thì bạn chạy npm run start hoặc yarn start.

Sau đó active plugin lên và kiểm tra block vừa tạo có hoạt động không nhé.

Ở bài viết tiếp theo mình sẽ giới thiệu cho các bạn chi tiết hơn về variable, attributes, block setting, các filed component.