A WordPress Site Editor egyik fő célja (és igen, ez most a "hivatalos név) az alapvető blokkstílus áthelyezése ból ből CSS strukturált JSON-ra. A JSON-fájlok géppel olvashatók, így a JavaScript-alapú Site Editor felhasználhatóvá teszi a téma globális stílusainak közvetlenül a WordPressben történő konfigurálásához.
Még nincs vége! Ha a Twenty Twenty-Two (TT2) alapértelmezett témát nézzük, két fő megoldatlan probléma volt: stílus interakciók (mint :hover, :active, :focus), És a margókat és a elrendezési konténerek kitömése. A TT2-ben láthatja, hogyan javították ezeket ideiglenesen style.css fájlt, ahelyett, hogy a theme.json fájlt.
WordPress 6.1 kijavítottam ezeket a problémákat, és konkrétan az utóbbira szeretnék figyelni. Most, hogy JSON-alapú stílusokkal rendelkezünk az elrendezési tárolók margóihoz és kitöltéséhez, ez megnyílik számunkra rugalmasabb és robusztusabb módjai a térköz meghatározásának témaelrendezéseinkben.
Milyen távolságtartásról beszélünk?
Először is, már megvan gyökérszintű padding ami egy divatos módja a padding leírásának a elem. Ez jó, mert biztosítja az egységes térközt az összes oldalon és bejegyzésen megosztott elemen.
De ennél többről van szó, mert most már módunk van arra, hogy a blokkok megkerüljék ezt a párnázást, és teljes szélességben igazodjanak. Ez annak köszönhető párnázás-tudatos igazítások amely egy új feliratkozási funkció theme.json. Tehát még ha gyökérszintű padding is van, akkor is megengedheti, hogy mondjuk egy kép (vagy más blokk) kitörjön és teljes szélességben megjelenjen.
Ez elvezet minket egy másik dologhoz, amit kapunk: korlátozott elrendezések. Az ötlet az, hogy az elrendezésbe beágyazott blokkok tiszteletben tartják az elrendezés tartalmi szélességét – ami egy globális beállítás –, és nem áramlanak azon kívülre. Ezt a viselkedést blokkonként felülírhatjuk igazításokkal, de rátérünk.
Kezdjük a…
Gyökérszintű párnázás
Ismétlem, ez nem újdonság. Lehetőségünk volt párnázást beállítani a elem be theme.json mivel a kísérleti Gutenberg bővítmény bevezette a 11.7-es verzióban. Beállítottuk a styles.spacing tárgyat, ahol van margin és a padding objektumok a felső, jobb, alsó és bal térköz meghatározásához a törzsön:
{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}Ez egy globális beállítás. Tehát, ha feltörnénk a DevTools programot, és megvizsgálnánk a elemet, a következő CSS-stílusokat látjuk:
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;
}Menő. De itt rejlik az a kérdés, hogy a világban hogyan engedhetjük meg, hogy egyes blokkok kitörjenek ebből a térközből, hogy kitöltsék a teljes képernyőt, szélektől szélig. Ezért van a szóköz, nem? Segít megelőzni, hogy ez megtörténjen!
De valóban sok olyan eset van, amikor érdemes kitörni ebből a szóközből egy egyszeri példánynál, amikor a Blokkszerkesztőben dolgozik. Tegyük fel, hogy egy képblokkot felhúzunk az oldalra, és azt akarjuk, hogy az teljes szélességben legyen, miközben a tartalom többi része tiszteletben tartja a gyökérszintű kitöltést?
Belép…
Padding-figyelő igazítások
Miközben megpróbálta létrehozni az első alapértelmezett WordPress-témát, amely meghatározza az összes stílust a theme.json fájl, a vezető tervező, Kjell Reigstad szemlélteti a gyökérszintű kitöltésből való kitörés kihívásait ebben GitHub probléma.
A probléma megoldására a WordPress 6.1 új funkciói készültek. A következőkben ássuk be ezeket.
useRootPaddingAwareAlignments
Egy új useRootPaddingAwareAlignments ingatlan a probléma megoldására jött létre. Valójában először a Gutenberg bővítmény v13.8-ban vezették be. Az eredeti lehívási kérelem egy szép alapozó a működéséhez.
{
"version": 2,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
// etc.
},Azonnal vegyük észre, hogy ez egy olyan funkció, amely mellett döntenünk kell. Az ingatlan be van állítva false alapértelmezés szerint, és ezt kifejezetten be kell állítanunk true annak engedélyezése érdekében. Azt is vegyük észre, hogy van appearanceTools állítva true is. Ez lehetővé teszi számunkra a felhasználói felület vezérlését a Webhelyszerkesztőben a szegélyek, a linkszínek, a tipográfia és igen, a térköz kialakításához, amely magában foglalja a margót és a kitöltést is.
Beállítás appearanceTools állítva true automatikusan kiválasztja a blokkokat margóra és kitöltésre anélkül, hogy bármelyiket be kellene állítani settings.spacing.padding or setting.spacing.margin nak nek true.
Amikor engedélyezzük useRootPaddingAwareAlignments, egyedi tulajdonságokat biztosítunk gyökérkitöltési értékekkel, amelyek a elem az elülső végén. Érdekes módon a párnázást is alkalmazza a .editor-styles-wrapper osztályba, így a térköz megjelenik, amikor a háttér blokkszerkesztőben dolgozik. Elég jó!
Sikerült megerősítenem ezeket az egyéni CSS-tulajdonságokat a DevToolsban, miközben kutakodtam.
engedélyezése useRootPaddingAwareAlignments a bal és jobb oldali kitöltést is alkalmazza minden olyan blokkra, amely támogatja a „tartalom” szélesség és „széles” szélesség értékeit a fenti Globális stílusok képen. Ezeket az értékeket is meghatározhatjuk theme.json:
{
"version": 2,
"settings": {
"layout": {
"contentSize": "640px",
"wideSize": "1000px"
}
}
}Ha a Globális stílusok beállításai eltérnek az itt meghatározottaktól theme.json, akkor a Globális stílusok élveznek elsőbbséget. Mindent megtudhat a blokktéma stílusok kezeléséről utolsó cikkemben.
contentSizea blokkok alapértelmezett szélessége.wideSize„széles” elrendezési lehetőséget biztosít, és szélesebb oszlopot hoz létre a kinyújtandó blokkok számára.
Tehát az utolsó kódpélda a következő CSS-t adja:
/* 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] a WordPress által automatikusan generált egyedi számot jelöli.
De képzeld, mit kapunk még? Teljes összhang is!
.wp-container-[id] .alignfull {
max-width: none;
}Nézd azt? Engedélyezésével useRootPaddingAwareAlignments és meghatározása contentSize és a wideSize, kapunk egy teljes igazítású CSS-osztályt is összesen három tárolókonfigurációhoz az oldalakhoz és bejegyzésekhez hozzáadott blokkok szélességének vezérléséhez.
Ez a következő elrendezés-specifikus blokkra vonatkozik: Oszlopok, Csoport, Bejegyzéstartalom és Lekérdezési ciklus.
Blokk elrendezés vezérlők
Tegyük fel, hogy a fent említett elrendezés-specifikus blokkok bármelyikét hozzáadjuk egy oldalhoz. Amikor kiválasztjuk a blokkot, a blokkbeállítások felhasználói felülete új elrendezési beállításokat kínál számunkra a settings.layout az általunk meghatározott értékeket theme.json (vagy a Global Styles UI).
Itt nagyon specifikus blokkokkal van dolgunk – olyanokkal, amelyekbe más blokkokat is be lehet ágyazni. Tehát ezek az elrendezési beállítások valójában a beágyazott blokkok szélességének és igazításának szabályozásáról szólnak. A „Belső blokkok tartalomszélességet használnak” beállítás alapértelmezés szerint engedélyezve van. Ha kikapcsoljuk, akkor nincs max-width a konténeren és a benne lévő tömbökön éltől szélig mennek.
Ha bekapcsolva hagyjuk a kapcsolót, akkor a beágyazott blokkok vagy a contentWidth or wideWidth értékeket (erről egy kicsit bővebben). Vagy használhatjuk a numerikus bemeneteket az egyéni definiálására contentWidth és a wideWidth értékek ebben az egyszeri példányban. Ez nagy rugalmasság!
Széles blokkok
Az imént vizsgált beállítások a szülőblokkon vannak beállítva. Miután beágyaztunk egy blokkot a belsejébe és kijelöltük, további lehetőségeink vannak abban a blokkban a használatához contentWidth, wideWidth, vagy teljes szélességben.
contentWidth beállítás, amely a helyi menüben „Nincs” felirattal van ellátva, de beállítható erre is wideWidth ("Széles szélesség" felirattal) vagy "Teljes szélesség".Figyelje meg, hogyan szorozza meg a WordPress a gyökérszintű kitöltési CSS-tulajdonságokat ezzel -1 negatív margók létrehozásához a „Teljes szélesség” opció kiválasztásakor.
.alignfull osztály negatív margókat állít be egy beágyazott blokkon, hogy biztosítsa, hogy az a teljes nézetablak szélességét elfoglalja anélkül, hogy ütközne a gyökérszintű kitöltési beállításokkal.Korlátozott elrendezés használata
Éppen most foglalkoztunk a WordPress 6.1-es verziójával kapott új térközökkel és igazításokkal. Ezek a blokkra és a blokkon belüli beágyazott blokkra jellemzőek. A WordPress 6.1 azonban új elrendezési funkciókat is bevezet a téma sablonjainak még nagyobb rugalmassága és következetessége érdekében.
Példa: A WordPress teljesen átstrukturálta Flex és Flow elrendezési típusait, és erőltetett elrendezés típus, amely megkönnyíti a blokk-elrendezések igazítását a témákban a Webhelyszerkesztő Globális stílusok felhasználói felületének tartalomszélesség-beállításai segítségével.
Flex, Flow és Constrated elrendezések
A három elrendezéstípus közötti különbség az általuk kiadott stílusokban rejlik. Isabel Brisonnak kiváló írása van ez szépen felvázolja a különbségeket, de referenciaként fogalmazzuk meg őket:
- Áramlási elrendezés: Függőleges távolságot ad a beágyazott blokkok között a
margin-blockirány. A beágyazott blokkok balra, jobbra vagy középre is igazíthatók. - Korlátozott elrendezés: Pontosan megegyezik a Flow-elrendezéssel, de a beágyazott blokkok szélességi korlátozásaival, amelyek a
contentWidthés awideWidthbeállítások (akár betheme.jsonvagy Globális stílusok). - Flex elrendezés: Ez nem változott a WordPress 6.1-ben. Használja CSS Flexbox olyan elrendezés létrehozásához, amely alapértelmezés szerint vízszintesen (sorban) folyik, de képes függőlegesen is, így a blokkok egymásra helyezkednek. A szóköz alkalmazása a CSS használatával történik
gapingatlan.
Ez az új elrendezéstípus-tábla szemantikai osztályneveket hoz létre minden egyes elrendezéshez:
| Szemantikai elrendezés osztály | Elrendezés típusa | Támogatott blokkok |
|---|---|---|
.is-layout-flow |
Flow-elrendezés | Oszlopok, csoportok, közzétételi tartalom és lekérdezési ciklus. |
.is-layout-constrained |
Korlátozott elrendezés | Oszlopok, csoportok, közzétételi tartalom és lekérdezési ciklus. |
.is-layout-flex |
Flex elrendezés | Oszlopok, gombok, szociális ikonok |
Justin Tadlock kiterjedt írást írt róla a különböző elrendezéstípusok és szemantikai osztályok, beleértve a használati eseteket és példákat.
A téma frissítése a korlátozott elrendezések támogatása érdekében
Ha már használ egy saját készítésű blokktémát, akkor ezt szeretné frissítse, hogy támogassa a korlátozott elrendezéseket. Csak egy pár dolgot ki kell cserélni theme.json:
{
"version": 2,
"settings": {
"layout": {
"type": "constrained", // replaces `"inherit": true`
"type": "default", // replaces `"inherit": false`
}
}
}Ezek nemrégiben kiadott blokktémák, amelyeknél engedélyezték a térközbeállításokat useRootPaddingAwareAlignments és van egy frissített theme.json egy korlátozott elrendezést meghatározó fájl:
Elrendezési stílusok letiltása
Az alap elrendezési stílusok a WordPress 6.1 Core alapértelmezett funkciói. Más szóval, azonnal engedélyezve vannak. De ha kell, ezzel a kis töredékkel letilthatjuk őket functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );Nagy figyelmeztetés itt: az alapértelmezett elrendezéstípusok támogatásának letiltása is eltávolítja az összes alapstílust ezeknél az elrendezéseknél. Ez azt jelenti, hogy saját stílusait kell görgetnie a térközökhöz, az igazításokhoz és minden máshoz, ami a tartalom különböző sablon- és blokkkontextusban való megjelenítéséhez szükséges.
Csomagolta
A teljes szélességű képek nagy rajongójaként az új, WordPress 6.1-es elrendezést és kitöltés-tudatos igazítási funkciókat a két legnagyobb kedvencem jelenti. Más eszközökkel együtt, beleértve a jobb margó- és padding szabályozást, fluid tipográfia, valamint többek között a frissített Lista és Idézet blokkok szilárd bizonyítékai annak, hogy a WordPress a jobb tartalomkészítési élmény felé halad.
Most várnunk kell, és meg kell néznünk, hogy a hétköznapi tervezők és tartalomkészítők fantáziája és kreativitása hogyan használja ezeket a hihetetlen eszközöket, és hogyan emeli új szintre azt.
A folyamatban lévő webhelyszerkesztő-fejlesztési iterációk miatt mindig számítani kell egy nehéz útra. Optimistaként azonban kíváncsian várom, mi fog történni a WordPress 6.2 közelgő verziójában. Vannak olyan dolgok, amiket nagyon figyelek figyelembe vett jellemzőket befogadására, támogatására ragadós pozicionálás, új elrendezési osztálynevek belső blokkcsomagolókhoz, frissített láblécigazítási beállításokés korlátozott és áramlási elrendezési opciók hozzáadása a fedőblokkokhoz.
Ezt GitHub-problémák #44720 felsorolja az elrendezéssel kapcsolatos megbeszéléseket WordPress 6.2-re tervezve.
További források
Rengeteg forrásra konzultáltam és hivatkoztam, miközben beleástam magam. Itt van egy nagy lista azokról a dolgokról, amelyeket hasznosnak találtam, és úgy gondolom, hogy Ön is élvezheti.
