Cómo extraer bloques de Gutenberg WordPress para poder utilizarlos en otro lado

En este tutorial te explicaremos la forma en la que puedes extraer bloques del editor Gutenberg para que puedas utilizarlos como extracto o de la forma en la que prefieras, incluso se puede hacer un TOC.

Lo primero que necesitaremos es extraer todos los bloques que contiene nuestra entrada:

$blocks = parse_blocks( get_the_content() );

Esto nos regresará un arreglo con todos los bloques que existen en nuestro contenido, cada uno de los bloques cuenta con su respectiva información como:

• Tipo de bloque: blockName
• Atributos del bloque attrs como color, fondo, tamaño, etc…
• Bloques internos anidados innerBlocks (como columnas)
• Elementos para el contenido dentro del bloque que son innerHTML & innerContent).

El elemento innerHTML es una cadena de contenido HTML, mientras que innerContent es una arreglo de cadenas HTML.

Ahora vamos a suponer que queremos extraer todos los bloques de una entrada en específico, para eso utilizamos:

$post_id = 1;
$post = get_post($post_id);
$blocks = parse_blocks($post->post_content);
foreach ($blocks as $block) {
 echo render_block($block);
}

Con este código nos traemos e imprimimos todos los blocks bloques de la entrada con el ID 1.

Ahora vamos a probar con el siguiente código para extraer únicamente los párrafos de nuestra entrada, para eso utilizamos lo siguiente:

foreach ($blocks as $block) {
 if ($block['blockName'] == 'core/paragraph') {
  echo render_block($block);
 }
}

Y ahora vamos a probar extraer todas las cabeceras (h2, h3, h4, h5 y h6)

foreach ($blocks as $block) {
 if ($block['blockName'] == 'core/heading') {
  echo render_block($block);
 }
}

En el caso de las cabeceras podemos ver que existen atributos a los cuáles podemos acceder, por ejemplo si solo queremos obtener las cabeceras que pertenecen al nivel 2 (H2).

• H2 – Nivel 2
• H3 – Nivel 3
• H4 – Nivel 4
• H5 – Nivel 5
• H6 – Nivel 6

foreach ($blocks as $block) {
 if ($block['blockName'] == 'core/heading') {
  $level = (isset($block['attrs']['level'])) ? $block['attrs']['level'] : 2;
  if($level === 2){ //Elegimos el nivel de la cabecera
    echo render_block($block);
  }
 }
}

Función para extraer un bloque desde Gutenberg

Con esta función podemos extraer cualquiera de los bloques generales de nuestras entradas.

Utilizamos un switch para que esta función pueda ser utilizada con otro tipo de bloques que se le vayan agregando a Gutenberg. Pueden agregar o quitar los que deseen.

/**
 * Get first gutenberg block by tag
 * @link https://spiga.agency/como-extraer-bloques-de-gutenberg-wordpress-para-poder-utilizarlo-en-otro-lado/
 */
if ( ! function_exists( 'spiga_get_first_block_by_tag' ) ) :
 function spiga_get_first_block_by_tag(
  $post_id = null,
  $tag = 'p',
  $reder = false
 ){
   switch ($tag) {
    case 'p':
     $gutenberg_block = 'core/paragraph';
     break;
    case 'heading':
     $gutenberg_block = 'core/heading';
     break;
    case 'img':
     $gutenberg_block = 'core/image';
     break;
    case 'gallery':
     $gutenberg_block = 'core/gallery';
     break;
   case 'list':
     $gutenberg_block = 'core/list';
     break;
   case 'gallery':
     $gutenberg_block = 'core/gallery';
     break;
   case 'quote':
     $gutenberg_block = 'core/quote';
     break;
   case 'audio':
     $gutenberg_block = 'core/audio';
     break;
   case 'cover':
     $gutenberg_block = 'core/cover';
     break;
   case 'file':
     $gutenberg_block = 'core/file';
     break;
   case 'preformatted':
     $gutenberg_block = 'core/preformatted';
     break;
   case 'code':
     $gutenberg_block = 'core/code';
     break;
   case 'html':
     $gutenberg_block = 'core/html';
     break;
   case 'pullquote':
     $gutenberg_block = 'core/pullquote';
     break;
   case 'shortcode':
     $gutenberg_block = 'core/shortcode';
     break;
   case 'embed':
     $gutenberg_block = 'core/embed';
     break;
   default:
     $gutenberg_block = 'core/paragraph';
     break;
}
   $post_id = ($post_id  ? $post_id  : get_the_ID());
   $post = get_post($post_id);
   $blocks = parse_blocks($post->post_content);
   $output = '';
   if (!empty($blocks)) {  // Non-Gutenberg posts
    foreach ($blocks as $block) {
     if ($block['blockName'] == $gutenberg_block) {
      $output = strip_tags($block['innerHTML']);
      if($render){
        $output = render_block($block);
      }
      break;
     }
    }
    return $output;
   }
 }
endif;

spiga_get_first_block_by_tag( int|WP_Post $post_id = null, string $tag = 'p', bool $render = false)

Parámetros

$post_id

(int|WP_Post) (Opcional) Post ID ó el objeto WP_Post. Por default es el $post global.

$tag

(string) (Requerido) El tipo de tag (bloque) que se va a extraer del contenido. Default p (párrafo).

$render

(bool) (Opcional) Si se desea mostrar el bloque con todo el HTML. Default false.

Ojo con el parámetro de $render: Para las galerías, bloques con imágenes o dinámicos habrá que ponerlo en true para que se imprima el bloque, en otro tutorial veremos como extraer la galería y mostrarla de una forma personalizada.

En el siguiente ejemplo estamos mostrando el primer párrafo que se encuentre en nuestro artículo.

<?php 
 echo spiga_get_first_block_by_tag(
 $post_id ='',
 $tag ='p',
 $render = false);
?>

Ahora hagamos esto más divertido, debemos obtener el extracto de una entrada el extracto de una entrada, para eso podemos tener varias opciones que tendrán prioridad:

1. Primero que la obtenga la meta description de algún plugin que usemos, en este caso vamos a considerar los dos más usados. (RankMath y Yoast)
2. En caso de que no exista ninguna descripción meta del plugin mostraremos el extracto (excerpt)
3. Si no existe tampoco el excerpt entonces nos iremos por primer h2 que se encuentre en nuestro contenido
4. Por último si todo lo anterior falla mostraremos le primer párrafo de nuestro contenido

Función para mostrar un extracto del post con los bloques de gutenberg

/**
 * Get gutenberg first tag or seo description to show
 * @link https://spiga.agency/como-extraer-bloques-de-gutenberg-wordpress-para-poder-utilizarlo-en-otro-lado/
 */
if(!function_exists('spiga_get_article_teaser')) :
 function spiga_get_article_teaser(
  $post_id     = '$post->ID',
  $teaser_use_seoplugin  = true,
  $teaser_use_excerpt  = true,
  $teaser_use_first_heading  = true,
  $teaser_use_first_p  = true
 ){
 $post_id = ($post_id ? $post_id  : get_the_ID());
 $output = '';
 $get_seo_meta = '';
 $get_excerpt  = '';
 $get_first_heading  = '';
 $get_first_p  = '';
 if($teaser_use_seoplugin){
  if ( class_exists('WPSEO_Primary_Term') ) {
   $get_seo_meta = get_post_meta( $post_id, '_yoast_wpseo_metadesc', true );
  } elseif(class_exists('RankMath')) {
   $get_seo_meta =  RankMath\Post::get_meta( 'description', $post_id );
  }
 }
 if($teaser_use_excerpt){
  $get_excerpt = get_the_excerpt( $post_id );
 }
 if($teaser_use_first_heading){
  $get_first_heading = spiga_get_first_block_by_tag($post_id,'heading',false);
 }
 if($teaser_use_first_p){
  $get_first_p = spiga_get_first_block_by_tag($post_id,'p',false);
 }

 if(!empty( $get_seo_meta ) ) {
  $get_teaser = $get_seo_meta;
 } elseif(has_excerpt( $post_id )){
  $get_teaser = $get_excerpt;
 } else {
  $get_teaser = $get_first_heading;
  if(!$get_teaser){
   $get_teaser = $get_first_p;
  }
 }
 if(!empty($get_teaser)){
  return $get_teaser;
 }
}
endif;

spiga_get_article_teaser( int|WP_Post $post_id = null, bool $teaser_use_seoplugin = true, bool $teaser_use_excerpt = true, bool $teaser_use_first_heading = true, bool $teaser_use_first_p = true)

Parámetros

$post_id

(int|WP_Post) (Opcional) Post ID ó el objeto WP_Post. Por default es el $post global.

$teaser_use_seoplugin

(bool) (Opcional) Si deseamos mostrar la meta description de alguno de los plugins que se usan comunmente para SEO (RankMath o Yoast). Default true

$teaser_use_excerpt

(bool) (Opcional) Si deseamos utilizar el campo de excerpt de nuestro post como teaser en caso de que la meta description del plugin no exista. Default true.

$teaser_use_first_heading

(bool) (Opcional) Si deseamos utilizar la primera bloque cabecera (h2,h3,h4,h5,h6) de nuestro contenido. Default true.

$teaser_use_first_p

(bool) (Opcional) Si deseamos utilizar el primer bloque de párrafo de nuestro contenido. Default true.

Tipos de bloques en Gutemberg

Aquí tienen un listado de los bloques por default con los que cuenta gutenberg que pueden jugar utilizando las funciones de arriba.

Embeds