Tapa, jolla kirjoitamme CSS:ää WordPress-teemoille, on keskellä laajoja muutoksia. Jaoin äskettäin tekniikan nestetyypin tuen lisääminen WordPressiin Poiketen theme.json, uusi tiedosto, joka WordPress on painostanut kovasti tulla keskeiseksi totuuden lähteeksi määriteltäessä WordPress-teemojen tyylejä, jotka tukevat täyden sivuston muokkaustoimintoja (FSE).

Odota, ei style.css tiedosto? Meillä se on edelleen. Itse asiassa, style.css is edelleen pakollinen tiedosto lohkoteemoissa, vaikka sen rooli rajoittuukin suuresti teeman rekisteröintiin käytettyyn metatietoon. Se sanottu, tosiasia on se theme.json on edelleen aktiivisessa kehityksessä, mikä tarkoittaa, että olemme siirtymävaiheessa, jolloin saatat löytää sieltä määriteltyjä tyylejä styles.css tai jopa lohkotasolla.

Joten miltä muotoilu todella näyttää näinä WordPress FSE -päivinä? Sitä haluan käsitellä tässä artikkelissa. Asiakirjasta puuttuu lohkoteemojen muotoilua varten WordPress-teeman kehittäjän käsikirja, joten kaikki, mitä tässä käsittelemme, on se, mitä olen kerännyt asioiden nykyisestä tilanteesta sekä keskusteluista WordPress-teeman tulevaisuudesta.

WordPress-tyylien kehitys

Mukana olevat uudet kehitysominaisuudet WordPress 6.1 vie meidät lähemmäksi täysin määriteltyä tyylijärjestelmää theme.json, mutta työtä on vielä paljon tehtävänä, ennen kuin voimme täysin nojata siihen. Yksi tapa saada käsitys tulevista julkaisuista on käyttää Gutenberg-laajennus. Tässä kokeelliset ominaisuudet saavat usein kuivan ajon.

Toinen tapa saada käsitys siitä, missä olemme, on tarkastella evoluutiota oletusarvoiset WordPress-teemat. Tähän mennessä on kolme oletusteemaa, jotka tukevat koko sivuston muokkausta:

Mutta älä aloita kauppaa CSS:llä style.css JSON-ominaisuus-arvo-pareille theme.json vain vielä. On edelleen CSS-tyylisääntöjä, joita on tuettava theme.json ennen kuin ajattelemme sen tekemistä. Jäljellä olevista merkittävistä kysymyksistä keskustellaan parhaillaan tavoitteena siirtää kaikki CSS-tyylisäännöt täysimääräisesti theme.json ja yhdistää eri lähteitä theme.json osaksi Käyttöliittymä globaalien tyylien asettamiseen suoraan WordPress-sivustoeditori.

Tämä jättää meidät suhteellisen vaikeaan paikkaan. Ei vain siellä ei ole selvää polkua ohittaville teematyyleille, mutta on epäselvää, mistä nämä tyylit ovat peräisin – onko se eri kerroksista theme.json kuvaa, style.css, Gutenberg-laajennus vai jossain muualla?

Miksi theme.json sijasta style.css?

Saatat ihmetellä, miksi WordPress siirtyy kohti JSON-pohjaista tyylimäärittelyä perinteisen CSS-tiedoston sijaan. Ben Dwyer Gutenbergin kehitystiimistä selittää kaunopuheisesti, miksi theme.json lähestymistapa on etu teeman kehittäjille.

Kannattaa lukea Benin viesti, mutta liha on tässä lainauksessa:

CSS:n ohittaminen, olipa sitten asettelu, esiasetettu tai lohkotyyli, muodostaa esteen integraatiolle ja yhteentoimivuudelle: käyttöliittymän ja editorin välistä visuaalista pariteettia on vaikeampi ylläpitää, päivitykset estämään sisäosat voivat olla ristiriidassa ohitusten kanssa. Mukautettu CSS on lisäksi vähemmän siirrettävissä muihin lohkoteemiin.

Rohkaisemalla teeman tekijöitä käyttämään theme.json API, jos mahdollista, hierarkia "perus > teema > käyttäjä" määrittää tyylit voidaan ratkaista oikein.

Yksi suurimmista eduista CSS:n siirtämisessä JSONiin on, että JSON on koneellisesti luettava muoto, mikä tarkoittaa, että se voidaan paljastaa WordPressin sivustoeditorin käyttöliittymässä hakemalla API, jolloin käyttäjät voivat muokata oletusarvoja ja mukauttaa sivuston ulkoasua ilman kirjoittaa mitään CSS:ää. Se tarjoaa myös tavan muotoilla lohkoja johdonmukaisesti, samalla kun se tarjoaa rakenteen, joka luo tarkkoja kerroksia siten, että käyttäjän asetuksilla on korkein prioriteetti kohdassa määritettyihin verrattuna. theme.json. Tämä teematason tyylien välinen vuorovaikutus theme.json ja Global Styles -käyttöliittymän käyttäjän määrittämät tyylit tekevät JSON-lähestymistavasta niin houkuttelevan.

Kehittäjät ylläpitävät johdonmukaisuutta JSONissa, ja käyttäjät saavat joustavuutta koodittomilla räätälöinnillä. Se on win-win.

Muita etuja on varmasti ja Mike McAlister WP Enginestä luettelee useita tässä Twitter-ketjussa. Löydät tästä vielä enemmän etuja syvällistä keskustelua Make WordPress Core -blogissa. Ja kun olet lukenut sen, vertaa JSON-lähestymistavan etuja käytettävissä olevat tavat määritellä ja ohittaa tyylejä klassisissa teemoissa.

Tyylien määrittäminen JSON-elementeillä

Olemme jo nähneet paljon edistystä teeman osien suhteen theme.json osaa muotoilla. Ennen WordPress 6.1:tä pystyimme vain tyyliotsikoiden ja linkkien luomiseen. Nyt WordPress 6.1:n kanssa voimme lisätä painikkeita, kuvatekstejä, lainauksia ja otsikoita sekoitukseen.

Ja teemme sen määrittelemällä JSON-elementtejä. Ajattele elementtejä yksittäisinä komponentteina, jotka elävät WordPress-lohkossa. Oletetaan, että meillä on lohko, joka sisältää otsikon, kappaleen ja painikkeen. Nuo yksittäiset kappaleet ovat elementtejä, ja siellä on elements esine sisään theme.json jossa määrittelemme heidän tyylinsä:

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

Parempi tapa kuvata JSON-elementtejä on matalan tason komponentteja teemoille ja lohkoille, jotka eivät vaadi lohkojen monimutkaisuutta. Ne ovat HTML-primitiivien esityksiä joita ei ole määritelty lohkossa, mutta joita voidaan käyttää lohkoissa. Miten niitä tuetaan WordPressissä (ja Gutenberg-laajennuksessa) on kuvattu Lohkoeditorin käsikirja ja tämä Koko sivuston muokkausopastus Kirjailija: Carolina Nymark

Esimerkiksi linkkien tyyli on elements esine, mutta ne eivät ole lohko sinänsä. Mutta linkkiä voidaan käyttää lohkossa, ja se perii lohkossa määritetyt tyylit elements.link esine sisään theme.json. Tämä ei kuitenkaan täysin kiteytä elementin määritelmää, koska jotkin elementit on myös rekisteröity lohkoiksi, kuten otsikko- ja painikelohkot – mutta näitä lohkoja voidaan silti käyttää muissa lohkoissa.

Tässä on taulukko elementeistä, jotka ovat tällä hetkellä käytettävissä tyyliin theme.json, Carolinan luvalla:

Kuten näet, nyt on vielä alkua ja paljon on vielä siirrettävä Gutenberg-laajennuksesta WordPress Coreen. Mutta voit nähdä, kuinka nopeaa olisi tehdä jotain, kuten tyyliä teeman kaikki otsikot maailmanlaajuisesti etsimättä valitsimia CSS-tiedostoista tai DevToolsista.

Lisäksi voit myös alkaa nähdä, miten rakenne theme.json tavallaan muodostaa spesifisyyden kerroksia, jotka lähtevät globaaleista elementeistä (esim headings) yksittäisiin elementteihin (esim h1) ja lohkotason tyylejä (esim h1 sisältyy lohkoon).

Lisätietoja JSON-elementeistä on saatavilla osoitteessa tämä Tee WordPress -ehdotus ja tämä avoin lippu Gutenberg-laajennuksen GitHub-varastossa.

JSON- ja CSS-spesifisyys

Jatketaanpa puhumista CSS-spesifisyydestä. Mainitsin aiemmin, että JSON-lähestymistapa tyyliin luo hierarkian. Ja se on totta. Tyylit, jotka on määritelty JSON-elementeissä theme.json katsotaan oletusteematyyleiksi. Ja kaikki, mitä käyttäjä on määrittänyt Global Styles -käyttöliittymässä, ohittaa oletusasetukset.

Toisin sanoen: käyttäjätyyleillä on enemmän tarkkuutta kuin oletusteematyyleillä. Katsotaanpa painikelohkoa saadaksesi käsityksen siitä, miten tämä toimii.

Käytän Tyhjä teema, tyhjä WordPress-teema ilman CSS-tyyliä. Aion lisätä painikelohkon uudelle sivulle.

OK, tiedämme, että WordPress Core toimitetaan kevyellä tyylillä. Nyt aion vaihtaa oletusarvoiseen TT3-teemaan WordPress 6.1:stä ja aktivoida sen. Jos päivitän sivuni painikkeella, painike muuttaa tyylejä.

Näet tarkalleen mistä nuo uudet tyylit tulevat TT3:ssa theme.json tiedosto. Tämä kertoo meille, että JSON-elementtityylit ovat etusijalla WordPress Core -tyyleihin nähden.

Nyt aion muokata TT3:a ohittamalla sen a theme.json tiedosto lapsiteemassa, jossa Painikelohkon oletustaustaväri on punainen.

Mutta huomaa hakupainike tuossa viimeisessä kuvakaappauksessa. Sen pitäisi olla myös punainen, eikö? Tämän täytyy tarkoittaa, että se on muotoiltu toiselle tasolle, jos tekemäni muutos on globaali. Jos haluamme muuttua sekä -painikkeita, voisimme tehdä sen käyttäjätasolla käyttämällä sivustoeditorin Global Styles -käyttöliittymää.

Muutimme molempien painikkeiden taustavärin siniseksi ja muokkasimme myös tekstiä Global styles -käyttöliittymän avulla. Huomaa, että sininen sieltä meni teematyylien edelle!

Tyylimoottori

Tämä on erittäin nopea, mutta hyvä idea siitä, kuinka CSS-spesifisyyttä hallitaan WordPress-lohkoteemoissa. Mutta se ei ole täydellinen kuva, koska se on edelleen epäselvä jossa niitä tyylejä luodaan. WordPressillä on omat oletustyylinsä, jotka tulevat jostain ja kuluttavat tiedot sisään theme.json saadaksesi lisää tyylisääntöjä ja ohittaa ne, jotka on asetettu Global Styles -sovelluksessa.

Ovatko nuo tyylit sisäisiä? Ovatko ne erillisessä tyylitaulukossa? Ehkä ne ruiskutetaan sivulle a ?

Siinä se uusi Tyylinen moottori toivottavasti ratkeaa. Style Engine on WordPress 6.1:n uusi API, jonka tarkoituksena on tuoda johdonmukaisuutta siihen, miten tyylejä luodaan ja missä tyylejä käytetään. Toisin sanoen se ottaa kaikki mahdolliset tyylilähteet ja on yksin vastuussa lohkotyylien oikeasta luomisesta. Tiedän tiedän. Vielä yksi abstraktio muiden abstraktioiden päälle vain joidenkin tyylien kirjoittamiseksi. Keskitetty API tyyleille on kuitenkin luultavasti tyylikkäin ratkaisu, koska tyylejä voi tulla useista paikoista.

Saamme vasta ensimmäisen katselun Style Engineen. Itse asiassa tässä on se, mitä tähän mennessä on saatu päätökseen, lipun mukaan:

• Tarkista ja yhdistä, missä koodi luo lohkotuen CSS:n taustapäässä, jotta ne toimitetaan samasta paikasta (eikä useista paikoista). Tämä kattaa CSS-säännöt, kuten marginaalin, täytön, typografian, värit ja reunukset.
• Poista toistuvat asettelukohtaiset tyylit ja luo semanttisia luokkien nimiä.
• Vähennä sivulle tulostettavien rivien tyylitunnisteiden määrää lohkon, asettelun ja elementtien tueksi.

Pohjimmiltaan tämä on perusta yhden API:n luomiselle, joka sisältää kaikki teeman CSS-tyylisäännöt, olivatpa ne sitten peräisin. Se puhdistaa tavan, jolla WordPress lisää tyylejä ennen 6.1:tä, ja perustaa järjestelmän semanttisille luokkanimille.

Lisätietoja Style Enginen pitkän ja lyhyen aikavälin tavoitteista löytyy tästä Tee WordPress Core -keskustelu. Voit myös seurata seuranta-ongelma ja projektilautakunta lisää päivityksiä.

Työskentely JSON-elementtien kanssa

Puhuimme hieman JSON-elementeistä theme.json tiedostoa ja kuinka ne ovat pohjimmiltaan HTML-primitiivejä oletustyylien määrittämiseen esimerkiksi otsikoille, painikkeille ja linkeille. Katsotaan nyt oikeasti käyttämällä JSON-elementti ja miten se käyttäytyy erilaisissa tyylikonteksteissa.

JSON-elementeillä on yleensä kaksi kontekstia: globaalilla tasolla ja lohkon taso. Globaalin tason tyylit määritellään vähemmän tarkkuudella kuin ne ovat lohkotasolla, jotta varmistetaan, että lohkokohtaiset tyylit ovat etusijalla johdonmukaisuuden vuoksi kaikkialla, missä lohkoja käytetään.

Globaalit tyylit JSON-elementeille

Katsotaanpa uutta TT3-oletusteemaa ja tutkitaan kuinka sen painikkeet on muotoiltu. Seuraava on lyhennetty copy-paste TT3:sta theme.json tiedosto (tässä koko koodi), joka näyttää yleiset tyylit -osion, mutta löydät alkuperäisen koodin täältä.

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

Kaikki painikkeet on tyylitelty globaalilla tasolla (styles.elements.button).

Voimme vahvistaa tämän myös DevToolsissa. Huomaa, että luokka kutsui .wp-element-button on valitsin. Samaa luokkaa käytetään myös interaktiivisten tilojen tyyliin.

Jälleen tämä muotoilu tapahtuu maailmanlaajuisella tasolla, lähtöisin theme.json. Aina kun käytämme painiketta, sillä on sama tausta, koska niillä on sama valitsin, eivätkä muut tyylisäännöt ohita sitä.

Sivulle lisätty WordPress 6.1 tuki interaktiivisten tilojen muotoiluun tietyille elementeille, kuten painikkeille ja linkeille, käyttämällä pseudo-luokkia theme.json - mukaan lukien :hover, :focusja :active - tai Global Styles -käyttöliittymä. Automaattinen insinööri Dave Smith osoittaa Tämä ominaisuus YouTube -videossa.

Voisimme ohittaa painikkeen taustavärin joko sisään theme.json (mieluiten alatason teemassa, koska käytämme WordPress-oletusteemaa) tai sivustoeditorin Global Styles -asetuksissa (alateemaa ei tarvita, koska se ei vaadi koodin vaihtoa).

Mutta sitten painikkeet vaihtuvat kerralla. Entä jos haluamme ohittaa taustavärin, kun painike on osa tiettyä lohkoa? Siellä lohkotason tyylit tulevat peliin.

Elementtien lohkotason tyylit

Ymmärtääksemme, kuinka voimme käyttää ja mukauttaa tyylejä lohkotasolla, muutetaan hakulohkossa olevan painikkeen taustaväriä. Muista, että Painikelohko on olemassa, mutta teemme taustavärin ohittamista hakulohkon lohkotasolla. Tällä tavalla käytämme uutta väriä vain siellä sen sijaan, että käytämme sitä maailmanlaajuisesti kaikkiin painikkeisiin.

Tätä varten määrittelemme tyylit styles.blocks esine sisään theme.json. Se on oikein, jos määritämme yleiset tyylit kaikille painikkeille styles.elements, voimme määrittää lohkokohtaiset tyylit painikeelementeille styles.block, joka noudattaa samanlaista rakennetta:

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

Näetkö tuon? asetin background ja text ominaisuudet päällä styles.blocks.core/search.elements.button kahdella CSS-muuttujalla, jotka on esiasetettu WordPressissä.

Lopputulos? Hakupainike on nyt punainen (--wp--preset--color--quaternary), ja oletuspainikelohko säilyttää kirkkaan vihreän taustansa.

Näemme muutoksen myös DevToolsissa.

Sama pätee, jos haluamme tyylittää painikkeita, jotka sisältyvät muihin lohkoihin. Ja painikkeet ovat vain yksi esimerkki, joten katsotaanpa toista.

Esimerkki: Otsikkeiden muotoilu kullakin tasolla

Ajetaan kaikki tämä tieto kotiin esimerkin avulla. Tällä kertaa teemme:

• Tyyli kaikki otsikot maailmanlaajuisesti
• Tyyli kaikki Otsikko 2 -elementit
• Style Heading 2 -elementit kyselysilmukkalohkossa

Aloitetaan ensin tuotteen perusrakenteesta theme.json:

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

Tämä luo ääriviivat globaaleille ja lohkotason tyyleillemme.

Tyyli kaikki otsikot maailmanlaajuisesti

Lisätään headings vastusta globaaleja tyylejämme ja käytä joitain tyylejä:

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

Tämä asettaa kaikkien otsikoiden värin WordPressin esiasetettuun perusväriin. Muutetaan Heading 2 -elementtien väriä ja kirjasinkokoa myös globaalilla tasolla:

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

Nyt kaikki Otsikko 2 -elementit on asetettu ensisijaiseksi esiasetukseksi väriksi a nestemäinen fonttikoko. Mutta ehkä haluamme korjauksen fontSize Otsikko 2 -elementille, kun sitä käytetään Query Look -lohkossa:

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

Nyt meillä on kolme tyylitasoa Otsikko 2 -elementeille: kaikki otsikot, kaikki Otsikko 2 -elementit ja Otsikko 2 -elementit, joita käytetään Kyselysilmukka -lohkossa.

Esimerkkejä olemassa olevista teemoista

Vaikka tarkastelimme tässä artikkelissa vain painikkeiden ja otsikoiden tyyliesimerkkejä, WordPress 6.1 tukee lisäelementtien muotoilua. Siinä on taulukko, jossa ne esitetään "Tyylien määrittäminen JSON-elementeillä" osiossa.

Ihmettelet todennäköisesti, mitkä JSON-elementit tukevat mitäkin CSS-ominaisuuksia, puhumattakaan siitä, kuinka edes ilmoittaisit ne. Odottaessamme virallisia asiakirjoja, parhaat resurssit, joita meillä on, ovat theme.json tiedostot olemassa oleville teemoille. Aion tarjota linkkejä teemoihin niiden mukauttamien elementtien perusteella ja osoittaa, mitä ominaisuuksia on mukautettu.

Muista antaa jokaiselle theme.json tiedosto on hyvä ulkoasu, koska nämä teemat sisältävät erinomaisia ​​esimerkkejä lohkotason tyylistä styles.blocks esine.

Käärimistä

Toistuvista muutoksista koko sivuston editorissa on tulossa a tärkeimpiä ärsytyksen lähteitä monille ihmisillemukaan lukien tekniikkataitoja Gutenbergin käyttäjiä. Jopa hyvin yksinkertaiset CSS-säännöt, jotka toimivat hyvin klassisten teemojen kanssa, eivät näytä toimivan lohkoteemojen kanssa, koska uusia spesifisyyden kerroksia käsittelimme aiemmin.

Mitä tulee a GitHub ehdotus suunnitellaksesi sivustoeditorin uudelleen uudessa selaintilassa, Sara Gooding kirjoittaa WP Tavern -viestissä:

On helppo eksyä, kun yrität kiertää sivustoeditoria, ellet työskentele yötä päivää työkalun sisällä. Navigointi on hämmentävää ja hämmentävää, varsinkin kun siirrytään mallien selaamisesta mallien muokkaamiseen yksittäisten lohkojen muokkaamiseen.

Jopa innokkaana varhaisena ratsastajana Gutenbergin lohkoeditorin ja block-eye-teemojen maailmassa, minulla on paljon omia turhautumisia. Olen kuitenkin optimistinen ja odotan, että sivustoeditori on valmistuttuaan vallankumouksellinen työkalu käyttäjille ja tekno-taitojen teemakehittäjille. Tämä toiveikas twiitti sen jo vahvistaa. Sillä välin näyttää siltä, ​​että meidän pitäisi valmistautua uusiin muutoksiin ja ehkä jopa kuoppaiseen ajoon.

Viitteet

Luettelen kaikki resurssit, joita käytin tutkiessani tämän artikkelin tietoja.

JSON-elementtejä

Globaalit tyylit

Tyylinen moottori

Kiitos lukemisesta! Haluaisin kuulla omia ajatuksiasi lohkoteemojen käytöstä ja siitä, miten hallitset CSS:täsi.