Layout Builder & Ekosistem Gutenberg Blocks

Xionic Framework memperkenalkan arsitektur komponen unik di mana satu file template PHP tunggal memiliki peran ganda:

Sebagai komponen visual pada Layout Builder (Template halaman: page-layout-builder.php).
Sebagai Dynamic Gutenberg Block otomatis di kategori block “Xionic Section”.

Struktur Direktori Komponen Layout

Semua komponen section layout disimpan pada folder:

TEXT

templates/components/layouts/{slug}.php

Framework secara otomatis membaca folder ini (baik di parent theme maupun child theme). Anda tidak perlu menulis kode JavaScript React / @wordpress/blocks untuk membuat custom block!

Standar Docblock Komponen

Setiap file komponen layout wajib mendeklarasikan metadata pada blok komentar (docblock) di awal file:

@xionic-component: Nama ramah komponen yang muncul di antarmuka editor.
@xionic-prop: Properti input yang akan dirender sebagai kontrol di Gutenberg Block Inspector atau Layout Builder.

Sintaksis `@xionic-prop`

Format deklarasi prop:

TEXT

@xionic-prop  [nama_key] | [tipe_field] | [Label Kontrol] | [Nilai Default] | [Opsi JSON (Opsional)]

Tipe field yang didukung:

text: Input teks satu baris.
textarea: Area teks multi-baris.
color: Pemilih warna (Color Picker).
select: Pilihan dropdown (memerlukan parameter opsi JSON).
switch: Saklar aktif/nonaktif (1 atau 0).
image: Pengunggah gambar media WordPress.

Contoh Implementasi Komponen Section

Berikut adalah contoh lengkap file komponen templates/components/layouts/hero-showcase.php:

PHP

<?php
/**
 * Hero Showcase Section
 *
 * @xionic-component  Hero Showcase
 *
 * — Props Konfigurasi —
 * @xionic-prop  title       | text       | Judul Utama      | Selamat Datang di Situs Kami
 * @xionic-prop  subtitle    | textarea   | Sub Judul        | Deskripsi singkat pengantar...
 * @xionic-prop  bg_color    | color      | Warna Latar      | #ffffff
 * @xionic-prop  btn_text    | text       | Teks Tombol      | Pelajari Selengkapnya
 * @xionic-prop  btn_url     | text       | Tautan Tombol    | #
 * @xionic-prop  align       | select     | Perataan         | center | {"left":"Kiri","center":"Tengah","right":"Kanan"}
 * @xionic-prop  show_btn    | switch     | Tampilkan Tombol | 1
 */

if (!defined('ABSPATH')) {
    exit;
}

// Pastikan variabel $args tersedia (dioper oleh Gutenberg block atau Layout Builder)
if (!isset($args) || !is_array($args)) {
    $args = array();
}
$p = $args;

// Helper pembaca prop dengan nilai default
$title    = $p['title'] ?? 'Selamat Datang di Situs Kami';
$subtitle = $p['subtitle'] ?? 'Deskripsi singkat pengantar...';
$bg_color = $p['bg_color'] ?? '#ffffff';
$align    = $p['align'] ?? 'center';
?>
<section class="xionic-hero-section py-5 text-<?php echo esc_attr($align); ?>" style="background-color: <?php echo esc_attr($bg_color); ?>;">
    <div class="container">
        <h1 class="display-4 fw-bold"><?php echo esc_html($title); ?></h1>
        <p class="lead text-muted"><?php echo esc_html($subtitle); ?></p>
        <?php if (!empty($p['show_btn']) && $p['show_btn'] === '1') : ?>
            <a href="<?php echo esc_url($p['btn_url'] ?? '#'); ?>" class="btn btn-primary mt-3">
                <?php echo esc_html($p['btn_text'] ?? 'Klik Disini'); ?>
            </a>
        <?php endif; ?>
    </div>
</section>

Registrasi Otomatis ke Gutenberg

Saat fitur Gutenberg Blocks aktif di Features Manager, framework kelas SectionBlocks akan:

Memindai seluruh file di direktori templates/components/layouts/.
Mengekstrak docblock @xionic-component dan @xionic-prop.
Mendaftarkan dynamic block type WordPress xionic/{slug} ke kategori “Xionic Section”.
Komponen yang berasal dari Child Theme otomatis diberi tanda khusus ✦ di panel blok Gutenberg untuk mempermudah identifikasi.

# Layout Builder & Ekosistem Gutenberg Blocks

# Struktur Direktori Komponen Layout

# Standar Docblock Komponen

# Sintaksis @xionic-prop

# Contoh Implementasi Komponen Section

# Registrasi Otomatis ke Gutenberg