Escape Editable HTML

[ellatrix]

Description

Fixes #16252.
Fixes #13218.
Alternative to #17789.

General problem: currently we only escape "lone" ampersands (& => &) in editable text. This is a bit strange, since if you create some text, you'd expect e.g. & to be rendered as such. This is NOT the case. & needs to be converted to & in order to be rendered as &. The same is true for any other HTML entity.

Also removes a unnecessary layer of escaping and unescaping from the code block. The attribute source is of the type text, which already unescapes entities. In the code block, we only need to make sure the value from PlainText is properly escaped for use in normal HTML elements (since PlainText is a textarea and its value is unescaped.

How has this been tested?

• Create a paragraph block and type …. Preview the post. You should see … and not ….
• Create a code block and type …. Save. Reload the place. The block should be valid.

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[dmsnell]

Tested this with the following post in master…

That's actually wrong because I typed "…HTML is &" and it changed it to "…HTML is &"

Before saving and reloading this was in the text view of the editor.

<!-- wp:paragraph -->
<p>We use the &lt;code> element to signify that the text represents software source code. We say one &amp; two to mean <em>one and two</em>. The way to represent a typographical ampersand in HTML is <code>&amp;</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;div>
  &lt;p>The formula&lt;/p>
  &lt;pre>&lt;code>if ( x > 5 &amp;&amp; x &lt; 10 ):&lt;/code>&lt;/pre>
&lt;/div></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

And this displayed in the page view:

---

On this branch however…

<!-- wp:paragraph -->
<p>We use the &lt;code&gt; element…one &amp; two…<code>&amp;amp;</code></p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>&lt;div>
x > 5 &amp;&amp; x &lt; 10</code></pre>
<!-- /wp:code -->

and after save and reload

---

Regardless of the details this seems to address the issue and get us out of a painful place where you can't type what you want. Thanks @ellatrix!

[dmsnell]

This is a good fix and covers at least one common case that's frustrating.

[aduth]

Possibly related: #13218, #15780

cc @davilera

[davilera]

#13218 described an issue with < characters in core/code blocks, which is what #15780 tries to fix. @ellatrix, do you think that PR could/should be merged into this one?

[ellatrix]

@davilera Have you tested this PR? It should fix that too.

[ellatrix]

I tested #13218, and this PR fixes it too. Added a test case.

[ellatrix]

Just for extra clarity: this fixes all escaping for all HTML entities in editable text, not just &.

[ellatrix]

Thanks for the review @dmsnell!