Dream Post Rendering

wp-content.html

<!--<WPCONTENT>{
    "blocks": [
        {
            "type": "header",
            "class": "header-rendered",
            "content": "%%WPC[0]%%",
            "block_type": "h2"
        },
        {
            "type": "wrapper",
            "class": "content-rendered",
            "blocks": [
                {
                    "type": "image",
                    "caption": "%%WPC[1][0]%%",
                    "url": "http://example.com/my-image.jpg"
                }
            ]
        }
    ]
}</WPCONTENT>-->
<!-- #WPRAW -->
<div><div class="header-rendered"><h2><!-- #WPC[0] -->I entered this content into this block type<!-- #/WPC[0] --></h2></div><div class="content-rendered"><div><figure><img src="http://example.com/my-image.jpg"><figcaption><!-- #WPC[1][0] -->A picture is worth a thousand words<!-- #/WPC[1][0] --></figcaption></figure></div></div></div>
<!-- Example usage

// add_filter('new_filter_before_wp_content', function( $wp_content ) {
//     $blocks = $wp->parse_content( $wp_content ); // get json from <WPCONTENT/> with "content" attributes parsed with #WPC[] comment values
//
//     if ( ! is_array( $blocks ) {
//         $blocks = array( $blocks );
//     }
// 
//     foreach( $json['blocks'] as $block ) {
// 
//         if $wp->can_render( $block ) { 
//             $blocks[] = $wp->render( $block );
//         } else { 
//             $blocks[] = $wp->use_raw( $block );
//         }
//     }
// 
//     array_map( 'echo', $blocks );
// }

 -->