G2 Bileşenleri, WordPress Bileşenlerinin Sıfırdan Yeniden Tasarlanması

Bazı şeyleri güncelleyin.

Automattic'te Baş Tasarımcı olan Jon Quach'ın G2 Components projesini Gutenberg'e ve nihayetinde WordPress'e entegre etmek için yol haritasında ortaya koyduğu hedef buydu. Proje, bileşen sisteminin "sıfırdan" elden geçirilmesi olan blok düzenleyiciyi oluşturan parçaların yeniden tasavvur edilmesidir. Her şeyi, hatta birçok şeyi bir kerede güncellemek, her şeyi bozma riskini taşır.

Quach, gönderide, "İdeal olarak, olması gereken, yalnızca bazı şeyleri çok kontrollü ve kasıtlı bir şekilde güncellemenizdir" diye yazdı. Geleneksel enerji fabrikası kapatılana kadar bir şehri bölüm bölüm güneş enerjisine dönüştürmeyi benzetti. Bir sonraki bölüme geçmeden önce bir parçayı dönüştürüyor, test ediyor, sorunları buluyor ve düzeltiyorsunuz.

G2 Bileşenlerini Gutenberg'e entegre etme planı budur.

Quach, "G2 Components, kullanıcı arayüzlerini ve kullanıcı deneyimlerini başkaları için daha iyi hale getirme fikrini somutlaştıran bir projedir" dedi. “Şu anda, Gutenberg ve WordPress bağlamı ve ortamlarında çalışmak üzere tasarlanmış bir Bileşen Sistemi olarak hayata geçiriliyor.”

Amaç, Gutenberg projesinin kullanıcı arayüzünü geliştirmek için kaynakları sağlamaktır. Bileşenler, kodu bir araya getirmeden daha yeni kullanıcı arayüzleri oluşturmayı kolaylaştırmalıdır. Quach, Bileşen Sisteminin tutarlılığının ve deneyimlerinin ölçeklenmesi ve WordPress platformu boyunca bir dalgalanma etkisine sahip olması gerektiğini söyledi. Bu aynı zamanda üçüncü taraf blok geliştiricilerine de uzanacak.

"Kod bileşenleri sadece başlangıç ​​noktasıdır" dedi. "Nihai hedefim, bunun kodu aşması, tasarımı etkilemesi ve yükseltmesi - insanların WordPress dünyasında uyumlu ve zengin özelliklere sahip UI deneyimleri oluşturmasını sağlayan ve güçlendiren birleşik bir Tasarım Sistemi yaratmak."

Quach, platformların benzer yaklaşımlardan yararlandığına inanıyor. Google'ın Materyal Tasarımı'nın Android platformunu yükselttiğini ve şirketin ürünleri arasında uyum getirdiğini belirtti.

Gutenberg ekibi, G2 Bileşenlerini projeye entegre etmeye başladı bile. Bu entegrasyon, WordPress bileşenlerini (@wordpress/components), çekirdek düzenleyici veya üçüncü taraf projelerindeki mevcut uygulamaları bozmaması gereken kontrollü bir şekilde değiştirir. Yeni bileşenler, hazır olduklarında değiştirilecektir. Quach, "Bir düğmeyi çevirmek gibi" dedi.

Aşağıdaki video, Quach'ın YouTube'da yayınladığı G2 Bileşenlerinin bir saatlik bir incelemesidir:

Güncellemeleri düzenli olarak G2 Components blogunda yayınlıyor. Bunların yanı sıra, projeyle ilgili tasarım düşüncesine daha derin dalışlar var. Ayrıca neredeyse her gün Twitch akışında projeden bahsediyor.

Bileşenler Nelerdir?

Bileşenler, düğmelerden geçişlere ve onay kutularına kadar her şeydir. Blok düzenleyicinin kullanıcı arayüzünü oluşturan standartlaştırılmış parçalardır. Hem çekirdek hem de üçüncü taraf geliştiricilerin, son kullanıcıların gördüğü ve etkileşimde bulunduğu şeyleri oluşturması için kullanılabilirler. Ancak, orijinal bileşen sisteminin nasıl oluşturulduğuyla ilgili bir sorun vardı.

Quach, "Mevcut bileşenler bir sistem düşünülerek değil, daha çok acil bir ihtiyacı karşılamak için inşa edildi" dedi. “Bu özel tasarım detayı çok önemli. Önce sistem yaklaşımı, yeni özelliklerin eklenmesini ve daha da önemlisi özelleştirmeyi daha kolay destekler!”

Yeni yaklaşım, WordPress için yerel bir tasarım sistemi oluşturmakla ilgilidir. Böyle bir sistem, herkesin bunun üzerine inşa etmesine ve yerel deneyimler yaratmasına izin verecektir.

Quach, buna arka uç teması perspektifinden bakmanın en kolay yollarından birinin olduğunu söyledi - Bileşen Sisteminde ayrıca bir tema alt sistemi var. “CSS'yi üstte katmanlar arası bir 'kaplama' olarak yazmanın geleneksel yöntemi yerine, UI estetiği, WordPress'in wp-config.php dosyasındaki tanımlarla nasıl yapılandırılabileceğine benzer şekilde, yapılandırma değerleri aracılığıyla ayarlanabilir” dedi. “Bu değerler, stillerin doğru yerde ve doğru zamanda doğru şekilde yüklenmesine izin vererek, bu değerler doğrudan Stil sistemine girdiği için önemlidir. Hepsi mevcut ortamın stillerini etkilemeden ve daha da önemlisi mevcut ortamın stillerinden etkilenmeden.”

Bileşen sisteminin neden sıfırdan yeniden inşa edilmesi gerektiğine ilişkin soruma yanıt veriyordu. Buradaki fikir, bir WordPress temasının stil sayfasının varlığının yalnızca yüklenerek bileşenleri bozmadığından emin olmak gibi, WordPress yöneticisi gibi bir ortamda "sadece çalışan" bileşenlere sahip olmaktır.

"Girdileri, Düğmeleri, Modalları, Açılanları ve diğerlerini neden yeniden düşünün, yeniden oluşturun ve geliştirin?" karşılık olarak Quach'a karşı çıktı. "Böylece geliştiricinin yapmasına gerek kalmaz."

Bu Geliştiriciler İçin Ne Anlama Geliyor?

Geriye dönük uyumluluğa saygı duymak, Quach'ın G2 Components projesinin mimarisini tasarlarken inanılmaz derecede ciddiye aldığını söylediği bir şey. Bunun, önerdiği entegrasyon stratejisinin bir parçası olduğunu da söyledi.

“Bu projenin 'kullanıcı arayüzlerini ve kullanıcı deneyimlerini başkaları için daha iyi hale getirme fikrini içerdiğinden' bahsetmiştim” dedi. "Geriye dönük uyumluluk ve üçüncü taraf geçişinin desteklenmesi kesinlikle kullanıcı deneyimi kategorisine giriyor."

Gutenberg ekibi yeni bileşenleri entegre etmeye devam ederken, geliştiricilerin halihazırda yaptıklarını değiştirmemelidir. Ancak, bazı yeni olasılıklar açabilir.

Quach, "Yeni Bileşen Sistemi, UI departmanına kesinlikle yardımcı olacak" dedi. “Özellikle heyecanlandığım bir alan, hızlı geliştirme/prototipleme alanı. Bu Bileşenler bağımsız birimler olduğundan, CodeSandbox gibi platformlara getirilebilirler ve onlar...sadece... çalışırlar. Çalışmaya başlayabilir ve prototipleri hızla oluşturup paylaşabilirsiniz (küçük ama güçlüden büyüğe ve sorumluya kadar).

Bileşen tasarımlarını test etmede ve hızlı geri bildirim için fikirler göstermede başarılı olduğunu söyledi. Ayrıca, CodeSandbox'ta karmaşık bileşenler oluşturarak ve bunları Bileşen Sistemine geri getirerek ters yönden çalıştı.

“Bir tasarımcı ve ön uç geliştirici olarak, bu 'mikro yapı' iş akışının ne kadar verimli, etkili ve yaratıcı bir şekilde özgürleştirici olduğunu vurgulayamam” dedi. “Başkalarının da deneyimlemesi için heyecanlı olduğum bir şey.”