Bir Tasarım Sistemini WordPress Block Editor Pt. 1: tema.json

Yayınlanan: 2022-12-15

Bir önceki blog yazımızda, tasarım sisteminizi Figma'dan bir WordPress temasının theme.json'una nasıl aktarabileceğinizi göstermiştik. Bunu yaparak, dijital mülklerinizde sürekli tutarlılık sağlayabilirsiniz.

Yeni iki bölümlü serimiz, blok düzenleyicide theme.json'dan içe aktarılan tasarım belirteçlerini nasıl kullanabileceğinizi göstererek bu temel üzerine kuruludur. Bu, WordPress sitenizi tasarım sisteminizi yansıtacak şekilde daha iyi düzenlemenize olanak tanır. İki temel hedef vardır:

  • theme.json'un tasarım sistemleriyle ilgili kısımlarını anlama
  • İçe aktarılan tasarım sistemini kullanmak için theme.json'u değiştirin ve genişletin

theme.json'u anlama

theme.json, blok düzenleyiciyi yapılandırmanıza ve temalandırmanıza, blok ayarlarını değiştirmenize ve tam bir blok teması geliştirmek için temeller oluşturmanıza olanak tanıyan bir yapılandırma dosyasıdır.

WordPress siteniz için genel ayarları ve stilleri kontrol etmenize izin vermek içindir. Her yeni WordPress VIP sitesi, varsayılan olarak bir blok tema olan Twenty Twenty-Three temasıyla gelir. Bu tema, hafif bir blok temasıyla denemeler yapmak ve theme.json'da bulunan bazı güçlü kontrolleri anlamak için harika bir başlangıç ​​noktasıdır.

theme.json değiştiriliyor

Bir önceki blog yazımızda kullandığımız theme.json ile başlayalım. Köprü aracımızın Figma'dan bir tasarım sistemi ekleyebileceği ve güncelleyebileceği özel bölüme dikkat edin. Bu, theme.json'u etkili bir şekilde kullanmak için tasarım sisteminizin çeşitli bileşenlerine (tasarım belirteçleri) başvurduğunuz anahtar bölümdür.

Aşağıda, theme.json'un sunduğu her şeyden yararlanabilmeniz için ipuçlarını ve stratejileri ele alıyoruz.

Tasarım Simgelerini Depolama

Tasarım belirteçlerinizin konumu, köprü aracı kullanılarak özelleştirilebilirken, bunlar her zaman ayarların özel bölümünde tutulmalıdır. Bu, köprü aracının varsayılan konumudur ve değiştirilmemelidir. Bu, onları tek bir konumda düzgün bir şekilde organize etmelerini sağlar ve mevcut özel tema bölümleriyle çakışmaların önlenmesine yardımcı olabilir.

Tasarım Simgelerini Kullanma

Şimdi theme.json'un özel bölümünü kullanmanın bir örneğini görelim. Burada, yeşil bir birincil metin rengi ve siyah bir arka plan tanımladığımız bir snippet'imiz var:

 "settings": { "custom": { "text": { "primary": "#00FF00", “background”: “000000” } } } }

Bu, aşağıdakileri kullanarak theme.json içinde herhangi bir yerde bu iki renge başvurmamızı sağlar:

 var(--wp--custom--text--primary) and var(--wp--custom--text--background)

Aşağıdaki parçacığı, aksi belirtilmedikçe varsayılan olarak her bloğun üzerinde yeşil metin bulunan siyah bir arka plana sahip olmasını sağlar:

 "styles": { "color": { "text": "var(--wp--custom--text--primary)", “background”: “var(--wp--custom--text--background)” } }

Özel ayarlarınızdan başvurmak istediğiniz herhangi bir anahtarın şeması şöyledir:

 var(--wp--custom–<location to the value with -- as a separator between each key>)

Bunun yararı, gerçek değerin yönetildiği tek bir merkezi konuma sahipken bu anahtarları kullanarak tüm tasarım belirteçlerinize başvurabilmenizdir.

En iyi uygulamalar

  • Her yerde belirteçlere başvurmak için WordPress tarafından oluşturulan tasarım belirteci değişkenlerini (örneğin, var(--wp--custom--text--primary) ) kullanın. Gerçek değeri kullanmak yerine birincil ve arka plan özel rengine atıfta bulunduğumuz, yukarıda verilen parçacığa dikkat edin. Bu, metin rengi gibi özellikleri güncellemek istediğinizde yalnızca tek bir konumu değiştirmeniz gerekmesini sağlar, çünkü diğer konumlar sadece referanslardır.
  • theme.json'a eklenen tasarım belirteçlerine, yukarıda gösterilen aynı anahtar referansı kullanılarak, theme.json'un dışında CSS ile erişilebilir. Bu, blok geliştirme ve bir temada kullanılan diğer bileşenler için geçerlidir. Yalnızca theme.json içinde kullanım amaçlı değildirler ve herhangi bir özel CSS'de yeniden kullanılmaları gerekir.

theme.json'u tek bir doğruluk kaynağı olarak tutmak için bu en iyi uygulamaların her ikisini de izlemenizi öneririz. Özellikle WordPress VIP'nin Figma'ya bağlanan köprü aracı gibi otomatik araçları kullandığınızda, tasarım belirteçlerini kolayca güncellemenize olanak tanır.

Editör ve blok stillerini değiştirin

Yukarıdaki parçacıklar, blokların biçimlendirilme şeklini özelleştirmeye dalmak için harika bir yoldur. Örneğin, bir bloğun varsayılan stilini ve ayrıca blok düzenleyiciden hangi hazır ayarların seçilebileceğini değiştirebilirsiniz. Bu, daha ayrıntılı olmak ve sitenizde kullanılan yerleşik blokların tam olarak nasıl görüneceğini belirlemek istediğinizde kullanışlıdır.

theme.json'da iki anahtar konum vardır:

  • Ayarlar ve ayarlar.bloklar—genel olarak blok düzenleyicide bulunan ayarların özelleştirilmesine ve bireysel blok türleri için uyarlanmış ayarlara izin verir.
  • Stiller ve stiller.bloklar—tüm blok düzenleyici için ön ayar stilinin ve blok başına özelleştirmelerin tanımlanmasına izin verir.

Örneğin, tüm başlıkların varsayılan bir yeşil (birincil) renge ve bir ikincil renk seçeneğine sahip olmasını şu şekilde sağlayabilirsiniz:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }, "styles": { "blocks": { “core/heading”: { “color”: { "text": "var(--wp--custom--text--primary)" } } } }

Bu, her başlık bloğunu birincil yeşil metin rengine sahip olacak şekilde yapılandırır ve rengi kırmızı ikincil renge değiştirmek için ikinci bir blok düzenleyici seçeneği ekler. Not: Bu biraz tekrar gerektirir. Stil, varsayılan birincil rengi belirtir ve palet, blok düzenleyicide her iki seçeneği de sağlamak için aynı rengi ikincil bir renkle birleştirir.

Stil uyarısı

Bloklarınızı mümkün olduğunca şekillendirmek için yalnızca theme.json'un styles ve styles.blocks bölümlerini kullanın. Kesinlikle gerekli olmadıkça temel blok stillerini geçersiz kılmak için CSS stilini kullanmayın. Blok stilleri için CSS geçersiz kılmaları genellikle kararlı değildir - blok düzenleyici güncellemeleri, stili ve yapıyı değiştirerek bu stillerin bozulmasına neden olabilir.

Blok başına özelleştirme

Yukarıdaki örnek, bir bloğun ayarlarının ve stilinin nasıl özelleştirileceğini gösterirken, özelleştirmeyi tamamen devre dışı bırakmak ve blok düzenleyici seçeneklerini belirli bloklarla sınırlandırmak da mümkündür. Bu, tasarım sisteminin görünümünü ve hissini koruyarak içerik oluşturmak için hangi seçeneklerin mevcut olduğunu kesin olarak kontrol etmek için kullanışlıdır.

Renk, tipografi ve aralık gibi diğer yapılandırılabilir özellikler için aynı ilkelerin geçerli olduğu başka bir renk ayarları örneğiyle devam edelim. Başlık blokları dışında her yerde varsayılan metin rengini değiştirme özelliğini devre dışı bırakmak için theme.json şu şekilde yapılandırılabilir:

 "settings": { "custom": { "text": { "primary": "#00FF00", “secondary”: “#FF0000” } }, “color”: { “text”: false }, “blocks”: { “core/heading”: { “color”: { “text”: true, “palette”: [ { "slug": "primary", "color": "var(--wp--custom--text--primary)", "name": "Primary" }, { "slug": "secondary", "color": "var(--wp--custom--text--secondary)", "name": "Secondary" } ] } } } }

Bu örnek, ayarlar aracılığıyla genel ayarların ve ayarlar altındaki bloklar bölümü aracılığıyla bloğa özgü ayarların yapılandırılmasını gösterir. Bu aynı zamanda genel stillendirme (kök stiller özelliği altında bulunur) ve bloğa özgü stillendirme (styles.blocks altında) için de geçerlidir.

Basit hazır şablon

Tasarım sistemini oluşturmaya başlamanın iyi bir yolu, blok düzenleyici ayarlarını genel olarak kilitlemektir. Bundan sonra, bireysel bloklar için ayarları aşamalı olarak etkinleştirebilir ve özelleştirme seçenekleriyle boğulmadan tasarım sisteminizin nasıl göründüğünü ve nasıl hissettirdiğini kontrol edebilirsiniz. Düzenleyicide varsayılan olarak , tipografi ve boşluk denetimleri:

 { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "settings": { "appearanceTools": true, "border": { "color": false, "radius": false, "style": false, "width": false }, "color": { "text": false, "background": false, "link": false, "custom": false, "defaultPalette": false, "defaultGradients": false, "defaultDuotone": false, "customGradient": false, "customDuotone": false, "palette": [ // Design system palette colors... ], "gradients": [ // Design system gradients... ] }, "spacing": { "margin": false, "padding": false, "units": ["rem", "%"] }, "typography": { "customFontSize": false, "fontStyle": false, "fontWeight": false, "letterSpacing": false, "lineHeight": false, "textDecoration": false, "textTransform": false, "dropCap": false, "fontFamilies": [], "fontSizes": [] } } }

Bu kilitli varsayılanlarla, düzenleyicide belirli bloklar için seçenekleri ortaya çıkarmak ve özelleştirmeyi iyi tanımlanmış ayarlarla sınırlamak için settings.blocks'u kullanabilirsiniz.

Sonuç olarak

Theme.json, genel tasarım belirteçlerini düzenlemek, genel tema stillerini ayarlamak ve tek tek blokları özelleştirmek için güçlü bir araçtır. Blok düzenleyicinin kişiselleştirme için sunduğu tüm özelliklerden yararlanılması, tasarım sistemi uygulamasını merkezi ve yerleşik blok düzenleyiciyle uyumlu hale getirir.

Dizimizin 2. Bölümünde, bir tasarım sisteminde yerleşik blok türlerini ve stillerini yönetmek için theme.json dışındaki daha gelişmiş ipuçlarını ele alacağız.

Kullanışlı bağlantılar

  • Theme.json nedir?
  • Genel Ayarlar ve Stiller (theme.json)

Yazarlar

Alec Geatches, Automattic Kıdemli Yazılım Geliştiricisi

Taipei, Tayvan'da yaşayan Kurumsal WordPress geliştiricisi ve tasarım sistemleri meraklısı.

Gopal Krishnan, Automattic Kıdemli Yazılım Geliştiricisi

Gopal, tasarım sistemleri ve Gutenberg'e ilgi duyarak WordPress VIP'nin ayrıştırılmış WordPress teklifi üzerinde çalışıyor. Sidney, Avustralya'da yaşıyor ve yakın zamanda Kanada'dan taşındı.