Egyedi Gutenberg-blokkok fordíthatóvá tétele

Ez az útmutató az egyedi Gutenberg-blokkokat készítő fejlesztőknek szól: megmutatja, hogyan adhatod meg, mely blokkok legyenek fordíthatók, a wpml-config.xml fájl és a Multilingual Tools tesztbővítmény segítségével. Ha nem bővítményfejlesztő vagy, a Gutenberg-szerkesztővel készült tartalom fordítását az oldalépítőkről szóló fejezetek írják le.

Előkészületek

Telepítsd és aktiváld:

1. a WPML Core bővítményt;
2. a WPML String Translationt;
3. a Multilingual Tools bővítményt.

A Multilingual Tools bővítményt ne használd éles oldalon, csak teszteléshez.

Az XML-kód előállítása és tesztelése

1. Hozz létre egy új bejegyzést vagy oldalt, add hozzá a regisztrálandó Gutenberg-blokkokat. Minden fordíthatóvá teendő mezőbe írj tesztszöveget, majd tedd közzé. Görgess le a WPML: Gutenberg Blocks szakaszhoz, és másold ki a generált XML-kódot.

   Fontos: az automatikusan generált kódot nem szabad úgy használni, ahogy van. Tesztelned és szerkesztened kell, mielőtt a felhasználóknak odaadod.

2. Nyisd meg a WPML → Settings oldalt, és illeszd be a generált XML-t a Custom XML Configuration fülön. Gondosan nézd át a kódot: előfordulhat, hogy törölnöd kell olyan mezőket, amelyeket nem akarsz fordítani, például konkrét értékű konfigurációs mezőket. Ha kész vagy, mentsd el.

3. Menj vissza a közzétett oldalra, és módosíts rajta egy kicsit (például egy gomb szövegén vagy egy címsoron). Kattints a Language szakasz plusz ikonjára az Advanced Translation Editor megnyitásához. A Gutenberg-blokkok mezői megjelennek a szerkesztőben, és fordíthatók.

Ha regisztráltad a fordíthatóvá tenni kívánt blokkokat, elkészítheted a nyelvi konfigurációs fájlodat. Ha már van, szerkeszd, és add hozzá a véglegesített XML-kódot.

Példák

Képek fordítása

Tegyük fel, hogy van egy képed ezzel a kóddal:

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

A figcaption és az alt attribútum értékét akarod lefordítani. Ehhez a wpml-config.xml fájlba ezt írd:

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

A típus core/image, és nem wp:image, mert ezt az értéket adja vissza a blokk-API.

Hivatkozások fordítása

Megadhatod, hogy a Gutenberg-blokk mely mezői hivatkozások. A WPML ezeket lecseréli a fordításukra, ha van:

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

Blokkattribútumok fordítása

Egy szerkesztőblokk definíciójának egyik formátuma:

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

A key elemet ugyanúgy használhatod, mint az admin szövegek (wp_options) beállításánál, vagyis a key elemek egymásba is ágyazhatók.

A label attribútummal opcionális egyedi címkéket adhatsz, amelyek az Advanced Translation Editorban a blokkelemek mellett jelennek meg. Ha a label a gutenberg-block címkén van, tartalék címkeként szolgál a blokk azon elemeihez, amelyeknek nincs saját címkéjük:

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

A search-method attribútum két értéket vehet fel:

• wildcards (alapértelmezett);
• regex.

A helyettesítő karaktereket ugyanúgy használhatod, mint az admin szövegeknél: a name attribútumban csillag (*) szerepelhet. Egy blokk:

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

A blokk definíciója helyettesítő karakterrel:

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

Ezzel a „The title” és „The content” lefordítható, mert csak ezek az attribútumok kezdődnek myp-vel.

A regex reguláris kifejezést enged a name attribútumban, ami összetett beállításoknál nagyon hasznos. Egy blokk:

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

A definíció reguláris kifejezéssel:

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

Ezzel a „The title” és „The Content” lefordítható, mert csak ezek az attribútumok nem kezdődnek aláhúzásjellel (_).

Egyes blokkbővítmények URL-kódolt JSON-sztringet tárolnak a blokk attribútumában. Az encoding attribútummal dekódolhatod a sztringet, és regisztrálhatod az al-kulcsait fordításra. A LazyBlocks bővítmény például így tárolja az ismétlő mező tartalmát:

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

A firstname és lastname al-kulcsok regisztrálása:

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

Blokkattribútumok hivatkozásainak fordítása

Hogy a WPML automatikusan lefordítsa az URL-eket, a blokkattribútumokat hivatkozásnak is deklarálhatod. Egy egyedi blokk kattintható hivatkozással:

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

A label és url attribútum fordíthatóvá tételéhez a wpml-config.xml fájlba ezt írd:

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

Az url attribútum type="link" megadása teszi lehetővé, hogy a WPML automatikusan lefordítsa az URL-t.

Blokk-névtér

A blokk névterére globális beállítást is adhatsz. A blokk neve már nem kötelező része a definíciónak. Ha a blokkbeállítás a névtér minden blokkjára ugyanaz, így írhatod:

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

Azonosítók automatikus átalakítása a blokkokban

Az azonosítók átalakítása rugalmas, és a legtöbb lehetséges formátumhoz alkalmazkodik (egyetlen azonosító, azonosítók listája, szerializált tömb, JSON-kódolt tömb). Nézd ezt a blokkot:

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

A blokkattribútum azonosítóit és a foo_form_post_ids HTML-attribútum értékét így deklarálhatod bejegyzésazonosítóként:

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

A blokkot a render_block_data szűrőn a legmagasabb prioritással alakítja át a WPML:

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

Használható attribútumok:

• type: post-ids vagy taxonomy-ids;
• sub-type (opcionális): a típus konkrét entitása, ha már ismert, például product a Product egyedi bejegyzéstípusnál. Ha nincs megadva, a WPML kitalálja.

Az általános tudnivalókat a Nyelvi konfigurációs fájl fejezet tartalmazza.