WordPress 5.9'daki Yenilikler — Tam Site Düzenleme, Global Stiller, Bloklar, Modeller, API'ler, UI Geliştirmeleri ve Çok Daha Fazlası

WordPress 5.9 Josephine burada! Yılın ilk WordPress sürümünün başlangıçta 14 Aralık 2021'de yayınlanması planlanıyordu. Birkaç açık sorun ve çözülmemiş hata nedeniyle son sürüm ertelendi ve sonunda 25 Ocak 2022'de yayınlandı.

WordPress 5.9'daki yenilikleri merak ediyorsanız, kısa cevap Tam Site Düzenleme (FSE).

Ve gerçekten de, birçok 5.9 özelliği, yalnızca yepyeni varsayılan tema Twenty Twenty-Two gibi Tam Site Düzenlemeyi destekleyen bir tema kullanıyorsanız kullanılabilir.

WordPress 5.9 ile Gutenberg yol haritasının ikinci aşamasının kalbine ulaşıyoruz: Çoğunlukla Tam Site düzenleme, Blok Kalıpları, Blok Dizini ve Blok tabanlı temalara odaklanan Özelleştirme aşaması .

Önümüzdeki ay çıkacak olan 5.9 ile, Gutenberg'in bu özelleştirme aşamasının Minimum Uygulanabilir Ürünü olan MVP'de – söyleyebilirim ki – biz varız.

Matt Mullenweg'in 2021 State of the Word'deki bu sözleri, yeni WordPress sürümünün temel özelliklerini en iyi şekilde özetliyor.

Bununla birlikte, 2022'nin ilk WordPress sürümündeki yenilikler neler?

Hadi bulalım!

Global Stiller: theme.json için Grafik Arayüzü

2021'de WordPress 5.8'in piyasaya sürülmesiyle, theme.json dosyasını değiştirmek, tema geliştiricilerinin düzenleyici ayarlarını ve stillerini özelleştirmesinin standart yolu haline geldi.

WordPress 5.9, kullanıcıların tek bir kod satırı yazmadan web siteleri için küresel veya blok düzeyinde stil ön ayarlarını özelleştirmesine olanak tanıyan bir grafik arabirim sunarak işleri bir sonraki düzeye taşıyor.

Global Stiller, WordPress site tasarımının çeşitli yönlerini etkilediğinden, Global Stiller mekanizması, web sitelerinizin görünümünü özelleştirmeye alışma şeklinizi önemli ölçüde değiştirmelidir.

Öncelikle, Global Stiller arayüzü, Özelleştirici'nin yerini alıyor ve artık ayarları ve stilleri blok temalarla özelleştirmenin tek yolu. Benzer şekilde, karmaşık tema seçeneği yönetici sayfalarına artık ihtiyaç duyulmayacaktır. Bu, tema ayarlarını ve stillerini yapılandırmak için yeni bir standart yol sağlar ve aynı zamanda tema geliştirme iş akışını düzene sokmalıdır.

Global Stiller ile WordPress kullanıcıları, bireysel sayfaların veya gönderilerin bağlamının ötesinde, web sitelerinin sunumu üzerinde hem global olarak hem de blok tipine göre daha fazla kontrol sahibi olurlar.

Site düzenleyicide artık yeni bir kenar çubuğu var, bunun üstünde küçük bir önizleme paneli ve aşağıdaki sırayla dört bileşen bulacaksınız:

• tipografi
• Renkler
• Düzen
• bloklar

Zamanla yeni bileşenlerin eklenmesini bekleyebiliriz.

Yeni arayüze daha yakından bakalım.

Burada! WordPress 5.9 hakkında bilmeniz gereken her şey, hepsi bir mega gönderide Tweetlemek için tıklayın
[CTA]

Stil Önizleme

Global Stiller kenar çubuğundaki ilk öğe bir önizleme panelidir. Bu panel, özelleştirmelerinizin sonucunu kontrol etmenize olanak tanır ve özellikle değişiklikleriniz site düzenleyici tuvalinde görünmeyen öğelere uygulandığında kullanışlıdır.

Aşağıdaki resim, karşılaştırılan üç farklı stil kombinasyonunu göstermektedir:

tipografi

Tipografi paneli, web sitenizin tipografisini kontrol ettiğiniz yerdir. Elbette bu panelde bulunan kontroller, theme.json ayarlarınıza bağlıdır.

Örneğin, Twenty Twenty-One Blocks (TT1 Blocks) teması aşağıdaki tipografi özelliklerini bildirir:

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

Sonraki görüntü, Global Stiller kenar çubuğunda elde edilen Tipografi ayarlarını gösterir:

Biraz daha derine inelim ve TT1 Blocks temasının fontFamilies nasıl bildirdiğini görelim:

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

Bu yazı tipi ailelerini Genel Stiller önizleme panelinde kontrol edebilirsiniz:

Renkler

Renkler bölümünde, renk paletlerini görüntüleyebilir ve düzenleyebilir ve çeşitli site öğelerinin rengini özelleştirebilirsiniz.

Bu öğelere tıklayarak, üç renk paletinden renkleri seçebileceğiniz yeni bir panele erişebilirsiniz: Çekirdek, Tema ve Özel palet (Varsayılan Renkler, Tema Renkleri ve Özel Renkler bölümünde daha fazlasını okuyun).

Bu panelde, geçerli öğenin rengini ayarlayabilecek ve değiştirebileceksiniz.

Düzen

Son araç grubu, düzen özelleştirmeleri içindir. Küresel bağlamda bu, site kapsayıcısıyla sınırlıdır.

bloklar

Global Stiller mekanizmasının uygulanmasıyla artık Paragraf (tipografi ve renkler), Düğmeler (düzen) ve Sütun (renkler ve düzen) gibi belirli blokların görünümünü değiştirmek de mümkündür.

Blok stillerinin Global Stiller arayüzünden yalnızca blok ilgili block.json dosyasında belirli işlevsellik için destek beyan etmesi durumunda özelleştirilebileceğini unutmayın. Örneğin, core/post-title bloğu şu anda aşağıdaki stilleri desteklemektedir:

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

core/post-title bloğu renkleri, aralığı ve tipografiyi desteklediğinden, ilgili girişleri Yazı Başlığı bloğunun Genel Stiller ayarlarında bulacaksınız.

Aşağıdaki resim, yukarıdaki kodla kolayca karşılaştırabileceğiniz tipografi ayarlarını göstermektedir:

WordPress 5.9'un yalnızca Global Styles arayüzünün ilk uygulamasını sunduğunu belirtmekte fayda var. Matias Ventura'nın belirttiği gibi, makul olarak yeni stil kontrol özelliğinin daha da geliştirilmesini bekleyebiliriz:

Gelecekte, bir düğme bloğunda özelleştirmeler yapmak ve bu türdeki tüm düğmelerde değişiklikleri genel olarak uygulamayı seçmek gibi, yerel stillerden global stillere geçmenize olanak tanıyan sistemde yerleşik akışlar olacaktır.

Bu nedenle, yakında büyük gelişmeler görebiliriz. Aşağıdaki resim, ne bekleyebileceğimizin sadece bir örneğidir:

Ek iyileştirmeler, temaların alternatif renk paletleri ve çoklu global stil varyasyonları sağlama yeteneğini içerebilir.

Geçen hafta bir avuç Yirmi Yirmi İki'nin renk + yazı tipi varyasyonlarını süper basit alt temalar haline getirdim. Gerçekten hafifler ve insanlara tek bir tıklamayla çok farklı bir site sunma fikrine bayılıyorum.https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

— kjellr (@kjellr) 15 Kasım 2021

Geliştiriciler, Global Ayarlar ve Stiller (theme.json) destek makalesinde global stil mekanizmasını derinlemesine inceleyebilir. Twenty Twenty-Two varsayılan temasına girişimizde ek örnekler bulacaksınız.

Gezinme Bloğu

Gezinme bloğu "en etkili tema bloklarından biri" olarak adlandırıldı ve aynı fikirde olduğumuzu söylemekten korkmuyoruz.

Blok, bir süredir embriyonik aşamadadır (ayrıca bkz. Navigasyon Bloğu İzleme Sorunu ve İzleme Sorunu i2). Yine de, WordPress 5.9'un olmazsa olmazları olarak listelenen tüm bekleyen sorunlar ve engelleyiciler düzeltildiğine göre, nihayet WordPress 5.9 ile çekirdekte birleştirilmiş en güçlü özelliklerden birini kullanmaya başlayabiliriz.
[CTA]

Gezinme Bloğu Arayüzüne Hızlı Bir Bakış

Yeni bloğu kullanmak ilk başta biraz kafa karıştırıcı olabilir, ancak bir kez alıştığınızda, tam potansiyelini takdir edeceksiniz.

Bir Gezinti bloğu ilk eklediğinizde, blok yer tutucusu, mevcut bir blok tabanlı menüyü seçmek, tüm sayfalardan oluşan bir menü oluşturmak veya boş bir menü ile yeni başlamak için üç seçenek sunar.

Yeni Gezinme menüsü ayrıca, klasik temalarla kullanılabilen Görünüm Menüleri Ekranı aracılığıyla oluşturulan menüleri içe aktarmanıza olanak tanır.

Bu, klasik bir temadan bir blok temasına geçiş yapıyorsanız, mevcut menülerinizi yeniden oluşturmanız gerekmeyeceği anlamına gelir. Şu anda mevcut olan “Klasik Menülerinizden” birini seçmeniz yeterlidir ve bu, otomatik olarak blok tabanlı bir gezinme menüsüne dönüştürülecektir.

Gezinme bloğunu sayfalarınızın herhangi bir yerine ekleyebilirsiniz. Örneğin, uzun biçimli makalelerde, kullanıcıların belirli içerik bölümlerine atlamasına olanak tanıyan bir içindekiler tablosu oluşturmayı yararlı bulabilirsiniz.

Menüye başka blok türleri eklenmemişse, sağ taraftaki artı ( + ) simgesine tıklanarak Navigasyon bloğuna anında yeni Navigasyon Bağlantıları eklenir (ayrıca Gutenberg 11.7 sürüm notlarına bakın).

Gezinti Bağlantısı bloğu araç çubuğundaki Düzenle düğmesine tıklamak, bir menü öğesini özel bir bağlantıya dönüştürür. Bu, öğeleri tek tek eklemenize, düzenlemenize, yeniden sıralamanıza ve kaldırmanıza olanak tanır.

Blok araç çubuğundaki Dönüştür düğmesine tıklayarak bağlantıları bloklara da dönüştürebilirsiniz. Bu, belirli blokları doğrudan navigasyon menüsüne eklemenizi sağlar.

Özel Bağlantı, Aralayıcı, Site Logosu, Ana Bağlantı, Sosyal Simgeler ve Arama blokları artık gezinme menülerine blok eklerken kullanıcılara sunuluyor.

Ayarlar kenar çubuğunda, gezinme menülerinizin çeşitli yönlerini kontrol etmek için kapsamlı bir dizi seçenek bulacaksınız.

Düzen paneli, hizalama, yönlendirme ve sarma için kontroller içerir.

Gezinme bloğu ayrıca, her zaman açık burger menüsü seçeneğine sahip gelişmiş bir Ekran ayarları paneline sahiptir.

Ayrıca menüleriniz ve alt menüleriniz için metin ve arka plan renklerini özelleştirebilirsiniz.

Gezinme bloğuna yakın zamanda eklenen bir başka yararlı ekleme, kullanıcıların menü öğeleri arasındaki mesafeyi kontrol etme yeteneği ekleyen Blok Boşluğu desteğidir.

Tipografi paneli, yazı tipi ailesi, görünüm, satır yüksekliği, dekorasyon ve harf büyüklüğü için bir dizi kontrol sağlar. Tüm bu kontroller, sağdaki üç nokta simgesine tıkladığınızda görünen bir açılır menüden açılıp kapatılabilir.

Gezinme Bloğu: Kaputun Altında

Gezinme bloğu verileri, bir wp_navigation ayrılmış gönderi türü kullanılarak veritabanında depolanır.

Bu, WordPress kullanıcıları için neden ilginç ve nasıl çalışıyor?

İki özel bağlantı ve bir arama kutusundan oluşan bir gezinme menüsü oluşturduğunuzu varsayalım. Twenty Twenty-Two teması yüklendiğinde, menü aşağıdaki resimde gösterildiği gibi görünebilir:

Yukarıdaki Gezinme bloğu, veritabanında wp_navigation yazı tipi olarak aşağıdaki gibi saklanır:

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

Navigasyon bloğu içeriğinin veritabanında saklanması, kullanıcıların farklı blok temalarında aynı navigasyon menülerini kullanmalarını sağlar. Menü hemen görünmüyorsa, menü seçiciden istediğiniz gezinme menüsünü seçmeniz yeterlidir (ayrıca bkz. sayı #36087 ve PR #36178).

Aşağıdaki resim, Twenty Twenty-One Blocks temasıyla yukarıdaki menüyü göstermektedir:

Gezinti bloğu birkaç yinelemeden geçti. Gutenberg 11.7, 11.8 ve 11.9 sürüm notlarında her bir uygulamanın daha derinine inebilirsiniz.

Yeni Gezinti bloğu geliştirme notu ve Gezinti bloğu destek makalesinde Gezinme bloğu hakkında daha fazla bilgi edinebilirsiniz.
[CTA]

Resim Galerileri, Öne Çıkan Resimler ve Site Simgeleri

Görüntülerin farklı bağlamlarda daha tutarlı davranmasını amaçlayan WordPress 5.9, birkaç blokta yeni özellikler ve iyileştirmeler sunar. Galeri Bloğu tamamen revize edilirken, Öne Çıkan Resim ve Site Simgesi bloklarında yapılan çeşitli değişiklikler, kullanıcılara ilgili resimler üzerinde daha ayrıntılı kontrol sağlar.

Yeniden Düzenlenmiş Galeri Bloğu

WordPress 5.8'de, galerilerdeki görüntülerin görünümünü özelleştirme yeteneği biraz sınırlıydı. Görüntü stilini değiştirmenin veya çift tonlu filtre uygulamanın hiçbir yolu yoktu.

Ayrıca, galerideki tek tek resimlere özel bağlantılar eklemek gibi galeri resimlerinde önemli özellikler eksikti.

Tek bir görüntünün iki farklı bağlamındaki görüntüler ile galerideki bir görüntü arasındaki bu asimetrinin nedenini daha iyi anlamak için, WordPress 5.8'deki Kod görünümündeki Galeri bloğuna bir göz atalım:

Görüntü ayrıntılarının yalnızca Galeri blok sınırlayıcısında saklandığını unutmayın (ayrıca bkz. Gutenberg Bloğu Nedir?).

Bu, bireysel görüntülerin galerilerdeki görüntülerden farklı davranmasına neden oldu.

Görüntülerin iki farklı bağlamda tutarlı davranmasını sağlamak için WordPress 5.9, tamamen yeniden düzenlenmiş bir Galeri bloğu sunar; bu, artık sırasız bir görüntü listesi yerine bir şekil öğeleri koleksiyonu için bir kapsayıcı gibi davranır.

WordPress 5.9'da galeri görüntüleri, çekirdek innerBlocks API'leri kullanılarak iç içe yerleştirilmiştir ve her görüntü, tam olarak bireysel görüntüler gibi kendi ayrıntı kümesini depolar.

Galeri blok görüntüleri artık görüntü boyutları ve çift tonlu filtreler gibi temel Görüntü bloklarında bulunan aynı işlevlerin yanı sıra sürükle ve bırak, kopyala, çoğalt ve kaldır işlevleri gibi standart blok özelliklerini desteklediğinden , bu harika bir geliştirme. .

Yeni Galeri bloğuyla, resimleri ayrı ayrı şekillendirebileceksiniz. Bu, çok çeşitli özelleştirme fırsatları sağlar.

Aşağıdaki resim, bir galeride, her biri farklı yuvarlatılmış köşelere sahip birden fazla resim göstermektedir:

Aynı galerideki farklı görseller üzerinde farklı çift ton filtreler de kullanabilirsiniz.

Ve elbette, her bir resme belirli bir CSS sınıfı atayabilirsiniz; bu, galeri resimlerinize ihtiyacınız olan her türlü özelleştirmeyi eklemek için size ek süper güçler sağlar.

Yeni Galeri bloğunun daha yakından görünümü için ayrıca Galeri Bloğu Refactor Geliştirme Notu, Yaklaşan Galeri Bloğu iyileştirmeleri ve Gutenberg 11.4 sürüm notlarına bakın.

Öne Çıkan Görüntü Geliştirmeleri

Öne Çıkan Resim bloğuna da çeşitli iyileştirmeler getirildi.

Temel Boyut Kontrolleri

Öne Çıkan Resim bloğu artık yükseklik, genişlik ve ölçek kontrolleri sağlayan yeni bir Boyutlar ayarları paneline sahiptir.

Boyut kontrolü, aşağıdaki resimde gösterildiği gibi, Sorgu Döngüsü bloklarındaki öne çıkan resimler için de geçerlidir:

Öne Çıkan Görsellerde Çift Ton Filtreleri

Yeni refactored Gallery bloğuna sarılmış görüntülerde artık çift ton filtresini uygulayabileceğimizi yukarıda belirtmiştik.

Artık WordPress 5.9'dan başlayarak, çift ton filtreler, Öne Çıkan Resim bloklarında gönderi ve sayfa şablonlarından Sorgu Döngüsü bloklarına kadar her bağlamda kullanılabilir.

Bu özellik, site genelinde yaratıcı ve tutarlı renk kombinasyonlarına kapı açar.

Site Logosunda Resim Kırpma

WordPress 5.9'dan (ve Gutenberg 11.6) önce logo resimleri yalnızca yüklenmeden önce düzenlenebiliyordu. WordPress 5.9 ile Site Logosu bloğunda kullanılan görüntüleri doğrudan blok araç çubuğundan kırpabilir, yakınlaştırabilir ve döndürebilirsiniz.

Yeni Tasarım Araçları, Bloklar ve Kullanıcı Arayüzü Geliştirmeleri

On bir Gutenberg sürümü, WordPress 5.9 ile çekirdekte birleştirildi ve o kadar çok özellik, geliştirme ve hata düzeltmesi sağladı ki hepsini tek bir makalede ele almak mümkün olmayacaktı.

Bu yüzden en çok dikkat etmeye değer bulduklarımızdan bazılarını seçtik. Bu özelliklere ve iyileştirmelere daha derin bir genel bakış için, Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 ve 11.9 için yayın gönderilerine de göz atmak isteyebilirsiniz.

Bununla birlikte, bu bölüm aşağıdaki değişiklikleri kapsayacaktır:

Sınır Destekler Kullanıcı Arayüzü

WordPress 5.9'dan itibaren, theme.json , Block Supports API aracılığıyla border ayarlarını ve bir blok, kenarlık desteğini bildirdiğinde, yeni bir ayarlar paneli, kenarlık yarıçapı, genişlik, stil, renk ve birimler için kontroller sağlayacaktır (ayrıca bkz. Gutenberg 11.1). .

Çekirdek Grup bloğu, bu kullanışlı UI geliştirmesine iyi bir örnektir. Grup bloğunun block.json dosyası artık aşağıdaki supports bildirimlerini içerir:

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

Bu özellik, kullanıcıların web sitelerinde minimum çabayla harika grafik efektleri oluşturmasına olanak tanır. Bunu yeni Twenty Twenty-Two temasıyla çalışırken görebilirsiniz.

Yeni bir gönderide veya sayfada yeni bir Grup bloğu oluşturun ve onu seçin. Blok ayarları kenar çubuğunda bir Kenarlık paneli göreceksiniz. Kenarlık genişliğini ve stilini gerektiği gibi değiştirin ve sonucun tadını çıkarın.

Bir tema geliştiricisiyseniz ve bu özelliği temalarınıza eklemek istiyorsanız, theme.json dosyanızı açın ve aşağıdaki kodda gösterildiği gibi sınır desteğini bildirin:

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

Dosyayı kaydedin ve WordPress kontrol panelinize geri dönün. Yeni bir gönderide veya sayfada yeni bir Grup bloğu oluşturun ve onu seçin. Şimdi blok ayarları kenar çubuğunda bir Kenarlık paneli görmelisiniz (ayrıca bu deneysel theme.json'a bakın).

Liste Görünümü İyileştirmeleri

WordPress 5.9 ile Liste Görünümü geliştirildi ve artık sürükle ve bırak, daraltılabilir bölümler ve HTML bağlantıları içeriyor.

Liste Görünümünde Sürükle ve Bırak

33320 numaralı çekme talebinde belirtildiği gibi, Liste Görünümünde sürükle ve bırak uygulandı ancak performans sorunları nedeniyle devre dışı bırakıldı.

WordPress 5.9'dan itibaren, Liste Görünümü'nde sürükle ve bırak yeniden uygulandı. Blokları ve blok gruplarını tekrar Liste Görünümünde herhangi bir yere sürükleyip bırakabilirsiniz. Bu, blokları ve blok gruplarını sayfalarınız arasında hızlı ve kolay bir şekilde taşımanıza olanak tanıdığından, editörün kullanılabilirliği açısından harika bir gelişmedir. Uzun biçimli makaleler ve sayfalarda ve iç içe blokların karmaşık yapılarını yönetmede etkilidir.

Liste Görünümü Daraltılabilir Bölümler

Liste Görünümü'ndeki bir diğer önemli gelişme, iç içe blokların bölümlerini genişletme/daraltma yeteneğidir. Bu, karmaşık blok yapılarında kolayca gezinmenize, tek blok gruplarını genişletmenize ve geri kalan her şeyi çökmüş halde bırakmanıza olanak tanır.

Ayrıca sol ve sağ okları kullanarak Liste Görünümü bölümlerini genişletebilir ve daraltabilirsiniz.

Liste Görünümü Öğelerinde HTML Bağlantıları

Yine bir başka yararlı geliştirme, Liste Görünümünde bloklarınıza HTML çapaları ekleme ve bunları bir bakışta görme yeteneğidir.

Boşluk Aralığı Kontrolünü Engelle

İlk olarak Gutenberg 11.4'te tanıtılan ve şimdi WordPress 5.9 ile çekirdekle birleştirilen yeni Blok Aralığı kontrolü, bir blok içindeki öğeler arasında özel bir mesafe ayarlamanıza olanak tanır. Aşağıda, Twenty Twenty-Two varsayılan temasına sahip bir Sütun bloğunda farklı blok aralığı değerlerine sahip bir önizleme görebilirsiniz:

Boşluk Aralığı başlangıçta düğmeler, resimler, sütunlar, başlıklar ve gezinme dahil olmak üzere belirli bloklar için kullanılabilir, ancak gelecekte destek daha fazla bloğa genişletilmelidir.

Temalar, yeni görünümTools özelliğini kullanarak theme.json'da Boşluk Aralığı'nı etkinleştirmelidir. Görünüm araçları hakkında daha fazla bilgiyi Twenty Twenty-Two'ya yaptığımız derin dalışta okuyabilirsiniz. Ayrıca #33991 ve #34630 çekme isteklerine bakın.

Bağlantı Kontrolü için Zengin URL Önizlemesi

Yeni REST url-details uç noktasından yararlanan Bağlantı kontrolü artık bir bağlantı hedef kaynağı için ayrıntıları gösteren zengin bir URL önizlemesi sağlar.

İlk uygulamasında, bu özellik yalnızca Yayın Düzenleyici zengin metin bileşeninde mevcuttu. Bu yazının yazıldığı sırada Site Düzenleyicisi'nde de mevcuttur, ancak Gezinti ve Pencere Öğesi düzenleyicilerinde mevcut değildir.

Bağlantı Açılır Penceresinden Sayfalar Oluşturun

WordPress 5.9 ayrıca, doğrudan satır içi bağlantı açılır penceresinden yeni sayfalar oluşturmak için yepyeni bir düğme gösteren gelişmiş bir satır içi bağlantı kullanıcı arayüzüne sahiptir. Bu özellik yalnızca Gönderi Düzenleyici'de kullanılabilir.

Arama Bloğunda İyileştirmeler

Arama Bloğu şimdi düğme ve kenarlık rengi ayarlarını gösteriyor.

Artık arka plan ve metin rengini ve kenarlık rengini ve yarıçapını da özelleştirebilirsiniz.

Blok Boyutları için Yeni Kontroller

Kullanıcıların sayfada bir bloğun kapladığı alanı kontrol etmeleri için artık yeni bir Boyutlar ayarları paneli mevcuttur. Panel yükseklik, genişlik, dolgu, kenar boşluğu ve muhtemelen hizalama kontrollerini içermelidir , ancak tüm nitelikler her blok için mevcut olmayacaktır.

Blok geliştiriciler, GitHub'da belgelenen <DimensionControl /> bileşenini bulacaklar, ancak bunun hala deneysel bir özellik olarak işaretlendiğini ve bu yazı yazılırken önemli değişikliklere tabi olabileceğini unutmayın.

Widget Ekranına Yeni Bir Widget Grubu Bloğu Eklendi

Blok tabanlı widget düzenleyicide artık yeni bir Widget Grubu bloğu mevcuttur. En son blok, klasik temaların Widgets Editor ve Customizer'da bir başlığı olan bir widget'a bir blok grubu eklemenize olanak tanır.

Widget düzenleyicisi hakkında daha fazla bilgiyi Blok Tabanlı Pencere Öğeleri Düzenleyicisi'nde ve Blok Pencere Öğeleri'ni Özelleştirici'de okuyabilirsiniz.

Esnek Düzen ve Yeni Satır Bloğu

Başlangıçta Gutenberg 11.2 ile deneysel bir özellik olarak tanıtılan esnek düzen, Sosyal Bağlantılar ve Grup blokları dahil olmak üzere birkaç bloğa genişletildi.

Sosyal Bağlantılar bloğu gibi bazı bloklar artık esnek düzeni özelleştirmenize olanak tanıyan bir dizi araç çubuğu denetimi ve kenar çubuğu ayarı sağlar.

Aynı işlevsellik, Gutenberg 11.5 ile tanıtılan Grup bloğunun yeni bir varyasyonu olan Gezinme bloğu ve Satır bloğunda mevcuttur.

Aşağıdaki resim, ayarlar kenar çubuğundaki düzen kontrolleriyle Satır bloğunu göstermektedir:

Aşağıda, ön uçta ve Chrome'un denetçi aracında aynı Satır bloğunu görebilirsiniz.

Blok Modeli Geliştirmeleri

İlk olarak WordPress 5.5 ile tanıtılan blok kalıpları, WordPress kullanıcılarının yalnızca birkaç tıklamayla içeriklerine iç içe blokların karmaşık, kullanıma hazır yapılarını eklemelerine olanak tanır.

Şimdi, WordPress 5.9, blok kalıp sistemine birkaç geliştirme ekleyerek, tasarımın demokratikleşmesine ve kullanıcı yetkilendirmesine doğru bir adım ileriye taşıyor.

Peki, WordPress 5.9'daki blok kalıplarındaki yenilikler neler?

Kalıp Dizininden Öne Çıkan Kalıplar

Blok Yerleştirici artık Kalıp Dizininden dinamik olarak alınan Öne Çıkan Blok Kalıplarını görüntüleyerek kullanıcılara içeriklerinde kullanmak üzere popüler kalıpları bulmaları için hızlı ve kolay bir yol sağlar.

Aynı şekilde, kalıplar doğrudan WordPress panosuna girdikçe, WordPress geliştiricileri zaman içinde giderek daha fazla kalıp oluşturmaya ve yayınlamaya teşvik edilmelidir, bu da kullanıcılar için giderek daha gelişmiş tasarım yetenekleri sağlar.

Yeni Bir Tam Ekran Desen Gezgini

Kalıp Dizininde bulunan blok kalıplarının sayısı artmaya devam ettikçe ve daha fazla tema bunları kullandıkça, WordPress 5.9 yeni bir blok kalıbı gezinme arayüzü sunar: Kalıp Gezgini.

Yeni bir Keşfet düğmesi, kullanıcıların yalnızca birkaç tıklamayla göz atmalarına, arama yapmalarına ve blok kalıpları eklemelerine olanak tanıyan tam ekran bir modal açar. Sonuç, geliştirilmiş bir kullanıcı deneyimidir.

Ayrıca Twenty Twenty-Two WordPress temasına yaptığımız derin dalışta ek notlar ve birkaç blok desen örneği bulacaksınız.

İlgileniyorsanız ve daha fazlasını öğrenmek istiyorsanız, Josepha Haden Chomphosy'nin podcast Bölüm 16 ve 21'ini dinleyin ve Anne McCarthy'nin WordPress 5.9'u Keşfetme YouTube videosunu izleyin.

Yirmi Yirmi İki Tema ve WordPress Blok Temaları

WordPress 5.9 ile, WordPress web sitenizde Tam Site Düzenlemeyi etkinleştirmek için artık Gutenberg eklentisini yüklemeniz gerekmez. Tüm FSE özelliklerinden yararlanmak için bir blok temasına izin vermeniz yeterlidir.

Ek olarak, WordPress 5.9 yepyeni bir varsayılan tema olan Twenty Twenty-Two ile paketlenmiştir ve Twenty Twenty-Two şimdiye kadarki ilk varsayılan blok teması olduğundan oyunun kurallarını değiştirir.

Twenty Twenty-Two, oldukça esnek ve özelleştirilebilir bir temadır. WordPress 5.9'dan başlayarak yeni şablon düzenleme akışını, yeni blokları, arayüz geliştirmelerini ve çekirdeğe eklenen tüm site düzenleme özelliklerini denemek için mükemmel bir sanal alan sağlar.

Yukarıda bahsedildiği gibi, Twenty Twenty-Two gibi bir blok teması kurmanız ve etkinleştirmeniz yeterlidir. Tema etkinleştirildiğinde, WordPress kontrol paneli yönetici menüsünde yeni bir Düzenleyici (beta) menü öğesi görünecektir.

Site Editörü arayüzü artık yenilenmiş bir Site Düzenleme Akışı içeriyor. Düzenleme arayüzünden sitenin ana sayfasını, şablonlarını ve şablon bölümlerini görsel olarak düzenleyebilecek ve Global Stiller arayüzüne erişebileceksiniz.

Bir blok temasını etkinleştirdiğinizde, Özelleştirici'yi bulamazsınız. Bunun nedeni, Özelleştiricinin yalnızca Site Düzenleyicisini kullanan blok temaları desteklememesidir. Etkin olmayan blok temalarını önizleyememenizin nedeni de budur.

Bu nedenle, WordPress 5.9'dan itibaren, bir blok teması etkinken Özelleştiriciye erişim noktası artık yönetici menüsünde mevcut değildir (onu kullanan bir eklenti kullanmıyorsanız).

Hala geleneksel temalara bağlıysanız ve geriye dönük uyumluluk konusunda endişeleriniz varsa içiniz rahat olsun: Temanızı kullanmaya devam edebilirsiniz.

Şu anda seçim yapabileceğiniz dört farklı tema kategoriniz var:

• Blok temaları : FSE için tasarlanmış temalar
• Evrensel temalar : Hem Özelleştirici hem de Site Düzenleyici ile çalışan temalar
• Karma temalar : theme.json gibi FSE özelliklerini destekleyen klasik temalar
• Klasik temalar : PHP şablonları, function.php vb. içeren temalar.

Blok temalarının WordPress ekosistemi üzerindeki etkisinden dolayı, Yirmi Yirmi İki ve WordPress blok temalarını kapsayan bir makalemiz var. Daha ayrıntılı bir genel bakış için kontrol ettiğinizden emin olun.

Performans geliştirmeleri

Burada Kinsta'da web sitesi hızına takıntılıyız. Bu nedenle WordPress 5.9 ile gelen performans iyileştirmelerinden heyecan duyuyoruz.

Bu iyileştirmeler, blok düzenleyiciden blok temalarına, geç yüklemeye ve daha fazlasına kadar CMS'nin çeşitli alanlarını etkileyecektir. Hadi dalalım.

Blok Yerleştirici Geliştirmeleri

WordPress 5.9'dan bu yana, blok türleri, desenleri ve kategorileri, Blok Yerleştirici'de tembel bir şekilde oluşturulur. Tarayıcı önce daha yüksek öncelikli içeriği yükleyerek kullanıcıya daha sorunsuz bir düzenleme deneyimi ve gelişmiş performans sağlar.

Blok düzenleyici bağlamındaki diğer dikkate değer performans geliştirmeleri, yeniden kullanılabilir blokları ve Liste Görünümünü etkiler.

Daha Az CSS Yüklendi

Ön uca gelince, WordPress 5.9, blok temalar tarafından yüklenen CSS miktarını önemli ölçüde azaltarak sayfaların önemli ölçüde daha hızlı yüklenmesine neden oldu.

Bu bağlamda belirtilmesi gereken ana gelişme, temaların yüzlerce CSS bildirimi de dahil olmak üzere büyük stil sayfaları kullanmasını engelleyen theme.json ayarları ve stilleri mekanizmasının tanıtılmasıdır. Bir temanın kullandığı CSS kodu miktarı, artık herhangi bir blok türünün yeniden kullanabileceği birkaç CSS özel özelliğine indirgenmiştir.

Tembel Yükleme Performansı İyileştirmeleri

Geç görüntü yükleme, ilk olarak WordPress 5.5'te tanıtıldı. WordPress 5.7'den başlayarak, tembel yükleme işlevi iframe'lere genişletildi ve site sahiplerinin daha hızlı web siteleri oluşturmasına ve SEO'larını geliştirmesine olanak sağladı.

Her neyse, En Büyük İçerikli Boyama (LCP) analizinin ardından, sayfadaki tüm resimlere ve iframe'lere load loading="lazy" özniteliği atamanın hafif performans düşüşüne neden olduğu ortaya çıktı.

Sadece loading="lazy" niteliğini atlamak bir çözüm değildi çünkü bunu yapmak tembel yüklemenin açık avantajlarını kaybetmeye yol açacaktı.

En uygun çözüm, ekranın üst kısmında görünen resimlerde yalnızca loading="lazy" özniteliğini atlamak olacaktır. Ancak, loading="lazy" özniteliği sunucu tarafında atandığından, WordPress ekranın üst kısmında hangi resimlerin tam olarak görüntüleneceğini belirleyemez. Çoğunlukla aktif temaya bağlı olan bir şey.

Şimdi, bir takas çözümü olarak, WordPress 5.9'dan başlayarak, ilk içerik görüntüsüne veya iframe'e loading="lazy" niteliği uygulanmaz. 50 popüler WordPress teması üzerinde yapılan bir analiz, bu çözümün önemli performans iyileştirmelerine ve sayfaların %30'a kadar daha hızlı yüklenmesine yol açtığını buldu.

Felix Arntz nasıl çalıştığını açıklıyor:

… bir geliştiricinin davranışı özelleştirmesini gerektirmeden performansı kullanıma hazır olarak iyileştirmek için, WordPress şimdi sayfadaki ilk “içerik resmini veya iframe”i tembel yüklenmekten atlayacak. Buradaki "içerik resmi veya iframe" terimi, mevcut ana sorgu döngüsündeki herhangi bir gönderinin içeriğinde bulunan herhangi bir resmi veya iframe'i ve bu tür bir gönderinin öne çıkan herhangi bir resmini ifade eder. Bu, hem "tekil" hem de "arşiv" içeriği için geçerlidir: "tekil" bir bağlamda (yalnızca) gönderinin ilk resmi veya iframe'i tembel olarak yüklenmezken, "arşiv" bağlamında ilk resim veya iframe sorgudaki ilk gönderi tembel yüklü değil.

Tema geliştiricileri artık geç yüklemeden atlanacak görüntülerin/iframe'lerin sayısını değiştirmek için yeni wp_omit_loading_attr_threshold filtresini kullanabilir.

Blok Başına Birden Çok Stil Sayfası

Bloklar ve tema geliştiriciler, her bloğa birden çok stil sayfası kaydedebilir ve gerektiğinde diğer bloklardan stiller yükleyebilir. Bu, sayfa içeriğine bağlı olarak stil sayfalarının yüklenmesini sağlar ve temaların her sayfaya büyük stil sayfaları yüklemesini önler.

Ari Stathopoulos'a göre:

Bloklar artık birden fazla stil sayfası kaydedebilecek ve gerektiğinde diğer bloklardan stil yükleyebilecek. Temalar, herhangi bir yere zorla yüklenen monolitik stil sayfaları yerine blok bazında stiller ekleyebilecek. Bu, stil sayfalarının yüklenmesinin sayfa ve düzen içeriğine göre optimize edildiği blok temalar üzerinde daha büyük bir etkiye sahiptir, ancak klasik temalar tarafından da kullanılabilir.

Geliştiriciler için Ek Özellikler

Şimdiye kadar tartışılan birçok özellik ve UI geliştirmesine ek olarak, WordPress 5.9 ayrıca geliştiriciler için çeşitli özellikler sunar.

Blokları Kilitlemek İçin Yeni Bir Nitelik

Blok geliştiricileri artık blok ayarlarına bir lock özelliği ekleyerek kullanıcıların tek tek blokları taşımasını veya silmesini önleyebilir:

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

Bu özellik etkinleştirildiğinde, kullanıcılar blok içeriğini düzenleyebilir, ancak bloğu sayfada hareket ettiremez veya düzenleyici tuvalinden kaldıramaz. Aşağıdaki resim, standart bir araç çubuğu kontrolleri grubuna sahip özel bir bloğu göstermektedir:

Yukarıdaki kodda görüldüğü gibi, lock niteliğinin tanımlanması, blok taşıyıcıları ve Blok araç çubuğundan Taşı ve Kaldır kontrollerini gizler. Aşağıdaki resim, ekrandaki nihai sonucu göstermektedir:

Ayrıca bir blok deseninde belirli bir bloğu kilitleyebilirsiniz. Bir örnek için ayrıca WordPress 5.9'daki Kilitleme Bloklarına bakın.

Global Ayarlar ve Stillere Erişmek için Yeni API

WordPress 5.9, theme.json'dan veri okumak için yeni bir PHP genel API'si sunar.

Theme.json'dan Ayarları ve Stilleri Okuma

theme.json'da belirtilen settings ve styles bölümlerinden verileri okumak için iki yeni işlev vardır:

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path , belirtilen ayara giden yolu listeleyen bir dizidir.
• $context , bu veriler için bağlamı ayarlayan bir dizidir. Geliştiriciler belirli bir blok ayarları bölümünden okuyabilir - örneğin, array( 'block_name' => 'core/paragraph' ) . base olarak ayarlanan orygin anahtarı, kullanıcı tarafından kaydedilen özel verilerin yok sayılmasına izin verir.

Aşağıdaki örnek kod, contentSize ayar değerini döndürür. Yirmi Yirmi 650px olacaktır:

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

Bir bağlam ayarlayarak belirli bloklar için stiller alabilirsiniz. Aşağıdaki kod, core/button bloğu için sınır yarıçap değerinin nasıl alınacağını gösterir:

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

Yukarıdaki işlev, varsayılan ayarları, tema ayarlarını ve kullanıcı verilerini göz önünde bulundurarak gerekli özellik değerini döndürür. Kullanıcı Global Stiller arayüzünde düğme kenarlığı yarıçapını yapılandırırsa özel değer sağlanacaktır.

Kullanıcı verilerini yok saymak için aşağıdaki kodu kullanırsınız:

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

Oluşturulan Stil Sayfasını Alma

WordPress 5.9 ayrıca varsayılan, tema ve özel stillerden elde edilen stil sayfasını almak için yeni bir işlev sunar:

 wp_get_global_stylesheet( $types = array() );

$types , oluşturulacak stillerin bir listesidir.

Genel ayarlara ve stillere erişmek için Yeni API'de yeni API hakkında daha fazla bilgi edinebilirsiniz.

Geliştiriciler için Daha Fazla Özellik

Bilmek isteyebileceğiniz geliştiriciler için ek WordPress 5.9 değişiklikleri şunları içerir:

• WordPress 5.9'da tema oluşturmanın yeni bir yolu olan temaları engelleyin
• Ayarlar, Stiller ve theme.json için güncellemeler
• WordPress 5.9'da tema odaklı değişiklikler ve filtreler
• WordPress 5.9'da Yeni Yetenek Sorguları
• WordPress 5.9'daki Çeşitli Çekirdek değişiklikleri
• WordPress 5.9'daki çeşitli blok düzenleyici değişiklikleri
• İç Blok Alanları üzerinde daha fazla kontrol sahibi olun (bir blok geliştirici olarak)

WordPress 5.9 için nihai rehberiniz: UI geliştirmelerinden global stillere (ve daha fazlasına!) Tweetlemek için tıklayın

Özet

Bu makaleyi WordPress pazar payı hakkında kısa bir notla tamamlayacağız. WordPress şu anda içerik yönetim sistemi bilinen tüm web sitelerinin %65'inden fazlasına güç veriyor ve tüm web sitelerinin %43'ünün kuzeyinde yer alıyor.

Bu rakamlar, özellikle Shopify gibi %5'ten daha az pazar payına sahip en yakın rakiplerle karşılaştırıldığında etkileyici.

Ve bu aynı zamanda WP CMS'nin gelişimini göz ardı edemeyeceğiniz anlamına gelir. WordPress'in her yeni sürümü yeni özellikler, arayüz geliştirmeleri, performans iyileştirmeleri getiriyor ve WordPress 5.9 bir istisna değil. Yeni özellikleri test etmek için ihtiyacınız olan tek şey, yeni Twenty Twenty-Two varsayılan teması gibi bir blok temadır ve kullanıma hazır olacaksınız.

Artık sana! Temaları ve FSE'yi engellemek için geçiş yapmaya hazır mısınız? WordPress 5.9 ile gelen favori değişiklikleriniz neler?