WordPressi saidiredaktori üks peamisi eesmärke (ja jah, see on nüüd "ametlik" nimi) on ploki põhistiili teisaldamine Alates CSS struktureeritud JSON-ile. JSON-failid on masinloetavad, mis muudab need tarbitavaks JavaScripti-põhise saidiredaktoriga, et konfigureerida teema globaalseid stiile otse WordPressis.
See pole veel lõpuni jõudnud! Kui vaatame vaiketeemat Twenty Twenty-Two (TT2), siis oli kaks peamist lahendamata probleemi: interaktsioonide kujundamine (nagu :hover, :active, :focus), Ja marginaalid ja paigutuskonteinerite polsterdamine. Näete, kuidas need ajutiselt TT2-s parandati style.css faili, selle asemel et seda teha theme.json faili.
WordPress 6.1 parandasin need probleemid ja ma tahan vaadata konkreetselt viimast. Nüüd, kui meil on paigutuskonteinerite veeriste ja polsterduse jaoks JSON-vormingus stiilid, avab see meile paindlikumaid ja tugevamaid viise meie teemapaigutustes vahede määratlemiseks.
Millisest vahekaugusest me räägime?
Esiteks, meil juba on juurtaseme polsterdus mis on väljamõeldud viis polsterduse kirjeldamiseks <body> element. See on tore, sest see tagab ühtlase vahekauguse elemendil, mida jagatakse kõigil lehtedel ja postitustel.
Kuid siin on midagi enamat, sest nüüd on meil võimalus, et plokid saavad sellest polstrist mööda minna ja end täislaiuses joondada. Seda tänu polsterdusteadlikud joondused mis on uus lubamisfunktsioon theme.json. Seega, isegi kui teil on juurtaseme polsterdus, saate siiski lubada näiteks pildil (või mõnel muul plokil) välja murda ja minna täislaiusele.
See viib meid teise asjani, mille saame: piiratud paigutused. Idee seisneb selles, et kõik paigutuses pesastatud plokid järgivad paigutuse sisu laiust – mis on globaalne säte – ega voola sellest väljapoole. Me saame selle käitumise plokkide kaupa joondustega alistada, kuid me jõuame selleni.
Alustame…
Juuretasandi polsterdus
Jällegi, see pole uus. Meil on olnud võimalus määrata polsterdus <body> element sisse theme.json alates eksperimentaalsest Gutenbergi pistikprogramm tutvustas seda versioonis 11.7. Panime selle peale styles.spacing objekt, kus meil on margin ja padding objektid, mis määravad keha ülemise, parema, alumise ja vasakpoolse vahekauguse:
{ "version": 2, "styles": { "spacing": { "margin": { "top": "60px", "right": "30px", "bottom": "60px", "left": "30px" }, "padding": { "top": "30px", "right": "30px", "bottom": "30px", "left": "30px" } } }
}See on globaalne seade. Niisiis, kui peaksime DevToolsi lahti murdma ja kontrollima <body> element, näeksime järgmisi CSS-i stiile:
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;
}Lahe. Kuid siin peitub küsimus, kuidas me saame lubada, et mõned plokid sellest vahekaugusest välja murda, et täita täisekraan, servast servani. Sellepärast on vahe seal, eks? See aitab seda vältida!
Kuid on tõepoolest palju juhtumeid, kus võiksite plokiredaktoris töötades ühekordsel eksemplaril sellest vahekaugusest välja murda. Oletame, et paneme lehele pildiploki ja tahame, et see läheks täislaiusele, samas kui ülejäänud sisu järgib juurtaseme polsterdust?
Sisenema…
Polsterdamist arvestavad joondused
Proovides luua esimest WordPressi vaiketeemat, mis määratleb kõik stiilid theme.json juhtkujundaja Kjell Reigstad illustreerib juurtaseme polsterduse väljamurdmise keerulisi aspekte selles GitHubi probleem.
Selle probleemi lahendamiseks loodi WordPress 6.1 uued funktsioonid. Järgnevalt uurime neid.
useRootPaddingAwareAlignments
Uus useRootPaddingAwareAlignments vara loodi probleemi lahendamiseks. Tegelikult tutvustati seda esmakordselt Gutenbergi pistikprogrammis v13.8. The algne tõmbamistaotlus on hea aabits selle toimimise kohta.
{ "version": 2, "settings": { "appearanceTools": true, "useRootPaddingAwareAlignments": true, // etc. },Kohe pange tähele, et see on funktsioon, mille peame valima. Kinnistu on seatud false vaikimisi ja me peame selle selgesõnaliselt määrama true selle lubamiseks. Pange tähele ka seda, et meil on appearanceTools seatud true samuti. See võimaldab meil kasutada kasutajaliidese juhtelemente saidiredaktoris ääriste, lingivärvide, tüpograafia ja, jah, vahede kujundamiseks, mis hõlmab veeriste ja polsterdust.
Kehtestamine appearanceTools seatud true valib plokid automaatselt veeristeks ja polsterdusteks ilma kumbagi seadmata settings.spacing.padding or setting.spacing.margin et true.
Kui me lubame useRootPaddingAwareAlignments, pakume kohandatud atribuute juure täidisväärtustega, mis on määratud <body> element esiotsas. Huvitaval kombel rakendab see polsterdust ka .editor-styles-wrapper klassis, nii et vahed kuvatakse taustaplokiredaktoris töötades. Päris lahe!
Suutsin need CSS-i kohandatud atribuudid DevToolsis ringi kaevates kinnitada.
võimaldamine useRootPaddingAwareAlignments rakendab ka vasakut ja paremat polsterdust kõikidele plokkidele, mis toetavad ülaltoodud globaalsete stiilide pildil "sisu" laiuse ja "laiuse" väärtusi. Samuti saame need väärtused määratleda theme.json:
{ "version": 2, "settings": { "layout": { "contentSize": "640px", "wideSize": "1000px" } }
}Kui globaalsete stiilide sätted erinevad jaotises määratletust theme.json, siis on globaalsed stiilid ülimuslikud. Saate õppida kõike plokkide teemade stiilide haldamise kohta minu viimases artiklis.
contentSizeon plokkide vaikelaius.wideSizepakub "laia" paigutuse valikut ja loob laiema veeru plokkide venitamiseks.
Niisiis, see viimane koodinäide annab meile järgmise CSS-i:
/* 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] tähistab unikaalset numbrit, mille WordPress genereerib automaatselt.
Aga arvake ära, mida me veel saame? Täielik joondus samuti!
.wp-container-[id] .alignfull { max-width: none;
}Kas näete seda? Lubades useRootPaddingAwareAlignments ja määratledes contentSize ja wideSize, saame ka täieliku joonduse CSS-klassi kokku kolme konteineri konfiguratsiooni jaoks, et juhtida lehtedele ja postitustele lisatavate plokkide laiust.
See kehtib järgmiste paigutusspetsiifiliste plokkide kohta: veerud, rühm, postitussisu ja päringusilmus.
Blokeeri paigutuse juhtnupud
Oletame, et lisame lehele mis tahes ülalnimetatud paigutusspetsiifilised plokid. Kui valime ploki, pakub ploki seadete kasutajaliides meile uusi paigutuse sätteid, mis põhinevad settings.layout väärtused, mille me määratlesime theme.json (või globaalsete stiilide kasutajaliides).
Meil on siin tegemist väga spetsiifiliste plokkidega – sellistega, mille sees võivad olla pesastatud teised plokid. Seega on need paigutuse sätted tegelikult nende pesastatud plokkide laiuse ja joonduse juhtimiseks. Säte „Sisemised plokid kasutavad sisu laiust” on vaikimisi lubatud. Kui me selle välja lülitame, siis meil pole max-width konteineril ja selle sees olevad klotsid lähevad servast servani.
Kui jätame lüliti sisse, siis pesastatud plokid järgivad kas contentWidth or wideWidth väärtused (sellest veidi pikemalt). Või võime kohandatud määratlemiseks kasutada numbrilisi sisendeid contentWidth ja wideWidth väärtused sellel ühekordsel juhul. See on suurepärane paindlikkus!
Laiad plokid
Sätted, mida me just vaatasime, on määratud vanemplokile. Kui oleme ploki sisse pesastanud ja selle valinud, on meil selles plokis lisavalikud, et kasutada contentWidth, wideWidthvõi minna täislaiusele.
contentWidth seade, mis on kontekstimenüüs sildiga "Puudub", kuid selle saab ka määrata wideWidth (sildiga "Lai laius") või "Täislaius".Pange tähele, kuidas WordPress korrutab juurtaseme polsterduse CSS-i kohandatud atribuudid arvuga -1 negatiivsete veeriste loomiseks, kui valite suvandi „Täislaius”.
.alignfull klass määrab pesastatud plokile negatiivsed veerised tagamaks, et see võtab kogu vaateava laiuse, ilma et see oleks vastuolus juurtaseme polsterduse sätetega.Piiratud paigutuse kasutamine
Käsitlesime just uusi vahekaugusi ja joondusi, mille saame WordPress 6.1-ga. Need on spetsiifilised plokkide ja plokkide sees olevate pesastatud plokkide jaoks. Kuid WordPress 6.1 tutvustab ka uusi paigutusfunktsioone, mis muudavad teema mallide veelgi paindlikumaks ja järjepidevamaks.
Näide: WordPress on oma Flexi ja Flow paigutustüübid täielikult ümber kujundanud ning andis meile piiratud paigutus tüüp, mis muudab teemade plokkide paigutuste joondamise lihtsamaks, kasutades saidiredaktori globaalsete stiilide kasutajaliidese sisu laiuse sätteid.
Painduvad, voolavad ja piiratud paigutused
Nende kolme paigutustüübi erinevus seisneb nende väljastatavates stiilides. Isabel Brisonil on suurepärane kirjutis mis kirjeldab kenasti erinevusi, kuid parafraseerime need siin viitamiseks:
- Voo paigutus: Lisab pesastatud plokkide vahele vertikaalse vahe
margin-blocksuunas. Neid pesastatud plokke saab joondada ka vasakule, paremale või keskele. - Piiratud paigutus: Sama täpne tehing kui voo paigutusel, kuid pesastatud plokkide laiusepiirangutega, mis põhinevad
contentWidthjawideWidthseaded (kas sissetheme.jsonvõi globaalsed stiilid). - Paindlik paigutus: Seda ei muudetud WordPressi versioonis 6.1. See kasutab CSS Flexbox et luua paigutus, mis vaikimisi voolab horisontaalselt (reas), kuid võib voolata ka vertikaalselt, nii et plokid virnastuvad üksteise peale. Tühikuid rakendatakse CSS-i abil
gapvara.
See uus paigutustüüpide tabel loob iga paigutuse jaoks semantiliste klasside nimed:
| Semantilise paigutuse klass | Paigutuse tüüp | Toetatud plokid |
|---|---|---|
.is-layout-flow |
Voolu paigutus | Veerud, rühmitus, postituse sisu ja päringutsükkel. |
.is-layout-constrained |
Piiratud paigutus | Veerud, rühmitus, postituse sisu ja päringutsükkel. |
.is-layout-flex |
Paindlik paigutus | Veerud, nupud, sotsiaalsed ikoonid |
Justin Tadlockil on ulatuslik kirjutis erinevad paigutustüübid ja semantilised klassid, sealhulgas kasutusjuhtumeid ja näiteid.
Teema värskendamine, et toetada piiratud paigutusi
Kui kasutate juba enda loodud plokiteema, siis soovite seda teha värskendage seda piiratud paigutuste toetamiseks. Piisab vaid paari asja väljavahetamisest theme.json:
{ "version": 2, "settings": { "layout": { "type": "constrained", // replaces `"inherit": true` "type": "default", // replaces `"inherit": false` } }
}Need on hiljuti välja antud plokkiteemad, mis on lubanud vaheseadeid useRootPaddingAwareAlignments ja värskendage theme.json fail, mis määratleb piiratud paigutuse:
Paigutusstiilide keelamine
Põhipaigutusstiilid on WordPress 6.1 Core'i vaikefunktsioonid. Teisisõnu, need on kohe karbist välja lülitatud. Kuid me saame need vajaduse korral selle väikese jupiga välja lülitada functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );Siin on suur hoiatus: ka vaikepaigutuse tüüpide toe keelamine eemaldab nende paigutuste kogu põhistiili. See tähendab, et peate rullima oma stiilid vahekauguste, joonduste ja kõige muu jaoks, mis on vajalik sisu kuvamiseks erinevates malli- ja plokkide kontekstides.
Pakke kuni
Täislaiuses piltide suure fännina on uus WordPress 6.1 paigutus ja polsterdusteadlikud joondusfunktsioonid minu kaks kõige lemmikumat. Koos muude tööriistadega, sealhulgas parem veerise ja polsterduse juhtimine, vedel tüpograafia, ning muu hulgas uuendatud loendi ja tsitaadi plokid on kindel tõend selle kohta, et WordPress liigub parema sisu loomise kogemuse poole.
Nüüd peame ootama ja vaatama, kuidas tavaliste disainerite ja sisuloojate kujutlusvõime ja loovus neid uskumatuid tööriistu kasutab ja uuele tasemele viib.
Kuna saidiredaktori arenduste iteratsioonid on pooleli, peaksime alati ette nägema rasket teed. Optimistina ootan aga põnevusega, mis saab WordPressi 6.2 peatsest versioonist. Mõned asjad, millel ma hoolikalt silma peal hoian, on sellised funktsioone, mida peetakse silmas kaasamiseks, toetamiseks kleepuv positsioneerimine, uued paigutusklasside nimed sisemiste plokiümbriste jaoks, värskendatud jaluse joondamise valikudja katteplokkidele piiratud ja voo paigutuse valikute lisamine.
see GitHubi probleemid #44720 loetleb paigutusega seotud arutelud mõeldud WordPressi versioonile 6.2.
Lisaressursid
Kõige sellesse süvenedes konsulteerisin ja viitasin paljudele allikatele. Siin on suur nimekiri asjadest, mis minu arvates olid kasulikud ja mis võiksid teile samuti meeldida.
Tutorials
WordPressi postitused
GitHubi tõmbamistaotlused ja probleemid
- Münditark. Euroopa parim Bitcoini ja krüptobörs.Kliki siia
- Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
- Allikas: https://css-tricks.com/using-the-new-constrained-layout-in-wordpress-block-themes/
