Bermula dengan Pembangunan Blok WordPress

Pembangunan WordPress sedang menjalani tempoh peralihan.

Walaupun kami telah berhubung dengan editor blok selama lima tahun, perkembangannya masih mencabar kerana dokumentasi itu hilang atau ketinggalan zaman. Ini mencerminkan lebih banyak keadaan semasa yang cepat fungsi FSE.

Sebagai contoh, pada tahun 2018, satu siri artikel mengenai Pengenalan kepada Pembangunan Gutenberg telah diterbitkan pada trik CSS. Tetapi masa telah berlalu, dan walaupun kaedah pembangunan itu masih berkesan, ia tidak lagi disyorkan (sebagai tambahan, projek blok ciptaan-guten yang berdasarkannya tidak lagi dikekalkan).

Artikel ini bertujuan untuk membantu anda memulakan pembangunan blok WordPress dan mengikuti pendekatan semasa. Sudah tentu, perkara mungkin berubah selepas artikel ini diterbitkan. Tetapi saya akan cuba memberi tumpuan kepada idea terasnya, kerana walaupun alat itu berkembang dari masa ke masa, konsep teras mungkin tetap sama.

Apa sebenarnya blok WordPress?

Pertama, mari kita jelaskan beberapa istilah, seperti "blok". Semua perkembangan ciri -ciri ini sebelum WordPress 5.0 digunakan dengan nama kod "Gutenberg" (pencipta percetakan).

Sejak itu, "Gutenberg" telah digunakan untuk menggambarkan segala -galanya yang berkaitan dengan blok, termasuk editor blok dan editor tapak, jadi ia menjadi begitu rumit sehingga sesetengah orang membenci nama itu. Paling penting, terdapat juga plugin Gutenberg untuk menguji ciri -ciri eksperimen yang mungkin disertakan pada masa akan datang. Jika anda berfikir memanggil semua "penyuntingan seluruh laman web" ini dapat menyelesaikan masalah ini, terdapat juga beberapa kebimbangan.

Jadi, dalam artikel ini, apabila kita merujuk kepada "blok", kita merujuk kepada komponen yang membuat kandungan dalam editor blok WordPress. Blok dimasukkan ke dalam halaman atau artikel dan menyediakan struktur untuk jenis kandungan tertentu. WordPress dilengkapi dengan beberapa blok "teras" untuk jenis kandungan biasa, seperti perenggan, senarai, imej, video, audio, dan banyak lagi.

Di samping blok teras ini, kita juga boleh membuat blok tersuai. Ini adalah tumpuan pembangunan blok WordPress (anda juga boleh menapis blok teras untuk mengubahsuai fungsi mereka, tetapi anda mungkin tidak memerlukannya pada masa ini).

peranan blok

Sebelum kita menyelam untuk membuat blok, kita mesti terlebih dahulu memahami bagaimana blok berfungsi secara dalaman. Ini pasti akan menyelamatkan kita banyak masalah pada masa akan datang.

Saya suka memahami blok secara abstrak sebagai: entiti dengan atribut tertentu (dipanggil atribut) yang mewakili kandungan tertentu. Saya tahu ini tidak jelas, tetapi sila bersabar dengan saya untuk menerangkan. Blok pada dasarnya ditunjukkan dalam dua cara: sebagai antara muka grafik dalam editor blok, atau sebagai blok data dalam pangkalan data.

Apabila anda membuka editor Blok WordPress dan masukkan blok (contohnya, blok pullquote), anda mendapat antara muka yang bagus. Anda boleh mengklik antara muka dan mengedit teks yang dirujuk. Panel Tetapan di sebelah kanan UI Editor Blok menyediakan pilihan untuk menyesuaikan teks dan menetapkan penampilan blok.

Apabila anda selesai membuat petikan yang indah dan mengklik penerbitan, keseluruhan jawatan disimpan dalam jadual WP_POSTS pangkalan data. Ini bukan sesuatu yang baru kerana Gutenberg. Ini adalah bagaimana perkara yang selalu berfungsi - WordPress menyimpan kandungan artikel dalam jadual yang ditentukan dalam pangkalan data. Tetapi yang baru adalah bahawa perwakilan blok pullquote adalah sebahagian daripada kandungan yang disimpan dalam medan post_content jadual WP_POSTS.

bagaimana rupa ungkapan ini? Mari kita lihat:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

kelihatan seperti html biasa, bukan? ! Dalam istilah teknikal, ini adalah blok "bersiri". Perhatikan data JSON dalam komen HTML, "Textalign": "Betul". Ini adalah atribut

- atribut yang berkaitan dengan blok. Katakan anda menutup editor blok dan kemudian buka sekali lagi selepas beberapa ketika. Editor Blok akan mengambil kandungan dalam medan Post_Content yang berkaitan. Editor kemudian mengepam kandungan yang diambil dan ketika menghadapi perkara berikut:

ia akan bercakap dengan dirinya sendiri:

<code>...</code>

Baiklah, ini kelihatan seperti blok pullquote. Nah ... ia juga mempunyai harta ... Saya mempunyai fail JavaScript yang memberitahu saya bagaimana untuk membina antara muka grafik blok pullquote dalam editor berdasarkan sifatnya. Saya harus melakukan ini sekarang supaya blok ini dibentangkan dalam kemuliaan penuhnya.

Sebagai pemaju blok, tugas anda ialah:

Beritahu WordPress bahawa anda ingin mendaftarkan jenis blok tertentu, serta butiran yang berkaitan.

1. Menyediakan fail JavaScript ke editor blok, yang akan membantu ia menjadikan blok dalam editor sementara "bersiri" untuk menyimpannya ke pangkalan data.
2. menyediakan sumber -sumber lain yang diperlukan untuk blok berfungsi dengan baik, seperti gaya dan fon.
Adalah penting untuk diperhatikan bahawa semua penukaran ini dari data bersiri ke antara muka grafik -dan sebaliknya - hanya berlaku dalam editor blok. Di hujung depan, kandungan dipaparkan dan disimpan dengan cara yang sama. Oleh itu, dalam erti kata, blok adalah cara yang bijak untuk memasukkan data ke dalam pangkalan data.

Harap ini memberi anda pemahaman yang lebih jelas tentang bagaimana blok berfungsi.

blok hanya plugin

Blok hanya plugin. Nah, secara teknikal anda boleh meletakkan

blok dalam tema atau

pelbagai blok dalam satu plugin. Walau bagaimanapun, biasanya jika anda ingin membuat blok, anda akan mahu membuat plugin. Jadi, jika anda pernah membuat plugin WordPress, anda sebahagiannya menguasai cara membuat blok WordPress. Tetapi mari kita anggap anda tidak pernah menyediakan plugin WordPress, apalagi blok. Di mana anda bermula? set blok

kami telah memperkenalkan apa blok. Mari mulakan untuk membuatnya.

pastikan nod dipasang

Ini akan memberi anda akses kepada arahan NPM dan NPX, di mana NPM memasang kebergantungan blok dan membantu menyusun kandungan, sementara NPX menjalankan perintah pada pakej tanpa memasang pakej. Jika anda menggunakan macOS, anda mungkin memasang nod dan anda boleh menggunakan NVM untuk mengemas kini versi. Jika anda menggunakan Windows, anda perlu memuat turun dan memasang nod.

Buat Folder Projek

Sekarang anda boleh menjumpai tutorial lain yang melompat terus ke baris arahan dan mengarahkan anda untuk memasang pakej yang dipanggil @wordpress/create-block. Pakej ini hebat kerana ia menghasilkan folder projek lengkap dengan semua kebergantungan dan alat yang anda perlukan untuk memulakan pembangunan anda.

Saya secara peribadi mengambil pendekatan ini ketika menubuhkan blok saya sendiri, tetapi tolong bertolak ansur dengan saya seketika, kerana saya ingin menghapuskan kandungan subjektif yang diperkenalkan dan hanya memberi tumpuan kepada bahagian -bahagian yang diperlukan dari persekitaran pembangunan asas untuk memahami.

ini adalah dokumen yang saya ingin tunjukkan secara khusus:

• readme.txt: Ini agak seperti depan direktori plugin, yang biasanya digunakan untuk menggambarkan plugin dan memberikan lebih banyak maklumat mengenai penggunaan dan pemasangan. Jika anda menghantar blok ke direktori plugin WordPress, fail ini membantu mengisi halaman plugin. Jika anda merancang untuk membuat repositori GitHub untuk plugin blok, anda mungkin juga mempertimbangkan menggunakan fail ReadMe.md dengan maklumat yang sama supaya ia memaparkan dengan baik di sana.
• Package.json: Ini mentakrifkan pakej nod yang diperlukan untuk pembangunan. Kami akan membukanya semasa memasang. Dalam pembangunan plugin WordPress klasik, anda boleh digunakan untuk menggunakan fail komposer dan komposer.json. Ini bersamaan.
• plugin.php: Ini adalah fail plugin utama, ya, ia adalah PHP klasik! Kami akan meletakkan tajuk plugin dan metadata di sini dan menggunakannya untuk mendaftarkan plugin.

Di samping fail -fail ini, terdapat juga direktori Src, yang harus mengandungi kod sumber blok.

Mempunyai fail -fail ini dan direktori SRC sudah cukup untuk bermula. Dalam kumpulan itu, sila ambil perhatian bahawa kita sebenarnya hanya memerlukan fail (plugin.php) untuk membuat plugin. Selebihnya memberikan maklumat atau digunakan untuk menguruskan persekitaran pembangunan.

pakej @wordpress/create-block yang disebutkan di atas membina fail ini untuk kami (dan banyak lagi). Anda boleh memikirkannya sebagai alat automasi, bukan keperluan. Ia menjadikan kerja lebih mudah, jadi anda boleh menggunakannya secara bebas untuk membina blok dengan menjalankan arahan berikut:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Memasang Ketergantungan Blok

Katakan anda telah menyediakan tiga fail yang disebutkan di bahagian sebelumnya dan sudah tiba masanya untuk memasang kebergantungan. Pertama, kita perlu menentukan kebergantungan yang kita perlukan. Kami melakukan ini dengan mengedit Package.json. Apabila menggunakan utiliti @wordpress/create-block, berikut dijana untuk kami (anotasi telah ditambah; JSON tidak menyokong anotasi, jadi jika anda menyalin kod, sila hapus anotasi):

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Lihat Versi Tidak Dikommentasi

`` `json { "Nama": "contoh blok", "Versi": "0.1.0", "Keterangan": "Contoh Blok Scaffolded dengan Buat Alat Blok.", "Pengarang": "Penyumbang WordPress", "Lesen": "GPL-2.0-or-Later", "Utama": "membina/index.js", "Skrip": { "Bina": "WP-Scripts membina", "Format": "WP-Scripts Format", "Lint: CSS": "WP-Scripts Lint-Style", "Lint: JS": "WP-Scripts LINT-JS", "Pakej-update": "WP-Scripts Packages-Update", "Plugin-Zip": "WP-Scripts Plugin-Zip", "Mula": "WP-Scripts Mula" }, "DevDependency": { "@WordPress/Scripts": "^24.1.0" } }

<code>...</code>

Sekarang pakej.json disediakan, kita harus dapat memasang semua kebergantungan ini dengan menavigasi ke folder projek dalam baris arahan dan menjalankan pemasangan NPM.

Tambah Tajuk Plugin

Jika anda berasal dari pembangunan plugin WordPress klasik, anda mungkin tahu bahawa semua plugin mempunyai sekeping maklumat dalam fail plugin utama, yang membantu WordPress mengenali plugin dan memaparkan maklumat mengenainya pada skrin plug-in di panel admin WordPress.

Berikut adalah plugin yang dibuat untuk saya oleh @WordPress/create-block untuk kreatif yang disebut "Hello World":

npx @wordpress/create-block

Ini dalam fail plugin utama dan anda boleh menamakannya seperti yang anda suka. Anda boleh menamakannya nama biasa seperti index.php atau plugin.php. Pakej Create-Block secara automatik menamakannya sebagai nama projek yang anda berikan pada pemasangan. Oleh kerana saya merujuk kepada contoh ini sebagai "contoh blok", pakej memberi kami fail contoh-contoh.php dengan semua ini.

Anda perlu menukar beberapa butiran, seperti menjadikan diri anda sebagai pengarang, dll. Tidak semua ini diperlukan. Jika saya mulakan dengan "kepala", maka ia mungkin lebih dekat dengan ini:

{
  // 定义项目名称
  "name": "block-example",
  // 使用语义版本控制设置项目版本号
  "version": "0.1.0",
  // 项目的简短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以将其替换为您自己
  "author": "The WordPress Contributors",
  // 标准许可信息
  "license": "GPL-2.0-or-later",
  // 定义主JavaScript文件
  "main": "build/index.js",
  // 我们在开发过程中构建和编译插件所需的一切
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

Saya tidak akan terperinci mengenai tujuan yang tepat setiap baris, kerana ini sudah menjadi corak lengkap dalam manual plugin WordPress.

Struktur fail

kami telah melihat fail yang diperlukan untuk blok tersebut. Walau bagaimanapun, jika anda menggunakan @wordpress/create-block, anda akan melihat banyak fail lain dalam folder projek.

Berikut adalah apa yang kini termasuk:

<code>
这里的@wordpress/scripts包是主要的依赖项。如您所见，它是一个devDependency，这意味着它有助于开发。如何？它公开了wp-scripts二进制文件，我们可以使用它来编译我们的代码，从src目录到build目录，等等。

WordPress维护了许多其他软件包，用于各种目的。例如，@wordpress/components软件包为WordPress区块编辑器提供了一些预制UI组件，可用于为区块创建一致的用户体验，并符合WordPress设计标准。

您实际上*不需要*安装这些软件包，即使您想使用它们也是如此。这是因为这些@wordpress依赖项不会与您的区块代码捆绑在一起。相反，任何引用实用程序软件包代码的导入语句——例如@wordpress/components——都用于在编译期间构造“资产”文件。此外，这些导入语句被转换为将导入映射到全局对象的属性的语句。例如，import { \_\_ } from "@wordpress/i18n"被转换为const \_\_ = window.wp.i18n.\_\_的缩小版本。（window.wp.i18n是一个保证在全局范围内可用的对象，一旦相应的i18n软件包文件被排队）。

在插件文件中注册区块期间，隐式使用“资产”文件来告诉WordPress区块的软件包依赖项。这些依赖项会自动排队。所有这些都在幕后完成，前提是您使用的是scripts软件包。也就是说，您仍然可以选择在package.json文件中本地安装依赖项以进行代码完成和参数信息：

```json
// etc.
"devDependencies": {
  "@wordpress/scripts": "^24.1.0"
},
"dependencies": {
  "@wordpress/components": "^19.17.0"
}</code>

wow, begitu banyak! Mari tunjukkan kandungan baru:

• membina/: folder ini menerima aset yang disusun apabila memproses fail tujuan pengeluaran.
• node_modules: Folder ini memegang semua kebergantungan pembangunan yang dipasang apabila kami menjalankan pemasangan NPM.
• src/: folder ini memegang kod sumber plugin, yang akan disusun dan dihantar ke direktori Build. Kami akan melihat masing -masing kemudian.
• .editorConfig: Ini mengandungi konfigurasi untuk tweaking editor kod untuk konsistensi kod.
• .Gitignore: Ini adalah fail repositori standard yang mengenal pasti fail tempatan yang harus dikecualikan daripada penjejakan kawalan versi. Node_modul anda pastinya disertakan di sini.
• Package-lock.json: Ini adalah fail yang dihasilkan secara automatik yang menjejaki kemas kini pakej yang diperlukan yang dipasang menggunakan pemasangan NPM.

blok metadata

Saya mahu menggali ke direktori src dengan anda, tetapi fokus pertama pada salah satu fail: block.json. Jika anda menggunakan blok ciptaan, ia bersedia untuk anda; WordPress mendorong keras untuk menggunakannya sebagai kaedah spesifikasi standard untuk mendaftarkan blok dengan menyediakan metadata yang menyediakan konteks untuk WordPress untuk mengenal pasti blok secara serentak dan menjadikannya dalam editor blok.

Berikut adalah apa @wordpress/create-block menjana untuk saya:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Sebenarnya, kita boleh memasukkan banyak maklumat yang berbeza di sini, tetapi kita hanya memerlukan nama dan tajuk. Versi super-lite mungkin kelihatan seperti ini:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

• $ skema mentakrifkan format skema yang digunakan untuk mengesahkan kandungan fail. Kedengarannya seperti perkara yang diperlukan, tetapi ia benar -benar pilihan kerana ia membolehkan editor kod yang disokong untuk mengesahkan sintaks dan menyediakan ciri -ciri tambahan seperti tooltips dan autocomplete.
• Apiversion merujuk kepada versi API blok yang digunakan oleh plugin. Hari ini, versi 2 adalah versi terkini.
• Nama adalah rentetan unik yang diperlukan yang membantu mengenal pasti plugin. Perhatikan bahawa saya telah menambah trik CSS/ di hadapannya, yang saya gunakan sebagai ruang nama untuk membantu mengelakkan konflik dengan plugin lain yang mungkin mempunyai nama yang sama. Anda boleh memilih untuk menggunakan sesuatu seperti akronim anda (seperti As/Block-Example).
• versi disyorkan oleh WordPress sebagai mekanisme penjelasan cache apabila melepaskan versi baru.
• Tajuk adalah satu lagi medan yang diperlukan yang menetapkan nama yang digunakan di mana -mana plugin paparan.
• Kategori kumpulan blok dengan blok lain dan memaparkannya bersama -sama dalam editor blok. Kategori kini wujud termasuk teks, media, reka bentuk, widget, tema, dan embeddings, dan anda juga boleh membuat kategori tersuai.
• Ikon membolehkan anda memilih sesuatu dari perpustakaan Dashicons untuk mewakili blok anda secara visual dalam editor blok. Saya menggunakan ikon Format-Quote kerana kita membuat pullquote kita sendiri dan sesuatu seperti itu dalam contoh ini. Kita boleh mengambil kesempatan daripada ikon sedia ada dan bukannya perlu membuat kita sendiri, yang hebat, walaupun ini pastinya mungkin.
• editorscript adalah lokasi di mana fail utama JavaScript index.js terletak.

Daftar blok

Satu lagi perkara sebelum kita masuk ke dalam kod sebenar ialah mendaftarkan plugin. Kami hanya menyediakan semua metadata ini dan kami memerlukan cara untuk mendapatkan WordPress untuk menggunakannya. Dengan cara ini WordPress tahu di mana untuk mencari semua aset plugin supaya mereka boleh beratur untuk digunakan dalam editor blok.

Mendaftar blok adalah proses dua langkah. Kita perlu mendaftarkannya dalam PHP dan JavaScript. Untuk aspek PHP, buka fail plugin utama (dalam kes ini, example.php) dan tambahkan yang berikut selepas tajuk plugin:

<code>...</code>

Ini adalah apa yang dihasilkan oleh utiliti penciptaan untuk saya, itulah sebabnya fungsi itu dinamakan sedemikian rupa. Kita boleh menggunakan nama yang berbeza. Kuncinya adalah untuk mengelakkan konflik dengan plugin lain, jadi lebih baik menggunakan ruang nama anda di sini untuk menjadikannya unik yang mungkin:

npx @wordpress/create-block

Jika block.json yang mengandungi semua metadata blok berada di SRC, mengapa kita menunjuk ke direktori binaan? Ini kerana kod kami masih perlu disusun. Pakej skrip memproses kod fail dalam direktori SRC dan meletakkan fail yang disusun yang digunakan dalam pengeluaran dalam direktori Build, manakala copy block.json fail .

Baiklah, mari kita pergi ke aspek JavaScript blok pendaftaran. Buka src/index.js dan pastikan ia kelihatan seperti ini:

{
  // 定义项目名称
  "name": "block-example",
  // 使用语义版本控制设置项目版本号
  "version": "0.1.0",
  // 项目的简短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以将其替换为您自己
  "author": "The WordPress Contributors",
  // 标准许可信息
  "license": "GPL-2.0-or-later",
  // 定义主JavaScript文件
  "main": "build/index.js",
  // 我们在开发过程中构建和编译插件所需的一切
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

Kami memasuki dunia React dan JSX! Ini memberitahu WordPress:

• Import Modul RegistblockType dari @WordPress/Blocks Pakej.
• metadata import dari block.json.
• Import Edit dan simpan komponen dari fail yang sepadan. Kami akan menambah kod ke fail ini kemudian.
• Daftar blok dan gunakan Edit dan simpan komponen untuk menjadikan blok dan simpan kandungan ke pangkalan data.

Apa yang berlaku dengan Fungsi Edit dan Simpan? Salah satu kehalusan pembangunan blok WordPress adalah perbezaan antara "backend" dan "frontend", yang digunakan untuk menjadikan kandungan blok dalam konteks ini, di mana Edit mengendalikan penyerahan backend, Simpan menulis kandungan dari editor blok ke pangkalan data untuk menjadikan kandungan pada bahagian depan laman web.

Ujian cepat

Kami dapat dengan cepat mengendalikan dan melihat sama ada blok kami berfungsi di editor blok dan menjadikan di hujung depan. Mari kita buka index.js sekali lagi dan gunakan fungsi Edit dan simpan untuk mengembalikan beberapa asas untuk menggambarkan bagaimana mereka berfungsi:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Ini pada dasarnya adalah versi tipis kod terdahulu kami, hanya kami menunjuk terus ke metadata di block.json untuk mendapatkan nama blok dan menghilangkan komponen edit dan simpan kerana kami menjalankan fungsi terus dari sini.

kita boleh menyusunnya dengan menjalankan NPM Run Build pada baris arahan. Selepas itu, kita boleh mengakses blok yang dinamakan "Contoh Blok" dalam editor blok:

Jika kita meletakkan blok ke kawasan kandungan, kita akan mendapatkan mesej yang dikembalikan dari fungsi edit:

Jika kita menyimpan dan menerbitkan artikel, ketika melihat di hadapan, kita harus mendapatkan mesej yang dikembalikan dari fungsi simpan:

Buat blok

Nampaknya semuanya normal! Sekarang kita telah mengesahkan bahawa semuanya baik -baik saja, kita boleh memulihkan apa yang ada di index.js sebelum ujian:

<code>...</code>

Perhatikan bahawa fungsi Edit dan Simpan dikaitkan dengan dua fail sedia ada yang dihasilkan oleh @WordPress/create-block dalam direktori SRC dan mengandungi import lain yang kami perlukan dalam setiap fail. Lebih penting lagi, fail -fail ini membuat edit dan simpan komponen yang mengandungi tag blok.

backend tag (src/edit.js)

npx @wordpress/create-block

Lihat apa yang kita buat? Kami mengimport prop dari pakej @WordPress/Block-Editor, yang membolehkan kami menjana kelas yang boleh digunakan untuk gaya kemudian. Kami juga mengimport fungsi pengantarabangsaan __ untuk terjemahan pemprosesan.

tag front-end (src/save.js)

Ini akan membuat komponen simpan, kami akan menggunakan kandungan hampir sama seperti src/edit.js, tetapi dengan teks yang sedikit berbeza:

{
  // 定义项目名称
  "name": "block-example",
  // 使用语义版本控制设置项目版本号
  "version": "0.1.0",
  // 项目的简短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以将其替换为您自己
  "author": "The WordPress Contributors",
  // 标准许可信息
  "license": "GPL-2.0-or-later",
  // 定义主JavaScript文件
  "main": "build/index.js",
  // 我们在开发过程中构建和编译插件所需的一切
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  // 定义使用脚本包的哪个版本（撰写本文时为24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

Begitu juga, kami mendapat kelas yang bagus yang boleh digunakan dalam CSS:

Blok gaya

kami hanya memperkenalkan cara menggunakan sifat blok untuk membuat kelas. Anda membaca ini di laman web yang berkaitan dengan CSS, jadi saya rasa saya terlepas sesuatu jika kami tidak secara khusus menutup cara menulis gaya blok.

membezakan antara gaya depan dan back-end

Jika anda melihat block.json dalam direktori SRC, anda akan menemui dua bidang yang berkaitan dengan gaya:

• EditorStyle menyediakan laluan ke gaya yang digunakan untuk backend.
• Gaya adalah jalan ke gaya bersama yang digunakan untuk bahagian depan dan belakang.

Kev Quirk mempunyai artikel terperinci yang menunjukkan cara membuat editor backend kelihatan seperti UI frontend.

ingat bahawa pakej @wordpress /skrip menyalin fail block.json apabila ia memproses kod dalam direktori /src dan meletakkan aset yang disusun dalam direktori /membina. Fail build/block.json digunakan untuk mendaftarkan blok. Ini bermakna bahawa mana -mana jalan yang kami sediakan dalam src/block.json harus ditulis relatif kepada binaan/block.json.

menggunakan sass

kita boleh meletakkan beberapa fail CSS ke dalam direktori binaan, merujuk kepada laluan di src/block.json, menjalankan binaan, dan kemudian ia selesai. Tetapi ini tidak memanfaatkan sepenuhnya proses penyusunan @WordPress/Scripts, yang dapat menyusun SASS ke CSS. Sebaliknya, kami meletakkan fail gaya dalam direktori SRC dan mengimportnya dalam JavaScript.

Apabila melakukan ini, kita perlu memberi perhatian kepada bagaimana @wordpress/skrip mengendalikan gaya:

• Fail bernama Style.css atau style.scss atau style.sass yang diimport ke kod JavaScript akan disusun menjadi gaya-index.css.
• Semua fail gaya lain akan disusun dan dibundel ke dalam index.css.

@pakej WordPress/Scripts dibundel menggunakan Webpack dan gaya menggunakan plugin PostCSS. PostCSS boleh dilanjutkan dengan plugin lain. Pakej skrip menggunakan plugin dari SASS, SCSS, dan AutoPrefixer, yang semuanya boleh digunakan tanpa memasang pakej tambahan.

Malah, apabila anda memulakan blok awal dengan @WordPress/create-block, anda boleh memulakan dengan fail SCSS dengan baik, anda boleh menggunakan fail ini untuk memulakan dengan cepat:

• editor.scss mengandungi semua gaya yang digunakan untuk editor backend.
• style.scss mengandungi semua gaya yang dikongsi oleh bahagian depan dan back-end.

Sekarang mari kita lakukan dengan menulis beberapa sass yang kita akan menyusun ke dalam blok CSS. Walaupun contoh -contoh ini tidak begitu sassized, saya masih menulisnya ke fail SCSS untuk menunjukkan proses penyusunan.

gaya depan dan back-end

OK, mari kita mulakan dengan gaya yang digunakan pada bahagian depan dan back-end. Pertama, kita perlu membuat src/style.scss (jika anda menggunakan @wordpress/create-block, sudah ada) dan pastikan kita mengimportnya, kita boleh melakukan ini dalam index.js:

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Buka src/style.scss dan letakkan beberapa gaya asas di dalamnya menggunakan kelas yang kami hasilkan dari atribut blok:

<code>...</code>

itu semua sekarang! Apabila kita menjalankan membina, ini disusun untuk membina/gaya.css dan dirujuk oleh editor blok dan front-end.

gaya back-end

Anda mungkin perlu menulis gaya khusus editor blok. Untuk melakukan ini, buat src/editor.scss (sekali lagi, @wordpress/create-block melakukan ini untuk anda) dan letakkan beberapa gaya di dalamnya:

npx @wordpress/create-block

kemudian mengimportnya dalam edit.js, yang mengandungi komponen edit kami (kita boleh mengimportnya di mana -mana sahaja, tetapi kerana gaya ini adalah untuk editor, lebih logik untuk mengimport komponen di sini):

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

Sekarang, apabila kita menjalankan NPM Run Build, gaya akan digunakan untuk blok dalam kedua -dua konteks:

gaya rujukan di block.json

Kami mengimport fail gaya dalam edit.js dan index.js, tetapi ingat bahawa langkah penyusunan menghasilkan dua fail CSS untuk kami dalam direktori binaan: index.css dan gaya-index.css. Kita perlu merujuk fail -fail yang dihasilkan dalam metadata blok.

mari tambahkan beberapa kenyataan ke blok.json metadata:

<code>...</code>

Run NPM Run Build Again, Pasang dan aktifkan plugin di laman web WordPress anda dan anda sudah bersedia untuk menggunakannya!

Anda boleh menjalankan binaan anda dalam mod pemantauan menggunakan NPM Run Start, dan kod anda akan disusun secara automatik setiap kali anda menukar kod dan menyimpannya.

kami hanya menyentuh permukaan

Blok sebenar menggunakan sidebar tetapan editor blok dan ciri -ciri lain yang disediakan oleh WordPress untuk mencipta pengalaman pengguna yang kaya. Juga, kerana blok sebenarnya mempunyai dua versi - edit dan simpan - anda juga perlu memikirkan cara mengatur kod anda untuk mengelakkan pertindihan kod.

Tetapi diharapkan ini membantu menghilangkan misteri proses keseluruhan membuat blok WordPress. Ini sememangnya era baru pembangunan WordPress. Mempelajari cara baru untuk melakukan sesuatu adalah sukar, tetapi saya berharap dapat melihatnya berkembang. Alat seperti @wordpress/create-blok bantuan, tetapi walaupun itu bagus untuk mengetahui apa yang dilakukannya dan mengapa.

Adakah kandungan yang kami perkenalkan di sini berubah? Sangat mungkin! Tetapi sekurang -kurangnya anda mempunyai garis dasar untuk rujukan, kerana kami terus memberi tumpuan kepada kematangan blok WordPress, termasuk amalan terbaik untuk menjadikannya.

Rujukan

Sekali lagi, matlamat saya adalah untuk merancang jalan yang cekap untuk memasuki pembangunan blok dalam era yang berkembang pesat ini, dan dokumen WordPress agak sukar untuk disimpan. Berikut adalah beberapa sumber yang saya gunakan untuk mengatur kandungan ini:

• Konsep Utama (Manual Editor Blok WordPress)
• Buat tutorial blok (Manual Editor Blok WordPress)
• metadata di block.json (manual editor blok WordPress)
• Kod Sumber Blok Teras (WordPress GitHub)
• konfigurasi webpack yang digunakan dalam pakej @wordpress/skrip (WordPress github)
• Backend Engineer Learning to Build Block Editor Blocks, Bahagian 1 (Tom McFarlin)
• Penyiaran Live Twitch Ryan Welcher (Ryan adalah penyokong pemaju automatik)

Atas ialah kandungan terperinci Bermula dengan Pembangunan Blok WordPress. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!