Gutenberg Blok Editoru Kullanimi ve Ipuclari

WordPress'te yazı ve sayfa hazırlarken karşınıza çıkan o boş beyaz alan, aslında sitenizin en çok vakit geçireceğiniz aracıdır. WordPress 5.0 ile birlikte varsayılan içerik düzenleyici tamamen değişti ve yerini "Gutenberg" olarak da anılan blok editörüne bıraktı. Eski TinyMCE tabanlı klasik editöre alışkın olanlar için bu geçiş ilk başta yabancı gelebilir; ancak blok mantığını bir kez kavradığınızda, tek bir yazı alanına sıkışmadan gerçek anlamda sayfa tasarlayabildiğinizi fark edersiniz.

Bu rehberde Gutenberg'in ne olduğunu ve klasik editörden nasıl ayrıldığını, blok kavramının neden bu kadar güçlü olduğunu ve en sık kullanacağınız blokları uygulamalı biçimde ele alacağız. Ardından sütun, grup ve kapak gibi düzen bloklarıyla nasıl profesyonel yerleşimler kurulacağını, tekrar kullanılabilir blokları ve blok kalıplarını (patterns) nasıl kullanacağınızı, işinizi hızlandıran klavye kısayollarını ve blok kilitleme özelliğini göstereceğiz. Amacımız, yeni başlayan birinin editörü açtığında kaybolmadan, hızlı ve düzenli içerik üretebilmesi.

Gutenberg Nedir ve Klasik Editörden Farkı#

Gutenberg, WordPress'in modern içerik düzenleyicisinin proje adıdır; matbaayı yaygınlaştıran Johannes Gutenberg'e atıfla seçilmiştir. Resmî adı "Blok Editörü"dür ve WordPress 5.0'dan (2018) itibaren varsayılan editördür. Temel fikri basittir: içeriğinizin her parçası ayrı bir "blok"tur. Bir paragraf bir bloktur, bir başlık başka bir bloktur, bir görsel, bir buton, bir tablo, bir video gömme, hepsi bağımsız bloklardır.

Klasik editör ise tek bir metin kutusundan ibaretti. Görsel eklemek, sütun oluşturmak ya da özel bir düzen kurmak için ya HTML koduna inmeniz ya da kısa kod (shortcode) ezberlemeniz gerekirdi. Gutenberg bu ihtiyacı ortadan kaldırır; düzeni doğrudan, gördüğünüz gibi kurarsınız. İki editör arasındaki temel farkları şöyle özetleyebiliriz:

Klasik editöre alışkınsanız ve mutlaka geri dönmek istiyorsanız, resmî "Classic Editor" eklentisiyle eski deneyimi geçici olarak koruyabilirsiniz. Ancak WordPress'in tüm yeni özellikleri (tam site düzenleme, blok temaları, kalıp kütüphanesi) blok editörü üzerine inşa ediliyor. Bu yüzden uzun vadede Gutenberg'i öğrenmek, direnmekten çok daha kârlı bir yatırımdır.

Blok Mantığını Anlamak#

Gutenberg'i verimli kullanmanın anahtarı, "her şey bir bloktur" fikrini içselleştirmektir. Yeni bir yazı açtığınızda karşınıza boş bir paragraf bloğu gelir. Enter tuşuna her bastığınızda yeni bir paragraf bloğu oluşur. Yeni bir blok eklemek içinse satır başındaki artı (+) simgesine tıklarsınız ya da boş bir satırda / yazarak blok arama kutusunu açarsınız. Örneğin /görsel, /başlık veya /tablo yazıp Enter'a basmak, o bloğu anında ekler. Bu eğik çizgi komutu, deneyimli kullanıcıların en çok sevdiği kısa yollardan biridir.

Perde arkasında Gutenberg, içeriğinizi veritabanına özel HTML yorumlarıyla işaretlenmiş temiz bir yapıda kaydeder. Bu yapıyı editörün sağ üst köşesindeki üç nokta menüsünden "Kod düzenleyici"ye geçerek görebilirsiniz. Basit bir paragraf ve başlık şuna benzer:

<!-- wp:heading -->
<h2 class="wp-block-heading">Hizmetlerimiz</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Size en uygun cozumu birlikte belirliyoruz.</p>
<!-- /wp:paragraph -->

Bu işaretleme sayesinde WordPress her bloğun ne olduğunu bilir; bir eklenti ya da tema bu blokları güvenle işleyebilir. Sizin bu kodu elle yazmanıza gerek yoktur, ama arka planda ne olduğunu bilmek, bir sorun çıktığında (örneğin "blok kurtarma" uyarısı aldığınızda) neye baktığınızı anlamanızı sağlar.

Her bloğun iki ayar katmanı vardır. Bloğu seçtiğinizde üstünde beliren küçük araç çubuğu (toolbar) hizalama, kalın/italik, bağlantı gibi hızlı işlemleri sunar. Sağdaki Ayarlar panelinde ise o bloğa özel daha ayrıntılı seçenekler bulunur: renk, tipografi, boşluk (padding/margin), köşe yuvarlaklığı gibi. Bu iki katmanı ayırt etmek, aradığınız ayarı hızlıca bulmanızı sağlar.

Sık Kullanılan Temel Bloklar#

Yüzlerce blok olsa da günlük içerik üretiminin %90'ı bir avuç temel blokla döner. Bunları iyi tanımak, hızınızı katlar.

• Paragraf. En temel bloktur; düz metin buraya yazılır. Sağ panelden yazı boyutunu, metin ve arka plan rengini, damla harf (drop cap) gibi seçenekleri ayarlayabilirsiniz.
• Başlık. H1'den H6'ya kadar başlık seviyeleri sunar. Yazınızın iskeletini başlıklar kurar; okunabilirlik ve SEO için başlık hiyerarşisini düzgün kullanmak önemlidir (bir yazıda tek H1, alt bölümler H2, onların altı H3 şeklinde).
• Görsel. Ortam kütüphanesinden seçebilir, doğrudan yükleyebilir ya da URL ile ekleyebilirsiniz. Alternatif metin (alt text) alanını doldurmayı unutmayın; hem erişilebilirlik hem arama motoru görünürlüğü için gereklidir.
• Liste. Sırasız (madde işaretli) veya sıralı (numaralı) listeler oluşturur. Her madde iç içe alt maddeler alabilir.
• Alıntı ve Öne Çıkan Alıntı (Pullquote). Bir metni vurgulamak için kullanılır.
• Buton. Çağrı-eylem (CTA) bağlantıları için idealdir; birden fazla butonu yan yana dizebilirsiniz.
• Tablo. Satır ve sütun sayısını seçerek hızlıca veri tablosu oluşturursunuz.
• Kod ve Önceden Biçimlendirilmiş. Teknik içeriklerde komut ya da kod parçacığı paylaşmak için kullanılır.

Bir bloğu seçtikten sonra araç çubuğundaki altı noktalı tutamaçtan sürükleyerek yerini değiştirebilir ya da yukarı/aşağı ok simgeleriyle sıralamayı bir adım kaydırabilirsiniz. Yanlış bloğu eklediyseniz üç nokta menüsünden "Sil" ya da doğrudan geri al (Ctrl+Z) yeterlidir. Bir bloğun türünü de değiştirebilirsiniz; örneğin bir paragrafı seçip araç çubuğundaki blok simgesine tıklayarak onu Başlık ya da Liste bloğuna dönüştürebilirsiniz. Bu "blok dönüştürme" özelliği, klasik editörden yapıştırdığınız içeriği düzenlerken çok işinize yarar.

Sütun, Grup ve Kapak Bloklarıyla Düzen Kurma#

Gutenberg'i basit bir metin kutusundan ayıran asıl güç, düzen (layout) bloklarında yatar. Bu bloklar başka blokları içine alarak sayfanızda gerçek bir tasarım kurmanızı sağlar.

Sütunlar (Columns). Sayfanızı yan yana bölmelere ayırır. /sütun yazıp bloğu ekledikten sonra 50/50, 33/33/33 gibi hazır bir düzen seçersiniz; her sütunun içine ayrı bloklar (görsel, metin, buton) koyabilirsiniz. Bu, "solda görsel sağda açıklama" gibi klasik tanıtım bölümleri için birebirdir. Sütun genişliklerini yüzde olarak elle de ayarlayabilirsiniz.

Grup (Group). Birden çok bloğu tek bir kapsayıcı içinde toplar. Bir grubu seçip ortak bir arka plan rengi, iç boşluk veya kenar verdiğinizde, içindeki tüm bloklar birlikte hareket eder. Grup, aynı zamanda blokları hep birlikte taşımanın, kopyalamanın ve bir kalıba dönüştürmenin en pratik yoludur.

Kapak (Cover). Bir arka plan görseli ya da rengi üzerine metin ve buton yerleştirdiğiniz, dikkat çekici bir bölüm oluşturur. Sayfa başlarındaki "hero" alanları çoğunlukla Kapak bloğuyla yapılır. Arka plan görselinin üzerine bir kaplama (overlay) rengi ve saydamlık ayarlayarak metnin okunaklı kalmasını sağlarsınız.

Bu blokların iç içe geçtiği bir sayfada yapı hızla karmaşıklaşabilir. İşte burada editörün sol üstündeki Liste Görünümü (List View) simgesi devreye girer. Bu panel, sayfanızdaki tüm blokları hiyerarşik bir ağaç olarak gösterir; bir grubun içindeki sütunun içindeki görseli tek tıkla seçebilir, blokları sürükleyerek yeniden sıralayabilirsiniz. Karmaşık düzenlerde Liste Görünümü olmadan çalışmak neredeyse imkânsızdır; onu açık tutmayı alışkanlık hâline getirin.

Tekrar Kullanılabilir Bloklar ve Blok Kalıpları#

Aynı içeriği (bir yazar kutusu, bir kampanya duyurusu, standart bir CTA bölümü) her yazıda elle yeniden kurmak zaman kaybıdır. Gutenberg bunun için iki ayrı çözüm sunar ve aralarındaki farkı bilmek kritik önemdedir.

Senkron Kalıp / Tekrar Kullanılabilir Blok (Synced Pattern). Bir bloğu ya da blok grubunu seçip üç nokta menüsünden "Kalıp oluştur" (eski adıyla "Tekrar kullanılabilir blok") diyerek kaydedersiniz. Bunu bir yerde düzenlediğinizde, kullandığınız tüm sayfalarda otomatik güncellenir. Site genelinde tekrar eden ve tek noktadan yönetmek istediğiniz içerikler (iletişim bilgileri, yasal uyarı, standart kampanya kutusu) için idealdir.

Senkron Olmayan Kalıp / Pattern. Buna karşılık senkron olmayan kalıplar, hazır bir başlangıç şablonu gibi davranır. Kalıbı sayfaya eklediğinizde blokların bir kopyası gelir ve onu serbestçe düzenlersiniz; yaptığınız değişiklik başka yerleri etkilemez. WordPress, "Kalıp Dizini"nde yüzlerce hazır tasarım sunar; bir fiyatlandırma tablosu ya da ekip bölümü eklemek için sıfırdan başlamak yerine hazır bir kalıp seçip içeriğini değiştirmek çok daha hızlıdır.

İki türü şöyle ayırt edin:

Sık kullandığınız düzenleri temanıza gömmek isterseniz, geliştirici tarafında register_block_pattern() ile kendi kalıbınızı da tanımlayabilirsiniz:

<?php
add_action( 'init', function () {
    register_block_pattern(
        'cloutr/cta-kutusu',
        array(
            'title'      => 'Clou.TR CTA Kutusu',
            'categories' => array( 'call-to-action' ),
            'content'    => '<!-- wp:group --><div class="wp-block-group">'
                          . '<!-- wp:paragraph --><p>Hemen basvurun.</p><!-- /wp:paragraph -->'
                          . '</div><!-- /wp:group -->',
        )
    );
} );

Bu tür özelleştirmeleri her zaman bir child theme içinde yapın; ana temayı doğrudan düzenlerseniz güncellemede kaybolur. Konuyla ilgili ayrıntılar için WordPress tema seçimi rehberimize göz atabilirsiniz.

Klavye Kısayolları ve Verimlilik İpuçları#

Fareyle her işlemi menülerden aramak yavaştır. Birkaç kısayolu ezberlemek, editördeki hızınızı belirgin biçimde artırır. En çok işe yarayanlar şunlardır:

Mac kullanıyorsanız Ctrl yerine Cmd düşünün. Tüm kısayolların listesini Shift + Alt + H ile açılan yardım penceresinden görebilirsiniz. Bunların dışında verimliliğinizi artıracak birkaç pratik alışkanlık daha var:

• Yapıştırırken sadeleştirin. Word ya da başka bir siteden metin kopyalarken gizli biçimlendirme gelir. Bunu temizlemek için Ctrl + Shift + V (biçimsiz yapıştır) kullanın; Gutenberg genellikle içeriği otomatik olarak doğru bloklara dönüştürür.
• Çoklu blok seçin. Bir bloğa tıklayıp Shift ile başka bir bloğa tıklayarak aradaki tüm blokları seçebilir, hepsini birden taşıyabilir ya da tek hamlede gruplayabilirsiniz.
• Odak modunu kullanın. Üç nokta menüsündeki "Dikkat dağıtmayan mod" (Distraction Free), tüm panelleri gizleyip yalnızca yazıya odaklanmanızı sağlar; uzun metin yazarken çok rahatlatır.
• Sık taslak kaydedin ve önizleyin. WordPress otomatik kaydeder ama önemli düzenlemelerden sonra "Taslak olarak kaydet" ve "Önizle" ile sonucu farklı ekran boyutlarında kontrol edin.

Blok Kilitleme ve İçerik Kontrolü#

Bir siteyi başkaları için (müşteriniz, ekip arkadaşınız, içerik editörünüz) hazırlıyorsanız, özenle kurduğunuz düzenin yanlışlıkla bozulmasını istemezsiniz. Gutenberg bunun için blok kilitleme özelliği sunar. Bir bloğu seçip üç nokta menüsünden "Kilitle" dediğinizde iki seçenek çıkar: bloğun taşınmasını engellemek ve bloğun silinmesini engellemek. İkisini birden açarsanız, o blok yerinde sabitlenir; içeriği düzenlenebilir ama kaldırılamaz veya kaydırılamaz.

Bir grubu kilitlerseniz, içindeki tüm bloklara aynı kuralı uygulama seçeneği de sunulur. Bu, örneğin bir başlık + görsel + buton bölümünü tek parça hâlinde koruyup, içindeki metinlerin serbestçe düzenlenebilmesini sağlamanın kolay yoludur.

Daha ileri kontrol isteyen geliştiriciler, bir kullanıcı rolünün hangi bloklara erişebileceğini kod ile de sınırlayabilir. Aşağıdaki örnek, yalnızca belirli temel blokların kullanımına izin verir:

<?php
add_filter( 'allowed_block_types_all', function ( $allowed, $context ) {
    return array(
        'core/paragraph',
        'core/heading',
        'core/image',
        'core/list',
        'core/quote',
    );
}, 10, 2 );

Bu tür kısıtlamalar özellikle ajanslarda işe yarar: müşteriye teslim edilen sitede, tasarımı bozacak karmaşık blokları gizleyip yalnızca güvenli düzenleme alanları bırakabilirsiniz. Kilitleme, kod bilmeyenler için de tek tıkla erişilebilir olduğundan, çok yazarlı bloglarda düzeni korumanın pratik bir yoludur.

Yeni Başlayanlar İçin Verimli Çalışma İpuçları#

Editörü ilk kez kullanıyorsanız, en büyük hatanız her şeyi tek seferde öğrenmeye çalışmak olur. Bunun yerine önce paragraf, başlık, görsel ve liste bloklarıyla rahatça yazı üretmeyi öğrenin; düzen bloklarına (sütun, grup, kapak) siz hazır hissettikçe geçin. Birkaç pratik öneri işinizi kolaylaştırır:

Yeni bir blok denemekten çekinmeyin; yanlış giderse Ctrl + Z her şeyi geri alır ve blok editörü, klasik editörden çok daha bağışlayıcıdır. İçeriğinizi mantıklı başlık hiyerarşisiyle kurmaya baştan alışın, çünkü bu hem okuyucuya hem arama motorlarına net bir yapı sunar; SEO tarafını güçlendirmek isterseniz sitenizin genel arama performansını iyileştiren SEO hizmetlerini de değerlendirebilirsiniz. Görselleri eklemeden önce boyutlarını optimize etmeyi unutmayın; devasa görseller sayfanızı yavaşlatır. Son olarak, sık kullandığınız bölümleri kalıp hâline getirerek kendinize bir "yapı taşı kütüphanesi" oluşturun; birkaç hafta içinde çoğu sayfayı hazır kalıpları birleştirerek dakikalar içinde kurduğunuzu göreceksiniz.

Editörle ne kadar çok pratik yaparsanız, o kadar hızlanırsınız. WordPress'i sıfırdan kuruyorsanız ve editöre yeni geçtiyseniz, önce temel kurulum adımlarını tamamlamak için WordPress kurulumu rehberimizi izleyebilir; hazır uygulama ve kalıp örneklerini keşfetmek için App Center sayfamıza göz atabilirsiniz.

Sıkça Sorulan Sorular#

Gutenberg'i kapatıp eski klasik editöre dönebilir miyim?#

Evet, dönebilirsiniz. WordPress'in resmî "Classic Editor" eklentisini kurup etkinleştirdiğinizde, eski tek kutulu düzenleyici geri gelir ve yeni yazılarınızı onunla hazırlarsınız. Ancak bu eklentinin uzun vadeli bir çözüm olmadığını unutmayın; WordPress'in tüm yeni özellikleri blok editörü üzerine geliştiriliyor, dolayısıyla bir noktada Gutenberg'e alışmak en sağlıklısıdır. Geçiş döneminde ikisini bir arada kullanmak, yavaş yavaş adapte olmanın makul bir yoludur.

Tekrar kullanılabilir blok ile blok kalıbı (pattern) arasındaki fark nedir?#

Aradaki fark, yapılan değişikliğin nasıl yayıldığıyla ilgilidir. Senkron kalıp (tekrar kullanılabilir blok) tek bir merkezî kaynaktan beslenir; onu bir yerde düzenlediğinizde kullanıldığı her sayfada otomatik güncellenir. Senkron olmayan kalıp ise yalnızca bir başlangıç şablonudur; sayfaya eklediğinizde blokların bir kopyası gelir ve yaptığınız düzenleme başka hiçbir yeri etkilemez. Site genelinde sabit kalması gereken içerikler için senkronu, hızlı bir taslak için senkron olmayanı tercih edin.

Klasik editörle yazdığım eski yazılar bozulur mu?#

Hayır, bozulmaz. Blok editörüne geçtiğinizde eski içerikleriniz tek bir "Klasik" blok içinde olduğu gibi korunur ve düzgün görünmeye devam eder. Bu klasik bloğu dilerseniz açıp, içindeki içeriği tek tıkla ayrı Gutenberg bloklarına dönüştürebilirsiniz. Yani geçmiş yazılarınızı elden geçirmek zorunda kalmazsınız; onları ancak isterseniz ve zamanınız olduğunda modern bloklara çevirirsiniz.

Blok editöründe sütunlu, iki kolonlu bir düzen nasıl yaparım?#

Bunu yerleşik Sütunlar bloğuyla yaparsınız. Boş bir satıra gelip /sütun yazarak bloğu ekleyin, ardından 50/50 gibi hazır bir düzen seçin; artık yan yana iki bölmeniz olur. Her bölmenin içine ayrı bloklar (soluna bir görsel, sağına bir paragraf ve buton gibi) koyabilir, sütun genişliklerini sağ panelden yüzde olarak ayarlayabilirsiniz. Eskiden bir eklenti ya da kısa kod gerektiren bu iş, artık tamamen editörün içindedir.

Karmaşık bir sayfada blokları düzenlemek zorlaşıyor, ne yapmalıyım?#

Bu durumda editörün sol üstündeki Liste Görünümü (List View) simgesini açın. Bu panel, sayfanızdaki bütün blokları iç içe geçmiş bir ağaç yapısı olarak gösterir; bir grubun içindeki sütunun içindeki görseli tek tıkla seçebilir, blokları sürükleyip yeniden sıralayabilir ve yanlışlıkla seçtiğiniz kapsayıcıları kolayca ayırt edebilirsiniz. Çok bloklu sayfalarda Liste Görünümü, kaybolmadan çalışmanın en etkili yoludur.

Blok editörü sitemi yavaşlatır mı?#

Editörün kendisi yönetim panelinde çalışır ve ziyaretçinin gördüğü sayfa hızını doğrudan belirlemez; asıl belirleyici, blokların ürettiği çıktı ve sitenizin bulunduğu altyapıdır. Çok sayıda ağır blok, optimize edilmemiş büyük görseller veya yetersiz bir barındırma paketi sayfaları yavaşlatabilir. Görsellerinizi optimize eder, gereksiz eklentilerden kaçınır ve hızlı bir hosting kullanırsanız, blok editörüyle kurduğunuz sayfalar son derece hızlı açılır.

Kapanış#

Gutenberg, ilk bakışta klasik editöre göre karmaşık görünse de "her şey bir bloktur" mantığını kavradığınızda, kod bilmeden profesyonel sayfalar kurmanızı sağlayan güçlü bir araca dönüşür. Temel blokları öğrenmek, sütun-grup-kapak ile düzen kurmak, kalıplarla tekrar eden işleri otomatikleştirmek, kısayollarla hızlanmak ve gerektiğinde blokları kilitleyerek düzeni korumak; hepsi birkaç günlük pratikle oturan becerilerdir. Acele etmeden, önce basit yazılarla başlayıp adım adım ilerlerseniz, editör kısa sürede en verimli çalışma alanınız olur.

Editörle kurduğunuz sayfaların gerçek hızını ise altındaki barındırma belirler. NVMe diskli, WordPress'e göre ayarlanmış bir WordPress hosting paketiyle sağlam bir temel atabilir, ihtiyacınıza uygun farklı hosting seçeneklerini karşılaştırabilirsiniz. Kurulum, güncelleme ve içerik bakımını uzmanlara devretmek isterseniz, bu yükü sizin yerinize üstlenen bir WordPress bakım hizmeti de her zaman elinizin altında.