En la era Gutenberg, el proceso de diseño no está estrictamente ligado a los temas de WordPress. Desde el principio, el CMS proporciona a los usuarios todas las herramientas de diseño que necesitan para construir un excelente sitio web y el tema pretende ser algo que añade aún más herramientas de construcción y diseño.
Las plantillas de bloques son una característica que aumenta aún más las posibilidades de creación de sitios. Según el Manual del Editor de Bloques:
Una plantilla de bloque se define como una lista de elementos de bloque. Estos bloques pueden tener atributos predefinidos, contenido de marcador de posición y ser estáticos o dinámicos. Las plantillas de bloques permiten especificar un estado inicial predeterminado para una sesión del editor.
En otras palabras, las plantillas de bloques son colecciones preconstruidas de bloques que se utilizan para establecer un estado predeterminado de forma dinámica en el cliente.
👉 Las plantillas de Bloques son diferentes de los archivos de Plantilla.
Los archivos de plantilla son archivos PHP como index.php, page.php y single.php, y funcionan de la misma manera tanto con los temas clásicos como con los de bloque, según la jerarquía de plantillas de WordPress. En los temas clásicos, estos archivos están escritos en PHP y HTML. En los temas de bloques, están formados íntegramente por bloques.
👉 Las plantillas de Bloques son diferentes de los patrones de Bloques.
Los patrones de bloques deben añadirse manualmente a tus páginas, mientras que las plantillas de bloques proporcionan automáticamente el diseño inicial y los valores predeterminados cuando tú o los miembros de tu equipo creáis una nueva entrada.
También puedes vincular plantillas de bloques específicas a tus tipos de entrada personalizados y bloquear algunos bloques o funciones para obligar a los usuarios a utilizar tus valores predeterminados o evitar errores.
Tienes un par de formas de crear plantillas de bloques. Puedes utilizar la API de bloques para declarar un array de tipos de bloque mediante PHP, o puedes crear un tipo de bloque personalizado utilizando el componente InnerBlocks.
¡Vamos a sumergirnos!
Cómo Crear una Plantilla de Bloques con PHP
Si eres un desarrollador de la vieja escuela, puedes definir una plantilla de bloque personalizada utilizando un plugin o el archivo functions.php de tu tema. Si te decides por un plugin, inicia tu editor de código favorito, crea un nuevo archivo PHP y añade el siguiente código:
<?php
/*
* Plugin Name: My Block Templates
* Plugin URI: https://example.com/
* Description: An example plugin
* Version: 1.0
* Requires at least: 5.5
* Requires PHP: 8.0
* Author: Your name
* Author URI: https://author.example.com/
* License: GPL v2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Update URI: https://example.com/my-plugin/
*/
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );En el código anterior get_post_type_object recupera un tipo de entrada por su nombre.
Guarda tu archivo en la carpeta wp-content/plugins, ve a la pantalla Plugins de tu panel de control de WordPress y activa el plugin Mis Plantillas de Bloque.
Ahora, cuando crees una nueva entrada, el editor lanzará automáticamente tu plantilla de bloque con un bloque de imagen, un encabezado y un párrafo.
También puedes añadir un array de ajustes para cada bloque y también crear estructuras anidadas de bloques. La siguiente función construye una plantilla de bloques más avanzada con bloques internos y ajustes:
function myplugin_register_my_block_template() {
$block_template = array(
array( 'core/image' ),
array( 'core/heading', array(
'placeholder' => 'Add H2...',
'level' => 2
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(),
array(
array( 'core/column',
array(),
array(
array( 'core/image' )
)
),
array( 'core/column',
array(),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
);
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = $block_template;
}
add_action( 'init', 'myplugin_register_my_block_template' );Puedes ver el resultado del código anterior en la siguiente imagen:
Hasta ahora, sólo hemos utilizado bloques básicos. Pero también puedes incluir bloques personalizados o patrones de bloques en tus plantillas de bloques, como se muestra en el siguiente ejemplo:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'page' );
$post_type_object->template = array(
array( 'core/pattern', array(
'slug' => 'my-plugin/my-block-pattern'
) )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );No hay mucha diferencia en caso de que decidas crear una plantilla de bloque predeterminada para un tipo de entrada personalizado ya registrado. Simplemente cambia el tipo de entrada de get_post_type_object por el nombre de tu tipo de entrada personalizado, como se muestra en el siguiente ejemplo:
<?php
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'book' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );Ahora que ya sabes cómo crear plantillas de bloque, podemos avanzar y explorar más casos de uso. Profundicemos un poco más.
Plantillas de Bloque con Tipos de Entrada Personalizados
Como hemos mencionado antes, puedes adjuntar una plantilla de bloque a un tipo de entrada personalizado. Puedes hacerlo después de que tu tipo de entrada personalizado ya haya sido registrado, pero puede que prefieras definir una plantilla de bloque al registrar el tipo de entrada personalizado.
En este caso, puedes utilizar los argumentos template y template_lock de la función register_post_type:
function myplugin_register_book_post_type() {
$args = array(
'label' => esc_html__( 'Books' ),
'labels' => array(
'name' => esc_html__( 'Books' ),
'singular_name' => esc_html__( 'Book' ),
),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_rest' => true,
'rest_namespace' => 'wp/v2',
'has_archive' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'supports' => array( 'title', 'editor', 'thumbnail' ),
'template' => array(
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(),
array(
array( 'core/column',
array(),
array(
array( 'core/image' )
)
),
array( 'core/column',
array(),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
)
);
register_post_type( 'book', $args );
}
add_action( 'init', 'myplugin_register_book_post_type' );Y ya está. La imagen siguiente muestra la plantilla de bloque en la interfaz del editor para un tipo de entrada personalizado Libro.
Cuando hayas terminado con el diseño, es posible que quieras jugar con la configuración de bloques para ajustar el comportamiento y la apariencia de tu plantilla de bloques.
Ajustar la Plantilla de Bloque con Atributos de Bloque
Hemos definido una plantilla de bloques como una lista de bloques. Cada elemento de la lista debe ser un array que contenga el nombre del bloque y un array de atributos opcionales. Con los arrays anidados, puede que quieras añadir un tercer array para los bloques hijos.
Una plantilla con un bloque Columnas puede representarse como sigue:
$template = array( 'core/columns',
// attributes
array(),
// nested blocks
array(
array( 'core/column' ),
array( 'core/column' )
)
);Como ya se ha mencionado, el segundo array de la lista es un array opcional de atributos de bloque. Estos atributos te permiten personalizar la apariencia de tu plantilla para que tú o tus usuarios podáis centraros en el contenido de la entrada sin preocuparos de la disposición y el diseño de la página.
Para empezar, puedes utilizar el editor de bloques para crear una estructura de bloques que puedas utilizar como referencia para tu plantilla.
Añade tus bloques, personaliza la disposición y los estilos, luego pasa al editor de código y busca delimitadores de bloque.
Los delimitadores de bloque almacenan los ajustes y estilos del bloque en pares clave/valor. Puedes simplemente copiar y pegar claves y valores del marcado de bloque para rellenar tu array de atributos:
$template = array( 'core/columns',
array(
'verticalAlignment' => 'center',
'align' => 'wide',
'style' => array(
'border' => array(
'width' => '2px',
'radius' => array(
'topLeft' => '12px',
'topRight' => '12px',
'bottomLeft' => '12px',
'bottomRight' => '12px'
)
)
),
'backgroundColor' => 'tertiary'
),
array(
array( 'core/column' ),
array( 'core/column' )
)
);Repite el proceso para cada bloque de la plantilla y ya está.
$template = array(
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) ),
array( 'core/columns',
array(
'verticalAlignment' => 'center',
'align' => 'wide',
'style' => array(
'border' => array(
'width' => '2px',
'radius' => array(
'topLeft' => '12px',
'topRight' => '12px',
'bottomLeft' => '12px',
'bottomRight' => '12px'
)
)
),
'backgroundColor' => 'tertiary',
'lock' => array(
'remove' => true,
'move' => true
)
),
array(
array( 'core/column',
array( 'verticalAlignment' => 'center' ),
array(
array( 'core/image',
array(
'style' => array( 'border' => array( 'radius' => '8px' ) )
)
)
)
),
array( 'core/column',
array( 'verticalAlignment' => 'center' ),
array(
array( 'core/heading', array(
'placeholder' => 'Add H3...',
'level' => 3
) ),
array( 'core/paragraph', array(
'placeholder' => 'Add paragraph...'
) )
)
)
)
)
);Bloquear Bloques
Puedes bloquear bloques específicos o todos los bloques incluidos en tu plantilla utilizando la propiedad template_lock de la página $post_type_object.
Bloquear plantillas puede ser muy útil cuando tienes un blog con varios autores y quieres evitar que todos o determinados usuarios cambien el diseño de tu plantilla de bloques.
En el siguiente ejemplo, estamos bloqueando todos los bloques de la plantilla de bloques:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph' )
);
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );Los bloques bloqueados muestran un icono de candado en la barra de herramientas de bloques y en la vista de lista:
Los usuarios pueden desbloquear bloques desde el menú Opciones disponible en la barra de herramientas de bloques.
Al hacer clic en Desbloquear, una ventana emergente modal te permite activar/desactivar el movimiento, impedir la eliminación, o ambas cosas:
template_lock puede tomar uno de los siguientes valores:
all— Impide a los usuarios añadir nuevos bloques, mover y eliminar bloques existentesinsert— Impide a los usuarios añadir nuevos bloques y eliminar bloques existentescontentOnly— Los usuarios sólo pueden editar el contenido de los bloques incluidos en la plantilla. Ten en cuenta quecontentOnlysólo puede utilizarse a nivel de patrón o plantilla y debe gestionarse con código. (Ver también Bloquear APIs).
Si quieres bloquear bloques específicos, puedes utilizar el atributo lock en cada bloque:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading' ),
array( 'core/paragraph', array(
'lock' => array(
'remove' => true,
'move' => true
)
) )
);
}
add_action( 'init', 'myplugin_register_my_block_template' );El atributo lock puede tomar uno de los siguientes valores:
remove: Impide que los usuarios eliminen un bloque.move: Evita que los usuarios muevan un bloque.
También puedes utilizar lock junto con template_lock para ajustar el comportamiento de los bloques incluidos en tu plantilla de bloques. En el siguiente ejemplo, estamos bloqueando todos los bloques excepto el encabezado:
function myplugin_register_my_block_template() {
$post_type_object = get_post_type_object( 'post' );
$post_type_object->template = array(
array( 'core/image' ),
array( 'core/heading', array(
'lock' => array(
'remove' => false,
'move' => false
)
) ),
array( 'core/paragraph' )
);
$post_type_object->template_lock = 'all';
}
add_action( 'init', 'myplugin_register_my_block_template' );La imagen siguiente muestra la plantilla de bloques con los bloques bloqueados y desbloqueados:
Los desarrolladores de bloques también pueden utilizar el atributo lock en la definición del bloque en el nivel attributes (consulta también Bloqueo individual de bloques).
Evitar que los Usuarios Desbloqueen Bloques
Si has probado el código comentado hasta ahora en el artículo, te habrás dado cuenta de que puedes desbloquear los bloques incluidos en tu plantilla (o cualquier otro bloque) desde la interfaz del editor. Por defecto, todos los usuarios con acceso de edición pueden bloquear o desbloquear bloques, y al hacerlo se saltan la configuración de tu plantilla.
Puedes controlar si los bloques pueden bloquearse o desbloquearse utilizando el filtro block_editor_settings_all.
El filtro enviará cualquier configuración al editor inicializado, lo que significa que cualquier configuración del editor que se utilice para configurar el editor en la inicialización puede ser filtrada por un plugin PHP WordPress antes de ser enviada.
La función callback que utilizarás con este filtro toma dos parámetros:
$settings: Un array de ajustes del editor.$context: Una instancia de la claseWP_Block_Editor_Context, un objeto que contiene información sobre el editor de bloques que se está representando.
Lo que tienes que hacer es filtrar $settings['canLockBlocks'] poniéndolo a true o false como se muestra en el siguiente ejemplo:
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = false;
}
return $settings;
}, 10, 2
);Puedes excluir determinados roles de usuario del bloqueo/desbloqueo de bloques ejecutando una comprobación condicional de las actuales capacidades del usuario.
En el siguiente ejemplo, estamos comprobando si el usuario actual puede editar los mensajes de otros (en otras palabras, si el rol de usuario actual es Editor o superior):
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
}
return $settings;
}, 10, 2
);Las siguientes imágenes comparan el estado inicial del editor para un Admin y un Autor. En primer lugar, Admin:
Ahora, Autor:
Y puedes comprobar cualquier condición del usuario actual. En el siguiente ejemplo, estamos impidiendo que un usuario concreto bloquee/desbloquee bloques:
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
$user = wp_get_current_user();
if ( in_array( $user->user_email, [ '[email protected]' ], true ) ) {
$settings['canLockBlocks'] = false;
}
return $settings;
}, 10, 2
);Puedes combinar más condiciones para tener un control granular sobre quién puede bloquear/desbloquear bloques en tu plantilla y quién no. Ése es un aspecto de lo que se denomina Experiencia Curada.
Pero espera. ¿Has intentado editar el contenido de tu entrada utilizando el editor de código? Bueno, puede que te sorprenda ver que los usuarios a los que no se les permite desbloquear bloques desde la interfaz de usuario aún pueden cambiar el contenido desde el editor de código.
Deshabilitar el Editor de Código para Roles de Usuario Específicos
Por defecto, todos los usuarios que pueden editar contenido pueden acceder al editor de código. Esto podría anular tu configuración de bloqueo y algunos usuarios podrían arruinar o borrar el diseño de tu plantilla.
También puedes utilizar block_editor_settings_all para filtrar la configuración codeEditingEnabled para evitar que determinados roles de usuario accedan al editor de código. Este es el código:
add_filter( 'block_editor_settings_all',
function( $settings, $context ) {
if ( $context->post && 'book' === $context->post->post_type ) {
$settings['canLockBlocks'] = current_user_can( 'edit_others_posts' );
$settings['codeEditingEnabled'] = current_user_can( 'edit_others_posts' );
}
return $settings;
}, 10, 2
);Con este código, los usuarios que no tengan la función edit_others_posts no podrán acceder al editor de código. La siguiente imagen muestra la barra de herramientas Opciones para un Autor.
Esto es lo que necesitas saber para construir plantillas de bloques mediante PHP. Ahora bien, si eres un desarrollador de bloques de Gutenberg y te encanta trabajar con JavaScript, puede que prefieras optar por un enfoque diferente.
Cómo Construir una Plantilla Utilizando JavaScript
Añadir una plantilla de bloque a una entrada funciona de forma diferente si decides utilizar JavaScript. Todavía puedes construir una plantilla, pero necesitas crear un bloque personalizado y utilizar el componente InnerBlocks, tal y como se explica en nuestra guía de desarrollo de bloques de Gutenberg.
InnerBlocks exporta un par de componentes que pueden utilizarse en implementaciones de bloques para habilitar el contenido de bloques anidados. — Fuente: InnerBlocks
¿Cómo funciona?
Puedes utilizar InnerBlocks en tus bloques personalizados del mismo modo que cualquier otro componente de Gutenberg.
Primero tienes que incluirlo desde un paquete junto con otras dependencias:
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';A continuación, definirás las propiedades de InnerBlocks. En el siguiente ejemplo, declararemos una constante TEMPLATE que luego utilizaremos para establecer el valor de la propiedad template del elemento InnerBlocks:
const TEMPLATE = [
[ 'core/paragraph', { 'placeholder': 'Add paragraph...' } ],
[ 'core/columns', { verticalAlignment: 'center' },
[
[
'core/column',
{ templateLock: 'all' },
[
[ 'core/image' ]
]
],
[
'core/column',
{ templateLock: 'all' },
[
[
'core/heading',
{'placeholder': 'Add H3...', 'level': 3}
],
[
'core/paragraph',
{'placeholder': 'Add paragraph...'}
]
],
]
]
]
];
registerBlockType( metadata.name, {
title: 'My Template',
category: 'widgets',
edit: ( props ) => {
return(
<div>
<InnerBlocks
template={ TEMPLATE }
templateLock="insert"
/>
</div>
)
},
save() {
const blockProps = useBlockProps.save();
return(
<div { ...blockProps }>
<InnerBlocks.Content />
</div>
)
}
} );Este código es bastante sencillo. Observa que hemos utilizado el atributo templateLock dos veces, primero a nivel de bloque y luego dentro del elemento InnerBlocks. Para ver la lista completa de accesorios disponibles, consulta la referenciaInnerBlocks y el Manual del Editor de Bloques.
Ahora pruébalo tú mismo.
Primero, crea una instalación local de WordPress utilizando DevKinsta o cualquier otro entorno de desarrollo local.
A continuación, inicia tu herramienta de línea de comandos, navega hasta tu carpeta de plugins y ejecuta el siguiente comando:
npx @wordpress/create-block template-blockPuedes cambiar el nombre del bloque por el que quieras. Si prefieres controlar todos y cada uno de los aspectos de tu bloque de inicio, sólo tienes que seguir las instrucciones proporcionadas en nuestra guía definitiva para el desarrollo de bloques.
Una vez completada la instalación, ejecuta los siguientes comandos:
cd template-block
npm startAbre tu panel de administración de WordPress y ve a la pantalla de plugins. Busca y activa tu plugin Bloque de Plantillas.
En tu editor de código favorito, abre el archivo index.js que encontrarás en la carpeta src. Copia y pega el código anterior, guarda tu index.js y, de nuevo en el panel de control de WordPress, crea una nueva entrada o página.
Abre el insertador de bloques y desplázate hasta la sección Widgets. Allí deberías encontrar tu bloque personalizado.
Añádelo a la entrada, personaliza el contenido y guarda la entrada.
Si cambias al editor de código, verás el siguiente marcado:
<!-- wp:create-block/template-block -->
<div class="wp-block-create-block-template-block"><!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"templateLock":"all"} -->
<div class="wp-block-column"><!-- wp:heading {"level":3,"placeholder":"Add H3..."} -->
<h3 class="wp-block-heading"></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"placeholder":"Add paragraph..."} -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:create-block/template-block -->Ahora previsualiza el resultado en tu navegador favorito. Si necesitas mejorar el aspecto de tu bloque, sólo tienes que cambiar los estilos en tu archivo style.scss.
Cuando estés satisfecho con tus personalizaciones, detén el proceso y ejecuta npm run build. Todos los archivos de tu proyecto se comprimirán y estarán disponibles para producción en la nueva carpeta build.
Es fácil y potente, ¿verdad?
Ahora puedes crear plantillas avanzadas de bloques que puedes incluir en tu contenido con sólo unos clics.
Resumen
Añadir una plantilla de bloques a tus entradas o tipos de entradas personalizados puede acelerar y mejorar drásticamente la experiencia de creación y edición en tu sitio web WordPress. Las plantillas de bloques son especialmente útiles en sitios web multiusuario, donde varios usuarios pueden crear contenido y necesitas que se adhieran al mismo formato.
Esto también te permite crear diseños uniformes sin tener que añadir manualmente un patrón de bloques cada vez que crees una nueva entrada. Piensa en un sitio web de reseñas o recetas, donde cada página debe respetar la misma estructura.
Combinando los conocimientos que habrás adquirido en la creación de bloques personalizados estáticos o dinámicos, patrones de bloques y plantillas de bloques, podrás identificar siempre la solución más eficiente y eficaz para crear cualquier tipo de sitio web WordPress.
Ahora depende de ti. ¿Has explorado ya las plantillas de bloques? ¿Para qué caso de uso te parecen más adecuadas? Por favor, comparte tu experiencia en los comentarios a continuación.
Deja una respuesta