WordPress 7.1 Arka Plan Gradyan Blok Desteğini Getirdi

🇬🇧 English: Read this in English →

Her WordPress sürümünün, geliştirici notunda önemsiz görünüp seni sessizce bir alt tema yazmaktan kurtaran küçük bir tasarım aracı değişikliği vardır. Bu haftaki değişiklik, 7.1’e gelen yeni background.gradient blok desteği. Başlık sıkıcı: bloklar artık Arka Plan panelinde bir gradyan tutabiliyor. Ama asıl mesele şu — gradyan nihayet background kısayolu yerine background-image özelliği üzerine oturuyor. Yani tam üstünde ayarladığın arka plan resmiyle kavgayı bırakıyor. Kulağa küçük geliyor, biliyorum. Beş yıldır o kavganın faturasını ödeyen biri olarak sana şunu söyleyeyim: hiç de küçük değil.

Blok düzenleyicisi çıktığından beri alt temalara “hero fotoğrafı üstüne gradyan” CSS’i yazıyorum. Tanıdığım her ajansın bunun için bir parçacığı var. Bu parçacıkların hepsi, 2019’da color.gradient‘in yanlış CSS özelliğine bağlanması ve kimsenin geçişi bozan kişi olmak istememesi yüzünden hâlâ hayatta. İşte bu düzeltildi. Hem de mevcut temalara dokunmadan, katkı olarak eklenen ve tamamen tercihe bağlı bir şekilde.

Bu, blok düzenleyicisinin border-radius, box-shadow ve harf aralığı ile yürüdüğü aynı olgunlaşma yürüyüşü. Önce özel CSS, sonra theme.json, sonra hazır ayarlar, en son da düzgün bir denetleyici kontrolü. Arka plan gradyanı 7.1 itibarıyla üçüncü basamakta. Bitiş çizgisi değil ama kendi bedelini ödemeye başladığı basamak.

Aslında yeni olan ne

Aaron Robertshaw’un Make/Core geliştirici notu “New Block Support in WordPress 7.1: Background Gradient” (26 Temmuz 2026) yüzeyi belgeliyor. block.json içinden tercihe bağlı açılan yeni bir background.gradient destek anahtarı, blok denetleyicisinin Arka Plan panelinde bir gradyan seçici sunuyor. Renk panelinden zaten tanıdığın aynı seçici bileşen, artık resmin bulunduğu yere taşınmış hâli.

Asıl önemli değişiklik motorun altında. color.gradient CSS’in background kısayoluna serileşiyordu. Bu kısayol, aynı kural içindeki tüm diğer arka plan özelliklerini sıfırlıyor. Gradyan ayarladığında resmin silinme sebebi tam olarak buydu. background.gradient ise background-image‘e serileşiyor. Yani gradyan ve resim, virgülle ayrılmış değerler olarak birlikte render ediliyor: background-image: linear-gradient(135deg, #000 0%, #fff 100%), url('/hero.jpg');. Gradyan resmin üzerine oturuyor. İkisi de yerinde kalıyor.

19 Ağustos’taki 7.1 GA için beş çekirdek blok bu desteği alıyor: core/group, core/accordion, core/pullquote, core/post-content ve core/quote. Bir blokta background.gradient etkinken Renk panelindeki gradyan sekmesi bastırılıyor. Böylece içerik editörleri aynı blokta iki çakışan gradyan kontrolü görmüyor. Gradyan hazır ayarları yine aynı CSS özel özelliklerine (var(--wp--preset--gradient--vivid-cyan-blue)) çözümleniyor. Yani mevcut hazır ayar yığının aynı şekilde çalışmaya devam ediyor.

Boru tesisatı, Justin Tadlock’un Haziran 2021’de açtığı issue #32787‘yi kapatan Gutenberg PR #75859 ile 1 Nisan 2026’da geldi. “Bu yanlış CSS özelliğine bağlı” tespitinden “işte onu düzelten kamuya açık bir API” noktasına gelmek yaklaşık beş yıl sürdü. Açık konuşayım, bu bir yavaşlık kusuru değil, tam da WordPress’in yönetişim katmanının tasarlandığı gibi çalışması: yavaş, katkı olarak eklenen, geriye uyumlu, tema dahil olmayı seçmiyor, dahil olmamayı seçmiyor, hiçbir tema kırılmıyor. Robertshaw’un notu net: “hiçbir mevcut blok kırılmıyor ve blokların ve temaların çoğu için herhangi bir eyleme gerek yok.”

7.1’de açıkça gelmeyen iki şey var. Birincisi, bu bir göç değil. core/cover ve color.gradient‘e hâlâ dayanan diğer bloklar her zamanki gibi davranmaya devam ediyor. Robertshaw yeni desteğin “gradyan işleyişini color.gradient‘ten background.gradient‘e taşımak için zemin hazırladığını” belirtiyor ama bu ileri bir sürüm işi, bu sürümün değil. İkincisi, ilgili metin gradyanı çalışması (background-clip: text, PR #76171 ile takip ediliyor) hâlâ taslak. Şimdilik ona karşı üretim kodu yazma.

Bir prepress hatırası: fountain fill ile sahtesi

İzin ver de sektörün dinozoru bir dakikalığına devreye girsin, çünkü bu “gradyanı resme doğru bağlama” hikâyesi bende çok eski bir kası kasıyor. 1990’ların prepress masalarında, tarayıcıdan geçmiş bir görselin üstüne renk geçişi koyman gerektiğinde iki yol vardı. Doğru yol: CorelDRAW ya da Aldus FreeHand’de görselin üstüne bir fountain fill — yani gradyan dolgusu — bindirirsin, bu tek bir nesne olur, açısını, renk duraklarını, duotone tonunu tek bir diyalogdan yeniden ayarlarsın; müşteri “biraz daha koyu olsun” dediğinde on saniyede döner çıkarsın. Yanlış yol: geçişi elle sahtelersin, birkaç ara ton ekler, film çıkışında tuttuğuna dua edersin, ertesi gün “biraz daha koyu” dendiğinde baştan başlarsın.

color: linear-gradient(...)‘ı bir CSS parçacığına elle gömmek, o yanlış yolun 2026 versiyonu. Gradyanı background-image‘e resmin yanına doğru bağlamak ise fountain fill — tek nesne, tek yerden yeniden ayarlanabilir, resimle kavga etmeyen. Otuz yılda öğrendiğim şey değişmedi, sadece diyaloğun adı değişti. O gün bir fountain fill’in tek nesne olması ne kadar kıymetliyse, bugün gradyanın theme.json‘da tek bir belirteç olması da o kadar kıymetli.

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

Resim üstüne gradyan deseni, WooCommerce mağazalarındaki en yaygın hero bölümü tasarım briefi. Ürün hero’su, kontrast için alttan gelen koyu bir doğrusal gradyan, üstünde başlık ve harekete geçirme düğmesi. Son beş yılda teslim ettiğim ajans işlerinde bu tarif dört yerden birinde yaşıyordu: özelleştiricideki ek CSS, alt temanın style.css‘i, bir sayfa oluşturucu modülünün satır içi stilleri veya (en kötüsü) Cover bloğunu saran bir kısa kod. Dördü de teknik borç. Dördü de tema göçünü pahalı hâle getiriyor.

Bu belirteci theme.json‘a taşımak onu taşınabilir yapıyor. Tema dosyasıyla birlikte geziyor. wp theme.json araçlarıyla keşfedilebiliyor. Global Stiller içinde rastgele bir CSS parçacığı olarak değil, gerçek bir ayar olarak görünüyor. Üç yıl sonra siteyi başka bir tema üzerinde yeniden inşa ettiğinde gradyan da beraberinde geliyor. Blok düzenleyicisinin 5.9’dan bu yana yürüdüğü tasarım-belirteci yönünün tüm amacı bu.

Desteği alan beş blok da desen için doğru olanlar. core/group, hero bölümlerinin büyük çoğunluğunun aslında yaşadığı yer. core/post-content ise tekil şablonlarda gövde metninin arkasına bir gradyan katmanlamana izin veriyor. core/pullquote ve core/quote, tasarımcılara özel bir blok yazmadan fotoğraf üstüne gradyanlı alıntı muamelesi veriyor. core/accordion listedeki tuhaf olan ama mantıklı — WooCommerce ürün sayfalarındaki sıkça sorulan sorular bölümü sıklıkla hafif bir marka rengi tonu istiyor. Bunların hiçbiri bir eklentiye ihtiyaç duymuyordu. Doğru bağlanmış bir CSS özelliğine ihtiyacı vardı.

Gradyanı resmin üstüne koyarken atlanmaması gereken tuzak: kontrast

Şunu tecrübeyle söylüyorum: gradyanın resimle barışması, en sinsi hatayı da kolaylaştırıyor. İki katman artık yan yana yaşadığı için, koyu bir hero fotoğrafını daha da karartan bir gradyan koyup üstüne beyaz başlık bindirmek bir tıklama meselesi. Sonuç güzel görünür — ta ki müşteri fotoğrafı açık tonlu bir yenisiyle değiştirene kadar. O an başlığın kontrastı çöker ve kimse fark etmez, çünkü tasarımı yapan sen aynı koyu fotoğrafa bakarak onaylamışsındır.

Ben olsam bu yüzden gradyanı süs değil, okunabilirlik aracı olarak kurardım. Metnin oturduğu kenarda WCAG AA eşiğini (normal metin için 4.5:1) tutan bir koyulukta bir doğrusal gradyan; resim değişse bile metin ayakta kalsın diye. background-image‘e doğru bağlanmanın asıl bedava getirisi de burada: gradyan artık resimden bağımsız, tek yerden yeniden ayarlanabilir bir katman. Fotoğraf değişince gradyanın koyuluğunu tek bir belirteçten yükseltirsin, tüm hero’ları tek tek elle gezmezsin. Fountain fill hikâyesinin bugünkü tam karşılığı bu — ve gerçekten işine yarayacak kısım da bu.

Benim yapacağım (ya da yapmayacağım) şey

Bu hafta yap: her alt temayı, özel stil dosyasını ve ek-CSS bloğunu, bir gradyan ile url()‘i birleştiren background-image: tanımlamaları için grep’le. Bunlar, 19 Ağustos’taki 7.1 GA sonrası styles.blocks.core/group.background.gradient (ya da beş bloktan hangisi uyuyorsa) altında theme.json‘a taşıyacağın adaylar. GA gününde taşıma. Denetimi şimdi yap, göçü Eylül başında 7.1.1 çıktıktan ve toz durulduktan sonra planlanmış bir bakım penceresinde yap.

Beta 3 veya güncel 7.1 RC adayı üzerinde bir Playground taslağında ya da staging klonunda test et, üretimde değil. Bir Group bloğuna background.gradient değeri düşür, aynı bloğa bir arka plan resmi ayarla, hem düzenleyicide hem ön yüzde render’ı doğrula. Çıkan CSS’in geliştirici notundaki desene bayt bayt uyduğunu teyit et. Aynı görsel için mevcut üretim CSS’in varsa yan yana çalıştır ve farkın boş olduğunu doğrula. Parçacığı silmeden önce ihtiyacın olan göç güveni bu.

Bugün core/cover kullanan hiçbir bloğu taşıma. Cover hâlâ color.gradient kullanıyor. Sonradan taşınırsa çekirdek geçişi o bloğun kendi PR’ında halledecek — bunu serileşmeyi değiştiren bir eklenti ya da filtreyle önden yapma. Her bloğa “resim üstüne gradyan” denetleyici kontrolü ekleyen üçüncü parti bir eklenti de kurma. Beş çekirdek blok artık buna sahip. Diğerleri çekirdeğin kendi hızında gelecek. Herhangi bir üçüncü parti kontrol, çekirdek kendi versiyonunu çıkardığı an teknik borca dönüşür.

Bunu WooCommerce 11.0 penceresinin üstüne yığma. WooCommerce 11.0 28 Temmuz’da, WordPress 7.1 19 Ağustos’ta geliyor. Aralarında üç hafta var. WC 11.0’ı önce staging’den geçir, üretime al, sonra 7.1’e geç. Aynı hafta sonuna iki ayrı triyaj kuyruğu koymak, iki sürümün kendisi yerine kesişimindeki gerilemeleri kovalayarak hafta sonu geçirmenin en hızlı yolu.

Not edilmesi gereken daha geniş sinyal şu: bir CSS parçacığından theme.json‘a taşınan her tasarım belirteci, “rastgele CSS” klasöründe bir satır daha az sapma ve tema dosyasının içinde, gerisi ile birlikte versiyonlanan bir tasarım kararı daha demek. Bu, WordPress’in her zamanki beşinci-yıl yönetişim hikâyesinin tasarım sistemi versiyonu — ve tema göçlerinin sürüm sürüm daha ucuz olmasının sebebi tam da bu.