Hacer traducibles los bloques personalizados de Gutenberg

Aprenda a especificar qué bloques personalizados de Gutenberg que ha desarrollado deben ser traducibles. Puede hacerlo configurando el archivo wpml-config.xml con la ayuda del plugin de prueba Herramientas multilingües.

Esta guía es para desarrolladores que crean sus propios bloques personalizados para Gutenberg. Si no es autor de plugins, consulte cómo traducir el contenido creado con el editor Gutenberg.

Primeros pasos

Para empezar, instale y active:

1. El plugin principal de WPML
2. WPML Traducción de cadenas
3. Herramientas multilingües

El plugin Herramientas multilingües no debe usarse en sitios activos o de producción. Úselo solo para pruebas.

Generar y probar el código XML para registrar bloques de Gutenberg para su traducción

1. Cree una nueva entrada o página y añada los bloques de Gutenberg que quiera registrar. Asegúrese de añadir contenido de prueba en cada campo que quiera hacer traducible y luego publique.

Desplácese hacia abajo hasta la sección WPML: Gutenberg Blocks y copie el código XML generado.

2. Vaya a WPML → Configuración y pegue el XML generado en la pestaña Configuración XML personalizada.

Asegúrese de revisar a fondo el código generado automáticamente. Es posible que tenga que eliminar algunos campos que no están destinados a ser traducidos, como los campos de configuración con valores específicos.

Haga clic en Guardar cuando esté listo.

3. Vuelva a la página que publicó y haga pequeñas actualizaciones, como editar el texto de un botón o un encabezado.

Haga clic en el icono más en la sección Idioma para abrir el Editor de traducción avanzado. Los campos de los bloques de Gutenberg aparecen en el editor y están disponibles para su traducción.

Una vez que haya registrado los bloques de Gutenberg que quiere hacer traducibles, puede crear su archivo de configuración de idioma. Si ya tiene uno, simplemente edítelo para añadir su código XML finalizado.

Ejemplos de registro de bloques de Gutenberg como traducibles

Traducir imágenes

Supongamos que tiene una imagen que se muestra usando el siguiente código:

<!-- wp:image {"id":3} -->
<figure class="wp-block-image"><img src="http://example.com/wp-content/uploads/2018/07/figure-2.png" alt="Image alt text" class="wp-image-3"/><figcaption>Image Caption</figcaption></figure>
<!-- /wp:image -->

Quiere traducir los valores de los atributos figcaption y alt de esta imagen.

Para lograr esto, necesita insertar el siguiente código en wpml-config.xml:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="core/image" translate="1">
        <xpath>//figure/figcaption</xpath>
        <xpath>//figure/img/@alt</xpath>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

Tenga en cuenta que el tipo (type) es core/image y no wp:image, ya que este es el valor que devuelve la API de bloques.

Traducir enlaces

Puede especificar qué campos del bloque de Gutenberg son enlaces. WPML reemplazará entonces cualquier enlace con sus traducciones si están disponibles.

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="core/some-block" translate="1">
        <xpath type="link">//a/@href</xpath>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

Traducción de atributos de bloque

Aquí hay un ejemplo de un formato para la definición de un bloque del editor:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
        <xpath label="My Block">//p</xpath>
        <key name="title" />
        <key name="foo">
            <key name="bar1" />
            <key name="bar2" />
        </key>
        <key name="/^[^_]\S+$/" search-method="regex" />
        <key name="something" search-method="wildcards" />
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

Puede usar el elemento key de la misma manera que se usa con la configuración de Textos de administración / wp_options. Esto también significa que puede tener elementos key dentro de elementos key principales.

Puede usar el atributo label para añadir etiquetas personalizadas opcionales que se muestran en el Editor de traducción avanzado junto a los elementos del bloque. Cuando el atributo label forma parte de la etiqueta gutenberg-block, se usará como etiqueta de reserva para los elementos del bloque que no tengan una etiqueta específica definida.

<wpml-config>
    <gutenberg-blocks>
        <gutenberg-block type="my-plugin/mybutton" translate="1" label="My fallback block label">
            <xpath>//span</xpath>
            <xpath>//a@href</xpath>
        </gutenberg-block>
    </gutenberg-blocks>
</wpml-config>

El atributo search-method puede tener uno de dos valores:

• wildcards (predeterminado)
• regex.

Puede usar comodines (wildcards) de la misma manera que para los textos de administración. Esto significa que se puede usar un asterisco (*) en el atributo name. Aquí hay un ejemplo de un bloque:

<!-- wp:my-plugin/my-block
    {
        "myp": {
            "mypTitle":"The title",
            "mypContent":"The Content",
            "_mypSystem:"Meta attribute to not translate"
        }
    }
/-->

Puede establecer la definición del bloque usando un comodín:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
      <key name="myp">
          <key name="myp*" />
      </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

Esto le permitirá traducir “The title” y “The content”, ya que estos son los únicos atributos que empiezan por myp.

La expresión regular (regex) le permite tener una expresión regular en el atributo name. Esto puede ser extremadamente útil para configuraciones complejas. Aquí hay un ejemplo de un bloque:

<!-- wp:my-plugin/my-block
    {
        "data": {
            "title":"The title",
            "_title":"e980759463943209f6f1ae09a239e353",
            "content":"The Content",
            "_content":"1502a7b825dfe7b789c63830609f1701"
        }
    }
/-->

Puede establecer la definición del bloque con una expresión regular:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
        <key name="data">
            <key name="/^[^_]\S+$/" search-method="regex" />
        </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

Esto le permitirá traducir “The title” y “The content”, ya que estos son los únicos atributos que no empiezan por un guion bajo (_).

Algunos plugins de bloques guardan los datos en una cadena JSON codificada como URL dentro del atributo de un bloque. El atributo encoding le permite decodificar la cadena y registrar sus subclaves para su traducción.

Por ejemplo, el plugin LazyBlocks almacena el contenido del campo repetidor en una cadena JSON codificada:

<!-- wp:lazyblock/testwpml {"name":"%5B%7B%22firstname%22:%22Shekhare%22,%22lastname%22:%22Bhandari%22%7D,%7B%22firstname%22:%22Compatibility%22,%22lastname%22:%22Escalation%22%7D%5D","blockId":"Z169b0O","blockUniqueClass":"lazyblock-testwpml-Z169b0O"} /-->

Puede registrar las subclaves firstname y lastname usando la siguiente configuración XML:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="lazyblock/team" translate="1">
      <key name="name" encoding="json">
        <key name="*">
          <key name="firstname" />
          <key name="lastname" />
        </key>
      </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

Traducir enlaces de atributos de bloque

Para permitir que WPML traduzca automáticamente las URL, puede declarar los atributos de los bloques de Gutenberg como enlaces.

Aquí hay un ejemplo de un bloque personalizado de Gutenberg con un enlace en el que se puede hacer clic:

<!-- wp:foo/link {"label":"Click here!","url":"https://example.com/some-page/"} /-->

Para hacer traducibles los atributos label y url, añada lo siguiente a su archivo wpml-config.xml :

<gutenberg-block type="foo/link" translate="1">
	<key name="label" />
	<key name="url" type="link" />
</gutenberg-block>

En esta configuración, especificar type="link" para el atributo url permite a WPML traducir automáticamente la URL.

Espacio de nombres del bloque

Puede tener una configuración global para el espacio de nombres del bloque.

El nombre del bloque ya no es una parte obligatoria de la definición.

Si la configuración del bloque es la misma para todos los bloques en un espacio de nombres, puede escribirla así:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin" translate="1">
        <key name="data">
            <key name="/^[^_]\S+$/" search-method="regex" />
        </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

Convertir automáticamente los ID en los bloques

La conversión de ID es versátil e intenta adaptarse a la mayoría de los formatos posibles de ID (ID único, lista de ID, matriz serializada, matriz codificada en JSON).

Considere el siguiente bloque:

<!-- wp:foo/form {"ids":[27,28]} -->
<div class="wp-block-foo-form-wrap">
  <form class="foo-form" action="" method="post">
    <input type="hidden" name="foo_form_post_ids" value="27,28" />
    <input type="submit" />
  </form>
</div>
<!-- /wp:foo/form -->

Puede declarar, como ID de entrada, los ID de los atributos del bloque y el valor del atributo de la etiqueta HTML foo_form_post_ids como se muestra a continuación:

<gutenberg-block type="foo/form" translate="0">
  <key name="ids">
      <key name="*" type="post-ids" sub-type="post" />
  </key>
  <xpath type="post-ids" sub-type="post">//*[@name="foo_form_post_ids"]/@value</xpath>
</gutenberg-block>

El bloque se convertirá con la prioridad más alta en el filtro render_block_data como se muestra a continuación:

<!-- wp:foo/form {"ids":[42,43]} -->
<div class="wp-block-foo-form-wrap">
    <form class="foo-form" action="" method="post">
        <input type="hidden" name="foo_form_post_ids" value="42,43" />
        <input type="submit" />
    </form>
</div>
<!-- /wp:foo/form -→

Puede usar los siguientes atributos de configuración:

• type: puede ser post-ids o taxonomy-ids
• sub-type (opcional): puede ser la entidad específica del tipo (type) si ya se conoce. Por ejemplo, product para el tipo de entrada personalizado Product. Si no se define, se intentará adivinar la entidad específica.

Recursos adicionales

Para obtener más información sobre el archivo wpml-config.xml , visite la guía Archivos de configuración de idioma.

Para personalizar otros elementos usando el archivo wpml-config.xml, visite nuestras guías adicionales:

• Traducir shortcodes personalizados con WPML
• Registrar el contenido del maquetador visual para su traducción
• Registrar widgets personalizados del maquetador visual para su traducción
• Establecer opciones de traducción para campos personalizados usando el archivo de configuración de WPML
• Registrar términos, tipos y taxonomías personalizados como traducibles
• Traducir textos que el tema y los plugins guardan en wp_options
• Personalizar el selector de idiomas de WPML usando el archivo de configuración de WPML