EditorPlus WordPress Eklentisi ile Kontrol Bloğu Tasarımı

Geçen hafta, Gutenberg Forms projesinin bir incelemesinde son düzenlemeleri yaparken, Münir Kamal blok düzenleyici için başka bir tür WordPress eklentisinin lansmanına hazırlanıyordu. Buna EditorPlus adı verildi ve bloklar için bir tasarım sistemi oluşturacaktı. Kamal ve ekibi sessizce 1.0 sürümüne son rötuşları yaptı ve eklentiyi birkaç gün sonra WordPress eklenti deposunda yayınladı.

Belirli tasarım sonuçları elde etmek için özel bloklar oluşturan diğer birçok eklentiden farklı olarak EditorPlus, kullanıcılara ellerinde bulunanlarla sayfalarını özelleştirme esnekliği sağlar. WordPress'in mevcut bloklarının her birine bir dizi tasarım seçeneği ekler. Ön uçta, anında yalnızca o sayfa için gerekli olan CSS'yi çıkararak hafif bir ayak izi bırakır.

Belki de şu anda bu eklentiyle ilgili en iyi şey, Gutenberg'de kalıcı bir yuva bulan tasarımla ilgili birçok özelliğin ve sonunda WordPress'in temelini oluşturmasıdır. Gutenberg ekibi fikirleri ödünç alabilir, yineleyebilir ve geliştirebilir. Gutenberg 8.3'te deneysel dolgu kontrol alanını zaten görmüştük. Geliştirme ekibinin yolda ek tasarım kontrolleri ile devam etmesi mantıklı olacaktır. Bu kontrollerin ilk olarak üçüncü taraf eklentilerde kullanıma sunulmasının iyi yanı, ekibin kullanıcıların bunlara nasıl tepki verdiğini görebilmesi ve herhangi bir şey taahhüt etmeden önce doğrudan Gutenberg'de çalışıp çalışmayacağına dair bir fikir edinebilmesidir.

EditorPlus, koda dokunmadan çok fazla tasarım özgürlüğüne sahip olmak isteyenler için hiçbir hediye sıkıntısı çekmez. Esasen eklenti, CSS bilmenize gerek olmayan bir CSS editörüdür. Blok seçenekleri ile son kullanıcılara en çok ihtiyaç duyulan CSS özellikleri için seçenekler sunar. Tasarımla uğraşmayı sevenler için bir oyun alanıdır ve siteyi ön uçta şişirmeden benzersiz düzenler oluşturacak kadar güçlüdür.

EditorPlus Nasıl Çalışır?

EditorPlus eklentisini etkinleştirdikten sonra, son kullanıcılar gönderi veya sayfa düzenleyicisine giderek seçenekleri hemen kullanmaya başlayabilir. Bir blok ekledikten sonra eklenti, blok seçenekleri panelinin altında aşağıdaki sekiz sekmeyi kullanıma sunar (her birinin önünde bir + sembolü bulunur):

• Sınır
• Kutu Gölge
• boyutlandırma
• Arka plan
• marj
• Dolgu malzemesi
• Sınır Yarıçapı
• Ekstralar

Bu sekmeler, şu anda üçüncü taraf eklenti blokları için değil, yalnızca temel WordPress blokları için görünecektir. Ekstralar sekmesinin yanı sıra, her sekme kendi CSS karşılıklarına karşılık gelir. Ekstralar sekmesi, kullanıcıların CSS'de blok sarma öğesinin display değerini değiştirmesine olanak tanıyan daha gelişmiş bir "Görüntüleme" seçeneği sunar. Bu seçenek en iyi şekilde daha ileri düzey kullanıcılara bırakılır. Ayrıca, vurgulu stilleriyle iyi çalışacak bir geçiş seçeneği sunar.

Blok seçenekleri sekmelerinin her biri ayrıca gizemli “R” ve “H” düğmelerine sahiptir. “R” düğmesi, kullanıcıların yanıt veren seçenekleri etkinleştirmesine olanak tanır; bu, masaüstü, tablet ve mobil ekranlara göre blok stillerini değiştirebilecekleri anlamına gelir. "H" düğmesi, kullanıcıların tasarımı fareyle üzerine gelme durumuna göre değiştirmesine olanak tanır.

Eklenti, küçük bir alana birçok seçenek sunar. Tüm yeni tasarım sekmeleri ilk başta biraz bunaltıcı gelebilir. Bununla birlikte, biraz kullanımla, biraz kas hafızası kazanmak ve özel düzenleri hızla patlatmak kolaydır.

Eklentinin seçeneklerinin her biri oldukça basittir. Ve olmadığında, blok düzenleyici aracılığıyla anında geri bildirim avantajından yararlanırsınız.

Temalarının belirli blokları nasıl şekillendirdiğine bağlı olarak, bazı kullanıcılar için sorun yaratabilecek birkaç alan vardır. Örneğin, Boyutlandırma sekmesi altındaki genişlik ayarları her zaman çalışmayabilir. Bazı temalar, bloklara maksimum genişlik katacak ve bu, boyutu ne olursa olsun toplam genişliği sınırlayacaktır. Eklenti aracılığıyla bunu geçersiz kılmak mümkündür, ancak Kamal bunu 1.0 sürümünde yapmamayı seçmiştir.

Kenar boşluklarına dikkat edin. Tema tasarımına bağlı olarak, içeriği yerleştirmek için sol ve sağ kenar boşluklarını kullanabilir. Yalnızca bir üst veya alt kenar boşluğu ayarlarken bile, eklenti sol ve sağ kenar boşlukları için otomatik olarak 0 verir. Bu, bazı temalar için içerik düzenini bozabilir.

Eklentiyle ilgili karşılaştığım bir sorun, aktif temamın stillerinin genel olarak eklentinin stillerini geçersiz kılmasıydı. Örneğin, varsayılan Twenty Twenty teması, özel dolgu eklemek için p.has-background hedefler. Bu nedenle, daha yüksek özgüllükle EditorPlus eklentisinin CSS'sini geçersiz kılar. Bu sorun bekleniyordu ve eklenti geliştiricisi, her tasarım seçeneği için "önemli" bir onay kutusu şeklinde bir çözüm ekledi. Bir kullanıcı bu kutuyu işaretlerse, çıktıdaki stil kuralına !important ekler, bu da onun tema stillerini geçersiz kılmasına izin verir. %100 güvenilir bir çözüm değildir. Kilometreniz, temaya bağlı olarak değişebilir, ancak kullanım durumlarının çoğunda çalışması gerekir.

Kullanıcı arayüzünde önemli bir onay kutusu fikrini sevmiyorum. Bir kullanıcının endişelenmesi gereken bir şey değil. Ancak, temaların ve eklentilerin hangi tasarım kurallarının diğerlerinden daha önemli olduğunu iletmenin gerçek bir yolunun olmadığı bir dünyanın gerçeğidir. Bunu kullanıcı arayüzünde istememesine rağmen, onu dahil etmek akıllıca bir karardı. Aksi takdirde, çok fazla temanın stil kuralı, eklentinin CSS'sinin üzerine yazacaktı.

Son düşünceler

1.0 sürümü için EditorPlus sağlam bir başlangıç ​​yapıyor. Testlerimde birkaç kusur buldum. Ortalama bir kullanıcı için herhangi bir sorun muhtemelen tema çakışmaları şeklinde ortaya çıkacaktır ve bu çatışmalar büyük olasılıkla CSS'lerinde yüksek özgüllük veya !important kullanan temalar etrafında olacaktır.

Kamal, eklentinin web sayfasında bu eklentiden daha fazlasının geleceğini açıkça belirtiyor. Hangi özelliklerin aklında olduğundan emin değilim, ama onları görmek için sabırsızlanıyorum. Başlık ve Paragraf gibi metinle ilgili bloklar için bir metin gölgesi seçeneği görmek istiyorum. Ayrıca, yalnızca sarma öğesi yerine Galeri bloğu içindeki resimler için bazı tasarım seçeneklerini görmek güzel olurdu.

EditorPlus'ı kullanıp kullanmayacağınız, ek tasarım kontrollerine ihtiyacınız olup olmadığına bağlıdır. EditorPlus, hafif bir sayfa oluşturucuya daha çok benzer bir şeye ihtiyaç duyan ancak yerel WordPress'e bağlı kalmak isteyen kişilere yöneliktir. Bu eklenti, mümkün olanın güzel bir vitrinidir ve bir gün WordPress'e girebilecek potansiyel tasarım seçeneklerinin iyi bir göstergesidir.