JavaScript olmadan blok oluşturma: ACF, Block Lab ve Lazy Blocks Testi

Henüz herkes JavaScript'te blok oluşturamıyor veya oluşturmaya istekli değil ve bazen istediğiniz blokları bulana kadar üç veya dört blok koleksiyonu yüklemeniz gerekir.

Üçüncü bir yol daha var: Blokların ön uç görüntüsünü kontrol etmek için bir şablonla birlikte bir dizi özel özel alandan sizin için blokları oluşturan eklentiler. Bunu yapmak için en popüler üç seçenek şunları içerir: Block Lab, ACF (Gelişmiş Özel Alanlar) ve Lazy Blocks.

Bu test için benim kullanım durumum, eklentilerin her biri ile başarmak için belirlediğim küçük bir görevdir - bir şirketin ekip üyeleri için aşağıdaki alanları içeren bir blok oluşturmak için: ad, soyadı, vesikalık, biyografi, telefon numarası, ve e-posta adresini ve bloğu iki ekip üyesiyle iki sütunlu bir ekranda kullanın.

Her eklenti için göstereceğim

• Fieldgroup nasıl oluşturulur,
• ön uç için şablon nasıl oluşturulur ve
• takım sayfası oluşturmak için blokların nasıl kullanılacağı.

Yerel geliştirme aracım olarak Local by Flywheel kullandım. Test sitesi WordPress 5.1.1, Gutenberg 5.4 ve WordPress.com'dan İş Teması üzerinde çalıştı

Bu yazıyı okuduktan sonra ihtiyaçlarınıza uygun eklentiyi seçebileceksiniz.

Block Lab ile Takım Bloğu Oluşturma

XWP ekibinin üyeleri Block Lab'i kurdu ve ticari bir sürümü olan ücretsiz bir eklenti olarak mevcut. Önce Block Lab'ı kullandım, eklentiyi kurdum ve ardından yeni bir blok başlattım.

İşte alanların nasıl kurulacağına dair video.

Bir sonraki adım blok şablonunu ayarlamaktır.

Beklenen konuma baktığımda, şablon /blocks/ adlı bir alt klasördeki tema dizininin bir parçası olacak.

Şablonu oluşturmak için kod düzenleyicimi açtım, blok-team-member.php dosyasını oluşturdum ve alanlara başvurmak için HTML + ve minimal PHP'yi ekledim.

 <h2>
<?php block_field( 'ad' );?> 
<?php block_field( 'soyad' );?>
</h2>
<p><img class="teamphoto" src="<?php block_field( 'resim' ); ?>"
 alt="<?php block_field( 'ad' );?> 
<?php block_field( 'soyad' );?> " width="150"/>
<?php block_field( 'kısa biyografi'); ?></p>

<p><em><?php block_field( 'first-name' );?></em> adresine ulaşabilirsiniz. 
<br/>e-posta yoluyla <span><a href="mailto:<?php block_field( 'email-address' ); ?>">
<?php block_field( 'e-posta adresi'); ?></a></span>
 veya <br/>
telefon aracılığıyla: <span><?php block_field( 'uzantı'); ?></span></p> 

Son adımda Block Properties ile bu bloğun konfigürasyonunu bitirdim.

• Simgeyi bir kişiye ayarladım,
• Kategori olarak "Düzen Öğeleri"ni seçti ve
• anahtar kelime olarak "ekip üyesi, takım" eklendi

Bütün bunlar editördeki Blok yerleştirici için gereklidir.

Nasıl çalıştığını görelim.

Block Lab Ekibimizle Tanışın adlı yeni bir Sayfa ekledim ve Blok “Takım Üyesi”ni kullanarak ekip üyelerini ekledim.

Şimdilik tüm bilgileri blok editör sınırları içinde doldurmaya karar verdim. Alan grubunun kurulumu sırasında, kenar çubuğundaki Blok Seçenekleri sekmesinde form kontrollerini görüntüleme seçeneğim de vardı. Şu an için bunun sadece kişisel tercih olduğuna karar verdim. Bloğun dışına tıkladığınızda, form kaybolur ve blok, ön uç temsiline benzer şekilde oluşturulur.

Artık bloğu tamamladım, sayfaya daha fazla ekip üyesi ekleyebilirim. Karar verdim, onları iki sütunlu bir sütun bloğunda istiyorum.

Çok uzak çok iyi. Şablonun konumunun tema klasörünü göstermesi beni heyecanlandırmadı.

Temayı değiştirmek istediğimde, bloğu ve bloğun düzenini sitemde tutmak istiyorum, bu yüzden bloklar klasörünü yeni temanın dizinine kopyalamam gerekecek. Başka bir yol, Github'daki Blocklab belgelerinde özetlenmiştir. Şablonun varsayılan konumunu değiştirmek için iki filtre sunar:

“Temanız içinde farklı bir şablon kullanmak için block_lab_override_theme_template( $theme_template) filtresini kullanın. Temanızın dışında farklı bir şablon kullanmak için (örneğin, bir eklentide), block_lab_template_path( $template_path ) filtresini kullanın.

Bunun kurulumu oldukça kolaydı, PHP geliştiricisi olmasanız bile, muhtemelen bir PHP blok-field() işlevini kullanabilir ve doğru alan adlarına başvurduğunuzdan emin olabilirsiniz.

Block Lab, özünde, alanları oluşturmak ve blok özelliklerini tek bir ekranda yapılandırmak için bir yöntem sağlar ve ardından ilgili blok şablonunu temanızın dizinindeki /blocks/ klasörüne eklemeniz gerekir. Oldukça düz ileri.

ACF 5.8 ile Takım Bloğu Oluşturma

ACF (Gelişmiş Özel Alanlar) sürüm 5.8, bir blok oluşturucu ile çıktı (yalnızca Pro sürümünde mevcuttur). Testim için ACF 5.8 RC 1 kullandım. Son sürüm şimdi mevcut. Elliot Condon, eklentinin yazarıdır ve ilk sürüm 2011'de piyasaya sürüldü. Eklenti, hem serbest çalışanlar hem de ajanslar için oldukça popüler bir geliştirici aracı haline geldi ve 1 milyonun üzerinde yüklemeye sahip.

Başarısı ve çok yönlülüğü, alan grubunun oluşturulmasını diğer iki eklentiye kıyasla daha ilgili bir süreç haline getiriyor. Pro sürüm 5.8, blok oluşturma aracının ilk sürümünü içerir.

Bu, "Ekip Üyesi" Alan grubunun yönetici görünümüdür.

Şimdi bunu nasıl bir blok haline getirebilirim? Belgeler yeterince kapsamlı. Not: Bu testte biraz farklı bir sırayla gittim…

Field Group ile başladım ve bloğu kaydettikten sonra o yönetici ekranına geri dönmem gerekiyordu (aşağıya bakın).

İki dosya kullandım. İlk önce bloğu temamın function.php dosyasına kaydetmem gerekiyordu. Şablon/blok oluşturma kodu için ayrıca aktif temanın klasöründe saklanmak üzere content-block-team-member.php kullandım.

Bu ikisinin nasıl bir araya geldiğini bir saniyede göreceksiniz. İşin geri kalanı arka uçtaki eklenti tarafından yapılır.

Öyleyse Blok Kodu PHP'de yazalım

İlk snippet blok kaydıdır. Ona bir ad, başlık, açıklama verdim, oluşturma şablonuna işaret ettim, ona bir kategori, bir simge ve içerik üreticisinin bloğu Blok Yerleştirici'de bulabileceği bazı anahtar sözcükler verdim. Temamın function.php dosyasının sonuna kadar kaydırdım ve şu parçacığı ekledim:

 function register_acf_blocks() {
   // bir ekip üyesi bloğu kaydedin.
   acf_register_block(dizi(
       'isim' => 'acf ekibi üyesi',
       'başlık' => __('ACF Ekip Üyesi'),
       'description' => __('ACF 5.8 aracılığıyla oluşturulan özel bir ekip üyesi bloğu'),
       'render_template' => 'content-block-team-member.php',
       'kategori' => 'biçimlendirme',
       'icon' => 'yönetici yorumları',
       'anahtar kelimeler' => dizi( 'ekip üyesi', 'ekip' ),
   ));
}
// Fonksiyonun mevcut olup olmadığını kontrol edin ve kuruluma bağlanın.
if( function_exists('acf_register_block') ) {
   add_action('acf/init', 'register_acf_blocks');
}

Bu kod doğrudan belgelerden alınmıştır ve ben sadece birkaç değeri değiştirdim.

Bir sonraki bölümde blok oluşturma şablonunu oluşturdum. Dosya adının, yukarıdaki metindeki " content-block-team-member.php " olan "render_template" özniteliği ile eşleşmesi gerekir.

Ayrıca ACF'nin belgelerini takip ettim ve yalnızca birkaç değeri değiştirdim ve ekran kodunu güncelledim.

 <?php
// belirli stil için id niteliği oluştur
$id = 'ekip üyesi' . $block['id'];

// blok ayarından ("wide") hizalama sınıfı ("alignwide") oluşturun
$align_class = $blok['hiza'] ? 'uyum'. $blok['hiza'] : '';

// Blok alanları için değerleri yükle ve varsayılanları ata.
$short_bio = get_field('short_bio') ?: 'kısa biyografi buraya gelecek...';
$first_name = get_field('first_name') ?: 'Ad';
$last_name = get_field('last_name') ?: 'Soyadı';
$image = get_field('resim');
$email_address = get_field('email_address');
$uzantı = get_field('uzantı');
?>

" class="ekip üyesi ">
       

   

   " alt="" alt=" " genişlik="150"/>
       
       

       

       
       
   

Fieldgroup ile başladığımda, geri dönmem ve grubun az önce kaydettiğim blokla ilişkili olduğundan emin olmam gerekiyordu. Alan Grubu ekranının altında Konum için bir kural oluşturdum: Şunu okuması gerekiyor: “ Blok ACF Takım Üyesine eşitse bu alan grubunu göster.

Şimdi iki üye eklediğimde bunun Blok düzenleyicide nasıl çalıştığını görelim.

bu enteresan bir tecrübeydi. Verileri girmek için editör bölümündeki formu kullanabilirsiniz. Diğer bir seçenek ise kenar çubuğunda bulunan form alanlarına verileri girmek ve blok güncellemesini gerçek zamanlı olarak görmek. İki yöntem arasında geçiş yapabilirsiniz, ancak şu anda hangi yöntemi kullandığınıza bağlı olarak “Düzenlemeye Geç” veya “Önizlemeye Geç” Düğmesine tıklayabilirsiniz.

Blok düzenleyici kullanıcı arayüzü iyi çalışıyor. Gerekli olan daha ayrıntılı kurulum ve koddan geçmeye değer.

Tembel Bloklarla Takım Bloğu Oluşturma

Bu testteki üçüncü eklenti, GhostKit blok koleksiyonunu da yayınlayan aynı ekip olan nkdev.info'dan Nikita tarafından “Lazy Blocks” olarak adlandırılıyor.

Sadece bilgileri post_content içinde saklamama izin vermekle kalmıyor, aynı zamanda post_meta tablosunda saklama seçeneğim de var.

İşte alanları oluşturmak için arayüzü kullanmanın bir videosu.

Bu yönetici ekranı blokları oluşturmak için tüm bilgileri almaya odaklandığından, sol tarafta alanları ve kenar çubuğunda oluşturdum. Editöre bir blok kaydetmek için gereken bilgileri doldurdum.

Altına, ön uç ve arka uç için HTML ekleyebildim. Sözdizimi Block Lab'den bile daha kolaydır ve elbette ACF'nin şablonlamasından çok daha kolaydır.

Temamın function.php dosyasına herhangi bir kod eklemem veya şablon kodumla ek dosyalar oluşturmam gerekmiyordu.

İşlev çağrıları yerine sözdizimi vurgulama ve etiketleri birleştirme yardımıyla hepsini buraya ekleyebilirsiniz. Belgeler, şablon kodunuzu yazmanın birden çok yolunu gösterir. Bu bağlamda diğer sistemlerin birleştirme etiketlerine çok daha yakın olduğu için kesinlikle Gidonların (anlamsal şablonlama) hayranıyım.

Aynı kodu “Editor HTML” sekmesine kopyaladım/yapıştırdım, böylece form alanlarının altında ön uç görüntüsünü görebildim.

Hadi kullanalım.

Bu işe yarıyor gibi görünüyor. Bloğun seçimini kaldırdığımda formun kaybolmaması biraz garipti. Editörde çok yer kaplıyor. Ekip üyelerinin iki sütunlu bir blokta olmasını istesem de, iki bloğu bir Sütun Bloğuna sürükleyip bırakmayı başaramadım. Destek başlığımda bundan bahsetmiştim ve nK yanıtladı: “…blok seçilmediğinde kontrolleri gizlemek iyi bir özellik, ACF Bloklarına zaten eklendi ve yakında Lazy Blocks'a eklenecek.” İşte karşınızda – hepsi zamanında.

Sonuç: Karmaşık, Gelişmiş veya Kolay.

ACF 5.8 çok sağlam bir blok oluşturma özelliğine sahiptir ve site oluşturmak için eklentiyi kullanan herkes, müşterileri için dinamik bloklar oluşturabilmekten ve oluşturmaktan çok mutlu olacaktır. İyi düşünülmüş ve tüm beceri setlerinin geliştiricileri hızla çalışmaya başlayacak.

PHP'de iyi bilgili olmayan biri, her şeyi yoluna koymak için deneme yanılma payına sahip olacaktır. Bloklar için gereksinimler daha fazla dahil olduğunda ve bu testin kullanım durumunun ötesinde olduğunda, daha da karmaşık hale gelecektir. Bu, WordPress'e yeni başlayanlar veya kendileri çok fazla kod yazmayan DIY site uygulayıcıları için bir araç değildir.

Şimdilik sadece ACF 5.8 Pro sürümü blok oluşturucu özelliği ile birlikte geliyor. Condon, onu bağımsız bir eklenti yapmayı düşünüyor. (Twitteratti'nin fikir hakkında ne düşündüğünü görün…)

Block Lab , gelişiminin ilk aşamalarındadır. Blok mimarisinin çoğunu soyutlamayı başarır ve yazılması gereken kod miktarını azaltır. Dokümantasyon çok faydalıdır. Şablon ayrı bir dosyada saklanır ve diğer tema dosyalarıyla birlikte muhafaza edilmesi gerekir. Eğer şirketimde bunu projelerimizden herhangi biri için kullanacak olsaydık, şablon dosyasını yardımcı eklentilerimizden biriyle saklardık, böylece müşterilerimiz Block Lab ile oluşturulan blokların içeriğini ve görüntüsünü kaybetmeden temalar arasında geçiş yapabilirler.

Pro sürümü, tekrarlayıcı alanları, blokların içe/dışa aktarımı, kullanıcı nesnesi alanları, harita alanı ve daha birçok blok özelliği gibi ek özelliklere sahiptir.

XWP, WordPress.com VIP barındırma ve diğer şirketlerde kurumsal müşterilerle çalışan bir ajanstır. Ekip üyeleri, Customizer, AMP ve Tide dahil olmak üzere WordPress alanındaki diğer büyük fikirlere katkıda bulunuyor. Eklentinin yerinde kalmasını ve Gutenberg Aşama 2 ile site uygulayıcıları, ajanslar ve tema geliştiricileri için sağlam bir sisteme dönüşmesini bekliyorum.

Tembel Bloklar kurmak bir zevktir ve belirtildiği gibi, Handelbars şablonlama sözdiziminin hayranıyım. Yeni başlayanlar için bile öğrenmesi kolaydır ve biraz pratikle bir site sahibi, siteleri için belirli Gutenberg blokları oluşturabilir. Düzenleyicideki blok işleme, çalışıyor olmasına rağmen, ekran şu anda blok seçme durumu ve seçimi kaldırma durumu arasında geçiş yapmadığından biraz hantal.

Bir sayfa veya bir gönderi bölümü için ek alanlara sahip olma gereksinimi varsa, Lazy Blocks prototip yapmak ve fikirden kavram kanıtına hızla geçmek için harika bir araçtır.

Tek uyarı: nkdev.info ve Nikita adının arkasındaki kişilerin kim olduğunu bulamadım. Web sitesi sadece genç bir şirket olduğunu ortaya koyuyor, daha fazlasını değil. Eklentiyi kullanıyorsanız, geliştiricilerin eklentiyi çıkmadan önce terk etmesi ihtimaline karşı B Planınız olduğundan emin olun.

ACF 5.8 oldukça karmaşıktır; Block Lab çok esnek ve sadece yarı karmaşıktır; ve Lazy Blocks uygun şekilde adlandırılmıştır ve kullanımı en kolay olanıdır. Her blok HTML'de bir miktar görüntü çıktısına ihtiyaç duyduğundan, hiçbiri kod yazmadan kurtulmanıza izin vermez.

Bu üç blok oluşturma eklentisi hakkında ne düşündüğünüzü bana bildirin. Ayrıca, Javascript'e girmeden bloklar oluşturmanıza izin veren başka bir eklenti bulduysanız, bunu bilmek istiyorum! Lütfen düşüncelerinizi ve keşiflerinizi yorumlarda paylaşın!