{"id":468,"date":"2021-07-27T03:08:18","date_gmt":"2021-07-27T08:08:18","guid":{"rendered":"https:\/\/spiga.mx\/?p=468"},"modified":"2022-09-10T22:05:34","modified_gmt":"2022-09-11T03:05:34","slug":"como-extraer-bloques-de-gutenberg-wordpress-para-poder-utilizarlos-en-otro-lado","status":"publish","type":"post","link":"https:\/\/spiga.mx\/como-extraer-bloques-de-gutenberg-wordpress-para-poder-utilizarlos-en-otro-lado\/","title":{"rendered":"C\u00f3mo extraer bloques de Gutenberg WordPress para poder utilizarlos en otro lado"},"content":{"rendered":"\n<p>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 <abbr title=\"Table of Contents\">TOC.<\/abbr><\/p>\n\n\n\n<p>Lo primero que necesitaremos es extraer todos los bloques que contiene nuestra entrada:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">$blocks = parse_blocks( get_the_content() );<\/code><\/pre>\n\n\n\n<p>Esto nos regresar\u00e1 un arreglo con todos los bloques que existen en nuestro contenido, cada uno de los bloques cuenta con su respectiva informaci\u00f3n como:<\/p>\n\n\n\n<ul><li>Tipo de bloque: <code>blockName<\/code><\/li><li>Atributos del bloque <code>attrs<\/code> como color, fondo, tama\u00f1o, etc&#8230;<\/li><li>Bloques internos anidados <code>innerBlocks<\/code> (como columnas)<\/li><li>Elementos para el contenido dentro del bloque que son <code>innerHTML<\/code> &amp; <code>innerContent<\/code>).<\/li><\/ul>\n\n\n\n<p>El elemento <strong>innerHTML<\/strong> es una cadena de contenido HTML, mientras que <strong>innerContent<\/strong> es una arreglo de cadenas HTML.<\/p>\n\n\n\n<p>Ahora vamos a suponer que queremos extraer todos los bloques de una entrada en espec\u00edfico, para eso utilizamos:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post-&gt;post_content);\nforeach ($blocks as $block) {\n echo render_block($block);\n}<\/code><\/pre>\n\n\n\n<p>Con este c\u00f3digo nos traemos e imprimimos todos los blocks bloques de la entrada con el ID 1.<\/p>\n\n\n\n<p>Ahora vamos a probar con el siguiente c\u00f3digo para extraer \u00fanicamente los p\u00e1rrafos de nuestra entrada, para eso utilizamos lo siguiente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/paragraph') {\n  echo render_block($block);\n }\n}<\/code><\/pre>\n\n\n\n<p>Y ahora vamos a probar extraer todas las cabeceras (h2, h3, h4, h5 y h6)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/heading') {\n  echo render_block($block);\n }\n}<\/code><\/pre>\n\n\n\n<p>En el caso de las cabeceras podemos ver que existen atributos a los cu\u00e1les podemos acceder, por ejemplo si solo queremos obtener las cabeceras que pertenecen al nivel 2 (H2).<\/p>\n\n\n\n<ul><li>H2 \u2013 Nivel 2<\/li><li>H3 \u2013 Nivel 3<\/li><li>H4 \u2013 Nivel 4<\/li><li>H5 \u2013 Nivel 5<\/li><li>H6 \u2013 Nivel 6<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/heading') {\n  $level = (isset($block['attrs']['level'])) ? $block['attrs']['level'] : 2;\n  if($level === 2){ \/\/Elegimos el nivel de la cabecera\n    echo render_block($block);\n  }\n }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Funci\u00f3n para extraer un bloque desde Gutenberg <\/h2>\n\n\n\n<p>Con esta funci\u00f3n podemos extraer cualquiera de los bloques generales de nuestras entradas. <\/p>\n\n\n\n<p>Utilizamos un <code>switch<\/code> para que esta funci\u00f3n pueda ser utilizada con otro tipo de bloques que se le vayan agregando a Gutenberg. Pueden agregar o quitar los que deseen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\/**\n * Get first gutenberg block by tag\n * @link https:\/\/spiga.mx\/como-extraer-bloques-de-gutenberg-wordpress-para-poder-utilizarlo-en-otro-lado\/\n *\/\nif ( ! function_exists( 'spiga_get_first_block_by_tag' ) ) :\n function spiga_get_first_block_by_tag(\n  $post_id = null,\n  $tag = 'p',\n  $reder = false\n ){\n   switch ($tag) {\n    case 'p':\n     $gutenberg_block = 'core\/paragraph';\n     break;\n    case 'heading':\n     $gutenberg_block = 'core\/heading';\n     break;\n    case 'img':\n     $gutenberg_block = 'core\/image';\n     break;\n    case 'gallery':\n     $gutenberg_block = 'core\/gallery';\n     break;\n   case 'list':\n     $gutenberg_block = 'core\/list';\n     break;\n   case 'gallery':\n     $gutenberg_block = 'core\/gallery';\n     break;\n   case 'quote':\n     $gutenberg_block = 'core\/quote';\n     break;\n   case 'audio':\n     $gutenberg_block = 'core\/audio';\n     break;\n   case 'cover':\n     $gutenberg_block = 'core\/cover';\n     break;\n   case 'file':\n     $gutenberg_block = 'core\/file';\n     break;\n   case 'preformatted':\n     $gutenberg_block = 'core\/preformatted';\n     break;\n   case 'code':\n     $gutenberg_block = 'core\/code';\n     break;\n   case 'html':\n     $gutenberg_block = 'core\/html';\n     break;\n   case 'pullquote':\n     $gutenberg_block = 'core\/pullquote';\n     break;\n   case 'shortcode':\n     $gutenberg_block = 'core\/shortcode';\n     break;\n   case 'embed':\n     $gutenberg_block = 'core\/embed';\n     break;\n   default:\n     $gutenberg_block = 'core\/paragraph';\n     break;\n}\n   $post_id = ($post_id  ? $post_id  : get_the_ID());\n   $post = get_post($post_id);\n   $blocks = parse_blocks($post-&gt;post_content);\n   $output = '';\n   if (!empty($blocks)) {  \/\/ Non-Gutenberg posts\n    foreach ($blocks as $block) {\n     if ($block['blockName'] == $gutenberg_block) {\n      $output = strip_tags($block['innerHTML']);\n      if($render){\n        $output = render_block($block);\n      }\n      break;\n     }\n    }\n    return $output;\n   }\n }\nendif;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">spiga_get_first_block_by_tag( int|WP_Post $post_id = null, string $tag = 'p', bool $render = false)<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Par\u00e1metros<\/h4>\n\n\n\n<dl>\n <dt>$post_id<\/dt>\n <dd>(int|WP_Post) (Opcional) Post ID \u00f3 el objeto WP_Post. Por default es el $post global.<\/dd>\n <dt>$tag<\/dt>\n <dd>(string) (Requerido) El tipo de tag (bloque) que se va a extraer del contenido. Default p (p\u00e1rrafo).<\/dd>\n <dt>$render<\/dt>\n <dd>(bool) (Opcional) Si se desea mostrar el bloque con todo el HTML. Default false.<\/dd>\n<\/dl>\n\n\n\n<p><strong>Ojo con el par\u00e1metro de $render:<\/strong> Para las galer\u00edas, bloques con im\u00e1genes o din\u00e1micos habr\u00e1 que ponerlo en true para que se imprima el bloque, en otro tutorial veremos como extraer la galer\u00eda y mostrarla de una forma personalizada.<\/p>\n\n\n\n<p>En el siguiente ejemplo estamos mostrando el primer p\u00e1rrafo que se encuentre en nuestro art\u00edculo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php \n echo spiga_get_first_block_by_tag(\n $post_id ='',\n $tag ='p',\n $render = false);\n?&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<p>Ahora hagamos esto m\u00e1s divertido, debemos  obtener el extracto de una entrada el extracto de una entrada, para eso podemos tener varias opciones que tendr\u00e1n prioridad:<\/p>\n\n\n\n<ol class=\"list list--ol\"><li>Primero que la obtenga la meta description de alg\u00fan plugin que usemos, en este caso vamos a considerar los dos m\u00e1s usados. (RankMath y Yoast)<\/li><li>En caso de que no exista ninguna descripci\u00f3n meta del plugin mostraremos el extracto (excerpt)<\/li><li>Si no existe tampoco el excerpt entonces nos iremos por primer h2 que se encuentre en nuestro contenido<\/li><li>Por \u00faltimo si todo lo anterior falla mostraremos le primer p\u00e1rrafo de nuestro contenido<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Funci\u00f3n para mostrar un extracto del post con los bloques de gutenberg<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\"><meta charset=\"utf-8\">\/**\n * Get gutenberg first tag or seo description to show\n * @link https:\/\/spiga.mx\/como-extraer-bloques-de-gutenberg-wordpress-para-poder-utilizarlo-en-otro-lado\/\n *\/\nif(!function_exists('spiga_get_article_teaser')) :\n function spiga_get_article_teaser(\n  $post_id     = '$post-&gt;ID',\n  $teaser_use_seoplugin  = true,\n  $teaser_use_excerpt  = true,\n  $teaser_use_first_heading  = true,\n  $teaser_use_first_p  = true\n ){\n $post_id = ($post_id ? $post_id  : get_the_ID());\n $output = '';\n $get_seo_meta = '';\n $get_excerpt  = '';\n $get_first_heading  = '';\n $get_first_p  = '';\n if($teaser_use_seoplugin){\n  if ( class_exists('WPSEO_Primary_Term') ) {\n   $get_seo_meta = get_post_meta( $post_id, '_yoast_wpseo_metadesc', true );\n  } elseif(class_exists('RankMath')) {\n   $get_seo_meta =  RankMath\\Post::get_meta( 'description', $post_id );\n  }\n }\n if($teaser_use_excerpt){\n  $get_excerpt = get_the_excerpt( $post_id );\n }\n if($teaser_use_first_heading){\n  $get_first_heading = spiga_get_first_block_by_tag($post_id,'heading',false);\n }\n if($teaser_use_first_p){\n  $get_first_p = spiga_get_first_block_by_tag($post_id,'p',false);\n }\n\n if(!empty( $get_seo_meta ) ) {\n  $get_teaser = $get_seo_meta;\n } elseif(has_excerpt( $post_id )){\n  $get_teaser = $get_excerpt;\n } else {\n  $get_teaser = $get_first_heading;\n  if(!$get_teaser){\n   $get_teaser = $get_first_p;\n  }\n }\n if(!empty($get_teaser)){\n  return $get_teaser;\n }\n}\nendif;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">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)<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Par\u00e1metros<\/h4>\n\n\n\n<dl>\n <dt>$post_id<\/dt>\n <dd>(int|WP_Post) (Opcional) Post ID \u00f3 el objeto WP_Post. Por default es el $post global.<\/dd>\n <dt>$teaser_use_seoplugin<\/dt>\n <dd>(bool) (Opcional) Si deseamos mostrar la meta description de alguno de los plugins que se usan comunmente para SEO (RankMath o Yoast). Default true<\/dd>\n <dt>$teaser_use_excerpt<\/dt>\n <dd>(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.<\/dd>\n <dt>$teaser_use_first_heading<\/dt>\n <dd>(bool) (Opcional) Si deseamos utilizar la primera bloque cabecera (h2,h3,h4,h5,h6) de nuestro contenido. Default true.<\/dd>\n<dt>$teaser_use_first_p<\/dt>\n <dd>(bool) (Opcional) Si deseamos utilizar el primer bloque de p\u00e1rrafo de nuestro contenido. Default true.<\/dd>\n<\/dl>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Tipos de bloques en Gutemberg<\/h2>\n\n\n\n<p>Aqu\u00ed tienen un listado de los bloques por default con los que cuenta gutenberg que pueden jugar utilizando las funciones de arriba.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"font-primary wp-block-heading\">Bloques comunes<\/h3>\n\n\n\n<ul><li>Paragraph: <code>core\/paragraph<\/code><\/li><li>Image: <code>core\/image<\/code><\/li><li>Heading: <code>core\/heading<\/code><\/li><li>Gallery: <code>core\/gallery<\/code><\/li><li>List: <code>core\/list<\/code><\/li><li>Quote: <code>core\/quote<\/code><\/li><li>Audio: <code>core\/audio<\/code><\/li><li>Cover: <code>core\/cover<\/code><\/li><li>File: <code>core\/file<\/code><\/li><li>Video: <code>core\/video<\/code> <\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"font-primary wp-block-heading\">Formatting<\/h3>\n\n\n\n<ul><li>Preformatted: <code>core\/preformatted<\/code><\/li><li>Code: <code>core\/code<\/code><\/li><li>Classic: <code>core\/freeform<\/code> <br>(para las entradas que no usen Gutenberg retornar\u00e1 <code>null<\/code>)<\/li><li>Custom HTML: <code>core\/html<\/code><\/li><li>Pullquote: <code>core\/pullquote<\/code><\/li><li>Table: <code>core\/table<\/code><\/li><li>Verse: <code>core\/verse<\/code> <\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"font-primary wp-block-heading\">Layout<\/h3>\n\n\n\n<ul><li>Button: <code>core\/button<\/code><\/li><li>Columns: <code>core\/columns<\/code><\/li><li>More: <code>core\/more<\/code><\/li><li>Page Break: <code>core\/nextpage<\/code><\/li><li>Separator: <code>core\/separator<\/code><\/li><li>Spacer: <code>core\/spacer<\/code><\/li><li>Media &amp; Text: <code>core\/media-text<\/code> <\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"font-primary wp-block-heading\">Widgets<\/h3>\n\n\n\n<ul><li>Shortcode: <code>core\/shortcode<\/code><\/li><li>Archives: <code>core\/archives<\/code><\/li><li>Categories: <code>core\/categories<\/code><\/li><li>Latest Comments: <code>core\/latest-omments<\/code><\/li><li>Latest Posts: <code>core\/latest-posts<\/code> <\/li><\/ul>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"font-primary wp-block-heading\">Embeds<\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul><li>Embed:  <code>core\/embed<\/code><\/li><li>Twitter: <code>core-embed\/twitter<\/code><\/li><li>YouTube:  <code>core-embed\/youtube<\/code><\/li><li>WordPress: <code>core-embed\/wordpress<\/code><\/li><li>SoundCloud: <code>core-embed\/soundcloud<\/code><\/li><li>Spotify: <code>core-embed\/spotify<\/code><\/li><li>Flickr: <code>core-embed\/flickr<\/code><\/li><li>Vimeo: <code>core-embed\/vimeo<\/code><\/li><li>Animoto: <code>core-embed\/animoto<\/code><\/li><li>Cloudup: <code>core-embed\/cloudup<\/code><\/li><li>Crowdsignal: <code>core-embed\/crowdsignal<\/code><\/li><li>Dailymotion: <code>core-embed\/dailymotion<\/code><\/li><li>Hulu: <code>core-embed\/hulu<\/code><\/li><li>Imgur: <code>core-embed\/imgur<\/code><\/li><li>Issuu: <code>core-embed\/issuu<\/code><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<ul><li><span style=\"color: initial; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, &quot;Helvetica Neue&quot;, sans-serif;\">Kickstarter: <\/span><code style=\"background-color: rgb(255, 255, 255); color: initial;\">core-embed\/kickstarter<\/code><\/li><li>Meetup.com: <code>core-embed\/meetup-com<\/code><\/li><li>Mixcloud: <code>core-embed\/mixcloud<\/code><\/li><li>Reddit: <code>core-embed\/reddit<\/code><\/li><li>ReverbNation: <code>core-embed\/reverbnation<\/code><\/li><li>Screencast: <code>core-embed\/screencast<\/code><\/li><li>Scribd: <code>core-embed\/scribd<\/code><\/li><li>Slideshare: <code>core-embed\/slideshare<\/code><\/li><li>SmugMug: <code>core-embed\/smugmug<\/code><\/li><li>Speaker Deck: <code>core-embed\/speaker<\/code><\/li><li>TED: <code>core-embed\/ted<\/code><\/li><li>Tumblr: <code>core-embed\/tumblr<\/code><\/li><li>VideoPress: <code>core-embed\/videopress<\/code><\/li><li>WordPress.tv: <code>core-embed\/wordpress-tv<\/code><\/li><li>Amazon Kindle: <code>core-embed\/amazon-kindle<\/code><\/li><\/ul>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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: Esto nos regresar\u00e1 un arreglo con &hellip; <a href=\"https:\/\/spiga.mx\/como-extraer-bloques-de-gutenberg-wordpress-para-poder-utilizarlos-en-otro-lado\/\">Continuar<\/a><\/p>\n","protected":false},"author":1,"featured_media":470,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/spiga.mx\/wp-content\/uploads\/2021\/07\/extraer-gutenberg-blocks.png?fit=1200%2C630&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcaTtO-7y","_links":{"self":[{"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/posts\/468"}],"collection":[{"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/comments?post=468"}],"version-history":[{"count":1,"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/posts\/468\/revisions"}],"predecessor-version":[{"id":640,"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/posts\/468\/revisions\/640"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/media\/470"}],"wp:attachment":[{"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/media?parent=468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/categories?post=468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spiga.mx\/wp-json\/wp\/v2\/tags?post=468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}