WooCommerce Renk Seçicileri 10.9 Beta ile Bugün Geldi

🇬🇧 English: Read this in English →

Yaklaşık on yıldır, tişört, ayakkabı, boya, kumaş ya da görselleştirilmesi gereken bir varyasyonu olan her WooCommerce mağazasının üçüncü taraf bir renk seçici (swatch) eklentisine ihtiyacı oldu. Bazıları çok iyiydi. Bazıları her WooCommerce sürümünde patlayan bir JavaScript mayın tarlasıydı. Yarım çalışan bir renk seçici eklentiyle gece üçte boğuşan yeterince mağaza kurtardım: sorun her zaman aynı şekildeydi. Eklenti, veri modelinin dışında yaşıyor, varyasyon arayüzüne kanca atıyor ve çekirdek bloklardan herhangi biri değişir değişmez başkasının render katmanını ayıklıyorsun.

Bu yüzden 3 Haziran’da Porto’dan gelen haber, başlığın söylediğinden çok daha önemliydi. WooCommerce, renk ve görsel seçicileri sonunda çekirdeğe alıyor; üstelik metin açılır menüsüne üstten yapıştırılmış bir stil katmanı olarak değil, birinci sınıf bir ürün özniteliği türü olarak. Bugün, yani 8 Haziran itibarıyla bu iş, WooCommerce 10.9 beta 1’le birlikte, bir özellik bayrağının arkasında ve blok temaları için açık olarak hayata geçiyor.

Uzun zamandır beklediğim cinsten bir değişiklik. Renk seçicileri tek başına heyecanlı bir konu olduğu için değil; bunları veri modelinin içine taşımak, “etrafından dolaştığın bir özellik” ile “gerçekten güvenebileceğin bir özellik” arasındaki farkı belirlediği için.

Asıl yeni olan ne

WooCommerce 10.9, Color / Image adında yeni bir ürün özniteliği türü getiriyor. Bu tür dahili olarak wc-visual şeklinde tescilleniyor. wc- öneki bilinçli bir tercih: WooCommerce ekibi geliştirici blogundaki duyurusunda bunu, halihazırda kendi öznitelik türlerini kaydeden mevcut renk seçici eklentileriyle çakışmayı önlemek için kullandıklarını açıklıyor.

İşleyiş yalın. Ürünler → Öznitelikler bölümünde yeni bir öznitelik oluşturup tür olarak Color / Image seçiyorsun. Her terim için ya bir HEX renk değeri giriyor ya da Medya kitaplığından bir görsel yüklüyorsun. Görsel seçeneği aslında insanların düşündüğünden daha kritik: desenli kumaşlar, mermer dokular, ahşap damarları ve baskılı tasarımlar tek bir HEX değeriyle temsil edilemez ve eski nesil renk seçici eklentilerinin çoğu görsel desteğini ücretli sürüme saklıyordu.

Öznitelik tanımlandıktan sonra renk seçiciler, mevcut WooCommerce bloklarında otomatik olarak çıkıyor: Sepete Ekle + Seçenekler bloğunun içindeki Varyasyon Seçici, Özniteliğe Göre Filtrele, Ürün Filtreleri içindeki Liste bloğu ve Chips bloğu. Her seçici, HEX rengi ya da yüklenen görseli bir daire içinde gösteriyor. Şablonuna eklemen gereken ayrı bir “swatch bloğu” yok — alttaki öznitelik Color / Image türündeyse mevcut bloklar kendiliğinden renk seçici farkındalığı kazanıyor.

Bu özelliği açmak için WooCommerce → Ayarlar → Gelişmiş → Özellikler altındaki Color swatches for attributes seçeneğini etkinleştiriyorsun. Tamamen tercihe bağlı, bayrağın arkasında ve geliştirici blogunun belirttiğine göre şimdilik yalnızca blok temalar için. Klasik temalar 10.9 sürümünün kapsamında değil.

Zamanlama programa uygun. WooCommerce sürüm takvimi belgelerine göre, beta 1 özellik dondurulmasından bir hafta sonra çıkıyor. 10.9 için özellik dondurma 1 Haziran’daydı, dolayısıyla beta 1 bugüne, 8 Haziran’a denk geliyor. Bir önceki sürüm olan WooCommerce 10.8.0 (26 Mayıs) minimum WordPress gereksinimini 6.9’a çıkarmış, satın alma sonrası ürün değerlendirme isteyen yeni e-postayı eklemiş ve misafir siparişlerin tamamlanması üzerinden REST API’de bir güvenlik açığını kapatmıştı. 10.9 ise gözle görülür UX işinin sergilendiği döngü.

Bir renk, hiçbir zaman tek bir sayı değildir

Görsel seçenek kulağa hoş bir ekstra gibi geliyor, ama benim için asıl olgunluk işareti orada. İzin ver de sektörün dinozoru bir dakika geriye gitsin. 90’larda baskı ve prepress işlerinden geldim; Aldus FreeHand ve CorelDRAW başında geçmiş yıllarım var. O dünyada bir rengin “tek bir değeri” olmadığını daha ilk aylarda öğrenirdin. Ekranda gördüğün RGB başkaydı, dört renk ayrımıyla basılan CMYK karşılığı başka, ve müşterinin markasını garantiye almak istediğinde bir Pantone spot rengi seçerdin — ekranda taklidi değil, matbaacının elindeki fiziksel örnek kartelasında parmakla dokunduğun gerçek boya. “Swatch” kelimesi bizim için bir CSS dairesi değil, elle çevirdiğin o Pantone kitabının bir yaprağıydı.

Anlatmak istediğim nostalji değil. Bir HEX değeri, tıpkı bir RGB değeri gibi, gerçek bir malzemeyi taklit etmenin en kaba yolu. Mermer bir desen, meşe damarı ya da baskılı bir kumaş, altı basamaklı bir sayıya sığmaz — tıpkı bir Pantone metalik rengin CMYK’ye sığmaması gibi. WooCommerce’in Color / Image özniteliğinde görseli birinci sınıf yapması, o eski dersi web’e taşıyor: bazı renkler bir değerdir, bazıları bir örnektir, ve olgun bir sistem ikisini de temsil edebilmek zorunda. Renk seçiciyi ücretli eklentiye saklayan eski nesil, hep ilk yarısını çözüp ikincisini görmezden geldiği için yarım kalmıştı.

WordPress ve WooCommerce dünyası için neden önemli

Asıl hikâye “WooCommerce, renk seçici eklentilerine yetişti” değil. Asıl hikâye, eklenti ekosisteminde yaşayan bir özelliğin platformun parçası haline gelmesiyle neyin değiştiği.

Üç şey değişiyor.

Bir, veri modeli artık sabit. Store API üzerinden başsız (headless) bir önyüz kuruyorsan, ürünleri bir ERP’ye senkronluyor ya da öznitelikleri öneri motoruna besliyorsan, renk seçici verisi şimdiye kadar her eklentide farklı bir şekildeydi. Artık bu şekil tek ve sahibi çekirdek. Müşteri tema değiştirdiğinde ya da hosting yükselttiğinde kaybolmuyor. Yalnız bu bile geçiş maliyetine değer.

İki, varyasyon arayüzü bir JavaScript pazarlığı olmaktan çıkıyor. Üçüncü taraf renk seçici eklentileri genellikle yerleşik varyasyon açılır menüsünü DOM düzeyinde ele geçirip kendi tıklama olaylarını bağlıyor, ardından temanın Sepete Ekle bloğuyla yaptığı her şeyle savaşıyor. Çekirdek bloklar renk seçiciyi doğal biçimde işlediğinde bu kırılgan katmanın tamamı ortadan kalkıyor. Ajanslar için bu, planlamak zorunda kalmadığın bir bağımlılık demek.

Üç, erişilebilirlik ve performans çekirdeğin sorumluluğuna geçiyor. Eski nesil renk seçici eklentilerinin çoğu kendi CSS’ini, kendi klavye davranışını taşıyor ve çoğu zaman ekran okuyucu desteği konusunda ciddi bir hikâyesi olmuyor. Bu iş Varyasyon Seçici ve Özniteliğe Göre Filtrele bloklarının içinde yaşadığında, çekirdeğin Interactivity API tarafında zaten yaptığı erişilebilirlik çalışmasını miras alıyor. Duyuru henüz erişilebilirlik modelini ayrıntılandırmıyor — ki beta sürecinde dikkatle test etmek istediğim konulardan biri bu — ama yapısal cevap, “her sitenin farklı bir renk seçici eklentisi ve farklı bir erişilebilirlik hikâyesi” durumundan iyidir.

Önemli bir uyarı var. Şimdilik yalnızca blok temalar. Hâlâ klasik tema kullanan bir mağazan varsa — ki özellikle B2B tarafında ciddi gelir üreten birçok mağaza hâlâ böyle çalışıyor — 10.9’un bu özelliğinin kitlesinde değilsin. Ya bekleyeceksin ya da zaten gecikmiş olan blok temaya geçiş konuşmasını gündeme alacaksın.

Ben olsam ne yapardım (ya da yapmazdım)

Canlıda bir WooCommerce mağazası işletiyorsan bu özellik bayrağına yayın ortamında dokunma. Söylemesi sıkıcı ama biri mutlaka deneyecek. Beta 1 bir betadır ve bir sebeple bayrağın arkasında.

Bu hafta gerçekten yapacağım şeyler:

• Mağazanın bir staging kopyasını ayağa kaldır, WooCommerce 10.9 beta 1’i resmi WooCommerce GitHub sürümler sayfasından kur, halen klasik temadaysan blok temaya geç ve Color swatches for attributes bayrağını aç.
• Bugün üçüncü taraf bir renk seçici eklentisine bağlı, temsili bir üründe Color / Image özniteliği oluştur ve varyasyon akışını, filtre davranışını, chips görünümünü karşılaştır.
• Veri şeklini Store API ve REST API üzerinden kontrol et. Headless çalışıyorsan asıl önemli kısım görsel değil, bu. wc-visual şeması önyüzünün uzun vadede bağımlı olacağı şey.
• Ekran okuyucu ve klavye davranışını NVDA ya da VoiceOver ile sına. Varsayım yapma. Yapısal iyileşmeler gerçek olabilir ama erişilebilirlik güvendiğin değil, doğruladığın bir şeydir.
• Bir renk seçici eklentisi ya da varyasyon seçiciyi geçersiz kılan bir tema bakımı yapıyorsan, wc-visual öznitelik türünün kaynağını şimdi oku. Bayrak açıkken çekirdeğe yol vermek mi, yoksa kendi render yolunu korumak mı; bilinçli bir karar olarak ver. İkisi de savunulabilir.

Yapmayacağım şey: müşterilere “renk seçiciler artık WooCommerce yerlisi” diye duyuru çıkmak. Bayrak deneysel, kapsam blok temalarla sınırlı ve veri şekli 10.9 final sürümüne kadar değişebilir. Müşteriye işin geldiğini söyle, beklentiyi şimdiden kur ve mevcut renk seçici eklentisinden geçişi 2. çeyrek sürprizi değil, 3. çeyrek projesi olarak takvime koy.

Bu, başlığa çıkmayan ama varyasyon arayüzünün önümüzdeki on yılını yeniden döşeyen sessiz WooCommerce değişikliklerinden biri. WordPress örüntüsü genellikle böyledir: çekirdeğe sıkıcı geçiş, uzun vadede en çok birikim üreten geçiştir. Gelecek yıl güvenemeyeceğim parlak bir lansmana göre, ben bunu tercih ederim.