En son Gutenberg WordPress Editor’un derinliklerine dalmak (2021)

WordPress blok editörü veya Gutenberg Aralık 2018’de piyasaya sürüldüğünde, ne beklendiğini bilmiyorduk. Tabii ki, beta sürümüyle oynamak için çok zamanımız var, ancak gerçek lansmanın ne kadar pürüzsüz veya kullanıcı ve geliştiricinin yeni düzenleyiciyi ne kadar heyecanlandıracağını tahmin edemeyiz.
Ücretsiz demoyu deneyin
Gutenberg editörünün bu yazıyı ilk yayınladığımızdan bu yana iki yıldan fazla bir süredir olağanüstü bir büyüme yaşadığını gördük. Bu, minimum bir ürünün (MVP) lansmanından, WordPress için entegre bir site düzenleme deneyimi yaratmak amacına yaklaşan daha olgun bir projeye taşındı.
Bu değişikliği dikkate almak için, yakında ayrılacağı da dahil olmak üzere sizi yeni yüzünden getirmek için Gutenberg editörünü yeniden ziyaret ettik.
Gutenberg blok editörü nedir? “WordPress Block Editor” veya sadece “WordPress Editor” olarak da bilinen Gutenberg, 6 Aralık 2018’de yayınlanan WordPress 5.0’da tanıtılan WordPress İçerik Düzenleyicisidir. Bu terimi hiç duymadıysanız, bu, varsayılan editördür. Tüm WordPress siteleri. Özellikle devre dışı bırakmadıkça. Bu şuna benziyor:

WordPress Gutenberg editörü.
WordPress Gutenberg editörü ve önceki WordPress editörü (şimdi “Klasik Editör” veya “Tinymce Editor” olarak adlandırılır) arasındaki büyük fark, içerik oluşturmak için yeni bir blok tabanlı yaklaşımdır.
Gutenberg ile içeriğinizdeki her öğe, içerik manipülasyonuna kolayca izin veren bir bloktur. Her paragraf bir blok, her görüntü bir blok, her düğme bir blok – anlıyorsunuz! Üçüncü -Party geliştiricileri, WordPress işlerini kısa kodlarla bitirmeye yardımcı olan özel bir blok yapabilir. İletişim formunu sabitlemek istediğinizi varsayalım. Geçmişte yaptığınız gibi kısa bir kod eklemeniz yerine (örneğin ‘[form-shortcode] `) artık form eklentinizi girebilirsiniz. Buna ek olarak, çok sütunlu bir tasarım hazırlamak veya uyumlu bir parça oluşturmak için blokları gruplandırma gibi daha karmaşık bir düzen oluşturmak için bir blok da kullanabilirsiniz. Blok düzenleyiciyi nasıl kullanacağınızı göstermek için daha derin kazdığımızda, alacaksınız. İçerik oluşturma şeklinizi geliştirmek için blokları nasıl kullanabileceğiniz konusunda daha iyi bir fikir. Gutenberg Aralık 2018’de piyasaya sürüldü ve o zamandan beri birçoğu değişti! Daha fazla bilgi edinmek için bu güncellenmiş kılavuza bakın yan Gutenberg Tweet için tıklayın, sadece içerik düzenleyicisi değil, anlaşılması gereken önemli bir şey, Gutenberg projesinin sadece içerik düzenleyicisinden daha fazlasını hedeflemesidir. Temmuz 2021’de Gutenberg hala bir içerik editörüdür (çoğunlukla). Ancak Gutenberg’in uzun vadeli hedefi, onu tam site düzenleme adı verilen bir şeye taşımaktır.
Tam site düzenleme ile ilgili fikir, Gutenberg editörü kullanarak web sitenizin% 100’ünü tasarlayabilmenizdir. Örneğin, WordPress temanızda bulunan gölgelik seçenekleriyle sınırlı olmak yerine, bir blok düzenleyici kullanarak özel bir başlık tasarlamak için Gutenberg’i kullanabilirsiniz. İşlev türü henüz mevcut değil, ancak yolda ve bu yazının sonuna yakın bir göz atacağımız projelerin bazı “kavramına dair kanıtlar” var. Artıları ve Eksileri Gutenberg vs Alternatif olarak popüler Şimdi WordPress Block Editor’u iki yıldan fazla kullandıktan sonra, Gutenberg ve diğer çözümlerin bazı artıları ve eksileri hakkında iyi bir fikrimiz var. WordPress’te içerik oluşturmanız gereken iki ana alternatif var. :
WordPress Tinymce Editor: Bu, WordPress 5.0’dan önce WordPress tarafından kullanılan klasik bir editördür.
Eklenti Yapma Sayfası: Bu, WordPress’e sürük ve bırak, görsel bir tasarım ekleyen üçüncü taraf bir eklentidir.
Genel olarak, klasik Tinymce editörleri daha basit kelime işlemesi gibi deneyimler sunarken, sayfa yapıcılar görsel tasarım deneyimleri, çok daha esnek olan sürükleme ve damlalar sunar. Üç editörü tasarım esnekliğine göre sipariş edersek, şu şekilde olacaktır:
Klasik Tinymce Editör (en azından esnek) <Gutenberg <Sayfa Maker (en esnek) Şimdi, Gutenberg vs alternatif blok düzenleyicinin bazı artıları ve eksileri hakkında konuşalım. Gutenberg ve Klasik Editör: Artıları ve Eksileri Gutenberg ile Tinymce Classic Editor'u karşılaştıralım. Avantajları:
Gutenberg daha görsel bir tasarım arka planı sunuyor
İçeriği gömmek için kısa bir kod kullanmanıza gerek yok – hareketli blok sistemini elde edersiniz:
Bazı insanlar Gutenberg'de yazmanın oldukça ağır olduğunu düşünüyor çünkü her paragraf ayrı bir blok. Uzun yayınlar için metni değiştirmek zor olabilir. Başka bir editöre yazmayı ve bitirdikten sonra metni Gutenberg'e koymayı tercih edebilirsiniz.
Gutenberg'in performansı önemli ölçüde artmış olsa da, klasik editörlerle ortaya çıkma eğilimi gösteren büyük yayınlarda geride kalabilir.
Klasik Tinymce editörünün ihtiyaçlarınız için daha uygun olduğunu düşünüyorsanız, Gutenberg editörünü devre dışı bırakabilirsiniz.
Gutenberg vs Sayfa Maker: Artıları ve Eksileri Şimdi, Gutenberg'in üçüncü taraf sayfa yapımcılarının eklentisine karşı nasıl olduğunu görelim. Avantajları:
Gutenberg temel bir özelliktir, yani uyumluluk konusunda endişelenmenize gerek yoktur.
Bu temel bir özellik olduğundan, tüm geliştiriciler eklentilerine Gutenberg desteği oluşturabilir, uyumluluğu artırabilir.
Gutenberg daha temiz ve daha hafif bir kod üretir. Her şey aynıdır, Gutenberg ile yapılan tasarım genellikle sayfa yapımcılarıyla yapılan aynı tasarımdan daha hızlı yüklenecektir.
Eksileri:
Gutenberg, sayfa yapıcısı gibi uygun görsel düzenleme sunmaz. Bu klasik bir editörden daha erişilebilir, ancak yine de bir sayfa üreticisi gibi% 100 pürüzsüz değil.
Sayfa üreticisi hala size daha esnek bir tasarım seçeneği ve düzen sunuyor.
Çoğu sayfa üreticisi, çok daha yumuşak ve esnek olan sürükleme ve bırak hareketleri sunar.
Çoğu kullanıcı için karşılaştırma ile ilgili zihin Gutenberg, esneklik açısından tatlı bir noktaya ulaşır. Çoğu insan, özellikle blog yayınları için, içerikleri için sayfa yapımcılarının esnekliğine ihtiyaç duymaz. Ancak aynı zamanda, çok sütunlu bir tasarım hazırlamak veya klasik bir editör tarafından kolayca yapılmayan bir düğme eklemek iyidir. Bu yüzden bunu hatırlayarak Gutenberg'i nasıl kullanmaya başlayabileceğinizi girelim. Gutenberg WordPress Blok Editor'u nasıl kullanılır Gutenberg Block Editor hakkında biraz bilgi verdikten sonra, içerik oluşturmaya başlamak için nasıl kullanabileceğinizi keşfedelim. Arayüze giriş ile başlayacağız ve editörü kullanmak ve iş akışınızı geliştirmek için yavaş yavaş daha karmaşık bir yol geliştireceğiz. Gutenberg Blok Düzenleyici Arayüzü Editörü açtığınızda, WordPress Gösterge Paneli tarafını gizleyecek ve size tam ekran deneyimi sunacaktır:
WordPress Gutenberg Blok Editör Arayüzü.
Editörün üç ana kısmı vardır:
İçerik: İçeriğiniz ekranların çoğunu kaplar. Sitenizin önünde hangi görsel önizlemenin nasıl göründüğünü göreceksiniz. Bu% 100 doğru değil, ancak son tasarım hakkında oldukça iyi bir fikriniz olmalı.
Üst üstler: Üstteki araç çubuğu yeni bir blok girmenize, iptal etmenize/tekrarlamanıza ve diğer önemli ayarlara erişmenize yardımcı olur

Kenar çubuğu: Kenar çubuğu iki sekme içerir. Gönderme sekmesi, kategoriler, etiketler, üstün resimler vb. Gibi son seviye ayarlarını yapılandırmanıza olanak tanır. Blok sekmesi, seçtiğiniz blok ayarlarını gösterir – daha sonra bu konuda daha fazla bilgi.
Daha derin bir yazma deneyimi oluşturmak için, sağ üst köşedeki “dişli” simgesini tıklayarak yan bıçakları gizleyebilirsiniz. Yan çubuğu geri yüklemek için tek yapmanız gereken “dişli” simgesini tekrar tıklamaktır: “Dişli” simgesini tıklamak yan bıçakları görüntüleyecek/gizleyecektir.
Bilgi
Editörünüz biraz farklı görünebilir, çünkü tema geliştiricisinin daha görsel bir deneyim oluşturmak için stillerini düzenleyiciye ekleme seçeneği vardır. Temanıza bağlı olarak, farklı yazı tipleri veya renkler görebilirsiniz.
Örneğin, yeni yirmi yirmi bir varsayılan temayı kullanırsanız bu düzenleyici arayüzünün görünümüdür:
Stillerini blok düzenleyiciye uygulayan yirmi yirmi bir temaya örnekler.

Gönderinize normal bir paragraf metni eklemek için bir blok ekleyin, tıklayın ve yazmanız yeterlidir. Enter’a her bastığınızda, düzenleyici otomatik olarak yeni bir paragraf bloğu oluşturur. Diğer içerik türleri için yeni bir blok girmelisiniz. Görüntüler, düğmeler, video gömme vb. İçin bir blok kullanacaksınız. Yeni bir blok eklemek için, arayüzdeki “artı” simgelerinden birini tıklayabilirsiniz. Bu, sol üst köşeye yerleştirmenin ana bloğudur, ancak arayüzde daha küçük ekleme arayüzünü açan diğer simgeleri de göreceksiniz:
“Plus” simgesi yeni bir blok girmenizi sağlar.
Başlamak için, fare imlecinizi yeni bir blok eklemek istediğiniz yere konumlandırın. Örneğin, düğmenin altına yeni bir blok eklemek için düğmenin altına tıklayabilir, ardından + simgesini tıklayabilirsiniz. Mevcut tüm blokları gösteren, farklı kategorilere ayrılmış bir yan panel göreceksiniz. Belirli blokları arayabilir veya listeden seçeneği seçebilirsiniz. İmleci bloğa yönlendirdiğinizde, işlevinin ve önizlemesinin açıklamasını göreceksiniz. Bloğa girmek için sadece tıklamanız gerekir. Örneğin, sıradan görüntüler eklemek için, blok resmini tıklatmanız yeterlidir: Eklemek istediğiniz blok türünü tıklayın.
Ardından, medya kitaplığınızdan resim yüklemek veya seçmek için talimatları izleyebilirsiniz. Biçimlendirme seçeneği, bloğunuz için temel bir biçimlendirme seçimi yapmak için önemlidir, herhangi bir bloğu tıkladığınızda görünen yüzer bir araç elde edersiniz. Sıradan metin biçimlendirirseniz, burası yapabileceğiniz yerdir:

Cesur veya eğik harfler ekleyin
Bağlantıyı ekle

Tesviye Değiştirme
Kod, karalama ve abonelikler gibi biçimlendirme ekleyin

Yüzen bir araç çubuğu, temel bir Formatan seçeneği oluşturmanızı sağlar.
Örneğin, içeriğinize bir bağlantı eklemek istersiniz. Her şeyden önce, örneğimizle bağlantılı olmak istediğiniz belirli bir metni seçeceksiniz, yani “diğer içerik türleri için”. Ardından, bağlantı ekleme seçeneğini açmak için araç çubuğundaki bağlantı simgesine tıklayabilirsiniz:
WordPress Gutenberg Blok Düzenleyicisine bağlantıyı girin.
Diğer blok ayarlarını yapılandırma Girdiğiniz tüm bloklar, yan çubukta ek ayarlarla donatılmıştır. Bazı bloklar size bazı ayarlar verebilirken, diğerleri size tasarımı, düzenini, işlevselliği vb. Kontrol etmek için bazı seçenekler sunabilir. Blok ayarlarını açmak için, seçmek için editördeki bloğu tıklayın. Ardından, ayarları görmek için yan taraftaki blok sekmesini açın. Aşağıda, daha esnek bloklardan biri olan düğme bloğu ayarlarını görebilirsiniz. Rengi değiştirebilir, daha geniş ve daha fazlasını yapabilirsiniz. Blok ayarlarında değişiklik yaptığınızda, düzenleyiciye yansıyan değişiklikleri hemen göreceksiniz. Yandaki blok ayarlarına erişebilirsiniz.
Bir kez daha, her bloğun blok için benzersiz bir ayarı olacaktır. Örneğin, sıradan paragraf metni için ayarları açarsanız, yalnızca bazı temel tipografi ve renk seçenekleri alırsınız. Aşağıda, bazı metinleri vurgulamak için bir renk arka planı uygulayabileceğimizi görebilirsiniz:
Sıradan paragraf metni için ayarları bloke edin.

Yeniden düzenleyen bloklar (diğer editörler gibi metinler için yapabileceğiniz) sadece salin ve macun kullanmanın yanı sıra, Gutenberg size bloğu sıfırlamak için iki ana yol sunar. İlk olarak, bloğu birkaç konum yukarı veya aşağı hareket ettirmek istiyorsanız, yüzen araç çubuğunda üst veya alt oku kullanabilirsiniz. Kapsamlı hareketler için sürükle ve bırak kullanabilirsiniz. Bloğu çekmek ve serbest bırakmak için okun solundaki “Altı Nokta” simgesine tıklamanız gerekir. Fareyi simgede tıklayıp basılı tuttuktan sonra, bloğu sayfanın herhangi bir yerine sürükleyebilirsiniz:
Bloğu bir ok veya sürükle-drop.par kullanarak sıfırlayabilirsiniz.

Kopyala ve yapıştırma tip olmayan içerik için karmaşık olabilir. Bu yazıda birkaç dakika sonra, stili korurken tüm bloğu nasıl kopyalayabileceğinizi ve ekleyebileceğinizi göstereceğiz.
Diğer kaynaklardan sabitlenmiş içerik Gutenberg, YouTube, Vimeo, SoundCloud, vb. Tüm bu seçenekleri Seman’da ek blokta bulabilirsiniz. Örneğin, YouTube videolarını sabitlemek için tek yapmanız gereken:

Özel bir YouTube bloğu ekleyin.
URL’yi doğrudan videoya yapıştırın.

PIN’i tıklayın.
Gutenberg’e sabitlenmiş YouTube videoları.

Daha sonra editöre gömülü video önizlemesini göreceksiniz. Çok sütunlu bir düzeni oluşturmak veya daha önce de belirttiğimiz gibi gruplandırılmış olan blok düzenleyicinin daha uzun Tinymce düzenleyicisine kıyasla önemli avantajlarından biri, özel kodlara veya kısa kodlara bağımlı olmak zorunda kalmadan daha karmaşık bir düzen oluşturabilmenizdir. Block Editor, bunu yapmanıza yardımcı olacak iki varsayılan blokla donatılmıştır:
Sütun: Çok sütunlu bir düzen yapın.
Grup: Grup birkaç blok. Örneğin, birçok blok arkasında görüntülenen tüm parçalar için arka plan rengini ayarlamak için bunu kullanabilirsiniz.
Bu blokların her ikisi de “yuva” bloğu prensibine göre çalışır, yani başka bir blokta bir veya daha fazla blok koyacağınız anlamına gelir.Sütun bloğunu kullanma örneğini göstereceğiz, ancak aynı temel prensip grup bloğu için geçerlidir.Soldaki sütunun birkaç sıradan paragraf metnine sahip olduğu ve sağdaki sütunun bir düğmesi bulunduğu iki sütun düzeni yapmak istediğinizi varsayalım.Başlamak için, sütun blokları eklemek için bir blok ekleme kullanacaksınız.Seçtiğiniz düzeni seçebileceğiniz bir istemi görüntüleyecektir: yapı ve sütun oranını seçin.
Bu örnek için 50/50 iki sütun düzeni seçeceğiz.Bununla birlikte, içinde simgeler + ile aynı boyutta iki kutu göreceksiniz.İçerik eklemek için, blok ekleme arabirimini açmak için + simgesine tıklayabilirsiniz:
Sütuna içerik nasıl eklenir.
İlk bloğu sütuna ekledikten sonra, ek bir blok girmek için + simgesine basabilirsiniz. Veya bloğu sütun yapısının dışından sütuna çekip çıkarabilirsiniz. 10 Yararlı İpuçları Gutenberg, Gutenberg’in nasıl çalıştığına dair temel bir anlayışa sahip olduktan sonra daha verimli çalışmak için, bir blok düzenleyiciyi daha etkili bir şekilde kullanmanıza yardımcı olacak bazı değerli ipuçlarını ve püf noktalarını tartışalım. 1. Çok fazla blok girmeniz gerekiyorsa, bir bloğu hızlı bir şekilde eklemek için / (kesme devam et) kullanın, blokların eklenmesini manuel olarak açmak biraz sıkıcı olabilir. Neyse ki, kullanmanız gereken genel blokların adlarını öğrenmeye başladıktan sonra, yalnızca klavyenizi / (eğik çizgiler) kullanarak bir blok eklemenin daha hızlı bir yolu vardır. Yeni bir paragraf bloğu başlatmak için “Enter” tuşuna basarsanız, eğimli çizgiyi yazarak bir blok hızlı bir şekilde ekleyebilirsiniz, ardından eklemek istediğiniz bloğun adını takip edebilirsiniz. Yazmaya başladığınızda, sorgunuzla eşleşen tüm blokların bir listesini göreceksiniz. Daha sonra blokta gezinmek için klavye okunu kullanabilir ve girmek istediğiniz bloğu seçmek için “Enter” tuşuna basın. Aşağıdakiler, görüntü blokları eklemek için Quick-INSERT kullanmanın bir örneğidir: Bir bloğu hızlı bir şekilde eklemek için bir eğik çizgi nasıl kullanılır.

2. Görüntüyü masaüstünüzden sürükleyerek ekleyin, çok fazla resim eklerseniz, blok düzenleyici, görüntüleri yüklemeden önce görüntü blokları ekleme ihtiyacını ortadan kaldırmanızı sağlayan başka bir Time Tasarlama özelliği içerir. Bunun yerine, görüntü dosyasını doğrudan masaüstünden yayına eklemek istediğiniz konuma sürüklemeniz yeterlidir. Görüntü dosyasını sitenizin içeriğine sürüklediğinizde, görüntünün göründüğü yeri işaretleyen mavi çizgiyi göreceksiniz. Dosyayı yayınladıktan sonra, WordPress otomatik olarak yükler ve resim bloğunu doğru konuma girer: Dosyaları masaüstünüzden sürükleyerek görüntüler ekleyebilirsiniz.
3. Bazı fiyat düşüşlerini kullanın İçerik oluşturmak için Markdown Sözdizimi hayranıysanız, blok düzenleyicinin bazı sınırlı işaretleme kullanımlarını desteklediğini bilmekten mutluluk duyacaksınız – özellikle başlık ile ilgili olanlar. Örneğin, H3 etiketiyle bir baş bloğu eklemek istiyorsanız, üç hashtag (`###`) ve ardından basın. Editör otomatik olarak H3’e dönüştürecek ve ardından başlığı yazmaya devam edebilirsiniz:
Bültenlere Kaydolun
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun

Block Editor, başlık için temel işaretleme sözdizimini destekler.
Diyelim ki daha gelişmiş bir fiyat azaltma için destek istiyorsunuz. Bu durumda, EditorsKit gibi ücretsiz eklentiler yükleyebilirsiniz, bu da cesur, eğik ve çapraz olarak fiyat azaltma kullanmanıza olanak tanır – Gutenberg eklentisi hakkında daha fazla konuşacağız. Biçimlendirme aracını editörün üstüne sabitleyin Eğer bloğun üzerinde “yüzen” bir biçimlendirme aracı oluşturmayı sevmiyorsanız, blok düzenleyici üst aletin altına sabitlemenizi sağlayan bir özellik içerir:

Biçimlendirme aracını yukarı sabitleyebilirsiniz.
5. Bloğu kopyalayın ve Blok Düzenleyicinin tüm ayarları, metni herhangi bir editörde yaptığınız gibi kopyalayıp eklemenize olanak tanır – “CTRL + C” veya sağ -tıklatma ve kopyalama seçmenizi sağlar. Ancak, ayarları korurken tüm bloğu kopyalamak ve eklemek için bu yöntemi kullanamazsınız. Bunun yerine:

Bir blok seçin.
Blok aygıt bıçağındaki üç nokta simgesini tıklayın.

Kopyala seçin.
Tüm düzenlemeleriyle blokların nasıl kopyalanması.
Bloğu bu şekilde kopyaladıktan sonra, her zamanki gibi koyabilirsiniz – yani “CTRL + V” veya sağa tıklama ve yapışmayı seçebilirsiniz. 6. Sağ bloğu hızlı bir şekilde seçin Çoğu blok için blok listesinin görüntüsünü kullanarak, bloğu seçmek için düzenleyiciyi tıklayabilirsiniz. Ancak, grup sütununa veya bloğa bir blok ekleme gibi “yuvalama” bloğunu kullanmaya başlarsanız bu karmaşık olabilir. Editör, bunu hesaplamak için üst araç çubuğundan açabileceğiniz liste ekran seçeneğini içerir. Liste ekranı, iç içe blok dahil olmak üzere her bloğu gösterecektir. Listede tıklayarak bir blok seçebilirsiniz ve editör, imleci listeye yönlendirdiğinizde bloğu da vurgulayacaktır. Aşağıdaki örnekte görebilirsiniz: Ana ana sütun bloğu
Her sütun için yuva blokları
Bir sütunda yuvalanmış grup blokları

Grup bloğuna yuvalanmış baş bloğu
Ana üst bloğu seçmek için liste ekranını açabilir ve listeden seçebilirsiniz:

Bir yuvalama bloğunda gezinmenize yardımcı olmak için listelerin listesini açın.

7. Kod Düzenleyicisini açın (tek tek bloklar veya tamamlar için) Gutenberg blok düzenleyicisinin avantajlarından biri, kodu kullanmadan birçok stil ve düzen seçeneğini yapılandırmanıza izin vermesidir. Ancak, daha yetkin kullanıcılar için koda doğrudan erişmek istediğiniz bazı durumlarınız olabilir. Bunu yapmanıza yardımcı olmak için, Gutenberg editörü birkaç farklı seçenekle birlikte gelir. İlk olarak, kodu yalnızca bir bloktan düzenleyebilirsiniz, CSS sınıfına girme gibi küçük değişiklikler için kullanışlıdır. Bunu yapmak için, Block Araç Bıçaklarından Block Tuging Menüsünü açın ve HTML AS Düzenle: Bir bloğu HTML olarak nasıl düzenlenir.
Bu seçeneği seçmek, görsel önizlemeyi diğer blokların görsel önizlemesini etkilemeden yalnızca blok için bir kod düzenleyicisine dönüştürecektir:
Bir blok için HTML editörü.
İkincisi, editör, eksiksiz bir HTML görüntüleri gömmek için kullanabileceğiniz özel bir HTML bloğu içerir. Tek yaptığınız bir blok eklemek ve kodunuzu eklemek. Son olarak, sağ üst köşede veya klavye kısayolunda bir açılır menü kullanarak tüm belgeler için eksiksiz bir kod düzenleyicisi de açabilirsiniz: Ctrl + Shift + Alt + M. Tam bir kod düzenleyicisini açtığınızda, Gutenberg’den bloğu biçimlendiren bir blok da göreceğinizi unutmayın, böylece navigasyon biraz karmaşık olabilir:
Bir blok işaretlemesi içeren kod düzenleyicisini tamamlayın.

8. Blok Klavye Düzenleyicisi Kısayolunu öğrenin, genel eylemlerde bulunmanıza izin veren birçok klavye kısayolu içerir. Öğrenmek için zaman ayırmanızı öneririz, çünkü sizi daha üretken hale getirecek ve sizi tekrarlanan birçok fare tıklamasından kurtaracaklar. İşte en yaygın kısayollardan bazıları – Mac kullanıyorsanız, “Ctrl” i “komut (⌘)” ile değiştirmek istiyorsunuz: Blok ekran listesini aç – gömlek + alt + o
Değişikliklerinizi kaydedin – Ctrl + S
Son Değişikliklerinizi Geri Alın – Ctrl + Z
Son iptalinizi tekrarlayın – Ctrl + Shift + Z
Seçilen bloğu iki katına çıkar – Ctrl + Shift + D
Seçilen bloğu sil – Shift + Alt + Z
Seçilen bloktan önce yeni bloğu girin – Ctrl + Alt + T

Seçilen bloktan sonra yeni bloğu girin – Ctrl + Alt + Y
Ayrıca, editördeyken tüm klavye kısayollarının eksiksiz bir hile sayfasını da açabilirsiniz. Bunu yapmak için, bir klavye kısayolu – vites + alt + h – kullanabilir veya düzenleyicinin sağ üst köşesinde “Üç Dikey Noktalar” simge menüsü (⋮) tıklayıp açılır listeden bir klavye kısayolu seçebilirsiniz. 9. Varsayılan olarak çok sayıda blok ekleyerek blok editör bloğunu gizleyerek arayüzünüzü temizleyin, ancak her şeyi kullanamayabilirsiniz. Arayüzü temizlemenize yardımcı olmak için, editör, kullanmadığınız bir bloğu devre dışı bırakmanıza ve gizlemenize olanak tanıyan Block Manager adlı bir özellik içerir:

Ekleme bloğundan gizlemek için blok bloğunu silebilirsiniz.
10. Son doğrudan bağlantıya çapa ekleyin, son yararlı ipucumuz, içeriğinizin belirli bir kısmına atlama bağlantısı yapmanızı sağlayan özel HTML Ankraj Bağlantı düzenleyicisinin özelliğidir (örneğin İçindekiler için). Klasik editörde, kodu manuel olarak kullanarak HTML ankrajları eklemeniz gerekir. Ancak Gutenberg ile, herhangi bir blok ayarının devam eden alanında HTML çapasındaki atlama bağlantınız için metni girebilirsiniz: size rekabet avantajı sağlayan bir barındırma çözümüne mi ihtiyacınız var? Kinsta, olağanüstü hız, sofistike güvenlik ve otomatik ölçekte size yardımcı olur. Planımıza bakın

Özel bir çapa metni nasıl ayarlanır.
Bu noktada daha fazla blok editörü kavramını inceleyerek, editörün nasıl çalıştığı ve daha verimli çalışmak için bazı ipuçları hakkında biraz tartıştık. Artık bu temel bilgiye sahip olduğunuza göre, biraz daha gelişmiş iki taktik tartışalım:

Blok deseni
Blokları yeniden kullanın
Blok Desenler Blok desenleri temel olarak bir şablondur. Bu, düzenler halinde düzenlenmiş bir blok koleksiyonudur. Düğmeyi ayarlamak gibi küçük bir şey olabilir. Tüm parçalar, hatta tüm sayfa için bir şablon bile olabilir. WordPress kendi varsayılan blok deseniyle birlikte gelir ve üçüncü taraf eklenti geliştiricileri de kendilerini ekleyebilir. Ana blok eklemesine desen sekmesinin yeni bir desenini ekleyebilirsiniz:
Bir blok deseni nasıl eklenir.
Blok desenine girdikten sonra, tıpkı manuel olarak bir blok eklediğiniz gibi, bu deseni oluşturan tüm blokları tam olarak düzenleyebilirsiniz.Şu anda, Gutenberg çekirdek editörü bir blok deseni yapmanıza izin vermez (nasıl kod yapacağınızı bilmiyorsanız).Ancak, ücretsiz bir Justin Tadlock blok desen oluşturma desen eklentisi ile düzeltebilirsiniz.Etkinleştirilmiş eklenti ile tasarımınızı Gutenberg kullanarak yapabilir ve ardından tasarımı bir desen olarak saklayabilirsiniz.Başlamak için, Blok Desenini Aç> Yeni bir desen oluşturmak için Yeni Ekle.İşiniz bittikten sonra yayınladığınızdan emin olun: özel blok deseninizi yapın.
Bunu yapmayı bitirdikten sonra, blok deseninizi diğerleri gibi girebileceksiniz – kategorize edilmemiş bölümde arama:
Oluşturduğunuz özel blok desenini girin.
WordPress Core ekibi ayrıca WordPress.org adresinde resmi bir blok desen kütüphanesi başlattı. Kopyala ve yapıştırarak editöre koyabilirsiniz. Block Desen Kütüphanesi web sitesindeki Kopyala düğmesini tıklamanız ve ardından editöre yapıştırmanız yeterlidir. Yeniden kullanılabilen bloklar yeniden kullanılabilen bloklar, grup olarak ekleyebileceğiniz bir veya daha fazla blok koleksiyonudur. Blok desenine benzerler, ancak bir ana farkla: Blok deseni her durumda düzenleyeceğiniz başlangıç şablonu olsa da, yeniden kullanılabilecek bloklar, girdiğiniz her örnekte aynı olacaktır. Yeniden kullanılabilecek blokları güncellerseniz, bu değişiklikler otomatik olarak mevcut tüm örneklere uygulanır. Örneğin, tüm içeriğinizde aynı şeyi istediğiniz şekilde harekete geçirme davetini (CTA) yapmak için yeniden kullanılabilecek bir blok kullanabilirsiniz. Ardından, CTA’yı güncellemek istiyorsanız, yalnızca Site boyunca değiştirmek için bir kez yeniden kullanılabilecek bloğu güncellemeniz gerekir. Gutenberg WordPress düzenleyicisinde yeniden kullanılabilecek bir blok oluşturmak için bir veya birkaç blok seçmek için tıklayın ve sürükleyin. Ardından, yeniden kullanılabilecek bloğa ekle seçeneğini tıklayın. (Yukarıda bahsettiğimiz eklenti de bu şekilde bir blok deseni yapmanıza izin verir.) Yeniden kullanılabilecek bir blok nasıl yapılır.
Bloğunuz daha sonra gruplandırılacaktır – yan çubukta yeniden kullanılabilecek blok ayarlarında yeniden kullanılabilecek bloğun adını verebilirsiniz. Şimdi, adını bularak yeniden kullanılabilecek bir blok ekleyebilirsiniz. Bloğu hızlı bir şekilde girmek için `/` kullanabilirsiniz:
Yeniden kullanılabilecek bir blok nasıl girilir. Yeniden kullanılabilecek bloğu değiştirirseniz, yayını güncellediğinizde bu değişiklikleri yayınlama seçeneğine sahip olursunuz. Yeniden kullanılabilecek bloklarda değişiklikler yayınlamaya karar verirseniz, bu değişiklikler tekrar kullanılabilecek blokların her örneğine otomatik olarak uygulanacaktır:
Yeniden kullanılabilecek blok nasıl güncellenir.

Blok düzenleyiciyi şimdiye kadar eklentilerle genişleterek, çeşitli istisnalar dışında Core Block Editor özelliğine odaklanıyoruz. Bununla birlikte, Block Editor ile ilgili en güzel şeylerden biri, diğer WordPress sitelerinde yapabileceğiniz gibi, eklentileri genişletmek için kullanabilmenizdir. Birkaç farklı şey için bir eklenti kullanabilirsiniz:
Yeni bir içerik bloğu ekleyin: Eklentiler, tasarımınızda kullanabileceğiniz yeni bloklar ekleyebilir. Bu, mevcut Gutenberg eklentisi için en yaygın kullanım örneğidir.
Yeni bir blok şablonu/desen ekleyin: Bazı eklentiler bir çekirdek blok desen sistemi kullanırken, diğerleri kendi şablon sistemlerini yapmıştır.

Arayüz/Özellik Düzenleyicisini Değiştir: Düzenleyicinin kendisini değiştirmek için bir eklenti kullanabilirsiniz. Örneğin, daha iyi fiyat azaltma için destek ekleyebilirsiniz.
Gutenberg için özel olarak yapılan eklentiye ek olarak, diğer birçok WordPress eklentisi blok editörleri de kullanabilir.Örneğin, bir kişi formu eklentisi kullanıyorsanız, eklenti size formunuzu sabitlemek için kullanabileceğiniz özel bir blok verebilir.Aynı şey diğer birçok eklenti türü için de geçerlidir.Editörün temellerinde ustalaştıktan sonra, deneyiminizi artırabilecek bir eklenti bulup bulmadığınızı görmek için bu eklentiyi keşfetmek iyidir.İşte bu yazıyı yazdığımızda en popüler seçeneklerden bazıları: Gutenberg için Ultimate Addons
Kadence bloğu
Bir blok üretmek
İstiflenebilir

Getwid
WordPress.org bloğunu destekleyen eklentide daha fazlasını görebilirsiniz. Gutenberg WordPress editörü ve tam site düzenlemesi Bu yazının başında bahsettiğimiz gibi, Gutenberg projesi sadece içerik düzenleyicisinden daha fazlası olmayı hedefliyor. Uzun vadeli plan, WordPress’i tam site düzenlemesine taşımaktır. Bu, tam olarak yazıldığı anlamına gelir – amaç, Gutenberg editörünü kullanarak sitenizin tüm bölümlerini nihayet düzenleyebilmenizdir. Ve bu, üstbilgiler, altbilgi, siten kenar çubuğu vb. WordPress 5.0’daki Block Editor’un başlatılmasının aksine, tam site düzenleme tekrarlama yaklaşımı gerektirir. Bu, her yeni sürümün bir öncekinin üzerinde inşa edildiği aşamalarda ek bir özellik olacaktır. Örneğin, WordPress 5.8’den başlayarak, artık site widget’ınızı yönetmek için bir blok düzenleyici kullanacaksınız. Ayrıca, site logoları, navigasyon, sorgu döngüsü (listeleme için bir şablon oluşturmanıza izin veren) ve daha fazlası gibi temalara odaklanan birkaç yeni bloğa erişeceksiniz. Ancak resmi sitenin resmi düzenlenmesi hala süreçte olsa da, birkaç cesur tema geliştiricisi blok bazlı temaları yayınlamaya başladı, bu da bize tam site düzenlemesinin nasıl çalışabileceği hakkında oldukça iyi örnekler veriyor. Buna ek olarak, Gutenberg eklentisi sürümündeki tüm deney site düzenleme özelliklerine erişebilirsiniz. Öyleyse, iki şeye bakalım: şimdi WordPress 5.8’de sahip olduğumuz Site Düzenleme özelliği

“Tam” tam site düzenleme deneysel özelliklere göre nasıl çalışabilir?
Önemli

Tüm bunlar, tam siteyi ana akıma düzenlerken küçük veya büyük bir şekilde değişebilir. Bu size sadece neler olabileceğinin bir resmini vermek içindir. WordPress 5.8’i başlatan widget yerine bir blok kullanarak, artık widget yerine yan ve altbilgiyi kontrol etmek için bir blok kullanacaksınız (varsayılan olarak-bunu isterseniz devre dışı bırakabilirsiniz) . Görünüm> widget’ları açtığınızda, Block Editor’u kullanarak her widget alanının içeriğini yönetebilirsiniz. Widget’ın her alanının Accordeon düğmesini tıklayarak açabileceğiniz ayrı bir düzenleyici aldığını görebilirsiniz. Ayrıca, üstteki bükülmüş bir ok simgesine tıklayarak farklı widget alanları arasındaki blokları da hareket ettirebilirsiniz:
Widget alanını düzenlemek için bir blok kullanın.

Yeni WordPress 5.8 tema bloğunu kullanmak, sitenizde dinamik içerik girmenizi sağlayan yeni bir özel tema bloğu da ekler. Bu blok, yaklaşan sürümde temanız için bir şablon tasarladığınızda önemli bir rol oynayacaktır. Örneğin, en son içerik listenizi sayfaya gömmek istersiniz. Şimdi, bir sorgu döngüsü bloğu ekleyebilirsiniz ve kategorilere, yazarlara, anahtar kelimelere ve daha fazlasına göre filtreleme dahil olmak üzere belirli yayın türlerinden (örneğin blog yayınları) içeriği dinamik olarak ekleyebilirsiniz:
Dinamik içeriği görüntülemek için bir sorgu döngüsü bloğu kullanma.

Sorgu döngü bloğunda, orada görüntülenen içeriğin şablonunu kontrol etmek için başka bir tema bloğu ayarlayabilirsiniz. Örneğin, şablonunuza bir blok gönderisi ekleyerek her gönderi tarihini görüntüleyebilirsiniz. WordPress 5.8’deki sorgu döngüsü bloğu ile temel olarak kendi özel blog listenizi tasarlayabilirsiniz. Tam sitenin doğru düzenlenmesi onu tüm temanıza genişletecektir – bu yüzden bir sonraki bakalım. Şablonun Tasarlanması Templant Cediting Modu Şablonları, WordPress 5.8’deki diğer yeni özelliklerdir. Bu, Gutenberg’i bir blok kullanarak yayınınız ve sayfanız için bir şablon tasarlamak için kullanmanızı sağlar. Şu anda, bu özellik yalnızca tema geliştiricileriniz özellikle etkinleştirilmişse kullanılabilir, bu nedenle tema geliştiricilerinizin yapmadığını göremeyebilirsiniz. WordPress 5.8’de düzenleme modu şablonunu destekleyen temayı kullanıyorsanız, yayınları veya sayfaları düzenlerken kenar çubuğundan Post / Sayfa sekmesindeki yeni şablon bölümünü göreceksiniz. Yeni bir şablon oluşturabilir veya mevcut şablonlardan birini seçebilirsiniz: Şablon modunu destekleyen temalarda yeni bir şablon oluşturmak.
Yeni bir şablon oluşturursanız, bunu hatırlamanıza yardımcı olacak bir isim verebilirsiniz. Ardından, bir önceki bölümde detaylandırdığımız yeni tema blokları ile birlikte özel şablon düzenleyici modunu kullanarak şablonu tasarlayabilirsiniz:

WordPress 5.8’deki yeni şablon editörü.
Blockbase Tam Site Düzenleme Örneği Blockbase, Automattic’ten bir tür “konsept kanıtı” ve tam site düzenleme için oyun alanı olarak işlev gören bir temadır. Hala deneysel, bu yüzden bu özellikler temel WordPress yazılımında olmadan değişebilir. Ancak tam site düzenleme fikri sağlar. Gutenberg’in teması ve eklenti sürümü yüklü ile, yukarıda gördüğünüz düzenleyiciyi kullanarak temanızı “oluşturmanıza” izin veren yeni bir site düzenleyicisi alanı alırsınız. Bununla birlikte, kritik fark, sadece tek bir yazı veya sayfa oluşturmamanızdır. İçeride, sitenizin tüm içeriğinin kullanacağı gerçek şablonları oluşturmak için Gutenberg WordPress blok düzenleyicisini kullanıyorsunuz – örneğin, başlığınızın şablonu. Tam site düzenlemenin erken bir örneği.
Bunu başarmanıza yardımcı olmak için, yukarıda gördüğünüz bazı tema blokları da dahil olmak üzere bir dizi yeni tasarım bloğu elde edersiniz:
Tam site düzenleme ile yeni tasarım blokları.
Farklı şablonlar arasında gezinmek için, diğer şablonları düzenlemek ve yenilerini oluşturmak için sol üst köşedeki WordPress logosunu tıklayabilirsiniz:
Farklı tema şablonlarını düzenleme.

En son Gutenberg WordPress Editor'un derinliklerine dalmak (2021)