# Fejlesztőknek: az elem megjelenítése az e-mailben

> A layout PHP-sablon felépítése, a biztonsági szabályok és a saját tulajdonságszerkesztő.

## A PHP-sablon felépítése

A `get_layout()` által hivatkozott fájl egy PHP-sablon, amely az elem HTML-jét állítja elő. A menete:

1. Biztonsági őr a fájl elején: `defined('ABSPATH') || exit;`
2. Ha nincs `$args['element']`, a sablon visszatér.
3. Az elem adatai: `$element = $args['element']; $data = $element['data'];`
4. A stílusok összeállítása a `\YayMail\Utils\TemplateHelpers` segédfüggvényeivel.
5. A szövegek feldolgozása `do_shortcode()`-dal.
6. A HTML felépítése kimenet-pufferelés (`ob_start()` / `ob_get_clean()`) között.
7. A kész tartalom becsomagolása a `TemplateHelpers::wrap_element_content( $tartalom, $element, $wrapper_style )` hívással.

```php
<?php
defined( 'ABSPATH' ) || exit;
use YayMail\Utils\TemplateHelpers;

if ( empty( $args['element'] ) ) { return; }
$element = $args['element'];
$data    = $element['data'];

$wrapper_style = TemplateHelpers::get_style( [
    'word-break'       => 'break-word',
    'background-color' => $data['background_color'] ?? '#fff',
    'padding'          => TemplateHelpers::get_spacing_value( $data['padding'] ?? [] ),
] );

$title   = isset( $data['title'] ) ? do_shortcode( $data['title'] ) : '';
$content = isset( $data['rich_text'] ) ? do_shortcode( $data['rich_text'] ) : '';

ob_start();
?>
<div class="your-element">
    <h2><?php echo yaymail_kses_post( $title ); ?></h2>
    <div class="content"><?php echo yaymail_kses_post( $content ); ?></div>
</div>
<?php
TemplateHelpers::wrap_element_content( ob_get_clean(), $element, $wrapper_style );
```

## Fontos szabályok

**Biztonság**

- Mindig legyen ott a `defined('ABSPATH') || exit;` sor.
- Minden kimenetet escape-elj a megfelelő függvénnyel.
- A bemeneti adatot tisztítsd (sanitize).

**Stílus**

- `TemplateHelpers::get_style()`: a stílustömbből egységes `style` attribútumot készít.
- `TemplateHelpers::get_spacing_value()`: a térköz (padding/margin) értékét adja.
- `TemplateHelpers::get_font_family_value()`: a betűcsaládot adja.
- `yaymail_get_text_align()`: a szövegigazítás az e-mail irányának megfelelően.

**Tartalom**

- A shortcode-okat `do_shortcode()` dolgozza fel.
- A HTML-tartalomhoz a `yaymail_kses_post()` való.
- Összetett HTML-szerkezetnél használj kimenet-pufferelést.

## Saját tulajdonságszerkesztő (hamarosan)

A saját tulajdonságszerkesztővel (Custom Property Editor) egy elem beállításaihoz saját szerkesztőmezőt készíthetsz. A funkció még „hamarosan” állapotú, a lépései:

1. **A szkript betöltése.** Az `admin_enqueue_scripts` akcióban, a `yaycommerce_page_yaymail-settings` oldalon (és csak ha a `WC_Emails` osztály létezik) töltsd be a saját belépési fájlodat a `\YayMail\Utils\YayMailViteApp::get_instance()->enqueue_entry()` hívással, a `react` és `react-dom` függőséggel.
2. **A szerkesztő regisztrálása.** A `yaymail-loaded` eseményben hívd a `registerAddonCustomPropertyEditor()` függvényt egy `name` (kötelezően `addon_` előtaggal kezdődik) és egy `component` értékkel.
3. **A komponens megírása.** A komponens megkapja a mező `data` tulajdonságát (`value_path`, `title`, `default_value`, `extras_data`). Az érték módosításához az `updateChosenElementData()` függvényt hívja, amely a `value_path` helyére írja az új értéket, a módosítás neve a mező címe lesz.