4

I would like to manipulate Gutenberg Blocks with PHP. Therefore I need to parse post_content into an array and the same way back after manipulation. But I don't get that far, because already the parsing back and forth doesn't work.

function change_post_data_before_save( $data, $postarr ) {
    $post_data = $data['post_content']; //post_content seems to be json encoded 
    //stripping slashes otherwise $blocks[0]['attrs'] would be NULL
    $post_data = str_replace('\\"', '"', $post_data);
    //trying to replace double slash in unicodes but it seems not to work
    $post_data = str_replace('\\\u', '\u', $post_data);
    $blocks = parse_blocks($post_data); //there are still some issues with schema and other array parts

    //manipulation of $blocks if needed

    $post_content = serialize_blocks( $blocks ); //seems to work correct
    $data['post_content'] = $post_content;

    return $data;
}
add_filter( 'wp_insert_post_data', 'change_post_data_before_save', 10, 2 );

Any ideas how to json decode $data['post_data'] without destroying parts in $blocks[0]['attrs'] which need to be json encoded? I tried replacement but it seems not to work for unicodes and serialize_blocks() destroyes it in the end.

Example Code:

//expected result - saved in database without wp_insert_post_data (see above)
<!-- wp:uagb/faq {"block_id":"f1ad85bc","enableSchemaSupport":true,"schema":"{\u0022@context\u0022:\u0022https://schema.org\u0022,\u0022@type\u0022:\u0022FAQPage\u0022,\u0022@id\u0022:\u0022http://localhost/specials/gutenberg/\u0022,\u0022mainEntity\u0022:[{\u0022@type\u0022:\u0022Question\u0022,\u0022name\u0022:\u0022Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\u0022,\u0022acceptedAnswer\u0022:{\u0022@type\u0022:\u0022Answer\u0022,\u0022text\u0022:\u0022This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\u0022}}]}"} -->
<div class="wp-block-uagb-faq uagb-faq__outer-wrap uagb-block-f1ad85bc uagb-faq-icon-row uagb-faq-layout-accordion uagb-faq-expand-first-false uagb-faq-inactive-other-true uagb-faq-equal-height" data-faqtoggle="true" role="tablist"><script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","@id":"http://localhost/specials/gutenberg/","mainEntity":[{"@type":"Question","name":"Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)","acceptedAnswer":{"@type":"Answer","text":"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)"}}]}</script><div class="uagb-faq__wrap uagb-buttons-layout-wrap"><!-- wp:uagb/faq-child {"block_id":"61cac9b0","question":"Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)","answer":"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)"} -->
<div class="wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-block-61cac9b0"><div class="uagb-faq-child__wrapper"><div class="uagb-faq-item" role="tab" tabindex="0"><div class="uagb-faq-questions-button uagb-faq-questions"><span class="uagb-icon uagb-faq-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span><span class="uagb-icon-active uagb-faq-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span><span class="uagb-question">Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></div><div class="uagb-faq-content"><span><p>This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</p></span></div></div></div></div>
<!-- /wp:uagb/faq-child --></div></div>
<!-- /wp:uagb/faq -->

<!-- wp:kadence/iconlist {"items":[{"icon":"fe_alertCircle","link":"","target":"_self","size":20,"width":2,"text":"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)","color":"","background":"","border":"","borderRadius":0,"padding":5,"borderWidth":1,"style":"default"}],"uniqueID":"_a79c18-e7"} -->
<div class="wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_a79c18-e7 kt-svg-icon-list-columns-1 alignnone"><ul class="kt-svg-icon-list"><li class="kt-svg-icon-list-style-default kt-svg-icon-list-item-wrap kt-svg-icon-list-item-0"><div style="display:inline-flex;justify-content:center;align-items:center" class="kt-svg-icon-list-single kt-svg-icon-list-single-fe_alertCircle"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="20" width="20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg></div><span class="kt-svg-icon-list-text">This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></li></ul></div>
<!-- /wp:kadence/iconlist -->

Debugging:

//result of $data['post_content']
<!-- wp:uagb/faq {\\"block_id\\":\\"f1ad85bc\\",\\"enableSchemaSupport\\":true,\\"schema\\":\\"{\\\\u0022@context\\\\u0022:\\\\u0022https://schema.org\\\\u0022,\\\\u0022@type\\\\u0022:\\\\u0022FAQPage\\\\u0022,\\\\u0022@id\\\\u0022:\\\\u0022http://localhost/specials/gutenberg/\\\\u0022,\\\\u0022mainEntity\\\\u0022:[{\\\\u0022@type\\\\u0022:\\\\u0022Question\\\\u0022,\\\\u0022name\\\\u0022:\\\\u0022Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\\\\u0022,\\\\u0022acceptedAnswer\\\\u0022:{\\\\u0022@type\\\\u0022:\\\\u0022Answer\\\\u0022,\\\\u0022text\\\\u0022:\\\\u0022This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\\\\u0022}}]}\\"} -->
<div class=\\"wp-block-uagb-faq uagb-faq__outer-wrap uagb-block-f1ad85bc uagb-faq-icon-row uagb-faq-layout-accordion uagb-faq-expand-first-false uagb-faq-inactive-other-true uagb-faq-equal-height\\" data-faqtoggle=\\"true\\" role=\\"tablist\\"><script type=\\"application/ld+json\\">{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"FAQPage\\",\\"@id\\":\\"http://localhost/specials/gutenberg/\\",\\"mainEntity\\":[{\\"@type\\":\\"Question\\",\\"name\\":\\"Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\\",\\"acceptedAnswer\\":{\\"@type\\":\\"Answer\\",\\"text\\":\\"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\\"}}]}</script><div class=\\"uagb-faq__wrap uagb-buttons-layout-wrap\\"><!-- wp:uagb/faq-child {\\"block_id\\":\\"61cac9b0\\",\\"question\\":\\"Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\\",\\"answer\\":\\"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\\"} -->
<div class=\\"wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-block-61cac9b0\\"><div class=\\"uagb-faq-child__wrapper\\"><div class=\\"uagb-faq-item\\" role=\\"tab\\" tabindex=\\"0\\"><div class=\\"uagb-faq-questions-button uagb-faq-questions\\"><span class=\\"uagb-icon uagb-faq-icon-wrap\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\"><path d=\\"M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\\"></path></svg></span><span class=\\"uagb-icon-active uagb-faq-icon-wrap\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewbox=\\"0 0 448 512\\"><path d=\\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\\"></path></svg></span><span class=\\"uagb-question\\">Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></div><div class=\\"uagb-faq-content\\"><span><p>This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</p></span></div></div></div></div>
<!-- /wp:uagb/faq-child --></div></div>
<!-- /wp:uagb/faq -->

<!-- wp:kadence/iconlist {\\"items\\":[{\\"icon\\":\\"fe_alertCircle\\",\\"link\\":\\"\\",\\"target\\":\\"_self\\",\\"size\\":20,\\"width\\":2,\\"text\\":\\"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\\",\\"color\\":\\"\\",\\"background\\":\\"\\",\\"border\\":\\"\\",\\"borderRadius\\":0,\\"padding\\":5,\\"borderWidth\\":1,\\"style\\":\\"default\\"}],\\"uniqueID\\":\\"_a79c18-e7\\"} -->
<div class=\\"wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_a79c18-e7 kt-svg-icon-list-columns-1 alignnone\\"><ul class=\\"kt-svg-icon-list\\"><li class=\\"kt-svg-icon-list-style-default kt-svg-icon-list-item-wrap kt-svg-icon-list-item-0\\"><div style=\\"display:inline-flex;justify-content:center;align-items:center\\" class=\\"kt-svg-icon-list-single kt-svg-icon-list-single-fe_alertCircle\\"><svg style=\\"display:inline-block;vertical-align:middle\\" viewbox=\\"0 0 24 24\\" height=\\"20\\" width=\\"20\\" fill=\\"none\\" stroke=\\"currentColor\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"><circle cx=\\"12\\" cy=\\"12\\" r=\\"10\\"></circle><line x1=\\"12\\" y1=\\"8\\" x2=\\"12\\" y2=\\"12\\"></line><line x1=\\"12\\" y1=\\"16\\" x2=\\"12\\" y2=\\"16\\"></line></svg></div><span class=\\"kt-svg-icon-list-text\\">This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></li></ul></div>
<!-- /wp:kadence/iconlist -->

//result of $post_data
<!-- wp:uagb/faq {"block_id":"f1ad85bc","enableSchemaSupport":true,"schema":"{\\u0022@context\\u0022:\\u0022https://schema.org\\u0022,\\u0022@type\\u0022:\\u0022FAQPage\\u0022,\\u0022@id\\u0022:\\u0022http://localhost/specials/gutenberg/\\u0022,\\u0022mainEntity\\u0022:[{\\u0022@type\\u0022:\\u0022Question\\u0022,\\u0022name\\u0022:\\u0022Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\\u0022,\\u0022acceptedAnswer\\u0022:{\\u0022@type\\u0022:\\u0022Answer\\u0022,\\u0022text\\u0022:\\u0022This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)\\u0022}}]}"} -->
<div class="wp-block-uagb-faq uagb-faq__outer-wrap uagb-block-f1ad85bc uagb-faq-icon-row uagb-faq-layout-accordion uagb-faq-expand-first-false uagb-faq-inactive-other-true uagb-faq-equal-height" data-faqtoggle="true" role="tablist"><script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","@id":"http://localhost/specials/gutenberg/","mainEntity":[{"@type":"Question","name":"Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)","acceptedAnswer":{"@type":"Answer","text":"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)"}}]}</script><div class="uagb-faq__wrap uagb-buttons-layout-wrap"><!-- wp:uagb/faq-child {"block_id":"61cac9b0","question":"Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)","answer":"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)"} -->
<div class="wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-block-61cac9b0"><div class="uagb-faq-child__wrapper"><div class="uagb-faq-item" role="tab" tabindex="0"><div class="uagb-faq-questions-button uagb-faq-questions"><span class="uagb-icon uagb-faq-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span><span class="uagb-icon-active uagb-faq-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span><span class="uagb-question">Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></div><div class="uagb-faq-content"><span><p>This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</p></span></div></div></div></div>
<!-- /wp:uagb/faq-child --></div></div>
<!-- /wp:uagb/faq -->

<!-- wp:kadence/iconlist {"items":[{"icon":"fe_alertCircle","link":"","target":"_self","size":20,"width":2,"text":"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)","color":"","background":"","border":"","borderRadius":0,"padding":5,"borderWidth":1,"style":"default"}],"uniqueID":"_a79c18-e7"} -->
<div class="wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_a79c18-e7 kt-svg-icon-list-columns-1 alignnone"><ul class="kt-svg-icon-list"><li class="kt-svg-icon-list-style-default kt-svg-icon-list-item-wrap kt-svg-icon-list-item-0"><div style="display:inline-flex;justify-content:center;align-items:center" class="kt-svg-icon-list-single kt-svg-icon-list-single-fe_alertCircle"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="20" width="20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg></div><span class="kt-svg-icon-list-text">This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></li></ul></div>
<!-- /wp:kadence/iconlist -->

//result of $blocks
array (
  0 => 
  array (
    'blockName' => 'uagb/faq',
    'attrs' => 
    array (
      'block_id' => 'f1ad85bc',
      'enableSchemaSupport' => true,
      'schema' => '{"@context":"https://schema.org","@type":"FAQPage","@id":"http://localhost/specials/gutenberg/","mainEntity":[{"@type":"Question","name":"Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)","acceptedAnswer":{"@type":"Answer","text":"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)"}}]}',
    ),
    'innerBlocks' => 
    array (
      0 => 
      array (
        'blockName' => 'uagb/faq-child',
        'attrs' => 
        array (
          'block_id' => '61cac9b0',
          'question' => 'Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)',
          'answer' => 'This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)',
        ),
        'innerBlocks' => 
        array (
        ),
        'innerHTML' => '
<div class="wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-block-61cac9b0"><div class="uagb-faq-child__wrapper"><div class="uagb-faq-item" role="tab" tabindex="0"><div class="uagb-faq-questions-button uagb-faq-questions"><span class="uagb-icon uagb-faq-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span><span class="uagb-icon-active uagb-faq-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span><span class="uagb-question">Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></div><div class="uagb-faq-content"><span><p>This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</p></span></div></div></div></div>
',
        'innerContent' => 
        array (
          0 => '
<div class="wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-block-61cac9b0"><div class="uagb-faq-child__wrapper"><div class="uagb-faq-item" role="tab" tabindex="0"><div class="uagb-faq-questions-button uagb-faq-questions"><span class="uagb-icon uagb-faq-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span><span class="uagb-icon-active uagb-faq-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span><span class="uagb-question">Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></div><div class="uagb-faq-content"><span><p>This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</p></span></div></div></div></div>
',
        ),
      ),
    ),
    'innerHTML' => '
<div class="wp-block-uagb-faq uagb-faq__outer-wrap uagb-block-f1ad85bc uagb-faq-icon-row uagb-faq-layout-accordion uagb-faq-expand-first-false uagb-faq-inactive-other-true uagb-faq-equal-height" data-faqtoggle="true" role="tablist"><script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","@id":"http://localhost/specials/gutenberg/","mainEntity":[{"@type":"Question","name":"Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)","acceptedAnswer":{"@type":"Answer","text":"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)"}}]}</script><div class="uagb-faq__wrap uagb-buttons-layout-wrap"></div></div>
',
    'innerContent' => 
    array (
      0 => '
<div class="wp-block-uagb-faq uagb-faq__outer-wrap uagb-block-f1ad85bc uagb-faq-icon-row uagb-faq-layout-accordion uagb-faq-expand-first-false uagb-faq-inactive-other-true uagb-faq-equal-height" data-faqtoggle="true" role="tablist"><script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","@id":"http://localhost/specials/gutenberg/","mainEntity":[{"@type":"Question","name":"Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)","acceptedAnswer":{"@type":"Answer","text":"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)"}}]}</script><div class="uagb-faq__wrap uagb-buttons-layout-wrap">',
      1 => NULL,
      2 => '</div></div>
',
    ),
  ),
  1 => 
  array (
    'blockName' => NULL,
    'attrs' => 
    array (
    ),
    'innerBlocks' => 
    array (
    ),
    'innerHTML' => '

',
    'innerContent' => 
    array (
      0 => '

',
    ),
  ),
  2 => 
  array (
    'blockName' => 'kadence/iconlist',
    'attrs' => 
    array (
      'items' => 
      array (
        0 => 
        array (
          'icon' => 'fe_alertCircle',
          'link' => '',
          'target' => '_self',
          'size' => 20,
          'width' => 2,
          'text' => 'This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)',
          'color' => '',
          'background' => '',
          'border' => '',
          'borderRadius' => 0,
          'padding' => 5,
          'borderWidth' => 1,
          'style' => 'default',
        ),
      ),
      'uniqueID' => '_a79c18-e7',
    ),
    'innerBlocks' => 
    array (
    ),
    'innerHTML' => '
<div class="wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_a79c18-e7 kt-svg-icon-list-columns-1 alignnone"><ul class="kt-svg-icon-list"><li class="kt-svg-icon-list-style-default kt-svg-icon-list-item-wrap kt-svg-icon-list-item-0"><div style="display:inline-flex;justify-content:center;align-items:center" class="kt-svg-icon-list-single kt-svg-icon-list-single-fe_alertCircle"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="20" width="20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg></div><span class="kt-svg-icon-list-text">This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></li></ul></div>
',
    'innerContent' => 
    array (
      0 => '
<div class="wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_a79c18-e7 kt-svg-icon-list-columns-1 alignnone"><ul class="kt-svg-icon-list"><li class="kt-svg-icon-list-style-default kt-svg-icon-list-item-wrap kt-svg-icon-list-item-0"><div style="display:inline-flex;justify-content:center;align-items:center" class="kt-svg-icon-list-single kt-svg-icon-list-single-fe_alertCircle"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="20" width="20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg></div><span class="kt-svg-icon-list-text">This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></li></ul></div>
',
    ),
  ),
)

Final result after serialize_blocks():

//result of $post_content [can not be shown in Gutenberg UI "This block contains unexpected or invalid content."]
<!-- wp:uagb/faq {"block_id":"f1ad85bc","enableSchemaSupport":true,"schema":"{\\u0022@context\\u0022:\\u0022https:\\/\\/schema.org\\u0022,\\u0022@type\\u0022:\\u0022FAQPage\\u0022,\\u0022@id\\u0022:\\u0022http:\\/\\/localhost\\/specials\\/gutenberg\\/\\u0022,\\u0022mainEntity\\u0022:[{\\u0022@type\\u0022:\\u0022Question\\u0022,\\u0022name\\u0022:\\u0022Headline with special characters: (\\u00b0C, \\u00e4, \\u00f6, \\u00fc, \\u00df, \\u00d6, \\u00c4, \\u00dc)\\u0022,\\u0022acceptedAnswer\\u0022:{\\u0022@type\\u0022:\\u0022Answer\\u0022,\\u0022text\\u0022:\\u0022This is a test with special characters: (\\u00b0C, \\u00e4, \\u00f6, \\u00fc, \\u00df, \\u00d6, \\u00c4, \\u00dc)\\u0022}}]}"} -->
<div class="wp-block-uagb-faq uagb-faq__outer-wrap uagb-block-f1ad85bc uagb-faq-icon-row uagb-faq-layout-accordion uagb-faq-expand-first-false uagb-faq-inactive-other-true uagb-faq-equal-height" data-faqtoggle="true" role="tablist"><script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","@id":"http://localhost/specials/gutenberg/","mainEntity":[{"@type":"Question","name":"Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)","acceptedAnswer":{"@type":"Answer","text":"This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)"}}]}</script><div class="uagb-faq__wrap uagb-buttons-layout-wrap"><!-- wp:uagb/faq-child {"block_id":"61cac9b0","question":"Headline with special characters: (\\u00b0C, \\u00e4, \\u00f6, \\u00fc, \\u00df, \\u00d6, \\u00c4, \\u00dc)","answer":"This is a test with special characters: (\\u00b0C, \\u00e4, \\u00f6, \\u00fc, \\u00df, \\u00d6, \\u00c4, \\u00dc)"} -->
<div class="wp-block-uagb-faq-child uagb-faq-child__outer-wrap uagb-block-61cac9b0"><div class="uagb-faq-child__wrapper"><div class="uagb-faq-item" role="tab" tabindex="0"><div class="uagb-faq-questions-button uagb-faq-questions"><span class="uagb-icon uagb-faq-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span><span class="uagb-icon-active uagb-faq-icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span><span class="uagb-question">Headline with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></div><div class="uagb-faq-content"><span><p>This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</p></span></div></div></div></div>
<!-- /wp:uagb/faq-child --></div></div>
<!-- /wp:uagb/faq -->

<!-- wp:kadence/iconlist {"items":[{"icon":"fe_alertCircle","link":"","target":"_self","size":20,"width":2,"text":"This is a test with special characters: (\\u00b0C, \\u00e4, \\u00f6, \\u00fc, \\u00df, \\u00d6, \\u00c4, \\u00dc)","color":"","background":"","border":"","borderRadius":0,"padding":5,"borderWidth":1,"style":"default"}],"uniqueID":"_a79c18-e7"} -->
<div class="wp-block-kadence-iconlist kt-svg-icon-list-items kt-svg-icon-list-items_a79c18-e7 kt-svg-icon-list-columns-1 alignnone"><ul class="kt-svg-icon-list"><li class="kt-svg-icon-list-style-default kt-svg-icon-list-item-wrap kt-svg-icon-list-item-0"><div style="display:inline-flex;justify-content:center;align-items:center" class="kt-svg-icon-list-single kt-svg-icon-list-single-fe_alertCircle"><svg style="display:inline-block;vertical-align:middle" viewbox="0 0 24 24" height="20" width="20" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg></div><span class="kt-svg-icon-list-text">This is a test with special characters: (°C, ä, ö, ü, ß, Ö, Ä, Ü)</span></li></ul></div>
<!-- /wp:kadence/iconlist -->

Related Topic: serialize_blocks breaking html tags in content

Improve this question
13
  • 1
    There are no issues with unicode characters in your second code block, those are JSON encoded unicode characters, not mangled data. If you JSON decode it you will get the original as expected so nothing is broken or corrupted by that process, if it is broken, how is it broken? I notice in your code blocks there are no attempts to process the post content into its final form, as well as no information about the modifications you're making. Edit your question to include the missing information, be specific, and make no assumptions about what is known or understood
    – Tom J Nowell ♦
    Jul 3, 2021 at 15:54
  • Thank you for your reply. I added some more information to my message and described the problem even further. The actual manipulation of $blocks does not need to be done at all and is not directly part of the problem. A simple parse_blocks() to serialize_blocks() without data manipulation already does not work as the examples from "kadence-blocks" and "ultimate gutenberg" should show.
    – Steffan Schlüter
    Jul 3, 2021 at 16:59
  • What do you mean with "I notice in your code blocks there are no attempts to process the post content into its final form"? Isn't that exactly what serialize_blocks() does? Undo parse_blocks()?
    – Steffan Schlüter
    Jul 3, 2021 at 17:07
  • 1
    Manipulating the values by turning unicode literals into escaped unicode values would not do that though, my own answer on the link you provided demonstrates this irrefutably, as does the JSON spec and RFCs which say that a unicode literal and a unicode point are the same. The main difference appears to be related to this block storing JSON as a string. The block should not be JSON encoding attribute values which are being double encoded. If so, then this is not a general issue, this issue is specific to this plugin
    – Tom J Nowell ♦
    Jul 3, 2021 at 20:05
  • 1
    and here we are github.com/brainstormforce/ultimate-addons-for-gutenberg/blob/… that it's relying on props is strange, you should create an issue on their repo, it would be much easier to fix the plugin than figure out the generic answer to this question ( there's a high chance a generic answer does not exist ). There's also a high chance that because they've done it this way that certain frontend filters may misbehave. Given the same attributes, the output of the save component should match the DB, but PHP generated JSON != JS generated JSON
    – Tom J Nowell ♦
    Jul 3, 2021 at 20:13

1 Answer 1

Reset to default
1

As already described in the comments, many WordPress Gutenberg plugins do not use the strict JSON format as WordPress prescribes... (and poorly documented) So it comes to two problems:

  • Sometimes the data is in a JSON format, which parse_blocks() cannot read. If no change is made here, for example, the value attr will be NULL (example in the first post)
  • serialize_blocks() converts all special characters to Unicode, which causes the plugin block to stop working properly and results in error messages in the Gutenberg UI: "This block contains unexpected or invalid content.".

Especially for the plugins Advanced-Gutenberg and Kadence-Blocks the bugs have already been reported. I have developed the following workaround, which is quick and dirty, but it works. If anyone has comments, additions or improvements, please let me know!

function change_post_data_before_save( $data ) {
    $post_data = $data['post_content'];
    $post_data = str_replace('\\"', '"', $post_data); //parse_blocks() need " to parse $blocks[]['attr'] correctly

    $blocks = parse_blocks($post_data);
    $post_content = implode( '', array_map( 'serialize_block2', $blocks ) ); //serialize_block() replacement because serialize_block_attributes() does not support JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE

    $post_content = str_replace('"', '\\"', $post_content); //undo " correction from above
    $data['post_content'] = $post_content;

    return $data;
}
add_filter( 'wp_insert_post_data', 'change_post_data_before_save', 10, 2 );


//only sub method calls has been changed
function serialize_block2( $block ) {
    $block_content = '';

    $index = 0;
    foreach ( $block['innerContent'] as $chunk ) {
        $block_content .= is_string( $chunk ) ? $chunk : serialize_block2( $block['innerBlocks'][ $index++ ] ); //change
    }

    if ( ! is_array( $block['attrs'] ) ) {
        $block['attrs'] = array();
    }

    return get_comment_delimited_block_content2(
        $block['blockName'],
        $block['attrs'],
        $block_content
    );
}


//only sub method calls has been changed
function get_comment_delimited_block_content2( $block_name, $block_attributes, $block_content ) {
    if ( is_null( $block_name ) ) {
        return $block_content;
    }

    $serialized_block_name = strip_core_block_namespace( $block_name );
    $serialized_attributes = empty( $block_attributes ) ? '' : serialize_block_attributes2( $block_attributes ) . ' '; //change

    if ( empty( $block_content ) ) {
        return sprintf( '<!-- wp:%s %s/-->', $serialized_block_name, $serialized_attributes );
    }

    return sprintf(
        '<!-- wp:%s %s-->%s<!-- /wp:%s -->',
        $serialized_block_name,
        $serialized_attributes,
        $block_content,
        $serialized_block_name
    );
}


//change gutenberg json_encoding to keep plugin block formats and prevent issue "This block contains unexpected or invalid content."
function serialize_block_attributes2( $block_attributes ) {
    $encoded_attributes = json_encode( $block_attributes, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ); //change
    $encoded_attributes = preg_replace( '/--/', '\\u002d\\u002d', $encoded_attributes );
    $encoded_attributes = preg_replace( '/</', '\\u003c', $encoded_attributes );
    $encoded_attributes = preg_replace( '/>/', '\\u003e', $encoded_attributes );
    $encoded_attributes = preg_replace( '/&/', '\\u0026', $encoded_attributes );
    // Regex: /\\"/
    $encoded_attributes = preg_replace( '/\\\\"/', '\\u0022', $encoded_attributes );

    return $encoded_attributes;
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.