Gutenberg Blok Varyasyonları mevcut bloklara hazır özellikler kazandırır. Stil varyasyonlarıyla farkını ve kullanım biçimini pratik örneklerle inceleyin.
WordPress blok editöründe aynı Görsel, Grup ya da Buton bloğunu sürekli benzer ayarlarla kullanıyorsanız her seferinde baştan düzenlemek gereksiz zaman kaybettirebilir. Gutenberg Blok Varyasyonları burada işe yarıyor. Var olan bir bloğa önceden belirlenmiş özellikler kazandırarak editörde ayrı bir blok gibi kullanılmasını sağlamak mümkün.
Bunun yanında Stil Varyasyonları da sık kullanılan görünümleri tek seçimle uygulamaya yardımcı oluyor. İki özellik benzer isimlere sahip olsa da aynı işi yapmıyor. Biri bloğun görünümünü değiştirirken diğeri başlangıç ayarlarını, özelliklerini ve gerektiğinde iç bloklarını önceden hazırlayabiliyor.
Blok editöründe görsel yüklerken sorun yaşanıyorsa özelleştirmeye geçmeden önce medya tarafının düzgün çalıştığından emin olmak gerekir. Özellikle yükleme sırasında hata alan sitelerde WordPress Medya Kütüphanesi HTTP Hatası Nasıl Düzeltilir içeriğindeki kontrollerin uygulanması, geliştirme sırasında karşılaşılabilecek farklı sorunların birbirine karışmasını önleyebilir.
Gutenberg Blok Varyasyonları Nedir?
Gutenberg Blok Varyasyonları, WordPress’te mevcut bir bloğun önceden yapılandırılmış farklı bir sürümünü oluşturmayı sağlar. Varyasyon içinde blok özellikleri, CSS sınıfları ve başlangıç ayarları tanımlanabilir. Hazırlanan seçenek blok ekleyicide ayrı bir öğe gibi görüntülense de arka planda yine temel aldığı WordPress bloğunu kullanır.
Buradaki önemli ayrıntı Stil Varyasyonları ile Blok Varyasyonlarının birbirine karıştırılmaması. Stil Varyasyonu yalnızca görünüm üzerinde çalışır. Örneğin Görsel bloğuna Polaroid görünümü eklediğinizde WordPress bloğun temel özelliklerini değiştirmez, yalnızca bloğun kapsayıcısına ilgili CSS sınıfını ekler.
Blok Varyasyonları ise daha ileri gider. Bir Görsel bloğunu belirli bir stil ve etkinleştirilmiş animasyon seçeneğiyle hazır biçimde blok ekleyiciye yerleştirebilirsiniz. Kullanıcı açısından yeni bir blok seçiliyormuş gibi görünür, fakat aslında mevcut core/image bloğunun önceden hazırlanmış halidir.
Stil Varyasyonu Nasıl Eklenir?
Örneği Görsel bloğu üzerinden düşünelim. Geliştirme tarafında registerBlockStyle kullanılarak core/image için yeni bir stil kaydedilebilir:
registerBlockStyle('core/image', {
name: 'polaroid',
label: 'Polaroid',
});Bu tanımlama yapıldığında WordPress, stil seçilen Görsel bloğuna otomatik olarak is-style-polaroid sınıfını ekler. Ardından görünüm CSS ile belirlenebilir. Kenar boşluğu, arka plan, gölge veya hafif döndürme efekti gibi değişiklikler bu sınıf üzerinden uygulanır.
Editörde Görsel bloğunu seçip Stiller bölümünü açtığınızda Polaroid seçeneği diğer stillerin yanında görünür. Kullanıcı burada yalnızca görünümü değiştirir; görselin bağlantısı, açıklaması veya diğer blok özellikleri olduğu gibi kalır.
2026 itibarıyla burada dikkat edilmesi gereken küçük bir ayrıntı CSS seçicilerinin özgüllüğü. Bazı tema stilleri editör tarafında hazırladığınız kurallardan daha baskın olabilir. Ön yüzde doğru görünen bir stil editörde farklı görünüyorsa sorun doğrudan varyasyondan değil, seçicilerin önceliğinden kaynaklanabilir.
Gutenberg Blok Varyasyonları Nasıl Oluşturulur?
Bir adım ileri gidip hazır bir Görsel bloğu oluşturmak istediğinizde registerBlockVariation kullanılabilir:
registerBlockVariation('core/image', {
name: 'animated-polaroid',
title: 'Animated Polaroid',
icon: 'image-filter',
attributes: {
className: 'is-style-polaroid',
imageAnimation: true,
},
scope: ['inserter'],
});Burada varyasyonun temeli yine core/image. Fark, blok eklendiği anda is-style-polaroid sınıfının ve imageAnimation özelliğinin hazır gelmesi. scope değerinin inserter olarak belirlenmesi de seçeneğin blok ekleyicide görünmesini sağlıyor.
Bu yapı özellikle aynı blok düzeninin birçok içerikte tekrarlandığı projelerde kullanışlı. Editörün hangi sınıfı eklemesi gerektiğini veya hangi ayarı açacağını hatırlamasına gerek kalmıyor.
Animasyon Seçeneği Nasıl Eklenebilir?
Kaynak örnekte Görsel bloğuna imageAnimation adında boolean bir özellik ekleniyor. Ardından blok araç çubuğuna animasyonu açıp kapatan bir kontrol yerleştiriliyor. Özellik etkin olduğunda bloğa has-image-animation sınıfı ekleniyor ve CSS tarafındaki hover efekti devreye giriyor.
Böylece Gutenberg Blok Varyasyonları yalnızca hazır görünüm sunmakla kalmıyor, bloğun davranışını belirleyen başlangıç ayarlarını da taşıyabiliyor.
Burada test edilmesi gereken noktalardan biri lightbox uyumluluğu. Verilen örnekte Polaroid stiliyle CSS geçişi kullanıldığında Tıklandığında büyüt özelliği istenmeyen bir görüntü oluşturabiliyor. Çözüm olarak Polaroid stili etkin olduğunda lightbox kapatılıyor ve editöre bilgilendirme mesajı gösteriliyor. Tema veya WordPress sürümüne göre davranış değişebileceği için bu tür etkileşimleri ön yüzde ayrıca kontrol etmek gerekiyor.
Stil mi Blok Varyasyonu mu Kullanılmalı?
Yalnızca görünüm değişiyorsa Stil Varyasyonu yeterli. Aynı bloğun başlangıç ayarlarını, CSS sınıflarını veya belirli özelliklerini hazır hale getirmek gerekiyorsa Gutenberg Blok Varyasyonları daha uygun.
Örneğin yalnızca Görsel bloğuna farklı bir çerçeve eklemek için yeni blok üretmeye gerek yok. Ancak o çerçevenin her kullanımda animasyonla birlikte gelmesi isteniyorsa varyasyon oluşturmak daha temiz bir çözüm sunar. Böylece içerik ekleyen kişi teknik ayrıntılarla uğraşmadan hazırlanan seçeneği blok ekleyiciden kullanabilir.
Blok editöründe yapılan bu tür geliştirmeler JavaScript, CSS ve WordPress filtreleri birlikte kullanıldığında biraz karmaşıklaşabilir. Kod veya site ayarlarında beklenmeyen bir sorun yaşandığında 11858 üzerinden bilgisayar, WordPress kullanımı ve bağlantılı teknik konularda destek alınabilir. Hizmet, gerektiğinde TeamViewer ve AnyDesk gibi lisanslı uzaktan bağlantı araçlarını kullanarak işlem yapılmasına olanak tanır.
Özelleştirmelerin sayısı arttıkça yalnızca editör tarafını düşünmek de yeterli olmayabilir. Özellikle yapay zekâ servisleri, yoğun arka plan işlemleri veya dinamik özellikler kullanılan projelerde Yapay Zeka Kullanan WordPress Siteleri İçin Altyapı Nasıl Olmalı konusu performans tarafında hangi kaynakların önem kazandığını anlamaya yardımcı olabilir.
Gutenberg Blok Varyasyonları doğru yerde kullanıldığında çekirdek blokları değiştirmeden editör deneyimini projeye göre şekillendirebilir. Asıl avantaj yeni bloklar üretmekten çok, zaten çalışan blokları içerik ekleyen kişinin daha az işlem yapacağı hale getirmektir. Siz WordPress bloklarında en çok hangi ayarı tekrar tekrar yapmak zorunda kalıyorsunuz?
