Yalnızca PHP ile özel bloklar oluşturun. Eski usul shortcode'lara veda 🥳

Gutenberg blokları oluşturmak, WordPress 5.0'ın blok düzenleyicisini tanıtmasından bu yana React, Node.js ve bir derleme ardışık düzeni gerektiriyordu. Eğer uzmanlığınız PHP'de ise — benim gibi ve WordPress geliştiricilerinin büyük çoğunluğu gibi — bu engel sizi yaklaşık on yıl boyunca kenarda bıraktı. WordPress 7.0 bunu değiştiriyor. PHP'ye özgü bloklar, tek bir PHP dosyası ve autoRegister bayrağıyla tamamen işlevsel bir Gutenberg bloğu kaydetmenizi sağlıyor.

PHP yazıyorsunuz. Bir blok elde ediyorsunuz. Araç yok. Derleme yok. 🥳 Bu makalede PHP'ye özgü blokların nasıl çalıştığını görecek ve klasik bir shortcode'u blok eşdeğeriyle değiştiren gerçek dünya örneğini adım adım takip edeceksiniz.

​

PHP'ye Özgü Bloklar Nedir?

Şimdiye kadar özel bir Gutenberg bloğu oluşturmak, bir JavaScript araç zinciri kurmayı gerektiriyordu: npm install, bir block.json dosyası, webpack.config.js veya @wordpress/scripts derleme adımı ve JSX ile yazılmış bir edit.js bileşeni. Her değişiklik, düzenleyicide görebilmeden önce bir derleme adımı gerektiriyordu. Basit bir görüntüleme bloğu kaydetmek isteyen bir PHP geliştiricisi için bu yük, göreve kıyasla her zaman orantısız hissettirdi.

PHP'ye özgü bloklar bunların hepsini ortadan kaldırıyor. Artık register_block_type() içinde yalnızca 'autoRegister' => true geçirmeniz yeterli; WordPress, ServerSideRender kullanarak JavaScript tarafındaki her şeyi otomatik olarak hallediyor. Blok ekleyicide görünüyor, tuval üzerinde canlı önizleme oluşturuyor ve kenar çubuğunda Inspector Controls üretiyor — sizden tek bir satır JavaScript olmadan.

Kontroller, öznitelik türüne göre otomatik olarak oluşturuluyor:

Otomatik oluşturulan kontroller şimdilik yalnızca yukarıdaki dört türü kapsıyor. Görüntü seçiciler, medya yüklemeleri veya iç içe geçmiş veriler gibi daha karmaşık her şey henüz desteklenmiyor ve JavaScript ile kayıtlı bir blok gerektiriyor. Geliştiriciler, iç durum olarak işaretlemek için ayrı öznitelikleri local rolüyle de işaretleyebilir; WordPress bu öznitelikleri kenar çubuğu kontrolleri oluştururken atlıyor.

PHP'ye özgü bloklar, herhangi bir ek bağımlılık olmaksızın bugün WordPress 7.0'da kullanılabilir. Make WordPress Core'daki resmi geliştirici notunu okuyabilirsiniz.

​

Bu Kimin İçin?

Derin JavaScript uzmanlığı olmayan küçük ajanslar ve serbest çalışanlar artık bir derleme ardışık düzenine dokunmadan yerel WordPress özelliklerini tam anlamıyla kullanan blok düzenleyici çözümleri oluşturabilir. Shortcode'lara geri dönmek yerine yazar kutuları, alıntılar, referanslar, CTA banner'ları, bildirimler ve benzeri temel özel Gutenberg blokları sunmak istiyorsanız, PHP'ye özgü bloklar bu engeli önemli ölçüde düşürüyor.

Satır içi zengin metin düzenlemeye, gerçek zamanlı reaktif arayüze veya iç blok yuvalamaya ihtiyaç duyduğunuzda JavaScript ile kayıtlı blokların yerini tutmuyorlar — ancak geniş bir yapısal görüntüleme blokları sınıfı için tam isabet noktasını buluyor.

​

Eski Yol: Shortcode'lar

PHP'ye özgü bloklardan önce, pratik PHP geliştirici yaklaşımı bir shortcode idi. İşte üç öznitelikli basit bir referans shortcode'u: yazar adı, şirket, yıldız puanı ve inceleme metni için iç içerik:

function testimonial_shortcode( $atts, $content = '' ) {
    $atts = shortcode_atts( [
        'name'    => '',
        'company' => '',
        'stars'   => 5,
    ], $atts );
 
    $stars_count = max( 1, min( 5, intval( $atts['stars'] ) ) );
    $stars_html  = str_repeat( '★', $stars_count )
                 . str_repeat( '☆', 5 - $stars_count );
 
    return sprintf(
        '<blockquote class="testimonial">
            <p class="testimonial__stars">%s</p>
            <p class="testimonial__body">%s</p>
            <footer class="testimonial__attribution">
                <strong>%s</strong>%s
            </footer>
        </blockquote>',
        esc_html( $stars_html ),
        wp_kses_post( $content ),
        esc_html( $atts['name'] ),
        $atts['company'] ? ', ' . esc_html( $atts['company'] ) : ''
    );
}
add_shortcode( 'testimonial', 'testimonial_shortcode' );Copy

Kullanım:

[testimonial name="Sarah K." company="Acme Corp" stars="4"]
	Saved us hours every week.
[/testimonial]Copy

Çalışıyor... ama yalnızca bir shortcode 🤷🏻‍♂️

İşte shortcode'larla ilgili sorunların sadece bir kısmı:

• Düzenleyicide görünmez. Yazar, render edilmiş kartı değil, düzenleyicide [testimonial name="Sarah K." ...] görüyor. Önizleme yok.
• Keşfedilebilir değil. Shortcode'un var olduğunu bilmek ve parametre adlarını hatırlamak zorundasınız. Arayüzde hiçbir şey onu yüzeye çıkarmıyor.
• Yerel stil kontrolü yok. Renk, boşluk veya tipografiyi ayarlamak özel CSS veya manuel olarak bağlanmış ekstra öznitelikler gerektiriyor.
• İç içerik zengin metin değil. İnceleme gövdesi $content içinde düz bir dize olarak geçiyor — düzenlenebilir zengin metin alanı değil.

Shortcode'lar kendi dönemi için doğru araçtı. Blok düzenleyici daha iyi bir şey sunuyor, ancak bundan yararlanmak zor oldu. WordPress 7.0, PHP'ye özgü bloklar biçiminde bir kısayol sunuyor.

​

Daha Basit Bir Seçenek: PHP'ye Özgü Bloklar

Aynı referansı yalnızca PHP ile özel bir WordPress bloğu olarak oluşturalım. Tarif: supports içinde 'autoRegister' => true ile register_block_type() ve bir render_callback.

İşte bloğun tam kodu:

function my_plugin_register_testimonial_block() {
    register_block_type(
        'my-plugin/testimonial', // Block name: namespace/slug
        array(
            'title'      => 'Testimonial', // Shown in the block inserter
            'attributes' => array(
                // string attributes generate a text input in the sidebar
                'name'    => array(
                    'type'    => 'string',
                    'default' => '',
                ),
                'company' => array(
                    'type'    => 'string',
                    'default' => '',
                ),
                // integer attributes generate a number input
                'stars'   => array(
                    'type'    => 'integer',
                    'default' => 5,
                ),
                'body'    => array(
                    'type'    => 'string',
                    'default' => '',
                ),
            ),
            // render_callback is the PHP function that outputs the block's HTML
            'render_callback' => function ( $attributes ) {
                $stars_count = max( 1, min( 5, intval( $attributes['stars'] ) ) );
                $stars_html  = str_repeat( '★', $stars_count )
                             . str_repeat( '☆', 5 - $stars_count );
 
                // Translatable string for screen readers — standard WordPress i18n, nothing extra needed
                /* translators: %d: star rating out of 5 */
                $stars_label = sprintf( __( '%d out of 5 stars', 'my-plugin' ), $stars_count );
 
                return sprintf(
                    '<blockquote %s>
                        <p class="testimonial__stars" aria-label="%s">%s</p>
                        <p class="testimonial__body">%s</p>
                        <cite class="testimonial__attribution">
                            <strong>%s</strong>%s
                        </cite>
                    </blockquote>',
                    // Merges your class with editor-added colour, spacing, and typography styles
                    get_block_wrapper_attributes( array( 'class' => 'testimonial wp-block-quote' ) ),
                    esc_attr( $stars_label ),
                    esc_html( $stars_html ),
                    wp_kses_post( $attributes['body'] ),
                    esc_html( $attributes['name'] ),
                    $attributes['company'] ? ', ' . esc_html( $attributes['company'] ) : ''
                );
            },
            'supports' => array(
                // The key flag — tells WordPress to handle JS registration automatically
                'autoRegister' => true, 
                // The rest unlock native colour, typography, and spacing panels in the sidebar
                'color'      => array(
                    'background' => true,
                    'text'       => true,
                ),
                'typography' => array(
                    'fontSize' => true,
                ),
                'spacing'    => array(
                    'padding' => true,
                    'margin'  => true,
                ),
            ),
        )
    );
}
add_action( 'init', 'my_plugin_register_testimonial_block' );Copy

Sonuç:

Burada dikkat edilmesi gereken birkaç şey var. Birincisi, bir shortcode'un iç içeriğinin PHP'ye özgü bloklarda doğrudan bir karşılığı yok. İnceleme gövdesi, kenar çubuğu Inspector Controls'dan düzenlenen bir string özniteliği oluyor — tuval üzerinde düzenlenebilir zengin metin alanı değil, tek satırlı bir metin alanı. Kısa bir referans alıntısı için bu yeterli. Daha uzun gövde metni için RichText bileşeniyle JavaScript ile kayıtlı bir blok isteyeceksiniz.

İkincisi, get_block_wrapper_attributes(), sınıfınızı düzenleyicinin renk, tipografi ve boşluk için eklediği her şeyle birleştiriyor — böylece yerel stil panelleri ekstra CSS bağlantısı olmadan çalışıyor. render_callback, yalnızca kullanıcının ayarladığı değerleri içeren bir $attributes dizisi alıyor; $content parametresi yok, çünkü iç içerik desteklenmiyor.

Shortcode sürümüne kıyasla elde ettikleriniz:

• Düzenleyici tuvalinde canlı önizleme. Artık ham shortcode sözdizimi yok — yazar, düzenlerken render edilmiş referans kartını görüyor.
• Otomatik oluşturulan kontroller. Ad, şirket, gövde (metin girişleri) ve yıldızlar (sayı girişi), kenar çubuğu Inspector Controls'da otomatik olarak görünüyor.
• Yerel renk, yazı tipi ve boşluk panelleri. supportstan geliyor — özel CSS gerekmez.
• Keşfedilebilir. Blok, ekleyicide adıyla ve bir simgeyle görünüyor.

​

Baştan İtibaren Çeviri Hazır

PHP'ye özgü bloklarla çalışırken iki farklı çeviri endişesi var ve hangisinin hangisi olduğu konusunda net olmak faydalı.

Birincisi, PHP şablonunuza gömülü statik diziler — etiketler, düğme metinleri, arayüz metinleri. Bunlar, herhangi bir WordPress PHP dosyasında olduğu gibi __() ve _e() ile ele alınıyor. Yukarıdaki blokta yıldız etiketi bunun bir örneği:

/* translators: %d: star rating out of 5 */
$stars_label = sprintf( __( '%d out of 5 stars', 'my-plugin' ), $stars_count );Copy

Standart WordPress araçları bunları otomatik olarak alıyor. Başka bir şeye gerek yok.

İkinci endişe, blok öznitelikleri olarak depolanan kullanıcı tarafından girilen içerik — referans gövdesi, yorumcunun adı, şirket. Bu, editörlerinizin bloğa gerçekten yazdığı içeriktir ve __() buna dokunmaz. Çok dilli bir sitede, bu öznitelik değerlerinin her dil için ayrı ayrı çevrilmesi gerekiyor ve bu WordPress'in kendi başına halledebileceği bir şey değil.

​

PHP'ye Özgü Blokların (Henüz) Yapamadıkları

PHP'ye özgü blokların mevcut sınırlamaları:

• İç blok veya yuvalamaları yok. Bir PHP'ye özgü bloğun içine başka bloklar yerleştiremiyor.
• Tuval üzerinde zengin metin düzenleme yok. RichText bileşeni JavaScript gerektiriyor. Metin kontrolleri yalnızca kenar çubuğu metin alanı olarak render ediliyor.
• Kenar çubuğu dize alanları tek satırlı. Bir string özniteliği TextControl oluyor, TextareaControl değil — uzun metinler için ideal değil.
• Görüntü veya medya seçici özniteliği yok. Görüntü/dosya yükleme desteği, Block Fields API aracılığıyla sonraki bir sürüm için planlanmış.
• Düzenleyici önizlemesinde gidiş-dönüş gecikmesi var. Öznitelik değişiklikleri, sunucuda yeniden render için bir REST API isteği tetikliyor, bu nedenle önizleme anında güncellenmiyor.

Basit yapısal bloklar için — referanslar, CTA'lar, bildirimler, yazar biyografileri, işletme listeleri — PHP'ye özgü bloklar tam isabet noktasını buluyor. Tuval üzerinde zengin düzenleme gerektiren her şey için JavaScript kaydı doğru araç olmaya devam ediyor.

​

Sırada Ne Var

WordPress 7.0'ın PHP'ye özgü blokları, blok geliştirmeyi herhangi bir PHP geliştiricisinin erişebileceği hale getiriyor. Bir PHP dosyası, bir register_block_type() çağrısı ve kenar çubuğu kontrolleri, canlı tuval önizlemesi ve yerel stil desteğiyle tam işlevli bir Gutenberg bloğuna sahip oluyorsunuz. PHP yazıyorsunuz. Bir blok elde ediyorsunuz. Araç yok. Derleme yok. JavaScript yok.

Çok dilli siteler oluşturuyorsanız, Gato AI Translations PHP'ye özgü bloklarla sorunsuz çalışıyor — içeriğiniz ilk günden itibaren çevrilebilir durumda.

Daha ileri gitmek ister misiniz?

• Developing WordPress blocks without JSX or a build process — tam derleme ardışık düzeni olmadan minimum JavaScript eklemek isteyen geliştiriciler için
• Beginner WordPress Developer course — blok geliştirme için eksiksiz bir temel