WordPress 7.1 Duyarli Blok Stilleri Global Styles’a Geldi

WordPress temaları yazdığım günden beri — ki bu tema klasörünün üç PHP dosyası ve bir stylesheet’ten ibaret olduğu döneme kadar uzanıyor — mobil uyum hep tek bir yerde yaşadı: style.css‘in dibindeki medya sorgu bloğu. Diğer her şey ileri gitti. Renkler ön ayara döndü. Boşluk ölçüleri belirteç oldu. Tipografi theme.json‘da bir ölçek haline geldi. Medya sorguları ise 2012’deki yerinde, tasarım sisteminin tam dışında, her sürümde biraz daha uzağa savrularak durdu.

WordPress 7.1 bu blokun nihayet içeri girdiği sürüm. Tablet ve mobil stiller artık Global Styles’ın ve her bloğun kendi style özniteliğinin parçası — tasarım sisteminin geri kalanıyla aynı biçimde, aynı theme.json dosyasında, 2015’te açılmış bir WordPress sitesini 2026’da temiz güncellemene izin veren aynı yönetişim katmanında.

Blok editörü çıktığı günden beri bunu bekliyordum. Aşağıda gerçekten ne indi ve 19 Ağustos’taki GA’dan önce çarşamba öğleden sonrasını nereye harcardım — açık konuşayım.

Aslında ne yeni

Isabel Brison, 5 Ağustos 2026 tarihinde Make/Core’da “Responsive Block Styles and Configurable Viewports in WordPress 7.1” geliştirici notunu yayınladı — aynı gün 7.1 Release Candidate 1 da çıktı. Peer reviewer @tyxla, katkı sağlayanlar @ramonopoly ve @wildworks. Değişiklik Trac #65164 (duyarlı stil durumları) ve Trac #65596 (özelleştirilebilir kesme noktaları) altında izleniyor.

Mekanik iki yeni anahtardan ibaret — @mobile ve @tablet — ve blok stilinin zaten yaşadığı her yere yerleştirilebiliyor: theme.json içindeki styles.blocks.core/paragraph‘a, bir blok örneğinin style özniteliğine, bir blok stil varyasyonuna. Tasarım sisteminin zaten konuştuğu her blok desteğine uygulanıyor: tipografi, renk, arka plan, çerçeve, boyut, boşluk ve layout. Varsayılan stil temel olarak kalıyor; duyarlı anahtarlar kendi görünüm alanları içinde onu geçersiz kılıyor. Brison’un kendi cümlesi kayda değer: “The default style remains the base style and applies at every viewport. Tablet and Mobile styles override that base within their respective breakpoint ranges.”

Varsayılan kesme noktaları mobil için @media (width <= 480px), tablet için @media (480px < width <= 782px) olarak geliyor. Masaüstü temel — bilinçli olarak @desktop anahtarı yok. Ve önemlisi, her iki kesme noktası da tema düzeyinde özelleştirilebilir:

"settings": {
  "viewport": {
    "mobile": "30rem",
    "tablet": "45rem"
  }
}

Değerler px, em veya rem cinsinden negatif olmayan sayısal uzunluk olmak zorunda. Yüzdeler, CSS fonksiyonları ve birimsiz sayılar reddediliyor. Bir tema tablet’i mobile eşit veya küçük ayarlarsa, tablet kesme noktası tersine dönmesin diye tamamen bırakılıyor. settings.viewport yalnızca üst düzey — bilinçli tasarım kararı olarak blok tipi başına ayarlanamıyor.

Örnek başına duyarlı stiller bloğun mevcut style özniteliğinin içinde yaşıyor — yeni öznitelik yok, veri göçü yok:

<!-- wp:paragraph {"style":{"@mobile":{"typography":{"fontSize":"1rem"}}}} -->

Çekirdek, render sırasında medya sorgusu kapsamlı CSS üretiyor ve render edilen bloğa sabit sınıflar ekliyor. Örnek başına deklarasyonlar temel inline stili yensin diye !important alıyor. Editör tarafında bir opt-out var — responsiveEditingEnabled ayarı varsayılan olarak true; kapattığında “Responsive styles” düğmesi ve States dropdown’ındaki “Viewport” grubu kayboluyor, cihaz önizlemeleri ise dokunulmuyor.

Aynı gün yayınlanan iki bağlı geliştirici notu aynı resmin parçası. Daniel Richards’ın “Pseudo and Custom Style States” notu Button ve Navigation Link bloklarına :hover, :focus, :focus-visible ve :active ekliyor, üstüne Navigation Link için aktif menü öğesini stillendiren -current özel durumunu getiriyor. Pseudo durumlar duyarlı durumların içine iç içe yerleştirilebiliyor — @mobile içinde :hover — yani iki API birbiriyle kompoze oluyor. Aaron Jorbin’in RC aşama notu ve Milana Cap’ın 7.1 Field Guide‘ı (310’dan fazla Trac ticket özeti) yüzeyi 19 Ağustos GA için sabitliyor.

Geriye dönük uyumluluk tam. Bir tema yeni anahtarlara hiç dokunmazsa hiçbir şey değişmiyor. Mevcut blok markup’ı aynı şekilde render ediliyor. Eski theme.json dosyaları geçerli kalıyor.

WordPress ve WooCommerce insanları için neden önemli

Son beş yılda yayına aldığım her WooCommerce mağazasının çocuk temasında aynı desen var: ürün ızgarası, hero banner, sepet düzeni ve hesap sayfaları için temiz, belirteçlendirilmiş bir stil takımı — ardından stylesheet’in dibinde telefonda yazı boyutlarını düzelten yirmi otuz satır @media (max-width: 768px) geçersiz kılma. O alt bölüm tasarım sistemi disiplininin öldüğü yer. Anlamlı hiçbir şekilde sürümlenmiyor, theme.json araçlarına görünmüyor ve müşteri yeni bir tasarıma geçmek istediğinde tema göç bütçesinin ilk şiştiği nokta orası.

O geçersiz kılmaları theme.json altında styles.blocks.core/group.@mobile veya styles.blocks.core/heading.@tablet‘e taşımak, onları tasarım sisteminin geri kalanının yaşadığı yere yerleştiriyor. Belirteçler tema dosyasıyla birlikte gidiyor. wp theme.json araçlarına görünür oluyorlar. Temel stillerle aynı code review’e giriyorlar. Ve mağaza on sekiz ay sonra tema değiştirdiğinde, duyarlı hikâye kimsenin okumadığı bir stylesheet’ten tersine mühendislik yapılarak değil, olduğu gibi taşınıyor.

Özelleştirilebilir görünüm alanları göründüğünden daha önemli. Ciddi bir ajansın zaten kendi kesme noktalarını tanımlamış bir tasarım sistemi vardır — 40rem ve 60rem, ya da 640px ve 1024px, ya da marka rehberinin üç yıl önce sabitlediği ne ise. Bunları settings.viewport altında ilan edip her duyarlı stilin bunlara göre çözümlenmesini sağlamak, temanın nihayet WordPress’in varsayılanlarına zorlamak yerine müşterinin dilini doğal olarak konuşması demek.

Pseudo-durum notu aynı pencerede iniyor ve ben bunları tek bir sürüm olarak ele alırım. Button hover durumları WooCommerce proje teslimlerinde aldığım tek başına en çok istenen “küçük ince ayar”. Şimdiye kadar cevap Additional CSS parçacığıydı. Artık theme.json‘da tek bir blok.

Ben olsam ne yaparım (ya da yapmam)

Bu hafta dört şey — RC1 çalışan staging kopyalarında, üretimde değil ve pazartesiden beri güncelleme penceresi hâlâ açık olan hiçbir WooCommerce 11.0 sitesinde değil.

Bir, yönettiğin her çocuk temayı ve her Additional CSS blobunu @media deklarasyonları için grep’le. O liste göç envanterin. Çoğu, theme.json‘daki karşılık gelen blok altında @mobile ve @tablet anahtarlarına temiz şekilde toplanır. Hiçbir şeyi GA gününde göç ettirme — şimdi listele, Eylül penceresinde 7.1.1 rafa kalktıktan sonra göç ettir.

İki, temsili bir sitede theme.json‘a tasarım sisteminin zaten kullandığı kesme noktalarıyla settings.viewport ekle. Marka rehberi 640px ve 1024px diyorsa onu ilan et, sonra en çok vurulan iki üç duyarlı geçersiz kılmayı — bir başlık boyutu, bir paragraf boyutu, bir grup padding — taşı ve render edilen HTML ile üretilen CSS’i mevcut üretim davranışına karşı diff’le. Başka hiçbir şeye dokunmadan önce diff boş olmalı.

Üç, shop manager veya marka ekibinin sayfaları doğrudan düzenlediği mağazalarda, responsiveEditingEnabled‘ın açık kalıp kalmayacağına karar ver. Benim varsayılanım açık — “Responsive styles” düğmesi diğer her blok inspector kontrolüyle aynı biçimde ve editörler bunu çözer — ama içerik ekibinin küçük ve tasarımın kilitli olduğu mağazalarda, bir mu-plugin ile kapatmak yüzeyi dar tutar ve “mobil neden tasarladığımdan farklı görünüyor” tiketlerinin bir kaynağını ortadan kaldırır.

Dört, tüm sunumu “duyarlı blok stilleri için UI ekler” olan hiçbir eklentiyi kurma. Yüzey tek bir JSON yapısı ve tek bir settings anahtarı. Bunu wp_options‘da kesme noktaları saklayan bir ayar ekranına sarmak, bu API’nin retire etmek için tasarlandığı teknik borcun ta kendisi — kesme noktaları veritabanı satırında değil, tema dosyasında, tasarım belirteçlerinin geri kalanıyla birlikte sürümlenmiş olarak yaşamalı; birinci tema göçünde hayatta kalıp ikincisinde kaybolan bir wp_option satırında değil.

İki takvim notu. WooCommerce 11.0 salı günü Brian Coords’un yayın notu ile indi; Action Scheduler 4.0 bağımlılığı hâlâ en dikkatli triyaj edilmesi gereken değişiklik. WooCommerce 11.0 ile WordPress 7.1’i ayrı değişiklik pencerelerinde tut. Aynı öğleden sonra aynı estate üzerinde iki hareketli yüzey — cumartesini hangisinin bozduğunu daraltarak geçirmenin klasik yoludur.

“Rastgele CSS” klasöründen çıkıp theme.json‘a giren her tasarım belirteci bir sonraki tema göçünü bir yüzdelik puan daha ucuzlatıyor. Duyarlı stiller sistemin dışında kalan tek en büyük kova. WordPress 7.1 nihayet onları içeri alıyor — sessizce, eklemeli olarak ve önceden yayınlanmış hiçbir şeyi bozmadan.