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

huangapple go评论59阅读模式
英文:

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

问题

使用最新版本的WordPress(6.2.2),我的问题很简单。
我希望自定义HTML块不要对我的内容进行任何更改。是的,我知道自定义HTML可能不适用于JS,但是它甚至会忽略JS中的&lt;br&gt;,还会添加和删除常规HTML中的一些&lt;p&gt;

以下是一个示例;它会从"container"中删除&lt;p&gt;,然后在JS中添加&lt;br /&gt;,然后在"modalid"中添加一些&lt;p&gt;,这到底是怎么回事?

我不认为要求WP提供某种动作/过滤器来让系统保存为原始格式是一个很大的要求。

我尝试过;

remove_filter(&#39;the_content&#39;, &#39;wpautop&#39;);
remove_filter( &#39;the_excerpt&#39;, &#39;wpautop&#39; );

但没有任何变化。我认为区块模板没有经过这个过滤器。

将这个:

&lt;footer&gt;
    &lt;div id=&quot;modalid&quot; class=&quot;modal&quot;&gt;
        &lt;center&gt;
            &lt;h5&gt;content&lt;/h5&gt;

            content content content content content content content content content content content content content contentinformation by contentcontentcontentcontentcontentcontent &lt;br&gt; &lt;br&gt;

            For more information about our privacy practices, please review our &lt;a href=&quot;link&quot;&gt;Privacy Policy&lt;/a&gt;.
        &lt;/center&gt;
    &lt;/div&gt;

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

&lt;p&gt;
   
   &lt;script&gt;
      $(&#39;.bla&#39;).bla({
          dots: false,
          infinite: true,
          
      });
   &lt;/script&gt;
&lt;/p&gt;

转换成这个:

&lt;footer&gt;
    &lt;div id=&quot;modalid&quot; class=&quot;modal&quot;&gt;
        &lt;center&gt;
            &lt;h5&gt;content&lt;/h5&gt;

            &lt;p&gt;content content content content content content content content content content content content content contentinformation by contentcontentcontentcontentcontentcontent &lt;br&gt; &lt;br&gt;&lt;/p&gt;

            &lt;p&gt;For more information about our privacy practices, please review our &lt;a href=&quot;link&quot;&gt;Privacy Policy&lt;/a&gt;.&lt;/p&gt;&lt;br /&gt;
        &lt;/center&gt;
    &lt;/div&gt;

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

&lt;p&gt;
   
   &lt;script&gt;&lt;br /&gt;
      $(&#39;.bla&#39;).bla({&lt;br /&gt;
          dots: false,&lt;br /&gt;
          infinite: true,&lt;br /&gt;
          
      });&lt;br /&gt;
   &lt;/script&gt;
&lt;/p&gt;
英文:

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 &lt;br&gt;s in JS, it even adds and removes some of the &lt;p&gt; from regular HTML.

Here's an example below; it removes the &lt;p&gt; from "container" then adds &lt;br /&gt; to JS then adds some &lt;p&gt; 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(&#39;the_content&#39;, &#39;wpautop&#39;);
remove_filter( &#39;the_excerpt&#39;, &#39;wpautop&#39; );

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

Turning this;

&lt;footer&gt;
    &lt;div id=&quot;modalid&quot; class=&quot;modal&quot;&gt;
        &lt;center&gt;
            &lt;h5&gt;content&lt;/h5&gt;

            content content content content content content content content content content content content content contentinformation by contentcontentcontentcontentcontentcontent &lt;br&gt; &lt;br&gt;

            For more information about our privacy practices, please review our &lt;a href=&quot;link&quot;&gt;Privacy Policy&lt;/a&gt;.
        &lt;/center&gt;
    &lt;/div&gt;

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

&lt;p&gt;
   
   &lt;script&gt;
      $(&#39;.bla&#39;).bla({
          dots: false,
          infinite: true,
          
      });
   &lt;/script&gt;
&lt;/p&gt;

into this

&lt;footer&gt;
    &lt;div id=&quot;modalid&quot; class=&quot;modal&quot;&gt;
        &lt;center&gt;
            &lt;h5&gt;content&lt;/h5&gt;

            &lt;p&gt;content content content content content content content content content content content content content contentinformation by contentcontentcontentcontentcontentcontent &lt;br&gt; &lt;br&gt;&lt;/p&gt;

            &lt;p&gt;For more information about our privacy practices, please review our &lt;a href=&quot;link&quot;&gt;Privacy Policy&lt;/a&gt;.&lt;/p&gt;&lt;br /&gt;
        &lt;/center&gt;
    &lt;/div&gt;

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

&lt;p&gt;
   
   &lt;script&gt;&lt;br /&gt;
      $(&#39;.bla&#39;).bla({&lt;br /&gt;
          dots: false,&lt;br /&gt;
          infinite: true,&lt;br /&gt;
          
      });&lt;br /&gt;
   &lt;/script&gt;
&lt;/p&gt;

答案1

得分: 1

我可以复制在WP 6.2.2中描述的问题,但似乎只在使用“自定义HTML”块在“站点编辑器”的“模板部分”中时发生,而在编辑帖子/页面时却不会发生。

如果您将相同的代码添加到帖子/页面中并发布/预览/编辑它,包括JS代码的代码保持不变。如果您将工作的代码块保存为可重复使用的块并将其插入到站点编辑器中的模板部分中,问题将出现在编辑器内。

站点编辑器
WordPress 6 Block Custom HTML formats and inserts <br /> and removes some <p> and add some <p>

我的观察是它实际上没有改变底层代码:如果您发布模板,HTML源代码会如预期地呈现。问题似乎纯粹出现在站点编辑器中,当它将HTML安全地呈现为HTML时。

输出
WordPress 6 Block Custom HTML formats and inserts <br /> and removes some <p> and add some <p>

呈现的HTML包括如预期的代码,没有错误的&lt;p&gt;&lt;br /&gt;出现。

如果您删除&lt;script&gt;...&lt;script&gt;代码,站点编辑器中的呈现问题将得到解决。

理想情况下,即使只是“几行代码”,您也应该分别加载JS代码,对于需要前端JS的自定义HTML代码,我会注册核心“自定义HTML”的块变体以启用在使用块变体时加载JS。

英文:

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
WordPress 6 Block Custom HTML formats and inserts <br /> and removes some <p> and add some <p>

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
WordPress 6 Block Custom HTML formats and inserts <br /> and removes some <p> and add some <p>

The rendered HTML includes the code as expected, with no erroneous &lt;p&gt; or &lt;br /&gt; present.

If you remove the &lt;script&gt;...&lt;script&gt; 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.

huangapple
  • 本文由 发表于 2023年6月6日 05:41:20
  • 转载请务必保留本文链接:https://go.coder-hub.com/76410177.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定