Custom HTML widget is flagging errors on non-HTML

[joyously]

Because I had trouble putting a <pre> tag into the Text Widget (See #42222), I tried to put it into a Custom HTML widget. But the Code Editor is flagging errors on my text, and won't let me Save the widget.

Additionally, it says there are 6 errors, when it shows 2 errors and 4 warnings. Do warnings have to be fixed to Save?

[joyously]

Trying the pre tag in the Text widget

[joyously]

Trying the pre tag in the Custom HTML widget

[joyously]

Watching the test case again, I see why it says 6 errors. Sorry for that inaccuracy.

[westonruter]

@joyously try putting the same code into the post editor. You should see the same problem as the Text widget. In the case of the Custom HTML widget, the ASCII art you are trying trying to render contains characters that need to be escaped so that the browser doesn't try to interpret them as text. The pre tag means it retains whitespace. It doesn't mean that doesn't try to parse HTML. So the Custom HTML widget is doing the right thing in preventing you from saving.

Try replacing each < with < and each > with >. It should then render and save properly.

[joyously]

Yes, I know about the post editor and the Text widget, as I referenced the other ticket about that (#42222).
My point is that this is not a breaking error, and I should be able to save the widget.
If I put this exact same thing into a 4.7.6 Text widget, it works fine. The browser knows it's an error, but renders it correctly anyway.

The problem is that the current Text widget is doing the character conversion for me, but is losing the <pre> tag, so the only other widget to use is not doing the character conversion and won't let me save.
You can see that for a non-technical user, this would make no sense, since this worked in widgets before.

[westonruter]

It's essentially a coincidence that the ASCII art works even though it is invalid HTML. If the angle brackets were combined with any letter characters then the browser would start interpreting it as an HTML tag. I think the Custom HTML widget's behavior here is correct.

[alexvorn2]

Maybe we can add "pre" functionality that will replace special characters and add pre tags...
For example I will type:

<p>text</p>

1. select all text
2. click pre special button and the result will be like this:

<pre>&lt;p&lt;text&lt;/p&lt;</pre>

[alexvorn2]

Replying to joyously:
hi! You can try to use my new plugin I added recently to the WordPress plugins directory:
​https://wordpress.org/plugins/pre-tag-for-wp-editor/
Paste your ASCI art into the editor, select it, press pre tag and use that code that you can insert into Custom HTML text widget.