Make WordPress Core

Opened 7 years ago

Last modified 3 years ago

#42224 new defect (bug)

Custom HTML widget is flagging errors on non-HTML

Reported by: joyously's profile joyously Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9
Component: Widgets Keywords: close
Focuses: Cc:

Description

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?

Attachments (2)

text-widget-pre.gif (96.5 KB) - added by joyously 7 years ago.
Trying the pre tag in the Text widget
html-widget-pre.gif (513.6 KB) - added by joyously 7 years ago.
Trying the pre tag in the Custom HTML widget

Download all attachments as: .zip

Change History (8)

@joyously
7 years ago

Trying the pre tag in the Text widget

@joyously
7 years ago

Trying the pre tag in the Custom HTML widget

#1 follow-up: @joyously
7 years ago

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

#2 @westonruter
7 years ago

  • Keywords close added

@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 &lt; and each > with &gt;. It should then render and save properly.

#3 @joyously
7 years ago

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.
https://s1.postimg.org/1gybj72mnz/text-widget-4.7.6-ascii-art.jpg

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.

#4 @westonruter
7 years ago

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.

#5 @alexvorn2
7 years ago

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>

#6 in reply to: ↑ 1 @alexvorn2
7 years ago

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.

Note: See TracTickets for help on using tickets.