Starting & Styling Multiple Choice Block Type

Gambaran Umum

Video ini memulai pembuatan block type Multiple Choice Quiz ("Are You Paying Attention?") — dari setup awal, menggunakan WordPress Components, hingga styling dengan SCSS.

---

Setup Awal Block Type

Struktur File

are-you-paying-attention/
  ├── src/
  │   ├── index.js           ← Edit component (admin)
  │   └── index.scss         ← Styling editor
  ├── build/                 ← Auto-generated
  ├── index.php              ← PHP plugin file
  └── package.json

Register Block Type (index.js)

import "./index.scss"
import { TextControl, Flex, FlexBlock, FlexItem, Button, Icon } from "@wordpress/components"

wp.blocks.registerBlockType('ourplugin/are-you-paying-attention', {
  title: 'Are You Paying Attention?',
  icon: 'smiley',
  category: 'common',
  attributes: {
    question: { type: 'string' },
    answers: { type: 'array', default: [''] },
    correctAnswer: { type: 'number', default: undefined }
  },
  edit: EditComponent,
  save: function() {
    return null;  // Dynamic block
  }
});

---

Edit Component — Membangun UI

Konsep: Pisahkan Edit Function

Alih-alih menulis function langsung di edit:, buat function terpisah agar kode lebih bersih:

function EditComponent(props) {
  // ... logic & JSX
  return (
    <div className="paying-attention-edit-block">
      {/* UI di sini */}
    </div>
  );
}

React convention: Nama component harus diawali huruf kapital (PascalCase).

---

WordPress Components

Alih-alih menulis HTML + CSS manual, gunakan WordPress React Components yang sudah distyle:

Import dari @wordpress/components

import { TextControl, Flex, FlexBlock, FlexItem, Button, Icon } from "@wordpress/components"

Catatan: Package ini tidak perlu di-install via npm. @wordpress/scripts akan otomatis melihat di global scope WordPress.

Tambahkan Dependency di PHP

wp_register_script(
  'ournewblocktype',
  plugin_dir_url(__FILE__) . 'build/index.js',
  array('wp-blocks', 'wp-element', 'wp-editor')  // ← Tambah 'wp-editor'
);

TextControl — Input Field dengan Style

<TextControl 
  label="Question:" 
  value={props.attributes.question}
  onChange={updateQuestion}
  style={{ fontSize: "20px" }}
/>

• Otomatis punya styling standar WordPress
• label property otomatis terhubung ke input (accessible)
• onChange di TextControl langsung memberikan value baru (bukan event)

Flex Layout Components

<Flex>
  <FlexBlock>
    {/* Mengambil ruang sebanyak mungkin */}
    <TextControl value={answer} onChange={...} />
  </FlexBlock>
  <FlexItem>
    {/* Hanya mengambil ruang yang dibutuhkan */}
    <Button>
      <Icon icon="star-empty" />
    </Button>
  </FlexItem>
  <FlexItem>
    <Button isLink>Delete</Button>
  </FlexItem>
</Flex>

Component	Perilaku
Flex	Container flexbox
FlexBlock	Anak yang membesar (flex: 1)
FlexItem	Anak yang menyusut ke ukuran minimum
Button	Tombol WordPress (bisa isLink, isPrimary)
Icon	Dashicon WordPress (star-empty, star-filled, dll.)

Button Props

<Button isPrimary>Add another answer</Button>  // Tombol biru WordPress
<Button isLink>Delete</Button>                  // Styling link (underline)

---

Styling dengan SCSS

Import CSS di JavaScript

// Di bagian atas index.js
import "./index.scss"

@wordpress/scripts otomatis:

1. Compile SCSS → CSS
2. Ekstrak ke file terpisah (build/index.css)
3. Zero configuration needed!

File src/index.scss

.paying-attention-edit-block {
  padding: 20px;
  border-radius: 3px;
  border: 1px solid #d6d6d6;
  background-color: #f1f1f1;

  // Nested rule: Star icon
  .mark-as-correct {
    color: #fd7e00;
    cursor: pointer;
    position: relative;
    top: -3px;
    transition: transform 0.3s ease-out;
    
    &:hover {
      transform: scale(1.25) rotate(12deg);
    }
  }

  // Nested rule: Delete button
  .attention-delete {
    color: #f00000;
    position: relative;
    top: -5px;

    &:hover {
      color: #c20000 !important;  // Override WordPress hover
    }
  }
}

Konsep SCSS yang Digunakan:

Fitur	Contoh	Output CSS
Nesting	.parent { .child {} }	.parent .child {}
& (parent selector)	&:hover {}	.attention-delete:hover {}
!important	Untuk override WordPress default styles

Inline Styles di JSX

Untuk satu property saja, gunakan inline style:

<TextControl 
  style={{ fontSize: "20px" }}          // Font size besar untuk question
/>
<p style={{ fontSize: "13px", margin: "20px 0 8px 0" }}>
  Answers:
</p>

JSX CSS Property Names: Gunakan camelCase (fontSize bukan font-size, backgroundColor bukan background-color).

---

Load CSS di PHP

function adminAssets() {
  // Register JavaScript
  wp_register_script('ournewblocktype', plugin_dir_url(__FILE__) . 'build/index.js', array('wp-blocks', 'wp-element', 'wp-editor'));
  
  // Register CSS
  wp_register_style('quizeditcss', plugin_dir_url(__FILE__) . 'build/index.css');
  
  // Register block type dengan kedua asset
  register_block_type('ourplugin/are-you-paying-attention', array(
    'editor_script' => 'ournewblocktype',
    'editor_style' => 'quizeditcss',
    'render_callback' => array($this, 'theHTML')
  ));
}

---

Hasil Akhir UI Editor

┌─────────────────────────────────────────────┐
│  Question: [What color is the sky?       ]  │
│                                             │
│  Answers:                                   │
│  [Blue                    ] ★  Delete       │
│  [Red                     ] ☆  Delete       │
│  [Green                   ] ☆  Delete       │
│                                             │
│  [Add another answer]                       │
└─────────────────────────────────────────────┘