Modul în care scriem CSS pentru temele WordPress se află în mijlocul unor schimbări radicale. Am împărtășit recent o tehnică pentru adăugarea suportului de tip fluid în WordPress prin theme.json, un nou fișier care WordPress a făcut eforturi puternice pentru a deveni o sursă centrală de adevăr pentru definirea stilurilor în temele WordPress care acceptă funcțiile de editare a site-ului complet (FSE).

Stai, nu style.css fişier? Mai avem asta. De fapt, style.css is încă un fișier obligatoriu în temele bloc, deși rolul său este mult redus la metainformații utilizate pentru înregistrarea temei. Acestea fiind spuse, adevărul este că theme.json este încă în dezvoltare activă, ceea ce înseamnă că suntem într-o perioadă de tranziție în care s-ar putea să găsiți stiluri definite acolo, în styles.css sau chiar la nivel de bloc.

Deci, cum arată de fapt stilul în aceste zile WordPress FSE? Asta vreau să acopăr în acest articol. Există o lipsă de documentație pentru temele blocurilor de stil în Manual pentru dezvoltatori de teme WordPress, așa că tot ceea ce acoperim aici este ceea ce am adunat despre unde sunt lucrurile în prezent, precum și despre discuțiile despre viitorul tematicii WordPress.

Evoluția stilurilor WordPress

Noile caracteristici de dezvoltare care sunt incluse în WordPress 6.1 ne apropie de un sistem de stiluri care sunt complet definite în theme.json, dar mai sunt încă multe de făcut înainte să ne putem sprijini pe deplin pe ea. O modalitate prin care ne putem face o idee despre ceea ce urmează în lansările viitoare este folosind Pluginul Gutenberg. Acesta este locul în care caracteristicile experimentale primesc adesea o funcționare uscată.

Un alt mod în care ne putem simți unde ne aflăm este să ne uităm la evoluția teme WordPress implicite. Până în prezent, există trei teme implicite care acceptă editarea întregului site:

Dar nu începeți să tranzacționați CSS-ul style.css pentru perechile proprietate-valoare JSON în theme.json tocmai încă. Există încă reguli de stil CSS care trebuie acceptate theme.json înainte să ne gândim să facem asta. Problemele semnificative rămase sunt în prezent discutate cu scopul de a muta pe deplin toate regulile de stil CSS theme.json și să consolideze diferite surse de theme.json într-o UI pentru setarea stilurilor globale direct în Editor de site WordPress.

Asta ne lasă într-un loc relativ dificil. Nu numai că există nu există o cale clară pentru suprascrierea stilurilor de teme, dar nu este clar de unde provine chiar sursa acelor stiluri - este din diferite straturi de theme.json fișiere, style.css, pluginul Gutenberg sau în altă parte?

De ce theme.json în loc de style.css?

S-ar putea să vă întrebați de ce WordPress se îndreaptă către o definiție a stilurilor bazată pe JSON în loc de un fișier CSS tradițional. Ben Dwyer de la echipa de dezvoltare Gutenberg explică elocvent de ce theme.json abordarea este un beneficiu pentru dezvoltatorii de teme.

Merită să citești postarea lui Ben, dar carnea este în acest citat:

Suprascrierea CSS, indiferent dacă este vorba despre aspect, stiluri prestabilite sau bloc, prezintă un obstacol în calea integrării și interoperabilității: paritatea vizuală între interfață și editor devine mai dificil de menținut, upgrade-urile pentru blocarea elementelor interne pot intra în conflict cu suprascrieri. CSS personalizat este, în plus, mai puțin portabil în alte teme de bloc.

Încurajând autorii temei să utilizeze theme.json API acolo unde este posibil, ierarhia stilurilor definite „bază > temă > utilizator” poate fi rezolvată corect.

Unul dintre avantajele majore ale mutării CSS în JSON este că JSON este un format care poate fi citit de mașină, ceea ce înseamnă că poate fi expus în UI WordPress Site Editor prin preluarea unui API, permițând astfel utilizatorilor să modifice valorile implicite și să personalizeze aspectul unui site fără scriind orice CSS. De asemenea, oferă o modalitate de a stila blocurile în mod consecvent, oferind în același timp o structură care creează straturi de specificitate, astfel încât setările utilizatorului să aibă cea mai mare prioritate față de cele definite în theme.json. Acea interacțiune între stilurile la nivel de temă în theme.json iar stilurile definite de utilizator din interfața de utilizare Global Styles sunt ceea ce face ca abordarea JSON să fie atât de atrăgătoare.

Dezvoltatorii mențin coerența în JSON, iar utilizatorii câștigă flexibilitate cu personalizări fără cod. Acesta este un câștig-câștig.

Există și alte beneficii, cu siguranță, și Mike McAlister de la WP Engine listează mai multe în acest thread de Twitter. Puteți găsi și mai multe beneficii în asta discuție aprofundată pe blogul Make WordPress Core. Și odată ce ați citit asta, comparați beneficiile abordării JSON cu modalitățile disponibile de a defini și de a modifica stilurile în temele clasice.

Definirea stilurilor cu elemente JSON

Am văzut deja multe progrese în ceea ce privește părțile unei teme theme.json este capabil să stilizeze. Înainte de WordPress 6.1, tot ce puteam face era să stilăm titlurile și linkurile. Acum, cu WordPress 6.1, putem adăuga butoane, subtitrări, citări și titluri la amestec.

Și facem asta definind elemente JSON. Gândiți-vă la elemente ca la componente individuale care trăiesc într-un bloc WordPress. Să presupunem că avem un bloc care conține un titlu, un paragraf și un buton. Piesele respective sunt elemente și există o elements obiect în theme.json unde le definim stilurile:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}

O modalitate mai bună de a descrie elementele JSON este ca componente de nivel scăzut pentru teme și blocuri care nu au nevoie de complexitatea blocurilor. Sunt reprezentări ale primitivelor HTML care nu sunt definite într-un bloc, dar pot fi utilizate între blocuri. Modul în care sunt acceptate în WordPress (și în pluginul Gutenberg) este descris în Manual pentru editorul de blocuri iar acest lucru Tutorial complet de editare a site-ului de Carolina Nymark.

De exemplu, linkurile sunt stilate în elements obiect dar nu sunt un bloc în sine. Dar un link poate fi folosit într-un bloc și va moșteni stilurile definite pe elements.link obiect în theme.json. Totuși, acest lucru nu încapsulează pe deplin definiția unui element, deoarece unele elemente sunt înregistrate și ca blocuri, cum ar fi blocurile Heading și Button - dar acele blocuri pot fi încă folosite în alte blocuri.

Iată un tabel cu elementele care sunt disponibile în prezent pentru stil theme.json, prin amabilitatea Carolinei:

După cum puteți vedea, este încă devreme și încă mai trebuie să treacă de la pluginul Gutenberg în WordPress Core. Dar puteți vedea cât de rapid ar fi să faceți ceva precum stilarea tuturor titlurilor dintr-o temă la nivel global, fără a căuta selectoare în fișierele CSS sau DevTools.

În plus, puteți începe, de asemenea, să vedeți cum este structura theme.json un fel de forme straturi de specificitate, mergând de la elemente globale (de ex headings) la elemente individuale (de ex h1), și stiluri la nivel de bloc (de ex h1 cuprinse într-un bloc).

Informații suplimentare despre elementele JSON sunt disponibile în această propunere Faceți WordPress și acest bilet deschis în depozitul GitHub al pluginului Gutenberg.

Specificitatea JSON și CSS

Să vorbim în continuare despre specificul CSS. Am menționat mai devreme că abordarea JSON a stilului stabilește o ierarhie. Și este adevărat. Stiluri care sunt definite pe elemente JSON în theme.json sunt considerate stiluri de teme implicite. Și orice este setat de utilizator în interfața de utilizare a stilurilor globale va suprascrie valorile implicite.

Cu alte cuvinte: stilurile de utilizator au mai multă specificitate decât stilurile implicite ale temei. Să aruncăm o privire la blocul Buton pentru a înțelege cum funcționează.

eu folosesc Temă goală, o temă WordPress goală, fără stil CSS. Voi adăuga un bloc Button pe o pagină nouă.

OK, știm că WordPress Core este livrat cu un stil ușor. Acum, voi trece la tema TT3 implicită din WordPress 6.1 și o voi activa. Dacă îmi reîmprospătează pagina cu butonul, butonul schimbă stilurile.

Puteți vedea exact de unde provin acele noi stiluri în TT3 theme.json fişier. Acest lucru ne spune că stilurile de elemente JSON au prioritate față de stilurile WordPress Core.

Acum voi modifica TT3 suprascriindu-l cu a theme.json fișier într-o temă copil, unde culoarea implicită de fundal a blocului Button este setată la roșu.

Dar observați butonul de căutare din ultima captură de ecran. Ar trebui să fie și roșu, nu? Asta trebuie să însemne că este stilat la un alt nivel dacă schimbarea pe care am făcut-o este la nivel global. Dacă vrem să ne schimbăm atât butoane, am putea face acest lucru la nivel de utilizator folosind interfața de utilizare Global Styles din editorul site-ului.

Am schimbat culoarea de fundal a ambelor butoane în albastru și am modificat și textul folosind interfața de utilizare a stilurilor globale. Observați că albastrul de acolo a avut prioritate față de stilurile tematice!

Motorul de stil

Aceasta este o idee foarte rapidă, dar bună, despre modul în care specificitatea CSS este gestionată în temele de blocuri WordPress. Dar nu este imaginea completă pentru că este încă neclară Unde acele stiluri sunt generate. WordPress are propriile stiluri implicite care vin de undeva, consumă datele în theme.json pentru mai multe reguli de stil și le înlocuiește pe cele cu orice setat în Stiluri globale.

Sunt acele stiluri în linie? Sunt într-o foaie de stil separată? Poate că sunt injectate pe pagină într-un ?

Asta e noutatea Motor de stil sper sa se rezolve. Style Engine este un nou API din WordPress 6.1 care este menit să aducă consistență modului în care sunt generate stilurile și unde sunt aplicate stilurile. Cu alte cuvinte, este nevoie de toate sursele posibile de styling și este în mod deosebit responsabil pentru generarea corectă a stilurilor de bloc. Știu, știu. Încă o abstracție pe lângă alte abstracțiuni doar pentru a crea unele stiluri. Dar a avea un API centralizat pentru stiluri este probabil cea mai elegantă soluție, având în vedere că stilurile pot veni din mai multe locuri.

Avem doar o primă privire asupra Style Engine. De fapt, iată ce s-a finalizat până acum, conform biletului:

• Auditează și consolidează locul în care codul generează blocuri de suport CSS în back-end, astfel încât acestea să fie livrate din același loc (spre deosebire de mai multe locuri). Acesta acoperă regulile CSS, cum ar fi marginea, umplutura, tipografia, culorile și chenarele.
• Eliminați stilurile repetitive specifice aspectului și generați nume de clase semantice.
• Reduceți numărul de etichete de stil inline pe care le imprimăm pe pagină pentru suport pentru blocuri, aspect și elemente.

Practic, aceasta este fundamentul pentru stabilirea unui singur API care să conțină toate regulile de stil CSS pentru o temă, indiferent de unde provin. Curăță modul în care WordPress ar injecta stiluri inline pre-6.1 și stabilește un sistem pentru numele claselor semantice.

Mai multe detalii despre obiectivele pe termen lung și pe termen scurt ale Style Engine pot fi găsite în acest articol Faceți discuții despre WordPress Core. De asemenea, puteți urmări problemă de urmărire și bord de proiect pentru mai multe actualizări.

Lucrul cu elemente JSON

Am vorbit puțin despre elementele JSON din theme.json fișier și modul în care sunt practic primitive HTML pentru definirea stilurilor implicite pentru lucruri precum titluri, butoane și link-uri, printre altele. Acum, să ne uităm la de fapt folosind un element JSON și modul în care se comportă în diverse contexte de stilare.

Elementele JSON au, în general, două contexte: la nivel mondial si nivelul blocului. Stilurile la nivel global sunt definite cu mai puțină specificitate decât sunt la nivel de bloc pentru a se asigura că stilurile specifice blocului au prioritate pentru consistență oriunde sunt utilizate blocurile.

Stiluri globale pentru elemente JSON

Să ne uităm la noua temă implicită TT3 și să examinăm modul în care sunt stilate butoanele acesteia. Următorul este un abreviat copy-paste al TT3 theme.json fișierul (aici este cod complet) care arată secțiunea de stiluri globale, dar puteți găsi codul original aici.

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

Toate butoanele sunt stilate la nivel global (styles.elements.button).

Putem confirma acest lucru și în DevTools. Observați că o clasă a sunat .wp-element-button este selectorul. Aceeași clasă este folosită și pentru stilarea stărilor interactive.

Din nou, acest stil se întâmplă la nivel global, venind de la theme.json. Ori de câte ori folosim un buton, acesta va avea același fundal, deoarece au același selector și nicio altă regulă de stil nu îl înlocuiește.

Deoparte, WordPress 6.1 a adăugat suport pentru stilarea stărilor interactive pentru anumite elemente, cum ar fi butoanele și linkurile, folosind pseudo-clase în theme.json - inclusiv :hover, :focus, și :active — sau interfața de utilizare a stilurilor globale. Inginer automatist Dave Smith demonstrează această caracteristică într-un videoclip de pe YouTube.

Am putea suprascrie culoarea de fundal a butonului fie în theme.json (de preferință într-o temă copil, deoarece folosim o temă WordPress implicită) sau în setările Stilurilor globale din editorul site-ului (nu este necesară o temă copil, deoarece nu necesită o modificare a codului).

Dar apoi butoanele se vor schimba dintr-o dată. Ce se întâmplă dacă vrem să suprascriem culoarea de fundal atunci când butonul face parte dintr-un anumit bloc? Acolo intră în joc stilurile la nivel de bloc.

Stiluri la nivel de bloc pentru elemente

Pentru a înțelege cum putem folosi și personaliza stilurile la nivel de bloc, să schimbăm culoarea de fundal a butonului care este conținut în blocul Căutare. Amintiți-vă, există un bloc Button, dar ceea ce facem este să suprascriem culoarea de fundal la nivelul blocului de căutare. În acest fel, aplicăm doar noua culoare acolo, spre deosebire de aplicarea globală la toate butoanele.

Pentru a face asta, definim stilurile pe styles.blocks obiect în theme.json. Așa este, dacă definim stilurile globale pentru toate butoanele activate styles.elements, putem defini stilurile specifice blocului pentru elementele de buton styles.block, care urmează o structură similară:

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

Vezi asta? Am setat background și text proprietăți pe styles.blocks.core/search.elements.button cu două variabile CSS care sunt prestabilite în WordPress.

Rezultatul? Butonul de căutare este acum roșu (--wp--preset--color--quaternary), iar blocul Button implicit își păstrează fundalul verde strălucitor.

Putem vedea schimbarea și în DevTools.

Același lucru este valabil dacă vrem să stilăm butoanele care sunt incluse în alte blocuri. Și butoanele sunt doar un exemplu, așa că să ne uităm la altul.

Exemplu: stilizarea titlurilor la fiecare nivel

Să ducem toate aceste informații acasă cu un exemplu. De data aceasta, vom:

• Stilați toate titlurile la nivel global
• Stilați toate elementele titlului 2
• Style Heading 2 elemente din blocul Query Loop

În primul rând, să începem cu structura de bază pentru theme.json:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

Aceasta stabilește schița pentru stilurile noastre globale și la nivel de bloc.

Stilați toate titlurile la nivel global

Să adăugăm headings obiectează la stilurile noastre globale și aplică unele stiluri:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

Aceasta setează culoarea pentru toate titlurile la culoarea de bază prestabilită în WordPress. Să modificăm culoarea și dimensiunea fontului elementelor Titlul 2 și la nivel global:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

Acum, toate elementele Titlul 2 sunt setate să fie culoarea primară prestabilită cu a dimensiune fluidă a fontului. Dar poate vrem o reparație fontSize pentru elementul Heading 2 atunci când este utilizat în blocul Query Look:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

Acum avem trei niveluri de stiluri pentru elementele Heading 2: toate titlurile, toate elementele Heading 2 și elementele Heading 2 care sunt utilizate în blocul Query Loop.

Exemple de teme existente

În timp ce ne-am uitat doar la exemplele de stil pentru butoane și titluri din acest articol, WordPress 6.1 acceptă elemente suplimentare de stilare. Există un tabel care le prezintă în „Definirea stilurilor cu elemente JSON” secţiune.

Probabil vă întrebați ce elemente JSON acceptă ce proprietăți CSS, ca să nu mai vorbim de cum le-ați declara pe acestea. În timp ce așteptăm documentația oficială, cele mai bune resurse pe care le avem vor fi theme.json fișiere pentru teme existente. Voi oferi link-uri către teme pe baza elementelor pe care le personalizează și voi indica ce proprietăți sunt personalizate.

Asigurați-vă că îi oferiți fiecăruia theme.json arătați bine, deoarece aceste teme includ exemple excelente de stil la nivel de bloc pe styles.blocks obiect.

La finalul

Modificările frecvente ale editorului de site complet devin a surse majore de iritare pentru multe persoane, inclusiv utilizatorii Gutenberg cunoscători de tehnologie. Chiar și regulile CSS foarte simple, care funcționează bine cu temele clasice, nu par să funcționeze pentru temele bloc din cauza noi straturi de specificitate am acoperit mai devreme.

Referitor la a Propunerea GitHub pentru a reproiecta editorul site-ului într-un nou mod de browser, Sara Gooding scrie într-o postare de la WP Tavern:

Este ușor să vă pierdeți în timp ce încercați să ocoliți Editorul site-ului, cu excepția cazului în care lucrați zi și noapte în interiorul instrumentului. Navigarea este sarcinoasă și confuză, mai ales când treceți de la navigarea șabloanelor la editarea șablonului și la modificarea blocurilor individuale.

Chiar și ca un pasionat călăreț timpuriu în lumea editorului de blocuri Gutenberg și a temelor block-eye, am o mulțime de propriile mele frustrări. Sunt optimist, totuși, și anticipez că editorul site-ului, odată finalizat, va fi un instrument revoluționar atât pentru utilizatori, cât și pentru dezvoltatorii de teme cunoscători de tehnologie. Acest tweet plin de speranță confirmă deja asta. Între timp, se pare că ar trebui să ne pregătim pentru mai multe schimbări și poate chiar pentru o călătorie accidentată.

Referinte

Enumerez toate resursele pe care le-am folosit în timp ce căutam informații pentru acest articol.

elemente JSON

Stiluri globale

Motor de stil

Multumesc pentru lectura! Mi-ar plăcea să aud propriile reflecții despre utilizarea temelor de bloc și despre cum vă gestionați CSS-ul.