在 WordPress 中开发高度自定义的区块（blocks）除了使用 HTML，还可以利用现代 JavaScript、React、和 WordPress 的 @wordpress/block-editor 和 @wordpress/blocks 等包。这里是详细步骤，包括设置开发环境、创建区块、以及如何实现自定义功能。

1. 设置开发环境

使用 @wordpress/create-block 工具
WordPress 提供了 @wordpress/create-block 工具，简化区块开发的基本设置。

npx @wordpress/create-block my-custom-block

这会创建一个新项目文件夹 my-custom-block，包含所有必要的文件和配置。

2. 理解区块的基本结构

文件结构

my-custom-block/
├── build/
├── src/
│   ├── index.js
│   ├── edit.js
│   ├── save.js
│   ├── style.scss
│   └── editor.scss
├── block.json
├── package.json
├── README.md
└── webpack.config.js

src/: 包含区块的源代码。
block.json: 定义区块的元数据。
package.json: 包含项目的依赖和脚本。
webpack.config.js: 用于打包项目。


重要文件

block.json：定义区块的基本信息和属性。
index.js：注册区块。
edit.js：编辑视图（用于区块编辑器）。
save.js：保存视图（用于前端展示）。
编写区块代码
block.json
定义区块的基本信息：

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "my-custom-block/block",
  "title": "My Custom Block",
  "category": "widgets",
  "icon": "smiley",
  "description": "A custom block example.",
  "supports": {
 "html": false
  },
  "textdomain": "my-custom-block",
  "editorScript": "file:./build/index.js",
  "editorStyle": "file:./build/editor.css",
  "style": "file:./build/style.css"
}

src/index.js
注册区块：

import { registerBlockType } from '@wordpress/blocks';
import Edit from './edit';
import save from './save';
import './style.scss';

registerBlockType('my-custom-block/block', {
 edit: Edit,
 save,
});

src/edit.js
定义编辑视图：

import { useBlockProps } from '@wordpress/block-editor';
import { TextControl } from '@wordpress/components';

const Edit = ({ attributes, setAttributes }) => {
    const blockProps = useBlockProps();

    return (
        <div {...blockProps}>
            <TextControl
                label="Example Text"
                value={attributes.exampleText}
                onChange={(value) => setAttributes({ exampleText: value })}
            />
        </div>
    );
};

export default Edit;

src/save.js
定义保存视图：

import { useBlockProps } from '@wordpress/block-editor';

const save = ({ attributes }) => {
    const blockProps = useBlockProps.save();

    return (
        <div {...blockProps}>
            {attributes.exampleText}
        </div>
    );
};

export default save;

src/style.scss 和 src/editor.scss
定义区块的样式：

/* style.scss - 前端样式 */
.wp-block-my-custom-block-block {
    padding: 20px;
    border: 1px solid #ccc;
}

/* editor.scss - 编辑器样式 */
.wp-block-my-custom-block-block {
    padding: 20px;
    border: 1px dashed #ccc;
}

4. 构建区块
使用 npm 脚本来打包区块：

npm install
npm run build

这会编译你的 JavaScript 和 SCSS 文件到 build 目录。

5. 加载区块
确保在你的 WordPress 主题或插件中注册和加载区块。

PHP 代码
在插件或主题的 PHP 文件中：

function my_custom_block_register() {
    register_block_type(__DIR__);
}
add_action('init', 'my_custom_block_register');

6. 扩展功能
使用更多 React 组件
你可以使用 WordPress 提供的各种 React 组件，如 TextControl, MediaUpload, InspectorControls 等，以增强区块的功能。

import { InspectorControls, MediaUpload } from '@wordpress/block-editor';
import { Button, PanelBody } from '@wordpress/components';

// 在 edit.js 中使用这些组件
<InspectorControls>
    <PanelBody title="Media Settings">
        <MediaUpload
            onSelect={(media) => setAttributes({ mediaId: media.id, mediaUrl: media.url })}
            allowedTypes={['image']}
            render={({ open }) => (
                <Button onClick={open} className="button button-large">
                    Select Image
                </Button>
            )}
        />
    </PanelBody>
</InspectorControls>

动态区块
创建动态区块可以在保存时执行 PHP 代码生成内容：

function render_my_custom_block($attributes, $content) {
    // 使用 $attributes 和 $content 来生成动态内容
    return '<div class="my-custom-block">' . esc_html($attributes['exampleText']) . '</div>';
}

register_block_type('my-custom-block/block', [
    'render_callback' => 'render_my_custom_block',
]);

总结
开发高度自定义的 WordPress 区块涉及现代 JavaScript（尤其是 React）和 WordPress 提供的区块编辑器 API。你可以从基础的 HTML 开始，逐步增加交互性和复杂性。这里是主要步骤：

设置开发环境：使用 @wordpress/create-block 工具。
定义区块结构：包括 block.json, index.js, edit.js, 和 save.js。
编写代码：利用 React 和 WordPress 的 API 实现自定义功能。
构建和加载区块：通过 PHP 注册和加载区块。
扩展功能：利用 WordPress 提供的组件和钩子，进一步定制区块。
这种方法可以让你在 WordPress 中创建功能丰富且高度自定义的区块，满足各种复杂的需求。