Eksperimen FSE: Menyulap List Block Menjadi Card Semantik ol/li by Rachmat Gumilar

Bagi pengejar HTML Semantic dan Clean Code di ekosistem Full Site Editing (FSE) WordPress, membuat barisan Card Process (Langkah-demi-Langkah) yang statis sering kali berbenturan dengan keterbatasan editor. Secara bawaan, Group Block tidak menyediakan opsi elemen <ol> atau <ul>, sementara List Block dikunci rapat sehingga tidak bisa dimasukkan blok visual lain di dalamnya.

Solusi cerdasnya adalah membalik logikanya: Kita tetap menggunakan List Block bawaan agar kodenya 100% semantik, lalu kita rombak total wujud visualnya menjadi Card horizontal modern menggunakan kekuatan Utility CSS.

Berikut adalah panduan langkah demi langkah penerapannya:

Langkah 1: Menyusun Struktur List di Editor

Buka Editor Halaman WordPress Anda.
Tambahkan blok List (/list).
Pada toolbar atas blok, ubah tipenya menjadi Ordered List (ikon Angka / <ol>) agar berurutan.
Tuliskan teks/kalimat poin-poin proses Anda di dalam list item tersebut (misal: Step 1, Step 2, Step 3, Step 4).

Langkah 2: Menyuntikkan Class Kustom

Klik Induk dari List Block tersebut (bukan per item teksnya. Pastikan di List View Anda memilih tag <ol> terluar).
Buka panel pengaturan blok di sebelah kanan (Sidebar), lalu gulir ke paling bawah dan buka menu drop-down Advanced.
Pada kolom Additional CSS Classes, masukkan nama class berikut: goblocks-process-card
Simpan atau perbarui halaman Anda.

Langkah 3: Memasang Kode CSS Kustom

Langkah terakhir adalah memasukkan kode CSS di bawah ini. Anda bisa memasukkannya melalui Global Styles Site Editor (Ikon lingkaran setengah hitam-putih -> Additional CSS) atau melalui fitur kustomisasi CSS tema Anda.

Kode yang saya pakai dirancang tanpa menggunakan !important untuk menjaga efisiensi kode, menggunakan warna aksen ungu modern (#330066), serta dilengkapi efek hover interaktif dan ikon otomatis.

Hasil Akhir & Kelebihan Metode Ini

Saat halaman dimuat di sisi pembaca (frontend), struktur HTML akan tetap murni menggunakan struktur baku <ol> dan <li>. Hal ini sangat disukai oleh mesin pencari (SEO), ramah terhadap screen reader (aksesibilitas), namun tetap menyuguhkan visual Card horizontal yang dinamis, interaktif, dan modern saat disentuh kursor mouse.

Sumber: https://rahmatgumilar.net/ekperimental/html-semantic-ol/

/* ==========================================================================
   GOBLOCKS EXPERIMENTAL: SEMANTIC HTML LIST TO HORIZONTAL CARDS (NO !IMPORTANT)
   ========================================================================== */

/* 1. MENGUBAH INDUK LIST (OL) MENJADI GRID HORIZONTAL */
body ol.wp-block-list.goblocks-process-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    list-style-type: none;
    padding-left: 0;
    margin: 2rem 0;
}

/* 2. MENYULAP LIST ITEM (LI) MENJADI BENTUK CARD */
body ol.wp-block-list.goblocks-process-card li {
    background-color: #F8FAFC; 
    border: 1px solid #E2E8F0; 
    border-radius: 16px; 
    padding: 28px 24px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease-in-out; /* Transisi animasi halus */
    cursor: pointer;
}

/* 3. EFEK HOVER: CARD BERUBAH MENJADI UNGU DENGAN BAYANGAN PENDAR */
body ol.wp-block-list.goblocks-process-card li:hover {
    transform: translateY(-6px); /* Card terangkat sedikit ke atas */
    background-color: #FFFFFF;
    border-color: #330066; /* Border berubah menjadi Ungu */
    /* Efek bayangan halus berwarna ungu */
    box-shadow: 0 12px 20px -3px rgba(51, 0, 102, 0.15), 0 4px 6px -2px rgba(51, 0, 102, 0.05);
}

/* 4. MEMBUAT PENOMORAN OTOMATIS CSS UNTUK TEKS LANGKAH */
body ol.wp-block-list.goblocks-process-card {
    counter-reset: goblocks-counter;
}

body ol.wp-block-list.goblocks-process-card li::before {
    counter-increment: goblocks-counter;
    content: "Langkah " counter(goblocks-counter);
    font-weight: bold;
    color: #330066; /* Warna teks penomoran langkah menjadi Ungu */
    font-size: 0.85rem;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 5. MENYUNTIKKAN IKON DI ATAS TEKS PENOMORAN */
body ol.wp-block-list.goblocks-process-card li::after {
    content: "📌"; /* Silakan ganti emoji ini sesuai kebutuhan visual Anda */
    font-size: 1.5rem;
    margin-bottom: 12px;
    display: block;
    order: -1; /* Memaksa elemen ikon berada di posisi paling atas di dalam card */
}