Question

我在编写第一个自定义古腾堡块时遇到一些问题。按照官方教程，我创建了一个简单的块，用于保存内容和相关的对齐属性。试图添加第二个属性，我遇到了第一个问题。 CMS前端运行良好。我可以在wp编辑器上看到该块，可以保存内容，但是在重新加载编辑器页面后无法使该块工作。该自定义属性名为“ myauthor”，可以通过侧面板进行管理。

阻止内容：

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

const { __ } = wp.i18n;
const {
    registerBlockType,
} = wp.blocks;
const {
    RichText,
    AlignmentToolbar,
    BlockControls,
} = wp.blockEditor;
const { InspectorControls } = wp.editor;
const { PanelBody } = wp.components;

const { Button } = wp.components;


registerBlockType( 'callout-block/bootstrap-callout2', {

title: __( 'Bootstrap Callout2' ),  icon: 'shield',     category: 'layout',     keywords: [ __( 'Bootstrap Callout2' ), ],

attributes: {
        content: {
            type: 'array',
            source: 'children',
            selector: 'p',
        },
        alignment: {
            type: 'string',
            default: 'none',
        },
        myauthor: {
            type: 'string',
            source: 'query',
            selector: 'div',
            default: 'standard',
            query: {
                myauthor: {
                    type: 'string',
                    source: 'attribute',
                    attribute: 'data-myauthor',
                },
            },
        },
    },

example: {
        attributes: {
            content: 'Hello World',
            alignment: 'right',
            myauthor: 'standard',
        },
    },

edit: ( props ) => {
        const {
            attributes: {
                content,
                alignment,
                myauthor,
            },
            className,
        } = props;

        const onChangeContent = ( newContent ) => {
            props.setAttributes( { content: newContent } );
        };

        const onChangeAlignment = ( newAlignment ) => {
            props.setAttributes( { alignment: newAlignment === undefined ? 'none' : newAlignment } );
        };

        const onChangeAuth = ( event ) => {
            props.setAttributes( { myauthor: event.target.value } );
        };

        return (
            <div>
                {
                <InspectorControls>
                    <PanelBody
                        title={ __( 'Panel Title' ) }
                        initialOpen={ true }
                    >
                        { /* Panel items goes here */ }
                        <input id="myauth" value={ myauthor } onChange={ onChangeAuth } type="text" />

                        <AlignmentToolbar
                            value={ alignment }
                            onChange={ onChangeAlignment }
                        />
                    </PanelBody>
                </InspectorControls>
                }
                {
                    <BlockControls>
                        <AlignmentToolbar
                            value={ alignment }
                            onChange={ onChangeAlignment }
                        />
                    </BlockControls>
                }
                <RichText
                    className={ className }
                    style={ { textAlign: alignment } }
                    tagName="p"
                    onChange={ onChangeContent }
                    value={ content }
                />
                <div data-myauthor={ myauthor }>myauthor:{ myauthor }</div>
            </div>
        );
    },

save: ( props ) => {
        console.log( 'check-saving:', props )
        return (
            <div>
                <RichText.Content
                    className={ `gutenberg-examples-align-${ props.attributes.alignment }` }
                    tagName="p"
                    value={ props.attributes.content }
                />
                <div data-myauthor={ props.attributes.myauthor }>myauthor:{ props.attributes.myauthor }</div>
            </div>
        );
    },

} );

控制台日志

“检查保存：”控制台日志可以正确打印我希望看到的内容，包括“ myauthor”值

问题：

保存后，我退出wordpress cms。当我回到页面编辑器时，该块被冻结，在控制台中，我可以读取以下内容：

块验证：callout-block/bootstrap-callout2

的块验证失败

由save函数生成的内容：

<div class="wp-block-callout-block-bootstrap-callout2"><p class="gutenberg-examples-align-none">content example</p><div> data-myauthor="standard">myauthor:standard</div></div>

从帖子正文中检索到的内容：

<div class="wp-block-callout-block-bootstrap-callout2"><p class="gutenberg-examples-align-none">content example</p><div> data-myauthor="custom attribute">myauthor:custom> attribute</div></div>

问题：

我在做什么错？：）

Thnx。

WordPress的古腾堡自定义块。保存自定义属性

0 个答案: