Menguasai Panduan Pembangunan Lengkap dan Kemajuan Praktikal untuk Editor Blok Gutenberg di WordPress

Editor Blok Gutenberg di WordPress telah mengubah sepenuhnya cara penciptaan kandungan, dengan memberikan kebebasan dan kawalan yang lebih besar kepada pengedit dalam membina halaman. Bagi pembangun, ini bermakna paradigma pembangunan yang baru, yang berpusat pada penggunaan React dan JavaScript moden. Artikel ini akan membincangkan secara mendalam cara membuat blok khusus dari awal, serta cara mengembangkan blok dinamik dan menggunakan variasi blok yang lebih canggih. Tujuannya adalah untuk memberikan anda panduan pembangunan yang komprehensif dan praktikal.

Memahami arkitektur teras editor blok

Editor Gutenberg bukanlah sebuah aplikasi yang berdiri sendiri, sebaliknya merupakan sebuah ekosistem yang terdiri daripada beberapa pakej (packages) yang berasingan. Memahami strukturnya merupakan asas penting untuk melakukan pembangunan yang berkesan.

Pemisahan antara editor dan lapisan data

Antaramuka editor itu sendiri adalah terpisah daripada lapisan data WordPress. @wordpress/editor Paket tersebut menyediakan komponen antara muka pengguna (UI) untuk editor. @wordpress/data Paket tersebut melaksanakan pengurusan keadaan (state management) yang serupa dengan Redux. Pemisahan ini membolehkan pembangun untuk fokus pada logik tampilan (view) dan interaksi (interaction) bagi setiap blok, manakala pengurusan kekalan data (data persistence) dilakukan secara automatik oleh mekanisme teras WordPress.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Jenis Artikel Custom di WordPress: Panduan Langkah demi Langkah dari Penciptaan hingga Penerbitan。

Pendaftaran dan kitaran hayat blok

Setiap blok perlu diluluskan (dipersetujui) terlebih dahulu. registerBlockType Fungsi ini digunakan untuk pendaftaran. Fungsi tersebut menerima dua parameter: nama unik bagi blok tersebut (seperti…) my-plugin/my-custom-block) dan sebuah objek yang mengandungi semua maklumat konfigurasi untuk blok tersebut.
Selepas pendaftaran, blok tersebut akan melalui proses kehidupan (lifecycle) yang merangkumi inisialisasi, rendering, penyuntingan, dan penyimpanan. Pembangun utamanya melakukan ini dengan menentukan (defining) parameter dan fungsi yang diperlukan untuk pengurusan blok tersebut. edit 和 save Dua fungsi kritikal untuk mengawal penampilan blok dalam editor dan pada bahagian frontend (pengguna).

UltaHost – Penyedia Hosting untuk WordPress

Jaminan pemulangan wang dalam tempoh 30 hari, lebar jalur dan pangkalan data yang tidak terhad, perlindungan DDoS percuma, diskaun 50% untuk pembelian selama 3 tahun.

Lawati halaman

Bina blok khusus pertama anda dari awal.

Kita akan membuat sebuah blok “pemberitahuan yang ditekankan” yang mudah, yang membenarkan pengguna untuk menambahkan kotak pemberitahuan dengan warna latar belakang dan tajuk.

Mengatur persekitaran pembangunan dan fail asas

Pertama sekali, pastikan bahawa persekitaran pembangunan anda sudah siap. Anda memerlukan persekitaran Node.js dan npm. Cipta sebuah folder baru untuk plugin dalam direktori plugin, sebagai contoh: my-custom-blocksDalam folder tersebut, buat fail-fail berikut:
- my-custom-blocks.php (Buku panduan utama plugin)
- package.json (Digunakan untuk mengurus kebergantungan Node dan skrip pembinaan)
- src/ Senarai (untuk menyimpan kod sumber)
- build/ Senarai direktori (direktori yang dihasilkan oleh alat pembinaan, dibaca oleh WordPress)

在 package.json Dalam proses ini, konfigurasi skrip pembinaan (build script) perlu disediakan dan diintegrasikan ke dalam sistem. @wordpress/scripts Paket ini dapat memudahkan konfigurasi alat-alat seperti Webpack dan Babel dengan ketara.

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

Dalam fail utama plugin my-custom-blocks.php Di sini, anda perlu menggunakan register_block_type Fungsi ini digunakan untuk memberitahu WordPress daripada mana data atau maklumat harus diambil. build Aset untuk blok muat turun katalog.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Pembangunan Tema WordPress: Membina Tema Custom Berprestasi Tinggi Dari Kosong。

<?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' );

Menulis kod sumber JavaScript untuk blok.

在 src Cipta dalam direktori. highlight-box/index.js Fail ini merupakan fail pintu masuk utama untuk blok tersebut.

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="Pengaturan warna">
                        <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>
        );
    },
});

Run npm start Mula mod pembangunan (mendengar perubahan pada fail) atau npm run build Lakukan pembinaan produksi (production build). Selepas itu, dalam editor WordPress, anda akan dapat menemui dan menggunakan blok “Highlight Prompt Box” di bawah kategori “Design”.

Pembangunan Lanjutan: Blok Dinamik dan Penjanaan Kandungan di Pihak Server

Kandungan blok statik disimpan terus dalam kandungan artikel tersebut. Namun, untuk blok yang memerlukan data masa nyata (seperti senarai artikel terkini, maklumat pengguna), kita perlu membuat blok dinamik. Blok dinamik hanya menyimpan beberapa atribut semasa disimpan (seperti jumlah artikel), dan kandungannya dijana secara dinamik oleh template PHP semasa dipaparkan di bahagian hadapan (frontend).

hosting.com Hosting Bersama

Prestasi tinggi, menampilkan CPU AMD EPYC, storan SSD NVMe dan LiteSpeed, dengan sokongan pakar dalaman 24/7, langkah keselamatan canggih termasuk SSL, perlindungan serangan paksa kata laluan, perisian hasad dan DDoS, menjimatkan sehingga 73%.

Lawati halaman

Mengubah blok statik menjadi blok dinamik

Pertama sekali, ubah konfigurasi pendaftaran blok tersebut, dengan… save Fungsi tersebut telah diubah untuk mengembalikan nilai. nullDan tambahkan satu lagi. render_callback Attribut.

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

Kemudian, pada bahagian PHP, kemas kini kod pendaftaran dan tentukan fungsi panggilan balik (callback function) untuk rendering.

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>Tiada artikel tersedia.</p>'$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
    foreach ( $posts as $post ) {
        $output .= sprintf(
            '<li><a href="/ms/%s/">%s</a></li>'php
    esc_url(get_permalink($post));
    esc_html(get_the_title($post));
    $output .= '';'</ul>';

return $output;
}

Menggunakan fail templat blok untuk rendering.

Untuk blok dinamik yang lebih kompleks, penggunaan fail templat adalah disyorkan. Cipta fail templat dalam direktori plugin. templates/latest-posts.phpPindahkan logik pemrosesan tersebut ke dalam fail tersebut. Kemudian… render_callback Gunakan dalam bahasa Cina ob_get_clean 和 include Ia digunakan untuk memuatkan templat, yang menjadikan logik PHP dan HTML lebih jelas dan mudah untuk diselenggara.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Penggunaan Plugin WooCommerce: Daripada Pemasangan dan Konfigurasi Hingga Pengurusan Toko Secara Lengkap。

Topik Tinggi dan Amalan Terbaik

Setelah anda menguasai blok asas dan blok dinamik, topik-topik berikut akan membantu anda mengembangkan blok yang lebih kuat dan lebih profesional.

Mengimplementasikan fungsi variasi untuk blok

Block Variations membenarkan anda membuat beberapa gaya atau konfigurasi prabayar berdasarkan satu blok asas. Sebagai contoh, untuk kotak amaran yang berwarna terang, anda boleh membuat variasi seperti “Berjaya”, “Amaran”, “Ralat”, dan lain-lain.

Hosting Bersama InterServer

Hosting kongsi: 1TB/bulan pada $2.50 USD, bulan pertama pada $0.10 USD dengan kod promo tryinterserver. 461 skrip aplikasi awan tersedia untuk pemasangan satu klik.

Lawati halaman

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',
        },
    },
]);

Menggunakan gaya blok dan gaya editor

Gunakan registerBlockStyle Fungsi tersebut boleh menambahkan pelbagai gaya visual kepada blok-blok tertentu, dan pengguna boleh menukar gaya tersebut melalui bar sisi. Pada masa yang sama, fungsi ini juga boleh digunakan… add_editor_style Ia boleh memastikan bahawa tampilan pra-pengeditan dalam editor adalah selaras dengan gaya reka bentuk (style) pada bahagian hadapan (frontend), memberikan pengalaman “what you see is what you get” (apa yang anda lihat itulah yang anda dapat).

Pengoptimuman Prestasi dan Pembahagian Kod

Seiring dengan peningkatan jumlah blok, mengumpulkan semua kod JavaScript ke dalam satu fail boleh mempengaruhi prestasi pemuatan. Ini boleh diatasi dengan… @wordpress/dependency-extraction-webpack-plugin(Telah dimasukkan dalam…) @wordpress/scripts Pastikan pengisytiharan kebergantungan luaran terhadap pakej WordPress dilakukan dengan betul. Bagi plugin yang besar, pertimbangkan penggunaan teknik pemuatannya secara berdasarkan keperluan (on-demand loading) atau pembahagian kod (code splitting).

RINGKASAN

Pembangunan editor blok Gutenberg adalah proses yang menggabungkan teknologi front-end moden (React, JSX, Webpack) dengan pengetahuan tradisional PHP dalam WordPress. Bermula dengan memahami arkitektur editor tersebut, kemudian menguasai API asas untuk mencipta blok statik, seterusnya mempelajari cara mengendalikan data dinamik melalui blok dinamik, dan akhirnya meningkatkan pengalaman pengguna serta kecekapan pembangunan dengan ciri-ciri lanjutan seperti variasi blok dan gaya. Dengan mengikuti amalan terbaik seperti pengaturan kod yang jelas, pengoptimuman prestasi, dan persiapan yang lengkap untuk penggunaan dalam pelbagai bahasa, anda akan dapat membina blok khusus yang kuat, mudah diselenggara, dan mesra pengguna, sekali gus memanfaatkan sepenuhnya potensi editor Gutenberg.

FAQ - Soalan Lazim

Adakah pembangunan blok Gutenberg mesti menggunakan React?

Ya, kaedah pembangunan rasmi editor Gutenberg kini sepenuhnya berdasarkan React. Walaupun secara teorinya kita boleh menggunakan rangka kerja lain, semua komponen, hook, dan alat yang disediakan oleh inti WordPress dibina mengikut ekosistem React. Penggunaan rangka kerja lain akan menyebabkan kerumitan dan masalah keserasian yang ketara.

Bagaimana untuk menambahkan kawalan sidebar khusus pada blok saya?

Anda boleh menggunakan <code>InspectorControls</code> Komponen. Dalam blok tersebut. edit Dalam fungsi tersebut, kembalikan hasil tersebut bersama-sama dengan kandungan pratonton utama. <code>InspectorControls</code> Di dalam, anda boleh menggunakan… <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 Komponen dari pakej `@wordpress/components` digunakan untuk membina antara muka tetapan yang kaya dan berfungsi dengan baik.

Apa perbezaan antara blok dinamik dan blok statik dari segi prestasi?

Kandungan HTML untuk blok statik disimpan terus dalam kandungan pos di pangkalan data, oleh itu kelajuan muat turun di bahagian hadapan (frontend) adalah sangat cepat. Namun, blok statik tidak dapat memuatkan data dinamik. Blok dinamik memerlukan kod PHP untuk mengakses pangkalan data semasa rendering, yang menyebabkan sedikit penurunan prestasi, tetapi ia dapat menyediakan data yang terkini. Untuk kandungan yang jarang berubah, anda boleh mempertimbangkan penggunaan blok statik bersama dengan strategi caching yang kerap; untuk kandungan yang memerlukan keupayaan masa nyata yang tinggi, blok dinamik adalah pilihan yang lebih sesuai.

Bolehkah saya menggunakan blok tersebut dalam kawasan alat tradisional atau dalam kotak meta artikel?

Boleh, ini dikenali sebagai “Block Widgets” dan “Block Meta Boxes”. Bermula dari WordPress 5.8, kawasan widget juga sepenuhnya dikendalikan oleh editor blok Gutenberg. Anda juga boleh menggunakannya. register_block_type 的 widget_types Parameter (atau API yang berkaitan) diperlukan untuk membolehkan blok-blok tersebut digunakan dalam editor alat tambahan (widgets). Untuk kotak meta artikel (article meta boxes), anda boleh menggunakan…register_post_meta API digabungkan dengan blok untuk mencipta antara muka penyuntingan metadata yang lebih intuitif.