Sadece PHP ile Gutenberg Blokları Nasıl Oluşturulur

PHP ile Gutenberg Blokları kullanarak JavaScript olmadan özel blok kaydı, ayar alanları, güvenli çıktı ve kısa kod entegrasyonu oluşturun.

Özel bir Gutenberg bloğu geliştirmek isteyen PHP geliştiricileri, uzun süre React bileşenleri, Node.js paketleri ve derleme araçlarıyla uğraşmak zorunda kaldı. Basit bir bilgi kutusu veya fiyat kartı hazırlamak için bile JavaScript tabanlı ayrı bir geliştirme ortamı kurmak gerekiyordu.

- 11858 Teknoloji Destek Hattı -

WordPress 7.0 ile kullanıma sunulan PHP ile Gutenberg Blokları desteği, sunucu tarafında çalışan basit bloklar için bu süreci önemli ölçüde kısaltıyor. Artık uygun projelerde blok kaydı, düzenleyici ön izlemesi ve ön yüz çıktısı yalnızca PHP kullanılarak hazırlanabiliyor. Ancak bu yöntem, etkileşimli React bloklarının tam alternatifi değil; daha çok dinamik içerik, kısa kod ve mevcut PHP fonksiyonlarını blok düzenleyiciye taşımayı kolaylaştırıyor.

Bağımsız yayıncılık araçlarını değerlendirirken WordPress’in blok tabanlı yapısını başka platformlarla karşılaştırmak da yararlı olabilir. Özellikle abonelik ve e-posta yayını odaklı projelerde Substack Nedir, Ne İşe Yarar ve Nasıl Kullanılır konusu, özel blok geliştirmenin gerçekten gerekli olup olmadığını belirlemenize yardımcı olabilir.

PHP ile Gutenberg Blokları Nasıl Çalışır?

PHP ile Gutenberg Blokları, register_block_type() fonksiyonu içinde render_callback ve autoRegister desteği tanımlanarak oluşturulur. WordPress bloğu sunucuda kaydeder, düzenleyicide otomatik olarak görünür hâle getirir ve çıktıyı hem düzenleme ekranında hem ziyaretçi tarafında aynı PHP fonksiyonuyla üretir.

Geleneksel blok geliştirmede PHP kaydına ek olarak istemci tarafında registerBlockType çağrısı ve çoğunlukla bir edit.js dosyası bulunur. Yalnızca PHP kullanan modelde ise blok dinamik olarak oluşturulur. İçerik kaydedilmiş sabit HTML yerine, sayfa görüntülenirken render_callback tarafından hazırlanır.

Temel kayıt yapısı şu şekilde kurulabilir:

function teknodestek_bilgi_kutusu_render( $attributes ) {
	$baslik = isset( $attributes['baslik'] )
		? esc_html( $attributes['baslik'] )
		: 'Bilgi Kutusu';

	return sprintf(
		'<div class="teknodestek-bilgi-kutusu"><h3>%s</h3></div>',
		$baslik
	);
}

add_action( 'init', function() {
	register_block_type( 'teknodestek/bilgi-kutusu', array(
		'title'           => 'Bilgi Kutusu',
		'category'        => 'widgets',
		'icon'            => 'info',
		'render_callback' => 'teknodestek_bilgi_kutusu_render',
		'attributes'      => array(
			'baslik' => array(
				'type'    => 'string',
				'default' => 'Bilgi Kutusu',
			),
		),
		'supports'        => array(
			'autoRegister' => true,
		),
	) );
} );

Buradaki blok adı bir ad alanı ve blok kimliğinden oluşur. render_callback, HTML çıktısını üretirken autoRegister, bloğun ayrı bir JavaScript kaydı olmadan düzenleyicide görünmesini sağlar. WordPress belgeleri, bu kullanım için hem autoRegister hem de bir oluşturma fonksiyonunun bulunmasını zorunlu tutuyor.

- 11858 Teknoloji Destek Hattı -

PHP Ne İşe Yarar?

PHP, WordPress’in sunucu tarafındaki temel çalışma dilidir. Eklentilerin, temaların, veri tabanı sorgularının ve dinamik sayfa çıktılarının büyük bölümü PHP üzerinden işlenir.

Bu yöntemde PHP yalnızca bloğu kaydetmez. Kullanıcının belirlediği alanları alır, verileri güvenli hâle getirir ve ekranda gösterilecek HTML yapısını üretir. Bu nedenle esc_html(), esc_attr() ve wp_kses_post() gibi temizleme fonksiyonları ihmal edilmemelidir.

Blok Ayarları JavaScript Olmadan Eklenebilir mi?

WordPress, desteklenen öznitelik türlerinden bazı düzenleyici kontrollerini otomatik olarak oluşturabilir. Metin alanları için string, sayısal değerler için integer veya number, seçim alanları içinse string ile birlikte enum kullanılabilir.

Örneğin bir fiyat kartında plan adı, fiyat ve tema seçeneği şu yapıyla tanımlanabilir:

'attributes' => array(
	'planName' => array(
		'type'    => 'string',
		'default' => 'Profesyonel',
	),
	'price' => array(
		'type'    => 'integer',
		'default' => 499,
	),
	'theme' => array(
		'type'    => 'string',
		'enum'    => array( 'light', 'dark' ),
		'default' => 'light',
	),
),

Bu alanlar blok ayarları kenar çubuğunda otomatik olarak gösterilebilir. Buna karşılık zengin metin düzenleme, medya seçimi veya doğrudan blok yüzeyinde içerik değiştirme gibi gelişmiş ihtiyaçlarda JavaScript hâlâ gereklidir. WordPress 7.1 çalışmaları kapsamında medya, bağlantı ve zengin metin gibi daha kapsamlı alan türleri araştırılıyor; mevcut destek sürüme göre değişebilir.

- 11858 Teknoloji Destek Hattı -

Yerleşik Tasarım Ayarları Nasıl Kullanılır?

get_block_wrapper_attributes() fonksiyonu, kullanıcının renk, boşluk, yazı boyutu ve kenarlık gibi blok ayarlarını ana kapsayıcıya aktarır.

$wrapper = get_block_wrapper_attributes(
	array( 'class' => 'fiyat-karti' )
);

return sprintf(
	'<div %s><h3>%s</h3><p>%d TL</p></div>',
	$wrapper,
	esc_html( $attributes['planName'] ),
	intval( $attributes['price'] )
);

Bu yaklaşım, özel sınıflarla WordPress’in ürettiği standart blok özelliklerini aynı kapsayıcıda birleştirir. Görsel düzen için ayrı bir CSS dosyası kaydedilebilir ve blok tanımındaki style alanına bağlanabilir.

Editör olarak denediğim örneklerde en sık karşılaştığım ayrıntı, kaynaklarda hâlâ eski auto_register yazımının görülebilmesiydi. WordPress 7.0 için yayımlanan güncel geliştirici notlarında özellik adı autoRegister biçiminde geçiyor. Kod çalışmadığında ilk kontrol edilmesi gereken noktalardan biri bu yazım farkıdır.

Kısa Kodlar Gutenberg Bloğuna Dönüştürülebilir mi?

Mevcut bir kısa kod, tamamen yeniden yazılmadan Gutenberg arayüzüne taşınabilir. Blok özniteliklerinden gelen değerler güvenli biçimde kısa kod metnine eklenir ve do_shortcode() ile çalıştırılır.

Bu yöntem özellikle iletişim kutuları, hesaplama araçları, üyelik bilgileri veya yıllardır kullanılan özel PHP fonksiyonları için kullanışlıdır. Kullanıcı kısa kod söz dizimini hatırlamak yerine ayarları blok kenar çubuğundan seçebilir.

Ancak her kısa kodu otomatik olarak bloklaştırmak doğru değildir. Yoğun istemci etkileşimi, sürükle bırak davranışı veya anlık arayüz güncellemesi gereken yapılarda React tabanlı geliştirme daha uygun kalır. PHP modeli, öncelikle sunucu çıktısı üreten ve sınırlı sayıda ayarı bulunan bileşenlerde güçlüdür.

Kurulum sırasında blok görünmüyor, eklenti etkinleşmiyor veya PHP hatası nedeniyle düzenleyici açılmıyorsa profesyonel destek alınabilir. 11858, 2011 yılından bu yana Türkiye genelinde 7/24 teknik destek sunar. Bilgisayar, akıllı TV, sosyal medya ve modem sorunlarında TeamViewer ile AnyDesk gibi lisanslı araçlarla uzaktan bağlantı sağlanır. Dakika bazlı şeffaf ücretlendirme kullanan hizmet, yüzde 95 memnuniyet oranı ve 500.000’den fazla başarılı işlem deneyimiyle uzman ekip tarafından yürütülür.

WordPress dışında daha hafif bir yayın altyapısı planlayanlar, Astro Nedir, Hızlı ve Esnek Statik Siteler Oluşturmanın Modern Yolu içeriğini de inceleyebilir. Böylece sunucu tarafında dinamik blok kullanmakla önceden oluşturulmuş statik sayfalar arasında daha bilinçli bir tercih yapılabilir.

PHP ile Gutenberg Blokları, JavaScript’i tümüyle gereksiz hâle getirmiyor; fakat sade ve sunucu odaklı bileşenlerde geliştirme eşiğini belirgin biçimde düşürüyor. Siz bu yapıyı mevcut bir kısa kodu taşımak için mi, yoksa sıfırdan özel bir blok oluşturmak için mi kullanırdınız? Deneyiminizi yorumlarda paylaşabilirsiniz.