Mari kita akui bahwa mengembangkan untuk WordPress itu aneh sekarang. Baik Anda baru mengenal WordPress atau telah bekerja dengannya selama ribuan tahun, pengenalan fitur “Full-Site Editing” (FSE), termasuk Blok Editor (WordPress 5.0) dan Editor Situs (WordPress 5.9), telah mengubah cara tradisional kami membangun tema dan plugin WordPress.
Meskipun sudah lima tahun sejak kami bertemu Editor Blok untuk pertama kalinya, mengembangkannya sulit karena dokumentasinya kurang atau ketinggalan zaman. Itu lebih merupakan pernyataan tentang seberapa cepat fitur FSE bergerak, sesuatu Geoff mengeluh dalam sebuah posting baru-baru ini.
Contoh kasus: Pada tahun 2018, an seri pengantar tentang masuk ke pengembangan Gutenberg diterbitkan di sini di CSS-tricks. Waktu telah berubah sejak itu, dan, sementara gaya pengembangan itu masih berfungsi, itu adalah tidak dianjurkan lagi (selain itu, create-guten-block proyek yang menjadi dasarnya juga tidak lagi dipertahankan).
Dalam artikel ini, saya bermaksud membantu Anda memulai pengembangan blok WordPress dengan cara yang mengikuti metodologi saat ini. Jadi, ya, banyak hal bisa berubah setelah ini diterbitkan. Tetapi saya akan mencoba dan memfokuskannya dengan cara yang mudah-mudahan dapat menangkap esensi dari pengembangan blok, karena meskipun alat dapat berkembang seiring waktu, ide inti cenderung tetap sama.
Mari kita mulai dengan mengungkapkan beberapa kebingungan dengan apa yang kami maksud dengan istilah seperti blok. Semua pengembangan yang masuk ke fitur-fitur ini yang mengarah ke WordPress 5.0 diberi nama kode “Gutenberg” — Anda tahu, penemu mesin cetak.
Sejak itu, "Gutenberg" telah digunakan untuk menggambarkan segala sesuatu yang berhubungan dengan blok, termasuk Editor Blok dan Editor Situs, sehingga menjadi berbelit-belit sampai-sampai beberapa orang meremehkan nama. Untuk melengkapi semua ini, ada plugin Gutenberg di mana fitur eksperimental diuji untuk kemungkinan penyertaan. Dan jika Anda berpikir memanggil semua "Pengeditan Situs Penuh" ini akan menyelesaikan masalah, ada kekhawatiran dengan itu juga.
Jadi, ketika kita merujuk ke "blok" dalam artikel ini, yang kita maksud adalah komponen untuk membuat konten di Editor Blok WordPress. Blok dimasukkan ke dalam halaman atau posting dan menyediakan struktur untuk jenis konten tertentu. WordPress dikirimkan dengan beberapa blok "inti" untuk jenis konten umum, seperti Paragraf, Daftar, Gambar, Video, dan Audio, untuk beberapa nama.
Terlepas dari blok inti ini, kami juga dapat membuat blok khusus. Itulah yang dimaksud dengan pengembangan blok WordPress (ada juga pemfilteran blok inti untuk memodifikasi fungsinya, tetapi Anda mungkin belum membutuhkannya).
Blok apa yang dilakukan?
Sebelum kita masuk ke dalam membuat blok, pertama-tama kita harus memahami bagaimana blok bekerja secara internal. Itu pasti akan menyelamatkan kita dari banyak frustrasi di kemudian hari.
Cara saya berpikir tentang blok agak abstrak: bagi saya, blok adalah entitas, dengan beberapa properti (disebut atribut), yang mewakili beberapa konten. Saya tahu ini terdengar sangat samar, tetapi tetaplah bersama saya. Sebuah blok pada dasarnya memanifestasikan dirinya dalam dua cara: sebagai antarmuka grafis di editor blok atau sebagai potongan data dalam database.
Saat Anda membuka Editor Blok WordPress dan memasukkan blok, katakanlah blok Pullquote, Anda mendapatkan antarmuka yang bagus. Anda dapat mengklik antarmuka itu dan mengedit teks yang dikutip. Panel Pengaturan di sisi kanan UI Editor Blok menyediakan opsi untuk menyesuaikan teks dan mengatur tampilan blok.
Ketika Anda selesai membuat pullquote mewah Anda dan tekan Publish, seluruh posting akan disimpan dalam database di wp_posts meja. Ini bukan sesuatu yang baru karena Gutenberg. Begitulah cara kerjanya — WordPress menyimpan konten posting di tabel yang ditentukan dalam database. Tapi yang baru adalah itu representasi dari blok Pullquote adalah bagian dari konten yang disimpan di post_content bidang wp_posts tabel.
Seperti apa representasi ini? Lihat:
It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.
The Encyclopedia of world peas
Terlihat seperti HTML biasa, kan?! Ini, dalam istilah teknis, adalah blok "berseri". Perhatikan data JSON di komentar HTML, "textAlign": "right". Itu adalah atribut — properti yang terkait dengan blok.
Katakanlah Anda menutup Editor Blok, dan kemudian beberapa waktu kemudian, buka lagi. Konten dari yang relevan post_content bidang diambil oleh Editor Blok. Editor kemudian mem-parsing konten yang diambil, dan di mana pun ia menemukan ini:
...
… ia berkata dengan lantang pada dirinya sendiri:
OK, itu tampak seperti blok Pullquote bagi saya. Hmm.. itu punya atribut juga… Saya punya file JavaScript yang memberitahu saya bagaimana membangun antarmuka grafis untuk blok Pullquote di editor dari atributnya. Saya harus melakukannya sekarang untuk membuat blok ini dengan segala kemuliaannya.
Sebagai pengembang blok, tugas Anda adalah:
Beri tahu WordPress bahwa Anda ingin mendaftarkan jenis blok tertentu, dengan detail ini dan itu.
Berikan file JavaScript ke Editor Blok yang akan membantunya merender blok di editor sambil juga "membuat serial" untuk menyimpannya di database.
Sediakan sumber daya tambahan yang dibutuhkan blok untuk fungsionalitas yang tepat, misalnya gaya dan font.
Satu hal yang perlu diperhatikan adalah bahwa semua konversi ini dari data serial ke antarmuka grafis — dan sebaliknya — hanya terjadi di Editor Blok. Di ujung depan, konten ditampilkan persis seperti cara penyimpanannya. Oleh karena itu, dalam arti tertentu, blok adalah cara yang bagus untuk memasukkan data ke dalam database.
Mudah-mudahan, ini memberi Anda kejelasan tentang cara kerja blok.
Memulai Pengembangan Blok WordPress
Blok hanyalah plugin
Blok hanyalah plugin. Nah, secara teknis, Anda bisa letakkan blok di tema dan Anda bisa menempatkan beberapa blok dalam sebuah plugin. Tapi, lebih sering daripada tidak, jika Anda ingin membuat blok, Anda akan membuat plugin. Jadi, jika Anda pernah membuat plugin WordPress, maka Anda sudah setengah jalan untuk memiliki pegangan dalam membuat blok WordPress.
Tapi mari kita asumsikan sejenak bahwa Anda belum pernah menyiapkan plugin WordPress, apalagi blok. Di mana Anda bahkan mulai?
Menyiapkan blok
Kami telah membahas apa itu blok. Mari kita mulai menyiapkan segalanya untuk membuatnya.
Pastikan Anda telah menginstal Node
Ini akan memberi Anda akses ke npm dan npx perintah, dimana npm menginstal dependensi blok Anda dan membantu mengkompilasi hal-hal, sementara npx menjalankan perintah pada paket tanpa menginstalnya. Jika Anda menggunakan macOS, Anda mungkin sudah memiliki Node dan dapat menggunakannya nvm untuk memperbarui versi. Jika Anda menggunakan Windows, Anda harus unduh dan instal Node.
Buat folder proyek
Sekarang, Anda mungkin menemukan tutorial lain yang langsung masuk ke baris perintah dan menginstruksikan Anda untuk menginstal paket yang disebut @wordpress/create-block. Paket ini sangat bagus karena mengeluarkan folder proyek yang sepenuhnya terbentuk dengan semua dependensi dan alat yang Anda butuhkan untuk mulai mengembangkan.
Saya pribadi mengikuti rute ini ketika menyiapkan blok saya sendiri, tetapi menghibur saya sejenak karena saya ingin memotong hal-hal yang beropini yang diperkenalkannya dan fokus hanya pada bit yang diperlukan demi memahami lingkungan pengembangan dasar.
Ini adalah file yang ingin saya panggil secara khusus:
readme.txt: Ini seperti tampilan depan direktori plugin, biasanya digunakan untuk menjelaskan plugin dan memberikan detail tambahan tentang penggunaan dan pemasangan. Jika Anda mengirimkan blok Anda ke Direktori Plugin WordPress, file ini membantu mengisi halaman plugin. Jika Anda berencana membuat repo GitHub untuk plugin blok Anda, maka Anda juga dapat mempertimbangkan a README.md file dengan informasi yang sama sehingga ditampilkan dengan baik di sana.
package.json: Ini mendefinisikan paket Node yang diperlukan untuk pengembangan. Kami akan membukanya saat kami masuk ke instalasi. Dalam pengembangan plugin WordPress klasik, Anda mungkin terbiasa bekerja dengan Composer dan a composer.json file sebagai gantinya. Ini setara dengan itu.
plugin.php: Ini adalah file plugin utama dan, ya, ini adalah PHP klasik! Kami akan menempatkan header plugin dan metadata kami di sini dan menggunakannya untuk mendaftarkan plugin.
Selain file-file ini, ada juga src direktori, yang seharusnya berisi kode sumber blok kita.
Memiliki file-file ini dan src direktori adalah semua yang Anda butuhkan untuk memulai. Dari grup itu, perhatikan bahwa kami secara teknis hanya membutuhkan satu file (plugin.php) untuk membuat plugin. Sisanya memberikan informasi atau digunakan untuk mengelola lingkungan pengembangan.
Yang disebutkan di atas @wordpress/create-block paket scaffolds file-file ini (dan banyak lagi) untuk kami. Anda dapat menganggapnya sebagai alat otomatisasi alih-alih kebutuhan. Terlepas dari itu, itu memang membuat pekerjaan lebih mudah, sehingga Anda dapat mengambil kebebasan perancah blok dengannya dengan menjalankan:
npx @wordpress/create-block
Instal dependensi blok
Dengan asumsi Anda memiliki tiga file yang disebutkan di bagian sebelumnya, saatnya untuk menginstal dependensi. Pertama, kita perlu menentukan dependensi yang kita perlukan. Kami melakukannya dengan mengedit package.json. Saat menggunakan @wordpress/create-block utilitas, berikut ini dibuat untuk kami (komentar ditambahkan; JSON tidak mendukung komentar, jadi hapus komentar jika Anda menyalin kode):
{
// Defines the name of the project
"name": "block-example",
// Sets the project version number using semantic versioning
"version": "0.1.0",
// A brief description of the project
"description": "Example block scaffolded with Create Block tool.",
// You could replace this with yourself
"author": "The WordPress Contributors",
// Standard licensing information
"license": "GPL-2.0-or-later",
// Defines the main JavaScript file
"main": "build/index.js",
// Everything we need for building and compiling the plugin during development
"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"
},
// Defines which version of the scripts packages are used (24.1.0 at time of writing)
// https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
}
}
Grafik @wordpress/scripts paket adalah ketergantungan utama di sini. Seperti yang Anda lihat, itu adalah devDependency artinya membantu dalam pembangunan. Bagaimana? Ini mengekspos wp-scripts biner yang dapat kita gunakan untuk mengkompilasi kode kita, dari src direktori ke build direktori, antara lain.
Ada sejumlah paket lain yang dikelola WordPress untuk berbagai tujuan. Misalnya, @wordpress/components paket menyediakan beberapa pra-fab UI komponen untuk Editor Blok WordPress yang dapat digunakan untuk menciptakan pengalaman pengguna yang konsisten untuk blok Anda yang selaras dengan standar desain WordPress.
Anda sebenarnya tidak perlu untuk menginstal paket-paket ini, bahkan jika Anda ingin menggunakannya. Ini karena ini @wordpress dependensi tidak dibundel dengan kode blok Anda. Sebaliknya, apapun import pernyataan referensi kode dari paket utilitas — seperti @wordpress/components — digunakan untuk membuat file "aset", selama kompilasi. Selain itu, pernyataan impor ini diubah menjadi pernyataan yang memetakan impor ke properti objek global. Sebagai contoh, import { __ } from "@wordpress/i18n" dikonversi ke versi yang diperkecil dari const __ = window.wp.i18n.__. (window.wp.i18n menjadi objek yang dijamin akan tersedia dalam lingkup global, setelah yang sesuai i18n file paket diantrekan).
Selama pendaftaran blok di file plugin, file "aset" secara implisit digunakan untuk memberi tahu WordPress dependensi paket untuk blok tersebut. Ketergantungan ini secara otomatis diantrekan. Semua ini diurus di belakang layar, asalkan Anda menggunakan scripts kemasan. Meskipun demikian, Anda masih dapat memilih untuk menginstal dependensi secara lokal untuk penyelesaian kode dan info parameter di . Anda package.json File:
Sekarang package.json sudah diatur, kita harus dapat menginstal semua dependensi itu dengan menavigasi ke folder proyek di baris perintah dan menjalankan npm install.
Memulai Pengembangan Blok WordPress
Tambahkan tajuk plugin
Jika Anda berasal dari pengembangan plugin WordPress klasik, maka Anda mungkin tahu bahwa semua plugin memiliki blok informasi di file plugin utama yang membantu WordPress mengenali plugin dan menampilkan informasi tentangnya di layar Plugin dari admin WordPress.
Inilah yang terjadi @wordpress/create-block dibuat untuk saya untuk plugin yang secara kreatif disebut "Hello World":
<?php
/**
* Plugin Name: Block Example
* Description: Example block scaffolded with Create Block tool.
* Requires at least: 5.9
* Requires PHP: 7.0
* Version: 0.1.0
* Author: The WordPress Contributors
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*
* @package create-block
*/
Itu ada di file plugin utama, yang dapat Anda panggil apa pun yang Anda suka. Anda mungkin menyebutnya sesuatu yang umum seperti index.php or plugin.php. itu create-block package secara otomatis menyebutnya apa pun yang Anda berikan sebagai nama proyek saat menginstalnya. Karena saya menyebut contoh ini "Contoh Blok", paket itu memberi kami block-example.php file dengan semua hal ini.
Anda akan ingin mengubah beberapa detail, seperti menjadikan diri Anda sebagai penulis dan yang lainnya. Dan tidak semua itu perlu. Jika saya menggulirkan ini dari "awal", maka mungkin terlihat lebih dekat dengan ini:
<?php
/**
* Plugin Name: Block Example
* Plugin URI: https://css-tricks.com
* Description: An example plugin for learning WordPress block development.
* Version: 1.0.0
* Author: Arjun Singh
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*/
Kami telah melihat file yang diperlukan untuk blok kami. Tetapi jika Anda menggunakan @wordpress/create-block, Anda akan melihat banyak file lain di folder proyek.
build/: Folder ini menerima aset yang dikompilasi saat memproses file untuk penggunaan produksi.
node_modules: Ini menampung semua dependensi pengembangan yang kami instal saat dijalankan npm install.
src/: Folder ini menyimpan kode sumber plugin yang dikompilasi dan dikirim ke build direktori. Kita akan melihat masing-masing file di sini sebentar lagi.
.editorconfig: Ini berisi konfigurasi untuk menyesuaikan editor kode Anda untuk konsistensi kode.
.gitignore: Ini adalah file repo standar yang mengidentifikasi file lokal yang harus dikecualikan dari pelacakan kontrol versi. Milikmu node_modules pasti harus dimasukkan di sini.
package-lock.json: Ini adalah file yang dibuat secara otomatis yang berisi untuk melacak pembaruan ke paket yang diperlukan yang kami instal npm install.
Blokir metadata
Saya ingin menggali ke dalam src direktori dengan Anda tetapi akan fokus pertama hanya pada satu file di dalamnya: block.json. Jika Anda telah menggunakan create-block , itu sudah ada untuk Anda; jika tidak, lanjutkan dan buat. WordPress berusaha keras untuk menjadikan ini cara standar dan kanonik untuk mendaftarkan blok dengan menyediakan metadata yang menyediakan konteks WordPress untuk mengenali blok dan merendernya di Editor Blok.
Inilah yang terjadi @wordpress/create-block dihasilkan untuk saya:
Sebenarnya ada a sekumpulan informasi yang berbeda kami dapat menyertakan di sini, tetapi yang sebenarnya diperlukan hanyalah name dan title. Versi super minimal mungkin terlihat seperti ini:
$schema mendefinisikan format skema yang digunakan untuk memvalidasi konten dalam file. Kedengarannya seperti hal yang diperlukan, tetapi ini benar-benar opsional karena memungkinkan editor kode pendukung untuk memvalidasi sintaks dan memberikan kemampuan tambahan lainnya, seperti petunjuk tooltip dan pelengkapan otomatis.
apiVersion mengacu pada versi mana dari Blokir API plugin yang digunakan. Hari ini, Versi 2 adalah yang terbaru.
name adalah string unik yang diperlukan yang membantu mengidentifikasi plugin. Perhatikan bahwa saya telah mengawali ini dengan css-tricks/ yang saya gunakan sebagai namespace untuk membantu menghindari konflik dengan plugin lain yang mungkin memiliki nama yang sama. Anda mungkin memilih untuk menggunakan sesuatu seperti inisial Anda sebagai gantinya (mis as/block-example).
title adalah bidang wajib lainnya, dan itu menetapkan nama yang digunakan di mana pun plugin ditampilkan.
category mengelompokkan blok dengan blok lain dan menampilkannya bersama di Editor Blok. Kategori yang ada saat ini meliputi text, media, design, widgets, theme, dan embed, dan Anda bahkan dapat membuat kategori khusus.
icon memungkinkan Anda memilih sesuatu dari Perpustakaan Dashicons untuk mewakili blok Anda secara visual di Editor Blok. Saya menggunakan format-quote icon](https://developer.wordpress.org/resource/dashicons/#format-quote) karena kami membuat semacam pullquote sendiri dalam contoh ini. Sangat menyenangkan kami dapat memanfaatkan ikon yang ada daripada harus membuat ikon kami sendiri, meskipun itu tentu saja mungkin.
editorScript adalah tempat file JavaScript utama, index.js, hidup.
Daftarkan blok
Satu hal terakhir sebelum kita menekan kode yang sebenarnya, dan itu adalah mendaftarkan plugin. Kami baru saja menyiapkan semua metadata itu dan kami membutuhkan cara agar WordPress dapat menggunakannya. Dengan begitu, WordPress tahu di mana menemukan semua aset plugin sehingga bisa diantrekan untuk digunakan di Editor Blok.
Mendaftarkan blok adalah proses dua kali lipat. Kita perlu mendaftarkannya di PHP dan JavaScript. Untuk sisi PHP, buka file plugin utama (block-example.php dalam hal ini) dan tambahkan yang berikut tepat setelah header plugin:
Inilah yang create-block utilitas yang dihasilkan untuk saya, jadi itu sebabnya fungsinya dinamai seperti itu. Kita bisa menggunakan nama yang berbeda. Kuncinya, sekali lagi, adalah menghindari konflik dengan plugin lain, jadi sebaiknya gunakan namespace Anda di sini untuk membuatnya seunik mungkin:
Mengapa kita menunjuk ke build direktori jika block.json dengan semua metadata blok ada di src? Itu karena kode kita masih perlu dikompilasi. Itu scripts paket memproses kode dari file di src direktori dan menempatkan file yang dikompilasi yang digunakan dalam produksi di build direktori, sementara juga menyalinblock.jsonfillet dalam proses.
Baiklah, mari kita beralih ke sisi JavaScript untuk mendaftarkan blok. Buka src/index.js dan pastikan tampilannya seperti ini:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});
Kami masuk ke React dan JSX land! Ini memberitahu WordPress untuk:
Impor registerBlockType modul dari @wordpress/blocks paket.
Impor metadata dari block.json.
Impor Edit dan Save komponen dari file yang sesuai. Kami akan memasukkan kode ke dalam file-file itu nanti.
Daftarkan blok, dan gunakan Edit dan Save komponen untuk merender blok dan menyimpan isinya ke database.
Ada apa dengan edit dan save fungsi? Salah satu nuansa pengembangan blok WordPress adalah membedakan "ujung belakang" dari "ujung depan" dan fungsi-fungsi ini digunakan untuk merender konten blok dalam konteks tersebut, di mana edit menangani rendering back-end dan save menulis konten dari Editor Blok ke database untuk merender konten di ujung depan situs.
Tes cepat
Kita dapat melakukan beberapa pekerjaan cepat untuk melihat blok kita bekerja di Editor Blok dan dirender di ujung depan. Mari buka index.js lagi dan gunakan edit dan save berfungsi untuk mengembalikan beberapa konten dasar yang menggambarkan cara kerjanya:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
const { name } = metadata;
registerBlockType(name, {
edit: () => {
return (
"Hello from the Block Editor"
);
},
save: () => {
return (
"Hello from the front end"
);
}
});
Ini pada dasarnya adalah versi sederhana dari kode yang sama yang kita miliki sebelumnya, hanya saja kita menunjuk langsung ke metadata di block.json untuk mengambil nama blok, dan meninggalkan Edit dan Save komponen karena kami menjalankan fungsi langsung dari sini.
Kita dapat mengkompilasi ini dengan menjalankan npm run build di baris perintah. Setelah itu, kami memiliki akses ke blok yang disebut "Contoh Blok" di Editor Blok:
Jika kami menjatuhkan blok ke area konten, kami mendapatkan pesan yang kami kembalikan dari edit fungsi:
Memulai Pengembangan Blok WordPress
Jika kita menyimpan dan memublikasikan postingan, kita akan mendapatkan pesan yang kita kembalikan dari save fungsi saat melihatnya di ujung depan:
Memulai Pengembangan Blok WordPress
Membuat blok
Sepertinya semuanya terhubung! Kita dapat kembali ke apa yang kita miliki index.js sebelum pengujian sekarang setelah kami mengonfirmasi semuanya berfungsi:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});
Perhatikan bahwa edit dan save fungsi terikat ke dua file yang ada di src direktori itu @wordpress/create-block dihasilkan untuk kami dan menyertakan semua impor tambahan yang kami butuhkan di setiap file. Lebih penting lagi, file-file itu menetapkan Edit dan Save komponen yang berisi markup blok.
Markup ujung belakang (src/edit.js)
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Edit() {
return (
{__("Hello from the Block Editor", "block-example")}
);
}
Lihat apa yang kami lakukan di sana? Kami mengimpor alat peraga dari @wordpress/block-editor package yang memungkinkan kita untuk menghasilkan kelas yang bisa kita gunakan nanti untuk styling. Kami juga mengimpor __ fungsi internasionalisasi, untuk menangani terjemahan.
Memulai Pengembangan Blok WordPress
Markup ujung depan (src/save.js)
Ini menciptakan a Save komponen dan kami akan menggunakan hal yang hampir sama dengan src/edit.js dengan teks yang sedikit berbeda:
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Save() {
return (
{__("Hello from the front end", "block-example")}
);
}
Sekali lagi, kami mendapatkan kelas Nice yang dapat kami gunakan di CSS kami:
Memulai Pengembangan Blok WordPress
Blok gaya
Kami baru saja membahas cara menggunakan alat peraga blok untuk membuat kelas. Anda membaca artikel ini di situs tentang CSS, jadi saya merasa seperti saya akan kehilangan sesuatu jika kami tidak secara khusus membahas cara menulis gaya blok.
Membedakan gaya depan dan belakang
Jika Anda melihat block.json dalam src direktori Anda akan menemukan dua bidang yang terkait dengan gaya:
editorStyle menyediakan jalur ke gaya yang diterapkan ke bagian belakang.
style adalah jalur untuk gaya bersama yang diterapkan pada bagian depan dan belakang.
Ingat bahwa @wordpress/scripts paket salinan block.json file ketika memproses kode di /src direktori dan menempatkan aset yang dikompilasi di /build direktori. Ini adalah build/block.json file yang digunakan untuk mendaftarkan blok. Itu berarti jalan apa pun yang kami sediakan di src/block.json harus ditulis relatif terhadap build/block.json.
Menggunakan Sass
Kita bisa meletakkan beberapa file CSS di build direktori, referensi jalur di src/block.json, menjalankan build, dan menyebutnya sehari. Tapi itu tidak memanfaatkan kekuatan penuh dari @wordpress/scripts proses kompilasi, yang mampu mengkompilasi Sass ke dalam CSS. Sebagai gantinya, kami menempatkan file gaya kami di src direktori dan mengimpornya dalam JavaScript.
Saat melakukan itu, kita harus memperhatikan caranya @wordpress/scripts gaya proses:
File bernama style.css or style.scss or style.sass, diimpor ke kode JavaScript, dikompilasi ke style-index.css.
Semua file gaya lainnya dikompilasi dan digabungkan menjadi index.css.
Grafik @wordpress/scripts menggunakan paket paket web untuk bundling dan @wordpress/scripts menggunakan Plugin PostCSS untuk bekerja untuk gaya pemrosesan. PostCSS dapat diperpanjang dengan plugin tambahan. Itu scripts package menggunakan yang untuk Sass, SCSS, dan Autoprefixer, yang semuanya tersedia untuk digunakan tanpa menginstal paket tambahan.
Faktanya, ketika Anda memutar blok awal Anda dengan @wordpress/create-block, Anda mendapatkan permulaan yang bagus dengan file SCSS yang dapat Anda gunakan untuk memulai:
editor.scss berisi semua gaya yang diterapkan ke editor back-end.
style.scss berisi semua gaya yang dibagikan oleh bagian depan dan belakang.
Sekarang mari kita lihat pendekatan ini beraksi dengan menulis sedikit Sass yang akan kita kompilasi ke dalam CSS untuk blok kita. Meskipun contoh-contohnya tidak akan terlalu Sass-y, saya masih menulisnya ke file SCSS untuk mendemonstrasikan proses kompilasi.
Depan dan gaya ujung belakang
Oke, mari kita mulai dengan gaya yang diterapkan pada bagian depan dan belakang. Pertama, kita perlu membuat src/style.scss (sudah ada jika Anda menggunakan @wordpress/create-block) dan pastikan kami mengimpornya, yang dapat kami lakukan di index.js:
import "./style.scss";
Buka src/style.scss dan letakkan beberapa gaya dasar di sana menggunakan kelas yang dibuat untuk kita dari props blok:
Itu saja untuk saat ini! Saat kami menjalankan build, ini dikompilasi menjadi build/style.css dan direferensikan oleh Editor Blok dan ujung depan.
Gaya ujung belakang
Anda mungkin perlu menulis gaya yang khusus untuk Editor Blok. Untuk itu, buat src/editor.scss (lagi, @wordpress/create-block melakukan ini untuk Anda) dan letakkan beberapa gaya di sana:
Kemudian impor di edit.js, yang merupakan file yang berisi Edit komponen (kita dapat mengimpornya di mana pun kita mau, tetapi karena gaya ini untuk editor, lebih logis untuk mengimpor komponen di sini):
import "./editor.scss";
Sekarang ketika kita berlari npm run build, gaya diterapkan ke blok di kedua konteks:
Memulai Pengembangan Blok WordPressMemulai Pengembangan Blok WordPress
Gaya referensi di block.json
Kami mengimpor file styling di edit.js dan index.js, tetapi ingat bahwa langkah kompilasi menghasilkan dua file CSS untuk kita di build direktori: index.css dan style-index.css masing-masing. Kita perlu mereferensikan file yang dihasilkan ini dalam metadata blok.
Mari kita tambahkan beberapa pernyataan ke block.json metadata:
Run npm run build sekali lagi, instal dan aktifkan plugin di situs WordPress Anda, dan Anda siap menggunakannya!
Anda dapat menggunakan npm run start untuk menjalankan build Anda dalam mode tontonan, secara otomatis mengkompilasi kode Anda setiap kali Anda membuat perubahan pada kode Anda dan menyimpannya.
Kami menggaruk permukaan
Blok sebenarnya menggunakan bilah sisi Pengaturan Editor Blok dan fitur lain yang disediakan WordPress untuk menciptakan pengalaman pengguna yang kaya. Selain itu, fakta bahwa pada dasarnya ada dua versi blok kami — edit dan save — Anda juga perlu memikirkan bagaimana Anda mengatur kode Anda untuk menghindari duplikasi kode.
Tapi semoga ini membantu menghilangkan kebingungan proses umum untuk membuat blok WordPress. Ini benar-benar era baru dalam pengembangan WordPress. Sulit untuk mempelajari cara-cara baru dalam melakukan sesuatu, tetapi saya menantikan untuk melihat bagaimana hal itu berkembang. Alat seperti @wordpress/create-block bantuan, tetapi meskipun demikian, senang mengetahui persis apa yang dilakukannya dan mengapa.
Apakah hal-hal yang kita bahas di sini akan berubah? Yang paling disukai! Tetapi setidaknya Anda memiliki dasar untuk bekerja saat kami terus mengamati blok WordPress matang, termasuk praktik terbaik untuk membuatnya.
Referensi
Sekali lagi, tujuan saya di sini adalah untuk memetakan jalur yang efisien untuk masuk ke pengembangan blok di musim ini di mana segala sesuatunya berkembang dengan cepat dan dokumentasi WordPress mengalami sedikit kesulitan untuk mengejar ketinggalan. Berikut adalah beberapa sumber yang saya gunakan untuk menyatukan ini:
