คู่มือการพัฒนาเต็มรูปแบบและขั้นสูงเชิงปฏิบัติสำหรับ WordPress Gutenberg Block Editor

WordPress ตัวแก้ไขบล็อก Gutenberg (Gutenberg Block Editor) ได้ปฏิวัติวิธีการสร้างเนื้อหาโดยนำความยืดหยุ่นและการควบคุมในการสร้างหน้าเว็บมาสู่มือของผู้แก้ไขโดยตรง สำหรับนักพัฒนานี่หมายถึงกระบวนทัศน์การพัฒนาใหม่ทั้งหมดโดยมี React และ JavaScript รุ่นใหม่เป็นแกนหลัก บทความนี้จะเจาะลึกถึงวิธีการสร้างบล็อกที่กำหนดเองตั้งแต่เริ่มต้นและก้าวไปสู่หัวข้อขั้นสูง เช่น การพัฒนาบล็อกไดนามิก การใช้รูปแบบบล็อกต่างๆ โดยมีเป้าหมายเพื่อเป็นแนวทางการพัฒนาที่ครอบคลุมสำหรับคุณ

ทำความเข้าใจกับสถาปัตยกรรมหลักของตัวแก้ไขบล็อก

ตัวแก้ไข Gutenberg ไม่ใช่แอปพลิเคชันเดี่ยวที่รวมเป็นหนึ่งเดียว แต่เป็นระบบนิเวศที่ประกอบด้วยแพ็คเกจอิสระหลายแพ็คเกจ การเข้าใจสถาปัตยกรรมของมันเป็นพื้นฐานสำหรับการพัฒนาอย่างมีประสิทธิภาพ

การแยกตัวแก้ไขออกจากชั้นข้อมูล

อินเตอร์เฟสของตัวแก้ไขเองนั้นแยกออกจากเลเยอร์ข้อมูลของ WordPress @wordpress/editor แพ็คเกจหลักจัดเตรียมคอมโพเนนต์ UI ของตัวแก้ไข ในขณะที่ @wordpress/data แพ็คเกจนำไปใช้การจัดการสถานะคล้าย Redoux การแยกนี้ทำให้นักพัฒนาสามารถมุ่งเน้นที่มุมมองและตรรกะการโต้ตอบของบล็อก ในขณะที่การคงอยู่ของข้อมูลจะถูกจัดการอัตโนมัติโดยกลไกหลักของ WordPress

แนะนำให้อ่าน เชี่ยวชาญ WordPress ประเภทบทความที่กำหนดเอง: คู่มือปฏิบัติฉบับสมบูรณ์ตั้งแต่การสร้างจนถึงการเผยแพร่。

การลงทะเบียนและวงจรชีวิตของบล็อก

แต่ละบล็อกจำเป็นต้องลงทะเบียนผ่าน registerBlockType ฟังก์ชัน ฟังก์ชันนี้รับพารามิเตอร์สองตัว: ชื่อเฉพาะของบล็อก (เช่น my-plugin/my-custom-block) และอ็อบเจกต์ที่ประกอบด้วยข้อมูลการกำหนดค่าทั้งหมดของบล็อก
หลังจากการลงทะเบียน บล็อกจะผ่านวงจรชีวิตต่างๆ เช่น การเริ่มต้น การแสดงผล การแก้ไข การบันทึก เป็นต้น นักพัฒนาส่วนใหญ่กำหนดผ่าน edit 和 save สองฟังก์ชันหลักเพื่อควบคุมการแสดงผลของบล็อกในตัวแก้ไขและในส่วนหน้าเว็บ

UltaHost WordPress โฮสติ้ง

การรับประกันคืนเงินภายใน 30 วัน, แบนด์วิธและฐานข้อมูลไม่จำกัด, การป้องกัน DDoS ฟรี, ซื้อ 3 ปีลดราคา 50%

เข้าถึงหน้าเว็บ

เริ่มต้นสร้างบล็อกที่กำหนดเองแรกของคุณตั้งแต่เริ่มต้น

เราจะสร้างบล็อก “คำแนะนำไฮไลท์” ง่ายๆ ที่อนุญาตให้ผู้ใช้เพิ่มกล่องคำแนะนำที่มีพื้นหลังสีและหัวเรื่อง

ตั้งค่าสภาพแวดล้อมการพัฒนาและไฟล์พื้นฐาน

ก่อนอื่น ตรวจสอบให้แน่ใจว่าสภาพแวดล้อมการพัฒนาของคุณพร้อมแล้ว คุณต้องมีสภาพแวดล้อม Node.js และ npm ในไดเรกทอรีปลั๊กอิน สร้างโฟลเดอร์ปลั๊กอินใหม่ เช่น my-custom-blocksในโฟลเดอร์นั้น สร้างไฟล์หลักต่อไปนี้:
- my-custom-blocks.php (ไฟล์หลักของปลั๊กอิน)
- package.json (สำหรับจัดการการพึ่งพา Node และสคริปต์การสร้าง)
- src/ ไดเรกทอรี่ (สำหรับเก็บซอร์สโค้ด)
- build/ ไดเรกทอรี่ (ไดเรกทอรี่เอาต์พุตเครื่องมือสร้าง, อ่านโดย WordPress)

在 package.json ใน, กำหนดค่าสคริปต์การสร้างและนำเข้า @wordpress/scripts แพ็คเกจ, มันสามารถทำให้การกำหนดค่า Webpack, Babel และเครื่องมืออื่นๆ ง่ายขึ้นอย่างมาก

{
  "name": "my-custom-blocks",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0"
  }
}

ใต้ส่วนหัวความคิดเห็นของไฟล์หลักปลั๊กอิน my-custom-blocks.php คุณต้องใช้ register_block_type ฟังก์ชันเพื่อบอกให้ WordPress โหลดแอสเซ็ตของบล็อกจาก build ไดเรกทอรี

แนะนำให้อ่าน คู่มือการพัฒนาเทม WordPress: สร้างธีมที่กำหนดเองที่มีประสิทธิภาพสูงตั้งแต่เริ่มต้น。

<?php
/**
 * Plugin Name: My Custom Blocks
 */
function my_custom_blocks_register_block() {
    register_block_type( __DIR__ . '/build/highlight-box' );
}
add_action( 'init', 'my_custom_blocks_register_block' );

เขียนซอร์สโค้ด JavaScript ของบล็อก

在 src ในไดเรกทอรี highlight-box/index.js ไฟล์ นี่คือไฟล์ทางเข้าหลักของบล็อก

import { registerBlockType } from '@wordpress/blocks';
import { RichText, useBlockProps, InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody, PanelRow } from '@wordpress/components';

registerBlockType('my-custom-blocks/highlight-box', {
    title: '高亮提示框',
    icon: 'warning', // 从 Dashicons 中选择
    category: 'design',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: '.highlight-title',
        },
        content: {
            type: 'string',
            source: 'html',
            selector: '.highlight-content',
        },
        backgroundColor: {
            type: 'string',
            default: '#fff3cd',
        },
    },
    edit: ({ attributes, setAttributes }) => {
        const blockProps = useBlockProps();
        const { title, content, backgroundColor } = attributes;

const onChangeTitle = (newTitle) => {
            setAttributes({ title: newTitle });
        };
        const onChangeContent = (newContent) => {
            setAttributes({ content: newContent });
        };
        const onChangeBackgroundColor = (newColor) => {
            setAttributes({ backgroundColor: newColor });
        };

return (
            <>
                <inspectorcontrols>
                    <panelbody title="การตั้งค่าสี">
                        <panelrow>
                            <colorpalette
                                value="{backgroundColor}"
                                onchange="{onChangeBackgroundColor}"
                            />
                        </panelrow>
                    </panelbody>
                </inspectorcontrols>
                <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                    <richtext
                        tagname="h3"
                        classname="highlight-title"
                        onchange="{onChangeTitle}"
                        value="{title}"
                        placeholder="输入标题..."
                    />
                    <richtext
                        tagname="p"
                        classname="highlight-content"
                        onchange="{onChangeContent}"
                        value="{content}"
                        placeholder="输入提示内容..."
                    />
                </div>
            </>
        );
    },
    save: ({ attributes }) =&gt; {
        const blockProps = useBlockProps.save();
        const { title, content, backgroundColor } = attributes;
        return (
            <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                <RichText.Content tagName="h3" className="highlight-title" value={title} />
                <RichText.Content tagName="p" className="highlight-content" value={content} />
            </div>
        );
    },
});

เมื่อเรียกใช้ npm start เริ่มโหมดการพัฒนา (เฝ้าดูการเปลี่ยนแปลงของไฟล์) หรือ npm run build ดำเนินการสร้างสำหรับการผลิต หลังจากนั้นในตัวแก้ไข WordPress คุณจะสามารถค้นหาและใช้บล็อก “กล่องข้อความไฮไลท์” นี้ภายใต้หมวดหมู่ “การออกแบบ”

การพัฒนาขั้นสูง: บล็อกแบบไดนามิกและการเรนเดอร์ฝั่งเซิร์ฟเวอร์

เนื้อหาของบล็อกแบบคงที่จะถูกบันทึกโดยตรงในเนื้อหาของบทความ แต่สำหรับบล็อกที่ต้องการข้อมูลแบบเรียลไทม์ (เช่น รายการบทความล่าสุด ข้อมูลผู้ใช้) เราจำเป็นต้องสร้างบล็อกแบบไดนามิก บล็อกแบบไดนามิกจะจัดเก็บเฉพาะคุณสมบัติบางอย่าง (เช่น จำนวนบทความ) เมื่อบันทึก และเนื้อหาจะถูกสร้างขึ้นแบบไดนามิกผ่านเทมเพลต PHP เมื่อแสดงผลที่ฝั่งผู้ใช้

hosting.com 共享主机

高性能，配备 AMD EPYC CPU、NVMe SSD 存储和 LiteSpeed，全天候24小时、全天候的专家内部支持，高级安全措施，包括 SSL、暴力破解、恶意软件和 DDoS 防护，节省高达 73%

เข้าถึงหน้าเว็บ

แปลงบล็อกแบบคงที่ให้เป็นบล็อกแบบไดนามิก

ขั้นแรก ให้แก้ไขการตั้งค่าการลงทะเบียนของบล็อก โดยเปลี่ยน save ฟังก์ชันให้ส่งคืน nullและเพิ่ม render_callback แอตทริบิวต์

// 在 registerBlockType 的配置对象中
save: () => {
    return null; // 动态区块不在内容中保存 HTML
},

จากนั้น อัปเดตรหัสการลงทะเบียนฝั่ง PHP เพื่อระบุฟังก์ชัน callback สำหรับการเรนเดอร์

function my_custom_blocks_register_dynamic_block() {
    register_block_type( __DIR__ . '/build/latest-posts', [
        'render_callback' => 'my_custom_blocks_render_latest_posts'
    ] );
}
add_action( 'init', 'my_custom_blocks_register_dynamic_block' );

function my_custom_blocks_render_latest_posts( $attributes ) {
    $posts = get_posts( [
        'posts_per_page' => $attributes['numberOfPosts'] ?? 5,
    ] );

if ( empty( $posts ) ) {
        return '<p>ยังไม่มีบทความ</p>';
    }

$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
    foreach ( $posts as $post ) {
        $output .= sprintf(
            '<li><a href="/th/%s/">%s</a></li>',
            esc_url( get_permalink( $post ) ),
            esc_html( get_the_title( $post ) )
        );
    }
    $output .= '</ul>';

return $output;
}

ใช้ไฟล์เทมเพลตของบล็อกสำหรับการเรนเดอร์

สำหรับบล็อกแบบไดนามิกที่ซับซ้อนมากขึ้น แนะนำให้ใช้ไฟล์เทมเพลต สร้างในไดเรกทอรีปลั๊กอิน templates/latest-posts.phpย้ายตรรกะการเรนเดอร์ข้างต้นไปยังไฟล์นั้น จากนั้นใน render_callback ใช้ฟังก์ชัน ob_get_clean 和 include เพื่อโหลดเทมเพลต ซึ่งทำให้ตรรกะของ PHP และ HTML ชัดเจนและบำรุงรักษาง่ายขึ้น

แนะนำให้อ่าน บทเรียนการใช้ปลั๊กอิน WooCommerce: คู่มือสมบูรณ์ตั้งแต่การติดตั้งและการตั้งค่าจนถึงการดำเนินการร้านค้า。

หัวข้อขั้นสูงและแนวปฏิบัติที่ดีที่สุด

หลังจากที่เข้าใจพื้นฐานและบล็อกไดนามิกแล้ว หัวข้อต่อไปนี้จะช่วยให้คุณพัฒนาบล็อกที่มีประสิทธิภาพและเป็นมืออาชีพมากขึ้น

การนำฟังก์ชันตัวแปรของบล็อกไปใช้

บล็อกตัวแปร (Block Variations) ช่วยให้คุณสร้างหลายรูปแบบที่ตั้งไว้ล่วงหน้าหรือการกำหนดค่าจากบล็อกพื้นฐาน ตัวอย่างเช่น การสร้างตัวแปร “สำเร็จ”, “คำเตือน”, “ข้อผิดพลาด” สำหรับ “กล่องข้อความไฮไลต์”

โฮสติ้งแบบแชร์ของ InterServer

共享主机每月 $2.50 USD , 首月 $0.1 USD 优惠码 tryinterserver, 461个云应用脚本，一键安装。

เข้าถึงหน้าเว็บ

import { registerBlockVariation } from '@wordpress/blocks';

registerBlockVariation('my-custom-blocks/highlight-box', [
    {
        name: 'success',
        title: '成功提示',
        icon: 'yes-alt',
        attributes: {
            title: '操作成功',
            backgroundColor: '#d4edda',
        },
        isDefault: false,
    },
    {
        name: 'error',
        title: '错误警告',
        icon: 'dismiss',
        attributes: {
            title: '发生错误',
            backgroundColor: '#f8d7da',
        },
    },
]);

ใช้สไตล์บล็อกและสไตล์ตัวแก้ไข

ใช้ registerBlockStyle ฟังก์ชันสามารถเพิ่มสไตล์การมองเห็นที่แตกต่างให้กับบล็อก ผู้ใช้สามารถสลับได้ในแถบด้านข้าง ในขณะเดียวกัน การใช้ add_editor_style สามารถรับประกันได้ว่าการแสดงตัวอย่างในตัวแก้ไขจะสอดคล้องกับสไตล์ส่วนหน้า ให้ประสบการณ์ที่เห็นแล้วได้ตามนั้น

การปรับปรุงประสิทธิภาพและการแยกโค้ด

เมื่อบล็อกเพิ่มขึ้น การรวม JavaScript ทั้งหมดไว้ในไฟล์เดียวอาจส่งผลต่อประสิทธิภาพการโหลด สามารถใช้ @wordpress/dependency-extraction-webpack-plugin(ซึ่งรวมอยู่ใน @wordpress/scripts แล้ว) เพื่อให้แน่ใจว่าการประกาศการพึ่งพาภายนอกของแพ็คเกจ WordPress ถูกต้อง สำหรับปลั๊กอินขนาดใหญ่ อาจพิจารณาโหลดตามความต้องการหรือเทคนิคการแยกโค้ด

สรุป

การพัฒนา Gutenberg Block Editor เป็นกระบวนการที่ผสมผสานเทคโนโลยี frontend สมัยใหม่ (React, JSX, Webpack) และความรู้ PHP แบบดั้งเดิมของ WordPress เริ่มจากการทำความเข้าใจโครงสร้างของมัน ผ่านการสร้างบล็อกแบบคงที่เพื่อเรียนรู้ API หลัก จากนั้นก้าวไปสู่บล็อกแบบไดนามิกเพื่อจัดการข้อมูลแบบไดนามิก และสุดท้ายใช้ฟังก์ชันขั้นสูงอย่างบล็อกตัวแปรและสไตล์เพื่อเพิ่มประสบการณ์ผู้ใช้และประสิทธิภาพการพัฒนาด้วย การปฏิบัติตามแนวทางที่ดีที่สุด เช่น การจัดการโค้ดที่ชัดเจน การเพิ่มประสิทธิภาพ และการเตรียมพร้อมสำหรับสากลอย่างเต็มที่ คุณจะสามารถสร้างบล็อกที่กำหนดเองได้อย่างมีประสิทธิภาพ รองรับการบำรุงรักษา และเป็นมิตรกับผู้ใช้ ซึ่งจะปลดปล่อยศักยภาพของ Gutenberg Editor ได้อย่างเต็มที่

คำถามที่พบบ่อย (FAQ)

จำเป็นต้องใช้ React ในการพัฒนา Gutenberg Block หรือไม่?

ใช่ ในปัจจุบันวิธีการพัฒนาอย่างเป็นทางการของ Gutenberg Editor ใช้พื้นฐานทั้งหมดจาก React แม้ว่าทฤษฎีแล้วจะใช้เฟรมเวิร์กอื่นได้ แต่ส่วนประกอบ, ฮุค และเครื่องมือทั้งหมดที่ WordPress Core จัดให้มาล้วนสร้างขึ้นรอบระบบนิเวศของ React การใช้เฟรมเวิร์กอื่นจะนำมาซึ่งความซับซ้อนและปัญหาความเข้ากันได้อย่างมาก

วิธีการเพิ่มตัวควบคุมแถบด้านข้างแบบกำหนดเองให้กับบล็อกของฉัน?

คุณสามารถใช้ <code>InspectorControls</code> ส่วนประกอบ ในบล็อกของ edit ในฟังก์ชัน ให้ส่งคืนพร้อมกับเนื้อหาการแสดงตัวอย่างหลัก ใน <code>InspectorControls</code> ภายใน คุณสามารถใช้ <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 คอมโพเนนต์จากแพ็คเกจ `@wordpress/components` เพื่อสร้างอินเทอร์เฟซการตั้งค่าที่สมบูรณ์

บล็อกไดนามิกและบล็อกแบบสถิตมีความแตกต่างกันอย่างไรในแง่ของประสิทธิภาพการทำงาน?

เนื้อหา HTML ของบล็อกแบบคงที่จะถูกบันทึกโดยตรงในเนื้อหาโพสต์ของฐานข้อมูล ดังนั้นการโหลดด้านหน้าจึงเร็วมาก แต่ไม่สามารถรวมข้อมูลแบบไดนามิกได้ บล็อกแบบไดนามิกเมื่อเรนเดอร์ต้องใช้รหัส PHP เพื่อสืบค้นฐานข้อมูล ดังนั้นจึงมีค่าใช้จ่ายด้านประสิทธิภาพเล็กน้อย แต่สามารถให้ข้อมูลแบบเรียลไทม์ได้ สำหรับเนื้อหาที่ไม่เปลี่ยนแปลงบ่อยครั้ง สามารถพิจารณาใช้บล็อกแบบคงที่ร่วมกับกลยุทธ์การแคชเป็นระยะ สำหรับเนื้อหาที่ต้องการความทันสมัยสูง จำเป็นต้องใช้บล็อกแบบไดนามิก

ฉันสามารถใช้บล็อกในพื้นที่วิดเจ็ตแบบดั้งเดิมหรือเมทาบ็อกซ์ของบทความได้ไหม

ได้ เรียกว่า “บล็อกวิดเจ็ต” และ “บล็อกเมทาบ็อกซ์” ตั้งแต่ WordPress 5.8 พื้นที่วิดเจ็ตก็ขับเคลื่อนโดยตัวแก้ไขบล็อกกูเทนเบิร์กทั้งหมด คุณยังสามารถใช้ register_block_type 的 widget_types พารามิเตอร์ (หรือ API ที่เกี่ยวข้อง) เพื่อให้บล็อกสามารถใช้ได้ในตัวแก้ไขวิดเจ็ต สำหรับเมทาบ็อกซ์บทความ สามารถใช้ `register_post_meta API และใช้บล็อกเพื่อสร้างอินเทอร์เฟซการแก้ไขเมตาดาต้าที่ใช้งานง่ายขึ้น