Widgets changing Custom HTML

[jim5471]

WP5.8
PHP8.0.8
Twenty Twenty-One Theme
no plugins active

1. Go to dashboard/appearance/Widgets
2. Insert a Custom HTML Block into the footer and insert this code

<div><p>some text</p>
<a href="http://www.test.com">link text</a>
</div>
<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line.</tspan>
    <tspan x="10" y="70">Second line.</tspan>
  </text>
</svg> 

2. Update and check it appears on the webpage and is correct
3. Go back to dashboard and then back to dashboard/appearance/Widgets
4. Observe the Custom html code has changed

<div>
<p>some text</p>
<p><a href="http://www.test.com">link text</a>
</p></div>
<p><svg height="90" width="200"><br></br>
  <text x="10" y="20" style="fill:red;">Several lines:<br></br>
    <tspan x="10" y="45">First line.</tspan><br></br>
    <tspan x="10" y="70">Second line.</tspan><br></br>
  </text><br></br>
</svg></p>

5. Change another widget and update
6. Go back to dashboard and then back to dashboard/appearance/Widgets
7. Observe that the Custom html code has changed again

   <div>
   <p>some text</p>
   <p><a href="http://www.test.com">link text</a>
   </p>
   </div>
   <p><svg height="90" width="200"><br></br></svg><br><br>
     <text x="10" y="20" style="fill:red;">Several lines:<br><br><br>
       <tspan x="10" y="45">First line.</tspan><br><br><br>
       <tspan x="10" y="70">Second line.</tspan><br><br><br>
     </text><br><br><br>
   </p>
   

Didn't this used to be a problem that was fixed ?

[antonvlasenko]

Hi,
I was able to reproduce the first part of the issue (everything until step #5).
But I cannot reproduce step #7. It doesn't add any new <br> tags.
Could you please tell which browser and OS version are you on?

[jim5471]

Ok my report used Firefox 90.0.2 64bit on Windows 10 Pro 20H2 19042.1110.

So I repeated the steps creating a new paragraph block at step 5 and the results were the same as posted.

Next tried Microsoft Edge Version 92.0.902.55 (Official build) (64-bit)
At step 4 the html was changed to a new variation.

<div>
<p>some text</p>
<p><a href="http://www.test.com">link text</a>
</p></div>
<p><svg height="90" width="200"></svg><br>
  <text x="10" y="20" style="fill:red;">Several lines:<br>
    <tspan x="10" y="45">First line.</tspan><br>
    <tspan x="10" y="70">Second line.</tspan><br>
  </text><br>
</p>

At Step 7 - another small change - missing the final break

<div>
<p>some text</p>
<p><a href="http://www.test.com">link text</a>
</p>
</div>
<p><svg height="90" width="200"></svg><br>
  <text x="10" y="20" style="fill:red;">Several lines:<br>
    <tspan x="10" y="45">First line.</tspan><br>
    <tspan x="10" y="70">Second line.</tspan><br>
  </text>
</p>

This was repeated with the same result.

So a different result for different browsers - unexpected.

[sabernhardt]

It seems that the widget custom HTML block is affected by autop (or perhaps another formatting function). Within the post editor, however, a custom HTML block properly remains unchanged.

[azaozz]

Yeah, can confirm that the content of a Custom HTML block is run through @wordpress/autop (yep, not the js autop used in the old editor in core, but a modified version of it that has different defects). Don't see where that comes from, but it needs to be reported upstream.

[sabernhardt]

Thanks for confirming!

The Gutenberg issue is ​https://github.com/WordPress/gutenberg/issues/33832

[desrosj]

@sabernhardt @azaozz If I'm understanding correctly, there is nothing that can be done on the Trac side without upstream changes on the linked issue. Is this correct?

If so, let's close this out as reported-upstream.

5.8.1 RC is also in ~24 hours and there are no patches, so punting this ticket.

[azaozz]

Replying to desrosj:

Yes, seems the way to fix this would be to add some context to the block editor/Gutenberg about what is being edited (post, widgets, template, etc.), and run autop on loading "freeform" content based on that context.

[desrosj]

Thanks, I'm going to close this out then in favor of ​https://github.com/WordPress/gutenberg/issues/33832.