Question

我创建了一个自定义的gutenberg块，该块将显示描述，无论我放入哪个块，最重要的是自定义json。

const { registerBlockType } = wp.blocks
const {
    RichText,
    InspectorControls,
    MediaUpload,
    InnerBlocks
} = wp.blockEditor
const {
    PanelBody,
    IconButton,
} = wp.components
const { select } = wp.data

registerBlockType('exampletheme/article-block', {
    title: 'Artikel Block',
    description: 'xxxxxxxxxx',
    icon: 'format-image',
    category: 'example-blocks',
    attributes: {
        image: {
            type: 'string',
            default: null
        },
        description: {
            type: 'string',
            source: 'html',
            selector: 'head p'
        }
    },
    edit: ({ attributes, setAttributes }) => {
        const {
            image,
            description
        } = attributes

        function updateImage(value) {
            setAttributes({ image: value })
        }
        function updateDescription(value) {
            setAttributes({ description: value })
        }
        return ([
            <InspectorControls style={{ marginBottom: '40px' }} >
                <PanelBody title="Blockeinstellungen">
                    <p><strong>Bildeinstellungen</strong></p>
                    <MediaUpload
                        onSelect={updateImage}
                        type="image"
                        value={image}
                        render={({ open }) => (
                            <IconButton
                                onClick={open}
                                icon="upload"
                                className="editor-media-placeholder__button is-button is-default is-large"
                            >
                                Bild
                                </IconButton>
                        )}
                    />
                    <br />
                </PanelBody>
            </InspectorControls>,
            <article>
                {image &&
                    <img src={image.sizes.large.url} alt={image.alt} title={image.title} />
                }
                <RichText
                    key="editable"
                    tagName="p"
                    placeholder="Kurzbeschreibung des Artikels"
                    value={description}
                    onChange={updateDescription}
                />
                <main>
                    <InnerBlocks />
                </main>
            </article>
        ])
    },
    save: ({ attributes }) => {
        const {
            image,
            description
        } = attributes
        function json() {
            const headline = wp.data.select('core/editor').getCurrentPost().title
            const imgUrl = image ? image.sizes.full.url : ''
            const datePub = wp.data.select('core/editor').getCurrentPostAttribute('date')
            const authorName = wp.data.select('core').getCurrentUser.name
            return `
                {myJsonString}
            `
        }
        return (
            <article>
                <head>
                    {image &&
                        <picture>
                            <source media="(max-width: 150px)" srcset={image.sizes.thumbnail.url} />
                            <source media="(max-width: 300px)" srcset={image.sizes.medium.url} />
                            <source media="(max-width: 1024px)" srcset={image.sizes.large.url} /> */}
                        <img src={image.url} alt={image.alt} title={image.title} />
                        </picture>
                    }
                    <h1>{wp.data.select('core/editor').getCurrentPost().title}</h1>
                    <RichText.Content
                        tagName="p"
                        value={description}
                    />
                </head>
                <main>
                    <InnerBlocks.Content />
                </main>
                {/* <script type="application/ld+json">{json()}</script> */}
            </article >
        )
    }
})

我的控制台出现以下错误。为了提高可读性，我关闭了json，但是它有同样的问题。我不知道为什么会这样。

Content generated by `save` function:

<article class="wp-block-myrmodtheme-article-block"><head><h1></h1><p></p></head><main></main></article>

Content retrieved from post body:

<article class="wp-block-myrmodtheme-article-block"><head><h1>test</h1><p>asdf</p></head><main></main></article>

我唯一的猜测是，这可能是由于属性的某些错误配置所致。但是它们似乎完全适合我。

如果您可以指出正确的方向，那就太好了。我正试图整天工作。

亲切的问候

Answer 1

这个问题几乎是因为您已经注册了块，然后使用该块创建了页面，然后修改了保存功能或属性。您应该提供不推荐使用的数组以列出所做的更改，以便Gutenberg知道您已更改了配置。
有关here

的更多有关不赞成使用的块的文档

古腾堡块与JSON数据

1 个答案: