Descubre en este tutorial cómo obtener y mostrar todos los estilos de bloques de una instalación de WordPress mediante código.
En una instalación de WordPress puede haber diversos estilos de bloques, 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) todos los estilos de bloques de un sitio web.
Con esta información puedes decidir si prefieres que algunos de ellos no se muestren y desregistrarlos para que no aparezcan en el editor.
Así que en este tutorial vas a aprender cómo obtener un listado de todos los estilos de bloques registrados en una instalación de WordPress.
Vamos a verlo:
Pasos para mostrar todos los estilos 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 2107 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 estilos de bloques de la instalación de WordPress usando el shortcode [lista_estilos_bloque].
Para obtener el listado de estilos utilizas la clase WP_Block_Styles_Registry junto con los métodos get_instance y get_all_registered en combinación con un bucle (foreach).
Así se muestran los estilos de bloque que registra el tema Uprising Next de OsomPress:
core/pullquote | osom-quote | Lateral Bar
core/pullquote | osom-quote-large | Simple
core/pullquote | osom-pullquote | Framed
core/media-text | osom-media-text | Soft
core/social-links | osom-social-links | Primary Color
core/list | osom-list-with-check-icon | Big Checkbox
core/button | osom-button | Secondary Color
core/button | osom-white-button | White Color
core/separator | osom-narrow-line | Narrow Line
core/image | osom-vertical-caption | Vertical Caption
core/details | osom-details-with-color-and-border | Boxed Details
core/post-author-name | osom-post-author-dot-separator | Dot Separator
core/post-date | osom-date-with-icon | Calendar Icon
core/post-terms | osom-terms-with-icon | Tag Icon
core/cover | osom-overlay-text-reveal | Text Reveal
En este caso muestra un listado con:
- El slug del bloque donde se aplica el estilo
- El slug del estilo de bloque
- El label (lo que se muestra al usuario) del estilo del bloque
Pero si lo deseas puedes modificarlo o darle más formato al listado.
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_estilos_bloque] donde quieras que se visualice.
Conclusiones
Ahora ya sabes cómo obtener y mostrar una lista con todos los estilos 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. 😉
