Rendi traducibili i blocchi Gutenberg personalizzati

Impara a specificare quali blocchi Gutenberg personalizzati che hai sviluppato devono essere traducibili. Puoi farlo configurando il file wpml-config.xml con l’aiuto del plugin di test Multilingual Tools.

Questa guida è per gli sviluppatori che creano i propri blocchi personalizzati per Gutenberg. Se non sei un autore di plugin, scopri come tradurre i contenuti creati con l’editor Gutenberg.

Primi passi

Per iniziare, installa e attiva:

1. Plugin core di WPML
2. WPML Traduzione stringhe
3. Multilingual Tools

Il plugin Multilingual Tools non dovrebbe essere usato su siti live o di produzione. Usalo solo per i test.

Generare e testare il codice XML per registrare i blocchi Gutenberg per la traduzione

1. Crea un nuovo articolo o una nuova pagina e aggiungi i blocchi Gutenberg che vuoi registrare. Assicurati di aggiungere un contenuto di test in ogni campo che vuoi rendere traducibile, e poi pubblica.

Scorri in basso fino alla sezione WPML: Gutenberg Blocks e copia il codice XML generato.

2. Vai su WPML → Impostazioni e incolla l’XML generato nella scheda Configurazione XML personalizzata.

Assicurati di rivedere attentamente il codice generato automaticamente. Potresti dover rimuovere alcuni campi che non devono essere tradotti, come i campi di configurazione con valori specifici.

Salva quando sei pronto.

3. Torna alla pagina che hai pubblicato e apporta piccole modifiche, come cambiare il testo di un pulsante o un’intestazione.

Fai clic sull’icona più nella sezione Lingua per aprire l’Editor di traduzione avanzato. I campi dei blocchi Gutenberg appaiono nell’editor e sono disponibili per la traduzione.

Una volta registrati i blocchi Gutenberg che vuoi rendere traducibili, puoi creare il tuo file di configurazione della lingua. Se ne hai già uno, modificalo per aggiungere il tuo codice XML definitivo.

Esempi di registrazione di blocchi Gutenberg come traducibili

Tradurre le immagini

Supponiamo di avere un’immagine che viene mostrata usando il seguente codice:

<!-- 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 -->

Vuoi tradurre i valori degli attributi figcaption e alt di questa immagine.

Per farlo, devi inserire il seguente codice nel file 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>

Tieni presente che il type è core/image e non wp:image, poiché questo è il valore restituito dall’API del blocco.

Tradurre i link

Puoi specificare quali campi del blocco Gutenberg sono link. WPML sostituirà quindi i link con le loro traduzioni, se disponibili.

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

Traduzione degli attributi del blocco

Ecco un esempio di formato per la definizione di un blocco dell’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>

Puoi usare l’elemento key nello stesso modo in cui viene usato con la configurazione Testi admin / wp_options. Questo significa anche che puoi avere elementi key all’interno di elementi key padre.

Puoi usare l’attributo label per aggiungere etichette personalizzate opzionali che vengono visualizzate nell’Editor di traduzione avanzato accanto agli elementi del blocco. Quando l’attributo label fa parte del tag gutenberg-block, verrà usato come etichetta di ripiego per gli elementi del blocco che non hanno un’etichetta specifica definita.

<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>

L’attributo search-method può avere uno di questi due valori:

• wildcards (predefinito)
• regex.

Puoi usare i caratteri jolly (wildcard) nello stesso modo dei testi admin. Questo significa che puoi usare un asterisco (*) nell’attributo name. Ecco un esempio di un blocco:

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

Puoi impostare la definizione del blocco usando un carattere jolly:

<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>

Questo ti permetterà di tradurre “The title” e “The content”, poiché sono gli unici attributi che iniziano con myp.

La regex ti permette di avere un’espressione regolare nell’attributo name. Questo può essere estremamente utile per configurazioni complesse. Ecco un esempio di un blocco:

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

Puoi impostare la definizione del blocco con un’espressione regolare:

<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>

Questo ti permetterà di tradurre “The title” e “The content”, poiché sono gli unici attributi che non iniziano con un trattino basso (_).

Alcuni plugin per i blocchi salvano i dati in una stringa JSON codificata come URL all’interno dell’attributo di un blocco. L’attributo encoding ti permette di decodificare la stringa e registrare le sue sottochiavi per la traduzione.

Ad esempio, il plugin LazyBlocks memorizza il contenuto del campo ripetitore in una stringa JSON codificata:

<!-- 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"} /-->

Puoi registrare le sottochiavi firstname e lastname usando la seguente configurazione 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>

Tradurre i link degli attributi del blocco

Per consentire a WPML di tradurre automaticamente gli URL, puoi dichiarare gli attributi del blocco Gutenberg come link.

Ecco un esempio di un blocco Gutenberg personalizzato con un link cliccabile:

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

Per rendere traducibili gli attributi label e url, aggiungi quanto segue al tuo file wpml-config.xml :

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

In questa configurazione, specificando type="link" per l’attributo url consenti a WPML di tradurre automaticamente l’URL.

Namespace del blocco

Puoi avere una configurazione globale per il namespace del blocco.

Il nome del blocco non è più una parte obbligatoria della definizione.

Se la configurazione del blocco è la stessa per tutti i blocchi in un namespace, puoi scriverla così:

<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>

Convertire automaticamente gli ID nei blocchi

La conversione degli ID è versatile e cerca di adattarsi alla maggior parte dei formati possibili di ID (ID singolo, elenco di ID, array serializzato, array codificato in JSON).

Considera il seguente blocco:

<!-- 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 -->

Puoi dichiarare, come ID degli articoli, gli ID degli attributi del blocco e il valore dell’attributo del tag HTML foo_form_post_ids come mostrato di seguito:

<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>

Il blocco verrà convertito con la massima priorità sul filtro render_block_data come mostrato di seguito:

<!-- 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 -→

Puoi usare i seguenti attributi di configurazione:

• type – può essere post-ids o taxonomy-ids
• sub-type (opzionale): può essere l’entità specifica del type se è già nota. Ad esempio, product per il tipo di post personalizzato Prodotto. Se non definito, l’entità specifica verrà ipotizzata.

Risorse aggiuntive

Per saperne di più sul file wpml-config.xml , visita la guida sui File di configurazione della lingua.

Per personalizzare altri elementi usando il file wpml-config.xml, visita le nostre guide aggiuntive:

• Traduci gli shortcode personalizzati con WPML
• Registra i contenuti del page builder per la traduzione
• Registra i widget personalizzati del page builder per la traduzione
• Imposta le opzioni di traduzione per i campi personalizzati usando il file di configurazione di WPML
• Registra i termini, tipi e tassonomie personalizzati come traducibili
• Traduci i testi che il tema e i plugin salvano in wp_options
• Personalizza il selettore di lingua di WPML usando il file di configurazione di WPML