Practice: Migrasi Placeholder Blocks & Edit.js Terpisah

Gambaran Umum

Pelajaran ini mempraktikkan migrasi placeholder block (header, events-and-blogs, dll) ke pendekatan modern, plus memperkenalkan file edit.js terpisah dan useBlockProps untuk API Version 3.

Memisahkan Edit ke File Terpisah

Untuk block yang editor JSX-nya panjang, pisahkan ke file edit.js:

src/footer/edit.js

export default function Edit() {
  return (
    <div className="our-placeholder-block">University Footer Placeholder</div>
  );
}

src/footer/index.js (diperbarui)

import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit";

registerBlockType(metadata.name, {
  edit: Edit,
});

useBlockProps (API Version 3)

Dengan apiVersion: 3 di block.json, WordPress membutuhkan wrapper div khusus agar block bisa diklik/diseleksi di editor.

Masalah Tanpa useBlockProps

• Block tidak bisa dipilih saat diklik
• Tidak ada border biru saat selected
• Panel kanan tidak mengenali block yang aktif

Solusi: useBlockProps

import { useBlockProps } from "@wordpress/block-editor";

export default function Edit() {
  const blockProps = useBlockProps();
  
  return (
    <div {...blockProps}>
      <div className="our-placeholder-block">University Footer Placeholder</div>
    </div>
  );
}

Penjelasan:

• useBlockProps() mengembalikan object berisi class name & event handler yang WordPress butuhkan
• {...blockProps} = spread operator, memasukkan semua props ke wrapper div
• Wrapper div ini yang membuat WordPress bisa mendeteksi klik & menampilkan border seleksi

Proses Migrasi Placeholder Block (Header)

Langkah 1: Nonaktifkan block lama

// functions.php
// new PlaceholderBlock("header");  ← comment out

Langkah 2: Daftarkan block baru

function ourNewBlocks() {
  register_block_type_from_metadata(__DIR__ . "/build/footer");
  register_block_type_from_metadata(__DIR__ . "/build/header");  // ← tambah ini
}

Langkah 3: Duplikasi folder

Di VS Code:

1. Klik folder src/footer/ → Ctrl+C → Ctrl+V → Rename jadi header

Langkah 4: Edit file di folder header

block.json:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "ourblocktheme/header",
  "title": "Fictional University Header",
  "editorScript": "file:./index.js",
  "render": "file:./render.php"
}

edit.js:

import { useBlockProps } from "@wordpress/block-editor";

export default function Edit() {
  const blockProps = useBlockProps();
  return (
    <div {...blockProps}>
      <div className="our-placeholder-block">University Header Placeholder</div>
    </div>
  );
}

render.php: Copy dari our-blocks/header.php

Proses Migrasi Events-and-Blogs Block

Langkah identik dengan header:

1. Comment out di functions.php: // new PlaceholderBlock("eventsandblogs");
2. Tambah: register_block_type_from_metadata(__DIR__ . "/build/eventsandblogs");
3. Duplikasi folder footer → rename eventsandblogs
4. Edit block.json (name & title)
5. Edit edit.js (teks placeholder)
6. Copy render.php dari our-blocks/eventsandblogs.php

Daftar Semua Placeholder Blocks yang Perlu Dimigrasi

Block Name	Sumber PHP Lama	Status
footer	our-blocks/footer.php	✅ Done
header	our-blocks/header.php	✅ Done
eventsandblogs	our-blocks/eventsandblogs.php	✅ Done
search	our-blocks/search.php	Homework
archive	our-blocks/archive.php	Homework
single-post	our-blocks/single-post.php	Homework
page	our-blocks/page.php	Homework
(dll.)	...	Homework

Catatan: Semua placeholder block mengikuti pola yang sama. Downloadable zip tersedia sebagai "homework done" version.

Catatan Khusus: Search Block render.php

Untuk search block, ada penyesuaian tambahan — hapus while loop dan the_post() karena WP 6.4+ sudah menjalankan main query otomatis untuk block theme singular content:

<?php
// render.php untuk search block
// TANPA while loop dan the_post()
page_banner(array(
  'title' => 'Search Results',
  'subtitle' => 'You searched for &ldquo;' . esc_html(get_search_query(false)) . '&rdquo;'
));
?>

<div class="container">
  <!-- konten search results -->
</div>

Ringkasan Pola Migrasi

Untuk SETIAP placeholder block:

1. functions.php: comment out → new PlaceholderBlock("xxx")
2. functions.php: tambah → register_block_type_from_metadata(__DIR__ . "/build/xxx")
3. Duplikasi folder di src/ → rename
4. block.json: update name & title
5. edit.js: update placeholder text + useBlockProps wrapper
6. render.php: copy dari our-blocks/xxx.php
7. Hapus file lama di our-blocks/ folder