Advertisement
  1. Code
  2. WordPress Gutenberg

Gutenberg blok dengan membuat-guten-blok bangunan

Scroll to top
Read Time: 6 min

Indonesian (Bahasa Indonesia) translation by Nur Fitrina (you can also view the original English article)

Gutenberg adalah editor WordPress baru, dan semua orang berbicara tentang hal itu. Ini telah memperkenalkan cara baru untuk menulis konten dengan WordPress. Jadi tidak hanya dapat pengembang memanfaatkan tata letak blok-model, tetapi pengguna akhir juga akan mampu menciptakan layout halaman dinamis dengan itu.

Namun, kustom blok bangunan dengan Gutenberg dapat menjadi cukup merepotkan bagi para pengembang yang ingin mengintegrasikan ke dalam proyek-proyek mereka. Tutorial ini akan memiliki toolkit yang luar biasa-membuat-guten-blok β€” melalui yang Anda dapat membuat Gutenberg blok dalam hitungan menit.

Jadi, mari kita mulai!

Memperkenalkan membuat-guten-blok

membuat guten-blok (cgb) adalah nol-konfigurasi pengembang toolkit untuk membangun WordPress Gutenberg blok. Dibangun oleh Ahmad Awais β€” suami saya dan advokat pengembang open source yang secara teratur memberikan kontribusi untuk inti WordPress β€” toolkit telah mengurangi kesulitan membuat blok Gutenberg. Itu adalah nol-config, dan itu menciptakan blok dengan tidak ada lock-dalam dan hanya satu ketergantungan.

Untuk membangun sebuah blok Gutenberg, Anda perlu terlebih dahulu membuat sebuah plugin WordPress. Untuk melakukannya, Anda akan mulai dengan mengkonfigurasi Babel 6/7/8/berikutnya, ESLint, Webpack, bereaksi, ES, dll, dan kemudian Anda dapat akhirnya mulai pengkodean blok Anda. Dan Anda harus terus memperbarui konfigurasi perkakas sebagai paket yang mendukung dan perpustakaan.

Ini memperlambat pembangunan, agar Ahmad telah tersembunyi semua konfigurasi ini dalam paket dioptimalkan disebut cgb-script, yang Anda temukan di folder akar blok. Ini adalah ketergantungan tunggal yang saya sebutkan sebelumnya.

Jadi, bukannya memperbarui segala sesuatu secara terpisah dan secara teratur, pakage cgb-scripts terus up to date, dan dengan cara ini Anda dapat selalu memperbarui tanpa membuat perubahan apapun untuk kode Anda. Itu adalah satu hal yang saya suka paling tentang hal itu.

Cerita panjang pendek...

membuat-guten-blok adalah pengembang masuk ke nol-config. toolkit untuk membangun WordPress Gutenberg blok dalam hitungan menit tanpa konfigurasi Webpack, bereaksi, Modern JavaScript, ESLint, Babel, dll-proyek GitHub situs

Fitur

Sekarang mari kita menggali ke beberapa alat yang paling menonjol fitur.

Suasana Modern Dev

membuat-guten-blok menawarkan lingkungan up-to-date dev untuk mengembangkan sebuah plugin WordPress Gutenberg. Dikemas dengan fitur seperti:

  • bahasa Auto CSS
  • Sintaks bereaksi BEJ, dan ES6 +
  • Proses build Webpack dev/produksi
  • bundling JS, CSS, dan gambar untuk produksi dengan sumber-peta

Satu ketergantungan

Pemeliharaan dan update dari semua alat yang disebutkan di atas akan ditangani oleh satu membangun ketergantungan: paket cgb-script. Jadi, meskipun menggunakan Webpack, Babel, ESLint, dan proyek-proyek luar biasa lainnya, Anda masih dapat menikmati pengalaman pengembangan bebas repot dengan paket ini, yang akan tetap up to date sepanjang waktu.

Tidak ada konfigurasi

Sementara menggunakan toolkit membuat-guten-blok, Anda tidak perlu mengkonfigurasi apapun. Sebagian besar hal-hal yang Anda butuhkan untuk lingkungan pengembangan dan produksi datang pra-dikonfigurasi.

Tidak ada Lock-In

Salah satu kekhawatiran pengembang yang mungkin memiliki sebelum mereka mulai menggunakan cgb toolkit adalah apa yang harus dilakukan jika sebuah proyek yang membutuhkan beberapa penyesuaian, karena alat ini telah dikonfigurasikan untuk bekerja dengan cara tertentu. Jadi, Kabar baiknya adalah bahwa setiap saat Anda dapat "eject" proyek Anda dan menyesuaikannya β€” tapi kemudian Anda akan perlu untuk konfigurasi Anda sendiri.

Untuk mengeluarkan proyek Anda, menjalankan satu perintah, dan semua konfigurasi dan membangun dependensi akan dipindahkan secara langsung ke dalam proyek Anda, dan Anda dapat mulai persis di mana kau pergi.

Persiapan

Persiapan dan bekerja dengan membuat-blok-guten membuat toolkit yang sangat sederhana. Hanya menginstalnya dan kemudian jalankan untuk menciptakan sebuah Gutenberg blok plugin untuk WordPress. Tapi sebelum itu, ada beberapa prasyarat yang perlu diatur. Jadi, pastikan Anda memiliki yang berikut:

  • Install WordPress lokal
  • Dasar WordPress theme
  • salinan default Gutenberg plugin diinstal dan diaktifkan

Selanjutnya, ikuti langkah-langkah sederhana:

1. Instal Node.js & NPM

Anda perlu memiliki node.js dan npm diinstal. Jika mereka sudah diinstal, kemudian melompat ke langkah berikutnya. Jika tidak, download Node.js dan menginstalnya. Untuk memverifikasi instalasi, ketik perintah berikut.

2. Pasang membuat-guten-blok

Sekarang, Anda akan menginstal blok-guten menciptakan dalam direktori /wp.local/wp-content/plugins/ WordPress lokal Anda. Juga, Anda akan memberikan nama untuk plugin yang Anda ingin membuat. Jalankan perintah berikut dan menunggu untuk beberapa waktu karena mungkin mengambil beberapa menit untuk menginstal.

Perintah ini akan membuat sebuah direktori plugin yang disebut demo-blok di dalam folder saat ini. Ini juga menciptakan struktur folder yang diperlukan dan menginstal dependensi dev.

Ini menciptakan struktur folder seperti ini:

3. Jalankan mulai & membangun perintah

Setelah menyelesaikan setup instalasi, buka folder proyek Anda dan menjalankan script mulai dengan mengetik perintah berikut:

Npm start menjalankan perintah plugin Anda dalam pengembangan mode. Ada juga perintah npm run build yang membantu Anda menjalankan plugin Anda dalam mode produksi. Baca terus untuk menemukan rincian tentang tiga fungsi yang berbeda yang dapat Anda lakukan dengan cgb toolkit.

Alur kerja untuk membuat-guten-blok

Ketika Anda bekerja dengan script ini, Anda akan bekerja dengan tiga skrip yang akan membantu Anda develop, build, dan eject plugin Anda.

Npm start Script

Perintah ini digunakan untuk mengkompilasi dan menjalankan blok Gutenberg sementara Anda bekerja dalam modus pembangunan. Juga watches untuk perubahan dan melaporkan kembali dengan kesalahan dalam kode Anda.

npm start for cgb toolkitnpm start for cgb toolkitnpm start for cgb toolkit

npm run build Script

Untuk bekerja dalam mode produksi, jalankan perintah berikut di dalam dist folder. Di sini, Anda akan melihat pesan membangun, kesalahan, dan serat peringatan di konsol. Perintah ini berjalan hanya sekali dan melaporkan kembali ukuran file gzip dari kode yang dihasilkan.

npm run build for cgb toolkitnpm run build for cgb toolkitnpm run build for cgb toolkit

npm run ejectΒ Script

Jika setiap saat Anda ingin mengeluarkan plugin Anda dari membuat-guten-blok, menjalankan perintah ini. Ini memungkinkan Anda menyesuaikan proyek sesuai dengan kebutuhan Anda. Namun, ini adalah proses sekali jalan dan tidak dapat dikembalikan.

Setelah Anda telah ejected, Anda harus memperbarui dan memelihara semua dependensi proyek Anda sendiri.

Bekerja dengan membuat-guten-blok

Setelah sukses instalasi dan konfigurasi, Anda dapat membuka dashboard WordPress Anda dan pergi ke bagian plugin. Di sini Anda dapat menemukan sebuah plugin baru yang disebut demo-blok-CGB Gutenberg blok Plugin ditambahkan. Klik tombol Aktifkan dan Anda baik untuk pergi.

demo block with create-guten-block toolkitdemo block with create-guten-block toolkitdemo block with create-guten-block toolkit

Sekarang pergi ke posting > Add New untuk membuka Gutenberg editor. (Ingat Gutenberg plugin adalah prasyarat untuk membuat-guten-blok toolkit.)

Add new post in GutenbergAdd new post in GutenbergAdd new post in Gutenberg

Klik pada ikon + untuk mengakses semua blok. Di bilah penelusuran, ketik CGB dan Anda akan menemukan blok Gutenberg ditambahkan.

Adding new gutenberg blockAdding new gutenberg blockAdding new gutenberg block

Klik dan menambahkan blok Gutenberg di WordPress editor seperti ini:

Back-end of a gutenberg blockBack-end of a gutenberg blockBack-end of a gutenberg block

Tekan tombol Publikasikan untuk melihat bagaimana muncul di front-end.

Front-end of a gutenberg blockFront-end of a gutenberg blockFront-end of a gutenberg block

Terkejut? Saya adalah, ketika saya menyadari bahwa Ahmad telah ditata blok Gutenberg berbeda untuk front-end dan back-end. Ini dapat lebih lanjut diverifikasi dengan membuka folder src plugin demo-blok di editor kode.

Di sini, Anda menemukan dua file terpisah: editor.scss yang menangani CSS untuk back-end, dan style.css (editor.css adalah enqueued setelah style.scss, yang membuatnya lebih tinggi prioritas). Kedua file ini telah dimasukkan dalam file block.js utama melalui perintah impor.

Enqueued styles for cgb toolkitEnqueued styles for cgb toolkitEnqueued styles for cgb toolkit

Kesimpulan

Tidak seperti starter kit dan boilerplates lainnya, ada banyak fitur yang membedakan tookit membuat-guten-blok yang menawarkan, dan jumlah itu, di sini adalah ringkasan singkat dari fitur utamanya:

  • berversi
  • mudah untuk memperbarui
  • waras default untuk blok Gutenberg baru
  • ketergantungan cgb-script tunggal

membuat-guten-blok adalah MIT berlisensi dan tersedia secara gratis di GitHub.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.