WordPress 7.1 Arka Plan Gradyan Blok Desteğini Getirdi

Her WordPress sürümünün, geliştirici notunda önemsiz görünüp sessizce sizi 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 tutabilir. Önemli olan şu ki gradyan nihayet background kısayolu yerine background-image özelliği üzerine oturuyor. Yani hemen üstünde ayarladığınız arka plan resmiyle kavgayı bırakıyor.

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 istememesinden ötürü hâlâ hayatta. İşte bu düzeltildi. Hem de mevcut temalara dokunmayan, katkı olarak eklenen ve tercihe bağlı bir şekilde.

Bu, blok düzenleyicisinin border-radius, box-shadow ve harf aralığı ile yaptığı 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ız aynı seçici bileşen, 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ığınızda resmin silinme sebebi 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ız 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ü. Bu, WordPress’in yönetişim katmanının tam da tasarlandığı gibi çalışması: yavaş, katkı olarak eklenen, geriye uyumlu, tema dahil olmayı seçmiyor, tema 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 yazmayın.

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ıldır 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şfedilebilir. 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ğinizde 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 katmanlamanıza 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ı.

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

Bu hafta yapın: 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’leyin. 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ız adaylar. GA gününde taşımayın. Denetimi şimdi yapın, göçü Eylül başında 7.1.1 çıktıktan ve toz durulduktan sonra planlanmış bir bakım penceresinde yapın.

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

Bugün core/cover kullanan hiçbir bloğu taşımayın. 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 yapmayın. Her bloğa “resim üstüne gradyan” denetleyici kontrolü ekleyen üçüncü parti bir eklenti kurmayın. 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ığmayın. 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çirin, üretime alın, sonra 7.1’e geçin. 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ündeki 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 bu.