引言

WordPress 5.0 引入了全新的編輯器 Gutenberg，它基于區(qū)塊（Block）的概念，讓內(nèi)容編輯更加靈活。然而，默認(rèn)的區(qū)塊可能無(wú)法滿足所有需求，因此開發(fā)自定義區(qū)塊成為許多 WordPress 開發(fā)者的必備技能。本文將帶你一步步學(xué)習(xí)如何開發(fā) WordPress 自定義塊，從環(huán)境搭建到最終發(fā)布。

準(zhǔn)備工作

在開始開發(fā)之前，確保你的環(huán)境滿足以下條件：

1. WordPress 5.0+：Gutenberg 編輯器需要較新版本的 WordPress。
2. Node.js 和 npm：用于構(gòu)建和編譯前端代碼。
3. 代碼編輯器：如 VS Code、Sublime Text 等。

步驟 1：創(chuàng)建插件目錄

自定義區(qū)塊通常以插件形式存在。在 wp-content/plugins 目錄下創(chuàng)建一個(gè)新文件夾，例如 my-custom-block，并在其中創(chuàng)建以下文件：

my-custom-block/
├── my-custom-block.php (主插件文件)
├── src/ (存放前端代碼)
│   └── index.js (區(qū)塊的 JavaScript 入口)
├── build/ (編譯后的文件)
└── package.json (Node.js 依賴管理)

步驟 2：初始化插件

在 my-custom-block.php 中寫入以下代碼，注冊(cè)插件：

<?php
/**
* Plugin Name: My Custom Block
* Description: 一個(gè)自定義的 WordPress 區(qū)塊。
* Version: 1.0.0
*/

function my_custom_block_init() {
register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_block_init' );

步驟 3：配置前端開發(fā)環(huán)境

在插件目錄下運(yùn)行以下命令初始化 package.json：

npm init -y
npm install @wordpress/scripts --save-dev

修改 package.json，添加構(gòu)建腳本：

{
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
}
}

步驟 4：編寫自定義區(qū)塊代碼

在 src/index.js 中編寫區(qū)塊邏輯：

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';

registerBlockType('my-custom-block/hello-world', {
title: 'Hello World Block',
icon: 'smiley',
category: 'common',
attributes: {
content: {
type: 'string',
default: 'Hello, WordPress!'
}
},
edit: ({ attributes, setAttributes }) => {
return (
<TextControl
label="輸入內(nèi)容"
value={attributes.content}
onChange={(content) => setAttributes({ content })}
/>
);
},
save: ({ attributes }) => {
return <p>{attributes.content}</p>;
},
});

步驟 5：編譯并測(cè)試

運(yùn)行以下命令編譯代碼：

npm run build

然后在 WordPress 后臺(tái)激活插件，并在 Gutenberg 編輯器中搜索 “Hello World Block” 測(cè)試你的自定義區(qū)塊。

進(jìn)階功能

1. 添加樣式：通過(guò) editor.css 和 style.css 分別控制編輯器和前端的樣式。
2. 動(dòng)態(tài)渲染：使用 PHP 動(dòng)態(tài)渲染區(qū)塊內(nèi)容（需在 block.json 中配置）。
3. 國(guó)際化支持：通過(guò) @wordpress/i18n 實(shí)現(xiàn)多語(yǔ)言支持。

結(jié)語(yǔ)

你已經(jīng)學(xué)會(huì)了如何開發(fā)一個(gè)簡(jiǎn)單的 WordPress 自定義區(qū)塊。隨著深入實(shí)踐，你可以創(chuàng)建更復(fù)雜的區(qū)塊，甚至發(fā)布到 WordPress 插件庫(kù)供他人使用。Happy Coding！