Skip to content

Getting Gutenberg Shortcode content in query #5

@AntonEmery

Description

@AntonEmery

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions