Я создаю пользовательский блок Гутенберга.Он отлично работает при сохранении и появляется на передней панели, но как только я возвращаюсь к нему, он читает.
Блок содержит недопустимое или неожиданное содержимое
Когда я иду, чтобы разрешить блок, я получаю дополнительный figure, вставленный вокруг моего MediaUpload компонента.
figure inserted around my MediaUpload component.">
Выход консоли показывает структуру блока, за исключением текста, добавленного в.
Я видел похожую проблему, когда узлы HTML функции редактирования не совпадали с узлами HTML функции сохранения.Увидев это, я дважды проверил, чтобы убедиться, что мои узлы выровнены, и я верю, что они есть, если я не пропущу что-то.Вот код для блока:
const { RichText, MediaUpload, PlainText } = wp.editor;
const { registerBlockType } = wp.blocks;
const { Button } = wp.components;
import './style.scss';
import './editor.scss';
registerBlockType('stackoverflow/image-card', {
title: "Image Card",
icon: 'feedback',
category: 'common',
attributes: {
title: {
source: 'text',
selector: '.imageCard__title'
},
body: {
type: 'string',
source: 'children',
selector: '.imageCard__body'
},
imageAlt: {
attribute: 'alt',
selector: '.imageCard__image'
},
imageUrl: {
attribute: 'src',
selector: '.imageCard__image'
}
},
edit({ attributes, className, setAttributes }) {
const getImageButton = (openEvent) => {
if(attributes.imageUrl) {
return (
<img
src={ attributes.imageUrl }
onClick={ openEvent }
className="image"
/>
);
}
else {
return (
<div className="button-container">
<Button
onClick={ openEvent }
className="button button-large"
>
Pick an image
</Button>
</div>
);
}
};
return (
<div className="container">
<MediaUpload
onSelect={ media => { setAttributes({ imageAlt: media.alt, imageUrl: media.url }); } }
type="image"
value={ attributes.imageID }
render={ ({ open }) => getImageButton(open) }
/>
<h3>
<PlainText
onChange={ content => setAttributes({ title: content }) }
value={ attributes.title }
placeholder="Your card title"
className="heading"
/>
</h3>
<div className={className}>
<RichText
onChange={ content => setAttributes({ body: content }) }
value={ attributes.body }
multiline="p"
placeholder="Your card text"
/>
</div>
</div>
);
},
save({ attributes }) {
const cardImage = (src, alt) => {
if(!src) return null;
if(alt) {
return (
<img
className="card__image"
src={ src }
alt={ alt }
/>
);
}
// No alt set, so let's hide it from screen readers
return (
<img
className="card__image"
src={ src }
alt=""
aria-hidden="true"
/>
);
};
return (
<div className="container">
<img
className="card__image"
src={ attributes.imageUrl }
alt={ attributes.imageAlt }
/>
<h3 className="card__title">{ attributes.title }</h3>
<div className="card__body">
{ attributes.body }
</div>
</div>
);
}
});