[分享]WordPress如何开发自定义的区块wp:html里面写wpimage?

在 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 构建动态和互动性强的内容块。