See, kuidas me WordPressi teemade jaoks CSS-i kirjutame, on keset suuri muudatusi. Jagasin hiljuti tehnikat vedela tüübi toe lisamine WordPressis teel theme.json, uus fail, mis WordPress on kõvasti pingutanud saada keskseks tõeallikaks WordPressi teemade stiilide määratlemisel, mis toetavad kogu saidi redigeerimise (FSE) funktsioone.

Oota, ei style.css faili? Meil on see siiani alles. Tegelikult, style.css is ikka nõutav fail plokiteemades, kuigi selle roll on suuresti piiratud teema registreerimisel kasutatavale metateabele. Nagu öeldud, tõsiasi on see theme.json on endiselt aktiivses arenduses, mis tähendab, et oleme üleminekuperioodil, kus võite leida seal määratletud stiile styles.css või isegi ploki tasemel.

Niisiis, kuidas stiil nendel WordPressi FSE päevadel tegelikult välja näeb? Seda tahan selles artiklis käsitleda. Puudub dokumentatsioon plokkide teemade kujundamiseks WordPressi teemaarendaja käsiraamat, nii et kõik, mida me siin käsitleme, on see, mida olen kogunud selle kohta, kus asjad praegu asuvad, ja aruteludest WordPressi teemade tuleviku üle.

WordPressi stiilide areng

Uued arendusfunktsioonid, mis sisalduvad WordPress 6.1 viib meid lähemale stiilide süsteemile, mis on täielikult määratletud theme.json, kuid meil on veel palju tööd teha, enne kui saame sellele täielikult toetuda. Üks viis, kuidas saame tulevastes väljaannetes aimu saada, on kasutada Gutenbergi pistikprogramm. See on koht, kus eksperimentaalsed funktsioonid antakse sageli kuivaks.

Teine viis, kuidas me saame tunnetada, kus me oleme, on vaadata evolutsiooni WordPressi vaiketeemad. Praeguseks on kolm vaiketeemat, mis toetavad kogu saidi redigeerimist:

Kuid ärge hakake CSS-iga kauplema style.css JSON-i atribuut-väärtuste paaride jaoks theme.json just veel. Endiselt on CSS-i stiilireegleid, mida tuleb toetada theme.json enne kui selle peale mõtleme. Ülejäänud olulisi küsimusi arutatakse praegu eesmärgiga viia kõik CSS-i stiilireeglid täielikult üle theme.json ja koondada erinevad allikad theme.json sisse UI globaalsete stiilide seadistamiseks otse WordPressi saidiredaktor.

See jätab meid suhteliselt raskesse kohta. Mitte ainult ei ole pole selget teed ülekaalukate teemastiilide jaoks, kuid pole selge, kust need stiilid üldse pärinevad – kas see on pärit erinevatest kihtidest theme.json failid style.css, Gutenbergi pistikprogramm või kusagil mujal?

Miks theme.json asemel style.css?

Võib tekkida küsimus, miks WordPress liigub traditsioonilise CSS-faili asemel JSON-põhise stiilide määratluse poole. Ben Dwyer Gutenbergi arendusmeeskonnast selgitab ilmekalt, miks theme.json lähenemine on teemaarendajatele kasuks.

Tasub lugeda Beni postitust, aga liha on selles tsitaadis:

CSS-i alistamine, olgu see paigutus, eelseadistatud või blokeerimisstiilid, takistab integreerimist ja koostalitlusvõimet: visuaalset pariteeti on kasutajaliidese ja redaktori vahel raskem säilitada, sisemiste moodulite blokeerimise versiooniuuendused võivad olla vastuolus alistamistega. Lisaks on kohandatud CSS muude plokkide teemade vahel vähem kaasaskantav.

Julgustades teemaautoreid kasutama theme.json Kui võimalik, saab hierarhia „alus > teema > kasutaja“ määratletud stiilid õigesti lahendada.

CSS-i JSON-i teisaldamise üks peamisi eeliseid on see, et JSON on masinloetav vorming, mis tähendab, et seda saab WordPressi saidiredaktori kasutajaliideses avaldada API toomise teel, võimaldades kasutajatel muuta vaikeväärtusi ja kohandada saidi välimust ilma kirjutades üldse mingit CSS-i. Samuti pakub see võimalust plokkide järjepidevaks stiilimiseks, pakkudes samal ajal struktuuri, mis loob spetsiifilisi kihte nii, et kasutaja seadistustel on kõrgeim prioriteet jaotises määratletud ees. theme.json. See teemataseme stiilide koosmõju theme.json ja kasutaja määratud stiilid globaalsete stiilide kasutajaliideses muudavad JSON-lähenemise nii ahvatlevaks.

Arendajad säilitavad JSON-i järjepidevuse ja kasutajad saavad koodita kohandustega paindlikumaks. See on win-win.

Kindlasti on ka muid eeliseid ja Mike McAlister WP Engine'ist loetleb selles Twitteri lõimes mitu. Sellest leiate veelgi rohkem eeliseid põhjalik arutelu Make WordPress Core'i ajaveebis. Ja kui olete selle läbi lugenud, võrrelge JSON-i lähenemisviisi eeliseid saadaolevad viisid klassikaliste teemade stiilide määratlemiseks ja alistamiseks.

Stiilide määratlemine JSON-elementidega

Oleme juba näinud palju edusamme seoses teema osadega theme.json on võimeline kujundama. Enne WordPress 6.1 saime tegelikult teha ainult pealkirjade ja linkide stiili. Nüüd koos WordPress 6.1-ga saame lisada nuppe, pealkirju, tsitaate ja pealkirju segule.

Ja me teeme seda määratledes JSON elemendid. Mõelge elementidele kui üksikutele komponentidele, mis asuvad WordPressi plokis. Oletame, et meil on plokk, mis sisaldab pealkirja, lõiku ja nuppu. Need üksikud tükid on elemendid ja seal on elements objekt sisse theme.json kus me määratleme nende stiilid:

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

Parem viis JSON-elementide kirjeldamiseks on teemade ja plokkide madala taseme komponendid, mis ei vaja plokkide keerukust. Need on HTML-i primitiivide esitused mida ei määratleta plokis, kuid mida saab kasutada plokkide lõikes. Kuidas neid WordPressis (ja Gutenbergi pistikprogrammis) toetatakse, kirjeldatakse artiklis Ploki toimetaja käsiraamat ja see Täielik saidi redigeerimise õpetus autor Carolina Nymark.

Näiteks on lingid kujundatud elements objekt, kuid ei ole omaette blokk. Kuid linki saab kasutada plokis ja see pärib plokil määratletud stiilid elements.link objekt sisse theme.json. See ei hõlma siiski täielikult elemendi määratlust, kuna mõned elemendid registreeritakse ka plokkidena, näiteks pealkirja ja nupu plokid, kuid neid plokke saab siiski kasutada teistes plokkides.

Siin on tabel elementide kohta, mis on praegu stiilimiseks saadaval theme.json, Carolina loal:

Nagu näete, on alles algusaeg ja Gutenbergi pistikprogrammilt WordPress Core'i tuleb veel palju liikuda. Kuid näete, kui kiire oleks teha midagi sellist, nagu stiiliks kõik teema pealkirjad globaalselt, ilma CSS-failides või DevToolsis valijaid jahtimata.

Lisaks võite hakata nägema, kuidas struktuur theme.json omamoodi moodustab spetsiifilisuse kihte, lähtudes globaalsetest elementidest (nt headings) üksikutele elementidele (nt h1) ja plokitaseme stiilid (nt h1 sisaldub plokis).

Lisateavet JSON-elementide kohta leiate aadressilt see Tee WordPressi ettepanek ja see avatud pilet Gutenbergi pistikprogrammi GitHubi repos.

JSON ja CSS spetsiifilisus

Räägime edasi CSS-i spetsiifikast. Mainisin varem, et JSON-i lähenemine stiilile loob hierarhia. Ja see on tõsi. Stiilid, mis on määratletud JSON-elementides theme.json peetakse vaiketeemastiilideks. Ja kõik, mis kasutaja on globaalsete stiilide kasutajaliideses seadistanud, alistab vaikeseaded.

Teisisõnu: kasutajastiilid on spetsiifilisemad kui vaiketeemad. Vaatame nupuplokki, et mõista, kuidas see toimib.

ma kasutan Tühi teema, tühi WordPressi teema ilma CSS-stiilita. Lisan uuele lehele nupu ploki.

OK, me teame, et WordPress Core tarnitakse kerge stiiliga. Nüüd lähen WordPress 3 vaiketeema TT6.1 juurde ja aktiveerin selle. Kui värskendan oma lehte nupuga, muudab nupp stiile.

Näete täpselt kust need uued stiilid tulevad TT3-des theme.json faili. See ütleb meile, et JSON-i elementide stiilid on WordPressi põhistiilide ees ülimuslikud.

Nüüd muudan TT3, alistades selle a-ga theme.json faili alamteemas, kus nupu ploki vaikimisi taustavärviks on määratud punane.

Kuid pange tähele viimasel ekraanipildil olevat otsingunuppu. See peaks ka punane olema, eks? See peab tähendama, et see on kujundatud teisel tasemel, kui minu tehtud muudatus on globaalne. Kui me tahame muutuda mõlemad nuppe, saaksime seda teha kasutaja tasemel, kasutades saidiredaktoris Global Styles kasutajaliidest.

Muutsime mõlema nupu taustavärvi siniseks ja muutsime teksti ka globaalsete stiilide kasutajaliidese abil. Pange tähele, et sealt pärit sinine oli teemastiilide ees ülimuslik!

Stiili mootor

See on väga kiire, kuid hea idee selle kohta, kuidas CSS-i spetsiifilisust WordPressi plokiteemades hallatakse. Kuid see pole täielik pilt, sest see on endiselt ebaselge kus need stiilid luuakse. WordPressil on oma vaikestiilid, mis tulevad kuskilt, tarbivad andmed sisse theme.json rohkemate stiilireeglite jaoks ja alistab need, mis on globaalsetes stiilides seatud.

Kas need stiilid on sees? Kas need on eraldi stiililehes? Võib-olla on need lehele süstitud a ?

See on see uus Stiili mootor loodetavasti laheneb. Style Engine on WordPress 6.1 uus API, mis on mõeldud stiilide loomise ja stiilide rakendamise järjepidevuse tagamiseks. Teisisõnu, see võtab kõik võimalikud stiiliallikad ja vastutab ainuisikuliselt plokistiilide õige loomise eest. Ma tean, ma tean. Veel üks abstraktsioon teiste abstraktsioonide kõrval, et luua vaid mõni stiil. Kuid stiilide tsentraliseeritud API omamine on ilmselt kõige elegantsem lahendus, arvestades, et stiile võib tulla mitmest kohast.

Saame Style Engine'ile alles esimese pilgu. Tegelikult on siin see, mis on siiani lõpetatud, pileti järgi:

• Kontrollige ja konsolideerige, kus kood genereerib ploki toe CSS-i tagumises otsas, et need tarnitaks samast kohast (erinevalt mitmest kohast). See hõlmab CSS-i reegleid, nagu veeris, polsterdus, tüpograafia, värvid ja äärised.
• Eemaldage korduvad paigutusspetsiifilised stiilid ja looge semantilised klassinimed.
• Plokkide, paigutuse ja elementide toetamiseks vähendage lehele prinditavate tekstisiseste stiilimärgendite arvu.

Põhimõtteliselt on see alus ühe API loomisele, mis sisaldab kõiki teema CSS-i stiilireegleid, olenemata nende päritolust. See puhastab viisi, kuidas WordPress sisestab 6.1-eelseid stiile ja loob semantiliste klassinimede süsteemi.

Lisateavet Style Engine'i pika- ja lühiajaliste eesmärkide kohta leiate siit Looge WordPressi põhiarutelu. Samuti saate jälgida jälgimise probleem ja projekti juhatus rohkemate värskenduste saamiseks.

JSON-elementidega töötamine

Rääkisime natuke JSON-i elementidest theme.json faili ja kuidas need on põhimõtteliselt HTML-i primitiivid muu hulgas selliste asjade nagu pealkirjade, nuppude ja linkide vaikestiilide määratlemiseks. Vaatame nüüd tegelikult kasutamine JSON-element ja kuidas see erinevates stiilikontekstides käitub.

JSON-elementidel on tavaliselt kaks konteksti: ülemaailmsel tasandil ja ploki tase. Globaalse taseme stiilid on määratletud väiksema spetsiifilisusega kui ploki tasemel, et tagada plokipõhised stiilid järjepidevuse tagamiseks kõikjal, kus plokke kasutatakse.

JSON-elementide globaalsed stiilid

Vaatame uut TT3 vaiketeemat ja uurime, kuidas selle nupud on kujundatud. Järgnev on TT3 lühendatud copy-paste theme.json fail (siin on täielik kood), mis näitab globaalsete stiilide jaotist, kuid originaalkoodi leiate siit.

{
  "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": {}
}

Kõik nupud on kujundatud globaalsel tasemel (styles.elements.button).

Seda saame kinnitada ka DevToolsis. Pange tähele, et klass helistas .wp-element-button on valija. Sama klassi kasutatakse ka interaktiivsete olekute kujundamiseks.

Jällegi, see stiil toimub globaalsel tasandil, pärit theme.json. Iga kord, kui kasutame nuppu, on sellel sama taust, kuna neil on sama valija ja ükski muu stiilireeglistik ei alista seda.

Kõrvalepõikena lisati WordPress 6.1 interaktiivsete olekute kujundamise tugi teatud elementide jaoks, nagu nupud ja lingid, kasutades pseudoklasse sisse theme.json - kaasa arvatud :hover, :focusja :active — või globaalsete stiilide kasutajaliides. Automaatika insener Dave Smith näitab seda funktsiooni YouTube'i videos.

Võiksime ka nupu taustavärvi alistada theme.json (eelistatavalt alamteemas, kuna kasutame WordPressi vaiketeemat) või saidiredaktori globaalsete stiilide seadetes (alamteemat pole vaja, kuna see ei nõua koodi muutmist).

Kuid siis muutuvad nupud korraga. Mis siis, kui tahame taustavärvi alistada, kui nupp on teatud ploki osa? Siin tulevad mängu plokkide tasemel stiilid.

Elementide plokitaseme stiilid

Et mõista, kuidas saame ploki tasemel stiile kasutada ja kohandada, muutkem otsinguplokis sisalduva nupu taustavärvi. Pidage meeles, et nupuplokk on olemas, kuid me alistame otsinguploki ploki tasemel taustavärvi. Nii rakendame uut värvi ainult seal, mitte ei rakenda seda globaalselt kõikidele nuppudele.

Selleks määratleme stiilid styles.blocks objekt sisse theme.json. See on õige, kui määratleme kõigi sisselülitatud nuppude globaalsed stiilid styles.elements, saame määrata nupuelementide plokipõhised stiilid styles.block, mis järgib sarnast struktuuri:

{
  "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)"
            }
          }
        },
        // ...
      }
    }
  }
}

Kas näete seda? Panin paika background ja text omadused peal styles.blocks.core/search.elements.button kahe CSS-i muutujaga, mis on WordPressis eelseadistatud.

Tulemus? Otsingunupp on nüüd punane (--wp--preset--color--quaternary) ja vaikimisi nupuplokk säilitab oma erkrohelise tausta.

Muutust näeme ka DevToolsis.

Sama kehtib ka siis, kui tahame stiilida nuppe, mis sisalduvad teistes plokkides. Ja nupud on vaid üks näide, nii et vaatame teist.

Näide: pealkirjade kujundamine igal tasandil

Toome kogu selle teabe näitega koju. Seekord teeme:

• Stiilige kõik pealkirjad globaalselt
• Stiilige kõik pealkirja 2 elemendid
• Style Heading 2 elemendid päringutsükli plokis

Esiteks alustame selle põhistruktuuriga theme.json:

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

See loob meie globaalsete ja plokitaseme stiilide põhijooned.

Stiilige kõik pealkirjad globaalselt

Lisame headings vaidlustage meie globaalsed stiilid ja rakendage mõnda stiili:

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

See määrab kõigi pealkirjade värviks WordPressis eelseadistatud põhivärvi. Muudame pealkirja 2 elementide värvi ja fondi suurust ka globaalsel tasandil:

{
  "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": { }
  }
}

Nüüd on kõik pealkirja 2 elemendid seatud peamiseks eelseadistatud värviks a-ga vedel fondi suurus. Aga võib-olla tahame parandada fontSize elemendi pealkiri 2 jaoks, kui seda kasutatakse päringuvaate plokis:

{
  "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
            }
          }
        }
      }
    }
  }
}

Nüüd on pealkirja 2 elementide jaoks kolm stiilide taset: kõik pealkirjad, kõik pealkirja 2 elemendid ja pealkirja 2 elemendid, mida kasutatakse päringutsükli plokis.

Olemasolevate teemade näited

Kuigi me vaatasime selles artiklis ainult nuppude ja pealkirjade stiilinäiteid, toetab WordPress 6.1 täiendavate elementide kujundamist. Seal on tabel, mis kirjeldab neid "Stiilide määratlemine JSON-elementidega" sektsiooni.

Tõenäoliselt mõtlete, millised JSON-i elemendid milliseid CSS-i atribuute toetavad, rääkimata sellest, kuidas te neid isegi deklareeriksite. Kuni ootame ametlikku dokumentatsiooni, on meil parimad ressursid theme.json olemasolevate teemade failid. Ma pakun linke teemadele, mis põhinevad nende kohandatud elementidel, ja juhin tähelepanu sellele, millised omadused on kohandatud.

Andke kindlasti igaüks theme.json faili hea välimus, sest need teemad sisaldavad suurepäraseid näiteid ploki tasemel stiili kohta styles.blocks objekt

Pakke kuni

Sagedased muudatused kogu saidi redaktoris muutuvad a paljude inimeste peamiseks ärrituse allikaks, Sealhulgas tehnikatundlikud Gutenbergi kasutajad. Isegi väga lihtsad CSS-i reeglid, mis sobivad hästi klassikaliste teemadega, ei paista plokkiteemade puhul töötavat, kuna uued spetsiifilisuse kihid käsitlesime varem.

Seoses a GitHubi ettepanek saidi redaktori uues brauserirežiimis ümber kujundamiseks, Sara Gooding kirjutab WP Taverni postituses:

Saidiredaktoris ringi liikudes on lihtne eksida, välja arvatud juhul, kui töötate tööriistaga päeval ja öösel. Navigeerimine on hüplik ja segane, eriti kui minnakse mallide sirvimisest mallide redigeerimiseni kuni üksikute plokkide muutmiseni.

Isegi kui olen innukas Gutenbergi plokiredaktorite ja block-eye teemade maailma rattur, on mul palju oma pettumusi. Olen siiski optimistlik ja eeldan, et saidiredaktor on pärast valmimist revolutsiooniline tööriist nii kasutajatele kui ka tehnotundlikele teemaarendajatele. See lootusrikas säuts see juba kinnitab. Vahepeal tundub, et peaksime valmistuma suuremateks muutusteks ja võib-olla isegi konarlikuks sõiduks.

viited

Loetlesin kõik ressursid, mida kasutasin selle artikli jaoks teabe otsimisel.

JSON elemendid

Globaalne stiil

Stiili mootor

Täname lugemise eest! Mulle meeldiks kuulda teie enda mõtteid plokiteemade kasutamise ja CSS-i haldamise kohta.