ThemesCorners
Blog
11 menit bacaoleh ThemesCorners

Block Bindings & Patterns WordPress: Praktik Terbaik 2026

Cara memakai Block Bindings API dan pattern di theme.json sesuai rancangan tim inti WordPress — tanpa membuat diri Anda terkurung sendiri.

Block Bindings API hadir di WordPress 6.5 dan diam-diam menjadi fitur authoring terpenting dalam beberapa tahun. Per WordPress 6.8 sudah stabil, terdokumentasi rapi, dan didukung semua tema modern — termasuk milik kami. Tulisan ini adalah hal-hal yang kami harap seseorang sampaikan saat kami mulai migrasi.

Apa sebenarnya yang dipecahkan block bindings

Block binding adalah kontrak antara atribut sebuah block dan sumber data. Block-nya tetap generic — core/paragraph, core/image, core/heading — dan binding membuat isinya datang dari tempat lain: post meta, custom field, panel pengaturan, API.

Cara lama untuk ini adalah membuat block kustom dengan rendering serverSide. Rapuh. Dengan binding, preview editor, front-end, dan transformer block pattern semuanya memakai sumber data yang sama secara otomatis.

Sumber binding minimal

Di plugin atau functions.php:

add_action('init', function () {
    register_block_bindings_source('themescorners/author-bio', [
        'label' => __('Bio penulis', 'themescorners'),
        'get_value_callback' => function ($args, $block) {
            $userId = get_the_author_meta('ID');
            return get_user_meta($userId, 'bio', true);
        },
    ]);
});

Di block pattern atau konten:

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"themescorners/author-bio"}}}} -->
<p>placeholder bio</p>
<!-- /wp:paragraph -->

Selesai. Paragraf menampilkan bio penulis di front-end dan menunjukkannya (dengan edit terkunci) di editor.

Praktik terbaik #1 — bind, jangan bikin block kustom

Setiap kali Anda ingin memanggil registerBlockType, tanyakan dulu: bisakah ini jadi core/group dengan binding? Dari pengalaman kami pertanyaan itu mematikan sekitar 70% block kustom. Lebih sedikit kode kustom, lebih sedikit risiko editor, kompatibilitas pattern penuh.

Praktik terbaik #2 — jaga callback di bawah 1ms

get_value_callback berjalan sekali per binding per render. Di loop 20 post dengan 3 binding masing-masing, itu 60 panggilan. Kalau tiap panggilan memanggil get_post_meta() tanpa caching, Anda menambah 60 query SQL ke satu halaman. Cache agresif:

'get_value_callback' => function ($args, $block) {
    static $cache = [];
    $postId = get_the_ID();
    return $cache[$postId] ??= get_post_meta($postId, '_tc_price', true);
},

Praktik terbaik #3 — pakai theme.json untuk pattern, jangan PHP

Tahun 2026, tempat resmi untuk mengirim pattern adalah theme.json plus file /patterns/*.php. Lewati register_block_pattern() di PHP kecuali Anda benar-benar butuh kebutuhan dinamis.

// patterns/hero-with-cta.php
/**
 * Title: Hero with CTA
 * Slug: themescorners/hero-with-cta
 * Categories: featured
 * Block Types: core/post-content
 */
?>
<!-- wp:cover {"url":"..."} -->
...
<!-- /wp:cover -->

File terdaftar otomatis, dapat diterjemahkan, dan terlihat di inserter. Tanpa hook PHP.

Praktik terbaik #4 — versi pattern Anda

Ketika Anda mengubah pattern, setiap halaman yang menyisipkannya tetap menyimpan markup block serialisasi yang lama. Untuk migrasi bersih, perlakukan pattern seperti migrasi database:

  1. Kirim pattern baru dengan slug baru (hero-v2).
  2. Tambahkan migration di block.json untuk memetakan ulang nama block lama bila strukturnya berubah.
  3. Sembunyikan slug lama dari inserter dengan filter block_pattern_categories setelah Anda siap.
  4. Jangan hapus file pattern lama untuk setidaknya satu major release — halaman yang masih mereferensinya akan diam-diam kehilangan markup.

Praktik terbaik #5 — pakai templateLock pada pattern untuk editor

Kalau pattern merepresentasikan tata letak tetap (mis. seksi fitur 3 kolom), set "templateLock":"all" pada grup pembungkusnya. Editor bisa mengubah teks dan gambar tetapi tidak bisa merusak tata letak. Mengurangi tiket support secara signifikan.

Apa selanjutnya

WordPress 6.9 (saat ini beta) menambahkan typed binding sources — callback Anda mendeklarasikan tipe data (string, image, url) dan editor otomatis memakai UI input yang tepat. Kalau Anda mengirim binding hari ini, struktur sumber Anda sehingga migrasi ke 6.9 cukup satu kunci per sumber. Field-nya adalah "type", di samping "label".

Bacaan lanjutan

Artikel terkait