Unul dintre obiectivele principale ale Editorului de site WordPress (și, da, acesta este acum "nume oficial) este de a muta stilul bloc de bază din CSS la JSON structurat. Fișierele JSON pot fi citite de mașină, ceea ce le face consumabile de către Editorul de site bazat pe JavaScript pentru configurarea stilurilor globale ale unei teme direct în WordPress.
Nu este încă până acolo! Dacă ne uităm la tema implicită Twenty Twenty-Two (TT2), au existat două probleme principale nerezolvate: interacțiuni de styling (ca :hover, :active, :focus), Şi marginile și umplutura containerelor de layout. Puteți vedea cum acestea au fost remediate temporar în TT2 style.css fișier, mai degrabă decât să-l transforme în theme.json fișier.
WordPress 6.1 am rezolvat aceste probleme și ceea ce vreau să fac este să mă uit în mod special la acestea din urmă. Acum că avem stiluri JSON pentru marginile și umplutura containerelor de aspect, asta ne deschide moduri mai flexibile și mai robuste de a defini spațierea în aspectul temelor noastre.
Despre ce fel de spațiere vorbim?
În primul rând, avem deja umplutură la nivel de rădăcină care este un mod elegant de a descrie umplutura pe element. Este frumos, deoarece asigură o spațiere consistentă pe un element care este partajat în toate paginile și postările.
Dar există mai mult pentru că acum avem o modalitate prin care blocurile să ocolească această umplutură și să se alinieze pe toată lățimea. Asta datorită alinieri conștiente de umplutură care este o nouă funcție de înscriere în theme.json. Așadar, chiar dacă aveți o umplutură la nivel de rădăcină, puteți permite totuși, să zicem, ca o imagine (sau un alt bloc) să iasă și să se extindă la lățime completă.
Asta ne duce la un alt lucru pe care îl obținem: layout-uri constrânse. Ideea aici este că orice blocuri imbricate în aspect respectă lățimea conținutului aspectului - care este o setare globală - și nu curge în afara acestuia. Putem suprascrie acel comportament bloc cu bloc cu alinieri, dar vom ajunge la asta.
Sa incepem cu…
Umplutură la nivel de rădăcină
Din nou, acest lucru nu este nou. Am avut capacitatea de a seta căptușeală pe element în theme.json încă de la experimental Pluginul Gutenberg l-a introdus în versiunea 11.7. L-am pus pe styles.spacing obiect, unde avem margin și padding obiecte pentru a defini spațierea de sus, dreapta, jos și stânga pe corp:
{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}Acesta este un cadru global. Deci, dacă ar fi să deschidem DevTools și să inspectăm element, vom vedea aceste stiluri 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;
}Rece. Dar aici se află problema cum putem permite unor blocuri să iasă din acea spațiere pentru a umple întregul ecran, de la margine la margine. De aceea există distanța, nu? Ajută la prevenirea acestui lucru!
Dar există într-adevăr o mulțime de cazuri în care ați putea dori să ieșiți din acea spațiere pe o instanță unică atunci când lucrați în Editorul de blocuri. Să presupunem că plasăm un bloc Imagine pe o pagină și vrem ca acesta să meargă la lățime completă, în timp ce restul conținutului respectă umplutura la nivel de rădăcină?
Introduce…
Alinieri conștiente de umplutură
În timp ce încercați să creați prima temă WordPress implicită care definește toate stilurile din theme.json fișier, designerul principal Kjell Reigstad ilustrează aspectele provocatoare ale ieșirii din umplutura la nivel de rădăcină în acest Problemă GitHub.
Noi funcții în WordPress 6.1 au fost create pentru a rezolva această problemă. Să cercetăm în cele ce urmează.
useRootPaddingAwareAlignments
O nouă useRootPaddingAwareAlignments proprietatea a fost creată pentru a rezolva problema. De fapt, a fost introdus pentru prima dată în pluginul Gutenberg v13.8. The cerere de tragere originală este un primer bun despre cum funcționează.
{
"version": 2,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
// etc.
},De la început, observați că aceasta este o caracteristică la care trebuie să ne înscriem. Proprietatea este setată la false implicit și trebuie să-l setăm în mod explicit la true pentru a-l activa. Observați de asemenea că avem appearanceTools setat la true de asemenea. Asta ne permite să accesăm comenzile UI în Editorul site-ului pentru stilul chenarelor, culorile linkurilor, tipografie și, da, spațierea care include marginea și umplutura.
reglaj appearanceTools setat la true optează automat blocurile în marjă și umplutură fără a fi nevoie să setați nici settings.spacing.padding or setting.spacing.margin la true.
Când activăm useRootPaddingAwareAlignments, ni se oferă proprietăți personalizate cu valori de umplutură rădăcină care sunt setate pe element din partea din față. Interesant, se aplică și umplutura la .editor-styles-wrapper clasa astfel încât spațierea să fie afișată atunci când lucrați în Editorul de blocuri back-end. Destul de la moda!
Am putut confirma acele proprietăți personalizate CSS în DevTools în timp ce caut.
Activarea useRootPaddingAwareAlignments aplică, de asemenea, umplutură la stânga și la dreapta oricărui bloc care acceptă lățimea „conținutului” și lățimea „largă” din imaginea Stilurilor globale de mai sus. De asemenea, putem defini acele valori în theme.json:
{
"version": 2,
"settings": {
"layout": {
"contentSize": "640px",
"wideSize": "1000px"
}
}
}Dacă setările Stilurilor globale sunt diferite de cele definite în theme.json, apoi stilurile globale au prioritate. Puteți afla totul despre gestionarea stilurilor de teme bloc in ultimul meu articol.
contentSizeeste lățimea implicită pentru blocuri.wideSizeoferă o opțiune de aspect „larg” și stabilește o coloană mai largă pentru ca blocurile să se întindă.
Deci, ultimul exemplu de cod ne va oferi următorul 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] indică un număr unic generat automat de WordPress.
Dar ghici ce altceva primim? Alinierea completă, de asemenea!
.wp-container-[id] .alignfull {
max-width: none;
}Vezi asta? Prin activare useRootPaddingAwareAlignments si definitorie contentSize și wideSize, obținem, de asemenea, o clasă CSS de aliniere completă pentru un total de trei configurații de container pentru controlul lățimii blocurilor care sunt adăugate paginilor și postărilor.
Acest lucru se aplică următoarelor blocuri specifice aspectului: coloane, grup, conținut post și buclă de interogare.
Blocați controalele de aspect
Să presupunem că adăugăm oricare dintre acele blocuri specifice aspectului menționate mai sus la o pagină. Când selectăm blocul, interfața de utilizare pentru setările blocului ne oferă noi setări de aspect bazate pe settings.layout valorile pe care le-am definit theme.json (sau interfața de utilizare a stilurilor globale).
Avem de-a face cu blocuri foarte specifice aici - cele care pot avea alte blocuri imbricate în interior. Deci, aceste setări de aspect sunt de fapt despre controlul lățimii și alinierii acelor blocuri imbricate. Setarea „Blocuri interioare folosesc lățimea conținutului” este activată în mod implicit. Dacă îl dezactivăm, atunci nu avem max-width pe container și blocurile din interiorul acestuia merg margine la margine.
Dacă lăsăm comutatorul activat, blocurile imbricate vor adera fie la contentWidth or wideWidth valori (mai multe despre asta într-un pic). Sau putem folosi intrările numerice pentru a defini personalizarea contentWidth și wideWidth valori în acest caz unic. Este o mare flexibilitate!
Blocuri largi
Setările pe care tocmai le-am căutat sunt setate în blocul părinte. Odată ce am imbricat un bloc în interior și l-am selectat, avem opțiuni suplimentare în acel bloc pentru a utiliza contentWidth, wideWidth, sau mergeți la lățime completă.
contentWidth setare, etichetată „Niciuna” în meniul contextual, dar poate fi setată și la wideWidth (etichetat „Lățime largă”) sau „Lățime completă”.Observați cum WordPress înmulțește proprietățile personalizate CSS de umplutură la nivel de rădăcină cu -1 pentru a crea margini negative atunci când selectați opțiunea „Full width”.
.alignfull clasa setează margini negative pe un bloc imbricat pentru a se asigura că ocupă toată lățimea ferestrei de vizualizare fără a intra în conflict cu setările de umplutură la nivel de rădăcină.Folosind un aspect restrâns
Tocmai am acoperit noile spații și aliniamente pe care le obținem cu WordPress 6.1. Acestea sunt specifice blocurilor și oricăror blocuri imbricate în blocuri. Dar WordPress 6.1 introduce și noi funcții de aspect pentru și mai multă flexibilitate și coerență în șabloanele unei teme.
Un exemplu: WordPress și-a restructurat complet tipurile de aspect Flex și Flow și ne-a oferit un constrâns aspect tip care facilitează alinierea machetelor de bloc în teme utilizând setările pentru lățimea conținutului din interfața de utilizare pentru stiluri globale a Editorului de site.
Aspecte Flex, Flow și Constrâns
Diferența dintre aceste trei tipuri de aspect este stilurile pe care le produc. Isabel Brison are un articol excelent care subliniază frumos diferențele, dar să le parafrazăm aici pentru referință:
- Aspectul fluxului: Adaugă distanță verticală între blocurile imbricate în
margin-blockdirecţie. Aceste blocuri imbricate pot fi, de asemenea, aliniate la stânga, la dreapta sau la centru. - Aspect restrâns: Aceeași afacere ca și un aspect Flow, dar cu constrângeri de lățime asupra blocurilor imbricate care se bazează pe
contentWidthșiwideWidthsetări (fie întheme.jsonsau Stiluri globale). - Aspect flexibil: Acest lucru a fost neschimbat în WordPress 6.1. Folosește CSS Flexbox pentru a crea un aspect care curge orizontal (în rând) în mod implicit, dar poate curge și pe verticală, astfel încât blocurile să se stivuească unul peste altul. Spațierea este aplicată folosind CSS
gapproprietate.
Această nouă listă de tipuri de layout creează nume de clase semantice pentru fiecare aspect:
| Clasa de aspect semantic | Tipul de aspect | Blocuri suportate |
|---|---|---|
.is-layout-flow |
Dispunerea fluxului | Coloane, grup, conținut post și buclă de interogare. |
.is-layout-constrained |
Aspect restrâns | Coloane, grup, conținut post și buclă de interogare. |
.is-layout-flex |
Aspect flexibil | Coloane, butoane, icoane sociale |
Justin Tadlock are un articol amplu despre diferitele tipuri de layout și clase semantice, inclusiv cazuri de utilizare și exemple.
Actualizarea temei pentru a accepta machete limitate
Dacă utilizați deja o temă bloc creată de dvs., o să doriți actualizați-l pentru a accepta machete limitate. Tot ce este nevoie este să schimbi câteva lucruri theme.json:
{
"version": 2,
"settings": {
"layout": {
"type": "constrained", // replaces `"inherit": true`
"type": "default", // replaces `"inherit": false`
}
}
}Acestea sunt teme de bloc lansate recent care au activat setările de spațiere cu useRootPaddingAwareAlignments și au o actualizare theme.json fișier care definește un aspect restrâns:
Dezactivarea stilurilor de aspect
Stilurile de aspect de bază sunt caracteristici implicite care sunt livrate în WordPress 6.1 Core. Cu alte cuvinte, sunt activate imediat din cutie. Dar le putem dezactiva dacă este nevoie cu acest mic fragment functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );Avertisment mare aici: dezactivarea suportului și pentru tipurile de aspect implicite elimină toate stilurile de bază pentru acele machete. Aceasta înseamnă că va trebui să vă rulați propriile stiluri pentru spațiere, aliniere și orice altceva este necesar pentru a afișa conținut în diferite contexte de șablon și bloc.
La finalul
Fiind un mare fan al imaginilor cu lățime completă, noul aspect WordPress 6.1 și caracteristicile de aliniere conștientă de umplutură sunt două dintre cele mai preferate ale mele de până acum. Luat împreună cu alte instrumente, inclusiv un control mai bun al marjei și al umpluturii, tipografie fluidă, și blocurile actualizate Listă și Quote, printre altele, sunt o dovadă solidă că WordPress se îndreaptă către o experiență mai bună de creare de conținut.
Acum, trebuie să așteptăm și să vedem cum imaginația și creativitatea designerilor obișnuiți și creatorilor de conținut folosesc aceste instrumente incredibile și le duc la un nou nivel.
Din cauza iterațiilor de dezvoltare a editorului de site în curs, ar trebui să anticipăm întotdeauna o cale dificilă. Cu toate acestea, în calitate de optimist, sunt nerăbdător să văd ce se va întâmpla în viitoarea versiune a WordPress 6.2. Unele dintre lucrurile pe care le țin cu ochii îndeaproape sunt lucruri de genul caracteristicile fiind luate în considerare pentru includere, sprijin pentru poziționare lipicioasă, noi nume de clasă de layout pentru ambalajele bloc interioare, opțiuni actualizate de aliniere a subsolului, și adăugarea de opțiuni de aspect constrâns și de flux la blocurile Cover.
Acest Probleme GitHub #44720 listează discuțiile legate de aspect programat pentru WordPress 6.2.
Resurse aditionale
Am consultat și făcut referire la o mulțime de surse în timp ce am săpat în toate acestea. Iată o listă mare de lucruri pe care mi s-au părut utile și cred că s-ar putea să vă placă și dvs.
