Allowable tags gettings stripped from Header blocks when drafts are auto-saved

[maddisondesigns]

Issue Overview

I wanted to add a header, with part of the text being enclosed in a <span></span> tag. When I tried to add the span tag in the Visual Editor, it simply escaped the angle brackets (which was expected).

I then switched to the Code Editor, added in the span tags to my Headers and saved my draft

When I viewed the page on the front-end, the headers included my span tags as expected.

I then wanted to edit the span tags but now, every time it auto-saves, it removes my span tags.

Steps to Reproduce (for bugs)

1. Create new page
2. Add several Header blocks
3. Switch to Code Editor
4. Edit the Header blocks by adding some text within a span tag (e.g. <span>some text</span>)
5. Save draft
6. Switch to back Visual Editor
7. Preview page and verify span tags exist in headers
8. Switch to Code Editor again
9. Add span tags to Header blocks again (as content has been stripped by the switch back to the Code Editor)
10. As soon as the page auto-saves, it strips the span tags

Expected Behavior

Allowable tags such as <span></span> shouldn't be stripped when in the Code Editor either when saving or auto-saving

Current Behavior

Strips allowable tags

Gutenberg 2.5.0
Firefox Quantum 59.0.2 (64-bit)
WP 4.9.4

[danielbachhuber]

Thanks for the detailed report, @maddisondesigns

I believe this is a deliberate design decision: any markup outside of the defined schema is stripped from the block. I'll let @aduth or @mtias confirm this though.

Generally, there's some room for discussion on whether we alert the end user to the fact their data is being transformed (and some data removed in the process).

Regardless, we should make sure the behavior is explicitly documented one way or another #4186

Related #6096 #4498

[aduth]

The RichText component / children source are not very opinionated on the types of elements they accept, so it's not immediately obvious to me why these would be stripped. I would acknowledge that it is perhaps intentional that certain controls may not be made visible in the UI, but manually inserting them may still be expected to support.

[ZebulanStanphill]

Since <span> tags (as well as <abbr>, <b>, <code>, <i>, <kbd>, <mark>, <span>, <time>, and various other inline semantic tags) are allowed in Paragraph blocks and List blocks, I see no reason to prevent them from being used in Header blocks via the "Edit as HTML" option.

[maddisondesigns]

@danielbachhuber We need to be able add tags like span into headers so that we can provide extra styling. There's been countless times where I've had to provide headings (both in the body content & the main title) where I've need to include <span> tags to include extra styling such as a change of colour or style or even size.

The existing TinyMCE editor allows me to do this by switching to the Text tab so Gutenberg should allow me to do it as well.

[aduth]

I've been unable to reproduce this in my testing. Can you verify whether this is still an issue?

If so, could you list any other plugins you have active which may be manipulating saved post content?

[maddisondesigns]

@aduth I just tested this with 2.7.0 and it looks like those tags no longer get stripped. I've only tested with <span> but unless anyone else has an objection, I'm happy for this to be closed.

[ZebulanStanphill]

I can confirm this is fixed. I tested with some <kbd> and <time> tags, and both were kept after saving. 😃