Advertisement
  1. Code
  2. WordPress Gutenberg

WordPress Gutenberg blok API: Memperluas blok

Scroll to top
Read Time: 10 min
This post is part of a series called WordPress Gutenberg Block API.
WordPress Gutenberg Block API: Creating Custom Blocks

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

Selamat datang kembali ke seri kami membuat kustom blok dengan WordPress Gutenberg blok API. Tutorial ini adalah semua tentang memperluas blok acak gambar yang kita buat di posting sebelumnya. Kita sudah melakukan drop-down kontrol untuk memilih kategori gambar. Kita akan melanjutkan dengan ini dengan menambahkan lebih banyak pilihan blok memungkinkan untuk lebih lanjut penyesuaian.

Secara khusus, kita akan melihat bagaimana menambahkan tataan blokir di berbagai bagian dari editor. Itu benar, Anda tidak hanya terbatas untuk menambahkan blok kontrol langsung pada blok itu sendiri!

Kode akhir plugin custom-blok-saya tersedia untuk didownload. Cukup klik link di sidebar ke kanan dan download zip file ke komputer Anda, dan menginstalnya seperti yang akan Anda plugin WordPress lain. Anda juga dapat menemukan kode sumber di repo GitHub kami.

Pengembangan Gutenberg retak pada kecepatan yang adil, dan telah ada rilis baru yang signifikan sejak terakhir tutorial diterbitkan. Versi Gutenberg digunakan dalam tutorial ini telah diperbarui untuk 3.0.1, dan beberapa editor UI mungkin terlihat sedikit berbeda dari screenshot ditunjukkan dalam tutorial sebelumnya dalam seri ini.

Mari kita perluas!

Drop-down kendali kami menambahkan dalam tutorial sebelumnya terletak di dalam editor, tepat di bawah markup untuk gambar acak. Ini adalah mudah, tapi kami memiliki pilihan lain juga.

Kami juga dapat menambahkan panel inspektur blok dan blok kontrol untuk munculan toolbar (yang muncul ketika sebuah blok yang dipilih).

Block control locationsBlock control locationsBlock control locations

Pada gambar di atas, kita dapat melihat toolbar kontrol untuk blok ayat [1], serta kontrol terkait dalam panel inspektur [3]. Lokasi [2] menunjukkan kontrol tarik-turun untuk blok acak gambar kami.

Anda mungkin sudah berpikir tentang lokasi yang Anda akan memilih untuk pengaturan blok sendiri, tetapi Anda tidak harus memilih hanya satu lokasi ini. Mereka tidak saling eksklusif. Misalnya, untuk blok ayat (ditampilkan di atas), Anda dapat melihat bahwa pengaturan terbagi antara panel inspektur blok dan toolbar.

Selain itu, hal ini sangat OK untuk memiliki dua kontrol terpisah di lokasi yang berbeda di editor yang mempengaruhi pengaturan yang sama. Anda mungkin tidak ingin melakukan ini terlalu sering, tapi itu berguna untuk mengetahui bagaimana untuk menerapkannya, jadi kita akan melihat bagaimana melakukan ini sedikit kemudian di.

Pengaturan blok langsung

Mari kita mulai dengan cara termudah untuk menambahkan fungsionalitas ke blok Anda, yang secara langsung di dalam blok fungsi edit. Kami telah menggunakan pendekatan ini untuk menambahkan gambar acak drop-down kendali kita karena memerlukan sedikit usaha ekstra.

Kami tidak akan pergi ke menambahkan kontrol baru ke blok itu sendiri, tetapi kita dapat men-tweak perilaku kontrol drop-down untuk menjadi sedikit lebih intuitif. Untuk membuat ini membuat sedekat mungkin ke ujung depan, kita dapat membatasi drop-down dari muncul kecuali blok Terpilih.

Mari kita membuat perubahan ini sekarang. Jika Anda mengikuti tutorial ini dari terakhir kali kemudian membuka /my-custom-block/src/random-image/index.js dalam editor favorit Anda. Ini adalah file JavaScript utama untuk blok acak gambar kami.

Salah satu alat peraga dilewatkan ke semua blok adalah isSelected, yang memegang status blok visibilitas. Kita dapat menggunakan ini untuk kondisional layar kontrol tarik-turun kategori.

Pertama, mengeluarkan isSelected dari props objek  dan menambahkannya ke daftar konstanta dalam fungsi edit. Hal ini berguna sehingga kita dapat referensi ini dengan nama pendek (yaitu isSelected daripada props.isSelected).

Selanjutnya, kita dapat menggunakan properti ini untuk menentukan apakah kontrol drop-down harus ditampilkan:

Ini adalah singkatan pengujian isSelected itu benar, karena kita tidak dapat menggunakan full-blown JavaScript if pernyataan dalam kode BEJ.

Pastikan Anda masih menonton file untuk perubahan apapun blok kode sumber (BEJ, ES6 +, Sass, dll) adalah transpiled ke berlaku JavaScript dan CSS. Jika Anda tidak sedang menonton file untuk perubahan, kemudian membuka jendela baris perintah di dalam folder akar my-custom-block plugin dan masukkan npm start.

Membuka Gutenberg editor dan menambahkan gambar acak blok. Saat ini, kontrol menurun tidak terlihat jika blok belum diklik.

Conditional Block ControlConditional Block ControlConditional Block Control

Ini memberikan blok merasakan lebih interaktif untuk itu.

Toolbar kontrol

Jika Anda telah menggunakan salah satu inti Gutenberg blok (seperti blok ayat) maka Anda akan akrab dengan setelan toolbar. Sebagai blok ayat dipilih, pop-up toolbar muncul berisi tombol untuk memformat teks. Jenis kontrol ini sangat bagus untuk pengaturan blok yang memiliki status jenis on / off — misalnya, perataan teks atau pemformatan seperti tebal atau miring.

We'll use the built-in alignment toolbar control to allow the drop-down image category control to be left (the default), right, or center aligned.

Pertama, kita perlu mengeluarkan komponen yang AlignmentToolBar dan BlockControls dari wp.blocks. Ini memungkinkan kami untuk menampilkan kontrol penyelarasan di dalam toolbar mengambang di atas blok kami saat dipilih. Ini adalah bagian dari komponen inti yang dapat kita gunakan di blok kita sendiri.

Komponen BlockControls yang bertindak sebagai wadah toolbar, dan AlignmentToolbar ditempatkan di dalam.

Kita masih perlu untuk menghubungkan perilaku toolbar kesejajaran secara manual, yang bisa kita lakukan dengan menambahkan atribut categoryAlign baru untuk menyimpan status kesejajaran blok (kiri, kanan, atau pusat).

Atribut objek sekarang berisi dua pengaturan.

Standar untuk atribut categoryAlign adalah string kosong, yang akan mengakibatkan tidak ada kesejajaran yang sedang diterapkan secara default.

Untuk referensi atribut baru, kami dapat mengeluarkan nilai ini ke variabel konstan sendiri dengan cara yang sama kita lakukan untuk atribut tarik-turun category.

Kita perlu lakukan sekarang adalah drop dua komponen baru ke fungsi edit dan mengkonfigurasi properti.

Seperti Anda dapat melihat semua yang perlu kita lakukan adalah menetapkan atribut value dari Alignmenttoolbar untuk categoryAlign atribut dan memanggil fungsi setAttributes setiap kali tombol toolbar baru telah diklik. Fungsi ini pada gilirannya update atribut categoryAlign dan menjaga semua di sync.

Untuk menerapkan gaya kesejajaran kontrol tarik-turun, kita perlu menambahkan properti gaya untuk elemen form kami.

Control AlignmentControl AlignmentControl Alignment

Perhatikan bahwa kita tidak perlu kontrol ini mempengaruhi apa-apa di ujung depan, jadi kita tidak perlu menambah kode blok save fungsi.

Menambahkan pengaturan Panel

Panel inspektur blok menyediakan area yang luas untuk menambahkan blok kontrol dan merupakan lokasi yang bagus untuk kontrol yang lebih kompleks.

Kita akan fokus pada menambahkan dua drop-down kontrol panel inspektur. Yang pertama akan duplikat dari kontrol tarik-turun kategori untuk memilih jenis gambar acak. Ini menunjukkan bagaimana untuk memiliki lebih dari satu control memperbarui atribut umum.

Ketika satu control diperbarui, yang bersangkutan akan secara otomatis memperbarui terlalu! Dalam prakteknya, meskipun, Anda akan biasanya hanya ingin satu control setiap pengaturan.

Kontrol tarik-turun kedua akan memungkinkan Anda untuk memilih filter diterapkan pada gambar acak. Layanan web PlaceIMG mendukung dua jenis filter — grayscale dan sepia — dan kita dapat memilih antara mereka dengan hanya menambahkan sepia atau grayscale ke URL permintaan HTTP. Jika kita tidak menentukan sebuah filter kemudian gambar berwarna standar akan dikembalikan.

Kode untuk dua drop-down cukup serupa, jadi kami akan menambahkan mereka bersama-sama.

Pertama-tama, mari kita menentukan blok baru dan komponen yang kita butuhkan.

Di sini, variabel baru adalah InspectorControls, PanelBody, PanelRow, dan fragmen, yang semua digunakan untuk membantu menciptakan panel inspektur UI.

<Fragment>Komponen ini sangat berguna ketika Anda perlu kembali beberapa elemen tingkat atas dari edit atau save fungsi tetapi tidak ingin untuk membungkus mereka dalam sebuah elemen yang akan outputted.

<Fragment>tidak akan output markup apapun sama sekali pada bagian depan dan bertindak seperti sebuah wadah yang tak terlihat. Ini adalah cara mudah untuk kembali beberapa elemen top-level dan adalah sebuah alternatif untuk metode sebelumnya kembali sebuah array dari unsur-unsur sebagai gantinya.

Kita hanya perlu menambahkan satu atribut baru yang disebut imageFilter sebagai atribut category yang ada dapat digunakan kembali.

Dalam fungsi edit, kita perlu menambahkan sebuah variabel baru dengan referensi ke atribut baru.

Menambahkan sebuah panel inspektur blok mudah. Struktur komponen yang kita akan menggunakan adalah sebagai berikut:

Komponen <InspectorControls>yang bertindak sebagai wadah Inspektur blok, dan <PanelBody>mendefinisikan masing-masing bagian dilipat. Di dalam masing-masing, Anda dapat memiliki sejumlah <PanelRow>komponen, yang pada gilirannya berisi Anda kontrol.

Kita sudah sudah didefinisikan markup untuk kendali kita tarik-turun kategori yang dapat kita reuse. Untuk melakukan ini, membuatnya abstrak luar ke dalam fungsi yang terpisah:

Fungsi ini dapat dirujuk kemudian setiap kali kita perlu kontrol tarik-turun kategori yang diberikan. Markup untuk panel inspektur blok perlu berada di luar markup blok, sehingga kita dapat menggunakan <Fragment>komponen untuk membungkus mereka berdua sebelum mereka kembali.

Selanjutnya, kita perlu untuk menambahkan komponen Inspektur blok untuk kategori dan gambar filter drop-down. Ini perlu didefinisikan dalam <PanelRow>komponen, dan kita juga harus menentukan fungsi panggilan balik baru untuk menangani acara onChange. Ini sangat mirip dengan kode tarik-turun kategori dari tutorial terakhir, jadi harus akrab bagi Anda sekarang.

Puting ini semua bersama-sama, metode edit return fungsi sekarang tampak seperti ini:

Dan panggilan balik setFilter didefinisikan sebagai:

Untuk mendapatkan gambar disaring, kita perlu untuk memperbarui komponen RandomImage untuk menerima nilai filter baru setiap kali drop-down berubah.

Perhatikan bagaimana kami menggunakan properti komponen baru dalam metode edit untuk mengirimkan nilai filter baru ke PlaceIMG.

Semua perubahan kode ini mengakibatkan panel inspektur blok baru yang diciptakan dengan dua kontrol tarik-turun untuk mengubah foto kategori dan filter.

Block Inspector ControlsBlock Inspector ControlsBlock Inspector Controls

Untuk mendapatkan properti filter baru bekerja untuk ujung depan juga, kita hanya perlu untuk memperbarui menyimpan metode.

Frontend Image FilterFrontend Image FilterFrontend Image Filter

Kesimpulan

Dalam posting ini, kita membahas tiga metode yang berbeda untuk menambahkan pengaturan blok:

  • munculan toolbar
  • langsung pada blok itu sendiri
  • panel inspektur blok

Kami hanya menambahkan pengaturan dasar untuk setiap blok, tapi kita bisa dengan mudah mengambil ini lebih jauh dengan menambahkan dukungan untuk beberapa gambar, menambahkan keterangan gambar, dan mengendalikan gaya seperti perbatasan warna, radius, atau ukuran gambar acak.

Saya yakin bahwa sekarang Anda mungkin punya beberapa ide untuk membuat blok kustom Anda sendiri. Saya akan senang mendengar apa jenis blok Anda akan menemukan berguna dalam proyek Anda sendiri!

Kami baru saja akan memulai dengan Gutenberg di sini di Envato Tuts +, jadi jika ada setiap aspek-aspek tertentu dari Gutenberg pengembangan blok yang Anda ingin melihat tercakup secara lebih mendalam dalam masa depan tutorial, beritahukan kami tahu melalui komentar.

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.