Search code examples
wordpresswordpress-gutenberg

Hide shortcode preview in gutenberg

I created a custom shortcode that renders some html / css / javascript from a template file.

function jsd_waitlist_hero_shortcode() {
  include dirname( __FILE__ ) . '/jsd-templates/' . 'jsd-waitlist-hero.php';
  return null;
}
add_shortcode('jsd_waitlist_hero', 'jsd_waitlist_hero_shortcode');

This works great, but, when I include it in a page,

the content shows up in the editor.

I don't want this to happen, because the css ends up breaking, and it looks weird.

Is there a way I can tell Gutenberg to not display the shortcode in the editor, but still display it when live?

Solution

  • Running include inside ob_start and ob_get_clean did the trick

    function jsd_waitlist_hero_shortcode() {
  ob_start();
  include dirname( __FILE__ ) . '/jsd-templates/' . 'jsd-waitlist-hero.php';
  $content = ob_get_clean();
  return $content;
}