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

> Gutenberg-blokkok regisztrálása a wpml-config.xml fájlban: XPath, kulcsok, helyettesítő karakterek, regex, kódolás, linkek, azonosítók.

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:

```html
<!-- 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:

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

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:

```xml
<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:

```xml
<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:

```xml
<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:

```html
<!-- 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:

```xml
<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:

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

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

```xml
<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:

```html
<!-- 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:

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

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

```html
<!-- 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:

```xml
<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:

```xml
<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:

```html
<!-- 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:

```xml
<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:

```html
<!-- 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](https://hub.hellowp.io/hu/plugins/sitepress-multilingual-cms/fejleszto-wpml-config/) fejezet tartalmazza.
