Wordpress 6 Block Custom HTML formats and inserts <br /> and removes some <p> and add some <p>

Question

Using the latest the greatest WordPress (6.2.2), my problem is simple. I want Block Custom HTML to not touch my content at all. Yes I know Custom HTML may not meant for JS but ignoring the <br>s in JS, it even adds and removes some of the <p> from regular HTML.

Here's an example below; it removes the <p> from "container" then adds <br /> to JS then adds some <p> in "modalid", just WTH??

I don't think it's a big ask for WP to provide some kinda of action/filter to let the system save as raw.

I tried;

remove_filter('the_content', 'wpautop');
remove_filter( 'the_excerpt', 'wpautop' );

and nothing changes. I do not think Block templates are going thru this filter.

Turning this;

<footer>
    <div id="modalid" class="modal">
        <center>
            <h5>content</h5>

            content content content content content content content content content content content content content contentinformation by contentcontentcontentcontentcontentcontent <br> <br>

            For more information about our privacy practices, please review our <a href="link">Privacy Policy</a>.
        </center>
    </div>

    <div class="container">
       <p>
            <a class="footer-link" href="link">bla</a> |
            <a class="footer-link" href="link">bla</a>
            | <a class="footer-link" rel="modal:open" href="#modalid" target="_blank">Please Sell My Information</a> <br>
            &copy; 2014 - 2023 BLA. All rights reserved.
        </p>
    </div>
</footer>

<p>
   
   <script>
      $('.bla').bla({
          dots: false,
          infinite: true,
          
      });
   </script>
</p>

into this

<footer>
    <div id="modalid" class="modal">
        <center>
            <h5>content</h5>

            <p>content content content content content content content content content content content content content contentinformation by contentcontentcontentcontentcontentcontent <br> <br></p>

            <p>For more information about our privacy practices, please review our <a href="link">Privacy Policy</a>.</p><br />
        </center>
    </div>

    <div class="container">
       
            <a class="footer-link" href="link">bla</a> |
            <a class="footer-link" href="link">bla</a>
            | <a class="footer-link" rel="modal:open" href="#modalid" target="_blank">Please Sell My Information</a> <br>
            &copy; 2014 - 2023 BLA. All rights reserved.
       
    </div>
</footer>

<p>
   
   <script><br />
      $('.bla').bla({<br />
          dots: false,<br />
          infinite: true,<br />
          
      });<br />
   </script>
</p>

Answer 1

I can replicate the issue as described in WP 6.2.2, though it only seems to occur when using Custom HTML block in a Template Part in the Site Editor - not when editing a post/page.

If you add the same code in a post/page and publish/preview/edit it, the code including the JS code remains the same. If you save the working code block as a reusable block and insert it into a Template Part in Site Editor, the issue appears inside the Editor.

Site Editor

My observation is that it's not actually changing the underlying code: if you publish the template, the HTML source is rendered as expected. The issue appears to purely be within the Site Editor when it renders HTML safely as HTML.

Output

The rendered HTML includes the code as expected, with no erroneous <p> or <br /> present.

If you remove the <script>...<script> code, the rendering issue in the Site Editor is resolved.

Ideally, you should enqueue the JS code separately, even if it is "just a few lines". For custom HTML code that requires front-end JS, I would register a block variation of the core Custom HTML to enable enqueuing the JS for when the block variation is used.