Gutenberg没有保存我的自定义块数据--这个块包含意外的或无效的内容。

Question

我正在创建一个非常简单的iframe。当我第一次添加这个块时，这个块工作得很好。如果我刷新页面并尝试编辑该块，它将显示消息“此块包含意外或无效的内容”。

我已经检查了控制台，我可以看到：

Content generated by `save` function:

<div class="wp-block-create-block-xenome xenome-align-left text-box-align-left has-very-light-gray-color has-text-color has-background" style="background-color:#000;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><iframe src="" frameborder="0"></iframe></div>

Content retrieved from post body:

<div class="wp-block-create-block-xenome xenome-align-left text-box-align-left has-very-light-gray-color has-text-color has-background" style="background-color:#000;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><iframe src="https://google.com" frameborder="0"></iframe></div>

注意，保存函数中缺少src (值)。

这是我的编辑：

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';




/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
 */
 import {
    useBlockProps,
    RichText,
    BlockControls,
    InspectorControls,
    AlignmentToolbar,
    PanelColorSettings,
    ContrastChecker,
} from '@wordpress/block-editor';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */
// export default function Edit() {
//  return (
//      <p { ...useBlockProps() }>
//          { __( 'Xenome – hello from the editor!', 'xenome' ) }
//      </p>
//  );
// }




import {
    // eslint-disable-next-line
    __experimentalBoxControl as BoxControl,
    PanelBody,
    TextControl,
    RangeControl,
} from '@wordpress/components';
import classnames from 'classnames';


const { __Visualizer: BoxControlVisualizer } = BoxControl;

export default function Edit( props ) {

    const { attributes, setAttributes } = props;
    const { text, alignment, style, shadow, shadowOpacity } = attributes;

    const onChangeAlignment = ( newAlignment ) => {
        setAttributes( { alignment: newAlignment } );
    };
    const onChangeText = ( newText ) => {
        setAttributes( { text: newText } );
    };
    const onChangeShadowOpacity = ( newShadowOpacity ) => {
        setAttributes( { shadowOpacity: newShadowOpacity } );
    };
    const toggleShadow = () => {
        setAttributes( { shadow: ! shadow } );
    };

    const classes = classnames( `xenome-align-${ alignment }`, {
        'has-shadow': shadow,
        [ `shadow-opacity-${ shadowOpacity }` ]: shadow && shadowOpacity,
    } );

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Settings', 'xenome' ) } >
                    <p>Create your campaign at <a href="https://xenome.app/">https://xenome.app</a> and paste your share&nbsp;link&nbsp;below.</p>

                   <TextControl

                        value={ attributes.text }
                        onChange={ ( value ) => { setAttributes( {text: value } ) } }
                        placeholder={ __( 'https://xenome.app/s/2df46475-588f-404f-a50c-ec1b1293dd51/start', 'xenome' ) }
                    />

                </PanelBody>
                { shadow && (
                    <PanelBody title={ __( 'Shadow Setting', 'xenome' ) }>
                        <RangeControl
                            label={ __( 'Shadow Opacity', 'xenome' ) }
                            value={ shadowOpacity }
                            min={ 10 }
                            max={ 40 }
                            step={ 10 }
                            onChange={ onChangeShadowOpacity }
                        />
                    </PanelBody>
                ) }
            </InspectorControls>
            <BlockControls
                controls={ [
                    {
                        icon: 'admin-page',
                        title: __( 'Shadow', 'xenome' ),
                        onClick: toggleShadow,
                        isActive: shadow,
                    },
                ] }
            >

            </BlockControls>
            <div
                { ...useBlockProps( {
                    className: classes,
                } ) }
            >
                <div class="over-controls">
                <p>
                <svg width="20" height="20" class="custom-icon custom-icon-github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" aria-hidden="true" focusable="false"><g id="Group_8654" data-name="Group 8654" transform="translate(3.999 -10.085)"><path id="Rectangle_4113" data-name="Rectangle 4113" d="M0,0H36a0,0,0,0,1,0,0V36a0,0,0,0,1,0,0H15A15,15,0,0,1,0,21V0A0,0,0,0,1,0,0Z" transform="translate(-3.999 10.085)" fill="#fff"></path><path id="Path_66" data-name="Path 66" d="M14.7-2.663H10.863L.378-18.009H4.216ZM7.414-12.119l3.655-5.89h3.495L9.1-9.749Zm.64,2.853L3.9-2.663H.469l5.8-8.7Z" transform="translate(12.109 42.543)" fill="#010911"></path></g></svg>
                Create your campaign at <a href="https://xenome.app/">https://xenome.app</a> and paste your share&nbsp;link&nbsp;below.</p>
                <TextControl
                    value={ attributes.text }
                    onChange={ onChangeText }
                    placeholder={ __( 'https://xenome.app/s/2df46475-588f-404f-a50c-ec1b1293dd51/start', 'xenome' ) }
                />
                </div>
                <BoxControlVisualizer
                    values={ style && style.spacing && style.spacing.padding }
                    showValues={
                        style && style.visualizers && style.visualizers.padding
                    }
                />

                <iframe
                src={ attributes.text }
                frameBorder="0"
                ></iframe>

            </div>

        </>
    );
}

我的救星是：

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
 */

import { useBlockProps, RichText } from '@wordpress/block-editor';
import classnames from 'classnames';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
 *
 * @return {WPElement} Element to render.
 */






export default function save( { attributes } ) {
    const { text, alignment, shadow, shadowOpacity } = attributes;

    const classes = classnames( `xenome-align-${ alignment }`, {
        'has-shadow': shadow,
        [ `shadow-opacity-${ shadowOpacity }` ]: shadow && shadowOpacity,
    } );

    return (
        <div
            { ...useBlockProps.save( {
                className: classes,
            } ) }
        >
        <iframe src={ attributes.text } frameBorder="0"></iframe>
        </div>
    );
}

如果有人能帮忙那就太棒了。

类似于：WordPress Gutenberg:此块包含意外或无效的内容

Answer 1

save()输出与post主体不匹配的一个可能原因是属性"text“是如何定义的。假设您在您的创建块中使用了block.json，那么检查用于"text“的来源是否从<iframe>的src属性中检索保存的值，例如：

block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    ...
    "attributes": {
        "text": {
            "source": "attribute",
            "selector": "iframe",
            "attribute": "src",
            "default": "https://google.com"
        }
    },
    ...
}