Showing custom oEmbed preview outputs in Gutenberg

  • Hi there,

    I’m trying to display custom oEmbed preview outputs in the block editor but to no avail.

    For example, by adding code like this, and enter the url https://abc.somewhere.com/foo/bar in the Gutenberg block editor, it appears that it attempts to find embeddable elements and but it does not display any preview. So the user would think it failed. On the other hand, in the front-end of the post, the custom output is certainly displayed. 

    
wp_embed_register_handler(
    "test_oembed",
    "#https?://([a-z0-9-]+\.)?somewhere\.com/.*#i",
    "getOutputOfSomewhere"
);

function getOutputOfSomewhere( $matches, $attributes, $url, $raw_attributes ) {
    return "<pre>"
        . "<h3>Custom oEmbed Output</h3>"
        . "<p>This is a test.</p>"
        . "</pre>";
}

    I’m looking for a way to display custom oEmbed preview outputs in Gutenberg.

    Does anybody know how? Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)

  • I am having the same problem. My code returns the embed as expected in the classic editor and a front end site editor, but fails in the Gutenberg block editor. For some reason beyond my skill level the WP_Embed class is returning false

    The code I am testing is:

    
	function embed_extras_register_h5p(){

		$regex_url = '#https://h5pstudio\.ecampusontario\.ca/content/([0-9]+)#i';

		wp_embed_register_handler(
				'h5p',
				$regex_url,
				'embed_extras_handler_h5p'
		);
	}

	function embed_extras_handler_h5p( $matches, $attr, $url, $rawattr ) {

		$embed = sprintf(
			'<div class="h5p-embed"><iframe src="https://h5pstudio.ecampusontario.ca/h5p/%1$s/embed" width="894" height="314" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>',
			esc_attr($matches[1])
		);

		return $embed;
	}

    He, I have exactly the same problem. Lets open up a ticket maybe?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Showing custom oEmbed preview outputs in Gutenberg’ is closed to new replies.