[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