PlaceholderBlock Class, Events & Blogs, Header & Footer Block

Konsep PlaceholderBlock

Tidak semua block membutuhkan interaksi JSX yang kompleks. Untuk block yang hanya perlu PHP render tanpa opsi editor, kita buat class yang lebih sederhana: PlaceholderBlock.

---

Class PlaceholderBlock

class PlaceholderBlock {
    function __construct($name) {
        $this->name = $name;
        add_action('init', [$this, 'onInit']);
    }
    
    function onInit() {
        wp_register_script(
            $this->name,
            get_stylesheet_directory_uri() . "/our-blocks/{$this->name}.js",
            array('wp-blocks', 'wp-editor')
        );
        
        register_block_type("ourBlockTheme/{$this->name}", array(
            'editor_script' => $this->name,
            'render_callback' => [$this, 'ourRenderCallback']
        ));
    }
    
    function ourRenderCallback($attributes, $content) {
        ob_start();
        require get_theme_file_path("/our-blocks/{$this->name}.php");
        return ob_get_clean();
    }
}

Perbedaan dengan JSXBlock

Fitur	JSXBlock	PlaceholderBlock
JSX processing	✅ Ya (perlu build/transpile)	❌ Tidak
JS file lokasi	build/{name}.js	our-blocks/{name}.js
Render callback	Opsional	Wajib (selalu ada)
Editor interaksi	RichText, MediaUpload, dll.	Hanya placeholder text
Build step	Perlu npm run start	Tidak perlu

---

JavaScript Tanpa JSX

Untuk PlaceholderBlock, JavaScript-nya sangat sederhana — tidak butuh JSX atau build step:

// our-blocks/eventsAndBlogs.js
wp.blocks.registerBlockType("ourBlockTheme/eventsAndBlogs", {
  title: "Events and Blogs",
  edit: function () {
    return wp.element.createElement(
      "div",
      { className: "our-placeholder-block" },
      "Events and Blogs Placeholder"
    );
  },
  save: function () {
    return null;  // 100% PHP rendering!
  }
});

Poin Penting

Detail	Penjelasan
wp.element.createElement	Alternatif JSX — vanilla JS
save: return null	Tidak ada HTML di database, 100% PHP render
Tidak perlu build	File JS langsung dari our-blocks/, bukan build/
className: "our-placeholder-block"	Class untuk styling placeholder di editor

---

Events and Blogs Block

Setup

// functions.php
new PlaceholderBlock("eventsAndBlogs");

File our-blocks/eventsAndBlogs.php

Copy PHP/HTML dari front-page.php theme tradisional — bagian yang menampilkan upcoming events dan blog posts terbaru.

<?php
// Copy dari front-page.php theme tradisional
// Bagian events listing dan recent blog posts
// Termasuk WP_Query untuk events dan recent posts
?>

<div class="full-width-split group">
  <div class="full-width-split__one">
    <div class="full-width-split__inner">
      <h2 class="headline headline--small-plus t-center">Upcoming Events</h2>
      <?php
      // WP_Query untuk events
      $homepageEvents = new WP_Query(array(
          'posts_per_page' => 2,
          'post_type' => 'event',
          // ... filter lainnya
      ));
      while ($homepageEvents->have_posts()) {
          $homepageEvents->the_post(); ?>
          <!-- Event item HTML -->
      <?php } wp_reset_postdata(); ?>
    </div>
  </div>
  
  <div class="full-width-split__two">
    <div class="full-width-split__inner">
      <h2 class="headline headline--small-plus t-center">From Our Blogs</h2>
      <?php
      // WP_Query untuk blog posts
      $homepagePosts = new WP_Query(array(
          'posts_per_page' => 2,
      ));
      while ($homepagePosts->have_posts()) {
          $homepagePosts->the_post(); ?>
          <!-- Blog post item HTML -->
      <?php } wp_reset_postdata(); ?>
    </div>
  </div>
</div>

Styling Placeholder di Editor (shame.css)

.our-placeholder-block {
  padding: 30px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  font-size: 20px;
  border-radius: 4px;
}

---

Header Block

Setup

// functions.php
new PlaceholderBlock("header");

our-blocks/header.js

wp.blocks.registerBlockType("ourBlockTheme/header", {
  title: "Fictional University Header",
  edit: function () {
    return wp.element.createElement(
      "div",
      { className: "our-placeholder-block" },
      "Header Placeholder"
    );
  },
  save: function () {
    return null;
  }
});

our-blocks/header.php

Copy bagian <header class="site-header"> dari theme tradisional:

<header class="site-header">
  <div class="container">
    <h1 class="school-logo-text float-left">
      <a href="<?php echo esc_url(site_url('/')); ?>">
        <strong>Fictional</strong> University
      </a>
    </h1>
    <!-- Navigation, search, dll. -->
  </div>
</header>

---

Footer Block

Setup

// functions.php
new PlaceholderBlock("footer");

our-blocks/footer.js

wp.blocks.registerBlockType("ourBlockTheme/footer", {
  title: "Fictional University Footer",
  edit: function () {
    return wp.element.createElement(
      "div",
      { className: "our-placeholder-block" },
      "Footer Placeholder"
    );
  },
  save: function () {
    return null;
  }
});

our-blocks/footer.php

Copy bagian <footer class="site-footer"> dari theme tradisional.

---

Catatan tentang Template Parts

WordPress 2022+ memperkenalkan folder parts/ (atau template-parts/) untuk pendekatan resmi. Namun pendekatan PlaceholderBlock lebih fleksibel karena:

• Bisa digunakan di template manapun
• User bisa menambahkan/menghapus header/footer per halaman
• Lebih cocok untuk filosofi "block sebagai building blocks"

---

Ringkasan: Kapan Gunakan Masing-Masing?

Class	Kapan Digunakan
JSXBlock	Block interaktif — RichText, MediaUpload, color picker, link picker
PlaceholderBlock	Block statis — PHP render tanpa opsi editor

Contoh Penggunaan

// JSXBlock — interaktif di editor
new JSXBlock("banner", true);
new JSXBlock("genericHeading");
new JSXBlock("genericButton");

// PlaceholderBlock — PHP only
new PlaceholderBlock("eventsAndBlogs");
new PlaceholderBlock("header");
new PlaceholderBlock("footer");

---

Kesimpulan

Konsep	Penjelasan
PlaceholderBlock	Class PHP sederhana untuk block tanpa interaksi editor
wp.element.createElement	Alternatif JSX — tidak perlu build step
save: return null	100% PHP rendering, tidak ada HTML di database
Header/Footer blocks	PlaceholderBlock yang copy HTML dari theme tradisional
shame.css	File CSS untuk styling placeholder di editor
Template Parts	Pendekatan resmi WP, tapi PlaceholderBlock lebih fleksibel