Quartz / wp-graphql-content-blocks

Structured content blocks for WPGraphQL
76 stars 16 forks source link

Getting Gutenberg Shortcode content in query #5

Open AntonEmery opened 5 years ago

AntonEmery commented 5 years ago

I am working on a headless WP project using Gutenberg, and trying to return the HTML content of a shortcode in my query, so I can parse it on the front end. The end goal would be to access what is between the comments here.

<!-- wp:shortcode -->
<div>[before-after overlay_opacity="0" label_one="Original" label_two="BeFunky Vibrance Tool" label_color="#1c1d1e"]<img class="alignnone size-full wp-image-27095" src="https://editors.befunky.com/wp-content/uploads/2018/05/Vibrance-Tool-3.jpg" alt="how to enhance dull colors in an image" width="1080" height="720"><img class="alignnone size-full wp-image-27097" src="https://editors.befunky.com/wp-content/uploads/2018/05/Vibrance-Tool-2.jpg" alt="how to correct color with BeFunky Vibrance tool" width="1080" height="720">[/before-after]</div>
<!-- /wp:shortcode -->

I have worked with filtering the connections array in my functions.php, registering a new GraphQL type and field

function add_post_connections( $blocks, $post ) {
    return array_map( function ( $block ) {
        if ( 'core/shortcode' === $block['type'] ) {
            $test = $block['tagName'];
        }
        return $block;
    }, $blocks );

}

function register_block_shortcode_type() {
    register_graphql_object_type('GutenShortCode', [
        'description' => 'Shortcode from GutenBerg Block',
        'fields' => [
            'html' => [ 'type' => 'String' ],
        ]
    ]);
}

function register_shortcode_field() {
    register_graphql_field('ShortCode', 'getShortCode', [
        'description' => __('Get a Shortcode', 'shortcode'),
        'type' => 'GutenShortCode',
        'resolve' => function($post) {
            return [
                'html' => 'shortcode content',
            ];
        }
    ]);
}

Digging through the plugin code and adding lots of breakpoints I can see it returns the content I want, then on this line 338 in html-block.php it not longer returns the innerHTML of my shortcode.

if ( $doc->loadHTML( '<?xml encoding="utf-8" ?>' . $html ) ) {
        $root = new HTMLBlock( null, $doc, 'root' );
        return $root;
    }

Here is what is returned from the shortcode in my query.

{
  "type": "CORE_SHORTCODE",
  "innerHtml": "[before-after overlay_opacity=”0″ label_one=”Original” label_two=”BeFunky Vibrance Tool” label_color=”#1c1d1e”]",
  "tagName": "p",
  "attributes": [],
  "connections": []
},

I realize this all may be kind of vague, so please let me know where I can be clearer. Also happy to dig into the code if I can be pointed in the right direction.