Gutenberg 12.7 Liste Görünümüne Çoklu Blok Seçimi Ekliyor ve Grup Bloklarına Marj Desteği Getiriyor

Yayınlanan: 2022-03-04

İki hafta daha geçti ve kitaplarda başka bir Gutenberg eklenti güncellemesi var. Bu sürüm, bir önceki kadar özellikli değil, ancak genel olarak sağlam hissediyor. Bir kırılma sorunu dışında, sürüm 12.7, sahip olunması gereken birkaç geliştirme içerir.

En son güncelleme, yeni bir stil motoru için bazı erken çalışmaları içeriyor. Bu, blok stillerini kaydetme ve oluşturmayı iyileştirmesi gereken daha uzun vadeli bir projedir.

Şablon ve site düzenleyicileri, örneğin bir şablonun kök düzeyinde olduğu gibi belirli koşullar altında hızlı yerleştiricideki blokların üzerinde kalıpları göstermelidir. Ancak, bunu eylemde göremedim. Yüklememi yenilemem gerekebilir.

Sütunlar bloğu ayrıca kenarlık genişliği, stil, renk ve yarıçap seçeneklerini de destekler. Bunun tüm bloklar için eninde sonunda olmasını dört gözle bekliyorum.

Liste Görünümünde Çoklu Seçim

Liste görünümü gönderi düzenleyicide açılır. Birden çok blok seçilir.
Liste görünümünde birden çok blok seçme.

Kullanıcılar artık Shift tuşu seçildiğinde liste görünümünde birden çok blok seçebilir. Anahtarı tuttuktan sonra, kullanıcılar diğerlerini eklemek veya kaldırmak için fareyi kullanabilir. Yukarı/aşağı ok tuşları, fareyi kullanmaya bir alternatiftir.

Geliştirme ayrıca kullanıcıların seçilen blok grubunu sürükleyip bırakmasına da olanak tanır.

Kırık Görüntüler

Kapsayıcısına uymayan, uzatılmış görüntüye sahip WordPress site düzenleyicisi.
Desenden gelen resim yanıt vermiyor.

Gardımı indirdim. WordPress ve Gutenberg'in geçmişteki temalara her zaman dahil ettiğim bu temel CSS çalışmalarının bazılarını ele alma konusunda rahat oldum. İşler çok iyi gidiyor gibiydi.

Gutenberg, sen ve ben hiçbir şeyi kırmadığınız bir yere giden tatlı bir çizgimiz vardı. Şimdi, ol' “kazasız sürümler” sayacını sıfırlamanın zamanı geldi.

Önceden, varsayılan blok kitaplığı stil sayfası, görüntüler için temel duyarlı stiller sağlıyordu. Bu CSS artık yalnızca bir sınıfta wp-image- içeriyorsa <img> etiketlerini hedefliyor. Bu, özellikle bazı blok desenlerdeki görüntüler için sorunludur. Durum, diğer görüntü örnekleri için aynı olabilir.

Önceki seçici, üçüncü taraf eklentilerdeki aşırı geniş ve bozuk görüntülerdi.

Tema yazarlarının en iyi hareket tarzı, resimler için aşağıdaki CSS'yi eklemesidir:

 img { max-width: 100%; height: auto; }

Grup Blok Marjları

Ortada bir Grup bloğu bulunan WordPress içerik düzenleyici. Üstünde çok fazla beyaz alan gösteriyor.
Grup bloğuna fazladan üst kenar boşluğu ekleme.

Kenar boşluklarını özelleştirme, "web tasarımı" terimiyle neredeyse eş anlamlıdır. Grup bloğu - amiral gemisi konteyneri - şimdiye kadar marj kontrolü için destekten yoksundu. Bazıları bu sınırlamayı bir Aralayıcı kullanarak aşmıştır, ancak bu yalnızca bloklar arasındaki boşluğu artırır.

Çoğu sorun, marjları azaltmakla ilgiliydi. Tema tasarımcılarının genellikle geçici çözümler kullanması gerekiyordu, Nick Diego'nun bilette bahsettiği bir sorun:

Tema geliştiricileri (kendim dahil), bloklardaki marjları sıfırlamak veya değiştirmek için “sihirli sınıflara” başvuruyor. Temaların Grup marjı desteğine dahil olmasına izin vermek, daha fazla esneklik sağlayacak ve temanın stil sayfasındaki özel CSS/sınıflara olan bağımlılığı azaltacaktır.

Paragraflar da dahil olmak üzere diğer birçok blok için kenar boşluğu desteği hala eksik. Kullanıcılar bunları her zaman bir Grup içine sarabilir ve şimdilik değiştirebilir.

Blok Dönüşümleri Sınıfları Koru

Düzenleyicide, kendisine bir sınıf aracılığıyla uygulanan özel bir stile sahip paragraf bloğu. Dönüştürme açılır menüsü, seçilen Başlık bloğu ile açılır.
Bir bloğu dönüştürürken özel blok stili sınıfı korunur.

İki hafta önce yayınlanan Gutenberg 12.6, kullanıcıların bir bloktan diğerine geçiş yapmasına izin veren bir özellik olan blok dönüşümlerini geliştirmek için çok çalışma gördü. Önceki güncellemedeki birincil iyileştirmelerden biri, yazı tipi boyutu ve renk seçeneklerinin korunmasını içeriyordu.

Sürüm 12.7, karışıma özel CSS sınıfları ekler. Bu, manuel olarak eklenen kullanıcıları ve özel blok stilleri mekanizması tarafından eklenenleri içerir.

Özel blok stili sınıflarını korumanın iyi tarafı, yeni bloğun destekleniyorsa seçilen stili korumasıdır. Dezavantajı, değilse, önemsiz bir sınıf haline gelmesidir.

Metin tabanlı blokları dönüştürerek korunmasını görmek istediğim bazı eksik seçenekler var. Özellikle metin hizalamasını aynı tutmak iş akışıma yardımcı olur.

Temalar Dizinden Kalıpları Kaydedebilir

İki sütunlu 404 sayfa tasarımına sahip blok düzenleyici.
Düzenleyiciye kayıtlı bir desen ekleme.

Gutenberg 12.7, tema yazarlarının kullanıcıları için WordPress.org kalıp dizininden kalıp yüklemelerine olanak tanır. Eklenenler, yerleştiricide kendi kategorilerinde görünecektir.

Şu anda seçili desenleri vurgulamanın bir yöntemi yoktur ve bunlar yalnızca kayıtlı oldukları sıraya göre görünecektir. Ne yazık ki, WordPress.org'daki öne çıkan desenler, tema tarafından seçilmemiş olsalar bile listede daha yüksek görünüyor.

Bu sağlam bir ilk yinelemedir. Bunu şimdi almak, tema yazarlarının geri bildirim sağlamasına ve katkıda bulunanların temel üzerine inşa etmelerine olanak tanıyacaktır.

theme.json nasıl yapılır kılavuzu, bu kalıpların kaydedilmesi için yeni belgeler içerir.

Hizalama Sarmalayıcıları Kaldırıldı

Blok fanboy olduğum sır değil. Ancak, neredeyse beni sistemden atmak istememe neden olan uzun süredir devam eden bir sorun var. Aslında, büyük ölçüde bu sorun yüzünden geçen yıl tamamen ücretsiz bir blok teması geliştirmeyi bıraktım.

Gutenberg 12.7, en azından düzen özelliğini destekleyen temalar için, düzenleyicideki geniş ve tam genişlikli bloklar için fazladan <div> sarmalayıcısını kaldırır. Bu sarma elemanı, daha önce arka ve ön uç tasarımları arasında bir çatışma yarattı. Bazı durumlarda, tema yazarları onları tutarlı bir şekilde şekillendiremedi.

Örneğin, bir tema yazarı bir kardeş bloğa (bir diğerini takip eden) fazladan boşluk vermek isterse, onu editörde CSS ile hedeflemek imkansızdı. Ek sarmalayıcı, belge yapısında artık kardeş olmadıkları anlamına geliyordu.

WordPress 5.9'da tanıtılan daha yeni blockGap özelliği, boşlukla ilgili sorunları bir dereceye kadar hafifletti. Bazı tasarımların hala imkansız olduğunu bilmek, bozuk sisteme tahammül etmek için yeterliydi.

Bugün, tasarımcılar için yeni bir olasılıklar dünyasının başlangıcını işaret ediyor. Bu, geride kaldığını görmekten mutlu olduğum bir barikat. Çoğunlukla, sadece birkaç eski fikri tekrar gözden geçirmek ve uygulamak istiyorum.