Uporaba nove omejene postavitve v blokovnih temah WordPress

Eden od glavnih ciljev urejevalnika spletnih mest WordPress (in, da, to je zdaj "uradno" ime) je premikanje osnovnega sloga blokov iz CSS v strukturiran JSON. Datoteke JSON so strojno berljive, zaradi česar jih lahko uporablja urejevalnik spletnih mest, ki temelji na JavaScriptu, za konfiguriranje globalnih slogov teme neposredno v WordPressu.

Ni še do konca! Če pogledamo privzeto temo Twenty Twenty-Two (TT2), sta bili dve glavni nerazrešeni težavi: stilske interakcije (npr :hover, :active, :focus), In robovi in oblazinjenje vsebnikov postavitve. Kako so bili začasno popravljeni, lahko vidite v TT2 style.css datoteko, namesto da bi jo vnesli v theme.json Datoteka.

WordPress 6.1 odpravil te težave in želim si posebej ogledati slednje. Zdaj, ko imamo JSON prilagojene sloge za robove in oblazinjenje vsebnikov postavitve, nam to odpira možnost bolj prilagodljive in robustne načine za določanje razmikov v naših postavitvah tem.

O kakšnem razmiku govorimo?

Prvič, že imamo oblazinjenje na korenski ravni kar je domiseln način opisovanja oblazinjenja na element. To je lepo, ker zagotavlja dosleden razmik na elementu, ki je v skupni rabi na vseh straneh in objavah.

Toda tu je še več, ker zdaj imamo način, da bloki zaobidejo to oblazinjenje in se poravnajo po celotni širini. To je zahvaljujoč poravnave, ki upoštevajo oblazinjenje ki je nova možnost privolitve v theme.json. Torej, tudi če imate oblazinjenje na korenski ravni, lahko še vedno dovolite, recimo, sliki (ali kakšnemu drugemu bloku), da izbruhne in gre na celotno širino.

To nas pripelje do druge stvari, ki jo dobimo: omejene postavitve. Ideja tukaj je, da vsi bloki, ugnezdeni v postavitvi, upoštevajo širino vsebine postavitve – kar je globalna nastavitev – in ne tečejo zunaj nje. To vedenje lahko preglasimo od bloka do bloka s poravnavami, vendar bomo prišli do tega.

Začnimo z…

Oblazinjenje na ravni korena

Še enkrat, to ni novo. Imeli smo možnost nastaviti oblazinjenje na element v theme.json od poskusnega Gutenbergov vtičnik predstavil v različici 11.7. Postavili smo ga na styles.spacing objekta, kjer imamo margin in padding predmeti za določitev zgornjega, desnega, spodnjega in levega razmika na telesu:

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

To je globalna nastavitev. Torej, če bi morali odpreti DevTools in pregledati element, bi videli te sloge CSS:

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;
}

Kul. Toda tukaj je vprašanje, kako sploh lahko dovolimo nekaterim blokom, da izstopijo iz tega razmika, da zapolnijo celoten zaslon, od roba do roba. Zato je razmik tam, kajne? Pomaga preprečiti, da bi se to zgodilo!

Res pa je veliko primerov, ko boste morda želeli preseči ta razmik v enkratnem primeru, ko delate v urejevalniku blokov. Recimo, da na stran vstavimo slikovni blok in želimo, da gre v polni širini, medtem ko preostala vsebina upošteva oblazinjenje na korenski ravni?

Vnesite…

Poravnave, ki upoštevajo oblazinjenje

Med poskusom ustvarjanja prve privzete teme WordPress, ki definira vse sloge v theme.json Vodilni oblikovalec Kjell Reigstad v tej datoteki ponazarja zahtevne vidike odpravljanja oblazinjenja na korenski ravni Težava z GitHub.

Nove funkcije v WordPressu 6.1 so bile ustvarjene za reševanje te težave. Poglobimo se v naslednje.

useRootPaddingAwareAlignments

Novo useRootPaddingAwareAlignments Lastnost je bila ustvarjena za reševanje težave. Pravzaprav je bil prvič predstavljen v vtičniku Gutenberg v13.8. The prvotna zahteva za vleko je lep primer o tem, kako deluje.

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

Takoj na začetku opazite, da je to funkcija, ki jo moramo izbrati. Lastnost je nastavljena na false privzeto in ga moramo izrecno nastaviti na true da bi ga omogočili. Upoštevajte tudi, da imamo appearanceTools nastavljena true kot dobro. To nas vključi v kontrole uporabniškega vmesnika v urejevalniku spletnega mesta za oblikovanje obrob, barv povezav, tipografije in, da, razmikov, ki vključuje rob in oblazinjenje.

Nastavitev appearanceTools nastavljena true samodejno izbere bloke v rob in oblazinjenje ne da bi bilo treba nastaviti settings.spacing.padding or setting.spacing.margin do true.

Ko omogočimo useRootPaddingAwareAlignments, so na voljo lastnosti po meri z vrednostmi korenskega oblazinjenja, ki so nastavljene na element na sprednji strani. Zanimivo je, da uporablja tudi oblazinjenje za .editor-styles-wrapper razreda, tako da je razmik prikazan, ko delate v zalednem urejevalniku blokov. Precej kul!

Te lastnosti CSS po meri sem lahko potrdil v DevTools med kopanjem naokoli.

omogočanje useRootPaddingAwareAlignments uporabi tudi levo in desno oblazinjenje za kateri koli blok, ki podpira vrednosti širine »vsebine« in »široke« na zgornji sliki Global Styles. Te vrednosti lahko definiramo tudi v theme.json:

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

Če so nastavitve Global Styles drugačne od tistih, ki so definirane v theme.json, potem imajo globalni slogi prednost. Izvedete lahko vse o upravljanju slogov tem blokov v mojem zadnjem članku.

• contentSize je privzeta širina za bloke.
• wideSize ponuja "široko" možnost postavitve in vzpostavi širši stolpec za raztezanje blokov.

Torej, zadnji primer kode nam bo dal naslednji CSS:

/* 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] označuje edinstveno številko, ki jo samodejno ustvari WordPress.

Toda uganete, kaj še dobimo? Tudi popolna poravnava!

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

Poglej to? Z omogočanjem useRootPaddingAwareAlignments in definiranje contentSize in wideSize, dobimo tudi razred CSS s popolno poravnavo za skupno tri konfiguracije vsebnika za nadzor širine blokov, ki so dodani stranem in objavam.

To velja za naslednje bloke, specifične za postavitev: stolpci, skupina, vsebina objave in zanka poizvedbe.

Kontrolniki postavitve blokov

Recimo, da na stran dodamo katerega koli od zgoraj omenjenih blokov, specifičnih za postavitev. Ko izberemo blok, nam uporabniški vmesnik za nastavitve bloka ponudi nove nastavitve postavitve, ki temeljijo na settings.layout vrednote, ki smo jih opredelili theme.json (ali uporabniški vmesnik Global Styles).

Tu imamo opravka z zelo specifičnimi bloki – takimi, v katerih so lahko ugnezdeni drugi bloki. Torej so te nastavitve postavitve v resnici namenjene nadzoru širine in poravnave teh ugnezdenih blokov. Nastavitev »Notranji bloki uporabljajo širino vsebine« je privzeto omogočena. Če ga izklopimo, potem nimamo max-width na posodi in bloki v njej gredo od roba do roba.

Če pustimo stikalo vklopljeno, se bodo ugnezdeni bloki držali bodisi contentWidth or wideWidth vrednosti (več o tem malo kasneje). Lahko pa uporabimo številske vnose za definiranje po meri contentWidth in wideWidth vrednosti v tem enkratnem primeru. To je odlična prilagodljivost!

Široki bloki

Nastavitve, ki smo jih pravkar pogledali, so nastavljene v nadrejenem bloku. Ko vgnezdimo blok in ga izberemo, imamo v tem bloku dodatne možnosti za uporabo contentWidth, wideWidthali pojdite na celotno širino.

Opazite, kako WordPress pomnoži lastnosti CSS za oblazinjenje na korenski ravni z -1 za ustvarjanje negativnih robov pri izbiri možnosti »Polna širina«.

Uporaba omejene postavitve

Pravkar smo obravnavali nove razmike in poravnave, ki jih dobimo z WordPressom 6.1. Ti so specifični za bloke in vse ugnezdene bloke znotraj blokov. Toda WordPress 6.1 uvaja tudi nove funkcije postavitve za še večjo prilagodljivost in doslednost v predlogah teme.

Primer: WordPress je popolnoma prestrukturiral svoje vrste postavitve Flex in Flow ter nam dal omejene postavitev tip, ki olajša poravnavo postavitev blokov v temah z uporabo nastavitev širine vsebine v uporabniškem vmesniku Global Styles urednika spletnega mesta.

Postavitve Flex, Flow in Constrained

Razlika med temi tremi vrstami postavitev je v slogih, ki jih izpišejo. Isabel Brison ima odličen zapis to lepo opisuje razlike, vendar jih parafrazirajmo tukaj za referenco:

• Postavitev toka: Doda navpični razmik med ugnezdenimi bloki v margin-block smer. Te ugnezdene bloke je mogoče tudi poravnati na levo, desno ali sredino.
• Omejena postavitev: Natančno enak posel kot postavitev Flow, vendar z omejitvami širine ugnezdenih blokov, ki temeljijo na contentWidth in wideWidth nastavitve (bodisi v theme.json ali Global Styles).
• Prilagodljiva postavitev: To je bilo nespremenjeno v WordPressu 6.1. Uporablja se CSS Flexbox da ustvarite postavitev, ki privzeto teče vodoravno (v vrsti), vendar lahko teče tudi navpično, tako da se bloki nalagajo drug na drugega. Razmik se uporablja s pomočjo CSS gap nepremičnine.

Ta nova zbirka vrst postavitev ustvari semantična imena razredov za vsako postavitev:

Razred pomenske postavitve	Vrsta postavitve	Podprti bloki
.is-layout-flow	Postavitev toka	Stolpci, skupina, vsebina objave in zanka poizvedbe.
.is-layout-constrained	Omejena postavitev	Stolpci, skupina, vsebina objave in zanka poizvedbe.
.is-layout-flex	Prilagodljiva postavitev	Stolpci, gumbi, družabne ikone

Justin Tadlock ima obsežen zapis o tem različne vrste postavitev in semantične razrede, vključno s primeri uporabe in primeri.

Posodabljanje vaše teme za podporo omejenih postavitev

Če že uporabljate blokovno temo, ki ste jo izdelali sami, boste to želeli posodobite ga tako, da podpira omejene postavitve. Vse kar je potrebno je zamenjati nekaj stvari theme.json:

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

To so nedavno izdane teme blokov, ki imajo omogočene nastavitve razmika z useRootPaddingAwareAlignments in imajo posodobljeno theme.json datoteka, ki definira omejeno postavitev:

Onemogočanje slogov postavitve

Osnovni slogi postavitve so privzete funkcije, ki so vključene v WordPress 6.1 Core. Z drugimi besedami, omogočeni so takoj po izdelavi. Lahko pa jih onemogočimo, če moramo s tem majhnim delčkom functions.php:

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

Veliko opozorilo: onemogočanje podpore tudi za privzete vrste postavitev odstrani vse osnovne sloge za te postavitve. To pomeni, da boste morali razviti lastne sloge za razmike, poravnave in karkoli drugega, kar je potrebno za prikaz vsebine v različnih kontekstih predlog in blokov.

Zavijanje

Kot velikemu oboževalcu slik polne širine sta novi postavitev WordPress 6.1 in funkcije poravnave, ki upoštevajo oblazinjenje, dve moji najljubši doslej. Skupaj z drugimi orodji, vključno z boljšim nadzorom robov in oblazinjenja, tekoča tipografija, in posodobljeni bloki Seznam in Citati, med drugim, je trden dokaz, da se WordPress premika k boljši izkušnji ustvarjanja vsebine.

Zdaj moramo počakati in pogledati, kako domišljija in ustvarjalnost navadnih oblikovalcev in ustvarjalcev vsebine uporabljata ta neverjetna orodja in jih dvigujeta na novo raven.

Zaradi razvojnih iteracij urejevalnika spletnega mesta, ki so v teku, moramo vedno predvideti težko pot pred nami. Vendar pa kot optimist nestrpno pričakujem, kaj se bo zgodilo v prihajajoči različici WordPressa 6.2. Nekatere stvari, na katere pozorno spremljam, so podobne stvari lastnosti, ki se upoštevajo za vključevanje podporo za lepljivo pozicioniranje, nova imena razredov postavitve za ovoje notranjih blokov, posodobljene možnosti poravnave nogein dodajanje omejenih in tekočih možnosti postavitve blokom Cover.

Ta Težave GitHub #44720 navaja razprave, povezane s postavitvijo predviden za WordPress 6.2.

Dodatni viri

Med raziskovanjem vsega tega sem se posvetoval in skliceval na veliko virov. Tukaj je velik star seznam stvari, ki so se mi zdele v pomoč in mislim, da bi lahko tudi vam všeč.

Vaje

Objave na WordPressu

Zahteve in težave pri vleki GitHub