I am creating very simple text block. The block works fine when I add this for the first time. If I refresh the page and try to edit the block it show me the message "This block contains unexpected or invalid content.". I have tried to disable htmlvalidation check but that doesn't help. Also, after I click on resolve: the current block and after conversion block contain same code.
http://prntscr.com/lwv18b
http://prntscr.com/lwv1e1
This is my index.js file code
<pre>
/**
* Block dependencies
*/
import icon from './icon';
import './style.css';
/**
* Internal block libraries
*/
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;
/**
* Register block
*/
export default registerBlockType(
'jsforwpblocks/richtext',
{
title: __('Bizbike Small Description', 'jsforwpblocks'),
description: __('Default title', 'jsforwpblocks'),
category: 'common',
icon: 'text',
keywords: [
__('Text', 'jsforwpblocks'),
__('Call to Action', 'jsforwpblocks'),
__('Message', 'jsforwpblocks'),
],
attributes: {
message: {
type: 'array',
source: 'children',
selector: '.message-body',
}
},
supports: {
// html: false,
className: false,
customClassName: false,
html: false,
htmlValidation: false,
},
edit: props => {
const { attributes: { message }, className, setAttributes } = props;
const onChangeMessage = message => { setAttributes({ message }) };
return (
<div id="small-text" className={className}>
<RichText
tagName="div"
multiline="p"
placeholder={__('Place the title', 'jsforwpblocks')}
onChange={onChangeMessage}
value={message}
/>
</div>
);
},
save: props => {
const { attributes: { message } } = props;
return (
<div>
<div class="commute text-center">
{message}
</div>
</div>
);
},
},
);
</pre>
