WordPress 6.2'deki Yenilikler: Gözatma Modu, Stil Kitabı, İyileştirilmiş Gezinme Menüleri, Yeni API'ler ve Çok Daha Fazlası

WordPress 6.2'nin 28 Mart 2023'te piyasaya sürülmesi planlandı ve 2023'ün ilk sürümüyle nelerin geleceğini keşfetmemizin zamanı geldi.

WordPress 6.2 ile uzun vadeli Gutenberg geliştirme yol haritasının 2. Aşamasının son aşamasına giriyoruz ve blok düzenleyici resmi olarak beta aşamasından çıkıyor.

Bu sürüm, esas olarak arayüzü iyileştirmeye ve düzenleme deneyimini kolaylaştırmaya odaklanmaktadır.

Şablonlar ve şablon parçaları arasında gezinmeye yönelik yeni bir yaklaşımın yanı sıra widget'ları blok temalarına aktarma yeteneği, yeni bir dikkat dağıtıcı olmayan yazma modu, ölçeklendirilmiş bir blok ayarları deneyimi ve mevcut bloklarda tonlarca büyük ve küçük iyileştirme sunuldu. , performans ve kullanılabilirlik.

Ancak işlevsellik ve kullanılabilirlik açısından öne çıkan bir şey varsa, o da Gezinme bloğudur. İlk piyasaya sunulduğundan beri Gezinme menüsü, zaman içinde düzenleme sürecini önemli ölçüde kolaylaştıran birkaç yinelemeden geçti. WordPress 6.2 ile geliştirme devam ediyor ve bu makalede size artık bir gezinme menüsünü ne kadar kolay yönetebileceğinizi göstereceğiz.

Geliştirilmiş Düzenleme Deneyimi

WordPress 6.2, tüm site yapısının merkeze yerleştirilmesiyle gelişmiş bir düzenleme deneyimi sunar. Artık gezinme menülerini daha kolay yönetebilir, stil değişikliklerini tek bir bloktan Global Stillere aktarabilir ve renklendirilmiş şablon parçaları ve yeniden kullanılabilir bloklarla şablonlar ve şablon parçaları arasında zahmetsizce gezinebilirsiniz.

Ama çok daha fazlası var. Editörün arayüzüne yapılan ana eklemeleri ve değişiklikleri ayrıntılı olarak inceleyelim.

Yenilenmiş Site Düzenleyici Arayüzü ve Gözatma Modu

WordPress 6.2 ile, editör arayüzünde yapılan çeşitli iyileştirmeler esas alınır. İlk ve en ilginç güncelleme, Site Düzenleyici arayüzünü etkiler. Yeni Gözatma Modu sayesinde, şablonlar ve şablon bölümleri arasında gezinmek artık daha kolay.

Yeni arayüz ayrıca, menü başlığının sağında bulunan artı (+) simgesine tıklayarak doğrudan editörün kenar çubuğundan yeni bir şablon veya şablon parçası eklemenize olanak tanır.

Wp Core ve Documentation yazarı Ryan Welcher'e göre, "[T]bu özellik üzerindeki çalışmaları devam ediyor ve yeni Gutenberg sürümleri çıktıkça gelişmeye devam edecek."

İş akışı artık daha sorunsuz ve sorunsuz. Geçerli şablonu/şablon bölümünü düzenlemeye başlamak için sol menüdeki Düzenle düğmesine veya sayfanın ortasındaki şablon önizlemesine tıklamanız yeterlidir.

Dikkat Dağıtma Modu

WordPress 6.2, tuvaldeki dağınıklığı ortadan kaldıran ve sayfanın içeriğine odaklanmanıza izin veren yeni bir Dikkat Dağıtmasız düzenleme modu sunar.

Bu özelliği, sağ üst köşedeki üç nokta (üç nokta) simgesine tıklayarak açılan seçenekler panelinde etkinleştirebilirsiniz.

Dikkat Dağıtma Serbest modu etkinleştirildiğinde, gereksiz kenar çubukları ve araç çubukları ekranda yalnızca üzerinde çalıştığınız içeriği bırakarak kaybolur.

Sekmeli Blok Denetçisi

WordPress 6.2, ayar kontrollerini ayrı panellere bölerek kenar çubuğuna düzen getirmeyi amaçlayan yeni bir Blok Denetçisi sunar.

Stil ayarlarını diğer blok ayarlarından ayırmak için blok ayarları artık sekmelere ayrılmıştır.

Varsa, Block Inspector sekmeleri aşağıdaki sırayla görüntülenecektir:

• Liste Görünümü: Gezinme bloğundaki alt menüler ve bağlantılar gibi bir bloğun alt öğelerini yönetmek için kontroller içerir
• Ayarlar: Bloğun görünümüyle ilgili olmayan yapılandırma ayarlarını içerir
• Görünüm: Tipografi ve renkler gibi geçerli bloğun stiliyle özel olarak ilgili ayarları içerir

Bu, özellikle Grup Bloğu veya Gezinme Bloğu gibi birçok yapılandırma seçeneğine sahip gelişmiş bloklar için arayüzün kullanılabilirliğinde dikkate değer bir gelişmedir.

Dikkat:

• Yeni Denetçi, yalnızca görüntülenecek öğeler içerdiğinde bir sekme gösterir.
• Ayarlar sekmesi yalnızca Gelişmiş panelini içeriyorsa Görünüm sekmesine taşınır.
• Block Inspector'ın yalnızca bir sekmesi varsa, WordPress 6.2'den önceki gibi görüntülenir.

Yeni Block Inspector'ı daha yakından görmek için geliştirici notuna göz atın.

Renklendirilmiş Şablon Parçaları ve Yeniden Kullanılabilir Bloklar

Bunları gruplardan ve bloklardan daha kolay ayırt etmek için, Şablon Parçaları ve Yeniden kullanılabilir bloklar artık Liste Görünümü, Blok Yerleştirici, Blok Araç Çubuğu ve düzenleyici tuvalinde farklı bir renkle vurgulanıyor.

Bu, aşağıdaki resimde gösterildiği gibi hem Site Düzenleyicide hem de yayın düzenleyicide gerçekleşir.

Yenilenmiş Bir Blok Yerleştirici

Blok Yerleştirici, genel düzenleme deneyimini önemli ölçüde iyileştiren çeşitli değişikliklerden etkilenir.

İlk olarak, yeni arayüz tasarımı kalıp ve medya kategorileri arasında gezinmeyi geliştirir ve kalıplar ve medya öğeleri için daha büyük önizlemeler sağlar.

Sitede medya bulunduğunda, içeriğe medya eklemeyi basitleştirmek için Blok Yerleştirici'de bir Medya sekmesi görünür. Görüntüleri/medyayı sürükleyip bırakabilir veya içeriğe eklemek için medyanıza tıklayabilirsiniz.

Blok Yerleştiricideki Medya sekmesi” width=”1296″ height=”1420″ class=”size-full wp-image-148375″> Blok Yerleştiricideki yeni Medya sekmesi

Sekmenin içinde, Ortam Kitaplığını Aç düğmesi sizi WordPress Ortam Kitaplığı'na götürür.

Blok Yerleştiricide Openverse Entegrasyonu

Openverse, herkesin kullanması için açık lisanslı veya kamu malı çalışmaları paylaşmayı amaçlayan bir araçtır. Şimdi, WordPress 6.2 ile Openverse, Blok Yerleştiriciye entegre edilmiştir.

Bu yeni özelliğe erişmek için Blok Yerleştirici'nin Medya sekmesine tıklayın. Bu, bir arama alanı ve doğrudan Openverse deposundan alınan görüntü önizlemeleri içeren bir paneli gösterir.

Teknik ayrıntılar için bkz. Openverse entegrasyonu çekme isteği.

Widget'ları Blok Temalarına Taşıyın

WordPress 6.2'den başlayarak, klasik bir tema kullanan bir site çalıştıran ve blok temaya geçmeye karar veren kullanıcılar, mevcut pencere öğesi alanlarını yeni temaya geçirerek bunları şablon bölümlerine dönüştürebilir.

Nasıl çalıştığını öğrenelim.

İlk olarak, klasik bir temada bir pencere öğesi alanı oluşturun. Örneğin, Twenty-Eleven'ı etkinleştirebilir ve Footer Area One'a bir takvim ekleyebilirsiniz.

Şimdi temayı Yirmi Yirmi Üç olarak değiştirin. Site Editörünü açın, düzenlemek için bir şablon seçin ve bir şablon parçası ekleyin.

Blok kenar çubuğunda, Widget Alanını İçe Aktar açılır menüsünden içe aktarılacak widget alanını seçin.

Ve bu kadar. Artık önceki widget alanınızı diğer herhangi bir şablon parçası gibi yönetebilirsiniz.

Belge Ayrıntıları ve Liste Görünümü Birleşik

WordPress 6.2'den önce, Düzenleyici araç çubuğunda Ayrıntılar ve Liste Görünümü için iki ayrı düğme vardı. Aşağıdaki görüntüde, WordPress 6.1'de sözcük sayısı, karakter sayısı, okuma süresi ve başlık, paragraf ve blok sayısı ile Belge Anahattı dahil olmak üzere belge ayrıntıları açılır penceresini görebilirsiniz.

WordPress 6.2'den başlayarak, Liste Görünümü ve Ayrıntılar, iki sekmeye ayrılmış tek bir Belgeye Genel Bakış paneline taşınmıştır: Liste Görünümü ve Ana Hat .

Bu değişiklik, belgeyi yönetmek için daha kolay bir yol sağlamalıdır.

Genişletilmiş Blok Yetenekleri

WordPress 6.2 ile birkaç temel blok türünün yetenekleri genişletildi. Bu özellikle, düzenleme deneyimindeki çeşitli değişikliklerden ve iyileştirmelerden etkilenen Gezinme bloğu için geçerlidir.

Ana değişikliklere ayrıntılı olarak bir göz atalım.

Gezinme Bloğu için Liste Tabanlı Düzenleme

WordPress 6.2'nin piyasaya sürülmesiyle, Gezinme Bloğu öğelerinin düzenini blok ayarları kenar çubuğundaki bir liste görünümünden değiştirmek mümkündür.

Menü öğesine tıklamak sizi, etiket, URL, açıklama, bağlantı başlığı ve bağlantı rel dahil olmak üzere bağlantı ayrıntılarını düzenleyebileceğiniz seçili Sayfa Bağlantısının ayarlar kenar çubuğuna götürür.

Bu değişiklik, gezinme menülerinin düzenleme deneyimini büyük ölçüde basitleştirerek menünüze öğeler eklemenize, düzenlemenize ve silmenize ve hatta yeni Gezinme menüleri oluşturmanıza olanak tanır.

Gezinmeyi Kilitle

Gezinme bloğundaki bir diğer gelişme, menü düzenlemeyi daha ayrıntılı bir şekilde kilitleme yeteneğidir. Artık düzenlemeyi kısıtlayabilir , Hareketi devre dışı bırakabilir ve Kaldırmayı önleyebilirsiniz , oysa WordPress 6.1'de yalnızca Düzenlemeyi kısıtla ve Hareketi devre dışı bırak seçenekleri mevcuttu.

Ayrıca seçilen seçenekler iç bloklara da (bağlantılar ve alt menüler) uygulanabilir.

Blok Araç Çubuğundan Resim Yazısı Ekleme/Kaldırma

Yeni bir Altyazı Ekle/Kaldır düğmesi, kullanıcıların birkaç blok (Ses, Video, Görüntü) için blok araç çubuğundan altyazıları kontrol etmesine olanak tanır.

Zaten bir başlık ayarladıysanız, görseli içeriğinize eklediğinizde otomatik olarak dahil edilecektir.

Sayfa Listesi Bloğunda İyileştirmeler

İki iyileştirme, Sayfa Listesi bloğunu içerir.

İlk olarak, Sayfa Listesi bloğu artık Liste Görünümü panelindeki sayfaların listesini gösterecek şekilde genişletilebilir.

Ek olarak, blok kenar çubuğundaki yeni bir seçenek, artık bir başlangıç ​​sayfası ayarlamanıza ve blokta yalnızca ondan inen sayfaları görüntülemenize olanak tanır.

Yeni Grup Bloğu Yer Tutucusu

Artık Grup Bloğu yer tutucu, blok sayfa içeriğine eklendiğinde bir varyasyon seçici görüntüler.

Yapışkan Konumlandırma Bloğu Desteği

WordPress 6.2, yapışkan konumlandırmadan başlayarak yeni bir konum bloğu destek özelliği sunar.

Bu yeni özellik şu anda yalnızca varsayılan olarak etkinleştirildiği Grup engellemeleri için geçerlidir.

Tema geliştiriciler, theme.json'daki appearanceTools özelliğini kullanarak temalarında yapışkan konumlandırmayı etkinleştirebilir. Görünüm araçları üzerinde daha ayrıntılı kontrol istiyorsanız settings.position.sticky prop'u true olarak da ayarlayabilirsiniz.

Müfettiş kontrolü kenar çubuğunun Konum panelinde yapışkan konumlandırmayı etkinleştirebilirsiniz.

Yapışkan konumlandırma açıkken, HTML etiketi bir is-position-sticky sınıfı alır ve karşılık gelen öğeye bazı CSS kuralları uygulanır:

 .wp-container-6 { top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px)); position: sticky; z-index: 10; }

Yapışkan konumlandırma yalnızca belgenin kökündeki Grup blokları için çalışır. Bu, kullanıcılar için kafa karışıklığını ve hataları önleyebilir, ancak şu anda yerleşik yapışkan konumlandırmayı biraz zor bulabilirsiniz (ve WordPress web sitenize yapışkan bir başlık eklemek için farklı yöntemleri kontrol etmek isteyebilirsiniz). Ancak geliştirici notuna göre,

… manuel testte geri bildirim, ek UI veya UX çalışması olmadan, kök olmayan bir bloğu yanlışlıkla yapışkan olarak ayarlarlarsa veya örneğin bir başlık şablonu parçasındaki bir bloğu yanlışlıkla yapışkan olarak ayarlarlarsa, yapışkan başlıklar oluşturmaya çalışan kullanıcılar için kafa karıştırıcı olabileceğini gösterdi. yapışkan. Karar, iç içe geçmiş bloklar için uygun bir çözümü keşfetmek üzere daha fazla zaman sağlamak için özelliği 6.2 için yalnızca kök bloklara ölçeklendirmekti.

Konumlandırma özelliği yalnızca bireysel bloklar için mevcuttur, bu nedenle onu Global Stiller'de bulamazsınız.

Blok Düzenleme Deneyiminde Ek İyileştirmeler

Düzenlemeyi engellemek için diğer bazı önemli yükseltmeler şunları içerir:

• Artık görüntüleri bir Görüntü bloğuyla değiştirmek için boş bir paragrafa sürükleyip bırakabilirsiniz.
• Tipografi kontrolleri paneller halinde gruplandırılmıştır. Bu, Stiller arayüzünü Ayarlar arayüzü ile daha tutarlı hale getirir ve artık kontrolleri blok ayarları arayüzünde olduğu gibi gösterip gizleyebildiğiniz için kullanılabilirliğini geliştirir.

  

• Başlık bloklarının harf aralığını doğrudan Global Styles arayüzünde değiştirmek artık mümkün.
• Artık Takvim bloğunun arka planını, bağlantısını ve metin rengini ayarlayabilirsiniz.
• Web sayfalarının yapısını daha iyi yansıtmak için iki yeni Başlık ve Altbilgi blok kalıbı kategorisi tanıtıldı.
• Artık [[ kısayolunu kullanarak herhangi bir bloktaki bağlantıları otomatik olarak tamamlamak mümkün. Bu değişiklikten önce, blokların __experimentalSlashInserter kullanarak bağlantı otomatik tamamlama desteğini açıkça beyan etmesi gerekiyordu.
• Yeni bir control + option + 1 – 6 klavye kısayolu, bir paragrafı başlığa dönüştürmenize olanak tanır.
• Sayfa Listesi bloğu artık yazı tipi ailesi, yazı tipi boyutu, görünüm, satır yüksekliği, harf aralığı, dekorasyon ve harf durumu dahil olmak üzere tüm tipografi seçeneklerini desteklemektedir.

  

  

Gelişmiş Tasarım Araçları

WordPress 6.2 ile sunulan yeni özelliklerin ve iyileştirmelerin çoğu, CMS'nin stil ve tasarım yeteneklerini geliştirir. 6.2 ile gelen tasarımla ilgili en ilginç özelliklerin listesi aşağıdadır; her birini daha ayrıntılı olarak ele alacağız.

Stil Kitabı

WordPress 6.2, kullanıcıların web sitelerinde kullanılabilecek herhangi bir bloğu, bu blokları bir şablona/şablon bölümüne eklemek zorunda kalmadan önizlemesine olanak tanıyan yeni bir Stil Kitabı özelliği sunar. Stil Kitabını, artık global stiller içindeki Stiller başlığında görünen Stil Kitabını Aç düğmesine (göz simgesi) tıklayarak başlatabilirsiniz.

Bu, kategoriye göre her çekirdek ve üçüncü taraf bloğunun önizlemesini gösteren bir arayüz açar.

Yeni Stil Kitabı arayüzü, tek bir merkezi konumda bulunan her blok stilinin ön izlemesini yaparak tasarım sürecini basitleştirir.

Teknik açıdan bakıldığında, yeni arayüz, bir iframe'deki her kayıtlı bloğun önizlemesini görüntülemek için @wordpress/edit-site eklenen yeni bir StyleBook bileşeni tarafından oluşturulur (ayrıca bkz. PR #45960).

Aynı arayüz ayrıca bireysel blokların önizlemelerini de sağlar. Örnek olarak, aşağıdaki resimde özelleştirilmiş bir takvim widget'ının önizlemesi gösterilmektedir.

Geliştiriciler, bir bloğun eklenmesini ve önizlenmesini iki şekilde gizleyebilir. Öncelikle, supports.inserter block.json dosyasında false olarak ayarlayabilirsiniz:

 { "supports": { "inserter": false } }

Blok önizlemesini gizlemenin başka bir yolu, Inspector Yardım Panelinde bloğun önizlemesini oluşturmak için kullanılan example özelliğinden kaçınmaktır (buradan daha fazlasını okuyun).

Küresel Stillerdeki Gölgeler

WordPress 6.2 ile artık Global Styles veya theme.json kullanarak bazı bloklara gölge eklemek ve bunları özelleştirmek mümkün (bu yazı itibariyle, gölge özelliği yalnızca Button bloğu için kullanılabilir).

Öncelikle bu özelliği destekleyen temalarda Global Styles arayüzünden gölge ekleyebilirsiniz.

Bunu çalışırken görmek için Twenty Twenty-Three temasını etkinleştirin, Styles > Blocks > Button bölümüne gidin ve Shadow düğmesine tıklayın.

Bir Gölge açılır penceresi, tema hazır ayarlarından bir gölge seçmenize olanak tanır.

Tema geliştiricileri ve ileri düzey kullanıcılar da theme.json kullanarak bloklara gölge ekleyebilir. Aşağıdaki tanım, Düğme bloklarına 4 piksellik siyah bir gölge ekler:

 "styles": { "blocks": { "core/button": { "shadow": "4px 4px #000000" } } },

Tema kullanıcılarına Stiller arayüzünden bir ön ayar seçme olanağı vermek için hazır ayarlar da tanımlayabilirsiniz:

 "settings": { "shadow": { "presets": [ { "shadow": "4px 4px #FF0000", "name": "Red", "slug": "red" }, { "shadow": "4px 4px #00FF00", "name": "Green", "slug": "green" }, { "shadow": "4px 4px #0000FF", "name": "Blue", "slug": "blue" } ] }, }

Tanımlandıktan sonra ön ayarlarınız blok Stilleri'ndeki Gölge panelinde görünür.

Ayrıca bir hazır ayarın değerini seçebilir ve bunu blok varsayılanları olarak kullanabilirsiniz:

 "styles": { "blocks": { "core/button": { "shadow": "var(--wp--preset--shadow--blue)" } } }

Yeni Minimum Yükseklik Boyut Kontrolü

WordPress 6.2'den başlayarak, Grup ve İçerik Gönderme blokları için blok ayarları kenar çubuğunun Boyutlar paneli artık, appearanceTools özelliğini kullanan temalarda varsayılan olarak etkinleştirilen yeni bir Minimum Yükseklik kontrolü sağlıyor.

Bu yeni kontrol, kullanıcıların Grup ve İçerik Yayınlama blokları için minimum bir yükseklik belirlemesine olanak tanır ve az içerikle bile sayfanın alt kısmındaki altbilgiyi oluşturmak için kullanılabilir.

Yeni dikey hizalama araçlarıyla birleştiğinde, iç öğelerin sayfanın üstünde/ortasında/altında dikey olarak hizalanmasına da olanak tanır.

Geliştiriciler, theme.json dosyasına minHeight ayarını ekleyerek temalara minimum yükseklik desteği ekleyebilirler:

 { "settings": { dimensions: "minHeight": true } }

Ayrıca appearanceTools özelliğini de kullanabilirsiniz:

 { "settings": { "appearanceTools": true } }

Yeni minHeight özelliği, doğrudan theme.json'da belirli bir değer ayarlamak için de kullanılabilir:

 { "styles": { "blocks": { "core/post-content": { "dimensions": { "minHeight": "80vh" } } } } }

Blok geliştiricileri, supports.dimensions.minHeight özelliğini kendi block.json dosyasına ekleyebilir ve değerini true olarak ayarlayabilir. Statik bloklar için CSS min-height kuralı bir satır içi stil olarak saklanırken, dinamik bloklar için get_block_wrapper_attributes tarafından döndürülen style özniteliğine dahil edilir.

Stiller Panelinde Özel CSS

Tema Özelleştirici ile karşılaştırıldığında Site Düzenleyicide eksik olan özelliklerden biri, özel CSS stilleri ekleyebilme özelliğiydi. WordPress 6.2 boşluğu dolduruyor ve artık Global Styles arayüzü, temanızı güncellediğinizde üzerine yazılmayacak özel CSS kuralları eklemek için bir metin alanı içeriyor.

Blok stili panelinden blok bazında veya Stiller araç çubuğundaki Daha Fazla Stil eylemleri düğmesine tıklayarak özel stiller ekleyebilirsiniz. Bu, bir Ek CSS öğesini gösteren bir açılır menü görüntüler.

Özel CSS'yi desteklemek için theme.json'a yeni bir styles.css özelliği eklenmiştir.

Özel CSS kuralları, theme.json'da ayarlanan tüm özel stilleri tamamen geçersiz kılabilir. Bunun olmasını istemiyorsanız, mevcut sıkma yöntemlerini kullanarak stil sayfasını dahil etmeyi düşünebilirsiniz.

Ayrıca, styles.blocks.block.css özelliğini kullanarak theme.json dosyasına blok başına özel CSS ekleyebilirsiniz:

 "styles": { "blocks": { "core/button": { "css": "background: #FF0000" } } }

İç içe geçmiş öğeler ve sözde seçiciler için de & kullanabilirsiniz.

Yeni özel CSS özelliğine daha yakından bakmak için, ayrıca genel stiller ve blok başına Özel CSS'ye bakın.

Bloklar Arasında Stilleri Kopyalama ve Yapıştırma

Bloğun araç çubuğunun Seçenekler menüsündeki yeni bir grup, artık stilleri Kopyala ve Stilleri Yapıştır için iki düğme görüntüler. Bu eklemeden önce sadece stilleri kopyalamak mümkündü, ancak stillerin nasıl yapıştırılacağı açık değildi.

Bu yeni özelliği denemek için başlık gibi yeni bir blok ekleyin. Stili değiştirin ve blok Seçenekleri menüsünden Stilleri kopyala'yı seçin.

Ardından başka bir blok seçin ve Stili yapıştır'ı seçin. Kopyalanan stiller otomatik olarak ikinci bloğa uygulanacaktır.

Bu özelliğin yalnızca desteklenen tarayıcılardaki güvenli (https) sitelerde kullanılabileceğini unutmayın. Ek ayrıntılar için çekme isteğine bakın.

Blok Değişikliklerini Küresel Olarak Uygula

WordPress 6.2 ayrıca, bireysel bloklar için Gelişmiş panelinin altında, blok stili değişikliklerinizi Global Stillere aktarmanıza ve bu değişiklikleri web sitesinin tamamına uygulamanıza izin veren bir Global olarak uygula düğmesi sunar.

Bu yeni özellik sayesinde, o türdeki tüm bloklara blok tipografisi, aralık, boyutlar ve renk stili uygulamak artık bir düğmeye basmak kadar kolay (ayrıca bu çekme isteğine bakın).

Aralık Görüntüleyicilerle Geliştirilmiş Tasarım Deneyimi

Boşluk Görselleştiricileri, bir bloğa uygulanan kenar boşluğu veya dolgu miktarını önizlemenize izin verir. WordPress 6.2 ile bu özellik, düzenleme deneyimini iyileştiren birkaç eklemeyle geliştirilmiştir.

İlk olarak, Aralık Görüntüleyicileri artık kenar boşluğu veya dolgu kontrolünün üzerine geldiğinizde görünür.

İkinci olarak, Boşluk Görüntüleyici artık boşluk ayarının üzerine geldiğinizde blok araç çubuğunu otomatik olarak gizler, böylece yeni kenar boşluğunu ve dolgu ayarlarını blok araç çubuğu karmaşasından uzak bir şekilde önizleyebilirsiniz.

Bunlar, çok sayıda çekirdek bloğu etkileyen küçük ama önemli değişikliklerdir.

Geliştiriciler için Değişiklikler

WordPress 6.2 ayrıca geliştiriciler için birçok yeni özellik getiriyor: yeni API'ler, hata düzeltmeleri, performans iyileştirmeleri ve çok daha fazlası. En çekici eklemelere geçelim.

Yeni Bir HTML API'sı

WordPress 6.2, belirli HTML etiketlerini bulmanın ve PHP aracılığıyla öznitelikleri eklemenin, kaldırmanın veya güncellemenin güvenli bir yolunu sağlayan HTML5 özellikli uyumlu bir ayrıştırıcı olan HTML Etiket İşlemcisini sunar. HTML Etiket İşlemcisi, yeni bir HTML işleme API'sindeki ilk bileşendir.

Yeni API, genellikle düzenli ifadelerin kullanılmasını gerektiren önceden karmaşık görevleri gerçekleştirmeyi kolaylaştırır.

Aşağıdaki örnekte, alt özelliğini bir img etiketine ekliyoruz:

 $html = '<img src="/my-image.jpg" />'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag() ) { $p->set_attribute( 'alt', 'Hello WordPress 6.2' ); } echo $p->get_updated_html();

Bu kod aşağıdaki img etiketini üretecektir:

 <img alt="Hello WordPress 6.2" src="/my-image.jpg">

$p->next_tag() yöntemi, HTML'deki bir sonraki kullanılabilir etikete gider. Ayrıca, yukarıdaki örnekte gösterildiği gibi, belirli etiketleri bulmak için bir etiket adını, bir CSS sınıfını veya her ikisini de kabul eder.

HTML etiketlerini düzenlemek için önce hedef etiketi seçmelisiniz:

 $p->next_tag();

Hedef etiketi seçtikten sonra, çeşitli işlemleri gerçekleştirmek için API yöntemlerini kullanabilirsiniz:

• $p->get_tag()
• $p->set_attribute()
• $p->get_attribute()
• $p->remove_attribute()
• $p->add_class()
• $p->remove_class()

Bir stil özelliği ayarlayabilirsiniz:

 $html = '<a href="https://example.com">example.com</a>'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag( 'a' ) ) { $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' ); } echo $p->get_updated_html();

Ayrıca bir sınıf veya özellik ekleyebilir veya kaldırabilirsiniz. Aşağıdaki kodda, bir h1 etiketine özel bir sınıf ekliyoruz:

 $html = '<div><h1>Page Title</h1></div>'; $p = new WP_HTML_Tag_Processor( $html ); if( $p->next_tag( 'h1' ) ) { $p->add_class( 'title' ); } echo $p->get_updated_html();

Ardından $p->get_updated_html() yöntemini kullanarak güncellenmiş etiketi yankılayabilir veya geri gönderebilirsiniz.

Yeni HTML API'sine daha yakından bakmak için, WordPress Core işleyicisi Adam Zielinski'nin sunduğu bu etkileşimli PHP eğitimine göz atın.

Patterns API ve Yeni bir template_types Özelliği

Patterns API, WordPress geliştiricilerinin "yazılara, sayfalara, özel gönderi türlerine ve şablonlara kolayca eklenebilen önceden tasarlanmış içerik blokları oluşturmasına" olanak tanır.

WordPress 6.2 ile, Patterns API artık belirli bir blok deseninin hangi şablonlarda kullanılabileceğini belirtmenize izin veren yeni bir template_types özelliği içerir.

Jorge Costa, bunun yalnızca arka uç güncellemesi olduğunu ve şu anda karşılık gelen bir UX işlevi olmadığını vurguluyor. Ancak, bu özelliğin gelişmiş uygulamalarını WordPress 6.3 ile görmeyi bekleyebiliriz:

WordPress 6.3 için düşünürken ilk kullanım, kullanıcı bir şablon oluşturmaya başladığında, kullanıcıya bir şablon üzerinde anlamlı olan bazı kalıpları göstermektir. Kullanıcılar "boş" veya yedek şablon yerine bir kalıptan başlayabilir.

Teknik açıdan, register_block_pattern() işlevi, blok modelinin amaçlandığı şablonların adlarını içeren bir dizi dizi olan yeni bir template_types parametresini içerecek şekilde değiştirildi.

REST API, en az biri tanımlandıysa, bir blok modelinin şablon türlerini döndürmek için de değiştirildi.

React v18.0 ve Eşzamanlılık Modu

WordPress 6.2 ayrıca, şimdi 18.0 sürümüne güncellenen React kitaplığının yeni bir sürümünü de sunar. Yeni sürüm, yeni API'ler, özellikler, iyileştirmeler ve hata düzeltmeleri ile birlikte gelir. React v18.0 ile gelen ana özelliklerden biri, "React'in kullanıcı arabiriminizin birden çok sürümünü aynı anda hazırlamasını sağlayan yeni bir sahne arkası mekanizması" olan eşzamanlılık modunun tanıtılmasıdır.

React'teki Eş Zamanlı Modun ana özelliklerinden biri kesintiye uğramamasıdır:

React, bir işleme kesintiye uğrasa bile kullanıcı arayüzünün tutarlı görüneceğini garanti eder. Bunu yapmak için, ağacın tamamı değerlendirildikten sonra sonuna kadar DOM mutasyonlarını gerçekleştirmeyi bekler. Bu yetenek sayesinde React, ana iş parçacığını engellemeden arka planda yeni ekranlar hazırlayabilir. Bu, kullanıcı arayüzünün büyük bir işleme görevinin ortasında olsa bile kullanıcı girişine anında yanıt verebileceği ve akıcı bir kullanıcı deneyimi yaratabileceği anlamına gelir.

Ana fayda, kullanıcı arayüzünün arka planda çalışmaya devam eden işle uyumlu olarak kullanıcı girişine hemen yanıt vermesidir.

Ancak eşzamanlılık, geliştiricilerin bilmesi gereken potansiyel tehlikeleri de beraberinde getirir. React in WordPress 6.2'deki Eşzamanlı Mod hakkında daha ayrıntılı bir genel bakış için geliştirme notunda verilen örneklere göz atın.

Geliştiriciler İçin Ek Değişiklikler

Geliştiricilerin dikkat etmesi gereken diğer önemli değişiklikler arasında şunlar yer alır:

• WordPress 6.2, düzenleyici ekranda işlenmeden önce blok ayarlarını filtrelemek için kullanılabilecek yeni bir JavaScript filtresi sunar. Yeni blockEditor.useSetting.before filtresi ayrıca geliştiricilerin blok konumu, mevcut kullanıcı rolü, komşu bloklar ve daha fazlasına göre ayarları değiştirmesine olanak tanır. Ek bilgi ve kullanım örnekleri için bkz. WordPress 6.2'deki herhangi bir blok için ayarları özelleştirme.
• ServerSideRender bileşenindeki blok destekleriyle ilgili öznitelikleri ve stilleri hariç tutmak için yeni bir skipBlockSupportAttributes prop kullanıma sunulmuştur.
• Yeni bir theme.json API'si artık theme.json'daki mevcut temel blok varyasyonlarının stilini belirlemeye izin veriyor.
• Google Yazı Tipleri artık yerel olarak dahil edilmiştir ve Yirmi Oniki'den Yirmi Onyedi'ye kadar paket temalardaki Google adreslerinden getirilmemektedir.

Ama hepsi bu kadar değil. WordPress 6.2, kısa olması adına burada bahsetmediğimiz birçok özellik, iyileştirme ve hata düzeltmesi sunar. Daha kapsamlı bir genel bakış için WordPress 6.2 Saha Kılavuzuna bakın.

Özet

WordPress 6.2, bizi Özelleştirme adlı Gutenberg projesinin 2. Aşamasının sonuna yaklaştırıyor. Ancak, Matias Ventura'nın işaret ettiği gibi, bu, özelleştirme çalışmalarının tamamlandığı ve gelecek sürümlerde olacağı anlamına gelmiyor. Her zaman olduğu gibi, topluluktan gelen geri bildirimlere dayanarak düzenleyicide ek iyileştirmeler bekleyebiliriz.

Bu gönderide, WordPress 6.2 ile gelen bazı önemli özellikleri, iyileştirmeleri ve hata düzeltmelerini inceledik. Ancak 6.2'de çok daha fazlası var. Gutenberg eklentisinin çekirdeğe eklenen on sürümüyle (14.2'den 15.1'e) yeni bir Gözatma Modu, Sekmeli Blok Denetçisi, Blok Temalarını Engellemek için Widget'lar, yeni API'ler ve tonlarca geliştirme ve hata düzeltmesi göreceğiz. Erişilebilirlik ve uluslararasılaştırmada da iyileştirmeler yapılacak.

WordPress'i seviyorsanız ve yeni WordPress geliştirme becerileri edinmek veya CMS'yi test etmek ve katkıda bulunmak istiyorsanız, Kinsta'nın tamamen ücretsiz yerel WordPress geliştirme paketi olan DevKinsta'yı bir test sürüşü için aldığınızdan emin olun.

Şimdi size kalmış: Yeni sürümü geliştirme ortamınızda zaten test ettiniz mi? WordPress 6.2'de en çok hangi özellikleri beğeniyorsunuz? Aşağıdaki yorum bölümünde düşüncelerinizi paylaşın.