无法保存属性并在页面自定义块上渲染

Question

我创建的新自定义块，它在块列表中可见，并在编辑页面上正确呈现，但保存后，它不会在主页上呈现。

函数.php

<?php

require 'inc/autoload.php';

require 'inc/theme-functions.php';
require 'inc/gutenberg-blocks.php';

古腾堡-blocks.php

function registerExtensionCategory($categories): array
{
    $result = [
        [
            'slug'  => 'extension-blocks',
            'title' => 'Blocks category name'
        ]
    ];
    foreach ($categories as $category) {
        $result[] = $category;
    }
    return $result;
}

function misanGutenbergBlocks(): void
{
    $version = wp_get_theme()->get('Version');
    //load styles
    wp_enqueue_style('misan-custom-blocks', get_template_directory_uri() . '/misan_blocks.css', [], $version);

    //load fontawesome
    wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css');

    // load blocks js
    wp_enqueue_script('misan-custom-blocks', get_template_directory_uri() . '/dist/blocks.js', ['wp-blocks', 'wp-editor', 'wp-components', 'wp-element'], $version);

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

add_action('enqueue_block_editor_assets', 'misanGutenbergBlocks');
add_filter('block_categories_all', 'registerExtensionCategory');

proceList.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>
        ]);
    }
});

只有最后两个块（报价和价目表）不起作用，其他块按预期工作。

我尝试将块注册移动到其他功能，但它不起作用。 控制台和服务器日志中没有错误

Answer 1

我解决了我的问题，但我仍然不知道为什么它不能按我想要的方式工作。 我尝试执行以下操作：

价格表.js

import {metadata, name, price} from "./price-list/single-price.js";
import savePrice from "./price-list/save-price-list.js";
import editPrice from "./price-list/edit-price-list.js";

const {registerBlockType} = wp.blocks;

registerBlockType('misan-custom-blocks/price-list', {
    title: 'Price list',
    icon: 'list-view',
    category: 'extension-blocks',
    edit: () => editPrice(),
    save: () => savePrice()
});

registerBlockType({name, ...metadata}, price);

savePrice 和编辑 Price 返回带有文本的简单 HTML -> 它不适合我

我将“savePrice”和“editPrice”函数中的所有代码移至此文件，并摆脱了“导入”。现在它可以正常工作了。

价格表.js

const {registerBlockType} = wp.blocks;

registerBlockType('misan-custom-blocks/price-list', {
    title: 'Price list',
    icon: 'list-view',
    category: 'extension-blocks',
    edit: () => {
        return ([
            <section className={'section-inner'} id={'price-mobile'}>
                <div className={'prices'}>
                    <p>test</p>
                </div>
            </section>
        ])
    },
    save: () => {
        return (
            <section className={'section-inner'} id={'price-mobile'}>
                <div className={'prices'}>
                    <p>test</p>
                </div>
            </section>
        )
    }
});