在 WordPress 中开发自定义区块并在其中使用其他区块（如 wp:image），可以通过 Gutenberg 块编辑器的 React 组件来实现。这通常涉及使用 @wordpress/blocks 和 @wordpress/block-editor 包来创建和嵌套区块。以下是详细步骤，包括创建一个自定义区块并在其内部使用 wp:image。
1. 设置开发环境
使用 @wordpress/create-block
npx @wordpress/create-block my-custom-block
这个命令会生成一个名为 my-custom-block 的项目文件夹，包含开发自定义区块所需的基础文件。
2. 创建和注册自定义区块
编辑 block.json
定义自定义区块的基本信息：
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "my-custom-block/container",
"title": "My Custom Block",
"category": "widgets",
"icon": "smiley",
"description": "A custom block with nested image block.",
"supports": {
"html": false
},
"attributes": {
"content": {
"type": "string",
"default": ""
}
},
"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/container', {
edit: Edit,
save,
});
编辑 src/edit.js
在编辑视图中使用 wp:image 块：
import { __ } from '@wordpress/i18n';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
const ALLOWED_BLOCKS = ['core/image'];
const Edit = ({ attributes, setAttributes }) => {
const blockProps = useBlockProps();
return (
<div {...blockProps}>
<h2>{__('My Custom Block', 'my-custom-block')}</h2>
<InnerBlocks allowedBlocks={ALLOWED_BLOCKS} />
</div>
);
};
export default Edit;
编辑 src/save.js
保存视图支持嵌套内容：
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
const save = ({ attributes }) => {
const blockProps = useBlockProps.save();
return (
<div {...blockProps}>
<InnerBlocks.Content />
</div>
);
};
export default save;
编辑 src/style.scss
定义区块的样式：
/* style.scss - 前端样式 */
.wp-block-my-custom-block-container {
padding: 20px;
border: 1px solid #ccc;
}
/* editor.scss - 编辑器样式 */
.wp-block-my-custom-block-container {
padding: 20px;
border: 1px dashed #ccc;
}
3. 构建和加载区块
构建区块
在项目目录中运行以下命令以构建 JavaScript 和样式文件：
npm install
npm run build
加载区块
在 WordPress 插件或主题中注册和加载区块。
插件主文件（例如 my-custom-block.php）：
<?php
/*
Plugin Name: My Custom Block
Description: A custom block with nested image block.
Version: 1.0
Author: Your Name
*/
function my_custom_block_register() {
register_block_type(__DIR__);
}
add_action('init', 'my_custom_block_register');
?>
4. 扩展功能
使用区块属性
如果需要在自定义区块中使用区块属性，可以在 edit.js 和 save.js 中处理属性。例如，为图片块添加自定义属性：
// edit.js
const ALLOWED_BLOCKS = ['core/image'];
const Edit = ({ attributes, setAttributes }) => {
const blockProps = useBlockProps();
return (
<div {...blockProps}>
<h2>{__('My Custom Block', 'my-custom-block')}</h2>
<InnerBlocks
allowedBlocks={ALLOWED_BLOCKS}
template={[
['core/image', { align: 'center' }]
]}
/>
</div>
);
};
// save.js
const save = ({ attributes }) => {
const blockProps = useBlockProps.save();
return (
<div {...blockProps}>
<InnerBlocks.Content />
</div>
);
};
使用 InspectorControls
你可以使用 InspectorControls 添加额外的设置：
// edit.js
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';
const Edit = ({ attributes, setAttributes }) => {
const blockProps = useBlockProps();
return (
<div {...blockProps}>
<InspectorControls>
<PanelBody title={__('Settings', 'my-custom-block')}>
<TextControl
label={__('Example Setting', 'my-custom-block')}
value={attributes.exampleSetting}
onChange={(value) => setAttributes({ exampleSetting: value })}
/>
</PanelBody>
</InspectorControls>
<h2>{__('My Custom Block', 'my-custom-block')}</h2>
<InnerBlocks allowedBlocks={ALLOWED_BLOCKS} />
</div>
);
};
5. 更新前端显示
如果你需要在前端显示自定义的样式或脚本，可以在 style.scss 中定义样式，或在保存视图中添加自定义 HTML 结构。
自定义前端样式
/* style.scss */
.wp-block-my-custom-block-container .wp-block-image img {
border-radius: 50%;
}
总结
通过以上步骤，你可以开发一个自定义 WordPress 区块，并在其中嵌套使用 wp:image（即 core/image）等其他核心区块。此流程包括：
- 设置开发环境：使用 @wordpress/create-block 生成基础结构。
- 创建和注册区块：在 block.json 和 index.js 中定义区块。
- 编写区块代码：在 edit.js 中使用 InnerBlocks 嵌套其他区块。
- 构建和加载区块：通过 npm 构建并在插件或主题中加载。
- 扩展功能：使用属性、控制面板等功能增强区块。
通过这种方式，你可以在自定义区块中实现复杂的布局和功能，利用 WordPress 提供的区块编辑器 API 构建动态和互动性强的内容块。
]]>
