Una de las ventajas de crear páginas y publicaciones con Gutenberg Blocks es la posibilidad 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:
- Crear un diseño para agregar a su biblioteca de Gutenberg para exportar o clonar.
- Crear un diseño para copiar y pegar cuando quieras usarlo.
- 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 otros ajustes.
Una vez que haya diseñado su página o diseño de publicación, puede guardar la lista de bloques con sus atributos para reutilizarlos. Esto le da una ventaja inicial 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, para 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 exportarlos como archivos JSON.
Plantilla de diseño de ejemplo
Creé un diseño simple que puedo usar como publicación de blog, revisión de productos, 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ás 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 ha sido actualizado. ¡Has creado el diseño!
Para usarlo, crea una nueva página o publicación y abre 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 conservar el original y crear una nueva publicación con el diseño, deberá exportarlo, cambiarle el nombre e importar el diseño.
Publicaciones duplicadas
Afortunadamente, tenemos otra opción. Un complemento llamado Duplicate Post agrega una función de clonación para los bloques de Gutenberg.
En la configuración de Publicaciones duplicadas , active Bloques .
Ahora tengo una opción de clonación en la biblioteca de bloques. Clona el diseño que quieras y luego edítalo. Cada diseño es global, por lo que tendrá que clonarlo y editarlo 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 simple truco, 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 volver a utilizarlo.
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 excelente para crear diseños para diferentes tipos de artículos. Por ejemplo, podría tener un tipo de publicación de revisión de productos, 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 con él.
La creación de la plantilla incluye:
- Establecer el estado predeterminado de forma dinámica.
- Registrándolo 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 tipos de bloques. Esto se hace en JavaScript o en PHP. Como muestra el manual del desarrollador de Gutenberg , se vería así:
|
01
02
03
04
05
|
const template = [[ 'block/name', {} ], // [ blockName, attributes ]]; |
O esto:
|
01
02
03
04
05
|
'template' => array(array( 'block/name' ),), |
Registro de la plantilla en tipos de publicaciones personalizadas
El tipo de publicación personalizada también puede registrar la plantilla. Podría verse así:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
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 un párrafo (que identifica 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:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
|
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 contenedores (por ejemplo, bloques de columnas). Esto se hace asignando una plantilla anidada al propio bloque. Por ejemplo:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
|
$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') ),) ),) )); |
Bloqueo de la plantilla
Puedes bloquear la plantilla usando este código:
|
01
|
'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 personalizada llamada 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 secundario cuando agregue código a los archivos PHP. Si no lo hace, el código se sobrescribirá cuando actualice el tema.
Tendrás 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 desee 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 ha hecho para que pueda saber de antemano cómo organizar los bloques en su código.
Vaya a Funciones de tema (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, por lo que no utilicé un tema secundario.
Se agrega un nuevo tipo de publicación al menú del tablero llamado Libros. Incluye una lista y un enlace Agregar nuevo . Hice clic en Agregar nuevo y mi nueva plantilla se agregó 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 como desee y otorgarles 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 preordenadas 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 para usar dentro de WordPress. La principal desventaja de crear plantillas para agregar a sus funciones.php es que está creando el diseño en código en lugar de 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 a 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 acerca de su experiencia en los comentarios a continuación.
Imagen destacada a través de Nadia Snopek / shutterstock.com