我创建了一个自定义的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>
我唯一的猜测是，这可能是由于属性的某些错误配置所致。但它们似乎完全适合我。
如果您能指出正确的方向，那就太好了。我正试图整天工作。
亲切的问候
此问题几乎是因为您已经注册了块，然后使用该块创建了页面，然后修改了保存功能或属性。您应该提供不推荐使用的数组以列出所做的更改，以便Gutenberg知道您已更改了配置。有关不推荐使用的块的更多文档，请参见here