Aprende en este tutorial cómo mostrar un patrón de bloques que pueda servir como punto de partida al crear una entrada de un Custom Post Type en WordPress.
Los patrones de bloques son una herramienta fantástica a la hora crear nuevo contenido ya que pueden servir como punto de partida.
A partir de WordPress 6.1 tenemos la oportunidad de ofrecer uno o varios patrones de bloques como punto de partida cuando creas una entrada de un CPT.
Gracias a esto el usuario no se enfrenta a una «página en blanco» sino que puede partir de un diseño/estructura ya creada.
Esto es lo que vería el usuario justo después de hacer clic en «Añadir»:
En la ventana modal del ejemplo superior se muestran 3 patrones de bloques para el Custom Post Type de porfolio, pero puedes añadir tantos como quieras y para los tipos de entrada que desees.
Descubre cómo hacerlo tanto en un tema clásico como en uno de bloques (FSE).
Opciones para mostrar un patrón de bloques al empezar a crear una entrada de un CPT en WordPress
Dependiendo del tipo de tema en el que quieras aplicar esta funcionalidad tienes que utilizar una estrategia u otra.
A. En un tema clásico
Si estás usando un tema clásico (con plantillas .php y demás) añade el siguiente snippet al fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
En el código utilizas la función register_block_pattern para registrar el patrón y elegir en qué tipo de contenido debe mostrarse.
En la función indicas el nombre del patrón de bloques (portfolio-image-center en este caso) y un array con las propiedades del patrón.
En el ejemplo usas las siguientes propiedades:
title: título del patrón de bloques que se mostrará en la ventana modal.blockTypes: debe contenercore/post-contentpara que se muestre en la modal.postTypes: el tipo de entrada en el que se mostrará.content: el marcado HTML de los bloques que componen el patrón.
En este caso, indicas que se muestre al crear una nueva entrada del CPT porfolio (portfolio), pero puedes modificarlo por el que quieras.
Para conseguir este resultado se registraron 3 patrones de bloques.
Recuerda que puedes crear los patrones de bloques directamente desde el editor de bloques.
B. En un tema de bloques
Si estás usando un tema de bloques, como por ejemplo Twenty Twenty-Three, puedes aprovechar la carpeta /patterns/ (si no existe la puedes crear) para añadir un nuevo patrón de bloques.
Para ello, crea un fichero llamado portfolio-image-center.php con el siguiente contenido:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
En este caso, es imprescindible que la cabecera del mismo contenga:
Title: título del patrón de bloques que se mostrará en la ventana modal.Slug: slug del patrón de bloques.Block Types: debe contenercore/post-contentpara que se muestre en la modal.Post Types: el tipo de entrada en el que se mostrará.
Si quieres que el patrón también sea fácil de encontrar desde el gestor de bloques puedes añadir también:
Categories: categorías en las que aparecerá el patrón.Keywords: palabras clave que se tendrán en cuenta cuando se realicen búsquedas.
Para conseguir el resultado del ejemplo se crearon 3 fichero de patrones de bloques.
Si tienes curiosidad así es como quedaría el fichero completo para uno de ellos:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
En ambas opciones, para la parte de contenido puedes utilizar cualquier diseño que hayas realizado con el editor de bloques. Si tienes alguna duda puedes echar un ojo al tutorial sobre cómo crear patrones de bloques en WordPress.
Conclusiones
Si quieres ofrecer un contenido de partida a tu cliente, conseguir que al crearse una nueva entrada de un CPT se muestre una modal con patrones de bloques es una opción muy interesante.
En este tutorial has visto cómo puedes llevarlo a cabo tanto en un tema clásico como en uno de bloques. Como siempre, puedes usar este código como punto de partida y ajustarlo a las necesidades del proyecto.
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. 😉
