Block Restrictions & Blank Template untuk Landing Page

Membatasi Block Types per Environment

Konsep

WordPress memungkinkan kita membatasi block types mana yang boleh dipakai berdasarkan environment:

• Page/Post editor — editing konten blog/page biasa
• Full Site Editor (FSE) — editing template keseluruhan

Filter: allowed_block_types_all

// functions.php
add_filter('allowed_block_types_all', 'myAllowedBlocks', 10, 2);

function myAllowedBlocks($allowed_block_types, $editor_context) {
    // Jika sedang di page/post editor
    if (!empty($editor_context->post)) {
        return $allowed_block_types; // Izinkan semua block
    }
    
    // Jika sedang di full site editor template
    return array(
        'ourBlockTheme/header',
        'ourBlockTheme/footer',
        'ourBlockTheme/banner',
        'ourBlockTheme/slideshow',
        'ourBlockTheme/eventsAndBlogs',
        'ourBlockTheme/singlePost',
        'ourBlockTheme/page'
        // ... daftar block yang diizinkan
    );
}

Parameter

Parameter	Fungsi
$allowed_block_types	Array block types yang diizinkan (default: semua)
$editor_context	Object konteks editor
$editor_context->post	Object post (ada jika di page/post editor, null jika di FSE)

Logika

$editor_context->post ada?
  ├── YA  → Sedang di page/post editor → return semua block
  └── TIDAK → Sedang di FSE → return restricted array

---

Membatasi Berdasarkan Post Type

Contoh: Hanya untuk Professor

function myAllowedBlocks($allowed_block_types, $editor_context) {
    if (!empty($editor_context->post)) {
        // Hanya restrict untuk post type "professor"
        if ($editor_context->post->post_type === 'professor') {
            return array(
                'core/paragraph',
                'core/heading',
                'core/list',
                'core/image'
            );
        }
        return $allowed_block_types; // Post type lain = semua block
    }
    
    // FSE = custom blocks saja
    return array(
        'ourBlockTheme/header',
        'ourBlockTheme/footer',
        // ...
    );
}

Core Block Names

Block bawaan WordPress menggunakan prefix core/:

Block	Name
Paragraph	core/paragraph
Heading	core/heading
List	core/list
Image	core/image
Button	core/button
Table	core/table

---

Blank Template untuk Landing Pages

Konsep

Buat template kosong — tanpa header, tanpa footer — yang bisa dipilih per halaman. Cocok untuk landing pages atau halaman custom yang unik.

Langkah 1: Buat Template File

templates/emptycanvas.html

<!-- wp:post-content /-->

Hanya satu block: wp:post-content — menampilkan konten yang ditulis user di editor.

Langkah 2: Daftarkan di theme.json

{
  "version": 2,
  "customTemplates": [
    {
      "name": "emptycanvas",
      "postTypes": ["page"],
      "title": "Empty Canvas"
    }
  ],
  "settings": {
    // ... settings lainnya
  }
}

Property	Fungsi
name	Nama file template (tanpa .html)
postTypes	Post types yang bisa menggunakan template ini
title	Judul yang tampil di UI pemilih template

Langkah 3: Pilih Template per Halaman

1. Buat/edit halaman di WordPress
2. Di sidebar kanan → tab Page → bagian Template
3. Klik → pilih "Empty Canvas"
4. Update/publish

---

Cara Kerja

Halaman dengan template "Empty Canvas":
  ┌─────────────────────────────────┐
  │ (TANPA header)                  │
  │                                 │
  │ Konten yang ditulis user:       │
  │   - Banner block                │
  │   - Heading                     │
  │   - Events & Blogs              │
  │   - Slideshow                   │
  │   - dll.                        │
  │                                 │
  │ (TANPA footer)                  │
  └─────────────────────────────────┘

User bisa INSERT block apapun yang diinginkan:
  ✅ Custom blocks (banner, slideshow, header, footer)
  ✅ Core blocks (paragraph, heading, image)
  → Fleksibilitas TOTAL per halaman

Kekuatan Template Blank

• User bisa menambahkan header block secara manual jika diinginkan
• User bisa memilih block per halaman — berbeda dari template standar
• Tidak ada batasan — user bisa membangun halaman dari nol
• Cocok untuk landing pages, promo pages, atau halaman unik lainnya

---

Extra Credit: Extend Block Options

Ide pengembangan lebih lanjut:

1. Header block → JSXBlock — tambahkan opsi toggle logo (show/hide via checkbox)
2. Banner block — tambahkan dropdown untuk pilihan overlay color
3. Per-page block restriction — batasi block berbeda per post type

// Contoh: Header block dengan opsi
new JSXBlock("header"); // Ubah dari PlaceholderBlock ke JSXBlock

// header.js
attributes: {
  showLogo: { type: "boolean", default: true }
}
// InspectorControls dengan ToggleControl untuk show/hide logo

---

Rangkuman Chapter 27 — Semua Fitur Block Theme

Block Types yang Dibuat

Block	Tipe	Interaksi
Banner	JSXBlock	Background image, InnerBlocks
Generic Heading	JSXBlock	RichText, size S/M/L
Generic Button	JSXBlock	RichText, link picker, color picker
Slideshow	JSXBlock	Container untuk slides
Slide	JSXBlock	Background image (= banner copy)
Events & Blogs	PlaceholderBlock	PHP only
Header	PlaceholderBlock	PHP only
Footer	PlaceholderBlock	PHP only
Single Post	PlaceholderBlock	PHP only
Page	PlaceholderBlock	PHP only
Blog Index	PlaceholderBlock	PHP only
Program Archive	PlaceholderBlock	PHP only
Single Program	PlaceholderBlock	PHP only
Single Professor	PlaceholderBlock	PHP only
My Notes	PlaceholderBlock	PHP only

Konsep Utama yang Dipelajari

No	Konsep
1	Full Site Editing (FSE) & block theme structure
2	JSX conversion (className, style objects)
3	InnerBlocks & nested blocks
4	RichText & BlockControls toolbar
5	theme.json (colors, typography, layout)
6	LinkControl & Popover
7	InspectorControls & ColorPalette
8	PHP render callback (no HTML in database)
9	MediaUpload & apiFetch
10	wp_localize_script (PHP → JS data transfer)
11	PlaceholderBlock class
12	Multiple slideshows fix
13	Template system & themeimage attribute
14	Block restrictions per environment
15	Blank template for landing pages
16	WP 6.4 singular content change