Jamie Marsland, Blok Düzenleyiciyi Kullanarak WordPress.org Ana Sayfasını 20 Dakikada Yeniden Oluşturuyor

Gutenberg YouTuber Jamie Marsland, WordPress.org'un yeni ana sayfasının ve indirme sayfası tasarımlarının uygulanmasının ne kadar süreceğine ilişkin son tartışmalara yanıt olarak, blok düzenleyiciyle yeniden oluşturmayı denemeye karar verdi.

Matt Mullenweg, yeni tasarımların geliştirilmeye devam etmesiyle ilgili planlar hakkında yorum yaparak, "uygulanmasının haftalar değil saatler sürmesi gerektiğini" söyledi. Blok düzenleyiciyle çalışmanın gerçekleri hakkında daha sonraki konuşmaları ateşleyen en kışkırtıcı yorumları, WordPress'in rakiplerine atıfta bulundu.

Mullenweg, "Bu çok basit bir düzen, Squarespace, Wix, Webflow veya WP sayfa oluşturucularından birinde tek bir kişinin bir günden fazla sürdüğünü hayal etmek zor," dedi.

Marsland, Gutenberg'i kullanarak meydan okumaya karar verdi. Bu alıştırma için WordPress'in en son varsayılan teması olan Twenty Twenty-Two'yu kullandı. Sonuçları WordPress'in yeni tasarımlarıyla aynı değil ama çok yakın ve ana sayfayı yaklaşık 20 dakika içinde açmayı başardı.

Videoda (aşağıda gömülü), Marsland ana sayfanın her bir bölümünün oluşturulmasını anlatıyor. O, blok düzenleyiciye sahip güçlü bir kullanıcı olarak tanımlanabilecek kişidir. Gerektiğinde dolgu ve kenar boşluklarını ayarlayarak satırları, sütunları ve grupları hızla karıştırabilir ve her bölüme tasarım için karşılık gelen rengi atayabilir. Bu noktada, çoğu ortalama WordPress kullanıcısının yapabileceği bir şey değil, bu yüzden video izleyicilerden bu kadar güçlü bir tepki aldı. Marsland'ın YouTube kanalı, kullanıcıların Gutenberg'i kullanarak sayfalar oluşturmada ve WooCommerce ile mağazalarda ustalaşmasına yardımcı olmaya odaklanmıştır.

Marsland, "Sonuç olarak, tasarımın %95'ini hızlı bir şekilde tamamlamanın oldukça kolay olduğu, ancak deneyimlerimde her zaman en çok zaman alan son %5'lik kısım" dedi. “Benim tahminim, gecikmelere neden olanın daha çok iç süreçle ilgili olduğu, ancak dahil olmadan kesin olarak söylemek zor. Tasarımın oluşturulmasıyla ilgili bir Gutenberg sorunu olmadığını gerçekten göstermek istedim (Matt Mullenweg'in Wix, Squarespace ve diğer WP sayfa oluşturucularından bahsettiği gibi).

Projeye Automattic sponsorluğunda katkıda bulunan Alex Shiels, "a11y için makul standartlar, yanıt verme, tarayıcı uyumluluğu, SEO ve performans" için çalışmak da dahil olmak üzere, gecikmelere neden olan blok düzenleyiciyle ilgisi olmayan birkaç öğeye atıfta bulundu. farklı kıtalarda katkıda bulunanlarla işbirliği yapmak.

Marsland'ın girişimine yanıt olarak, WordPress geliştiricisi Patrick Boehner, küçük ayrıntıların nasıl son derece önemli kaldığı konusunda yorum yaptı. Boehner, "İlk olarak tasarım odaklı olana karşı editörde tasarlananın ne olduğunu kesinlikle anlayabilirsiniz" dedi.

Gutenberg'in WordPress'teki ilk çıkışından beş yıl sonra, tema geliştiricileri, ilk blok yaklaşımı düşünülerek oluşturulmamış tasarımları hayata geçirme konusunda hala zorlanıyor.

WordPress geliştiricisi Jon Brown, “Geleneksel olarak sahte bir sayfa tasarımı almak ve bu tasarımı blokları kullanarak yürütmek günümüzde temelde zor ila imkansız olmaya devam ediyor” dedi. "Bu bir problem.

“Tabii ki, bloklar 'tarayıcıda bir sayfa tasarlamak' ve bloklardan elde ettiğinizi kabul etmek için iyidir, ancak bloklar, bir makete dayalı duyarlı, erişilebilir, piksel mükemmel bir düzen oluşturmak için gereken esneklik ve kontrollerden yoksun olmaya devam ediyor. .

"Eskiden bir gün ve bir düzine php satırı ve bir düzine css satırı alan şey, şimdi özel bloklar oluşturmak haftalar alıyor çünkü çekirdek bloklar kancalarla kolayca ayarlanamıyor ve gerekli temel kontrollerden yoksun."

Gutenberg'e katkıda bulunanlar, akışkan tipografiyi tanıtarak adımlar atıyor ve tasarım araçları tutarlılığının iyileştirilmesiyle ilgili bir dizi sorunu izliyorlar. Bu arada, blok düzenleyici, tasarımlarını anında duyarlı hale getirmeyi ümit edenlere uyum sağlamak için olgunlaştıkça, tema geliştiricileri gerekli artan acılara katlanıyor.

Deneyimli tema geliştiricisi Mike McAlister, "Sıfırdan tam bir FSE teması oluşturuyordum ve tasarımımın ne kadarını editör, theme.json ve minimum veya sıfır özel CSS ile başarılı bir şekilde kopyalayabildiğime şaşırdım" dedi. . "Elbette, çok uğraştırdı ama yine de etkilendim.

“Ancak, Jon'un bahsettiği gibi, daha küçük bir ekran (veya editörde mobil öncelikli tasarımı denemeye cesaret ederseniz daha büyük ekran) için bir şeyler ayarlamanız gerektiğinde, bir duvara tosluyorsunuz. Henüz duyarlı kontrolleri olmayan kenar boşluğu, dolgu ve blok boşluğu ile özellikle belirgindir. Bunun CSS aracılığıyla ayarlandığını .org'daki yeni temada görebilirsiniz.”

Duyarlılık, tasarımların uygulanmasının neden blok düzenleyicide tasarımı yeniden oluşturmaktan daha fazla zaman aldığı konusunda Shiels'in bahsettiği sorunlardan biridir.

McAlister, “Ancak, yanıt verme konusunda iyileştirmelerin geldiğine dair ipuçları var” dedi. "Akışkan tipografi ve kelepçe() kesinlikle tipografiyi kontrol altına almanıza yardımcı oldu, ancak her zaman daha da hassas kontrole ihtiyaç duyduğunuz durumlar olacaktır. Diğer her site oluşturucu bunu çözdü, WordPress'in yapamayacağını veya etmeyeceğini düşünmek için hiçbir neden yok. (Kesinlikle öyle umuyorum, çünkü bugünlerde trafiğin ~%50-60'ı mobil cihazlardan geliyor!)

"Bu büyüyen ağrıları aşmanın en iyi yollarından biri, mümkün olduğunca çok köpek maması yemektir - bu kör noktaları ortaya çıkarmak için mümkün olduğunca çok sayıda gerçek hayat senaryosu oluşturmak için editörü ve FSE'yi kullanmak."

Marsland'ın kısa alıştırması, blok düzenleyicide yolunuzu biliyorsanız, WordPress.org'un tasarımını kısa sürede yeniden oluşturmaya ne kadar yaklaşabileceğinizi gösteriyor. Gutenberg sayfa oluşturma kullanıcı arayüzünün, diğer uygulamalarda oluşturulan tasarımları yeniden üretmede engel olmadığını kanıtlamada başarılı oldu. Bunun yerine, geliştiricilerin genellikle editörün dışında çözmesi gereken diğer tüm ilgili kontrol listesi öğeleridir – erişilebilirlik, yanıt verme ve SEO hususları dahil. Gutenberg, yanıt verebilirlik ve erişilebilirlikle ilgili ekstra işleri azaltmaya ne kadar yaklaşırsa, hayallerini kurdukları tasarımları kendi başlarına üretmeye çalışan sıradan kullanıcılar için o kadar ulaşılabilir olacaktır.