Studi Kasus Penerapan HTML Semantic ol (Ordered List) atau ul (Unordered List)

Membuat kumpulan Card proses langkah-demi-langkah (How-To / Our Process)

Write a heading that captivates your audience

  1. Lorem ipsum dolor sit amet, commodo erat adipiscing elit. Sed do eiusmod ut tempor incididunt ut labore et dolore.
  2. Integer enim risus, suscipit eu iaculis sed, ullamcorper at metus. Venenatis nec dictum magna eu congue velit.
  3. Aliquam tempus mi nulla porta luctus. Sed non neque at lectus bibendum blandit. Morbi fringilla sapien libero.
  4. Duis enim elit, porttitor id feugiat at, blandit at erat. Proin varius libero sit amet tortor volutpat diam laoreet.

Panduan Eksperimen FSE: Menyulap List Block Menjadi Card Semantik ol/li Tanpa Plugin seperti hasil contoh di atas.

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

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

Langkah 2: Menyuntikkan Class Kustom

  1. Klik Induk dari List Block tersebut (bukan per item teksnya. Pastikan di List View Anda memilih tag <ol> terluar).
  2. Buka panel pengaturan blok di sebelah kanan (Sidebar), lalu gulir ke paling bawah dan buka menu drop-down Advanced.
  3. Pada kolom Additional CSS Classes, masukkan nama class berikut: goblocks-process-card
  4. 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 ini dirancang tanpa menggunakan !important untuk menjaga efisiensi kode, menggunakan warna aksen ungu modern (#330066), serta dilengkapi efek hover interaktif dan ikon otomatis.

/* ==========================================================================
   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 */
}

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.

Semoga bermanfaat….