Custom block save does not match due to stripped slashes from br tag and added figure tag around images

I'm having a problem where my <br/> tags (valid JSX) get stripped to <br> upon save which makes the editor state that the block is not the same causing it to be invalid.

This means that a user cannot update the block without deleting and re-entering all the data again which is fairly tedious.

Save Text

return ( <div>
            <RichText.Content className={subheadingClass} tagName="p" value={attributes.subheading}/>
            <RichText.Content className={subsubheadingClass} tagName="p" value={attributes.subsubheading}/>
            <br/><br/>
            <RichText.Content className={paragraphClass} tagName="p" value={attributes.paragraph}/>
         </div>
);

I also have another problem with my image tags being surrounded by a <figure> tag.

Is there a way to stop the figure tag being wrapped around my images?

Save Image

<img className={carouselClass} data-image-id={image.id} src={image.url} alt {image.alt} uk-cover/>

I am stumped as to how to get past the <br> and what causes <figure> to also be incorrect. Help on either of these would be appreciated.

The WordPress version is 5.0.3.

I'm having a problem where my <br/> tags (valid JSX) get stripped to <br> upon save which makes the editor state that the block is not the same causing it to be invalid.

This means that a user cannot update the block without deleting and re-entering all the data again which is fairly tedious.

Save Text

return ( <div>
            <RichText.Content className={subheadingClass} tagName="p" value={attributes.subheading}/>
            <RichText.Content className={subsubheadingClass} tagName="p" value={attributes.subsubheading}/>
            <br/><br/>
            <RichText.Content className={paragraphClass} tagName="p" value={attributes.paragraph}/>
         </div>
);

I also have another problem with my image tags being surrounded by a <figure> tag.

Is there a way to stop the figure tag being wrapped around my images?

Save Image

<img className={carouselClass} data-image-id={image.id} src={image.url} alt {image.alt} uk-cover/>

I am stumped as to how to get past the <br> and what causes <figure> to also be incorrect. Help on either of these would be appreciated.

The WordPress version is 5.0.3.

• block-editor

Share Improve this question edited Feb 13, 2019 at 17:23 Peter Mortensen 26822 silver badges1010 bronze badges asked Feb 9, 2019 at 17:25 SowrySowry 1122 bronze badges 1

• You need to share the full block code for us to understand the problem and suggest solution – Ashiquzzaman Kiron Commented Feb 12, 2019 at 10:04

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The error which is shown by WordPress graphically is not the same output that you actually get from the block.

Open up the browser's console, and you will see the actual expected and outcome.

Do a quick diff between the two outputs and you should be able to find your mismatch.

The break tags and figure wrapping of images only occurred in the UI error and not in practice.