Shortcodes from Visual Composer

[web86]

Hello! My posts are made with WpBakery (Visual Composer), so when I get them in WpGraphQL via wp-graphql-content-blocks I get a lot of not rendered shortcodes in output.

I solved this for content field, I registered a new field called "vsCodeShortcodesToHTML" and get there all decoded content. Then in my React component I just use this field instead of "content". To do so I added this code in my function,js:

// render js composer shortcodes to html in graphql response "addAllMappedShortcodes" field
add_action('graphql_register_types', function() {
    function vsCodeShortcodesToHTML( $post ) {
        if(class_exists('WPBMap') && method_exists('WPBMap', 'addAllMappedShortcodes')) {
            WPBMap::addAllMappedShortcodes(); 
        }
        return do_shortcode(get_post($post->ID)->post_content);
    }
    register_graphql_field('Post', 'vsComposerContentRendered', [
        'type' => 'String',
        'description' => __('the_content() VS Composer shortcodes rendered to HTML.', 'wp-graphql'),
        'resolve' => 'vsCodeShortcodesToHTML'
    ]);
    register_graphql_field('Page', 'vsComposerContentRendered', [
        'type' => 'String',
        'description' => __('the_content() VS Composer shortcodes rendered to HTML.', 'wp-graphql'),
        'resolve' => 'vsCodeShortcodesToHTML'
    ]);

});

It works for me untill I want to brake the content into blocks with your plugin. Shortcodes are still remaining. Any thoughts?

[chriszarate]

Per the README:

Shortcode/embed blocks are returned untransformed: the parsing of shortcodes is the responsibility of the front-end consuming the GraphQL endpoint. Only the name of the shortcode, its attributes and any nested content of the shortcode are returned in the GraphQL response.

This is mostly because its assumed your consuming application will want to render markup differently than your WordPress backend. So you are free to reimplement the shortcode in your consuming application, or you can filter graphql_blocks_output to transform the shortcode blocks and inject your desired HTML.