Cómo acceder y analizar bloques de Gutenberg con PHP
En esta publicación, veremos cómo analizar los bloques de Gutenberg de una publicación y extraer bloques específicos para hacer otra cosa. Veremos las funciones PHP de WordPress para analizar, extraer y representar los bloques elegidos.
Uno de los beneficios del nuevo editor de Gutenberg en WordPress son los datos más estructurados para el contenido de las publicaciones. En los días anteriores, todo se almacenaba como HTML y no había forma de extraer partes específicas de contenido sin algunas expresiones regulares muy complejas. Pero con Gutenberg, cada pieza de contenido, ya sea un párrafo, un encabezado, una imagen, un video, un botón o una columna que tenga otros bloques dentro, se almacena con información que nos dice qué es esa pieza de contenido.
Con las funciones integradas de WordPress, es muy fácil obtener todos los bloques en el contenido de una publicación en una matriz con toda su información. Esto abre un montón de funciones útiles para los desarrolladores de temas. Solo por mencionar algunas ideas:
- Genere dinámicamente una tabla de contenido recuperando todos los encabezados (tutorial a continuación).
- Obtenga todos los videos, imágenes o citas utilizadas en todas las publicaciones para recopilarlas y enumerarlas en otra página.
- Extraiga el primer párrafo de una publicación y utilícelo como extracto en los archivos (tutorial a continuación).
- Obtenga una descripción general del uso de bloques específicos y su posición. Por ejemplo, digamos que tiene un bloque de anuncios personalizado y necesita saber con qué frecuencia se usa en sus publicaciones y qué tan abajo en el contenido aparecen.
- Renderice los bloques de una publicación pero excluya tipos de bloques específicos.
- Compruebe si el contenido de una publicación comienza con un video y use ese video en lugar de la imagen destacada en los archivos.
- Si usa un bloque personalizado que contiene especificaciones técnicas de los productos, puede crear fácilmente una página que muestre y compare las especificaciones técnicas en las publicaciones de productos.
- Reúna dinámicamente todas las imágenes individuales utilizadas en una publicación y genere una galería de ellas al final o en otro lugar.
¡Vamos a saltar directamente a eso!
Analizar los bloques de una publicación
Para analizar bloques usamos la función de WordPress [parse_blocks](https://developer.wordpress.org/reference/functions/parse_blocks/)(). Como parámetro, debe proporcionar una cadena del contenido de una publicación. Si está dentro de un bucle o tiene acceso a un objeto de publicación, simplemente proporcione un $post->post_contentparámetro a la función.
El retorno de parse_blocks()es una matriz donde cada elemento de la matriz es un bloque. Para cada elemento de bloque, tiene información como el tipo de bloque (clave ‘ blockName‘), atributos de bloque (clave ‘ attrs‘), bloques internos para bloques anidados como Columnas (clave ‘ innerBlocks‘), y dos elementos para el contenido real del bloque (claves ‘ innerHTML‘ y ‘ innerContent‘). El elemento innerHTMLes una cadena de contenido HTML, mientras que innerContentes una matriz de cadenas HTML.
¡Y eso es todo! Recorra la matriz devuelta parse_blocks()para hacer lo suyo. Veremos más ejemplos de código de esto más adelante en esta publicación.
Una nota sobre publicaciones clásicas (no Gutenberg)
Es posible que esté trabajando en un sitio de WordPress más antiguo que ha creado publicaciones antes de actualizar a Gutenberg (o que usó un complemento de Deshabilitar Gutenberg). En este caso, estas publicaciones no tendrán contenido de publicación estructurado, sino que todo el contenido de la publicación estará dentro de un bloque de "Editor clásico".
La matriz devuelta por la función parse_blocks()en este tipo de publicaciones devolverá un elemento de matriz de bloques con blockNameel valor null. El contenido HTML completo de la publicación está dentro de la innerHTMLcadena de este elemento.
Podemos asumir con seguridad que si el retorno de una publicación parse_blocks()tiene un elemento y blockNamees null, estamos tratando con una publicación "anterior a Gutenberg". De lo contrario blockName, siempre se completará. Esta es una buena verificación para tener en cuenta al escribir código para analizar bloques de publicaciones y desea manejar contenido antiguo de WordPress.
Renderizar un bloque
WordPress también ofrece una función para renderizar un bloque específico con [render_block](https://developer.wordpress.org/reference/functions/render_block/)(). Como parámetro, debe proporcionar una matriz para un bloque, como una de las devueltas parse_blocks()anteriormente. La función devuelve una cadena de HTML renderizado que simplemente puede repetir directamente.
El código anterior representará todos los bloques de la publicación, como lo haría normalmente al representar el contenido de la publicación. La parte divertida viene cuando comenzamos a agregar código para excluir o incluir bloques específicos que nos interesan.
Por ejemplo, el siguiente código solo imprimirá los bloques de párrafo de la publicación:
foreach ($blocks as $block) {
if ($block['blockName'] == 'core/paragraph') {
echo render_block($block);
}
}Y esto generará todos los bloques, pero excluirá todos los bloques de shortcode:
foreach ($blocks as $block) {
if ($block['blockName'] != 'core/shortcode') {
echo render_block($block);
}
}Nombres de bloques
Al analizar los bloques de una publicación, lo más probable es que necesite verificar el tipo de bloque. Son bastante simples de adivinar. Por ejemplo, un bloque de párrafo es, bueno, lo adivinaste, paragraph. Sin embargo, tenga en cuenta que todos los bloques de Gutenberg en WordPress tienen un prefijo de espacio de nombres. Para los bloques principales de WordPress (predeterminados), todos tienen el prefijo " core/". La excepción son los bloques Embed que tienen el prefijo " core-embed/". Entonces, por ejemplo, un bloque de párrafo tendrá el nombre de bloque core/paragraph.
Para evitar adivinanzas, aquí hay una descripción general de los bloques predeterminados proporcionados por WordPress (al momento de escribir esto):
Bloques comunes
- Párrafo:
core/paragraph - Imagen:
core/image - Bóveda:
core/heading - Galería:
core/gallery - Lista:
core/list - Cotizar:
core/quote - Audio:
core/audio - Cubrir:
core/cover - Expediente:
core/file - Video:
core/video
Formateo
- Preformateado:
core/preformatted - Código:
core/code - Clásico:
core/freeform
(pero para publicaciones que no sean de Gutenberg seránull, consulte la nota sobre publicaciones que no son de Gutenberg) - HTML personalizado:
core/html - Cita:
core/pullquote - Mesa:
core/table - Verso:
core/verse
Diseño
- Botón:
core/button - Columnas:
core/columns - Más:
core/more - Salto de página:
core/nextpage - Separador:
core/separator - Espaciador:
core/spacer - Medios y texto:
core/media-text
Widgets
- Código corto:
core/shortcode - Archivo:
core/archives - Categorías:
core/categories - Últimos comentarios:
core/latest-omments - Últimas publicaciones:
core/latest-posts
incrustaciones
-
Empotrar:
core/embed -
Gorjeo:
core-embed/twitter -
Youtube:
core-embed/youtube -
Facebook:
core-embed/facebook -
Instagram:
core-embed/instagram -
WordPress:
core-embed/wordpress -
Nube de sonido:
core-embed/soundcloud -
Spotify:
core-embed/spotify -
Flickr:
core-embed/flickr -
Vimeo:
core-embed/vimeo -
Animoto:
core-embed/animoto -
Nube:
core-embed/cloudup -
señal de multitud:
core-embed/crowdsignal -
Movimiento diario:
core-embed/dailymotion -
Hulu:
core-embed/hulu -
Imgur:
core-embed/imgur -
Tema:
core-embed/issuu -
Pedal de arranque:
core-embed/kickstarter -
Meetup.com:
core-embed/meetup-com -
Nube mixta:
core-embed/mixcloud -
Reddit:
core-embed/reddit -
Nación de reverberación:
core-embed/reverbnation -
Captura de pantalla:
core-embed/screencast -
Scribd:
core-embed/scribd -
Compartir diapositivas:
core-embed/slideshare -
PresumidoMug:
core-embed/smugmug -
Plataforma de altavoces:
core-embed/speaker -
TED:
core-embed/ted -
Tumblr:
core-embed/tumblr -
VideoPrensa:
core-embed/videopress -
wordpress.tv:
core-embed/wordpress-tv -
Amazon Kindle:
core-embed/amazon-kindle
Ejemplo de código: Obtener el primer párrafo de una publicación como extracto
Una publicación bien escrita debe comenzar con un párrafo que presente de qué se trata la publicación y tiente a las personas a seguir leyendo. ¡Estos son perfectos para usar como extractos en lugar de confiar en la función de extracto automático en WordPress!
Esta es una función que puede agregar a su tema y functions.phpque devolverá el primer párrafo de una publicación. Si no se proporcionó ninguna publicación, se referirá al objeto de publicación global. También acomoda publicaciones que no son de Gutenberg al devolver el extracto real de WordPress para ellas.
Después de la parse_blocks()llamada de la función, verificamos si la publicación tiene o no datos de bloque no válidos (la publicación se creó antes de Gutenberg) y devolvemos el extracto de la publicación si ese es el caso. De lo contrario, recorremos los bloques de la publicación, buscamos el bloque del primer párrafo y devolvemos su archivo innerHTML. Al final devolvemos una cadena con (esto es opcional) un <div>alrededor.
Para usar esta función, todo lo que necesita hacer es llamar:
echo awp_get_excerpt();Suponiendo que la llamada a la función se coloca en algún lugar donde haya un $postobjeto global, por ejemplo, dentro de un bucle. Si desea especificar una publicación, proporcione el objeto de la publicación como parámetro para la llamada a la función:
$post_id = 1;
$post = get_post($post_id);
echo awp_get_excerpt($post);Ejemplo: crear una tabla de contenido a partir de los encabezados de una publicación
Puede generar de forma automática y dinámica una tabla de contenido basada en los bloques de encabezado de una publicación. El proceso es bastante simple; analice los bloques de la publicación y encuentre todos los bloques de tipo core/heading. Pero podemos dar un paso más e incorporar niveles; por ejemplo, poner h3como subtítulo debajo h2y así sucesivamente.
Un bloque de encabezado contiene información sobre su nivel en el elemento de la matriz de atributos (clave ‘ attrs‘). Dentro de la attrsmatriz sería un elemento de la matriz con la clave ‘ level‘ y un número entero que significa el nivel. A h3tendría ‘ level‘ valor de 3, a h4tendría ‘ level‘ de 4, y así sucesivamente.
Sin embargo, tenga en cuenta que attrslos bloques de encabezado pueden estar vacíos. Esto sucede cuando el autor no ha cambiado el tipo de encabezado de los valores predeterminados en la configuración del bloque. Para dar la vuelta a esto tenemos que hacer algunas suposiciones. Como serán los encabezados predeterminados h2(a menos que haya cambiado esto en su tema). Entonces podemos asumir que si un bloque de encabezado no tiene un atributo de nivel, es un h2. De lo contrario, obtenemos la información de nivel de los atributos.
Si realmente está preparado para el desafío, lo invito a mejorar el código a continuación. El problema de generar una lista estructurada adecuada oles que no podemos controlar cómo el autor estructura sus títulos. Es muy posible que se vuelvan locos y comiencen con un h4encabezado y salten directamente al h2encabezado que sigue. Y de repente se mezclan una h1en el medio. Por lo tanto, mi solución implica generar una ollista plana y proporcionar la información de nivel en las clases del elemento de la lista. Luego, con un poco de CSS inteligente, puede sangrar los elementos de la lista en consecuencia con un poco de relleno izquierdo.
El código
Aquí está la función de tabla de contenido:
La función comienza con el manejo de la publicación y el análisis de sus bloques. En línea #9nos adaptamos a publicaciones que no son de Gutenberg. La función continúa recorriendo todos los bloques y cada vez que encuentra un bloque de encabezado, se agrega a nuestra $headingsmatriz. Usamos [wp_strip_all_tags](https://developer.wordpress.org/reference/functions/wp_strip_all_tags/)()para quitar las etiquetas HTML de los títulos. También agregamos la información de nivel a nuestra matriz, donde el valor predeterminado es 2si los atributos están vacíos.
Después del ciclo del bloque, la $headingsmatriz debe contener todos los encabezados de la publicación, en orden. Entonces podemos simplemente generar una cadena HTML y mostrar su contenido. Como mencioné, genero un nombre de clase en cada elemento con información sobre el nivel del encabezado para que podamos crear la ilusión de una lista estructurada con CSS.
Al igual que con la función de extracto anterior, podemos llamar a esta función cuando estamos dentro del ciclo de la siguiente manera:
echo awp_table_of_contents();O si estamos fuera del circuito o queremos concretar un post;
$post_id = 1;
$post = get_post($post_id);
echo awp_table_of_contents($post);Esto generará una lista con un aspecto similar a este:
Conclusión
Como hemos visto con el contenido de publicación enriquecido estructurado que es posible gracias a Gutenberg, podemos encontrar y extraer muy fácilmente partes específicas del contenido de las publicaciones. Consulte la lista de ejemplos que mencioné al comienzo de la publicación. No hay límites para lo que usted, como desarrollador de temas, puede hacer. Solo depende de lo que necesite su tema o sitio de WordPress (o lo que simplemente sería genial).