自定义Gutenberg块无法保存渲染：最后两个块失效求助

核心问题分析 #

你的问题出在两个关键点：PHP块注册时的脚本handle不匹配，以及JS中块的save函数返回格式不符合Gutenberg规范，这两个问题共同导致最后两个块无法在前端正常渲染。

具体修复步骤 #

1. 修正PHP块注册的脚本关联 #

你在PHP里给每个块指定了单独的editor-script（比如price-list），但实际只注册了misan-custom-blocks这一个脚本handle，其他handle根本不存在。修改gutenberg-blocks.php中的块注册代码，统一使用正确的脚本handle：

//register blocks
register_block_type('misan-custom-blocks/paragraph-with-title', [
    'editor-script' => 'misan-custom-blocks'
]);
register_block_type('misan-custom-blocks/company-numbers', [
    'editor-script' => 'misan-custom-blocks'
]);
register_block_type('misan-custom-blocks/opinions', [
    'editor-script' => 'misan-custom-blocks'
]);
register_block_type('misan-custom-blocks/contact-form', [
    'editor-script' => 'misan-custom-blocks'
]);
register_block_type('misan-custom-blocks/image-with-text', [
    'editor-script' => 'misan-custom-blocks'
]);
register_block_type('misan-custom-blocks/offers', [
    'editor-script' => 'misan-custom-blocks'
]);
register_block_type('misan-custom-blocks/price-list', [
    'editor-script' => 'misan-custom-blocks'
]);

2. 修正JS块的返回格式 #

Gutenberg块的save和edit函数要求返回单一根元素，你当前返回的是数组格式，会导致保存的HTML结构异常。修改priceList.js（以及对应的offers.js）：

const {registerBlockType} = wp.blocks;

registerBlockType('misan-custom-blocks/price-list', {
    title: 'Price list',
    icon: 'list-view',
    category: 'extension-blocks',
    edit: ({attributes, setAttributes}) => {
        return (
            <section id={'price'}>
                <p>test</p>
            </section>
        );
    },
    save: ({attributes}) => {
        return (
            <section id={'price'}>
                <p>test</p>
            </section>
        );
    }
});

3. 重新打包并测试 #

确保修改后的JS文件被正确打包到dist/blocks.js，然后重新编辑页面：删除原有问题块，重新添加后保存，刷新前端页面即可看到效果。

内容的提问来源于stack exchange，提问作者Tsume