Elementor POPOVER_TOGGLE: Simpan 'yes' Menghasilkan Class e-yes, Transform Tidak Pernah Jalan

Saat membangun sebuah widget Elementor kustom di sebuah situs WordPress yang saya rawat, saya butuh fitur transform (rotate) yang bisa dinyalakan lewat kontrol popover toggle. Logikanya kelihatan lurus: simpan "yes" ketika toggle aktif, lalu CSS saya yang menargetkan class transform akan jalan. Kecuali transform-nya tidak pernah jalan. Elemen-nya sama sekali tidak berputar.

Gejala: class yang muncul tidak sesuai harapan

Saya menyimpan nilai toggle seperti ini, mengira "yes" adalah nilai aktif yang benar:

// nilai yang disimpan ketika toggle aktif
'_transform_rotate_popover' => 'yes',

CSS saya menargetkan class transform yang saya kira akan dipasang Elementor:

.e-transform {
    transform: rotate( var( --e-transform-rotateZ ) );
}

Tapi ketika saya inspeksi elemen-nya di browser, class yang muncul bukan .e-transform. Yang muncul justru:

<div class="elementor-element e-yes">

e-yes. Bukan e-transform. Dan karena CSS saya menarget .e-transform, selector-nya tidak pernah cocok dengan apa pun → transform tidak pernah berlaku. Elemen-nya diam, tanpa satu pun error.

Penyebabnya: POPOVER_TOGGLE menggabung prefix_class + return_value

Inilah bagian yang menjebak saya. Kontrol POPOVER_TOGGLE Elementor menghasilkan class CSS-nya dengan menggabungkan dua hal: sebuah prefix_class (di sini 'e-') dengan return_value kontrol itu — bukan dengan string literal "yes".

Jadi class final-nya adalah prefix_class + return_value. Kalau saya menyimpan "yes", Elementor merangkai 'e-' + 'yes' = e-yes. Yang saya inginkan — e-transform — hanya muncul kalau nilai yang disimpan adalah 'transform', bukan 'yes'.

Dengan kata lain, return_value itu bukan flag boolean "on/off". Ia adalah potongan nama class yang ditempel di belakang prefix. Saya memperlakukan toggle ini seperti checkbox biasa yang menyimpan "yes", padahal Elementor mengharapkan token nama class.

Perbaikannya: simpan return_value, bukan "yes"

Perbaikannya adalah menyimpan token return_value yang sebenarnya — 'transform', 'translate', 'scale', atau 'skew' — supaya class yang dihasilkan cocok dengan CSS saya:

// simpan token return_value, bukan "yes"
'_transform_rotate_popover' => 'transform',

Sekarang Elementor merangkai 'e-' + 'transform' = e-transform, selector .e-transform saya cocok, dan rotate-nya berlaku:

.e-transform {
    transform: rotate( var( --e-transform-rotateZ ) );
}

Token yang valid mengikuti grup transform Elementor: transform, translate, scale, skew. Pakai token yang sesuai dengan class yang ditarget CSS-mu.

Jangan lupa varian responsif dan regenerasi CSS

Dua langkah lanjutan yang gampang terlewat:

Tambahkan base desktop plus varian per-breakpoint. Kalau transform-nya perlu beda di tablet/mobile, set base desktop ditambah key _tablet dan _mobile:

'_transform_rotate_popover'         => 'transform', // base desktop
'_transform_rotate_popover_tablet'  => 'transform',
'_transform_rotate_popover_mobile'  => 'transform',

Regenerasi CSS Elementor setelah menulis meta secara langsung. Kalau kamu mengeset nilai-nilai ini lewat kode (bukan lewat editor), CSS yang ter-cache tidak otomatis ikut berubah. Paksa rebuild:

\Elementor\Core\Files\CSS\Post::create( $pid )->update();

Tanpa langkah ini, class-nya mungkin sudah benar di markup tapi CSS yang dirender masih versi lama, dan kamu akan mengejar bug yang sebenarnya sudah diperbaiki.

Pelajaran

POPOVER_TOGGLE Elementor terlihat seperti toggle boolean, tapi return_value-nya bukan "on" — ia adalah potongan nama class yang ditempel di belakang prefix_class. Menyimpan "yes" menghasilkan e-yes, bukan e-transform, jadi CSS apa pun yang menarget class transform tidak pernah cocok. Simpan token return_value yang sebenarnya (transform, translate, scale, skew), sertakan varian responsif _tablet/_mobile, lalu regenerasi CSS lewat Post::create($pid)->update(). Saat sebuah elemen menolak bereaksi padahal CSS-mu "benar", inspeksi class-nya dulu: yang muncul mungkin bukan yang kamu kira.