Я создал настраиваемый блок 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>
Я только предполагаю, что это могло быть из-за неправильной конфигурации атрибутов. Но они кажутся мне совершенно подходящими.
Если бы вы могли указать мне правильное направление, это было бы здорово. Я пытаюсь заставить это работать весь день.
С уважением
