WordPress temaları için CSS yazma şeklimiz, kapsamlı değişikliklerin ortasında. Geçenlerde bir teknik paylaştım WordPress'te sıvı tipi desteği ekleme yoluyla theme.json, yeni bir dosya WordPress çok zorluyor tam site düzenleme (FSE) özelliklerini destekleyen WordPress temalarında stilleri tanımlamak için merkezi bir doğruluk kaynağı haline gelmek.

Bekle hayır style.css dosya? Hala buna sahibiz. Aslında, style.css is hala gerekli bir dosya blok temalarda, rolü büyük ölçüde temayı kaydetmek için kullanılan meta bilgilere indirgenmiş olsa da. Bununla birlikte, gerçek şu ki theme.json hala aktif geliştirme aşamasındadır, yani burada tanımlanan stilleri bulabileceğiniz bir geçiş dönemindeyiz. styles.css hatta blok düzeyinde.

Peki, bu WordPress FSE günlerinde stil gerçekte nasıl görünüyor? Bu makalede ele almak istediğim şey bu. Stil bloğu temaları için dokümantasyon eksikliği var. WordPress Tema Geliştirici El Kitabı, yani burada ele aldığımız her şey, şu anda işlerin nerede olduğu hakkında bir araya getirdiklerimin yanı sıra WordPress temasının geleceği hakkındaki tartışmalardır.

WordPress stillerinin evrimi

Dahil edilen yeni gelişimsel özellikler WordPress 6.1 tamamen tanımlanmış bir stiller sistemine bizi yaklaştıracak. theme.json, ancak tam olarak dayanabilmemiz için daha yapılacak çok iş var. Gelecekteki sürümlerde nelerin geleceği hakkında bir fikir edinmemizin bir yolu, Gutenberg eklentisi. Bu, deneysel özelliklerin genellikle denemeye alındığı yerdir.

Nerede olduğumuza dair bir fikir edinmemizin bir başka yolu da evrime bakmaktır. varsayılan wordpress temaları. Bugüne kadar, tam site düzenlemesini destekleyen üç varsayılan tema vardır:

Ancak CSS'yi takas etmeye başlamayın. style.css JSON özellik-değer çiftleri için theme.json henüz. Hala desteklenmesi gereken CSS stil kuralları var. theme.json Bunu yapmayı düşünmeden önce. Geri kalan önemli konular, tüm CSS stil kurallarını tamamen içine taşımak amacıyla tartışılmaktadır. theme.json ve farklı kaynakları birleştirmek theme.json bir içine Genel stilleri ayarlamak için kullanıcı arabirimi doğrudan WordPress Site Editörü.

Bu da bizi nispeten zor bir noktada bırakıyor. sadece orada değil tema stillerini geçersiz kılmak için net bir yol yok, ancak bu stillerin kaynağının nereden geldiği bile belli değil - farklı katmanlardan mı geliyor? theme.json dosyaları, style.css, Gutenberg eklentisi veya başka bir yer?

Niye ya theme.json yerine style.css?

WordPress'in neden geleneksel bir CSS dosyası yerine JSON tabanlı bir stil tanımına doğru ilerlediğini merak ediyor olabilirsiniz. Gutenberg geliştirme ekibinden Ben Dwyer, neden theme.json yaklaşım, tema geliştiricileri için bir avantajdır.

Ben'in gönderisini okumaya değer, ancak işin özü şu alıntıda:

Düzen, ön ayar veya blok stilleri olsun, CSS'yi geçersiz kılmak, entegrasyon ve birlikte çalışabilirlik için bir engel teşkil eder: ön uç ile düzenleyici arasındaki görsel eşitliğin sürdürülmesi daha zor hale gelir, dahilileri engellemeye yönelik yükseltmeler, geçersiz kılmalarla çakışabilir. Ayrıca özel CSS, diğer blok temaları arasında daha az taşınabilirdir.

Tema yazarlarını kullanmaya teşvik ederek theme.json Mümkün olduğunda API, “temel > tema > kullanıcı” tanımlı stiller hiyerarşisi doğru bir şekilde çözülebilir.

CSS'yi JSON'a taşımanın en büyük faydalarından biri, JSON'un makine tarafından okunabilen bir format olmasıdır; bu, bir API getirilerek WordPress Site Düzenleyicisi kullanıcı arayüzünde gösterilebileceği anlamına gelir, böylece kullanıcıların varsayılan değerleri değiştirmesine ve bir sitenin görünümünü özelleştirmeden özelleştirmesine olanak tanır. herhangi bir CSS yazmak. Ayrıca, kullanıcı ayarlarının burada tanımlananlara göre en yüksek önceliği alacağı şekilde belirlilik katmanları oluşturan bir yapı sağlarken blokları tutarlı bir şekilde biçimlendirmenin bir yolunu sağlar. theme.json. Tema seviyesindeki stiller arasındaki etkileşim theme.json ve Global Styles kullanıcı arabirimindeki kullanıcı tanımlı stiller, JSON yaklaşımını bu kadar çekici kılan şeydir.

Geliştiriciler JSON'da tutarlılığı korur ve kullanıcılar kodsuz özelleştirmelerle esneklik kazanır. Bu bir kazan-kazan.

Başka faydaları da var elbette ve WP Engine'den Mike McAlister, bu Twitter dizisinde birkaç tane listeliyor. Bunda daha da fazla fayda bulabilirsiniz derinlemesine tartışma Make WordPress Core blogunda. Bunu okuduktan sonra, JSON yaklaşımının faydalarını JSON yaklaşımıyla karşılaştırın. klasik temalarda stilleri tanımlamanın ve geçersiz kılmanın mevcut yolları.

JSON öğeleriyle stilleri tanımlama

Bir temanın hangi bölümleri olduğu konusunda zaten çok ilerleme gördük. theme.json şekillendirme yeteneğine sahiptir. WordPress 6.1'den önce, gerçekten yapabileceğimiz tek şey başlıkların ve bağlantıların stilini belirlemekti. Şimdi, WordPress 6.1 ile, düğmeler, başlıklar, alıntılar ve başlıklar ekleyebiliriz karışıma.

Ve bunu tanımlayarak yapıyoruz JSON öğeleri. Öğeleri, bir WordPress bloğunda yaşayan ayrı bileşenler olarak düşünün. Başlık, paragraf ve düğme içeren bir bloğumuz olduğunu varsayalım. Bu bireysel parçalar elementlerdir ve bir elements nesne theme.json stillerini tanımladığımız yer:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}

JSON öğelerini tanımlamanın daha iyi bir yolu, blokların karmaşıklığına ihtiyaç duymayan temalar ve bloklar için düşük seviyeli bileşenlerdir. HTML ilkellerinin temsilleridir. bir blokta tanımlanmayan ancak bloklar arasında kullanılabilen. WordPress'te (ve Gutenberg eklentisinde) nasıl desteklendikleri şu bölümde açıklanmaktadır: Blok Düzenleyici El Kitabı ve bu Tam Site Düzenleme eğitimi Carolina Nymark'ın fotoğrafı.

Örneğin, bağlantıların stili şu şekildedir: elements nesnedir ancak kendi başına bir blok değildir. Ancak bir bağlantı bir blokta kullanılabilir ve blokta tanımlanan stilleri devralır. elements.link nesne theme.json. Ancak bu, bir öğenin tanımını tam olarak kapsamaz, çünkü Başlık ve Düğme blokları gibi bazı öğeler bloklar olarak da kaydedilir - ancak bu bloklar yine de diğer bloklar içinde kullanılabilir.

Şu anda stil vermek için kullanılabilen öğelerin bir tablosu theme.json, Carolina'nın izniyle:

Gördüğünüz gibi, henüz ilk günler ve Gutenberg eklentisinden WordPress Core'a taşınması gereken çok şey var. Ancak, CSS dosyalarında veya DevTools'ta seçici aramadan, bir temadaki tüm başlıklara küresel olarak stil vermek gibi bir şey yapmanın ne kadar hızlı olacağını görebilirsiniz.

Ayrıca, yapısının nasıl olduğunu da görmeye başlayabilirsiniz. theme.json küresel unsurlardan (örn. headings) tek tek öğelere (örn. h1) ve blok düzeyindeki stiller (örn. h1 bir blokta bulunur).

JSON öğeleri hakkında ek bilgiler şu adreste mevcuttur: bu WordPress teklifi yap ve bu açık bilet Gutenberg eklentisinin GitHub deposunda.

JSON ve CSS özgüllüğü

CSS özgüllüğü hakkında konuşmaya devam edelim. Daha önce stillendirmeye yönelik JSON yaklaşımının bir hiyerarşi oluşturduğundan bahsetmiştim. Ve bu doğru. JSON öğelerinde tanımlanan stiller theme.json varsayılan tema stilleri olarak kabul edilir. Ve Global Styles kullanıcı arayüzünde kullanıcı tarafından ayarlanan her şey, varsayılanları geçersiz kılar.

Diğer bir deyişle: kullanıcı stilleri, varsayılan tema stillerinden daha fazla özgüllük taşır. Bunun nasıl çalıştığına dair bir fikir edinmek için Button bloğuna bir göz atalım.

kullanıyorum boş tema, CSS stili olmayan boş bir WordPress teması. Yeni bir sayfaya bir Düğme bloğu ekleyeceğim.

Tamam, WordPress Core'un biraz hafif stil ile geldiğini biliyoruz. Şimdi, WordPress 3'den varsayılan TT6.1 temasına geçip onu etkinleştireceğim. Düğmeyle sayfamı yenilersem, düğme stilleri değiştirir.

tam olarak görebilirsin bu yeni stiller nereden geliyor TT3'lerde theme.json dosya. Bu bize JSON eleman stillerinin WordPress Core stillerine göre öncelikli olduğunu söyler.

Şimdi TT3'ü geçersiz kılarak değiştireceğim. theme.json Dosyayı, Button bloğunun varsayılan arka plan renginin kırmızı olarak ayarlandığı bir alt temada oluşturun.

Ancak son ekran görüntüsündeki arama düğmesine dikkat edin. O da kırmızı olmalı, değil mi? Bu, yaptığım değişiklik küresel düzeydeyse, başka bir düzeyde stillendirildiği anlamına gelmelidir. Eğer değiştirmek istiyorsak her ikisi de düğmeleri, site düzenleyicisindeki Global Styles UI'yi kullanarak kullanıcı düzeyinde yapabiliriz.

Her iki düğmenin arka plan rengini mavi olarak değiştirdik ve Global stiller kullanıcı arayüzünü kullanarak metni de değiştirdik. Oradaki mavinin tema stillerine göre öncelikli olduğuna dikkat edin!

Stil Motoru

Bu, WordPress blok temalarında CSS özgüllüğünün nasıl yönetildiğine dair çok hızlı ama iyi bir fikir. Ama tam resim değil çünkü hala net değil nerede bu stiller oluşturulur. WordPress'in bir yerden gelen kendi varsayılan stilleri vardır, verileri tüketir. theme.json daha fazla stil kuralı için ve Global Stiller'de ayarlanan herhangi bir şeye sahip olanları geçersiz kılar.

Bu stiller satır içi mi? Bunlar ayrı bir stil sayfasında mı? Belki de sayfaya bir şekilde enjekte edilmişlerdir. ?

işte yeni olan bu Stil Motoru inşallah çözecektir. Stil Motoru, WordPress 6.1'de stillerin nasıl oluşturulduğuna ve stillerin nereye uygulandığına tutarlılık getirmeyi amaçlayan yeni bir API'dir. Başka bir deyişle, olası tüm stil kaynaklarını alır ve blok stillerini uygun şekilde oluşturmaktan tek başına sorumludur. Biliyorum biliyorum. Sadece bazı stilleri yazmak için diğer soyutlamaların üzerine bir başka soyutlama daha. Ancak stiller için merkezi bir API'ye sahip olmak, stillerin birçok yerden gelebileceği göz önüne alındığında, muhtemelen en şık çözümdür.

Style Engine'e yalnızca ilk kez bakıyoruz. Aslında, şu ana kadar tamamlananlar, bilete göre:

• Aynı yerden (birden fazla yerden değil) teslim edilmeleri için kodun arka uçta blok desteği CSS'sini oluşturduğu yeri denetleyin ve birleştirin. Bu, kenar boşluğu, dolgu, tipografi, renkler ve kenarlıklar gibi CSS kurallarını kapsar.
• Yinelenen düzene özgü stilleri kaldırın ve semantik sınıf adları oluşturun.
• Blok, düzen ve öğe desteği için sayfaya yazdırdığımız satır içi stil etiketlerinin sayısını azaltın.

Temel olarak bu, bir tema için nereden gelirse gelsin tüm CSS stil kurallarını içeren tek bir API oluşturmanın temelidir. WordPress'in 6.1 öncesi satır içi stilleri enjekte etme şeklini temizler ve anlamsal sınıf adları için bir sistem kurar.

Style Engine'in uzun vadeli ve kısa vadeli hedefleri hakkında daha fazla ayrıntıyı burada bulabilirsiniz. WordPress Core tartışması yapın. Ayrıca aşağıdakileri de takip edebilirsiniz: izleme sorunu ve proje tahtası Daha fazla güncellemeleri için.

JSON öğeleriyle çalışma

JSON öğeleri hakkında biraz konuştuk. theme.json dosya ve diğerlerinin yanı sıra başlıklar, düğmeler ve bağlantılar gibi şeyler için varsayılan stilleri tanımlamak için temelde nasıl HTML ilkelleri olduklarını. Şimdi aslında bakalım kullanma bir JSON öğesi ve çeşitli stil bağlamlarında nasıl davrandığı.

JSON öğelerinin genellikle iki bağlamı vardır: küresel düzeyde ve blok seviyesi. Blokların kullanıldığı her yerde bloğa özgü stillerin tutarlılık için öncelik kazanmasını sağlamak için, genel düzeydeki stiller, blok düzeyinde olduğundan daha az özgüllükle tanımlanır.

JSON öğeleri için genel stiller

Yeni varsayılan TT3 temasına bakalım ve düğmelerinin stilinin nasıl olduğunu inceleyelim. Aşağıdakiler, TT3'ün kısaltılmış bir kopyala-yapıştır halidir. theme.json dosya (burada tam kod) global stiller bölümünü gösteriyor, ancak orijinal kodu burada bulabilirsiniz.

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

Tüm düğmelerin stili genel düzeydedir (styles.elements.button).

Bunu DevTools'ta da doğrulayabiliriz. adlı bir sınıfın olduğuna dikkat edin. .wp-element-button seçicidir. Aynı sınıf, etkileşimli durumlara da stil vermek için kullanılır.

Yine, bu stilin tamamı, küresel düzeyde gerçekleşiyor. theme.json. Ne zaman bir düğme kullansak aynı arka plana sahip olacak çünkü aynı seçiciyi paylaşıyorlar ve başka hiçbir stil kuralı onu geçersiz kılmıyor.

Bir kenara, WordPress 6.1 eklendi Etkileşimli durumları şekillendirme desteği sözde sınıflar kullanarak düğmeler ve bağlantılar gibi belirli öğeler için theme.json - dahil olmak üzere :hover, :focus, ve :active — veya Küresel Stiller Kullanıcı Arayüzü. Otomatik Mühendisi Dave Smith gösteriyor bu özellik bir YouTube videosunda.

Düğmenin arka plan rengini geçersiz kılabiliriz. theme.json (varsayılan bir WordPress teması kullandığımız için tercihen bir alt temada) veya site düzenleyicideki Global Stiller ayarlarında (kod değişikliği gerektirmediğinden alt tema gerekmez).

Ancak daha sonra düğmeler bir anda değişecektir. Düğme belirli bir bloğun parçası olduğunda arka plan rengini geçersiz kılmak istersek ne olur? Blok seviyesindeki stiller burada devreye giriyor.

Öğeler için blok düzeyinde stiller

Stilleri blok düzeyinde nasıl kullanabileceğimizi ve özelleştirebileceğimizi anlamak için, Arama bloğunda bulunan düğmenin arka plan rengini değiştirelim. Unutmayın, bir Button bloğu var ama bizim yaptığımız, Arama bloğunun blok düzeyinde arka plan rengini geçersiz kılmak. Bu şekilde, yeni rengi tüm düğmelere genel olarak uygulamak yerine yalnızca orada uyguluyoruz.

Bunu yapmak için, üzerinde stilleri tanımlarız. styles.blocks nesne theme.json. Bu doğru, üzerindeki tüm düğmeler için genel stilleri tanımlarsak styles.elements, düğme öğeleri için bloğa özgü stilleri tanımlayabiliriz. styles.blockbenzer bir yapıyı takip eden:

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

Bunu gördün mü? ayarladım background ve text özellikleri styles.blocks.core/search.elements.button WordPress'te önceden ayarlanmış iki CSS değişkeni ile.

Sonuç? Arama düğmesi artık kırmızı (--wp--preset--color--quaternary) ve varsayılan Düğme bloğu parlak yeşil arka planını korur.

Değişikliği DevTools'ta da görebiliriz.

Diğer bloklarda yer alan butonlara stil vermek istiyorsak da aynı şey geçerlidir. Ve düğmeler yalnızca bir örnektir, o yüzden bir başkasına bakalım.

Örnek: Her seviyede başlıkların şekillendirilmesi

Tüm bu bilgileri bir örnekle eve götürelim. Bu sefer şunları yapacağız:

• Tüm başlıkları global olarak stillendirin
• Tüm Başlık 2 öğelerini stillendirin
• Sorgu Döngüsü bloğundaki Stil Başlığı 2 öğesi

Öncelikle temel yapı ile başlayalım. theme.json:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Bu, küresel ve blok düzeyindeki stillerimizin ana hatlarını oluşturur.

Tüm başlıkları global olarak stillendirin

Ekleyelim headings global stillerimize itiraz edin ve bazı stiller uygulayın:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

Bu, tüm başlıkların rengini WordPress'te önceden ayarlanmış temel renge ayarlar. Başlık 2 öğelerinin rengini ve yazı boyutunu da global düzeyde değiştirelim:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

Şimdi, Başlık 2 öğelerinin tümü birincil ön ayar rengi olacak şekilde ayarlanmıştır. akıcı yazı tipi boyutu. Ama belki de sabit istiyoruz fontSize Sorgu Görünümü bloğunda kullanıldığında Başlık 2 öğesi için:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

Artık Başlık 2 öğeleri için üç stil düzeyimiz var: Sorgu Döngüsü bloğunda kullanılan tüm başlıklar, tüm Başlık 2 öğeleri ve Başlık 2 öğeleri.

Mevcut tema örnekleri

Bu makalede yalnızca düğmeler ve başlıklar için stil örneklerine baktık, ancak WordPress 6.1, ek öğelerin stilini destekler. bunları özetleyen bir tablo var “JSON öğeleriyle stilleri tanımlama” Bölüm.

Muhtemelen hangi JSON öğelerinin hangi CSS özelliklerini desteklediğini merak ediyorsunuzdur, bunları nasıl bildireceğinizden bahsetmiyorum bile. Resmi belgeleri beklerken elimizdeki en iyi kaynaklar, theme.json mevcut temalar için dosyalar. Özelleştirdikleri öğelere göre temalara bağlantılar sağlayacağım ve hangi özelliklerin özelleştirildiğini göstereceğim.

Her birine verdiğinizden emin olun theme.json iyi bir görünüm oluşturun çünkü bu temalar, blok düzeyinde stilin mükemmel örneklerini içerir. styles.blocks nesne.

Tamamlayan

Tam site düzenleyicide sık sık yapılan değişiklikler, birçok insan için başlıca tahriş kaynakları, dahil olmak üzere teknoloji meraklısı Gutenberg kullanıcıları. Klasik temalarla iyi çalışan çok basit CSS kuralları bile blok temalar için işe yaramıyor çünkü yeni özgüllük katmanları daha önce ele aldık.

İle ilgili olarak GitHub teklifi site editörünü yeni bir tarayıcı modunda yeniden tasarlamak, Sara Gooding bir WP Tavern yazısında yazıyor:

Aracın içinde gece gündüz çalışmadığınız sürece, Site Düzenleyicide dolaşmaya çalışırken kaybolmak kolaydır. Gezinme, özellikle şablona göz atmaktan şablon düzenlemeye ve tek tek blokları değiştirmeye geçerken, ürkek ve kafa karıştırıcı.

Gutenberg blok editörü ve blok göz temaları dünyasında hevesli bir erken sürücü olarak bile, tonlarca kendi hayal kırıklığım var. Yine de iyimserim ve tamamlandıktan sonra site düzenleyicinin hem kullanıcılar hem de teknolojiden anlayan tema geliştiriciler için devrim niteliğinde bir araç olacağını tahmin ediyorum. Bu umut verici tweet zaten bunu onaylıyor. Bu arada, daha fazla değişikliğe ve hatta belki de inişli çıkışlı bir yolculuğa hazırlanmalıyız gibi görünüyor.

Referanslar

Bu makale için bilgi araştırırken kullandığım tüm kaynakları listeliyorum.

JSON öğeleri

Küresel Stiller

Stil Motoru

Okuduğunuz için teşekkürler! Blok temaları kullanma ve CSS'nizi nasıl yönettiğiniz hakkındaki düşüncelerinizi duymayı çok isterim.