WordPress Blok Temalarında Yeni Kısıtlanmış Düzeni Kullanma

WordPress Site Düzenleyicinin ana hedeflerinden biri (ve evet, artık bu "resmi ad) temel blok stilini taşımaktır itibaren CSS'den yapılandırılmış JSON'a. JSON dosyaları makine tarafından okunabilir, bu da JavaScript tabanlı Site Düzenleyici tarafından bir temanın genel stillerini doğrudan WordPress'te yapılandırmak için tüketilebilir hale getirir.

Henüz tam olarak orada değil! Yirmi Yirmi İki (TT2) varsayılan temasına bakarsak, çözülmemiş iki ana sorun vardı: stil etkileşimleri (sevmek :hover, :active, :focus), Ve kenar boşlukları ve yerleşim kaplarının doldurulması. Bunların geçici olarak nasıl düzeltildiğini TT2'de görebilirsiniz. style.css dosyaya dönüştürmek yerine theme.json dosyası.

WordPress 6.1 bu sorunları düzelttim ve yapmak istediğim şey özellikle ikincisine bakmak. Artık düzen kaplarının kenar boşlukları ve dolgusu için JSON ile birleştirilmiş stillere sahip olduğumuza göre, bu bizi tema düzenlerimizde boşlukları tanımlamanın daha esnek ve sağlam yolları.

Ne tür bir boşluktan bahsediyoruz?

Öncelikle, zaten elimizde kök düzeyinde dolgu bu, dolguyu tanımlamanın süslü bir yolu eleman. Bu güzel çünkü tüm sayfalarda ve gönderilerde paylaşılan bir öğe üzerinde tutarlı boşluklar sağlıyor.

Ancak dahası da var çünkü artık blokların bu dolguyu atlaması ve kendilerini tam genişlikte hizalaması için bir yolumuz var. bunun sayesinde dolgu duyarlı hizalamalar yeni bir katılma özelliği olan theme.json. Bu nedenle, kök düzeyinde dolgunuz olsa bile, yine de, örneğin bir görüntünün (veya başka bir bloğun) dağılmasına ve tam genişliğe gitmesine izin verebilirsiniz.

Bu bizi elde ettiğimiz başka bir şeye götürür: kısıtlanmış düzenler. Buradaki fikir, düzende iç içe geçmiş herhangi bir bloğun, genel bir ayar olan düzenin içerik genişliğine uyması ve bunun dışına akmamasıdır. Hizalamalarla bu davranışı blok bazında geçersiz kılabiliriz, ancak buna ulaşacağız.

İle başlayalım…

Kök düzeyinde dolgu

Yine, bu yeni değil. Dolguyu ayarlama yeteneğine sahip olduk. eleman theme.json deneysel olduğundan beri Gutenberg eklentisi 11.7 sürümünde tanıttı. üzerine koyduk styles.spacing sahip olduğumuz nesne margin ve padding gövdede üst, sağ, alt ve sol boşluğu tanımlamak için nesneler:

{
  "version": 2,
  "styles": {
    "spacing": {
      "margin": {
        "top": "60px",
        "right": "30px",
        "bottom": "60px",
        "left": "30px"
      },
      "padding": {
        "top": "30px",
        "right": "30px",
        "bottom": "30px",
        "left": "30px"
      }
    }
  }
}

Bu, küresel bir ayardır. Öyleyse, DevTools'u kıracak ve inceleyecek olsaydık öğesi, şu CSS stillerini görürdük:

body {
  margin-top: 60px;
  margin-right: 30px;
  margin-bottom: 60px;
  margin-left: 30px;
  padding-top: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
}

Serin. Ancak burada, dünyada bazı blokların bu boşluktan çıkıp tüm ekranı uçtan uca doldurmasına nasıl izin verebileceğimiz sorunu yatıyor. Bu yüzden boşluk var, değil mi? Bunun olmasını önlemeye yardımcı olur!

Ancak, Blok Düzenleyici'de çalışırken tek seferlik bir örnekte bu boşluktan çıkmak isteyebileceğiniz pek çok durum vardır. Bir sayfaya bir Görüntü bloğu yerleştirdiğimizi ve içeriğin geri kalanı kök düzeyindeki dolguya saygı gösterirken tam genişlikte olmasını istediğimizi varsayalım.

Giriş…

Doldurmaya duyarlı hizalamalar

Tüm stilleri tanımlayan ilk varsayılan WordPress temasını oluşturmaya çalışırken theme.json dosya, baş tasarımcı Kjell Reigstad, bu dosyada kök düzeyinde dolguyu kırmanın zorlu yönlerini gösteriyor. GitHub sorunu.

Bu sorunu çözmek için WordPress 6.1'deki yeni özellikler oluşturuldu. Sıradakileri inceleyelim.

useRootPaddingAwareAlignments

A new useRootPaddingAwareAlignments özelliği sorunu çözmek için oluşturuldu. Aslında ilk olarak Gutenberg eklentisi v13.8'de tanıtıldı. bu orijinal çekme isteği nasıl çalıştığına dair güzel bir başlangıç.

{
  "version": 2,
  "settings": {
    "appearanceTools": true,
    "useRootPaddingAwareAlignments": true,
    // etc.
  },

Hemen, bunun etkinleştirmemiz gereken bir özellik olduğuna dikkat edin. Özellik şu şekilde ayarlandı: false varsayılan olarak ve açıkça ayarlamamız gerekiyor true etkinleştirmek için. Ayrıca sahip olduğumuza dikkat edin appearanceTools ayarlandığında true gibi. Bu bizi UI kontrollerine dahil ediyor kenarlıkları, bağlantı renklerini, tipografiyi ve evet, kenar boşluğu ve dolguyu içeren boşlukları şekillendirmek için Site Düzenleyici'de.

ayar appearanceTools ayarlandığında true blokları kenar boşluğuna ve dolguya otomatik olarak seçer herhangi birini ayarlamak zorunda kalmadan settings.spacing.padding or setting.spacing.margin için true.

Etkinleştirdiğimizde useRootPaddingAwareAlignments, bize ayarlanan kök doldurma değerlerine sahip özel özellikler sağlanır. ön uçtaki eleman. İlginç bir şekilde, aynı zamanda dolguyu .editor-styles-wrapper sınıfı, böylece arka uç Blok Düzenleyicide çalışırken boşluk görüntülenir. Oldukça havalı!

Etrafta dolaşırken DevTools'ta bu CSS özel özelliklerini onaylayabildim.

etkinleştirilmesi useRootPaddingAwareAlignments ayrıca yukarıdaki Global Stiller görüntüsündeki "içerik" genişliğini ve "geniş" genişlik değerlerini destekleyen herhangi bir bloğa sol ve sağ dolgu uygular. Bu değerleri şu şekilde de tanımlayabiliriz: theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "640px",
      "wideSize": "1000px"
    }
  }
}

Genel Stiller ayarları, içinde tanımlanandan farklıysa theme.json, ardından Genel Tarzlar öncelik kazanır. Blok tema stillerini yönetme hakkında her şeyi öğrenebilirsiniz. son yazımda.

• contentSize bloklar için varsayılan genişliktir.
• wideSize "geniş" bir düzen seçeneği sunar ve blokların uzaması için daha geniş bir sütun oluşturur.

Böylece, bu son kod örneği bize aşağıdaki CSS'yi verecektir:

/* The default content container */
.wp-container-[id] > * {
  max-width: 640px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* The wider content container */
.wp-container-[id] > .alignwide {
  max-width: 1000px;
}

[id] WordPress tarafından otomatik olarak oluşturulan benzersiz bir sayıyı belirtir.

Ama tahmin edin başka ne elde ederiz? Tam hizalama da!

.wp-container-[id] .alignfull {
  max-width: none;
}

Bunu gördün mü? etkinleştirerek useRootPaddingAwareAlignments ve tanımlayan contentSize ve wideSize, ayrıca sayfalara ve gönderilere eklenen blokların genişliğini kontrol etmek için toplam üç konteyner yapılandırması için tam hizalamalı bir CSS sınıfı elde ederiz.

Bu, aşağıdaki düzene özgü bloklar için geçerlidir: Sütunlar, Grup, Gönderi İçeriği ve Sorgu Döngüsü.

Blok düzeni kontrolleri

Diyelim ki yukarıda belirtilen düzene özgü bloklardan herhangi birini bir sayfaya ekledik. Bloğu seçtiğimizde, blok ayarları kullanıcı arabirimi bize aşağıdakilere dayalı yeni düzen ayarları sunar: settings.layout tanımladığımız değerler theme.json (veya Genel Stiller Kullanıcı Arayüzü).

Burada çok özel bloklarla uğraşıyoruz - iç içe geçmiş başka bloklara sahip olabilen bloklar. Dolayısıyla, bu Düzen ayarları gerçekten iç içe geçmiş blokların genişliğini ve hizalamasını kontrol etmekle ilgilidir. "İç bloklar içerik genişliğini kullanır" ayarı varsayılan olarak etkindir. Eğer kapatırsak, o zaman elimizde yok max-width kapta ve içindeki bloklar uçtan uca gider.

Düğmeyi açık bırakırsak, iç içe geçmiş bloklar şunlardan birine yapışacaktır: contentWidth or wideWidth değerler (biraz daha fazlası). Veya özel tanımlamak için sayısal girdileri kullanabiliriz. contentWidth ve wideWidth bu tek seferlik örnekteki değerler. Bu harika bir esneklik!

Geniş bloklar

Az önce baktığımız ayarlar ebeveyn bloğunda ayarlanmıştır. İçine bir blok yerleştirip onu seçtikten sonra, o bloğu kullanmak için ek seçeneklerimiz olur. contentWidth, wideWidthveya tam genişliğe gidin.

WordPress'in kök düzeyinde dolgu CSS özel özelliklerini şu şekilde nasıl çarptığına dikkat edin: -1 "Tam genişlik" seçeneğini seçerken negatif kenar boşlukları oluşturmak için.

Kısıtlanmış bir düzen kullanma

WordPress 6.1 ile elde ettiğimiz yeni boşlukları ve hizalamaları yeni ele aldık. Bunlar, bloklara ve bloklar içindeki yuvalanmış bloklara özgüdür. Ancak WordPress 6.1, bir temanın şablonlarında daha fazla esneklik ve tutarlılık için yeni düzen özellikleri de sunar.

Örnek olay: WordPress, Flex ve Flow düzen türlerini tamamen yeniden yapılandırdı ve bize zoraki düzen Site Düzenleyicinin Global Stiller Kullanıcı Arayüzündeki içerik genişliği ayarlarını kullanarak temalardaki blok düzenlerini hizalamayı kolaylaştıran bir tür.

Esnek, Akış ve Kısıtlanmış düzenler

Bu üç düzen türü arasındaki fark, çıktı aldıkları stillerdir. Isabel Brison'ın mükemmel bir yazısı var bu, farklılıkları güzel bir şekilde özetliyor, ancak referans için onları burada başka kelimelerle ifade edelim:

• Akış düzeni: İç içe geçmiş bloklar arasına dikey boşluk ekler. margin-block yön. Bu iç içe geçmiş bloklar ayrıca sola, sağa veya ortaya hizalanabilir.
• Kısıtlanmış düzen: Flow mizanpajı ile aynı anlaşma, ancak iç içe geçmiş bloklarda genişlik kısıtlamaları vardır. contentWidth ve wideWidth ayarlar (ya theme.json veya Global Stiller).
• Esnek düzen: Bu, WordPress 6.1'de değişmedi. kullanır CSS Esnek Kutusu varsayılan olarak yatay olarak (arka arkaya) akan, ancak dikey olarak da akabilen bir düzen oluşturmak için bloklar üst üste istiflenir. Boşluk, CSS kullanılarak uygulanır gap özelliği.

Bu yeni düzen türleri listesi, her düzen için semantik sınıf adları oluşturur:

Semantik düzen sınıfı	Yerleşim türü	desteklenen bloklar
.is-layout-flow	Akış düzeni	Sütunlar, Grup, Gönderi İçeriği ve Sorgu Döngüsü.
.is-layout-constrained	kısıtlı düzen	Sütunlar, Grup, Gönderi İçeriği ve Sorgu Döngüsü.
.is-layout-flex	esnek düzen	Sütunlar, Düğmeler, Sosyal Simgeler

Justin Tadlock hakkında kapsamlı bir yazı var. farklı düzen türleri ve semantik sınıflar, kullanım durumları ve örnekler dahil.

Kısıtlanmış düzenleri desteklemek için temanızı güncelleme

Halihazırda kendi yaptığınız bir blok temasını kullanıyorsanız, kısıtlı düzenleri desteklemek için güncelleyin. Tek gereken, içindeki birkaç şeyi değiştirmek theme.json:

{
  "version": 2,
  "settings": {
    "layout": {
      "type": "constrained", // replaces `"inherit": true`
      "type": "default", // replaces `"inherit": false`
    }
  }
}

Bunlar, boşluk ayarlarını etkinleştiren yakın zamanda yayınlanan blok temalarıdır. useRootPaddingAwareAlignments ve güncellenmiş theme.json kısıtlı bir düzeni tanımlayan dosya:

Düzen stillerini devre dışı bırakma

Temel düzen stilleri, WordPress 6.1 Core ile birlikte gelen varsayılan özelliklerdir. Başka bir deyişle, kutudan çıkar çıkmaz etkinleştirilirler. Ancak bu küçük parçacığı kullanarak gerekirse onları devre dışı bırakabiliriz. functions.php:

// Remove layout styles.
add_theme_support( 'disable-layout-styles' );

Burada büyük uyarı: varsayılan düzen türleri için desteğin de devre dışı bırakılması bu düzenler için tüm temel stilleri kaldırır. Bu, içeriği farklı şablon ve blok bağlamlarında görüntülemek için gereken boşluk, hizalama ve diğer her şey için kendi stillerinizi döndürmeniz gerekeceği anlamına gelir.

Tamamlayan

Tam genişlikte görüntülerin büyük bir hayranı olarak, yeni içerilen WordPress 6.1 düzeni ve dolguya duyarlı hizalama özellikleri, şimdiye kadarki en favorilerimden ikisi. Daha iyi marj ve dolgu kontrolü gibi diğer araçlarla birlikte ele alındığında, akışkan tipografi, ve diğerlerinin yanı sıra güncellenmiş Liste ve Alıntı blokları, WordPress'in daha iyi bir içerik oluşturma deneyimine doğru ilerlediğinin sağlam kanıtıdır.

Şimdi, sıradan tasarımcıların ve içerik oluşturucuların hayal gücünün ve yaratıcılığının bu inanılmaz araçları nasıl kullandığını ve onu yeni bir düzeye taşıdığını bekleyip görmemiz gerekiyor.

Devam eden site düzenleyici geliştirme yinelemeleri nedeniyle, her zaman önümüzde zorlu bir yol beklemeliyiz. Bununla birlikte, bir iyimser olarak, WordPress 6.2'nin gelecek sürümünde neler olacağını görmek için can atıyorum. Yakından takip ettiğim şeylerden bazıları, düşünülen özellikler katılım için, destek için yapışkan konumlandırma, yeni düzen sınıfı adları iç blok sarmalayıcılar için, güncellenmiş altbilgi hizalama seçenekleri, ve Kapak bloklarına kısıtlı ve akış düzeni seçenekleri ekleme.

Bu GitHub sorunları #44720 düzen ile ilgili tartışmaları listeler WordPress 6.2 için planlanan.

Ek kaynaklar

Tüm bunları araştırırken birçok kaynağa danıştım ve başvurdum. Yararlı bulduğum ve sizin de hoşunuza gidebileceğini düşündüğüm şeylerin büyük bir listesi burada.

Öğreticiler

WordPress gönderileri

GitHub çekme istekleri ve sorunları