Uuden rajoitetun asettelun käyttäminen WordPress-lohkoteemoissa

Yksi WordPress-sivustoeditorin päätavoitteista (ja kyllä, se on nyt "virallinen nimi) on siirtää peruslohkotyyliä alkaen CSS strukturoituun JSONiin. JSON-tiedostot ovat koneellisesti luettavia, minkä ansiosta JavaScript-pohjainen sivustoeditori voi käyttää niitä teeman yleisten tyylien määrittämiseen suoraan WordPressissä.

Se ei ole vielä perillä! Jos tarkastelemme Twenty Twenty-Two (TT2) -oletusteemaa, kaksi pääasiallista ratkaisematonta ongelmaa oli: tyyli vuorovaikutusta (Kuten :hover, :active, :focus), Ja marginaalit ja layout-säiliöiden pehmuste. Voit nähdä, kuinka ne väliaikaisesti korjattiin TT2:ssa style.css tiedostoa sen sijaan, että tekisit sen tiedostoon theme.json tiedosto.

WordPress 6.1 korjasin nuo ongelmat, ja haluan tarkastella erityisesti jälkimmäistä. Nyt kun meillä on JSON-muotoisia tyylejä asettelusäiliöiden reunuksille ja täytteille, se avaa meille joustavampia ja kestävämpiä tapoja määrittää välilyönnit teema-asetteluissamme.

Millaisesta etäisyydestä puhumme?

Ensinnäkin meillä on jo juuritason pehmuste joka on hieno tapa kuvata pehmustetta elementti. Se on mukavaa, koska se varmistaa johdonmukaiset välit elementissä, joka jaetaan kaikilla sivuilla ja viesteissä.

Mutta siinä on muutakin, koska nyt meillä on tapa, jolla lohkot voivat ohittaa tämän pehmusteen ja kohdistaa itsensä täysleveyteen. Siitä kiitos pehmustetietoiset kohdistukset joka on uusi opt-in-ominaisuus theme.json. Joten vaikka sinulla olisi juuritason täyttö, voit silti sallia esimerkiksi kuvan (tai jonkin muun lohkon) puhkeamisen ja siirtyä täyteen leveyteen.

Se vie meidät toiseen asiaan, jonka saamme: rajoitetut asettelut. Ajatuksena tässä on, että kaikki asettelussa sisäkkäiset lohkot kunnioittavat asettelun sisällön leveyttä - joka on yleinen asetus - eivätkä virtaa sen ulkopuolelle. Voimme ohittaa tämän käyttäytymisen lohkokohtaisesti kohdistuksilla, mutta pääsemme siihen.

Aloitetaan…

Juuritason pehmuste

Jälleen, tämä ei ole uutta. Meillä on ollut mahdollisuus asettaa pehmusteita elementti theme.json kokeellisesta lähtien Gutenberg-laajennus esitteli sen versiossa 11.7. Asetamme sen päälle styles.spacing kohde, missä meillä on margin ja padding objektit, jotka määrittävät rungon ylä-, oikea-, ala- ja vasemmanpuoleisen välin:

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

Tämä on globaali asetus. Joten jos aukaisimme DevToolsin ja tarkastamme elementti, näkisimme nämä CSS-tyylit:

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

Viileä. Mutta tässä piilee kysymys siitä, kuinka voimme antaa joidenkin lohkojen murtautua ulos tästä etäisyydestä täyttämään koko näytön reunasta reunaan. Siksi välit ovat siellä, eikö? Se auttaa estämään sen tapahtumisen!

Mutta on todellakin paljon tapauksia, joissa saatat haluta irrottaa välit yksittäistapauksessa, kun työskentelet lohkoeditorissa. Sanotaanko, että asetamme sivulle kuvalohkon ja haluamme sen olevan täysleveä, kun taas muu sisältö kunnioittaa juuritason täyttöä?

Tulla sisään…

Täytetietoiset kohdistukset

Yrittäessäsi luoda ensimmäistä WordPress-oletusteemaa, joka määrittää kaikki tyylit theme.json tiedosto, pääsuunnittelija Kjell Reigstad havainnollistaa juuritason täytteen irrottamisen haastavia puolia tässä GitHub-ongelma.

WordPress 6.1:ssä luotiin uusia ominaisuuksia tämän ongelman ratkaisemiseksi. Kaivataanpa niitä seuraavaksi.

useRootPaddingAwareAlignments

Uusi useRootPaddingAwareAlignments omaisuus luotiin ongelman ratkaisemiseksi. Itse asiassa se esiteltiin ensimmäisen kerran Gutenberg-laajennuksessa v13.8. The alkuperäinen vetopyyntö on hyvä pohja siitä, miten se toimii.

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

Huomaa heti, että tämä on ominaisuus, joka meidän on valittava. Kiinteistö on asetettu false oletuksena ja meidän on asetettava se nimenomaisesti true ottaakseen sen käyttöön. Huomaa myös, että meillä on appearanceTools asetettu true samoin. Tämä ohjaa meidät käyttöliittymän hallintaan Sivustoeditorissa reunusten, linkkien värien, typografian ja, kyllä, välilyöntien muotoilua varten, joka sisältää marginaalin ja täytön.

Asetus appearanceTools asetettu true valitsee automaattisesti lohkot marginaaliksi ja täytetyksiksi ilman kumpaakaan settings.spacing.padding or setting.spacing.margin että true.

Kun otamme käyttöön useRootPaddingAwareAlignments, meillä on mukautettuja ominaisuuksia, joissa on juuritäytearvot, jotka on asetettu elementti etupäässä. Mielenkiintoista on, että se koskee myös pehmustetta .editor-styles-wrapper luokka, joten välit näytetään, kun työskentelet taustalohkoeditorissa. Aika siistiä!

Pystyin vahvistamaan nämä mukautetut CSS-ominaisuudet DevToolsissa kaivaessani ympäriinsä.

Mahdollistaa useRootPaddingAwareAlignments soveltaa myös vasenta ja oikeaa täyttöä kaikkiin lohkoihin, jotka tukevat "sisällön" leveyden ja "leveyden" arvoja yllä olevassa Global Styles -kuvassa. Voimme myös määritellä ne arvot theme.json:

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

Jos Yleiset tyylit -asetukset poikkeavat kohdassa määritellyistä theme.json, niin yleiset tyylit ovat etusijalla. Voit oppia kaiken lohkoteeman tyylien hallinnasta viimeisessä artikkelissani.

• contentSize on lohkojen oletusleveys.
• wideSize tarjoaa "leveän" asetteluvaihtoehdon ja muodostaa leveämmän sarakkeen lohkoille, joita voi venyttää.

Joten tuo viimeinen koodiesimerkki antaa meille seuraavan CSS:n:

/* 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] ilmaisee WordPressin automaattisesti luoman yksilöllisen numeron.

Mutta arvaa mitä muuta saamme? Täysi linjaus myös!

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

Näetkö tuon? Ottamalla käyttöön useRootPaddingAwareAlignments ja määrittelevä contentSize ja wideSize, saamme myös täyden kohdistuksen CSS-luokan yhteensä kolmelle säilökokoonpanolle sivuille ja viesteille lisättävien lohkojen leveyden hallintaan.

Tämä koskee seuraavia asettelukohtaisia ​​lohkoja: Sarakkeet, Ryhmä, Viestisisältö ja Kyselysilmukka.

Estä asettelun säätimet

Oletetaan, että lisäämme sivulle minkä tahansa edellä mainituista asettelukohtaisista lohkoista. Kun valitsemme lohkon, lohkoasetusten käyttöliittymä tarjoaa meille uusia asetteluasetuksia, jotka perustuvat settings.layout määrittämämme arvot theme.json (tai Global Styles UI).

Käsittelemme tässä hyvin erityisiä lohkoja – sellaisia, joiden sisällä voi olla muita lohkoja. Joten nämä asetteluasetukset koskevat itse asiassa näiden sisäkkäisten lohkojen leveyden ja kohdistuksen hallintaa. "Sisälohkot käyttävät sisällön leveyttä" -asetus on oletuksena käytössä. Jos kytkemme sen pois päältä, meillä ei ole max-width säiliössä ja sen sisällä olevat lohkot kulkevat reunasta reunaan.

Jos jätämme kytkimen päälle, sisäkkäiset lohkot kiinnittyvät joko contentWidth or wideWidth arvot (sitä lisää hieman). Tai voimme käyttää numeerisia syötteitä mukautetun määrittämiseen contentWidth ja wideWidth arvot tässä yksittäistapauksessa. Se on mahtavaa joustavuutta!

Leveät lohkot

Juuri tarkastelemamme asetukset on asetettu ylälohkoon. Kun olemme upottaneet lohkon sisään ja valinneet sen, meillä on lisävaihtoehtoja kyseisessä lohkossa käyttääksesi contentWidth, wideWidthtai täysleveäksi.

Huomaa, kuinka WordPress kertoo juuritason täytettävät CSS-ominaisuudet -1 luodaksesi negatiivisia marginaaleja, kun valitset vaihtoehdon "Täysi leveys".

Rajoitetun asettelun käyttö

Käsittelimme juuri WordPress 6.1:n avulla saamiamme uusia välilyöntejä ja tasauksia. Ne ovat ominaisia ​​lohkoille ja kaikille lohkojen sisäkkäisille lohkoille. Mutta WordPress 6.1 sisältää myös uusia asetteluominaisuuksia, jotka lisäävät teeman mallien joustavuutta ja johdonmukaisuutta.

Esimerkki: WordPress on järjestänyt täysin uudelleen Flex- ja Flow-asettelutyypit ja antanut meille rajoittavat layout tyyppi, joka helpottaa lohkoasettelujen kohdistamista teemoissa käyttämällä sivustoeditorin yleisten tyylien käyttöliittymän sisällön leveysasetuksia.

Flex-, Flow- ja Constrained-asettelut

Ero näiden kolmen asettelutyypin välillä on niiden tuottamissa tyyleissä. Isabel Brisonilla on erinomainen kirjoitus joka hahmottaa hienosti erot, mutta muotoillaan ne tässä viitteeksi:

• Flow-asettelu: Lisää pystysuuntaisen välin sisäkkäisten lohkojen väliin margin-block suunta. Nämä sisäkkäiset lohkot voidaan myös kohdistaa vasemmalle, oikealle tai keskelle.
• Rajoitettu asettelu: Sama täsmällinen sopimus kuin Flow-asettelu, mutta sisäkkäisten lohkojen leveysrajoitukset perustuvat contentWidth ja wideWidth asetukset (joko sisään theme.json tai Global Styles).
• Joustava asettelu: Tämä pysyi ennallaan WordPress 6.1:ssä. Se käyttää CSS Flexbox luodaksesi asettelun, joka virtaa oletuksena vaakasuunnassa (rivissä), mutta voi virrata myös pystysuunnassa, jotta lohkot pinoutuvat päällekkäin. Välilyöntejä käytetään CSS:n avulla gap omaisuutta.

Tämä uusi asettelutyyppien taulukko luo semanttiset luokkanimet kullekin asettelulle:

Semanttinen asetteluluokka	Asettelutyyppi	Tuetut lohkot
.is-layout-flow	Virtauksen asettelu	Sarakkeet, ryhmä, viestisisältö ja kyselysilmukka.
.is-layout-constrained	Rajoitettu asettelu	Sarakkeet, ryhmä, viestisisältö ja kyselysilmukka.
.is-layout-flex	Joustava asettelu	Sarakkeet, painikkeet, sosiaaliset kuvakkeet

Justin Tadlockilla on laaja kirjoitus aiheesta eri asettelutyypit ja semanttiset luokat, mukaan lukien käyttötapaukset ja esimerkit.

Teeman päivittäminen tukemaan rajoitettuja asetteluja

Jos käytät jo itse tekemääsi lohkoteemaa, haluat sen päivittää se tukemaan rajoitettuja asetteluja. Tarvitaan vain muutaman asian vaihtaminen theme.json:

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

Nämä ovat äskettäin julkaistuja lohkoteemoja, joissa on otettu käyttöön väliasetukset useRootPaddingAwareAlignments ja päivitä se theme.json tiedosto, joka määrittää rajoitetun asettelun:

Asettelutyylien poistaminen käytöstä

Perusasettelutyylit ovat oletusominaisuuksia, jotka toimitetaan WordPress 6.1 Core -versiossa. Toisin sanoen ne otetaan käyttöön heti laatikosta alkaen. Mutta voimme tarvittaessa poistaa ne käytöstä tämän pienen katkelman avulla functions.php:

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

Suuri varoitus tässä: myös oletusasettelutyyppien tuen poistaminen käytöstä poistaa kaiken perustyylin kyseisistä asetteluista. Tämä tarkoittaa, että sinun on rullattava omia tyylejäsi välilyöntejä, tasauksia ja kaikkea muuta, mitä tarvitaan sisällön näyttämiseen eri malli- ja lohkokonteksteissa.

Käärimistä

Koska olen suuri täysleveiden kuvien fani, uudet WordPress 6.1 -asettelu- ja täytetietoiset kohdistusominaisuudet ovat kaksi suosikkiani tähän mennessä. Yhdessä muiden työkalujen kanssa, kuten paremman marginaalin ja täytön hallinnan, nestemäinen typografia, ja muun muassa päivitetyt List- ja Quote-lohkot ovat vankka todiste siitä, että WordPress on siirtymässä kohti parempaa sisällöntuotantokokemusta.

Nyt on odotettava ja katsottava, kuinka tavallisten suunnittelijoiden ja sisällöntuottajien mielikuvitus ja luovuus käyttävät näitä uskomattomia työkaluja ja vievät ne uudelle tasolle.

Käynnissä olevien sivustoeditorien kehitysiteraatioiden vuoksi meidän tulee aina ennakoida vaikeaa polkua. Optimistina odotan kuitenkin innokkaasti, mitä WordPress 6.2:n tulevassa versiossa tapahtuu. Jotkut asiat, joita pidän tarkasti silmällä, ovat sellaisia ominaisuuksia harkitaan sisällyttämistä varten, tukea tahmea sijainti, uudet taittoluokkien nimet sisälohkokääreille, päivitetyt alatunnisteen kohdistusasetuksetja rajoitettujen ja virtausasetteluvaihtoehtojen lisääminen kansilohkoihin.

Tämä GitHub-ongelmat #44720 luettelee ulkoasuun liittyvät keskustelut suunniteltu WordPress 6.2:lle.

Lisäresurssit

Kuuntelin ja viittasin moniin lähteisiin kaivaessani tätä kaikkea. Tässä on suuri luettelo asioista, joista pidin apua ja joista uskon sinunkin pitävän.

Opetusohjelmat

WordPress-postauksia

GitHubin vetopyynnöt ja ongelmat