Descubre en este tutorial cómo obtener y mostrar todos los patrones de bloques de una instalación de WordPress mediante código.
En una instalación de WordPress puede haber diversos patrones, algunos añadidos por el core de WordPress y otros por temas (y/o plugins). Por eso, es posible que en algunos casos te interese mostrar (u obtener) todas las categorías de patrones de bloques de una instalación de WordPress.
Con esta información puedes decidir si prefieres que algunos de ellos no se muestren y desregistrarlos para que no se muestren en el editor.
Así que en este tutorial vas a aprender cómo obtener un listado de todos los patrones de bloques registrados en una instalación de WordPress.
Este sería el resultado:
Vamos a verlo:
Pasos para mostrar todos los patrones de bloques registrados en una instancia de WordPress mediante un shortcode
1. Crea el shortcode
Primero vas a encapsular los patrones de bloques registrados dentro de un shortcode para poder mostrar el listado donde quieras.
Añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 1827 snippets de esta web,
identifícate o suscríbete aquí.
Con este código creas un shortcode que te permite mostrar un listado con todos los temas de la instalación de WordPress usando el shortcode [lista_patrones].
Para obtener el listado de temas utilizas la clase WP_Block_Patterns_Registry junto con los métodos get_instance y get_all_registered en combinación con un bucle (foreach).
En este caso, solo se muestra el nombre del patrón de bloque. En una instalación básica de WordPress el listado será así:
core/query-standard-posts core/query-medium-posts core/query-small-posts core/query-grid-posts core/query-large-title-posts core/query-offset-posts core/social-links-shared-background-color woocommerce/mini-cart-empty-cart-message
En cambio, si el tema añade sus propios patrones además de los nativos de WordPress verás los del tema. Algo así:
core/query-standard-posts core/query-medium-posts core/query-small-posts core/query-grid-posts core/query-large-title-posts core/query-offset-posts core/social-links-shared-background-color karma/osom-two-buttons karma/osom-text-two-columns-with-images karma/osom-two-images karma/osom-text-three-columns-buttons karma/osom-pricetable karma/osom-team karma/osom-boxes
En este caso, se muestran también los que registra el tema Karma de OsomPress.
Si te interesa darle más formato al listado y sacar información extra, como el título del patrón de bloques, utiliza este código en lugar del anterior:
Para ver este código y los otros 1827 snippets de esta web,
identifícate o suscríbete aquí.
Con esta modificación das formato al listado y muestras dos elementos del array del patrón:
- Nombre del patrón de bloque
[Name]> nombre interno que te permite desregistrarlo si quieres. - Título del patrón de bloque
[Title]> el que se muestra en la interfaz de usuario.
Así se visualizaría:
Para poder ver el listado solo te queda un paso.
2. Introduce el shortcode donde quieras
La ventaja de los shortcodes es que puedes insertarlos en cualquier punto de la web.
Solo tendrás que escribir [lista_patrones] donde quieres que se visualice.
Importante:
- Si estás utilizando el editor clásico, utiliza la pestaña de HTML para introducir el shortcode.
- En caso de que ya estés usando el nuevo editor de bloques (Gutenberg) puedes añadirlo al bloque normal de párrafo, el de HTML o el de shortcode. Todos ellos renderizarán de forma correcta el contenido.
Este sería un ejemplo del listado que mostraría el shortcode:
Conclusiones
Ahora ya sabes cómo obtener y mostrar una lista con todos los patrones de bloques registrados en una instalación de WordPress para decidir si los necesitas todos o no.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
