Apabila membangunkan blok gutenberg, cara yang betul untuk aset enqueue termasuk: 1. Gunakan register_block_type untuk menentukan laluan editor_script, editor_style dan gaya; 2. Daftar sumber melalui wp_register_script dan wp_register_style dalam fungsi.php atau plug-in, dan tetapkan kebergantungan dan versi yang betul; 3. Konfigurasikan alat binaan untuk mengeluarkan format modul yang sesuai dan pastikan laluannya konsisten; 4. Kawalan logik pemuatan gaya depan melalui add_theme_support atau enqueue_block_assets untuk memastikan gaya berkuatkuasa dan mengelakkan konflik.

Apabila membangunkan blok Gutenberg, aset enqueue yang betul (seperti fail JavaScript dan CSS) adalah langkah utama untuk memastikan bahawa blok berfungsi dengan betul. Ini bukan sekadar memuatkan fail ke editor backend, tetapi juga mempertimbangkan isu-isu pengurusan paparan depan dan pergantungan.

1. Gunakan register_block_type untuk menentukan jalan aset dengan betul

WordPress menyediakan fungsi register_block_type untuk mendaftarkan jenis blok dan membolehkan anda menentukan laluan fail JS dan CSS yang sepadan melalui parameter.

 daftar_block_type (__dir__, array (
    'editor_script' => 'my-block-editor-script',
    'editor_style' => 'My-block-Editor-Styles',
    'Style' => 'My-Block-Frontend-Styles',
));

• editor_script : digunakan untuk skrip dalam editor blok (biasanya disusun .js atau .jsx fail)
• editor_style : Hanya gaya yang dimuatkan dalam editor, dan tidak menjejaskan latar depan
• style : Gaya yang akan dimuatkan di bahagian depan dan belakang, biasanya digunakan untuk penampilan asas blok

2. Daftar skrip dan stylesheets dalam functions.php atau plugin

Anda perlu mendaftarkan sumber -sumber ini terlebih dahulu dengan wp_register_script dan wp_register_style supaya WordPress dapat mengenali pemegang yang anda nyatakan dalam register_block_type .

 fungsi my_block_assets () {
    WP_REGISTER_SCRIPT (
        'My-block-editor-Script',
        get_template_directory_uri (). '/blocks/my-block/build/index.js',
        Array ('wp-blocks', 'wp-element', 'wp-editor'),
        FileMtime (get_template_directory (). '/blocks/my-block/build/index.js')
    );

    wp_register_style (
        'My-block-Editor-Styles',
        get_template_directory_uri (). '/blocks/my-block/Editor.css',
        array (),
        fileMtime (get_template_directory (). '/blocks/my-block/Editor.css')
    );

    wp_register_style (
        'My-block-Frontend-Styles',
        get_template_directory_uri (). '/blocks/my-block/style.css',
        array (),
        FileMtime (get_template_directory (). '/blocks/my-block/style.css')
    );
}
add_action ('init', 'my_block_assets');

Perhatikan beberapa perkara utama:

• Ketergantungan skrip perlu ditulis sepenuhnya, seperti wp-blocks , wp-element , wp-editor
• Gunakan filemtime() untuk mengelakkan penyemak imbas dari versi fail lama caching
• Jika anda menggunakan struktur direktori tema, disarankan untuk menggunakan get_template_directory ; Sekiranya ia adalah plugin, gunakan plugins_url() untuk bekerjasama dengan __FILE__

3. Langkah berjaga -jaga untuk konfigurasi alat bangunan

Jika anda menggunakan alat webpack, vite atau lain -lain untuk membungkus kod blok, anda perlu memberi perhatian kepada perkara berikut:

• Fail JS output hendaklah menjadi modul UMD atau dibungkus dengan betul dalam format yang sesuai untuk persekitaran WordPress.
• Jangan pakej React dan Reactdom ke dalam skrip anda secara berasingan, tetapi gunakan rujukan pembolehubah global yang disediakan oleh WordPress (seperti window.React , window.ReactDOM )
• Pastikan laluan output selaras dengan jalan yang didaftarkan di PHP

Amalan Biasa:

• Letakkan skrip editor di /src/blocks/your-block/index.js
• Disusun ke /build/your-block/index.js menggunakan webpack
• Pada masa yang sama, menghasilkan fail .asset.php untuk mendapatkan nombor kebergantungan dan versi secara automatik (Sokongan lalai WordPress)

4. Petua untuk Memuat Gaya Front-End

Secara lalai, parameter style blok Gutenberg secara automatik akan memuat gaya di latar depan. Tetapi kadang -kadang anda akan mendapati bahawa gaya itu tidak berkesan, sebabnya mungkin:

• Tema ini tidak membolehkan sokongan gaya blok dengan betul (periksa jika add_theme_support( 'wp-block-styles' ) dipanggil)
• Gaya ini dilindungi oleh gaya tema lain, disarankan untuk menambah beberapa nama kelas nama ruang
• Sesetengah blok tidak akan diberikan di hujung depan (seperti beberapa blok dinamik). Pada masa ini, anda boleh mempertimbangkan menggunakan cangkuk enqueue_block_assets untuk memuat atas permintaan.

 fungsi my_enqueue_frontend_assets () {
    jika (has_block ('my/block-name')) {
        wp_enqueue_style ('my-block-frontend-styles');
    }
}
add_action ('wp_enqueue_scripts', 'my_enqueue_frontend_assets');

Kaedah ini lebih fleksibel, tetapi ia juga memerlukan menentukan sama ada blok sebenarnya wujud pada halaman.

Pada dasarnya itu sahaja. Selagi anda mengikuti spesifikasi pendaftaran blok WordPress dan memberi perhatian kepada masalah pembinaan dan laluan, anda boleh berjaya memuatkan aset ke dalam blok.

Atas ialah kandungan terperinci Cara Mengenai Aset untuk Blok Gutenberg. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!