Category: WordPress

wp_register_block_types_from_metadata_collection() เป็นฟังก์ชันใหม่ที่ถูกเพิ่มเข้ามาใน WordPress 6.8 เพื่อช่วยให้นักพัฒนาสามารถลงทะเบียน Block Type หลายๆ ตัวพร้อมกันได้ในครั้งเดียว โดยการอ่านข้อมูลจากไฟล์ block.json ที่อยู่ในไดเรกทอรีที่กำหนด

หัวใจหลักของฟังก์ชันนี้คือการลดความซ้ำซ้อนและเพิ่มประสิทธิภาพในการจัดการโค้ด แทนที่จะต้องเรียกใช้ฟังก์ชัน register_block_type() ซ้ำๆ กันสำหรับทุกบล็อกที่เราสร้าง ตอนนี้เราสามารถใช้ฟังก์ชันนี้เพียงครั้งเดียวเพื่อจัดการบล็อกทั้งหมดที่อยู่ในโฟลเดอร์เดียวกันได้เลย

ทำไมถึงควรใช้ฟังก์ชันนี้?

• โค้ดสะอาดและจัดการง่าย: ไม่ต้องเขียน register_block_type() หลายบรรทัด ทำให้ไฟล์ functions.php หรือไฟล์ปลั๊กอินหลักของคุณสั้นกระชับและอ่านง่ายขึ้น
• ลดความผิดพลาด: ลดโอกาสที่จะลืมลงทะเบียนบล็อกบางตัวไปเมื่อคุณมีบล็อกจำนวนมาก
• สะดวกในการพัฒนา: เมื่อต้องการเพิ่มบล็อกใหม่ คุณเพียงแค่สร้างโฟลเดอร์ใหม่พร้อมไฟล์ block.json ภายในไดเรกทอรีหลัก ฟังก์ชันนี้จะทำการลงทะเบียนให้โดยอัตโนมัติ ไม่ต้องกลับไปแก้ไขโค้ด PHP เพื่อเพิ่มการลงทะเบียนใหม่

วิธีการใช้งานและตัวอย่างประกอบ

สมมติว่าเรากำลังสร้างปลั๊กอินชื่อ “My Awesome Blocks” และต้องการสร้าง Custom Block 2 ตัวคือ “Team Member” และ “Testimonial”

ขั้นตอนที่ 1: จัดโครงสร้างโฟลเดอร์

ก่อนอื่น เราต้องจัดโครงสร้างโฟลเดอร์ของปลั๊กอินให้รองรับการทำงานของฟังก์ชันนี้ โครงสร้างที่แนะนำคือการมีไดเรกทอรีหลักสำหรับเก็บทุกบล็อก (เช่น blocks/) และภายในนั้นจะมีโฟลเดอร์ย่อยสำหรับแต่ละบล็อก

โครงสร้างไฟล์ของปลั๊กอินจะเป็นแบบนี้:

my-awesome-blocks/
│
├── my-awesome-blocks.php // <– ไฟล์หลักของปลั๊กอิน
│
└── blocks/ // <– ไดเรกทอรีสำหรับเก็บทุกบล็อก
│
├── team-member/ // <– โฟลเดอร์ของบล็อกแรก
│ ├── block.json // <– ไฟล์ metadata ของบล็อก
│ ├── edit.js // … ไฟล์อื่นๆ ของบล็อก
│ └── style.css
│
└── testimonial/ // <– โฟลเดอร์ของบล็อกที่สอง
├── block.json // <– ไฟล์ metadata ของบล็อก
├── edit.js // … ไฟล์อื่นๆ ของบล็อก
└── style.css

ขั้นตอนที่ 2: สร้างไฟล์ block.json

ในแต่ละโฟลเดอร์ของบล็อก (team-member/ และ testimonial/) เราจะต้องมีไฟล์ block.json ซึ่งเป็นไฟล์ที่เก็บข้อมูลสำคัญทั้งหมดของบล็อกนั้นๆ

ไฟล์ blocks/team-member/block.json:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-awesome-blocks/team-member",
  "title": "Team Member",
  "category": "widgets",
  "icon": "admin-users",
  "description": "A block to display a team member's profile.",
  "editorScript": "file:./edit.js",
  "style": "file:./style.css"
}

ไฟล์ blocks/testimonial/block.json:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-awesome-blocks/testimonial",
  "title": "Testimonial",
  "category": "widgets",
  "icon": "format-quote",
  "description": "A block to display a customer testimonial.",
  "editorScript": "file:./edit.js",
  "style": "file:./style.css"
}

ขั้นตอนที่ 3: ใช้ wp_register_block_types_from_metadata_collection()

ตอนนี้มาถึงขั้นตอนสำคัญ คือการเขียนโค้ด PHP ในไฟล์ปลั๊กอินหลัก (my-awesome-blocks.php) เพื่อเรียกใช้ฟังก์ชันนี้

เราจะเพิ่มโค้ดนี้ลงไปในไฟล์ my-awesome-blocks.php:

<?php
/**
 * Plugin Name: My Awesome Blocks
 * Description: A plugin to demonstrate bulk block registration.
 * Version: 1.0
 * Author: Your Name
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

/**
 * Register all blocks from the 'blocks' directory.
 */
function my_awesome_blocks_register_all_blocks() {
    // ตรวจสอบว่าฟังก์ชัน wp_register_block_types_from_metadata_collection มีอยู่จริงหรือไม่
    // (เพื่อรองรับ WordPress เวอร์ชันเก่ากว่า 6.8)
    if ( function_exists( 'wp_register_block_types_from_metadata_collection' ) ) {
        // ทำการลงทะเบียนบล็อกทั้งหมดที่อยู่ในไดเรกทอรี 'blocks'
        // ฟังก์ชันจะสแกนหาโฟลเดอร์ย่อยที่มีไฟล์ block.json อยู่ข้างใน
        $result = wp_register_block_types_from_metadata_collection( __DIR__ . '/blocks' );

        // (Optional) สามารถตรวจสอบผลลัพธ์เพื่อดีบักได้
        if ( is_wp_error( $result ) ) {
            error_log( 'Error registering blocks: ' . $result->get_error_message() );
        }
    }
}

// Hook ฟังก์ชันของเราเข้ากับ 'init' action
add_action( 'init', 'my_awesome_blocks_register_all_blocks' );

คำอธิบายโค้ด

1. add_action( 'init', ... ): เราทำการลงทะเบียนบล็อกบน init hook ซึ่งเป็นช่วงเวลาที่เหมาะสมที่สุดสำหรับการลงทะเบียน Post Type, Taxonomy และ Block Type ต่างๆ
2. if ( function_exists( ... ) ): เป็นการปฏิบัติที่ดีในการตรวจสอบว่าฟังก์ชันที่เราจะเรียกใช้นั้นมีอยู่จริงหรือไม่ เพื่อป้องกันข้อผิดพลาด (Fatal Error) หากปลั๊กอินนี้ถูกเปิดใช้งานบน WordPress เวอร์ชันที่เก่ากว่า 6.8 ซึ่งยังไม่มีฟังก์ชันนี้
3. wp_register_block_types_from_metadata_collection( __DIR__ . '/blocks' ): นี่คือส่วนสำคัญที่สุด
   • __DIR__ . '/blocks': เราส่ง path แบบเต็มไปยังไดเรกทอรี blocks/ ของเราเป็นพารามิเตอร์
   • ฟังก์ชันนี้จะเข้าไปในโฟลเดอร์ blocks/ แล้วสแกนหาโฟลเดอร์ย่อยทั้งหมด (team-member, testimonial)
   • จากนั้นจะมองหาไฟล์ block.json ในแต่ละโฟลเดอร์ย่อยนั้น แล้วทำการลงทะเบียนบล็อกให้โดยอัตโนมัติ เสมือนกับการที่เราเรียก register_block_type('path/to/team-member') และ register_block_type('path/to/testimonial') เองเลย

เพียงเท่านี้ เมื่อคุณเปิดใช้งานปลั๊กอิน “My Awesome Blocks” ทั้งบล็อก “Team Member” และ “Testimonial” ก็จะพร้อมให้ใช้งานใน Block Editor ทันที และในอนาคตหากคุณต้องการเพิ่มบล็อก “Service Box” คุณก็แค่สร้างโฟลเดอร์ service-box พร้อมไฟล์ block.json ข้างใน โดยไม่ต้องแก้ไขไฟล์ my-awesome-blocks.php อีกเลย!