Cómo crear plantillas de Gutenberg

Una de las ventajas de crear páginas y publicaciones con Gutenberg Blocks es la capacidad de guardarlas como plantillas. Crear plantillas para Gutenberg es una excelente manera de ayudar a acelerar el proceso de publicación. Hay varias formas de crearlos. En este artículo, veremos cómo crear plantillas de Gutenberg.

Cubriremos tres métodos para crearlos:

1. Creando un diseño para agregar a su biblioteca de Gutenberg para exportar o clonar.
2. Creando un diseño para copiar y pegar cuando quieras usarlo.
3. Crear un diseño para agregar como diseño predeterminado para páginas, publicaciones o tipos de publicaciones personalizadas.

Estos métodos nos permiten reutilizar solo los bloques. No se incluirán otras configuraciones.

Por qué crear plantillas de Gutenberg

Una vez que hayas diseñado el diseño de tu página o publicación, puedes guardar la lista de bloques con sus atributos para reutilizarlos. Esto le da una ventaja en la creación de su contenido porque no tiene que concentrarse en el diseño. Las plantillas de bloques le permiten tener un diseño consistente.

La plantilla de bloque puede tener contenido de marcador de posición. Pueden ser estáticos o dinámicos. Puede definir el estado predeterminado de una sesión de editor. Incluso puede importar o exportar sus plantillas como archivos JSON, de modo que pueda reutilizar sus diseños en varios sitios web o compartirlos con otros. Puede bloquearlos para que los usuarios puedan agregar contenido pero no cambiar los bloques.

Método 1: crear una plantilla de diseño

Las plantillas de diseño le permiten usar la función de selección múltiple que se agregó originalmente para permitirnos mover o eliminar varios bloques al mismo tiempo.

Podemos seleccionar y agregar un bloque a la vez o varios bloques a la vez a nuestra biblioteca de bloques reutilizables globales. Esto facilita su exportación como archivos JSON.

Plantilla de diseño de ejemplo

He creado un diseño simple que puedo usar como publicación de blog, reseña de producto, etc. Es fácil guardarlo en la biblioteca para reutilizarlo.

Coloque el cursor en el primer bloque que desea incluir y arrastre el mouse hasta el último bloque para resaltarlos.

Sobre el primer bloque, verá tres puntos a la izquierda. Haga clic en los puntos y seleccione Agregar a bloques reutilizables .

La barra de mensajes verde en la parte superior mostrará que se creó el bloque. Asigne al diseño un nombre que tenga sentido para usted y seleccione Guardar .

El mensaje en la barra verde mostrará que el bloque se ha actualizado. ¡Has creado el diseño!

Para usarlo, cree una nueva página o publicación y abra las opciones (tres puntos). En Herramientas , seleccione Administrar todos los bloques reutilizables .

Esto muestra una lista de todos sus bloques. Aquí, puede exportar e importar sus bloques como archivos JSON. Los bloques reutilizables son globales. Si edita, editará el original. Para mantener el original y crear una nueva publicación utilizando el diseño, deberá exportarlo, cambiarle el nombre e importar el diseño.

Publicaciones duplicadas

Afortunadamente, tenemos otra opción. Un complemento llamado Publicación duplicada agrega una función de clonación para los bloques de Gutenberg.

En la configuración de Publicaciones duplicadas , habilite Bloques .

Ahora tengo una opción de clonación en la biblioteca de Bloques. Clone el diseño que desee y luego edítelo. Cada diseño es global, por lo que tendrá que clonar y editar cada vez que desee utilizar el diseño.

Método 2: una forma alternativa fácil de crear una plantilla de Gutenberg

Este método es solo un truco simple, pero funciona. Primero, cree un diseño que desee reutilizar completo con cualquier contenido de marcador de posición.

A continuación, cambie al editor de código. Para hacer esto, seleccione los tres puntos en la esquina superior derecha. En Editor , seleccione Editor de código .

Resalta y copia el código.

Pegue el código en un editor de texto y guárdelo para reutilizarlo.

Cuando esté listo para usar la plantilla, simplemente cree una nueva publicación, cambie al editor de código y pegue el código.

Ahora tengo una nueva publicación a la que puedo comenzar a agregar contenido.

Método 3: crear un tipo de publicación personalizada

Una plantilla de bloque es un argumento. Puede agregar el argumento a páginas y publicaciones, o puede crear un nuevo tipo de publicación. El diseño estará vinculado a ese tipo de publicación, por lo que cuando crea ese tipo de publicación, el diseño se muestra de forma predeterminada.

Esto es ideal para crear diseños para diferentes tipos de artículos. Por ejemplo, podría tener un tipo de publicación de revisión de producto, un tipo de publicación de resumen de vacaciones, un tipo de publicación de receta, etc., y cuando carga el tipo de publicación, automáticamente le proporciona el diseño asociado.

La creación de la plantilla incluye:

• Establecer el estado predeterminado de forma dinámica.
• Registrarlo como el diseño predeterminado para un tipo de publicación específico.

Declaración de la plantilla

La plantilla en sí se declarará como una matriz de blockTypes. Esto se hace en JavaScript o PHP. Como muestra el manual del desarrollador de Gutenberg, se vería así:

const template = [

[ 'block/name', {} ], // [ blockName, attributes ]

];

O esto:

'template' => array(

array( 'block/name' ),

),

Registro de la plantilla en tipos de publicación personalizados

El tipo de publicación personalizada también puede registrar la plantilla. Podría verse así:

function myplugin_register_book_post_type() {

$args = array(

'public' => true,

'label'  => 'Books',

'show_in_rest' => true,

'template' => array(

array( 'core/image', array(

'align' => 'left',

) ),

array( 'core/heading', array(

'placeholder' => 'Add Author...',

) ),

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

),

);

register_post_type( 'book', $args );

}

add_action( 'init', 'myplugin_register_book_post_type' );

La matriz identifica de dónde proviene el bloque y el nombre del bloque. En este ejemplo, la matriz usa 'núcleo / párrafo'. Esto significa que el bloque proviene del núcleo de WordPress (a diferencia de un complemento) y su nombre es párrafo (identificando qué bloque usar).

Registro de la plantilla en páginas y publicaciones

Si agrega la plantilla a páginas o publicaciones, se cargará automáticamente cada vez que cree una página o publicación. Prefiero agregarlos a tipos de publicaciones personalizadas específicas porque tiene más libertad creativa y agiliza el proceso de creación de contenido al hacer que las plantillas sean más fáciles de encontrar.

Si decide agregarlos a páginas o publicaciones, puede usar este código:

function my_add_template_to_posts() {

$post_type_object = get_post_type_object( 'post' );

$post_type_object->template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add Description...',

) ),

);

$post_type_object->template_lock = 'all';

}

add_action( 'init', 'my_add_template_to_posts' );

Plantillas de anidamiento

Incluso puede anidar plantillas dentro de bloques de contenedor (por ejemplo, bloques de columnas). Esto se hace asignando una plantilla anidada al bloque en sí. Por ejemplo:

$template = array(

array( 'core/paragraph', array(

'placeholder' => 'Add a root-level paragraph',

) ),

array( 'core/columns', array(), array(

array( 'core/column', array(), array(

array( 'core/image', array() ),

) ),

array( 'core/column', array(), array(

array( 'core/paragraph', array(

'placeholder' => 'Add a inner paragraph'

) ),

) ),

) )

);

Bloquear la plantilla

Puede bloquear la plantilla con este código:

'template_lock' => 'all', // or 'insert' to allow moving

Plantilla de ejemplo con un tipo de publicación personalizada

Quiero crear el tipo de publicación personalizado llamado Libros que vimos arriba. Mostrará la plantilla de diseño e incluirá una imagen, un encabezado y un párrafo.

El código se pegará en el archivo functions.php. Utilice siempre un tema hijo cuando agregue código a los archivos PHP. Si no lo hace, el código se sobrescribirá cuando actualice el tema.

Tendrá que escribir el código a mano (recomiendo usar los ejemplos de código que he mostrado). Una opción es crear el diseño que desea y luego ver el código (haga clic en los tres puntos en la esquina superior derecha y seleccione Editor de código en la sección Editor ). Esto mostrará los bloques con sus atributos del diseño que ya hizo para que pueda saber de antemano cómo organizar los bloques en su código.

Vaya a Theme Functions (functions.php) y pegue el código. Pegué el código en la parte inferior. Este es un sitio de prueba y no planeo conservar el código, así que no usé un tema secundario.

Se agrega un nuevo tipo de publicación al menú del tablero llamado Libros. Incluye una lista y un vínculo Agregar nuevo . Hice clic en Agregar nuevo y mi nueva plantilla se agrega al editor donde simplemente puedo comenzar a agregar contenido.

Los bloques se colocan en el orden en que aparecen en el código e incluyen los atributos que se les asignaron. Puede colocar tantos bloques en el código que desee y darles los atributos que desee. Puede crear tantos tipos de publicaciones personalizadas como desee y cada una puede tener un diseño predeterminado único. Este ejemplo incluye texto de marcador de posición.

Pensamientos finales

Ese es nuestro vistazo a cómo crear plantillas de Gutenberg. Los tres métodos funcionan muy bien. Las plantillas reutilizables o uno de los métodos de duplicación pueden ser una mejor opción si no desea crear nuevos tipos de publicaciones personalizadas. Me gustan los tipos de publicaciones personalizadas porque facilita la elección del tipo de contenido que desea crear y las plantillas están pre-ordenadas para usted.

Los tipos de publicaciones personalizadas son fáciles de hacer si se siente cómodo con el código y son los más convenientes de usar dentro de WordPress. La principal desventaja de crear plantillas para agregar a su functions.php es que está creando el diseño en código en lugar de hacerlo en el editor de Gutenberg, por lo que no es visual.

Me gusta que puedas agregar contenido prefabricado a tus plantillas. Esto es excelente para que el texto de marcador de posición muestre a los colaboradores qué información va y dónde. Las plantillas reutilizables son una excelente manera de acelerar y optimizar su proceso de flujo de trabajo, y son una excelente manera de crear diseños de páginas y publicaciones para compartir.

Queremos escuchar de ti. ¿Ha creado plantillas de Gutenberg? Háganos saber su experiencia en los comentarios a continuación.

Imagen destacada a través de Nadia Snopek / shutterstock.com