Blok bangunan tanpa JavaScript: Menguji ACF, Blok Lab, dan Blok Malas

Diterbitkan: 2019-05-17

Tidak semua orang mampu atau mau membuat blok di JavaScript dulu, dan terkadang Anda harus menginstal tiga atau empat koleksi blok sampai Anda menemukan blok yang Anda inginkan.

Ada cara ketiga: plugin yang membuat blok untuk Anda dari sekumpulan bidang khusus tertentu, dengan template untuk mengontrol tampilan frontend blok. Tiga opsi paling populer untuk melakukan ini meliputi: Block Lab, ACF (Advanced Custom Fields) dan Lazy Blocks.

Kasus penggunaan saya untuk pengujian ini adalah tugas kecil yang ingin saya selesaikan dengan masing-masing plugin – untuk membuat blok bagi anggota tim perusahaan yang mencakup bidang-bidang berikut: nama depan, nama belakang, headshot, bio, nomor telepon, dan alamat email dan menggunakan blok pada halaman dalam tampilan dua kolom dengan dua anggota tim.

Untuk setiap plugin saya akan menunjukkan

  • cara membuat Fieldgroup,
  • cara membuat template untuk frontend dan
  • cara menggunakan blok untuk membuat halaman tim.

Saya menggunakan Local by Flywheel sebagai alat pengembangan lokal saya. Situs uji berjalan di WordPress 5.1.1, Gutenberg 5.4 dan Tema Bisnis dari WordPress.com

Setelah membaca posting ini Anda akan dapat memilih plugin yang sesuai dengan kebutuhan Anda.

Membuat Blok Tim dengan Lab Blok

Anggota tim XWP membuat Block Lab dan tersedia sebagai plugin gratis dengan versi komersial. Saya menggunakan Block Lab terlebih dahulu, menginstal plugin dan kemudian memulai blok baru.

Berikut adalah video tentang cara mengatur bidang.

Langkah selanjutnya adalah menyiapkan template blok

Ketika saya melihat lokasi yang diharapkan, template akan menjadi bagian dari direktori tema dalam subfolder bernama /blocks/ Itu sesuatu yang perlu diingat oleh pengembang, karena ada beberapa konten yang terkunci saat berpindah tema.

Untuk membuat template, saya membuka editor kode saya, membuat file block-team-member.php, dan menambahkan HTML + dan minimal PHP untuk referensi bidang.

 <h2>
<?php block_field( 'nama depan' );?> 
<?php block_field( 'nama belakang' );?>
</h2>
<p><img class="teamphoto" src="<?php block_field( 'gambar' ); ?>"
 alt="<?php block_field( 'nama depan' );?> 
<?php block_field( 'nama belakang' );?> " width="150"/>
<?php block_field( 'short-bio' ); ?></p>

<p><em>Anda dapat menjangkau <?php block_field( 'nama depan' );?></em> 
<br/>melalui email <span><a href="mailto:<?php block_field( 'email-address' ); ?>">
<?php block_field( 'alamat email' ); ?></a></span>
 atau <br/>
melalui telepon: <span><?php block_field( 'ekstensi' ); ?></span></p>

Pada langkah terakhir, saya menyelesaikan konfigurasi blok ini dengan Properti Blok

  • Saya mengatur ikon menjadi seseorang,
  • memilih "Elemen Tata Letak" sebagai Kategori dan
  • menambahkan "anggota tim, tim" sebagai kata kunci

Semua ini diperlukan untuk penyisip Blok di editor.

Mari kita lihat cara kerjanya.

Saya menambahkan Halaman baru bernama Temui Tim Block Lab kami dan tambahkan anggota tim, menggunakan Blok “Anggota Tim”.

Untuk saat ini, saya memutuskan untuk mengisi semua informasi dalam batas editor blok. Selama penyiapan grup bidang, saya juga memiliki pilihan untuk menampilkan kontrol formulir di tab Opsi Blok di bilah sisi. Untuk saat ini, saya telah menentukan bahwa itu hanya preferensi pribadi. Setelah Anda mengklik di luar blok, formulir menghilang dan blok ditampilkan mirip dengan representasi frontendnya.

Sekarang setelah blok saya selesai, saya dapat menambahkan lebih banyak anggota tim ke halaman. Saya memutuskan, saya ingin mereka di blok kolom dengan dua kolom.

Sejauh ini bagus. Saya tidak senang bahwa lokasi templat menunjuk ke folder tema.

Ketika saya ingin mengganti tema, saya masih ingin menyimpan blok dan tata letak blok dengan situs saya, jadi saya harus memastikan untuk menyalin folder blok ke direktori tema baru. Cara lain diuraikan dalam dokumentasi untuk Blocklab di Github. Ini menawarkan dua filter untuk mengubah lokasi default template:

“Untuk menggunakan template yang berbeda di dalam tema Anda, gunakan filter block_lab_override_theme_template( $theme_template ). Untuk menggunakan template yang berbeda di luar tema Anda (misalnya, dalam sebuah plugin), gunakan filter block_lab_template_path( $template_path ).”

Ini cukup mudah diatur, bahkan jika Anda bukan pengembang PHP, Anda mungkin dapat menggunakan satu fungsi PHP block-field() dan pastikan untuk merujuk nama bidang yang tepat.

Block Lab, pada dasarnya, memberi Anda metode untuk membuat bidang dan mengonfigurasi properti blok dalam satu layar, dan kemudian Anda perlu menambahkan templat blok yang sesuai ke folder /blocks/ di direktori tema Anda. Ini cukup lurus ke depan.

Membuat Blok Tim dengan ACF 5.8

ACF (Bidang Kustom Lanjutan) versi 5.8 keluar dengan pembuat blok (hanya tersedia dalam versi Pro). Untuk pengujian saya, saya menggunakan ACF 5.8 RC 1. Rilis final sudah tersedia sekarang. Elliot Condon adalah pembuat plugin dan versi pertama dirilis pada tahun 2011. Plugin telah berkembang menjadi alat pengembang yang sangat populer untuk freelancer dan agensi dan memiliki lebih dari 1 juta pemasangan.

Keberhasilan dan keserbagunaannya membuat pembuatan grup bidang menjadi proses yang lebih terlibat dibandingkan dengan dua plugin lainnya. Versi Pro 5.8 berisi rilis pertama alat pembuat bloknya.

Ini adalah tampilan admin dari grup Bidang "Anggota Tim".

Sekarang bagaimana cara membuat ini menjadi blok? Dokumentasinya cukup lengkap. Catatan: Dalam tes ini saya melakukan dengan urutan yang sedikit berbeda…

Saya mulai dengan Grup Lapangan dan saya harus kembali ke layar admin itu setelah saya mendaftarkan blok (lihat di bawah).

Saya menggunakan dua file. Pertama, saya perlu mendaftarkan blok di functions.php tema saya. Untuk kode rendering template/blok saya menggunakan content-block-team-member.php juga untuk disimpan di folder tema aktif.

Anda akan melihat bagaimana keduanya cocok bersama dalam satu detik. Sisa pekerjaan dilakukan oleh plugin di bagian belakang.

Jadi mari kita tulis Kode Blok di PHP

Cuplikan pertama adalah pendaftaran blok. Saya memberinya nama, judul, deskripsi, arahkan ke template render, berikan kategori, ikon, dan beberapa kata kunci, di mana produsen konten dapat menemukan blok di Block Inserter. Saya menggulir sampai ke akhir functions.php tema saya dan menambahkan cuplikan ini:

 fungsi register_acf_blocks() {
   // daftarkan blok anggota tim.
   acf_register_block(array(
       'name' => 'acf-team-member',
       'title' => __('Anggota Tim ACF'),
       'description' => __('Blok anggota tim khusus dibuat melalui ACF 5.8'),
       'render_template' => 'konten-blok-tim-anggota.php',
       'kategori' => 'memformat',
       'icon' => 'admin-komentar',
       'kata kunci' => array( 'anggota tim', 'tim' ),
   ));
}
// Periksa apakah ada fungsi dan kaitkan ke pengaturan.
if( function_exists('acf_register_block') ) {
   add_action('acf/init', 'register_acf_blocks');
}

Kode ini langsung dari dokumentasi dan saya baru saja mengubah beberapa nilai.

Di bagian selanjutnya saya membuat template rendering blok. Nama file harus sesuai dengan atribut “render_template” pada teks di atas, yaitu “ content-block-team-member.php ”

Saya juga hanya mengikuti dokumentasi ACF dan hanya mengubah beberapa nilai dan memperbarui kode tampilan.

 <?php
// buat atribut id untuk gaya tertentu
$id = 'anggota tim' . $blok['id'];

// buat align class ("alignwide") dari pengaturan blok ("wide")
$align_class = $block['align'] ? 'sejajarkan'. $block['align'] : '';

// Memuat nilai dan menetapkan default untuk bidang blok.
$short_bio = get_field('short_bio') ?: 'bio singkatnya ada di sini... ';
$nama_pertama = get_field('nama_pertama') ?: 'Nama Depan';
$nama_belakang = get_field('nama_belakang') ?: 'Nama Belakang';
$gambar = get_field('gambar');
$alamat_email = get_field('alamat_email');
$ekstensi = get_field('ekstensi');
?>


" class="anggota-tim ">
       

   

   " alt="" alt=" " lebar="150"/>

Saat saya mulai dengan Fieldgroup, saya harus kembali dan memastikan bahwa grup tersebut terkait dengan blok yang baru saja saya daftarkan. Di bawah layar Fieldgroup saya membuat aturan untuk Lokasi: Perlu membaca: “Tampilkan grup bidang ini jika Blok sama dengan Anggota Tim ACF.

Sekarang mari kita lihat bagaimana ini bekerja di editor Blok ketika saya menambahkan dua anggota.

Itu adalah pengalaman yang menarik. Anda dapat menggunakan formulir di bagian editor untuk memasukkan data. Pilihan lain adalah memasukkan data di bidang formulir yang tersedia di bilah sisi dan Anda melihat pembaruan blok secara real time. Anda dapat beralih di antara dua metode tetapi mengklik Tombol "Beralih ke Edit" atau "Beralih ke Pratinjau" tergantung metode mana yang Anda gunakan saat ini.

UI editor blok berfungsi dengan baik. Ada baiknya melalui penyiapan dan kode yang lebih rumit yang diperlukan.

Membuat Blok Tim dengan Blok Malas

Plugin ketiga dalam pengujian ini disebut "Blok Malas" oleh Nikita dari nkdev.info, tim yang sama yang juga menerbitkan kumpulan blok GhostKit.

Itu tidak hanya memungkinkan saya untuk menyimpan informasi di post_content tetapi saya juga mendapatkan pilihan untuk menyimpannya di tabel post_meta.

Berikut adalah video penggunaan antarmuka untuk membuat bidang.

Karena layar admin ini difokuskan untuk mendapatkan semua informasi untuk membuat blok, di sebelah kiri saya membuat bidang saya dan di bilah sisi. Saya mengisi informasi yang diperlukan untuk mendaftarkan blok dengan editor.

Di bawahnya, saya dapat menambahkan HTML untuk frontend dan backend. Sintaksnya bahkan lebih mudah daripada Block Lab, dan tentu saja jauh lebih mudah daripada templating ACF.

Saya tidak perlu menambahkan kode apa pun ke functions.php tema saya, saya juga tidak perlu membuat file tambahan dengan kode template saya.

Anda dapat menambahkan semuanya di sini, dibantu dengan penyorotan sintaks dan menggabungkan tag daripada panggilan fungsi. Dokumentasi menunjukkan beberapa cara untuk menulis kode template Anda. Saya benar-benar penggemar Handlebars (templat semantik) karena dalam konteks ini lebih dekat dengan tag gabungan sistem lain.

Saya menyalin/menempelkan kode yang sama ke dalam tab “Editor HTML”, sehingga saya dapat melihat tampilan frontend di bawah bidang formulir.

Mari kita gunakan.

Ini tampaknya berhasil. Agak canggung bahwa formulir tidak hilang ketika saya membatalkan pilihan blok. Dibutuhkan banyak real estate di editor. Meskipun, saya ingin memiliki anggota tim di blok dua kolom, saya tidak berhasil menyeret dan menjatuhkan dua blok ke dalam Blok Kolom. Saya menyebutkan ini di topik dukungan saya dan nK menjawab: “…menyembunyikan kontrol ketika blok tidak dipilih adalah fitur yang bagus, yang sudah ditambahkan di Blok ACF dan akan segera ditambahkan di Blok Malas.” Ini dia – semua pada waktunya.

Kesimpulan: Kompleks, Berkembang, atau Mudah.

ACF 5.8 memiliki fitur pembuatan blok yang sangat kuat, dan setiap orang yang telah menggunakan plugin untuk membangun situs akan sangat senang dapat dan membuat blok dinamis untuk pelanggan mereka. Ini dipikirkan dengan baik, dan pengembang dari semua keahlian akan bangun dan berjalan dengan cepat.

Seseorang, yang tidak berpengalaman dalam PHP akan memiliki bagian yang adil dari trial and error untuk mendapatkan semuanya berjalan. Ini akan menjadi lebih rumit ketika persyaratan untuk blok lebih terlibat dan di luar kasus penggunaan tes ini. Ini bukan alat untuk pemula WordPress atau pelaksana situs DIY yang tidak menulis banyak kode sendiri.

Untuk saat ini, hanya versi ACF 5.8 Pro yang hadir dengan fitur pembuat blok. Condon sedang mempertimbangkan untuk menjadikannya plugin yang berdiri sendiri. (Lihat apa yang Twitteratti pikirkan tentang ide itu…)

Block Lab sedang dalam tahap awal pengembangan. Ini berhasil mengabstraksi sebagian besar arsitektur blok dan mengurangi jumlah kode yang perlu ditulis. Dokumentasinya sangat membantu. Template disimpan dalam file terpisah, dan perlu dipertahankan dengan file tema lainnya. Jika kami di perusahaan saya akan menggunakannya untuk salah satu proyek kami, kami akan menyimpan file template dengan salah satu plugin pembantu kami, sehingga pelanggan kami dapat beralih tema tanpa kehilangan konten dan tampilan blok yang dibangun dengan Block Lab.

Versi Pro menawarkan fitur tambahan, seperti bidang pengulang, impor/ekspor blok, bidang objek pengguna, bidang peta, dan banyak lagi fitur blok.

XWP adalah agensi yang bekerja dengan klien perusahaan di hosting VIP WordPress.com dan perusahaan lain. Anggota tim mereka berkontribusi pada ide-ide besar lainnya di ruang WordPress, termasuk Customizer, AMP, dan Tide. Saya berharap plugin tetap ada dan tumbuh bersama Gutenberg Phase 2 menjadi sistem yang kuat untuk pelaksana situs, agensi, dan pengembang tema.

Lazy Blocks menyenangkan untuk diatur dan seperti yang disebutkan, saya adalah penggemar sintaks templating Handelbars. Sangat mudah dipelajari bahkan untuk pemula, dan dengan sedikit latihan, pemilik situs akan dapat membuat blok Gutenberg khusus untuk situs mereka. Penanganan blok di editor meskipun berfungsi, agak kikuk, karena tampilan tidak beralih antara status blok pilih dan status batalkan saat ini.

Jika ada persyaratan untuk memiliki bidang tambahan untuk halaman atau bagian posting, Lazy Blocks adalah alat yang hebat untuk membuat prototipe dan dengan cepat beralih dari ide ke bukti konsep.

Satu-satunya peringatan: Saya tidak dapat menemukan siapa orang di balik nkdev.info dan nama Nikita. Situs web hanya mengungkapkan bahwa itu adalah perusahaan muda tetapi tidak lebih. Jika Anda menggunakan plugin, pastikan Anda memiliki Paket B untuk berjaga-jaga jika pengembang meninggalkan plugin sebelum diluncurkan.

ACF 5.8 cukup kompleks; Block Lab sangat fleksibel dan hanya semi-kompleks; dan Lazy Blocks cukup diberi nama dan paling mudah digunakan. Tak satu pun dari mereka memungkinkan Anda pergi tanpa menulis kode, karena setiap blok membutuhkan beberapa output tampilan dalam HTML.

Beri tahu saya pendapat Anda tentang ketiga plugin penghasil blok ini. Juga, jika Anda menemukan plugin lain yang memungkinkan Anda membuat blok tanpa masuk ke Javascript, saya ingin mengetahuinya! Silakan bagikan pemikiran dan penemuan Anda di komentar!