Pernahkah Anda ingin membuat modul atau blok khusus yang berfungsi di Beaver Builder dan Gutenberg? Nah, sekarang kamu bisa!

Mulai Beaver Builder 2.7, blok yang dibuat dengan Advanced Custom Fields Pro (ACF) akan tersedia untuk digunakan di Beaver Builder dan Gutenberg.

Dalam postingan ini, kami akan membahas segala sesuatu yang terkait dengan penggunaan blok ACF di Beaver Builder termasuk mengapa ini berguna, cara kerjanya, dan cara membuat blok pertama Anda.

Mengapa Blok ACF di Beaver Builder?

Pengenalan Gutenberg sebagai editor WordPress semakin memudahkan untuk menambahkan konten yang kaya ke postingan. Selamat tinggal kode pendek! Bahkan menambahkan sesuatu yang sederhana seperti tombol kini lebih bagus. Namun, blok di editor tidak berfungsi di Beaver Builder dan sebaliknya.

Blok ACF berguna jika Anda menggunakan Beaver Builder untuk pembuatan situs dan tata letak halaman saat menggunakan editor WordPress untuk memposting konten. Mereka memungkinkan Anda membuat satu jenis konten yang dapat dikonfigurasi yang dapat digunakan di kedua tempat.

ACF juga mempermudah pembuatan blok dengan memberi Anda GUI untuk membuat formulir dan kerangka kerja untuk memutarnya dengan cepat. Dari apa yang kami temukan, ini sangat mirip dengan cara Anda membuat kode modul Beaver Builder.

Bayangkan membuat modul Beaver Builder yang menampilkan tata letak galeri khusus. Itulah yang saya lakukan pada situs terakhir yang saya buat. Sekarang bayangkan Anda ingin menggunakan modul galeri yang sama dalam postingan blog. Sebelum Beaver Builder 2.7, hal itu tidak mungkin terjadi. Tapi sekarang, dengan blok ACF, hal itu bisa dilakukan.

Bagaimana Blok ACF Bekerja di Beaver Builder?

Seperti yang Anda lihat pada gambar di atas, blok ACF bekerja di Beaver Builder dengan cara yang sama seperti modul. Anda dapat meletakkannya di tata letak dari panel konten dan mengedit pengaturannya saat dimuat.

Satu perbedaan penting adalah semua bidang ACF Anda akan ditampilkan di bawah tab Pengaturan di formulir pengaturan Beaver Builder. Jika Anda memerlukan lebih banyak tab, Anda dapat menggunakan tab ACF seperti yang ditunjukkan pada contoh di atas.

Untuk mengakses blok ACF Anda di Beaver Builder, buka panel konten seperti yang ditunjukkan di bawah ini. Blok Anda akan ditampilkan di bawah Modul Standar atau grup khusus jika Anda sudah menentukannya. Kategori atau ikon blok apa pun yang digunakan untuk mengatur dan menampilkan blok Anda di editor WordPress juga akan ditampilkan di sana.

Selain itu, blok ACF harus bekerja di Beaver Builder dengan cara yang sama seperti modul. Ini termasuk memanfaatkan semua pengaturan spasi dan tampilan yang Anda dapatkan secara gratis di bawah tab Advanced .

Membuat Blok ACF Untuk Beaver Builder

Tidak banyak yang perlu Anda ketahui tentang membuat blok ACF untuk Beaver Builder yang tidak dapat Anda pelajari dari dokumentasi ACF dan buku pegangan WordPress. Blok yang dibuat dengan ACF seharusnya berfungsi.

Untuk membantu, kami telah membuat contoh plugin blok ACF yang dapat Anda unduh sebagai referensi. Namun, ada beberapa hal yang harus Anda waspadai…

• Dukungan JSX – Blok yang menyatakan dukungan JSX saat ini tidak didukung di Beaver Builder dan tidak akan tersedia. Saat menggunakan block.json, Anda perlu menyetelnya secara eksplisit ke false seperti yang ditunjukkan pada contoh di bawah.
• Fitur Blok – Beaver Builder saat ini tidak mendukung fitur blok tambahan yang dapat dikonfigurasi di block.json termasuk hal-hal seperti perataan, warna, dan variasi. Kami hanya mendukung dasar-dasar yang ditunjukkan dalam contoh.

Minimal yang Anda perlukan untuk membuat blok ACF adalah dua file: block.json dan template.php . Anda juga dapat memuat file gaya dan skrip khusus untuk blok Anda dengan mendefinisikannya di block.json seperti yang akan Anda lihat.

Mengonfigurasi blok.json

Ini adalah file block.json WordPress standar dengan tambahan parameter acf untuk menentukan lokasi template Anda. Tanpa itu, Anda tidak akan bisa memilihnya di ACF saat membuat formulir Anda.

Selain itu, di sinilah Anda perlu menyetel dukungan JSX ke false, jika tidak, blok Anda tidak akan dimuat di Beaver Builder.

Anda juga dapat mengonfigurasi dukungan grup Beaver Builder di sini. Ini dilakukan dengan menggunakan parameter beaverBuilder seperti yang ditunjukkan di bawah ini. Secara default, blok akan ditampilkan di bawah grup Modul Standar, namun dengan metode ini, Anda dapat menyesuaikannya.

Jalur ke file templat (dan file gaya atau skrip) bersifat relatif terhadap file block.json Anda dan perlu disimpan di lokasi yang sama.

 { "name": "acf/bb-example-acf-block", "title": "ACF Example Block", "description": "An example ACF block that can be used in Beaver Builder.", "category": "bb-example-acf-blocks", "icon": "admin-appearance", "script": "file:./js/scripts.js", "style": "file:./css/styles.css", "supports": { "jsx": false }, "acf": { "mode": "preview", "renderTemplate": "template.php" }, "beaverBuilder": { "group": "ACF Blocks" } }

Mengonfigurasi template.php

File PHP ini adalah tempat Anda mengeluarkan konten untuk blok Anda. Di dalamnya, Anda dapat menanyakan bidang ACF seperti biasa dengan get_field dan menggunakan hasilnya dalam output Anda. Jika Anda terbiasa bekerja dengan ACF, ini akan terlihat familiar.

 <?php $heading = get_field( 'heading' ); $content = get_field( 'content' ); ?> <div> <h3><?php echo $heading; ?></h3> <p><?php echo $content; ?></p> </div>

Memuat Blok

Setelah Anda membuat kode untuk blok Anda, Anda perlu memuatnya menggunakan fungsi inti register_block_type . Blok Anda tidak akan tersedia untuk dipilih di ACF saat membuat formulir sampai Anda melakukan ini.

 add_action( 'init', function() { register_block_type( 'path/to/block.json' ); } );

Membuat Formulir Blok

Hal terakhir yang perlu Anda lakukan adalah membuat formulir untuk blok Anda. Anda dapat melakukan ini sebelum membuat kode blok, atau secara bersamaan, semuanya terserah Anda. Ketahuilah bahwa blok tersebut tidak akan tersedia di aturan grup bidang jika belum ada.

Kami menemukan bahwa semua jenis bidang ACF berfungsi untuk blok di Beaver Builder dan Gutenberg. Jika Anda pernah membuat formulir ACF sebelumnya, ini semua seharusnya cukup standar. Cukup buat formulir, atur lokasi blok Anda, dan voila, selesai!

Mengekspor Formulir Blok

Langkah ini opsional tetapi bisa berguna jika Anda ingin mengirimkan blok Anda dalam sebuah plugin. Di bawah alat ACF , Anda memiliki opsi untuk mengekspor atau mengimpor bidang sebagai JSON. Ini akan memungkinkan Anda untuk menyimpan formulir blok Anda di sebuah plugin dan bahkan mengelolanya dengan kontrol versi.

Setelah mengekspor formulir blok, Anda selalu dapat mengimpornya kembali nanti jika perlu melakukan perubahan. Setelah selesai, cukup ekspor lagi dan dorong perubahan tersebut ke repo git Anda.

ACF memang menyediakan cara untuk menangani file JSON secara otomatis tetapi sayangnya, ini hanya berfungsi dengan satu lokasi. Jika Anda melakukannya di sebuah plugin, itu bisa merusak sesuatu yang lain di situs Anda menggunakan JSON lokal ACF.

Jika Anda tertarik untuk bekerja dengan bidang dengan cara ini, berikut cara kami memuatnya di contoh plugin…

 add_action( 'acf/init', function() { $fields = json_decode( file_get_contents( 'path/to/fields.json' ), 1 ); /** * Only load if no fields exist in the database with this key. * This allows you to work on the fields if they have been imported. */ if ( empty( acf_get_fields( $fields[0]['key'] ) ) ) { acf_add_local_field_group( $fields[0] ); } } );

Menyelesaikan

Kami telah menjadi penggemar berat ACF bahkan sebelum Beaver Builder ada. Ini adalah alat canggih yang selalu memberi kami kemampuan untuk dengan mudah membuat solusi khusus yang kompleks. Dengan integrasi ini, kami menjadi lebih bersemangat dari sebelumnya dan berharap integrasi ini juga berguna untuk proyek Anda!