[wp-trac] [WordPress Trac] #47420: Block markup containing HTML in block attributes is corrupted when using wp_insert_post

WordPress Trac noreply at wordpress.org
Tue May 28 17:12:15 UTC 2019 

#47420: Block markup containing HTML in block attributes is corrupted when using
wp_insert_post
--------------------------+-----------------------------
 Reporter:  modernnerd    |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 **Issue**
 Some blocks allow HTML in their block attributes, which display correctly
 in the editor and the front end. An example is the Pricing block in Atomic
 Blocks: https://wordpress.org/plugins/atomic-blocks/

 If block content copied from the block editor as raw code contains HTML in
 its block attributes, inserting that content with wp_insert_post() results
 in corrupt blocks.

 This appears to be due to the way block attributes like this:

 {{{
 {"price":"<strong>49</strong>","currency":"$","term":"/mo"}
 }}}

 Are encoded like this when saved:

 {{{
 {"price":"\u003cstrong\u003e49\u003c/strong\u003e","currency":"$","term":"/mo"}
 }}}


 **To reproduce**
 1. Install Atomic Blocks and activate Twenty Nineteen.
 2. Add this code to your theme's functions.php, refresh any page to
 trigger the code, then remove the code:

 {{{#!php
 <?php
 $post_content = <<<CONTENT
 <!-- wp:atomic-blocks/ab-pricing -->
 <div class="wp-block-atomic-blocks-ab-pricing ab-pricing-columns-2"><div
 class="ab-pricing-table-wrap ab-block-pricing-table-gap-2"><!-- wp:atomic-
 blocks/ab-pricing-table -->
 <div class="wp-block-atomic-blocks-ab-pricing-table ab-block-pricing-
 table-center ab-block-pricing-table" itemscope
 itemtype="http://schema.org/Product"><div class="ab-block-pricing-table-
 inside" style="border-width:2px;border-style:solid"><!-- wp:atomic-blocks
 /ab-pricing-table-title {"title":"\u003cstrong\u003ePrice
 Title\u003c/strong\u003e","fontSize":"medium","paddingTop":30} -->
 <div itemprop="name" style="padding-top:30px;padding-right:20px;padding-
 bottom:10px;padding-left:20px" class="wp-block-atomic-blocks-ab-pricing-
 table-title ab-pricing-table-title has-medium-font-size"><strong>Price
 Title</strong></div>
 <!-- /wp:atomic-blocks/ab-pricing-table-title -->

 <!-- wp:atomic-blocks/ab-pricing-table-subtitle {"subtitle":"Price
 Subtitle Description","customFontSize":20} -->
 <div class="wp-block-atomic-blocks-ab-pricing-table-subtitle ab-pricing-
 table-subtitle" style="font-size:20px;padding-top:10px;padding-right:20px
 ;padding-bottom:10px;padding-left:20px">Price Subtitle Description</div>
 <!-- /wp:atomic-blocks/ab-pricing-table-subtitle -->

 <!-- wp:atomic-blocks/ab-pricing-table-price
 {"price":"\u003cstrong\u003e49\u003c/strong\u003e","currency":"$","term":"/mo"}
 -->
 <div class="wp-block-atomic-blocks-ab-pricing-table-price ab-pricing-
 table-price-wrap ab-pricing-has-currency" style="padding-top:10px;padding-
 right:20px;padding-bottom:10px;padding-left:20px"><div itemprop="offers"
 itemscope itemtype="http://schema.org/Offer"><span
 itemprop="priceCurrency" class="ab-pricing-table-currency" style="font-
 size:24px">$</span><div itemprop="price" class="ab-pricing-table-price"
 style="font-size:60px"><strong>49</strong></div><span class="ab-pricing-
 table-term" style="font-size:24px">/mo</span></div></div>
 <!-- /wp:atomic-blocks/ab-pricing-table-price -->

 <!-- wp:atomic-blocks/ab-pricing-table-features
 {"customFontSize":20,"paddingTop":15,"paddingBottom":15} -->
 <ul itemprop="description" class="wp-block-atomic-blocks-ab-pricing-table-
 features ab-pricing-table-features ab-list-border-none ab-list-border-
 width-1" style="font-size:20px;padding-top:15px;padding-right:20px
 ;padding-bottom:15px;padding-left:20px"><li>Product Feature
 One</li><li>Product Feature Two</li><li>Product Feature Three</li></ul>
 <!-- /wp:atomic-blocks/ab-pricing-table-features -->

 <!-- wp:atomic-blocks/ab-pricing-table-button {"buttonText":"Buy
 Now","buttonBackgroundColor":"#272c30","paddingTop":15,"paddingBottom":35}
 -->
 <div class="wp-block-atomic-blocks-ab-pricing-table-button ab-pricing-
 table-button" style="padding-top:15px;padding-right:20px;padding-
 bottom:35px;padding-left:20px"><div class="ab-block-button"><a class="ab-
 button ab-button-shape-rounded ab-button-size-medium" style="color:#ffffff
 ;background-color:#272c30">Buy Now</a></div></div>
 <!-- /wp:atomic-blocks/ab-pricing-table-button --></div></div>
 <!-- /wp:atomic-blocks/ab-pricing-table -->

 <!-- wp:atomic-blocks/ab-pricing-table -->
 <div class="wp-block-atomic-blocks-ab-pricing-table ab-block-pricing-
 table-center ab-block-pricing-table" itemscope
 itemtype="http://schema.org/Product"><div class="ab-block-pricing-table-
 inside" style="border-width:2px;border-style:solid"><!-- wp:atomic-blocks
 /ab-pricing-table-title {"title":"\u003cstrong\u003ePrice
 Title\u003c/strong\u003e","fontSize":"medium","paddingTop":30} -->
 <div itemprop="name" style="padding-top:30px;padding-right:20px;padding-
 bottom:10px;padding-left:20px" class="wp-block-atomic-blocks-ab-pricing-
 table-title ab-pricing-table-title has-medium-font-size"><strong>Price
 Title</strong></div>
 <!-- /wp:atomic-blocks/ab-pricing-table-title -->

 <!-- wp:atomic-blocks/ab-pricing-table-subtitle {"subtitle":"Price
 Subtitle Description","customFontSize":20} -->
 <div class="wp-block-atomic-blocks-ab-pricing-table-subtitle ab-pricing-
 table-subtitle" style="font-size:20px;padding-top:10px;padding-right:20px
 ;padding-bottom:10px;padding-left:20px">Price Subtitle Description</div>
 <!-- /wp:atomic-blocks/ab-pricing-table-subtitle -->

 <!-- wp:atomic-blocks/ab-pricing-table-price
 {"price":"\u003cstrong\u003e49\u003c/strong\u003e","currency":"$","term":"/mo"}
 -->
 <div class="wp-block-atomic-blocks-ab-pricing-table-price ab-pricing-
 table-price-wrap ab-pricing-has-currency" style="padding-top:10px;padding-
 right:20px;padding-bottom:10px;padding-left:20px"><div itemprop="offers"
 itemscope itemtype="http://schema.org/Offer"><span
 itemprop="priceCurrency" class="ab-pricing-table-currency" style="font-
 size:24px">$</span><div itemprop="price" class="ab-pricing-table-price"
 style="font-size:60px"><strong>49</strong></div><span class="ab-pricing-
 table-term" style="font-size:24px">/mo</span></div></div>
 <!-- /wp:atomic-blocks/ab-pricing-table-price -->

 <!-- wp:atomic-blocks/ab-pricing-table-features
 {"customFontSize":20,"paddingTop":15,"paddingBottom":15} -->
 <ul itemprop="description" class="wp-block-atomic-blocks-ab-pricing-table-
 features ab-pricing-table-features ab-list-border-none ab-list-border-
 width-1" style="font-size:20px;padding-top:15px;padding-right:20px
 ;padding-bottom:15px;padding-left:20px"><li>Product Feature
 One</li><li>Product Feature Two</li><li>Product Feature Three</li></ul>
 <!-- /wp:atomic-blocks/ab-pricing-table-features -->

 <!-- wp:atomic-blocks/ab-pricing-table-button {"buttonText":"Buy
 Now","buttonBackgroundColor":"#272c30","paddingTop":15,"paddingBottom":35}
 -->
 <div class="wp-block-atomic-blocks-ab-pricing-table-button ab-pricing-
 table-button" style="padding-top:15px;padding-right:20px;padding-
 bottom:35px;padding-left:20px"><div class="ab-block-button"><a class="ab-
 button ab-button-shape-rounded ab-button-size-medium" style="color:#ffffff
 ;background-color:#272c30">Buy Now</a></div></div>
 <!-- /wp:atomic-blocks/ab-pricing-table-button --></div></div>
 <!-- /wp:atomic-blocks/ab-pricing-table --></div></div>
 <!-- /wp:atomic-blocks/ab-pricing -->
 CONTENT;

 wp_insert_post([
         'post_title' => 'Test block import with HTML in attributes',
         'post_content' => $post_content
 ]);
 }}}

 3. View the newly imported post. You'll see “this block contains
 unexpected or invalid content” where you expect to see blocks.

 If you repeat the above steps but use unencoded attributes as follows
 (find and replace '\u003c' with '<' and '\u003e' with '>'), the blocks
 import as expected:

 {{{
 {"price":"<strong>49</strong>","currency":"$","term":"/mo"}
 }}}


 **Environment**
 WordPress 5.2.1, Twenty Nineteen, no plugins active except for Atomic
 Blocks.
 macOS/Chrome.

 **Further info**
 This isn't limited to Atomic Blocks, as other blocks use HTML in block
 attributes. This issue was originally reported against the Gutenberg repo
 by another user who encountered the same, but it was suggested the issue
 belongs in Trac. I couldn't find a corresponding ticket here.

 https://github.com/WordPress/gutenberg/issues/14068

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47420>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform

More information about the wp-trac mailing list