✅Cómo Traducir Bloques Completos de HTML con TranslatePress (Translation Blocks)

Cuando trabajas con maquetación avanzada o contenido en HTML estructurado dentro de WordPress, es común encontrarte con un problema: TranslatePress separa el contenido en muchas cadenas pequeñas, lo que hace que traducir frases enteras con formato sea incómodo y propenso a errores.

Para resolver esto, TranslatePress incluye una función muy útil: los Translation Blocks o bloques de traducción. Esta herramienta te permite unir varias cadenas en una sola, mantener el formato HTML y traducir todo como un bloque.

En este artículo te explico cómo funcionan, cómo usarlos desde el editor visual y cómo aplicarlos directamente con código HTML en tu contenido.

¿Qué es un Translation Block?

Un Translation Block es un bloque de contenido HTML que TranslatePress trata como una única cadena de traducción. Esto te permite traducir:

• Párrafos con elementos <strong>, <em>, <a>, etc.
• Divs con múltiples niveles de texto y estructura
• Contenido con formato o estructura compleja que necesita ser traducido como una unidad

En lugar de traducir cada fragmento por separado (por ejemplo: “haz clic en”, “el botón”, “para continuar”), puedes unir todo en un solo bloque: “haz clic en el botón para continuar”.

¿Cómo crear un Translation Block desde el editor visual?

1. Abre la página y haz clic en “Traducir página”

Esto abrirá el editor visual de TranslatePress.

2. Pasa el ratón por encima de la cadena que quieres fusionar

Verás un nuevo icono con una flecha hacia arriba llamado “Merge Translation Block”.

3. Haz clic en el icono de fusión

Esto unirá esa cadena con su bloque contenedor (normalmente un <p> o <div>) y mostrará todo el contenido unido en la barra lateral.

4. Introduce la traducción completa

Tradúcelo todo de una vez, manteniendo la estructura HTML si es necesario (negritas, enlaces, etc.). Asegúrate de que el HTML de la traducción esté bien formado.

5. Guarda la traducción

Ahora esa sección se tratará como un solo bloque. Puedes editarla en cualquier momento desde el editor visual.

¿Cómo volver a separar un bloque?

Si en algún momento quieres volver a dividir el bloque en cadenas individuales:

1. Pasa el ratón por encima del bloque.
2. Haz clic en el icono de “Split Translation Block” (flecha hacia abajo).
3. Confirma que quieres separar el bloque.

La traducción completa se conservará, y podrás volver a unirlo si lo deseas más adelante.

Traducción de bloques usando clases CSS personalizadas

Si estás desarrollando tu propio tema o maquetando contenido a mano, también puedes forzar la creación de un Translation Block añadiendo una clase CSS específica:

<div class="translation-block"> 
  <div class="masc">Partner</div>
</div>

<div class="translation-block">
  <div class="fem">Partner</div>
</div>

<div class="translation-block">
  Translate <em>everything</em> <div>inside</div>
</div>

Al envolver el contenido en un <div class="translation-block">, TranslatePress lo detectará como una unidad y lo mostrará como una sola cadena de traducción. Esto es útil si estás generando contenido desde plantillas personalizadas o shortcodes.

Importante: esto solo funciona con contenido estático. No es compatible con cadenas generadas dinámicamente por JavaScript o AJAX.

Limitaciones a tener en cuenta

• No puedes usar Translation Blocks con cadenas gettext, es decir, textos de plugins o del sistema.
• No funciona con contenido insertado por JavaScript dinámico.
• Solo se puede aplicar a elementos HTML estáticos que existan ya en el DOM en el momento de la carga.
• El HTML que escribas en la traducción debe ser válido, o puede romper el diseño o el renderizado.

Cuándo usar esta función

Esta función es especialmente útil si:

• Trabajas con maquetación HTML avanzada o visual builders personalizados.
• Necesitas traducir contenido con formato complejo.
• Estás insertando textos manualmente o con shortcodes dentro de bloques personalizados.
• Quieres mantener el control total sobre la estructura del contenido en varios idiomas.

Conclusión

Los Translation Blocks de TranslatePress te permiten unir cadenas y traducir contenido complejo como una sola unidad. Esto es perfecto para mantener estructuras HTML, mejorar la experiencia de traducción y evitar errores al combinar fragmentos sueltos.

Si trabajas con contenido estructurado o bloques personalizados, esta funcionalidad te va a ahorrar tiempo y dolores de cabeza.