# Fejlesztőknek: elemek regisztrálása

> Saját elem hozzáadása a YayMail szerkesztőhöz: PHP-regisztráció és a szerkesztő oldali React-komponens.

Egy saját elem két részből áll: a PHP-oldali regisztrációból (ez mondja meg a YayMailnek, hogy az elem létezik) és a szerkesztő oldali, JavaScript/React komponensből (ez rajzolja ki az elemet a szerkesztő vásznán).

## 1. PHP-oldal

Az elemet a `yaymail_register_elements` akcióra kapcsolódva regisztrálod. Az akció megkapja az elemeket kezelő szolgáltatást, amelynek a `register_element()` metódusával adod át az elemed példányát:

```php
function register_new_element( $element_service ) {
    $element_service->register_element( new \YourNewElement() );
}
add_action( 'yaymail_register_elements', 'register_new_element' );

// A szerkesztő a WordPress saját React-jét használja
function enqueue_wp_react_scripts() {
    wp_enqueue_script( 'wp-react' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_wp_react_scripts' );
```

Az elem osztályát (`YourNewElement`) a [következő fejezet](https://hub.hellowp.io/hu/plugins/email-customizer-for-woocommerce/fejlesztoknek-elem-osztaly/) írja le.

## 2. Szerkesztő oldal (JavaScript/React)

A szerkesztő betöltődése után a böngészőben egy `yaymail-loaded` esemény váltódik ki. Erre figyelve a `window.yaymailData.shared.stores.useAddonStore` tárolón keresztül regisztrálod a komponenst a `registerElement()` hívással. Az első paraméter az elem típusa (itt `new_element`), és **meg kell egyeznie** a PHP-osztály `$type` értékével.

```js
document.addEventListener( 'yaymail-loaded', () => {
  window.yaymailData.shared?.stores?.useAddonStore
    ?.getState()
    .registerElement( 'new_element', NewElement );
});
```

### A komponens felépítése

A komponens megkapja az `element` tulajdonságot, amelynek `data` mezőjében az elem beállításai vannak. A szerkesztő eszközei a `window.yaymailData.shared` alatt érhetők el:

| Eszköz | Mire jó |
|---|---|
| `core_components.ElementWrapper` | Az elem körüli burkoló: ez adja a kijelölést, az eszköztárat és a húzhatóságot. Az `element` és a `style` tulajdonságot kell átadni neki. |
| `hooks.useShortcode` → `doShortcode()` | A szövegben lévő shortcode-ok kiértékelése a szerkesztő előnézetében. |

A komponens a `data` mezőkből (cím, tartalom, színek, térköz, betűtípus) számolja a stílusokat, a szövegeket pedig a `doShortcode()`-on engedi át. A burkolónak adott stílusba kerül a háttérszín, a térköz (`padding`) és a betűcsalád. A tartalom egy `new_element-container` osztályú tárolóban van: egy címsor (`h2`) és egy tartalmi `div`.

Két megvalósítási mód használható:

- **Sima JavaScript**: a WordPress `wp.react` objektumának `createElement` függvényével építed a fát, hibakezelésként egy `try/catch` ággal „Error loading element” üzenetet adsz vissza.
- **JSX/TypeScript** (építési lépéssel): a `useMemo` segítségével csak akkor számolod újra a szöveget és a stílust, ha a hozzájuk tartozó adat változik.

Mindkét esetben a komponens alapértelmezett exportja a függvény, és az adat hiányára is felkészülsz (például `data.title || ''`).