Fejlesztőknek: elemek regisztrálása

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:

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

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 || '').