En esta publicaci\u00f3n, veremos c\u00f3mo analizar los bloques de Gutenberg de una publicaci\u00f3n y extraer bloques espec\u00edficos para hacer otra cosa. Veremos las funciones PHP de WordPress para analizar, extraer y representar los bloques elegidos.<\/p>\n
Uno de los beneficios del nuevo editor de Gutenberg en WordPress son los datos m\u00e1s estructurados para el contenido de las publicaciones. En los d\u00edas anteriores, todo se almacenaba como HTML y no hab\u00eda forma de extraer partes espec\u00edficas de contenido sin algunas expresiones regulares muy complejas. Pero con Gutenberg, cada pieza de contenido, ya sea un p\u00e1rrafo, un encabezado, una imagen, un video, un bot\u00f3n o una columna que tenga otros bloques dentro, se almacena con informaci\u00f3n que nos dice qu\u00e9 es esa pieza de contenido.<\/p>\n
Con las funciones integradas de WordPress, es muy f\u00e1cil obtener todos los bloques en el contenido de una publicaci\u00f3n en una matriz con toda su informaci\u00f3n. Esto abre un mont\u00f3n de funciones \u00fatiles para los desarrolladores de temas. Solo por mencionar algunas ideas:<\/p>\n
\u00a1Vamos a saltar directamente a eso!<\/p>\n
Para analizar bloques usamos la funci\u00f3n de WordPress El retorno de \u00a1Y eso es todo! Recorra la matriz devuelta Es posible que est\u00e9 trabajando en un sitio de WordPress m\u00e1s antiguo que ha creado publicaciones antes de actualizar a Gutenberg (o que us\u00f3 un complemento de Deshabilitar Gutenberg). En este caso, estas publicaciones no tendr\u00e1n contenido de publicaci\u00f3n estructurado, sino que todo el contenido de la publicaci\u00f3n estar\u00e1 dentro de un bloque de "Editor cl\u00e1sico".<\/p>\n La matriz devuelta por la funci\u00f3n Podemos asumir con seguridad que si el retorno de una publicaci\u00f3n WordPress tambi\u00e9n ofrece una funci\u00f3n para renderizar un bloque espec\u00edfico con El c\u00f3digo anterior representar\u00e1 todos los bloques de la publicaci\u00f3n, como lo har\u00eda normalmente al representar el contenido de la publicaci\u00f3n. La parte divertida viene cuando comenzamos a agregar c\u00f3digo para excluir o incluir bloques espec\u00edficos que nos interesan.<\/p>\n Por ejemplo, el siguiente c\u00f3digo solo imprimir\u00e1 los bloques de p\u00e1rrafo de la publicaci\u00f3n:<\/p>\n Y esto generar\u00e1 todos los bloques, pero excluir\u00e1 todos los bloques de shortcode:<\/p>\n Al analizar los bloques de una publicaci\u00f3n, lo m\u00e1s probable es que necesite verificar el tipo de bloque. Son bastante simples de adivinar. Por ejemplo, un bloque de p\u00e1rrafo es, bueno, lo adivinaste, Para evitar adivinanzas, aqu\u00ed hay una descripci\u00f3n general de los bloques predeterminados proporcionados por WordPress (al momento de escribir esto):<\/p>\n Empotrar: Gorjeo: Youtube: Facebook: Instagram: WordPress: Nube de sonido: Spotify: Flickr: Vimeo: Animoto: Nube: se\u00f1al de multitud: Movimiento diario: Hulu: Imgur: Tema: Pedal de arranque: Meetup.com: Nube mixta: Reddit: Naci\u00f3n de reverberaci\u00f3n: Captura de pantalla: Scribd: Compartir diapositivas: PresumidoMug: Plataforma de altavoces: TED: Tumblr: VideoPrensa: wordpress.tv: Amazon Kindle: Una publicaci\u00f3n bien escrita debe comenzar con un p\u00e1rrafo que presente de qu\u00e9 se trata la publicaci\u00f3n y tiente a las personas a seguir leyendo. \u00a1Estos son perfectos para usar como extractos en lugar de confiar en la funci\u00f3n de extracto autom\u00e1tico en WordPress!<\/p>\n Esta es una funci\u00f3n que puede agregar a su tema y Despu\u00e9s de la Para usar esta funci\u00f3n, todo lo que necesita hacer es llamar:<\/p>\n Suponiendo que la llamada a la funci\u00f3n se coloca en alg\u00fan lugar donde haya un Puede generar de forma autom\u00e1tica y din\u00e1mica una tabla de contenido basada en los bloques de encabezado de una publicaci\u00f3n. El proceso es bastante simple; analice los bloques de la publicaci\u00f3n y encuentre todos los bloques de tipo Un bloque de encabezado contiene informaci\u00f3n sobre su nivel en el elemento de la matriz de atributos (clave ‘ Sin embargo, tenga en cuenta que Si realmente est\u00e1 preparado para el desaf\u00edo, lo invito a mejorar el c\u00f3digo a continuaci\u00f3n. El problema de generar una lista estructurada adecuada Aqu\u00ed est\u00e1 la funci\u00f3n de tabla de contenido:<\/p>\n La funci\u00f3n comienza con el manejo de la publicaci\u00f3n y el an\u00e1lisis de sus bloques. En l\u00ednea Despu\u00e9s del ciclo del bloque, la [parse_blocks](https:\/\/developer.wordpress.org\/reference\/functions\/parse_blocks\/)()<\/code>. Como par\u00e1metro, debe proporcionar una cadena del contenido de una publicaci\u00f3n. Si est\u00e1 dentro de un bucle o tiene acceso a un objeto de publicaci\u00f3n, simplemente proporcione un $post->post_content<\/code>par\u00e1metro a la funci\u00f3n.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);<\/code><\/pre>\nparse_blocks()<\/code>es una matriz donde cada elemento de la matriz es un bloque. Para cada elemento de bloque, tiene informaci\u00f3n como el tipo de bloque (clave ‘ blockName<\/code>‘), atributos de bloque (clave ‘ attrs<\/code>‘), bloques internos para bloques anidados como Columnas (clave ‘ innerBlocks<\/code>‘), y dos elementos para el contenido real del bloque (claves ‘ innerHTML<\/code>‘ y ‘ innerContent<\/code>‘). El elemento innerHTML<\/code>es una cadena de contenido HTML, mientras que innerContent<\/code>es una matriz de cadenas HTML.<\/p>\nparse_blocks()<\/code>para hacer lo suyo. Veremos m\u00e1s ejemplos de c\u00f3digo de esto m\u00e1s adelante en esta publicaci\u00f3n.<\/p>\nUna nota sobre publicaciones cl\u00e1sicas (no Gutenberg)<\/h2>\n
parse_blocks()<\/code>en este tipo de publicaciones devolver\u00e1 un elemento de matriz de bloques con blockName<\/code>el valor null<\/code>. El contenido HTML completo de la publicaci\u00f3n est\u00e1 dentro de la innerHTML<\/code>cadena de este elemento.<\/p>\nparse_blocks()<\/code>tiene un elemento y blockName<\/code>es null<\/code>, estamos tratando con una publicaci\u00f3n "anterior a Gutenberg". De lo contrario blockName<\/code>, siempre se completar\u00e1. Esta es una buena verificaci\u00f3n para tener en cuenta al escribir c\u00f3digo para analizar bloques de publicaciones y desea manejar contenido antiguo de WordPress.<\/p>\nRenderizar un bloque<\/h2>\n
[render_block](https:\/\/developer.wordpress.org\/reference\/functions\/render_block\/)()<\/code>. Como par\u00e1metro, debe proporcionar una matriz para un bloque, como una de las devueltas parse_blocks()<\/code>anteriormente. La funci\u00f3n devuelve una cadena de HTML renderizado que simplemente puede repetir directamente.<\/p>\n$post_id = 1;\n$post = get_post($post_id);\n$blocks = parse_blocks($post->post_content);\nforeach ($blocks as $block) {\n echo render_block($block);\n}<\/code><\/pre>\nforeach ($blocks as $block) {\n if ($block['blockName'] == 'core\/paragraph') {\n echo render_block($block);\n }\n}<\/code><\/pre>\nforeach ($blocks as $block) {\n if ($block['blockName'] != 'core\/shortcode') {\n echo render_block($block);\n }\n}<\/code><\/pre>\nNombres de bloques<\/h2>\n
paragraph<\/code>. 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\/<\/code>". La excepci\u00f3n son los bloques Embed que tienen el prefijo " core-embed\/<\/code>". Entonces, por ejemplo, un bloque de p\u00e1rrafo tendr\u00e1 el nombre de bloque core\/paragraph<\/code>.<\/p>\nBloques comunes<\/h3>\n
\n
core\/paragraph<\/code><\/li>\ncore\/image<\/code><\/li>\ncore\/heading<\/code><\/li>\ncore\/gallery<\/code><\/li>\ncore\/list<\/code><\/li>\ncore\/quote<\/code><\/li>\ncore\/audio<\/code><\/li>\ncore\/cover<\/code><\/li>\ncore\/file<\/code><\/li>\ncore\/video<\/code><\/li>\n<\/ul>\nFormateo<\/h3>\n
\n
core\/preformatted<\/code><\/li>\ncore\/code<\/code><\/li>\ncore\/freeform<\/code>
\n(pero para publicaciones que no sean de Gutenberg ser\u00e1 null<\/code>, consulte la nota sobre publicaciones que no son de Gutenberg)<\/li>\ncore\/html<\/code><\/li>\ncore\/pullquote<\/code><\/li>\ncore\/table<\/code><\/li>\ncore\/verse<\/code><\/li>\n<\/ul>\nDise\u00f1o<\/h3>\n
\n
core\/button<\/code><\/li>\ncore\/columns<\/code><\/li>\ncore\/more<\/code><\/li>\ncore\/nextpage<\/code><\/li>\ncore\/separator<\/code><\/li>\ncore\/spacer<\/code><\/li>\ncore\/media-text<\/code><\/li>\n<\/ul>\nWidgets<\/h3>\n
\n
core\/shortcode<\/code><\/li>\ncore\/archives<\/code><\/li>\ncore\/categories<\/code><\/li>\ncore\/latest-omments<\/code><\/li>\ncore\/latest-posts<\/code><\/li>\n<\/ul>\nincrustaciones<\/h3>\n
\n
core\/embed<\/code><\/p>\n<\/li>\ncore-embed\/twitter<\/code><\/p>\n<\/li>\ncore-embed\/youtube<\/code><\/p>\n<\/li>\ncore-embed\/facebook<\/code><\/p>\n<\/li>\ncore-embed\/instagram<\/code><\/p>\n<\/li>\ncore-embed\/wordpress<\/code><\/p>\n<\/li>\ncore-embed\/soundcloud<\/code><\/p>\n<\/li>\ncore-embed\/spotify<\/code><\/p>\n<\/li>\ncore-embed\/flickr<\/code><\/p>\n<\/li>\ncore-embed\/vimeo<\/code><\/p>\n<\/li>\ncore-embed\/animoto<\/code><\/p>\n<\/li>\ncore-embed\/cloudup<\/code><\/p>\n<\/li>\ncore-embed\/crowdsignal<\/code><\/p>\n<\/li>\ncore-embed\/dailymotion<\/code><\/p>\n<\/li>\ncore-embed\/hulu<\/code><\/p>\n<\/li>\ncore-embed\/imgur<\/code><\/p>\n<\/li>\ncore-embed\/issuu<\/code><\/p>\n<\/li>\ncore-embed\/kickstarter<\/code><\/p>\n<\/li>\ncore-embed\/meetup-com<\/code><\/p>\n<\/li>\ncore-embed\/mixcloud<\/code><\/p>\n<\/li>\ncore-embed\/reddit<\/code><\/p>\n<\/li>\ncore-embed\/reverbnation<\/code><\/p>\n<\/li>\ncore-embed\/screencast<\/code><\/p>\n<\/li>\ncore-embed\/scribd<\/code><\/p>\n<\/li>\ncore-embed\/slideshare<\/code><\/p>\n<\/li>\ncore-embed\/smugmug<\/code><\/p>\n<\/li>\ncore-embed\/speaker<\/code><\/p>\n<\/li>\ncore-embed\/ted<\/code><\/p>\n<\/li>\ncore-embed\/tumblr<\/code><\/p>\n<\/li>\ncore-embed\/videopress<\/code><\/p>\n<\/li>\ncore-embed\/wordpress-tv<\/code><\/p>\n<\/li>\ncore-embed\/amazon-kindle<\/code><\/p>\n<\/li>\n<\/ul>\nEjemplo de c\u00f3digo: Obtener el primer p\u00e1rrafo de una publicaci\u00f3n como extracto<\/h2>\n
functions.php<\/code>que devolver\u00e1 el primer p\u00e1rrafo de una publicaci\u00f3n. Si no se proporcion\u00f3 ninguna publicaci\u00f3n, se referir\u00e1 al objeto de publicaci\u00f3n global. Tambi\u00e9n acomoda publicaciones que no son de Gutenberg al devolver el extracto real de WordPress para ellas.<\/p>\nfunction awp_get_excerpt($post=false) {\n if (!$post) { \n global $post;\n }\n if (!$post) { return ''; }\n $excerpt = '';\n $blocks = parse_blocks($post->post_content);\n if (count($blocks) == 1 && $blocks[0]['blockName'] == null) { \/\/ Non-Gutenberg posts\n $excerpt = get_the_excerpt($post->ID);\n } else {\n foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/paragraph') {\n $excerpt = strip_tags($block['innerHTML']);\n break;\n }\n }\n }\n return \"<div class='excerpt'>$excerpt<\/div>\";\n}<\/code><\/pre>\nparse_blocks()<\/code>llamada de la funci\u00f3n, verificamos si la publicaci\u00f3n tiene o no datos de bloque no v\u00e1lidos (la publicaci\u00f3n se cre\u00f3 antes de Gutenberg) y devolvemos el extracto de la publicaci\u00f3n si ese es el caso. De lo contrario, recorremos los bloques de la publicaci\u00f3n, buscamos el bloque del primer p\u00e1rrafo y devolvemos su archivo innerHTML<\/code>. Al final devolvemos una cadena con (esto es opcional) un <div><\/code>alrededor.<\/p>\necho awp_get_excerpt();<\/code><\/pre>\n$post<\/code>objeto global, por ejemplo, dentro de un bucle. Si desea especificar una publicaci\u00f3n, proporcione el objeto de la publicaci\u00f3n como par\u00e1metro para la llamada a la funci\u00f3n:<\/p>\n$post_id = 1;\n$post = get_post($post_id);\necho awp_get_excerpt($post);<\/code><\/pre>\nEjemplo: crear una tabla de contenido a partir de los encabezados de una publicaci\u00f3n<\/h2>\n
core\/heading<\/code>. Pero podemos dar un paso m\u00e1s e incorporar niveles; por ejemplo, poner h3<\/code>como subt\u00edtulo debajo h2<\/code>y as\u00ed sucesivamente.<\/p>\nattrs<\/code>‘). Dentro de la attrs<\/code>matriz ser\u00eda un elemento de la matriz con la clave ‘ level<\/code>‘ y un n\u00famero entero que significa el nivel. A h3<\/code>tendr\u00eda ‘ level<\/code>‘ valor de 3<\/code>, a h4<\/code>tendr\u00eda ‘ level<\/code>‘ de 4<\/code>, y as\u00ed sucesivamente.<\/p>\nattrs<\/code>los bloques de encabezado pueden estar vac\u00edos. Esto sucede cuando el autor no ha cambiado el tipo de encabezado de los valores predeterminados en la configuraci\u00f3n del bloque. Para dar la vuelta a esto tenemos que hacer algunas suposiciones. Como ser\u00e1n los encabezados predeterminados h2<\/code>(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<\/code>. De lo contrario, obtenemos la informaci\u00f3n de nivel de los atributos.<\/p>\nol<\/code>es que no podemos controlar c\u00f3mo el autor estructura sus t\u00edtulos. Es muy posible que se vuelvan locos y comiencen con un h4<\/code>encabezado y salten directamente al h2<\/code>encabezado que sigue. Y de repente se mezclan una h1<\/code>en el medio. Por lo tanto, mi soluci\u00f3n implica generar una ol<\/code>lista plana y proporcionar la informaci\u00f3n 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.<\/p>\nEl c\u00f3digo<\/h3>\n
function awp_table_of_contents($post=false) {\n if (!$post) {\n global $post;\n }\n if (!$post) { return ''; }\n $headings = [];\n $blocks = parse_blocks($post->post_content);\n if (count($blocks) == 1 && $blocks[0]['blockName'] == null) { \/\/ Non-Gutenberg posts\n return '';\n } else {\n foreach ($blocks as $block) {\n if ($block['blockName'] == 'core\/heading') {\n $level = (isset($block['attrs']['level']))? $block['attrs']['level']: 2; \/\/ h2 as default\n $headings[] = ['title' => wp_strip_all_tags($block['innerHTML']), 'level' => $level];\n }\n }\n }\n\u00a0\n if (empty($headings)) { \/\/ No headings found in post\n return '';\n }\n\u00a0\n $toc = '<ol class=\"table-of-contents\">';\n foreach ($headings as $heading) {\n $toc .= '<li class=\"heading-level-'. $heading['level']. '\">'. $heading['title']. '<\/li>';\n }\n $toc .= '<\/ol>';\n return $toc;\n}<\/code><\/pre>\n#9<\/code>nos adaptamos a publicaciones que no son de Gutenberg. La funci\u00f3n contin\u00faa recorriendo todos los bloques y cada vez que encuentra un bloque de encabezado, se agrega a nuestra $headings<\/code>matriz. Usamos [wp_strip_all_tags](https:\/\/developer.wordpress.org\/reference\/functions\/wp_strip_all_tags\/)()<\/code>para quitar las etiquetas HTML de los t\u00edtulos. Tambi\u00e9n agregamos la informaci\u00f3n de nivel a nuestra matriz, donde el valor predeterminado es 2<\/code>si los atributos est\u00e1n vac\u00edos.<\/p>\n$headings<\/code>matriz debe contener todos los encabezados de la publicaci\u00f3n, en orden. Entonces podemos simplemente generar una cadena HTML y mostrar su contenido. Como mencion\u00e9, genero un nombre de clase en cada elemento con informaci\u00f3n sobre el nivel del encabezado para que podamos crear la ilusi\u00f3n de una lista estructurada con CSS.<\/p>\n