Gutenberg bloklarından oluşan bir Model Kitaplığı Oluşturma

Gutenberg, desen tabanlı web tasarımına doğru büyük bir değişimi temsil ediyor. Bu makalede, kendi esnek özel Gutenberg blokları kitaplığımızı oluştururken uyguladığımız yaklaşımları tartışacağım.

Arka fon

Gutenberg'in Aralık 2018 sürümü, başlangıcından bu yana WordPress'teki en büyük değişikliği temsil etti. Yeni blok tabanlı 'sürükle ve bırak' arayüzü, geliştiricilerin tema oluşturma şeklini, tasarımcıların siteleri bileşen parçalarına ayırmayı ve içerik editörlerinin içerik oluşturmayı yönetme ve planlama şeklini değiştiriyor.

Bu, kalıp tabanlı web sitesi tasarımına yönelik temel bir değişimdir; Mümkün olan en iyi kullanıcı deneyimini oluşturmak ve iş akışını kolaylaştırmak için bir web sitesinde tutarlı bir şekilde uygulanabilen yeniden kullanılabilir öğeler sistemi. Birçoğumuz zaten kalıplarla çalışırken, Gutenberg bu değişimi hızlandırılmış bir hızla ilerletiyor. WordPress, dünya çapındaki web sitelerinin üçte birine güç sağladığından, bu değişikliğin etkisi göz ardı edilemez.

Bu makale, geliştiriciler olarak bir kalıp kitaplığı planlamaya ve oluşturmaya başlarken karşılaştığımız bazı sorunları, Gutenberg'in doğasında bulunan sınırlamaların üstesinden nasıl geldiğimizi ve esnek özel bloklar sistemimizi oluşturmak için benimsediğimiz yaklaşımı vurgulamaktadır.

Hedefimiz

Özel WordPress web sitelerinin uzman oluşturucuları olarak Gutenberg, birleşik bir kalıp kitaplığı oluşturmamız için bize mükemmel bir fırsat verdi; birçok özel web sitesi yapımızda kullanım için uyarlanabilir bloklar seti.

Sadece bu yeni düzenleme deneyimini benimsemek istemedik, aynı zamanda sınırlı bir dizi çekirdek Gutenberg bloğuna veya hazır 3. taraf çözümlerden oluşan bir patchwork'e güvenmeden kendi sistemimizi kullanarak bir çözüm sunabilmek istedik.

Parmaklarımızın ucundaki kapsamlı blok seti aynı zamanda yeni Gutenberg web sitesi kurulumları için her bloğu sıfırdan oluşturmak zorunda olmadığımız anlamına geliyor. Bu, bir sitenin estetiğini iyileştirmek için daha fazla zaman harcamamıza ve bir web sitesini rakiplerinden ayırmaya yardımcı olan son rötuşları ve optimizasyonları eklememize olanak tanır.

Zorluklar

Tasarım esnekliği

Bize çeşitli ısmarlama temalar yaratma esnekliği verecek çeşitli desenlere sahip çok yönlü bir tasarım sistemine ihtiyacımız vardı.

Tema tasarımından ödün vermeden sınırlı ve gerçekçi sayıda deseni sürdürebilmek arasında iyi bir denge kurmak zor olacaktı.

Tema geliştirmede bir değişiklik

Gutenberg'den önce, tema geliştirmeye bir dizi farklı yaklaşım uyguladık. En yaygın olanı, bir sitenin ayrı bölümleri için ayrı sayfa şablonları oluşturmaktı. Şablonlar çok kuralcı olacaktır ve tasarlanan her bölüm için özel alanlar içerir. Örneğin, bir 'Örnek Durum Çalışmaları' şablonu, bir metin düzenleyici, resim galerisi, referanslar vb. için alanlar içerebilir. Ancak, şablona dahil edildikten sonra bunlar kolayca değiştirilemez.

Bu yaklaşım yalnızca sayfa düzeni açısından kısıtlayıcı olmakla kalmaz, aynı zamanda genellikle her yeni şablon tabanlı sitede tekrarlama çabalarına ihtiyaç duyulduğu anlamına gelir; alanların oluşturulması, şablonların ayarlanması ve ön uçta görüntülenmek üzere ayrı bileşenlerin kodlanması gerekir.

Gutenberg'e uyum sağlamak için geliştirme yaklaşımımızı değiştirmemiz, yeniden kullanılabilir bileşenleri nasıl oluşturabileceğimizi anlamamız ve Gutenberg'in yeni web sitesi kurulumları için bize sunduğu esnekliği benimsememiz gerekiyordu.

Gutenberg o kadar esnek değil

Kutunun dışında, Gutenberg'de 30'dan fazla çekirdek blok mevcuttur. Paragraf, başlık ve liste öğeleri gibi temel içerik bileşenlerinden daha karmaşık widget'lara ve yerleştirmelere kadar her şey.

Web sitemizin yapılarının çoğu için, bu çekirdek blokların birçoğu ya alakalı değil ya da temalarımızın onlardan talep edeceği işlevsellik düzeyine sahip değil. Tema tasarımına uygun çok özel işlevleri yerine getiren kendi kalıp setimizi yaratmanın bir yoluna ihtiyacımız vardı.

Gutenberg'de kısa sürede keşfettiğimiz bir diğer konu da, çekirdek blokları kullanarak daha karmaşık düzenler oluşturmanın ne kolay ne de sezgisel olmasıdır.

Örneğin, bir "içerik ve resim" bloğu için bir model, bir resmin yanında ve resmi bu içeriğin solunda veya sağında görüntüleme seçeneğiyle birlikte bir başlık, paragraf, liste ve düğme gerektirebilir ve bu öğelerin tutarlı bir düzende görüntülenir.

Bu özgürlük düzeyi Gutenberg ile kolay kolay gelmiyor. Metin, resim ve düğmeler ekleyebilen birkaç blok olsa da, bunlar oldukça atomik niteliktedir ve ayrı ayrı eklendiklerinde ayrı yığın bloklar olarak görünürler. Gutenberg'in yeterince esnek olmadığı ve kendi özel bloklarımızı inşa edebilmemiz gerektiği erkenden anlaşıldı.

Bizim çözümümüz

Çok yönlü bir tasarım sistemi

Gutenberg'in piyasaya sürülmesinden önce, kalıp kitaplığımız için kalıpların araştırılması ve görselleştirilmesi için zaten çok zaman harcamıştık.

Bu, yaygın olarak kullanılan öğelerden oluşan bir tel kafes kitaplığı derlemek için mevcut web sitelerimizin ve prototiplerimizin birkaçının denetlenmesini içeriyordu.

Tasarımcılarımız ve geliştiricilerimiz, bu öğelerin Gutenberg bloklarında nasıl birleştirilebileceğini ve sınırlı özelleştirme seçenekleriyle tek bir bloğun temadan temaya önemli ölçüde farklı görünebilmesi için belirli bir blok türünün nasıl oluşturulabileceğini anlamak için birlikte çalışmaya devam etti.

Kalıplarımızı bloklara ayırdıktan sonra inşa etmeye hazırdık.

Gelişmiş Özel Alanlara sahip yapı taşları

Her tema geliştiricisi, bir noktada Gelişmiş Özel Alanlarla (ACF) neredeyse kesinlikle karşılaşmıştır. Sezgisel bir arayüz aracılığıyla çok sayıda farklı alan türü oluşturulabilir; temel metin alanları ve içerik düzenleyicilerden tarih seçicilere, harita yerleştirmelerine ve galeri alanlarına kadar her şey. Bunlar, gönderi türleri, sayfa şablonları, kategoriler ve kullanıcı sayfaları gibi bir sitenin farklı alanlarına kolayca atanabilir.

ACF'nin en son sürümü olan ACF blokları, tüm bu tanıdık işlevselliği Gutenberg'e kadar genişletiyor. Alan grupları oluşturulabilir ve sitenin diğer alanlarında olduğu gibi farklı ACF tabanlı bloklara atanabilir.

Bir bloğu ve çıktı alanlarını kaydetmek için gereken birkaç kod satırıyla, birkaç dakika içinde temel bir özel blok oluşturmak mümkündür. Bu yaklaşımla blokların oluşturulabilme kolaylığı, blok konfigürasyonu, çıktısı ve stiline odaklanmamızı sağladı.

Artık Gutenberg'in tüm esnekliğini veren ancak tutarlı mizanpajlara yardımcı olacak tema tasarımıyla sınırlı olan bir özel blok takımı oluşturabildik.

Desen Kitaplığı eklentisi

Birkaç örnek blok oluşturduktan sonra, mühendislik ekibinin yardımıyla bloklarımızı özel bir eklenti içinde paketlemeye karar verdik.

Bu blok tabanlı eklenti, yeni web sitesi yapıları için özel kalıpların hızlı bir şekilde dağıtılmasını sağlar. Bunlar daha sonra tema düzeyinde daha da özelleştirilir.

Desen Kitaplığı eklentimiz bazı faydalı özellikler içerir:

1. Yeni blokları hızla eklememize izin veren temel blok şablon dosyaları;
2. Çekirdek blokların ve özel blokların başlatılmasına ve özel kategoriler altına dahil edilmesine izin veren işlevler;
3. Her bloğun etkinleştirilebileceği veya devre dışı bırakılabileceği bir yönetici ayarları ekranı;
4. Tema içindeki bir bloğun düzenini ve yapısını geçersiz kılma yeteneği;
5. Tema düzeyinde blok stilini geçersiz kılma yeteneği;
6. Blok yöneticisi önizlemesinin ön uç bloklarla aynı görünmesi için Gutenberg içinde tema düzeyinde stil sayfalarının yüklenmesi. CSS ızgarasının kullanımı, yapısal değişiklikleri en aza indirirken estetik ve düzende esnekliği en üst düzeye çıkarmamıza yardımcı oldu;
7. Tutarlılığı korumak için belirli bloklar belirli gönderi türleriyle sınırlandırılabilir.

Desen Kitaplığı eklentisinin geliştirilmesi devam eden bir evrim olacak ancak artık esnek tema tasarımlarımızın önemli bir bölümünü oluşturmak için kullanılabilecek 15'ten fazla bloğumuz var.

Blok grubumuz, galeriler, istatistikler ve kaydırıcılar dahil olmak üzere daha fazla 'vitrin' tarzı kalıpların yanı sıra içerik ve görüntü kalıpları, referanslar, ilgili makale ve ekip bloklarını içerir.

Özet

Gutenberg ve özel Desen Kitaplığımızın açtığı fırsatlar için gerçekten heyecanlıyız.

En son düzenleme deneyimini kullanarak ısmarlama web sitesi teklifimizi sürdürmeye devam etmekle kalmıyor, son kullanıcılar için zengin deneyimler oluşturmamıza yardımcı olan birleşik bir geliştirme yaklaşımıyla son derece esnek web siteleri üretebiliyoruz.

Şu anda birçok yeni site yapımında kullandığımız Gutenberg bloklarının Desen Kitaplığımızı ilk kullanmaya başladığımızdan bu yana yaklaşık 2 ay geçti. Müşteriler Gutenberg'i kullanmaya hevesliydi ve şu ana kadar müşteri geri bildirimleri gerçekten olumlu oldu.

“Matt ve Pammy, oluşturduğunuz site öğeleri hakkında bir eğitim verdi ve bunlar harika! Esneklik ve profesyonellik harika ve şimdiye kadar bu konudaki tüm harika çalışmalarınız için çok minnettarım.. Web sitesi için gerçekten heyecanlıyım. Teşekkür ederim"

– Rachel Smith, YMCA Nottingham

Gutenberg ile daha fazla zaman geçirdikçe, özel bloklardan oluşan kalıp kitaplığımızı genişletmeye ve daha fazla iyileştirme ile iyileştirmeye devam edeceğiz. Şu anda Gutenberg merkezli 5. sitemiz üzerinde çalışıyoruz, bu nedenle yakında bir vaka incelemesine göz atın!

WordPress Geliştirmenizle ilgili yardıma ihtiyacınız varsa, bizimle iletişime geçmekten çekinmeyin.