Örnek Olay:

Klasik temaların görünümünü değiştirmek istersek, “Görünüm->Özelleştir” menüsü ile gidilen özelleştirme sayfasını kullanırız. Diyelim ki klasik bir temamız var. Bu temanın özelleştirme sayfasında bir seçenek var. Bu seçenek, sitenin header kısmında bir “Call to action” tipi bir buton gösteriyor.

Bu buton sadece bu bölümde gösteriliyor olsun. Temamızın kullanıcıları da bu botunu sadece gösterme/gizleme seçeneğine sahipler. Ne başka bir yerde daha kullanabiliyorlar ne de konumunda oynamalar yapabiliyorlar. Bu buton ile ilgili kullanıcımıza sunulan seçenekler şunlar olsun:

• Botunu gösterme/gizleme
• Buton tekstini girebilme
• Bağlantı (url) değerini girebilme
• Text rengini seçebilme
• Arkaplan rengini seçebilme

Tabi bütün bu ayarlar klasik temalarda kullanılan Customizer API ile yapılmıştır.

Bizim bu yazıdaki hedefimiz bu butonu bir blok modeline dönüştürmektir. Bunu başardığımızda kazancımız şunlar olacaktır:

• Butonu dilediğimiz her yerde kullanabiliyor olacağız.
• Tipagrafi, boyut, kenarlık gibi daha bir çok ayarı yapabiliyor olacağız.
• Renklendirme konusunda çok daha özgür olacağız.
• Başka bloklarla kombine edip kullanabileceğiz.

Şimdi adım adım bu işi nasıl yapacağımız görelim:

Adım 1: Butonu Blok Editörde Tekrar Oluşturun

Bu aşamada, blok editörün bütün nimetlerinden yararlanarak dilediğimiz gibi bir buton blok oluşturabiliriz.

Adım 2: Hazırladığınız Bloğu Bir Blok Modeli Olarak Kaydedin

Bir blok modeli oluşturmanın 2 yolu vardır:

1. Temanızın ana dizininde bir patterns/ dizini oluşturup blok modelimizi, bu dizindeki bir dosya olarak oluşturmak.
   • Aşağıdaki verilen kod Twenty Twenty Three temasının “Call to action” adındaki modelidir:

call-to-action.php

<?php
/**
 * Title: Call to action
 * Slug: twentytwentythree/cta
 * Categories: featured
 * Keywords: Call to action
 * Block Types: core/buttons
 */
?>
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide">
	<!-- wp:column -->
	<div class="wp-block-column">
		<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.2"}},"fontSize":"x-large"} -->
		<p class="has-x-large-font-size" style="line-height:1.2"><?php echo esc_html_x( 'Got any book recommendations?', 'sample content for call to action', 'twentytwentythree' ); ?>
		</p>
		<!-- /wp:paragraph -->

		<!-- wp:buttons -->
		<div class="wp-block-buttons">
			<!-- wp:button {"fontSize":"small"} -->
			<div class="wp-block-button has-custom-font-size has-small-font-size">
				<a class="wp-block-button__link wp-element-button">
				<?php echo esc_html_x( 'Get In Touch', 'sample content for call to action button', 'twentytwentythree' ); ?>
				</a>
			</div>
			<!-- /wp:button -->
		</div>
		<!-- /wp:buttons -->
	</div>
	<!-- /wp:column -->

	<!-- wp:column -->
	<div class="wp-block-column">
		<!-- wp:separator -->
		<hr class="wp-block-separator has-alpha-channel-opacity"/>
		<!-- /wp:separator -->
	</div>
	<!-- /wp:column -->
</div>
<!-- /wp:columns -->

2. Temamızın functions.php dosyası yardımı ile register_block_patterns() fonksiyonunu kullanarak bir model oluşturmak.
   • Bu işlemin nasıl yapıldığını anlamak için şu yazımıza göz atabilirsin: Klasik Temalara Blok Modelleri Ekleme

Adım 3: Blok Modeline Özelleştirme Seçeneklerinin Değerlerini Ekleyin

Bu adımda, Customizer API ile oluşturduğumuz özelleştirme formundaki bilgileri blok modelimize taşıyoruz. Diyelim ki, özelleştirme ayarlarında, form alanlarımız için şu adları kullandık:

• “myfirsttheme_action_link“: Butonun url değeri
• “myfirsttheme_action_text“: Butonun texti
• “myfirsttheme_action_text_color“: Botun textinin rengi
• “myfirsttheme_action_bgcolor“: Arkaplan rengi

Aşağıdaki fonksiyon, url değerini ve texti alarak bir buton HTML’i oluşturur.

functions.php

<?php
function benim_temam_action_text() {
	$action_text = '';
	if ( get_theme_mod( 'myfirsttheme_action_link' ) ) {
		$action_text .= '<a href="' . esc_url( get_theme_mod( 'myfirsttheme_action_link' ) ) . '">';
	}
	$action_text .= wp_kses_post( get_theme_mod( 'myfirsttheme_action_text' ) );
	if ( get_theme_mod( 'myfirsttheme_action_link' ) ) {
		$action_text .= '</a>';
	}
	return $action_text;
}

Bu fonksiyonu ve diğer özelleştirme ayarlarını (Customizer API form değerlerini), modelin content kısmında şöyle kullanabiliriz:

'content' =>'
	<!-- wp:group {"style":{"border":{"width":"4px","style":"solid","radius":"8px"},"color":{"background":"' . esc_attr( get_theme_mod( 'myfirsttheme_action_bgcolor', '#fff' ) ) . '"}},"borderColor":"tertiary","layout":{"type":"constrained"},"className":"call-to-action__large"} -->
	<div class="wp-block-group call-to-action__large has-border-color has-tertiary-border-color has-background" style="background-color:' . esc_attr( get_theme_mod( 'myfirsttheme_action_bgcolor', '#fff' ) ). ';border-radius:8px;border-style:solid;border-width:4px"><!-- wp:paragraph {"align":"center","style":{"color":{"text":"' . esc_attr( get_theme_mod( 'myfirsttheme_action_text_color', '#000' ) ) . '"},"elements":{"link":{"color":{"text":"' . esc_attr( get_theme_mod( 'myfirsttheme_action_text_color', '#000' ) ). '"}}}},"fontSize":"large"} -->
	<p class="has-text-align-center has-text-color has-link-color has-large-font-size" style="color:' . esc_attr( get_theme_mod( 'myfirsttheme_action_text_color', '#000' ) ). '">' . myfirsttheme_action_text() . '</p><!-- /wp:paragraph -->
	</div>
	<!-- /wp:group -->
',

Adım 4: Blok Modelini Kullanıma Sunun

Eğer temanızın header kısmını, düzenlenebilir bir şablon parçası halinde getirmek isterseniz aşağıdaki kodu dilediğiniz şablon parçasında kullanabilirsiniz:

<!-- wp:pattern {"slug":"myfirsttheme/call-to-action"} /-->

Eğer header şablonunuzun PHP yapısını korumak istiyorsanız, oluşturduğunuz bu modeli şablonunuzda şu şekilde kullanabilirsiniz:

echo do_blocks( '<!-- wp:pattern {"slug":"myfirsttheme/call-to-action"} /-->' );