Правильные шорткоды для Gutenberg

Если сделать шорткод неправильно то Gutenberg будет отрабатывать его некорректно. В редакторе выведется ошибка «Этот блок содержит неожиданный или недопустимый контент JSON».

Основное правило заключается в том что функция шорткода должна не выводить что-либо (echo), а возвращать (return).

Также можно экранировать функции от срабатывания в админке:

if (is_admin()) { return false; }

Примеры:

Функция (шорткод) по выводу страниц (с заполненными определенными полями для плиточной системы)

function site_masonry() {
	
	if (is_admin()) { return false; }
	
	$args = array(
		'post_type' => 'page',
		'meta_query' => array(
			array(
				'key' => 'thumb_active',
			),
			array(
				'key' => 'thumb_image',
			)
		),
	);
	$array_posts = get_posts($args);

	if (!empty($array_posts)) :		
	$masonry = '<div class="wrapper"><div class="grid">
				<div class="grid-sizer"></div>';
	foreach ($array_posts as $array_post) {

		$thumb_config = get_post_meta($array_post->ID, 'thumb_config', 1);
		$thumb_image = get_post_meta($array_post->ID, 'thumb_image', 1);
		
		$post_class = implode(' ', get_post_class());
		$post_class .= ' '.$thumb_config;
		$post_class .= ' grid-item';

		$masonry .= '<div class="'.$post_class.'" id="post-'.$array_post->ID.'"><a href="'.get_permalink($array_post->ID).'">
			<p>'.$array_post->post_title.'</p>
			<img src="'.$thumb_image.'" alt="'.$array_post->post_title.'">
			</a></div>';

	}
	$masonry .= '</div></div>';	
	
	endif;
	
	return $masonry;
}

add_shortcode( 'site-masonry', 'site_masonry' );

Шорткод вывода слайдера, с подключением файла

function siteslider() { 
	$slider = '';
	include(__DIR__."/slider.php");
	return $slider;
}
add_shortcode( 'site-slider', 'siteslider' );

Содержимое файла slider.php

<?php $args = array( 
	'posts_per_page' => 5, 
	'offset'=> 0, 
	'post_type' => 'slide',
	'meta_query' => array(
		array(
			'key' => '_thumbnail_id',
		)
	)
);

$myposts = get_posts($args);
if (!empty($myposts)) {
	
	$slider = '<div id="index-slider" class="owl-carousel owl-theme">';

	foreach( $myposts as $post ){ setup_postdata($post);
		
		$thumb_src = get_the_post_thumbnail_url($post->ID, 'full');
		$link = get_post_meta($post->ID, 'slidelink', true);				 
								 
		if ( !empty($link) ):
								 
			$slider .= '<div class="item"><a href="'.$link.'">
			<img class="owl-lazy" data-src="'.$thumb_src.'" alt="'.get_the_title().'">
			</a></div>';
				
		else:

			$slider .= '<div class="item"><img class="owl-lazy" data-src="'.$thumb_src.'" alt="'.get_the_title().'"></div>';
			
		endif;		
								 
								 
	}
	
	$slider .= '</div>';
}

Шорткод вывода меток

// Шорткод вывода меток

function enter_animals_tag($atts) {
	
	if (is_admin()) { return false; }
	
	// Get attribuets
	extract(shortcode_atts(array(
		"animal" => ''
	), $atts));
	
	$terms = get_terms( array(
		'taxonomy' => 'post_tag',
		'hide_empty' => 0,
		'orderby' => 'term_order',
		'include' => $animal
	) ); 
	
	if($terms) :
	$post_tags = '<div class="wrapper"><div id="animals" class="items columns-5">';
	foreach($terms as $term) :

		$icon_id = get_term_meta( $term->term_id, 'icon' );
		$icon_image = wp_get_attachment_image( $icon_id[0], 'full' );

		$post_tags .= '<div class="item"><a href="/tag/'.$term->slug.'/" class="img-text">';
		$post_tags .= $icon_image;
		$post_tags .= '<p>'.$term->name.'</p>';
		$post_tags .= '</a></div>';

	endforeach;
	$post_tags .= '</div></div>';
	endif;
	
	return $post_tags;
}

add_shortcode( 'site-animals', 'enter_animals_tag' );

Шорткод [site-animals] выведет все метки.

Шорткод [site-animals animal=5,4] выведет только метки с ID 5 и ID 4.

[site-socialshare]