Plantillas de bloques de WordPress: cómo crearlas, personalizarlas y utilizarlas

Desde WordPress 5.0, el editor de bloques se ha convertido en la interfaz de usuario predeterminada para crear páginas, entradas y plantillas en WordPress. Los elementos de WordPress —las plantillas de bloques, las partes de plantilla y los patrones— han mejorado enormemente la forma de crear sitios, ya que hacen que el proceso sea más visual, intuitivo, eficiente y flexible.

Ya no necesitas tener amplios conocimientos de programación para poder crear plantillas de páginas y entradas de WordPress. Puedes hacer visualmente la gran mayoría de ese trabajo en el editor de bloques. 

Si vienes del editor clásico, tendrás que superar una pequeña curva de aprendizaje. Pero no te preocupes: cuando le cojas el truco, es bastante sencillo. 

¿Es la primera vez que creas sitios web con WordPress? Este tutorial también es para ti. Aunque quizá quieras leer primero Primeros pasos con WordPress.

Antes de hablar sobre cómo crear una plantilla de bloques, explicaremos primero qué es una plantilla de bloques, en qué se diferencia de los patrones de bloques y las plantillas de temas, y cuáles son los requisitos previos que necesitarás para crear una plantilla de bloques. 

A continuación, te guiaremos paso a paso para crear, aplicar estilos e implementar tu primera plantilla de bloques. También explicaremos cómo utilizar JavaScript con tu plantilla de bloques, además de cómo personalizar plantillas de bloques existentes y solucionar problemas habituales.

¿Qué es una plantilla de bloques en WordPress?

Una plantilla de bloques de WordPress es un diseño de página completa que sirve como plantilla para una página o entrada. Está compuesta por una serie de componentes llamados bloques. Los bloques son piezas de contenido individuales, como párrafos, encabezados, imágenes, separadores, filas, columnas, formularios, carruseles, etc., que se pueden organizar para crear un diseño.

Las plantillas de bloques suelen incluir partes de plantilla —como cabeceras, pies de página y barras laterales— y patrones creados a partir de grupos de bloques. Y lo que es más importante, casi siempre deberían incluir un bloque de contenido. El bloque de contenido muestra todos los bloques que se añaden a una página o entrada individual. Piensa en él como un marcador de posición dinámico para el contenido específico de una página o entrada. 

A diferencia de las plantillas de páginas del editor clásico, que están basadas en PHP, las plantillas de bloques son archivos HTML. Si estás buscando estos archivos en tu servidor, los encontrarás en la carpeta de tu tema /templates/ en lugar de en la carpeta /raíz de tu tema.

La anatomía de una plantilla de bloques de WordPress

Está muy bien hablar sobre qué son las plantillas de bloques, pero si es la primera vez que utilizas el editor de bloques, puede resultarte difícil visualizarlo. Al fin y al cabo, el editor de bloques es una herramienta visual, así que ver un «dibujo anatómico» de una plantilla de bloques podría ser útil. 

Esperamos que esta útil infografía te ayude a comprender mejor la estructura básica y completa de una plantilla de bloques típica de WordPress y la función de cada elemento que interviene. Se ve mejor en una pantalla grande. Haz clic en la imagen de abajo para descargar una versión en PDF y conservarla como referencia.

¿En qué se diferencian las plantillas de bloques de las partes de plantilla, los patrones y las plantillas de temas?

Parte de la terminología relacionada con los distintos aspectos de la edición con bloques ha cambiado con el tiempo, a medida que el editor de bloques ha evolucionado. Dediquemos un momento a definir claramente los demás elementos que se utilizan en el Editor del sitio de WordPress: partes de plantilla, patrones, patrones sincronizados (antes llamados bloques reutilizables) y plantillas de temas.

¿Qué es una parte de plantilla de WordPress?

Las partes de plantilla son elementos estructurales reutilizables que se sitúan fuera del área de contenido de una página o entrada. Solo puedes utilizarlas al crear tu plantilla de bloques u otras partes de plantilla; no puedes insertarlas directamente en una página o entrada individual. 

Las partes de plantilla se sincronizan en todo el sitio. Cuando haces un cambio en una parte de plantilla, este se refleja en cada página o entrada en la que se haya implementado esa parte de plantilla.

Un ejemplo habitual de parte de plantilla sería una cabecera, como se muestra a continuación:

Otras partes de plantilla habituales son los pies de página, las barras laterales y los metadatos de las entradas. 

¿Qué puede contener una parte de plantilla?

Una parte de plantilla puede contener otras partes de plantilla, patrones y bloques individuales. 

¿Cómo se utilizan las partes de plantilla dentro de una plantilla de bloques?

Puedes añadir las partes de plantilla predeterminadas de tu tema antes o después del área de contenido de tu plantilla de bloques. También puedes crear partes de plantilla personalizadas o variaciones de partes de plantilla existentes, como una cabecera personalizada para la página de pago o una barra lateral exclusiva para una categoría específica del blog.

Las partes de plantilla también se pueden utilizar para otros tipos de contenido, como ventanas modales y cajas de luz que se muestran al hacer clic o pasar el cursor mediante un bloque personalizado. Algunos ejemplos son los mini carritos, los formularios de acceso y registro, o las interfaces de chatbot.

¿Qué es un patrón?

Un patrón es un grupo de bloques con un diseño predefinido que se puede añadir a plantillas de bloques, partes de plantilla o páginas y entradas individuales. Un patrón suele incluir estilos específicos y puede tener aspectos bloqueados para evitar que se reordenen o eliminen elementos importantes.

Los patrones de WordPress se pueden utilizar de dos formas distintas: sincronizados o no sincronizados. Los patrones no sincronizados se pueden editar después de insertarlos en una página o entrada sin afectar a otras instancias del mismo patrón. 

Los patrones sincronizados mantienen la coherencia del diseño y el contenido en todo el sitio, ya que actualizan cada instancia del patrón cada vez que haces un cambio, ya sea editando el propio patrón o mientras se utiliza dentro de una página o entrada. 

Puedes elegir si tu patrón se sincroniza o no activando la opción de sincronización al crearlo. 

¿Qué puede contener un patrón?

Al editar una página o una entrada, los patrones pueden contener otros patrones o bloques individuales. Si utilizas un patrón en una plantilla de bloques, también puedes anidar partes de plantilla dentro del patrón. 

¿Cómo se utiliza un patrón?

Los patrones pueden utilizarse en plantillas de bloques, partes de plantilla y dentro del contenido de tus páginas y entradas. Los patrones no se sincronizan a menos que marques la opción de sincronización, por lo que los patrones no sincronizados son más adecuados para elementos de diseño en los que quieras mantener uniformes el estilo y el orden de los elementos, pero cuyo contenido pueda variar de una instancia a otra.

Desde WordPress 6.6, también puedes decidir usar una sustitución en patrones sincronizados si quieres que un elemento de diseño permanezca idéntico en el 99 % de los casos, pero te encuentras con alguna excepción ocasional. Esto puede ahorrarte algo de tiempo. 

Un ejemplo de patrón que quizá no quieras sincronizar es una tabla de precios. Supongamos que tienes una empresa de software y vendes planes de suscripción básicos, estándar y premium para diez tipos distintos de software que desarrollas. Puede que quieras que todas tus tablas de precios tengan un aspecto uniforme, pero el contenido de esas tablas —los servicios y funciones exactos que ofrece cada software y nivel de suscripción, así como sus respectivos precios— puede ser diferente para cada producto.

¿Qué es un patrón sincronizado?

Los patrones sincronizados son similares a las partes de plantilla: cuando haces un cambio en cualquier instancia de ese patrón sincronizado, todas las apariciones del patrón en tu sitio se actualizarán para reflejar esos cambios. 

Cualquier patrón puede ser un patrón sincronizado si seleccionas la opción de sincronización al crearlo. Sin embargo, una vez creado el patrón, no puedes modificar su estado de sincronización. Si quieres copiar tu patrón sincronizado en un patrón nuevo no sincronizado, solo tienes que duplicar el patrón y cambiar su estado de sincronización. 

Al guardar el patrón, asegúrate de seleccionar únicamente el patrón no sincronizado para aplicar las actualizaciones, ya que se te ofrecerá también la opción de guardar los cambios en el patrón sincronizado que copiaste en el patrón nuevo.

Un patrón sincronizado se parece mucho a una parte de plantilla; ¿en qué se diferencian?

La diferencia entre los patrones sincronizados y las partes de plantilla es que los patrones sincronizados están relacionados con contenido creado por los usuarios, como entradas y páginas, mientras que las partes de plantilla están relacionadas con la estructura de tu sitio. 

¿Cómo se utiliza un patrón sincronizado?

Los patrones sincronizados deben utilizarse cuando quieras crear elementos que se muestren de la misma forma, de manera uniforme, en todo tu sitio web. 

Tu patrón puede contener algunos elementos dinámicos que necesariamente tendrán un aspecto diferente de una entrada o página a otra, como la biografía del autor de una entrada o la imagen destacada. Sin embargo, si cambias cualquier contenido estático o elemento de estilo, se actualizará en todo el sitio.

Los patrones no se sincronizan a menos que marques la opción de sincronización al crearlos, así que asegúrate de valorar detenidamente si quieres que tu patrón se sincronice o no cuando lo crees.

Un ejemplo de uso adecuado de un patrón sincronizado podría ser un formulario de suscripción a un boletín. Quizá quieras animar a los lectores a suscribirse a tu boletín mensual, por lo que querrás incluir una llamada a la acción a mitad de cada entrada del blog. 

Quieres que tenga el mismo aspecto en todas las entradas y, algún día, si decides migrar de una plataforma de marketing por correo electrónico a otra, solo tendrás que sustituir el formulario de suscripción en una instancia de tu patrón de llamada a la acción para que se actualice en todo el sitio, en lugar de tener que actualizar cientos o miles de entradas una por una.

¿Qué es una plantilla de tema?

Las plantillas de tema son las plantillas de páginas y entradas incluidas con tu tema. Definen el diseño y la estructura predeterminados de los distintos tipos de páginas y entradas de tu sitio web (por ejemplo, una entrada individual, una página de archivo o una página 404). 

Las plantillas de tema se aplican automáticamente según el tipo de contenido que se esté viendo (por ejemplo, una plantilla de entrada individual para entradas de blog individuales o una plantilla de página para páginas estáticas). Sin embargo, ten en cuenta que tu tema también puede incluir plantillas alternativas que puedes elegir aplicar al crear y editar páginas y entradas.

Además de las plantillas de tu tema, algunos plugins que instales pueden incluir sus propias plantillas asociadas a páginas específicas o a tipos de entrada personalizados. Los plugins de comercio electrónico como WooCommerce, por ejemplo, incluyen plantillas para las páginas del carrito, de pago, de producto individual y del catálogo de productos, entre otras. 

Las plantillas del tema, las plantillas asociadas a los plugins y las plantillas de bloques personalizadas que crees se organizarán en secciones independientes del Editor del sitio, en Apariencia → Editor → Plantillas.

Ten en cuenta que, si necesitas modificar plantillas de tema o de plugins existentes, lo mejor es hacerlo mediante un tema hijo. 

Los cambios en las plantillas de tu tema hijo anularán la configuración de tu tema padre, de modo que, cuando actualices el tema padre, tus personalizaciones se conservarán.

Ventajas de crear plantillas de bloques en WordPress

Las plantillas de bloques de WordPress están diseñadas para que crear diseños de sitios web atractivos y funcionales resulte más fácil y eficaz para prácticamente cualquiera. Tanto si tienes conocimientos técnicos mínimos como si eres un desarrollador con experiencia, las plantillas de bloques ofrecen muchas ventajas.

1. Coherencia de marca. Las plantillas de bloques te permiten crear una apariencia y una estructura coherentes y acordes con tu marca en todo el sitio web. Puedes bloquear elementos de tus plantillas para impedir que otras personas cambien los estilos y el contenido, o que reordenen o eliminen determinados elementos de diseño.
   
2. Diseños predeterminados y reutilizables. Una vez creadas, las plantillas de bloques pueden reutilizarse para generar rápidamente contenido nuevo sin tener que volver a crear tu diseño para cada página y entrada.
   
3. Personalizable. No solo puedes modificar y personalizar las plantillas de bloques para adaptarlas a tus necesidades específicas, sino que también pueden ayudarte a personalizar la estructura de tu sitio web. Puedes asociar las plantillas de bloques a páginas específicas o a tipos de contenido personalizados para incluir diseños y funcionalidades únicos, adaptados al propósito de esas páginas y entradas. Esto puede ayudarte a personalizar determinadas páginas para los usuarios del sitio, como la página de una cuenta o de un perfil de usuario, y a optimizar la experiencia de usuario de acuerdo con la estética de tu marca.
   
4. Flujo de trabajo optimizado. Las plantillas de bloques simplifican el proceso de creación de contenido para los usuarios, especialmente para quienes no están familiarizados con la programación o el diseño web, ya que ofrecen una forma visual e intuitiva de crear y editar diseños. Para los desarrolladores, las plantillas de bloques agilizan el proceso de creación del tema y del sitio web al reducir la cantidad de código PHP necesario.

Requisitos previos para crear una plantilla de bloques

Antes de empezar a crear tu primera plantilla de bloques, tendrás que asegurarte de que se cumplen los siguientes requisitos previos:

1. Acceso a un entorno de servidor. Necesitarás un entorno de desarrollo local, con herramientas como Studio, o acceso a través de tu proveedor de hosting.
   
2. Conocimientos básicos sobre WordPress. Familiarízate con los conceptos básicos de WordPress, incluido el modo de navegar por el panel de administración, crear entradas y páginas, y gestionar temas y plugins. Consulta algunos de los tutoriales o cursos disponibles en WordPress.org si necesitas un enfoque más estructurado.
   
3. Conocimientos del editor de bloques. Familiarízate con el editor de bloques, incluido cómo añadir, editar y configurar distintos tipos de bloques (texto, imágenes, galerías, botones, etc.).
   
4. Herramientas para desarrolladores (opcional). Si tienes pensado crear plantillas de bloques más avanzadas, puede serte útil tener algunos conocimientos de HTML, CSS y JavaScript. Esto resulta especialmente útil si quieres personalizar las plantillas de bloques más allá de lo que ofrece el editor de bloques de forma predeterminada.
   
5. Familiaridad con la jerarquía de plantillas (opcional). Comprender la jerarquía de plantillas de WordPress puede ayudarte a integrar mejor las plantillas de bloques en la estructura de tu tema.

A continuación, tendrás que seguir estos pasos para prepararte para crear tu plantilla de bloques:

1. Instala WordPress. Asegúrate de tener una instalación funcional de la última versión de WordPress. Puede estar en un entorno de desarrollo local o en un servidor activo. Cuando la hayas instalado, asegúrate de tener acceso de administrador a tu sitio de WordPress, ya que necesitarás permisos para crear y gestionar plantillas de bloques.
   
2. Instala y activa un tema compatible con el editor de bloques. Puedes encontrar temas compatibles con el editor de bloques en la biblioteca de temas de WordPress. Si eliges un tema premium de un desarrollador, asegúrate de que sea compatible tanto con el editor de bloques como con la edición completa del sitio. Algunos temas solo son compatibles con el editor de bloques y no permiten la edición completa del sitio.
   
3. Instala plugins compatibles con los bloques. Algunos plugins incluyen compatibilidad integrada con las plantillas de bloques, mientras que otros aún no son compatibles con ellas. Asegúrate de que los plugins que utilices sean compatibles con el editor de bloques y con la edición completa del sitio.

Una vez que hayas configurado tu instalación de WordPress y tengas unos conocimientos básicos del editor de bloques, ¡estarás listo para crear tu primera plantilla de bloques!

Cómo crear una plantilla de bloques paso a paso

Crear una plantilla de bloques puede ser relativamente rápido y sencillo, dependiendo de las funcionalidades que necesites y de la cantidad de contenido requerida. En este ejemplo, crearemos una plantilla de bloques personalizada para la página de una entrada individual del blog que podrás aplicar manualmente a cualquier entrada.

1. Accede al editor del sitio

Ve al panel de administración de tu WordPress y ve a Apariencia → Editor. Después, haz clic en Plantillas.

2. Añade una plantilla nueva

En la página de Plantillas, haz clic en el icono + situado junto al título Plantillas para seleccionar una plantilla nueva que añadir. Puedes elegir entre tipos de plantilla que se aplicarán automáticamente a páginas y tipos de contenido específicos, o crear una plantilla personalizada.

Si creas una plantilla específica para una página, solo se utilizará para esa página y no podrás seleccionarla como diseño opcional para otra página. En cambio, si creas una plantilla personalizada, podrás aplicarla a cualquier página o entrada. En este ejemplo, crearemos una Plantilla personalizada.

Ponle a la plantilla un nombre relacionado con su finalidad y, después, haz clic en Crear.

Antes de empezar a diseñar tu maquetación, se te pedirá que selecciones un patrón.

Empezar con un patrón puede ayudarte a agilizar el proceso de diseño si es lo bastante parecido al diseño que quieres crear. Sin embargo, en este caso empezaremos desde cero, así que seleccionaremos Omitir.

3. Diseña la estructura

Ahora podemos empezar a añadir partes de plantilla, patrones y otros bloques. Primero añadiremos una cabecera, un pie de página y un área de contenido; después haremos algunas personalizaciones adicionales.

Añadir un bloque de cabecera y pie de página

Haz clic en el botón azul + situado en la esquina superior izquierda de la pantalla de edición para mostrar el menú de bloques, patrones y medios. Desde aquí, hay dos formas de añadir una cabecera y un pie de página.

Elige un bloque de parte de plantilla. Una forma de insertar una cabecera y un pie de página es elegir los bloques de Cabecera y Pie de página de las partes de plantilla de tu tema, resaltados en morado en la pestaña Bloques.

Esto insertará la cabecera predeterminada. Si creas una parte de plantilla personalizada, también podrás elegirla desde la pestaña Bloques.

Elige un patrón de cabecera. La segunda opción para añadir una cabecera y un pie de página consiste en seleccionar un patrón en la pestaña Patrones. Puedes seleccionar un patrón de WordPress en el Directorio de patrones, de Tema y plugins o de las bibliotecas de usuario. También puedes filtrar los patrones sincronizados y no sincronizados.

Añadir un bloque de contenido

El bloque de contenido está diseñado para mostrar dinámicamente los bloques que hayas añadido a páginas o entradas individuales. Si no añades un bloque de contenido a tu plantilla, tus entradas y páginas no mostrarán ningún contenido único que añadas.

Puedes añadir un bloque de contenido desde la pestaña Biblioteca de bloques. Solo necesitas un bloque de contenido. Añadir dos bloques de contenido simplemente duplicará el contenido de la página o entrada.

Añadir y organizar otros bloques

Puedes añadir tantos bloques, patrones y partes de plantilla como necesites para crear el diseño que quieras. Elige si quieres que estos elementos se muestren encima o debajo del contenido. También puedes insertar bloques encima de la cabecera y debajo del pie de página.

Organizar los bloques es tan sencillo como seleccionar un bloque o patrón y arrastrarlo hasta el lugar donde quieras colocarlo. Puedes hacerlo en el área del editor visual o hacer clic en el icono de Vista de lista y reorganizar los bloques en la vista de lista.

Personaliza tus bloques

Puedes personalizar opciones específicas de los bloques, como la alineación, el espaciado y los colores, haciendo clic en el icono de ajustes situado en la esquina superior derecha de la pantalla del editor. Después, selecciona la pestaña Bloque. Desde aquí puedes ajustar algunas opciones en la pestaña Ajustes (icono de engranaje) y aplicar estilos a los elementos en la pestaña Estilos (icono de círculo medio relleno).

Si hay otros atributos de apariencia que necesitas ajustar para bloques específicos que no tienen opciones disponibles en las pestañas de Estilos o Ajustes, puedes añadirlos mediante CSS.

Añadir CSS personalizado

Tanto si necesitas hacer cambios globales de estilo en elementos de tu sitio web como si solo los necesitas para una instancia concreta de un bloque, puedes realizar esos ajustes añadiendo código CSS, ya sea a la sección Estilos del Editor del sitio, o directamente a tu archivo style.css de tu tema hijo. 

Para este ejemplo, cambiaremos el estilo de la fuente en la parte superior de nuestra plantilla de bloque para que sea cursiva de forma predeterminada. Para asegurarnos de que este estilo solo se aplique a este bloque de texto concreto en esta plantilla específica, añadiremos una clase CSS personalizada en Clases adicionales de CSS dentro del panel de Ajustes del bloque.

Cuando hayas asignado un nombre a tu nueva clase de CSS, guarda los cambios.

A continuación, aplicarás tu estilo personalizado a la clase CSS. Hay dos formas de hacerlo. La primera es ir a Apariencia → Editor → Estilos, y hacer clic en el icono Editar estilos (lápiz).

En el panel Estilos, haz clic en CSS adicional, introduce los estilos de tu clase de CSS personalizada y haz clic en Guardar.

La segunda forma de hacerlo consiste en añadir tu CSS personalizado directamente al archivo style.css de tu tema hijo. Puedes encontrar este archivo en la carpeta de tu tema hijo, wp-content → themes → tu-tema-child → style.css, en tu servidor, mediante un programa de SFTP como FileZilla o Cyberduck (consulta a tu proveedor de hosting cuáles son las credenciales necesarias para acceder a tu sitio web mediante SFTP).

Descarga tu archivo style.css y ábrelo en un editor de texto como Notepad++ o Visual Studio Code. Añade tu CSS personalizado, guarda el archivo y vuelve a subirlo a tu servidor. Sobrescribirás el archivo anterior, así que asegúrate de haber hecho una copia de seguridad de tu sitio antes de sobrescribir el antiguo archivo style.css.

4. Guarda tu plantilla

Cuando hayas terminado de realizar todos los cambios, haz clic en el botón Guardar para guardar la plantilla. Ahora podrás encontrarla en la sección Personalizado del menú Plantillas del Editor del sitio.

Usar JavaScript con plantillas de bloques

Usar JavaScript con plantillas de bloques en WordPress te permite añadir funciones interactivas y mejorar la funcionalidad de tus bloques. Esta guía parte de que utilizas un tema hijo. A continuación, te explicamos paso a paso cómo usar JavaScript con plantillas de bloques:

Paso 1. Crea un archivo personalizado de JavaScript

Crea un archivo nuevo de JavaScript con el software de edición de código que prefieras y ponle un nombre relevante (por ejemplo, custom-block-scripts.js). Aquí puedes añadir todo tu JavaScript personalizado para cualquier función que quieras incluir en tus plantillas de bloques.

Para este ejemplo, añadiremos un detector de eventos para el clic de un botón que mostrará un cuadro de alerta con el mensaje «¡Botón pulsado!»:

document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.my-custom-button'); buttons.forEach(button => { button.addEventListener('click', function() { alert('Button clicked!'); }); }); });

Deberás especificar el selector que aplicarás más adelante al bloque con el que estés trabajando. En este caso, hemos utilizado la clase CSS .my-custom-button como selector.

A continuación, guarda el archivo y, después, encola su carga en el archivo de tu tema hijo functions.php.

Paso 2. Pon en cola el archivo de JavaScript

Ve al directorio de tu tema hijo y abre el archivo functions.php en el editor de código que prefieras. 

Para encolar el archivo de JavaScript, añade el siguiente código (sustituye «custom-block-scripts.js» por el nombre que tenga tu archivo):

function my_custom_block_scripts() { wp_enqueue_script('my-custom-block-scripts', get_stylesheet_directory_uri() . '/custom-block-scripts.js', array('jquery'), null, true); } add_action('wp_enqueue_scripts', 'my_custom_block_scripts');

Paso 3: Aplica tu JavaScript a un bloque específico

En el editor de bloques, selecciona el bloque que quieres mejorar con JavaScript. En el panel de Ajustes, ve a la sección Avanzado y, en Clase(s) adicional(es) de CSS, añade el nombre del selector que utilizaste en tu archivo JavaScript (pero omite el punto inicial). Guarda los cambios.

Paso 4: añadir JavaScript en línea (opcional)

Si necesitas añadir JavaScript directamente en el editor de bloques, puedes utilizar el bloque HTML para incluir JavaScript en línea, aunque este método es menos habitual y, por lo general, no se recomienda para scripts grandes.

En el editor de bloques, añade un nuevo bloque HTML personalizado.

Ahora vamos a añadir el script de nuestro botón de alerta personalizado. Asegúrate de añadir tu código JavaScript dentro de etiquetas <script>.

<script> document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.my-custom-button'); buttons.forEach(button => { button.addEventListener('click', function() { alert('Button clicked!'); }); }); }); </script>

A continuación, añadiremos la clase adicional de CSS my-custom-button (sin el punto inicial) a nuestro bloque de botón. No olvides guardar los cambios.

Paso 5: probar y depurar

Asegúrate de que tu JavaScript funciona como esperas probando las funciones interactivas en la parte pública de tu sitio.

Aquí estamos probando la funcionalidad de nuestro botón personalizado, que debería mostrar un cuadro de alerta con el mensaje «¡Botón pulsado!» al hacer clic en el botón.

Si detectas algún problema, utiliza las herramientas de desarrollo del navegador para depurarlo. Comprueba si hay errores en la consola y asegúrate de que el script se carga correctamente.

Cómo implementar y utilizar una plantilla de bloques

Hay un par de formas de implementar y utilizar plantillas de bloques en WordPress. Puedes aplicarlas manualmente a páginas y entradas, o asignarlas automáticamente a categorías, páginas o tipos de contenido específicos.

Cómo aplicar una plantilla de bloques personalizada a una página o entrada específica

Para aplicar manualmente una plantilla de bloques personalizada a una página o entrada, abre primero una página o entrada existente, o crea una nueva. Después, en el panel Atributos situado a la derecha del editor de páginas, selecciona Cambiar plantilla en el menú desplegable Plantilla.

Selecciona tu plantilla personalizada en la pantalla de vista previa de plantillas.

Tu nueva página utilizará ahora la plantilla de bloques personalizada. Puedes añadir y personalizar contenido para tu entrada o página desde el editor de bloques, pero no podrás editar el contenido que forme parte de tu plantilla de bloques. Ese contenido solo se puede editar al modificar directamente la plantilla de bloques. Todo lo que añadas a tu página o entrada aparecerá dentro del bloque Contenido que hayas incluido en tu plantilla de bloques.

Haz clic en el botón Publicar para publicar tu nueva página o entrada, o haz clic en Actualizar para guardar los cambios de una página o entrada existente.

Asignar una plantilla de bloques a tipos de contenido específicos

Tendrás que elegir el tipo de contenido al que quieres aplicar la plantilla antes de crearla. No podrás cambiarlo más adelante.

En el Editor del sitio, puedes crear automáticamente plantillas para:

• Página de inicio (también llamada página principal)
• Páginas (elige una página específica)
• Archivos de autor (un autor específico o todos los autores)
• Archivos de categoría (una categoría específica o todas las categorías)
• Archivos de etiquetas (todas las etiquetas)
• Elemento individual: entrada (entradas específicas)

La opción Plantilla personalizada se puede aplicar manualmente a cualquier página o entrada.

Tendrás que elegir el tipo de contenido al que quieres aplicar la plantilla antes de crearla. No podrás cambiarlo más adelante.

Si creas una plantilla de bloques y quieres cambiar el tipo de contenido al que se aplica, puedes guardar la plantilla como un patrón o crear una plantilla de bloques nueva para el tipo de contenido que quieras y, después, insertar el patrón en esa nueva plantilla de bloques. A continuación, tendrás que eliminar la plantilla de bloques anterior si no quieres que se aplique al tipo de contenido al que la habías asignado inicialmente.

Asignar una plantilla de bloques a tipos de contenido personalizados

Si has registrado un tipo de entrada personalizado, puedes asignar automáticamente tu plantilla de bloques a un tipo de entrada personalizado añadiéndola al directorio de Plantillas de tu tema hijo y cambiando el nombre del archivo a single-yourcustomposttype.php.

Por ejemplo, hemos registrado un tipo de entrada personalizado llamado Portfolios mediante el siguiente código en el archivo functions.php de nuestro tema hijo:

function my_custom_post_type() {
register_post_type('portfolios',
array(
'labels'      => array(
'name'          => __('Portfolios', 'textdomain'),
'singular_name' => __('Portfolio', 'textdomain'),
),
'supports' => array( 'title', 'editor', 'comments', 'excerpt', 'custom-fields', 'thumbnail' ),
'public'      => true,
'has_archive' => true,
'show_in_rest'=> true,
)
);
}
add_action('init', 'my_custom_post_type');

Ahora tendremos que descargar el archivo de plantilla de bloques para poder añadirlo a la carpeta de plantillas de tu tema. Busca tu plantilla de bloques en el Editor del sitio, yendo a Apariencia → Editor → Plantillas en el panel de administración de tu WordPress.

Busca la plantilla que quieras editar, haz clic en ella y, después, haz clic en el icono de Editar (un lápiz) situado junto al nombre de la plantilla.

En el Editor, haz clic en el panel Opciones (los tres puntos verticales de la esquina superior derecha), desplázate hacia abajo hasta Exportar y haz clic en el icono Descargar.

Esto descargará todo tu tema junto con todos tus archivos de plantillas personalizadas.

Abre el archivo zip y ve a la carpeta templates de tu tema hijo. Allí encontrarás tu archivo de plantilla de bloque personalizado, llamado wp_custom_template_yourcustomtemplatename.html.

La jerarquía de plantillas de WordPress determina que, si quieres que tu plantilla se aplique a todas las entradas de un tipo de entrada específico, tendrás que anteponer al nombre el prefijo «single-», seguido del nombre del tipo de entrada personalizado. En este caso, nuestro tipo de entrada personalizado se llama «portfolios», así que llamaremos a nuestro archivo de plantilla de bloque single-portfolios.html.

Ahora, súbelo a tu sitio web mediante SFTP y colócalo en la carpeta templates de tu tema hijo.

Ahora todos los tipos de contenido personalizados «portfolio» se mostrarán utilizando la plantilla de bloques que hayas asignado. 

Cómo personalizar las plantillas de bloques existentes

Puedes personalizar fácilmente las plantillas de bloques existentes en el Editor del sitio o manualmente descargando los archivos de tu tema y editando el código dentro del archivo de la plantilla de bloques.

Personalizar una plantilla de bloques mediante el Editor del sitio

Para personalizar una plantilla de bloques en el Editor del sitio, ve a Apariencia → Editor → Plantillas en el panel de administración de tu WordPress.

Busca la plantilla que quieras editar, haz clic en ella y, a continuación, haz clic en el icono Editar (un lápiz) situado junto al nombre de la plantilla.

Desde aquí, puedes añadir, eliminar, reorganizar y aplicar estilos a los bloques como prefieras. Haz clic en Guardar para guardar los cambios y aplicarlos a todas las páginas y entradas asociadas.

Personalizar una plantilla de bloques en el editor de código

Puedes editar directamente el HTML de tu plantilla de bloques en la vista del Editor de código dentro del Editor del sitio. Ve a Apariencia → Editor → Plantillas en el panel de administración de tu WordPress.

Busca la plantilla que quieras editar, haz clic en ella y, a continuación, haz clic en el icono Editar (un lápiz) situado junto al nombre de la plantilla.

En el Editor, haz clic en el panel Opciones (tres puntos verticales en la esquina superior derecha) y, a continuación, desplázate hacia abajo hasta Editor de código y haz clic en él. Esto mostrará el HTML de tu plantilla de bloques y podrás añadir directamente bloques HTML de esta forma. 

Pero ¿qué ocurre si quieres editar tu plantilla sin conexión? No te preocupes: también puedes descargar el archivo HTML de tu plantilla de bloques y editarlo en el editor de código que prefieras.

En el Editor, haz clic en el panel Opciones y, a continuación, desplázate hacia abajo hasta Exportar y haz clic en el icono de Descargar.

Esto descargará todo tu tema junto con todos tus archivos de plantillas personalizadas. 

Abre el archivo zip y desplázate hasta la carpeta templates de tu tema hijo para encontrar tu plantilla de bloques. 

Abre el archivo de tu plantilla de bloques en el editor de código y realiza los cambios. Guarda el archivo y vuelve a subirlo mediante SFTP a la carpeta templates de tu tema hijo.

Solución de problemas habituales de las plantillas de bloques

Al solucionar problemas con las plantillas de bloques en WordPress, debes seguir un enfoque sistemático para identificar de forma proactiva cualquier problema, localizar la causa y resolverlo.

1. Identifica el problema

Hay varios lugares que puedes consultar para identificar problemas con tu plantilla de bloques. 

1. Comprueba la parte visible de tu sitio para ver cómo se muestra la plantilla de bloques. Identifica problemas concretos, como problemas de diseño, contenido que falta o errores de estilo.
2. Comprueba la adaptabilidad al visualizar tu sitio en distintos dispositivos (o emuladores de dispositivos), incluidos móviles, tabletas y ordenadores de sobremesa. Si ves un problema de visualización que solo aparece en un dispositivo o tipo de ventana gráfica, probablemente puedas resolverlo con algunas consultas de medios en tu CSS.
3. Visualiza tu sitio en distintos navegadores para asegurarte de que la plantilla se muestra de forma coherente en varios navegadores. Si el problema es específico de un navegador concreto, puede que haya código específico para ese navegador que puedas añadir a la plantilla para que se muestre correctamente.
4. Mira la pestaña de consola en las herramientas de desarrollo del navegador para comprobar si hay errores de JavaScript que puedan estar afectando a tu plantilla de bloques.

2. Verifica los ajustes de los bloques y el CSS personalizado

Revisa los ajustes de cada bloque de tu plantilla. Asegúrate de que todas las configuraciones sean correctas y de que no haya campos obligatorios vacíos. Si tienes bloques anidados, asegúrate de comprobar los ajustes de cada bloque. Recorre la vista de lista del Editor para asegurarte de que has comprobado todos los bloques.

Comprueba si hay algún CSS personalizado que hayas añadido y que contenga errores o conflictos. Asegúrate de que el CSS se dirija correctamente a los elementos de tu plantilla de bloques. ¿No tienes claro si se está seleccionando el elemento correcto o si los estilos se están aplicando correctamente? Utiliza las herramientas de desarrollo del navegador para inspeccionar los elementos que no se muestran correctamente.

3. Borra las cachés

A veces, los cambios que haces en la parte de administración no son visibles en la parte pública del sitio porque este ofrece contenido almacenado en caché. Puedes comprobar tu sitio en el modo incógnito del navegador para ver si la caché podría ser el problema. 

Si el sitio se muestra correctamente en el modo incógnito, pero no cuando estás en una ventana normal del navegador, es posible que el problema sea la caché. Hay varias áreas en las que querrás borrar la caché.

• Caché del servidor. Muchos proveedores de hosting ofrecen automáticamente servicios de almacenamiento en caché en el servidor. Si tu proveedor de hosting utiliza el almacenamiento en caché en el servidor, asegúrate de que puedes vaciar esa caché.
• Una red de distribución de contenido (CDN). Si utilizas una CDN como Acelerador del sitio de Jetpack, deberías vaciar la caché de tu CDN.
• Plugins de caché. Si utilizas un plugin de optimización del sitio que incluya almacenamiento en caché, como Jetpack Boost, también deberías vaciar la caché allí.
• Caché del navegador. Después de vaciar la caché de tu servidor y de cualquier plugin de caché que puedas haber activado, el último paso es vaciar la caché del navegador. Así te asegurarás de ver la versión más reciente de tu sitio web. 

4. Valida HTML y el código

Si los ajustes de los bloques y el CSS parecen correctos y la caché no es el problema, quizá debas investigar más a fondo el código.

• Valida HTML con un validador como el Servicio de validación de marcado del W3C para comprobar si hay errores de HTML.
• Activa la depuración en WordPress para comprobar si hay errores de PHP. Añade las siguientes líneas a tu archivo wp-config.php para activar la depuración:

define('WP_DEBUG', true); define('WP_DEBUG_LOG', true); define('WP_DEBUG_DISPLAY', false);

Comprueba si hay errores relacionados con tus plantillas de bloques en el archivo wp-content/debug.log.

• Comprueba tu código de PHP en la plantilla de bloques (si se ha creado con PHP) y cualquier código PHP personalizado que hayas añadido en tu archivo functions.php. Revisa el código para detectar errores de sintaxis o problemas con las funciones de WordPress. Es posible que los problemas de tu código no siempre aparezcan como errores de PHP en el registro de depuración; en concreto, puede que tengas una función correctamente codificada desde el punto de vista sintáctico, pero que no esté codificada correctamente para realizar la función que quieres. Por eso, al solucionar problemas, siempre es recomendable revisar el código.

5. Comprueba si hay conflictos entre plugins y temas

Si los pasos anteriores no te han permitido identificar el problema, es hora de comprobar si hay conflictos entre plugins y temas. Primero, querrás hacer una copia de seguridad de tu sitio. Si se trata de un sitio activo, quizá quieras realizar estas pruebas en un sitio de pruebas para que tu sitio activo no se vea afectado durante el periodo de pruebas. 

Desactiva todos los plugins (a menos que el problema que estás viendo se encuentre en un bloque asociado a un plugin específico; en ese caso, querrás mantenerlo activado, pero desactivar todos los demás) y comprueba si el problema persiste. Si se resuelve, vuelve a activar los plugins uno a uno para identificar el plugin que causa el conflicto.

Si ninguno de tus plugins provoca el problema, puede que se deba a un conflicto con el tema. Cambia temporalmente a un tema predeterminado de WordPress (como Twenty Twenty-Four) para comprobar si el problema está relacionado con tu tema.

6. Busca ayuda y consulta la documentación relacionada

Aunque ya hayas identificado el problema, puede que la solución no esté clara y tengas que acudir a los foros de soporte de WordPress, consultar la documentación de tu tema o plugin para conocer los problemas habituales y sus soluciones, o ponerte en contacto con un desarrollador de WordPress para obtener ayuda.

Problemas habituales y soluciones

1. Problemas de diseño
   • Problema: Los bloques no se alinean correctamente.
   • Solución: Comprueba la configuración del bloque para ver las opciones de alineación. Asegúrate de que el tema o el CSS personalizado no esté sobrescribiendo los estilos del bloque.
2. Contenido ausente
   • Problema: Partes de la plantilla no se muestran.
   • Solución: Comprueba que todos los bloques necesarios estén presentes y configurados. Revisa la configuración de visualización condicional y asegúrate de que el tema o el CSS personalizado no oculte elementos, por ejemplo, con «display:none;» o un z-index incorrecto.
3. Errores de estilo
   • Problema: Los estilos personalizados no se aplican.
   • Solución: Borra todas las cachés: del navegador, del plugin de caché, de CDN y del servidor. A continuación, asegúrate de que el CSS personalizado se dirija correctamente a los bloques. Usa selectores específicos para evitar conflictos y comprueba que no haya otro CSS sobrescribiendo tus estilos mediante las herramientas de desarrollo del navegador, con las que puedes inspeccionar los elementos que no se muestran correctamente. 
4. Errores de JavaScript
   • Problema: Los elementos interactivos no funcionan.
   • Solución: Comprueba la consola de las herramientas de desarrollo del navegador para detectar errores. Asegúrate de que todos los scripts necesarios estén encolados y se carguen correctamente.

Al seguir los pasos anteriores y adoptar un enfoque sistemático para solucionar tus problemas, podrás diagnosticar y resolver con precisión la mayoría de los problemas que puedas experimentar con tus plantillas de bloques. Aunque no puedas resolver por tu cuenta un problema concreto, cuanta más información sobre tus intentos de solución puedas proporcionar en los foros de la comunidad, al autor de un tema o plugin o a un desarrollador independiente, más rápida y fácilmente se resolverá el problema.

¿Listo para crear tus propias plantillas de bloques?

Ahora que sabes cómo crear tus propias plantillas de bloques en WordPress, ¡ha llegado el momento de empezar! Si todavía no tienes un proveedor de hosting, puedes instalar Studio en tu ordenador y crear un sitio de desarrollo para empezar a experimentar con la creación de plantillas de bloques. Cuando estés listo, puedes elegir un proveedor de hosting y publicar tus plantillas de bloques. 

No olvides asegurarte de que tus plantillas de bloques ofrecen el mejor rendimiento y de que tu sitio cuenta con copias de seguridad y está protegido las 24 horas del día, los 7 días de la semana. Jetpack Complete puede automatizar la protección y optimización de tu sitio para que puedas dedicar más tiempo al diseño y al contenido de tu sitio.

Preguntas frecuentes

¿Las plantillas de bloques son adaptables a dispositivos móviles de forma predeterminada o tengo que realizar ajustes adicionales?

Por lo general, las plantillas de bloques de WordPress están diseñadas para adaptarse a dispositivos móviles de forma predeterminada, gracias a los principios de diseño adaptable integrados en el editor de bloques. Por ejemplo, las imágenes y los vídeos se ajustan al tamaño de la pantalla y los bloques de texto fluyen de forma natural dentro del diseño. 

Sin embargo, según el tema que uses, la complejidad de tu diseño y los bloques específicos que utilices, puede que tengas que realizar ajustes adicionales para garantizar una adaptación óptima en todos los dispositivos. 

Primero debes asegurarte de usar un tema moderno y adaptable de WordPress. Estos temas suelen incluir reglas de CSS que adaptan el diseño a distintos tamaños de pantalla.

Garantizar la adaptación a dispositivos móviles

Aunque las plantillas de bloques suelen estar diseñadas para adaptarse a dispositivos móviles, eso no significa que los estilos móviles predeterminados de tu tema funcionen con el diseño exacto de tu plantilla de bloques. Estos son algunos pasos que debes seguir para garantizar la adaptación a dispositivos móviles de tu plantilla de bloques.

1. Previsualiza tu plantilla en distintos tamaños de pantalla. Usa la función de vista previa del editor de bloques para comprobar cómo se ve tu plantilla de bloques en distintos dispositivos. Haz clic en el botón Vista previa y selecciona Vista previa en una pestaña nueva. Desde aquí puedes alternar entre las vistas de escritorio, tableta y móvil para ver qué elementos deben ajustarse en cada vista.
2. Ajusta la configuración del bloque. Los bloques nativos de WordPress no tienen opciones de configuración específicas para dispositivos en la mayoría de los casos, pero hay ciertos ajustes que se pueden modificar para mejorar la visualización en dispositivos móviles.
   • Bloque de columnas. En la configuración del bloque, comprueba las opciones de adaptación para asegurarte de que las columnas se apilen en pantallas pequeñas.
   • Bloque de imagen. Asegúrate de que las imágenes se escalen correctamente. Usa las opciones de Ancho amplio o Ancho completo si tu tema las admite.
   • Márgenes y relleno. Usar porcentajes en lugar de px, em o rem para el relleno y los márgenes puede ayudarte a conseguir una mejor apariencia en varios dispositivos.
3. Añade consultas de medios CSS. Usa consultas de medios CSS para aplicar estilos específicos a distintos tamaños de pantalla. Añade tu CSS personalizado en la sección CSS adicional del tema o en un archivo CSS personalizado.

Example:
@media (max-width: 768px) { .my-custom-template .wp-block-column { width: 100%; } .my-custom-template h2 { font-size: 1.5em; }
Test your custom CSS on various devices and screen sizes to ensure the desired responsiveness.

4. Optimiza las imágenes y el vídeo para mejorar el rendimiento en dispositivos móviles. Asegúrate de que las imágenes estén optimizadas para la web y utiliza tamaños adecuados para mejorar los tiempos de carga en dispositivos móviles. Considera usar la CDN para servir el contenido de imágenes y vídeos, así como usar la carga diferida para reducir los tiempos de carga.

Aunque las plantillas de bloques de WordPress suelen adaptarse a dispositivos móviles de forma predeterminada, hacer ajustes adicionales garantiza que tu contenido se vea bien en todos los dispositivos. Previsualiza y prueba tus plantillas periódicamente, usa consultas de medios para aplicar estilos personalizados y aprovecha los principios del diseño adaptable para mejorar la experiencia móvil.

¿Cómo puedo hacer una copia de seguridad de mis plantillas de bloques personalizadas para evitar la pérdida de datos?

Hacer copias de seguridad periódicas de tu sitio de WordPress garantizará que tus plantillas de bloques puedan restaurarse si tu sitio sufre algún problema. Hay varios métodos que puedes usar para hacer una copia de seguridad de tu sitio.

1. Usa un plugin de copias de seguridad como Jetpack VaultPress Backup. Configura el plugin para crear copias de seguridad periódicas de tu WordPress y de tus archivos.
2. Crea una copia de seguridad manual mediante phpMyAdmin y SFTP. Puedes hacer una copia de seguridad de tu base de datos mediante phpMyAdmin y descargar los archivos de tu sitio web con un programa de SFTP.
   
   Haz una copia de seguridad de la base de datos:
   • Inicia sesión en el panel de control de tu proveedor de alojamiento (p. ej., cPanel).
   • Abre phpMyAdmin y selecciona tu base de datos de WordPress.
   • Haz clic en Exportar y elige el método de Exportación rápida en formato SQL.
   • Descarga y guarda el archivo de base de datos exportado.

Haz una copia de seguridad de tus archivos:

• Inicia sesión en el servidor de tu sitio con el programa SFTP que prefieras y las credenciales SFTP que te haya proporcionado tu proveedor de alojamiento.
• Selecciona la carpeta wp-content y descárgala. Si has hecho personalizaciones en la carpeta raíz o has añadido archivos que quieras incluir en la copia de seguridad, puede que quieras descargar toda la carpeta raíz.

3. Descarga tu tema. Puedes exportar tus plantillas descargando tu tema desde el Editor del sitio.
   
   En el Editor, haz clic en el panel de Opciones (los tres puntos verticales de la esquina superior derecha), desplázate hacia abajo hasta Exportar y haz clic en el icono de Descargar.

Esto descargará todas tus plantillas de bloques personalizadas como archivos HTML dentro de la carpeta templates de tu tema. 

Guarda tus copias de seguridad en varias ubicaciones, como almacenamiento en la nube (por ejemplo, Google Drive o Dropbox) y almacenamiento local (un disco duro externo). Restaura periódicamente las copias de seguridad en un entorno de prueba para asegurarte de que están completas y funcionan correctamente. Las copias de seguridad periódicas y las prácticas de almacenamiento seguro son fundamentales para evitar la pérdida de datos y mantener la integridad y disponibilidad de tu sitio de WordPress.

¿Puedo importar y exportar plantillas de bloques entre distintos sitios de WordPress?

Sí, puedes importar y exportar plantillas de bloques de WordPress entre distintos sitios de WordPress. Hay un par de formas de hacerlo. Puedes exportar tus plantillas de un sitio y subirlas a la carpeta templates de tu tema en el otro sitio, o copiar tus bloques desde el Editor del sitio y pegarlos directamente en una plantilla nueva dentro del editor del otro sitio. 

Exportar e importar plantillas de bloques

Puedes exportar tus plantillas descargando tu tema desde el Editor del sitio.

En el Editor, haz clic en el panel de Opciones (los tres puntos verticales de la esquina superior derecha), desplázate hacia abajo hasta Exportar y haz clic en el icono de Descargar.

Esto descargará los archivos de tu tema en un archivo zip, incluidas tus plantillas de bloques en formato HTML, en tu ordenador. 

A continuación, abre el archivo zip y ve a la carpeta templates de tu tema. Busca la plantilla que quieras importar a tu nuevo sitio.

Con un programa SFTP, inicia sesión en el servidor del sitio de destino. Ve a la carpeta templates de tu tema y sube la plantilla que has descargado antes.

Copiar y pegar bloques de plantilla en una plantilla nueva

En el sitio cuya disposición de plantilla de bloques quieres copiar, abre el panel de administración de tu WordPress y ve a Apariencia → Editor → Plantillas. Elige la plantilla que quieres copiar y haz clic en el icono de Editar. En la Vista de lista, selecciona todos los elementos (también puedes seleccionarlos en la pantalla del editor visual, pero es más probable que pases por alto algún elemento anidado).

Pulsa Comando/Ctrl + C para copiar tus bloques. 

A continuación, ve al área Plantillas del Editor del sitio en el sitio donde quieras pegar tus bloques. Crea una plantilla nueva y asígnala a una página, entrada, tipo de entrada, etc. concretos, o créala como plantilla personalizada. 

Haz clic en Escribe / para elegir un área de bloques en el editor visual y pulsa Comando/Ctrl + V.

Ahora todos tus bloques deberían haberse copiado. 

Nota: si esta plantilla debe asignarse a un tipo de entrada personalizado, asegúrate de registrar ese tipo de entrada en tu nuevo sitio y de que el nombre de la plantilla coincida con el tipo de entrada personalizado que hayas registrado.

¿Qué ocurre con mi contenido si desactivo o elimino una plantilla de bloques?

Cuando desactivas o eliminas una plantilla de bloques en WordPress, el impacto en tu contenido depende de cómo se haya utilizado la plantilla y de si se guardó como plantilla personalizada o como parte de los archivos del tema. En cualquier caso, el contenido de tus entradas se conservará, pero se perderá todo lo específico de tu plantilla de bloques. 

Si eliminas una plantilla de bloques que se está utilizando en una página o entrada, WordPress seguirá la jerarquía de plantillas y buscará la siguiente plantilla más adecuada con la que mostrar el contenido de tu entrada.

Por ejemplo, si creaste una plantilla de bloques personalizada y la aplicaste a una entrada concreta, y después eliminaste esa plantilla, WordPress usaría de forma predeterminada single.html. Si eliminaste una plantilla de bloques que guardaste como single.html en los archivos de tu tema, entonces WordPress usaría de forma predeterminada singular.html o, si no existe, index.html.

¿Cómo puedo optimizar el tiempo de carga y el rendimiento de las páginas que utilizan plantillas de bloques?

Optimizar el tiempo de carga y el rendimiento de las páginas que utilizan plantillas de bloques en WordPress no es muy diferente de optimizar tu sitio en general. Entre las estrategias se incluyen aplicar prácticas de programación eficientes y aprovechar la caché y los plugins de rendimiento. Estas son algunas técnicas que puedes utilizar para conseguirlo:

1. Utiliza bloques ligeros y limita el uso de bloques de terceros. Utiliza bloques ligeros y evita diseños demasiado complejos que puedan aumentar el tiempo de carga de la página. Minimiza el uso de bloques de terceros que puedan añadir CSS y JavaScript adicionales, lo que ralentizaría tu página.
2. Comprime las imágenes. Utiliza herramientas de compresión de imágenes como TinyPNG o ImageOptim para reducir el tamaño de los archivos de imagen sin comprometer la calidad. 
3. Utiliza formatos y tamaños de imagen adecuados. Utiliza formatos de imagen modernos como WebP para conseguir una mejor compresión y asegúrate de que las imágenes tengan un tamaño adecuado para su contenedor.
4. Carga las imágenes de forma diferida. La carga diferida retrasa la carga de las imágenes hasta que aparecen en la ventana gráfica.
5. Combina y minifica los archivos CSS y JavaScript. Combina y minifica los archivos CSS y JavaScript para reducir el número de solicitudes HTTP. Retrasa la carga de JavaScript para asegurarte de que estos archivos se carguen después del contenido principal.
6. Elimina los plugins innecesarios. Desactiva y elimina los plugins que no sean esenciales, ya que cada plugin puede añadir sus propios archivos CSS y JavaScript.
7. Implementa la caché. Utiliza un plugin de caché y la caché del servidor, y activa la caché de objetos y del navegador para mejorar el rendimiento de los visitantes que vuelven a tu sitio.
8. Optimiza tu base de datos. Limpia tu base de datos eliminando las revisiones de entradas, los comentarios de spam y los transitorios caducados. Optimiza periódicamente las tablas de la base de datos para garantizar una recuperación eficiente de los datos. Elimina las tablas que ya no utilices y que pertenezcan a plugins y temas eliminados.
9. Utiliza la CDN. Las CDN sirven tu contenido estático, como imágenes, CSS y JavaScript, desde servidores cercanos a tus visitantes, lo que reduce el tiempo de carga.
10. Optimiza las fuentes. Plantéate utilizar fuentes del sistema y alojar tus fuentes localmente. Precarga las fuentes, especialmente si utilizas fuentes personalizadas, mediante el atributo <link rel=”preload”> en la cabecera de tu sitio para mejorar los tiempos de carga. Este es un ejemplo de código: 

<link rel=”preload” as=”font” href=”fonts/denmark.woff2” type=”font/woff2” crossorigin>

Puedes supervisar el rendimiento de tu sitio y obtener recomendaciones para mejorarlo mediante herramientas como Google PageSpeed Insights, GTMetrix y Pingdom. Comprueba periódicamente el rendimiento de tu sitio para identificar y resolver cualquier problema nuevo que surja.

Si buscas una solución bastante completa que te ayude a empezar a optimizar tu sitio, Jetpack Boost optimizará tus imágenes y tu contenido, implementará la caché y servirá tus imágenes y vídeos mediante la CDN. Descubre todo lo que ofrece Jetpack en cuanto a herramientas de rendimiento de WordPress.

¿Hay alguna limitación en cuanto al número de bloques que puedo incluir en una sola plantilla? 

En WordPress no existe una limitación explícita sobre el número de bloques que puedes incluir en una sola plantilla. Sin embargo, la mejor práctica es mantener las plantillas de página lo más sencillas posible para las funciones que necesites.

Si el diseño de tu plantilla de bloques es muy largo y demasiado complejo, aumenta la cantidad de HTML, CSS y, potencialmente, JavaScript que debe cargarse. Esto puede ralentizar el tiempo de carga de tu página y aumentar innecesariamente las consultas a la base de datos. También puede ralentizar el editor y dificultar la gestión del contenido de tu plantilla. 

Además de los problemas de rendimiento, los visitantes de tu sitio pueden sentirse molestos y abrumados por las páginas largas y la lentitud.