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 acelerar el proceso de publicación. Hay varias formas de crearlos. En este artículo, veremos cómo crear plantillas de Gutenberg.
Discutiremos tres métodos para crearlos:
- Cree un diseño para agregar a la biblioteca de Gutenberg para exportar o clonar.
- Crea un diseño para copiar y pegar cuando quieras usarlo.
- Cree un diseño para agregar como diseño de página predeterminado, publicaciones o tipos de publicaciones personalizadas.
Estos métodos nos permiten reutilizar los propios bloques. No se tendrán en cuenta otros ajustes.
Por qué crear plantillas de Gutenberg
Después de diseñar la página o el diseño de la publicación, puede guardar la lista de bloqueo con sus atributos para reutilizarla. Esto le brinda una ventaja sobre la creación de contenido, ya que no tiene que concentrarse en el diseño. Las plantillas de bloques garantizan un diseño uniforme.
Una plantilla de bloque puede tener contenido alternativo. Pueden ser estáticos o dinámicos. Puede definir el estado predeterminado de la sesión del 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 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 a la vez.
Podemos seleccionar y agregar un bloque a la vez o varios bloques a la vez a nuestra biblioteca global de bloques reutilizables. Esto facilita exportarlos como archivos JSON.
Plantilla de diseño de muestra
Creé un diseño simple que puedo usar como publicación de blog, revisión de productos, etc. Es fácil de guardar en una biblioteca para poder reutilizarlo.
Coloque el cursor en el primer bloque que desea incluir y arrastre el mouse hasta el último bloque para resaltarlo.
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 ha creado el bloque. Dale al diseño un nombre que tenga sentido para ti y selecciónalo Rescate.
Un 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). Por debajo InstrumentosElegir 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 está editando, está editando el original. Para mantener el original y crear una nueva publicación usando el diseño, debe exportarlo, cambiarle el nombre e importar el diseño.
Publicaciones duplicadas
Afortunadamente, tenemos otra opción. Un complemento llamado Publicación duplicada agrega la función de clonación de bloques de Gutenberg.
en Configuraciones para publicaciones duplicadasencender 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ás que clonarlo y editarlo cada vez que quieras usarlo.
Método 2: forma alternativa fácil de crear una plantilla de Gutenberg
Este método es solo una estafa simple, pero funciona. Primero, cree un diseño que desee reutilizar junto con cualquier contenido de marcador de posición.
Luego ve al editor de código. Para hacer esto, seleccione los tres puntos en la esquina superior derecha. Por debajo EditorElegir 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
El argumento es una plantilla de bloque. Puede agregar un argumento a las páginas y publicaciones o crear un nuevo tipo de publicación. El diseño estará vinculado a ese tipo de publicación, por lo que cuando crea este tipo de publicación, el diseño se muestra de forma predeterminada.
Es genial para crear diseños para diferentes tipos de artículos. Por ejemplo, puede tener un tipo de publicación de clasificación de productos, un tipo de publicación de resumen de vacaciones, un tipo de publicación de receta, etc., y cuando carga este tipo de publicación, muestra automáticamente el diseño relacionado.
La creación de una plantilla incluye:
- Establecer el estado predeterminado de forma dinámica.
- Regístrelo como el diseño predeterminado para un tipo de publicación específico.
Declarar una plantilla
La plantilla en sí se declarará como una matriz blockTypes. Esto se hace en JavaScript o PHP. Como Manual del programador de Gutenberg muestra, se vería así:
const template = [
[ 'block/name', {} ], // [ blockName, attributes ]
];O esto:
'template' => array( array( 'block/name' ), ),
Registre su plantilla para tipos de publicaciones personalizadas
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 es del núcleo de WordPress (a diferencia de un complemento) y su nombre es un párrafo (que identifica qué bloque usar).
Registro de plantillas en páginas y publicaciones.
Si agrega una plantilla a páginas o publicaciones, se cargará automáticamente cada vez que cree una página o publicación. Prefiero agregarlos a ciertos tipos de publicaciones personalizadas, ya que 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 en bloques de contenedores (por ejemplo, bloques de columnas). Esto se hace asignando una plantilla anidada al propio bloque. 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' ) ), ) ), ) ) );
Bloqueo de plantilla
Puede bloquear la plantilla con este código:
'template_lock' => 'all', // or 'insert' to allow moving
Plantilla de muestra con tipo de publicación personalizada
Quiero crear un tipo de publicación personalizada llamada Libros que vimos arriba. Mostrará una plantilla de diseño y contendrá una imagen, un encabezado y un párrafo.
El código se pegará en su archivo functions.php. Utilice siempre un tema secundario cuando agregue código a archivos PHP. Si no lo hace, el código se sobrescribirá al actualizar 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 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 Editor Sección). Esto mostrará los bloques con sus atributos del diseño que ya creó, para que pueda saber de antemano cómo organizar los bloques en su código.
Ingresar Funciones temáticas (funciones.php) y pegue el código. Pegué el código en la parte inferior. Esta es una página de prueba y no planeo guardar ningún código, así que no usé un tema secundario.
Se agrega un nuevo tipo de entrada al menú Libros del tablero. Incluye una lista y Agregar nuevo combinar. he hecho clic Agregar nuevo y mi nueva plantilla se agrega al editor, donde puedo comenzar a agregar contenido.
Los bloques se colocan en el orden en que aparecen en el código y contienen los atributos que se les asignan. Puedes poner tantos bloques en tu código como quieras y darles cualquier atributo. Puede crear tantos tipos de publicaciones personalizadas como desee, y cada una de ellas puede tener un diseño predeterminado único. Este ejemplo incluye texto alternativo.
Pensamientos finales
Aquí está nuestro vistazo a la creación de 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 facilitan 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 conoce su código y son los más convenientes para usar en WordPress. La principal desventaja de crear plantillas para agregar a functions.php es que creas el diseño en código y no en el editor de Gutenberg, por lo que no es visual.
Me gusta que puedas agregar contenido prefabricado a tus plantillas. Esto es ideal para que el texto de marcador de posición muestre a los colaboradores dónde va la información. Las plantillas reutilizables son una excelente manera de acelerar y optimizar su proceso de flujo de trabajo, así como de crear diseños de página y publicaciones para compartir.
Queremos escuchar de ti. ¿Creaste plantillas de Gutenberg? Háganos saber acerca de su experiencia en los comentarios a continuación.
Foto recomendada por Nadia Snopek / shutterstock.com
