Question

我正在古腾堡（基于create-guten-block）中构建此自定义包装程序块。它本身可以正常工作，但不会保存Innerblocks！因此，当我在编辑器中添加新块时，它显示得很好，但是当我保存并刷新时，内部块消失了！（包装器仍保留有保存的属性）。

你们中有谁能告诉我为什么？

“我的版块”（包装）：

import './style.scss';
import './editor.scss';

const {__} = wp.i18n; // Import __() from wp.i18n
const {registerBlockType} = wp.blocks; // Import registerBlockType() from wp.blocks
const { ColorPalette, InnerBlocks, MediaUpload, InspectorControls } = wp.editor;
const {Button, RangeControl, PanelBody, PanelRow, RadioControl } = wp.components; // used in Inspector controls

registerBlockType('my-blocks/my-section', {
    title: __('my Section'), // Block title.
    icon: 'welcome-add-page',
    category: 'common',
    keywords: [
        __('my Section'),
        __('my Block'),
    ],
    attributes: {
        overlayOpacity: {
            type: 'number',
            default: 40
        },
        sectionBackgroundImage: {
            type: 'string',
            default: null
        },
        sectionBgColor: {
            type: 'string',
            default: '#e2e2e2',
        },
        sectionLineColor: {
            type: 'string',
            default: 'gray', //rgba(194,194,194,0.8)
        }
    },
    edit: props => {
        const {
            setAttributes,
            attributes,
            className
        } = props;
        const {overlayOpacity, sectionBackgroundImage, sectionBgColor, sectionLineColor} = props.attributes;

        return ([

            <InspectorControls>
                /*This code is edited out to save space*/
            </InspectorControls>,

            <section className={[className  + ' page-section-top page-section-bottom ' + sectionLineColor]}
                     style={{
                         backgroundColor: sectionBgColor,
                         backgroundImage: `url(${sectionBackgroundImage})`,
                         backgroundSize: 'cover',
                         backgroundPosition: 'center'
                     }}
            >
                <div className="page-section-image-dimmer"
                     style={{opacity: overlayOpacity / 100}}
                />
                <InnerBlocks />
            </section>
        ]);

    },
    save: props => {
        const {
            className
        } = props;
        const {overlayOpacity, sectionBackgroundImage, sectionBgColor, sectionLineColor} = props.attributes;

        return ([
            <section className={[className  + ' page-section-top page-section-bottom ' + sectionLineColor]}

                     style={{
                         backgroundColor: sectionBgColor,
                         backgroundImage: `url(${sectionBackgroundImage})`,
                         backgroundSize: 'cover',
                         backgroundPosition: 'center'
                         }}
            >
                <div className="page-section-image-dimmer"
                     style={{opacity: overlayOpacity / 100}}
                />
                <InnerBlocks.Content />
            </section>
        ]);
    }
});

Answer 1

实际上...看来我的代码是正确的。不知何故，创建guten的模块设置存在问题。我做了一个全新的安装，并将上面的代码复制到一个新的自定义块中，现在它可以工作了：）

为什么我的<InnerBlocks.Content />无法保存？

1 个答案: