FSE Sosyal Yardım Turu #2: Gutenberg'in Site Editörü ile Özel Bir Ana Sayfa Oluşturma

Yayınlanan: 2021-02-24

Anne McCarthy, Tam Site Düzenleme (FSE) Sosyal Yardım programı için ikinci test turunu duyurdu. Test çağrısı, kullanıcıların Gutenberg eklentisinin site düzenleyicisinden bir ana sayfa oluşturmasını ister. Geri bildirim 5 Mart'a kadar açıktır.

İlk test turu Aralık 2020'de başladı ve geçen ay sona erdi. Test kullanıcıları, blok düzenleyiciden şablon düzenleme moduyla birkaç sorunlu noktayı tanımlayabildi. Program, Gutenberg geliştiricilerinin geliştirmek için çalışabileceği eyleme geçirilebilir öğeler yarattı.

Bu ikinci tur da benzer. Ancak, test çok daha büyük ve daha karmaşık bir alanı kapsar. Kullanıcılar tanıdık blok düzenleyiciden ayrılacak ve uygulanabilir bir ürün olmaktan hala aylar uzakta olan site düzenleyicisine geçecek.

McCarthy, bir ana sayfa oluşturmak için 22 adımlık bir süreç sıraladı. Çoğunlukla takip etsem de bitirmeden sıkıldım. Bu, zayıf bir test konusu yapmamın nedenlerinden biri. Kendi başıma nelerin mümkün olduğunu keşfetmeyi ve görmeyi seviyorum. Bir fikrim varsa, gerçekleştirmeyi denemek istiyorum. Biraz düzensiz olsa bile öncelikle genel senaryoya bağlı kaldım.

Sonunda The Grilled Cheese adlı bir restoran için özel bir ana sayfa oluşturdum - WordPress topluluğundan ayrılırsam kesinlikle bu restoranı gerçek dünyada açardım.

Hayali bir restoran için Gutenberg'in site editörü aracılığıyla özel olarak tasarlanmış ana sayfa.
Kenar çubuğu ile özel restoran ana sayfası.

Oldukça basittir. Bu aşamaya gelmeden önce çeşitli kavramlarla oynamam yaklaşık iki saatimi aldı. Memnun olacağım bir şey inşa etmek birkaç saatimi alırdı.

Genel olarak, ideal ana sayfamı tasarlama konusunda sınırlı hissettim. Her adım, aletlere karşı zorlu bir savaştı. Bunu HTML ve CSS ile zamanın yarısından daha kısa sürede yapabilirdim. Aynısını ve daha fazlasını WordPress için diğer modern sayfa oluşturucu eklentileriyle yapabilirim.

Testimin sonuçlarına dalmadan önce, biraz acımasız dürüstlüğüm var. FSE Outreach testi için kullanılan tema olan TT1 Blocks, enfiye kadar değil. Tema, site düzenleyicinin son kullanıcıların ellerine koyduğu çok sayıda olasılığı güvenilir bir şekilde ele almıyor. Tüm bu deneyim, daha iyi bir tema ile daha sorunsuz hale getirilebilir. Bununla birlikte, seçenekler sınırlıdır ve bu noktada çalışmak için daha iyi blok tabanlı bir tema olup olmadığından emin değilim.

Site düzenleyicisi ile ön uç arasında o kadar çok tutarsızlık vardı ki hepsini listelemenin pek bir anlamı yoktu. Boşluk fena halde kapalıydı. Genelde bunu bir tema sorunu olarak görüyorum. Zamanımın çoğunu deneme yanılma modunda geçirdim, editörde bir ayarlama yaptım ve ön uç sonucunu görmek için yeniledim. Durulmak. Tekrarlamak.

Ağrı Noktalarının Belirlenmesi

Bu gönderi site düzenleyicisini eleştirirken, deneyimin tamamen zayıf olduğu anlamına gelmez. Her hafta gelişmeyi görmek bana WordPress'in piyasadaki her şeye rakip olan bir site editörüne sahip olacağını umuyor. Sonuçta. Ancak buradaki amacım, ekibin kullanabileceği gerçek geri bildirimler sağlamak.

Daha önce bahsedilen genel boşluk sorunlarının dışında, özel bir ana sayfa oluştururken birkaç engel belirledim.

Maksimum Genişlikler

Site düzenleyicisi aracılığıyla tam site sayfası tasarlarken, çoğu sorundan daha fazla bir sorun göze çarpıyordu. WordPress, çok yönlü bir “maksimum genişlik” sisteminden yoksundur. Bir kullanıcı olarak, ana sayfamın içerik alanının genişliğini ayarlamak için birkaç seçeneğim kaldı. Şu anda tema yazarları özel içerik, geniş ve tam genişlik ayarlayabilir. Ancak, bu sistem korkunç derecede sınırlayıcıdır. Yazarların bununla yapabileceği çok fazla tema yoktur ve bu sorun, kullanıcıların hem blok hem de site düzenleyicilerinde yapabileceklerini doğrudan sınırlar.

Tema yazarları tarafından özelleştirilebilen bir tasarım çerçevesine duyulan ihtiyaç hakkında daha önce yazmıştım. Tailwind CSS, tekne yükü esnekliği sunan bir maksimum genişlik sistemine sahiptir. WordPress'in bu modern tasarım çerçevelerinden fikirler almaya başlaması gerekiyor.

Blok Simgesi Ekle

Varsayılan içerik alanındaki öğeler arasında gezinirken “Blok Ekle” simgesinin görünmesi zordu. Görünmesi için faremi mükemmel bir konuma yerleştirmem gerekiyordu. En ufak bir hareketin bile simgenin bir kez daha kaybolmasına neden olduğu bir hayal kırıklığı çalışmasıydı.

Site düzenleyicide 'Blok Ekle' simgesinin üzerine gelin.
'Blok Ekle' simgesini bulma.

Üst Araç Çubuğu moduna geçmek bunu çok daha kolay hale getirdi. Varsayılan blok araç çubuğunun onu bir dereceye kadar gizlediğini varsayıyorum. Bu moda geçişle ilgili sorun, araç çubuğu seçimimin kaydedilmemiş olmasıdır. Site düzenleyicisine her döndüğümde, bir kez daha etkinleştirmem gerekiyordu.

Sorgu Bloğu

Özel bir ana sayfada gönderileri listelemenin en sinir bozucu yönü bir sınır belirlemekti. Sayıyı üç olarak ayarlamak istedim. Ancak, Sorgu bloğunun bunu yapma seçeneği yoktur. Sonunda, kategori filtresini kullanarak, yalnızca birkaç gönderisi olan birini seçerek sahte bir sınır oluşturdum.

Güncelleme: Nick'in yorumlarda belirttiği gibi bir limit belirlemek mümkündür. Sayfa başına gönderi sayısını, bir ofseti ve maksimum sayfa sayısını ayarlamak için araç çubuğunda bir "ayarlar" simgesi vardır. Bu belirli sorgu ayarlarının kenar çubuğundaki diğerlerinden neden ayrı olduğundan emin değilim. Bunların bir arada olması daha mantıklı.

WordPress site düzenleyicisindeki Sorgu bloğunu kullanma.
Sorgu bloğunun kategori filtresini kullanarak gönderileri sınırlama.

Sorgu bloğunun bir başka kafa karıştırıcı yönü de anahtar kelime filtresidir. Bildiğim kadarıyla, WordPress hiçbir zaman “anahtar kelime” terminolojisini kullanmadı. SEO eklentileri dışında, bu filtrenin ne yaptığına dair herhangi bir bağlam yok gibi görünüyor. Bir arama anahtar kelimesi gibi çalıştığını tahmin ediyorum.

Tüm Bloklar için Global Stiller

Global Stiller paneline geçerken, blok düzeyinde stiller uygularken bazı blokların eksik olduğunu fark ettim. Özellikle, Son Yorumlar bloğu için stilleri ayarlamak istedim.

Listede yalnızca tipografi, renkler ve tasarımla ilgili diğer seçeneklere sahip blokların göründüğünü varsayıyorum. Bu, site editörü WordPress'e geldiğinde muhtemelen son kullanıcıların kafasını karıştıracaktır. Tüm bloklar, kullanıcıların özelleştirebileceği stil seçeneklerine sahip olmalıdır.

Tam Genişlikli Sütun Yok

Ana sayfamın içeriği için tam genişlikte bir Sütun bloğu oluşturmaya çalıştım. Bununla birlikte, sırasıyla %66,67 ve %33,33'lük bir paya sahip olmalarına rağmen, iki ayrı sütunun boyutu sınırlıydı.

Site düzenleyicisinden tam genişlikte sütunların çıktısını denetleme.
Tam alanı kapsamayan tam genişlikte sütunlar.

Bu bir tema sorunu gibi görünüyor. Ayrıca bunun, maksimum genişlik üzerinde daha doğrudan kontrole sahip olmanın yardımcı olacağı zamanlardan biri olduğunu iddia ediyorum. Gerçekten temanın tam ve geniş genişlikleri arasında bir şey istedim.

Öne Çıkan Görseller

Öne Çıkan Resim bloğu tarafından görüntü çıktısının boyutunu ayarlamanın bir yolu yoktur. Şu anda tek tip bir boyut elde etmenin tek yolu, görüntüleri WordPress'e yüklemeden önce önceden kırpmaktır.

Bunun esasen Görüntü bloğunun bir varyasyonu olmaması için hiçbir neden yoktur. Öne çıkan görsellerin farklı olması gereken tek şey, gönderiye bağlantı seçeneğidir.