{"id":69790,"date":"2023-09-04T16:13:42","date_gmt":"2023-09-04T14:13:42","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=69790&preview=true&preview_id=69790"},"modified":"2023-09-11T10:00:28","modified_gmt":"2023-09-11T08:00:28","slug":"plantillas-de-bloques-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/plantillas-de-bloques-wordpress\/","title":{"rendered":"C\u00f3mo Crear Plantillas de Bloques de WordPress"},"content":{"rendered":"

En la era Gutenberg<\/a>, el proceso de dise\u00f1o no est\u00e1 estrictamente ligado a los temas de WordPress<\/a>. Desde el principio, el CMS proporciona a los usuarios todas las herramientas de dise\u00f1o que necesitan para construir un excelente sitio web y el tema pretende ser algo que a\u00f1ade a\u00fan m\u00e1s herramientas de construcci\u00f3n y dise\u00f1o.<\/p>\n

Las plantillas de bloques son una caracter\u00edstica que aumenta a\u00fan m\u00e1s las posibilidades de creaci\u00f3n de sitios. Seg\u00fan el Manual del Editor de Bloques<\/a>:<\/p>\n

Una plantilla de bloque se define como una lista de elementos de bloque. Estos bloques pueden tener atributos predefinidos, contenido de marcador de posici\u00f3n y ser est\u00e1ticos o din\u00e1micos. Las plantillas de bloques permiten especificar un estado inicial predeterminado para una sesi\u00f3n del editor.<\/em><\/p><\/blockquote>\n

En otras palabras, las plantillas de bloques son colecciones preconstruidas de bloques que se utilizan para establecer un estado predeterminado de forma din\u00e1mica en el cliente.<\/p>\n

\ud83d\udc49 Las plantillas de Bloques son diferentes de los archivos de Plantilla.<\/strong><\/p>\n

Los archivos de plantilla son archivos PHP como index.php<\/strong>, page.php<\/strong> y single.php<\/strong>, y funcionan de la misma manera tanto con los temas cl\u00e1sicos como con los de bloque, seg\u00fan la jerarqu\u00eda de plantillas de WordPress<\/a>. En los temas cl\u00e1sicos, estos archivos est\u00e1n escritos en PHP y HTML. En los temas de bloques, est\u00e1n formados \u00edntegramente por bloques.<\/p>\n

\ud83d\udc49 Las plantillas de Bloques son diferentes de los patrones de Bloques.<\/strong><\/p>\n

Los patrones de bloques<\/a> deben a\u00f1adirse manualmente a tus p\u00e1ginas, mientras que las plantillas de bloques proporcionan autom\u00e1ticamente el dise\u00f1o inicial y los valores predeterminados cuando t\u00fa o los miembros de tu equipo cre\u00e1is una nueva entrada.<\/p>\n

Tambi\u00e9n puedes vincular plantillas de bloques espec\u00edficas 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.<\/p>\n

Tienes un par de formas de crear plantillas de bloques. Puedes utilizar la API de bloques<\/a> para declarar un array de tipos de bloque mediante PHP, o puedes crear un tipo de bloque personalizado utilizando el componente InnerBlocks<\/code>.<\/p>\n

\u00a1Vamos a sumergirnos!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

C\u00f3mo Crear una Plantilla de Bloques con PHP<\/h2>\n

Si eres un desarrollador de la vieja escuela, puedes definir una plantilla de bloque personalizada utilizando un plugin o el archivo functions.php<\/a> de tu tema. Si te decides por un plugin, inicia tu editor de c\u00f3digo<\/a> favorito, crea un nuevo archivo PHP y a\u00f1ade el siguiente c\u00f3digo:<\/p>\n

<?php\n\/*\n * Plugin Name:       My Block Templates\n * Plugin URI:        https:\/\/example.com\/\n * Description:       An example plugin\n * Version:           1.0\n * Requires at least: 5.5\n * Requires PHP:      8.0\n * Author:            Your name\n * Author URI:        https:\/\/author.example.com\/\n * License:           GPL v2 or later\n * License URI:       https:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n * Update URI:        https:\/\/example.com\/my-plugin\/\n *\/\n\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
En el c\u00f3digo anterior get_post_type_object<\/code><\/a> recupera un tipo de entrada por su nombre.<\/p>\n
Guarda tu archivo en la carpeta wp-content\/plugins<\/strong>, ve a la pantalla Plugins de tu panel de control de WordPress<\/a> y activa el plugin Mis Plantillas de Bloque<\/strong>.<\/p>\n
Ahora, cuando crees una nueva entrada, el editor lanzar\u00e1 autom\u00e1ticamente tu plantilla de bloque con un bloque de imagen, un encabezado y un p\u00e1rrafo.<\/p>\n
\"Una
Una plantilla de bloques cargada autom\u00e1ticamente en el editor de entradas<\/figcaption><\/figure>\n
Tambi\u00e9n puedes a\u00f1adir un array de ajustes para cada bloque y tambi\u00e9n crear estructuras anidadas de bloques. La siguiente funci\u00f3n construye una plantilla de bloques m\u00e1s avanzada con bloques internos y ajustes:<\/p>\n
function myplugin_register_my_block_template() {\n\n\t$block_template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading', array(\n\t\t\t'placeholder'\t=> 'Add H2...',\n\t\t\t'level'\t\t\t=> 2\n\t\t) ),\n\t\tarray( 'core\/paragraph', array(\n\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\n\t\t) ),\n\t\tarray( 'core\/columns', \n\t\t\tarray(), \n\t\t\tarray( \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t)\n\t\t\t\t), \n\t\t\t\tarray( 'core\/column',\n\t\t\t\t\tarray(),\n\t\t\t\t\tarray(\n\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t) ),\n\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t) )\n\t\t\t\t\t) \n\t\t\t\t)\n\t\t\t) \n\t\t)\n\t);\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = $block_template;\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Puedes ver el resultado del c\u00f3digo anterior en la siguiente imagen:<\/p>\n
\"Una
Una plantilla de bloques m\u00e1s avanzada<\/figcaption><\/figure>\n
Hasta ahora, s\u00f3lo hemos utilizado bloques b\u00e1sicos. Pero tambi\u00e9n puedes incluir bloques personalizados<\/a> o patrones de bloques<\/a> en tus plantillas de bloques, como se muestra en el siguiente ejemplo:<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'page' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/pattern', array(\n\t\t\t'slug' => 'my-plugin\/my-block-pattern'\n\t\t) ) \n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
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<\/code> por el nombre de tu tipo de entrada personalizado, como se muestra en el siguiente ejemplo:<\/p>\n
<?php\nfunction myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'book' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Ahora que ya sabes c\u00f3mo crear plantillas de bloque, podemos avanzar y explorar m\u00e1s casos de uso. Profundicemos un poco m\u00e1s.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Plantillas de Bloque con Tipos de Entrada Personalizados<\/h3>\n
Como hemos mencionado antes, puedes adjuntar una plantilla de bloque a un tipo de entrada personalizado. Puedes hacerlo despu\u00e9s 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<\/a>.<\/p>\n
En este caso, puedes utilizar los argumentos template<\/code> y template_lock<\/code> de la funci\u00f3n register_post_type<\/code>:<\/a><\/p>\n
function myplugin_register_book_post_type() {\n\t$args = array(\n\t\t'label' => esc_html__( 'Books' ),\n\t\t'labels' => array(\n\t\t\t'name' => esc_html__( 'Books' ),\n\t\t\t'singular_name' => esc_html__( 'Book' ),\n\t\t),\n\t\t'public' => true,\n\t\t'publicly_queryable' => true,\n\t\t'show_ui' => true,\n\t\t'show_in_rest' => true,\n\t\t'rest_namespace' => 'wp\/v2',\n\t\t'has_archive' => true,\n\t\t'show_in_menu' => true,\n\t\t'show_in_nav_menus' => true,\n\t\t'supports' => array( 'title', 'editor', 'thumbnail' ),\n\t\t'template' => array(\n\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t) ),\n\t\t\tarray( 'core\/columns', \n\t\t\t\tarray(), \n\t\t\t\tarray( \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/image' )\n\t\t\t\t\t\t)\n\t\t\t\t\t), \n\t\t\t\t\tarray( 'core\/column',\n\t\t\t\t\t\tarray(),\n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t\t\t) ),\n\t\t\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t)\n\t\t)\n\t);\n\tregister_post_type( 'book', $args );\n}\nadd_action( 'init', 'myplugin_register_book_post_type' );<\/code><\/pre>\n
Y ya est\u00e1. La imagen siguiente muestra la plantilla de bloque en la interfaz del editor para un tipo de entrada personalizado Libro.<\/p>\n
\"Una
Una plantilla de bloque para un tipo de entrada personalizado<\/figcaption><\/figure>\n
Cuando hayas terminado con el dise\u00f1o, es posible que quieras jugar con la configuraci\u00f3n de bloques para ajustar el comportamiento y la apariencia de tu plantilla de bloques.<\/p>\n
Ajustar la Plantilla de Bloque con Atributos de Bloque<\/h3>\n
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\u00f1adir un tercer array para los bloques hijos.<\/p>\n
Una plantilla con un bloque Columnas puede representarse como sigue:<\/p>\n
$template = array( 'core\/columns', \n\t\/\/ attributes\n\tarray(), \n\t\/\/ nested blocks\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
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\u00fa o tus usuarios pod\u00e1is centraros en el contenido de la entrada sin preocuparos de la disposici\u00f3n y el dise\u00f1o de la p\u00e1gina.<\/p>\n
Para empezar, puedes utilizar el editor de bloques para crear una estructura de bloques que puedas utilizar como referencia para tu plantilla.<\/p>\n
\"Un
Un dise\u00f1o de bloques en el editor de bloques<\/figcaption><\/figure>\n
A\u00f1ade tus bloques, personaliza la disposici\u00f3n y los estilos, luego pasa al editor de c\u00f3digo y busca delimitadores de bloque.<\/p>\n
\"El
El delimitador de bloque de un bloque Columnas<\/figcaption><\/figure>\n
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:<\/p>\n
$template = array( 'core\/columns', \n\tarray(\n\t\t'verticalAlignment'\t=> 'center',\n\t\t'align'\t\t\t\t=> 'wide',\n\t\t'style'\t\t\t\t=> array( \n\t\t\t'border'\t=> array(\n\t\t\t\t'width'\t=> '2px',\n\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t)\n\t\t\t)\n\t\t),\n\t\t'backgroundColor' => 'tertiary'\n\t),\n\tarray(\n\t\tarray( 'core\/column' ),\n\t\tarray( 'core\/column' ) \n\t) \n);<\/code><\/pre>\n
Repite el proceso para cada bloque de la plantilla y ya est\u00e1.<\/p>\n
$template = array(\n\tarray( 'core\/paragraph', array(\n\t\t'placeholder'\t=> 'Add paragraph...'\n\t) ),\n\tarray( 'core\/columns', \n\t\tarray(\n\t\t\t'verticalAlignment'\t=> 'center',\n\t\t\t'align'\t\t\t\t=> 'wide',\n\t\t\t'style'\t\t\t\t=> array( \n\t\t\t\t'border'\t=> array(\n\t\t\t\t\t'width'\t\t=> '2px',\n\t\t\t\t\t'radius'\t=> array(\n\t\t\t\t\t\t'topLeft'\t\t=> '12px', \n\t\t\t\t\t\t'topRight'\t\t=> '12px', \n\t\t\t\t\t\t'bottomLeft'\t=> '12px', \n\t\t\t\t\t\t'bottomRight'\t=> '12px'\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t),\n\t\t\t'backgroundColor' => 'tertiary',\n\t\t\t'lock' => array(\n\t\t\t\t'remove'\t=> true,\n\t\t\t\t'move'\t\t=> true\n\t\t\t)\n\t\t), \n\t\tarray( \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/image', \n\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\t'style'\t=> array( 'border' => array( 'radius' => '8px' ) ) \n\t\t\t\t\t\t) \n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t), \n\t\t\tarray( 'core\/column',\n\t\t\t\tarray( 'verticalAlignment'\t=> 'center' ),\n\t\t\t\tarray(\n\t\t\t\t\tarray( 'core\/heading', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add H3...',\n\t\t\t\t\t\t'level'\t\t\t=> 3\n\t\t\t\t\t) ),\n\t\t\t\t\tarray( 'core\/paragraph', array(\n\t\t\t\t\t\t'placeholder'\t=> 'Add paragraph...'\n\t\t\t\t\t) )\n\t\t\t\t) \n\t\t\t)\n\t\t)\n\t)\n);<\/code><\/pre>\n
Bloquear Bloques<\/h3>\n
Puedes bloquear bloques espec\u00edficos o todos los bloques incluidos en tu plantilla utilizando la propiedad template_lock<\/code> de la p\u00e1gina $post_type_object<\/code>.<\/p>\n
Bloquear plantillas puede ser muy \u00fatil cuando tienes un blog con varios autores y quieres evitar que todos o determinados usuarios cambien el dise\u00f1o de tu plantilla de bloques.<\/p>\n
En el siguiente ejemplo, estamos bloqueando todos los bloques de la plantilla de bloques:<\/p>\n
function myplugin_register_my_block_template() {\n\t$post_type_object = get_post_type_object( 'post' );\n\t$post_type_object->template = array(\n\t\tarray( 'core\/image' ),\n\t\tarray( 'core\/heading' ),\n\t\tarray( 'core\/paragraph' )\n\t);\n\t$post_type_object->template_lock = 'all';\n}\nadd_action( 'init', 'myplugin_register_my_block_template' );<\/code><\/pre>\n
Los bloques bloqueados muestran un icono de candado en la barra de herramientas de bloques y en la vista de lista:<\/p>\n
\"Un
Un bloque de encabezamiento bloqueado<\/figcaption><\/figure>\n
Los usuarios pueden desbloquear bloques desde el men\u00fa Opciones disponible en la barra de herramientas de bloques.<\/p>\n
\"Desbloqueando
Desbloqueando un bloque<\/figcaption><\/figure>\n
Al hacer clic en Desbloquear<\/strong>, una ventana emergente modal te permite activar\/desactivar el movimiento, impedir la eliminaci\u00f3n, o ambas cosas:<\/p>\n
\"Opciones
Opciones de bloqueo<\/figcaption><\/figure>\n
template_lock<\/code> puede tomar uno de los siguientes valores<\/a>:<\/p>\n