WordPress 6.2.2自定义HTML块篡改内容问题求助

在WordPress 6.2.2中使用自定义HTML块时，内容会被自动修改：JS代码里被插入<br />，常规HTML的<p>标签被随意增删——比如container内的<p>被移除，modalid区域的文本被自动套上<p>。需要让自定义HTML块完全保留原始内容，之前尝试过过滤代码但无效，推测区块模板不经过该过滤，求实现内容原封不动保存的方法。

原代码 #

<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>

篡改后代码 #

<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>

解决方法 #

方法1：切换自定义HTML块的纯文本编辑模式 #

在Gutenberg编辑器中选中自定义HTML块，点击工具栏的「更多选项」（三个点图标），选择「编辑为HTML」，直接编辑原始代码，可避免编辑器自动格式化内容。

方法2：添加PHP过滤代码强制保留原始内容 #

将以下代码添加到主题的functions.php文件或自定义插件中，禁用Gutenberg对自定义HTML块的内容过滤：

// 禁用自定义HTML块的自动格式化
add_filter('render_block_core/html', function($block_content, $block) {
    // 直接返回原始内容，跳过编辑器的格式化处理
    return isset($block['attrs']['content']) ? $block['attrs']['content'] : $block_content;
}, 10, 2);

// 针对自定义HTML块临时关闭自动段落格式化
add_filter('the_content', function($content) {
    // 检测内容中是否包含自定义HTML块的标识
    if (strpos($content, '<!-- wp:html -->') !== false) {
        remove_filter('the_content', 'wpautop');
    }
    return $content;
}, 9);

方法3：使用代码块替代自定义HTML块 #

Gutenberg的「代码块」默认不会对内容进行格式化，将原HTML/JS代码复制到代码块中，选择语言为「HTML」，即可完全保留原始内容。

内容的提问来源于stack exchange，提问作者vknyvz