Način, kako pišemo CSS za teme WordPress, je sredi obsežnih sprememb. Nedavno sem delil tehniko za dodajanje podpore za tekoče vrste v WordPressu z theme.json, novo datoteko, ki WordPress si močno prizadeva postati osrednji vir resnice za definiranje slogov v temah WordPress, ki podpirajo funkcije urejanja celotnega spletnega mesta (FSE).

Čakaj, ne style.css mapa? To še imamo. Pravzaprav, style.css is še vedno zahtevana datoteka v blokovnih temah, čeprav je njegova vloga močno zmanjšana na meta informacije, ki se uporabljajo za registracijo teme. Kot rečeno, dejstvo je, da theme.json je še vedno v aktivnem razvoju, kar pomeni, da smo v prehodnem obdobju, kjer boste morda našli sloge, opredeljene tam, v styles.css ali celo na ravni bloka.

Torej, kako pravzaprav izgleda oblikovanje v teh dneh WordPress FSE? To želim obravnavati v tem članku. Primanjkuje dokumentacije za teme blokov stilov v Priročnik za razvijalce tem WordPress, tako da je vse, kar tukaj pokrivamo, tisto, kar sem zbral o tem, kje so stvari trenutno, kot tudi razprave o prihodnosti tem WordPressa.

Razvoj stilov WordPress

Nove razvojne funkcije, ki so vključene v WordPress 6.1 nas približajo sistemu slogov, ki so popolnoma definirani v theme.json, vendar nas čaka še veliko dela, preden se lahko popolnoma zanesemo nanj. Eden od načinov, kako lahko dobimo idejo o tem, kaj prihaja v prihodnjih izdajah, je uporaba Gutenbergov vtičnik. Tukaj se eksperimentalne funkcije pogosto pustijo na suhem.

Drug način, kako lahko dobimo občutek, kje smo, je, da pogledamo razvoj privzete teme WordPress. Do danes obstajajo tri privzete teme, ki podpirajo urejanje celotnega mesta:

Vendar ne začnite trgovati s CSS style.css za pare lastnost-vrednost JSON v theme.json samo še. Še vedno obstajajo slogovna pravila CSS, ki jih je treba podpreti theme.json preden pomislimo na to. Trenutno potekajo razprave o preostalih pomembnih vprašanjih, da bi v celoti prenesli vsa pravila sloga CSS theme.json in združiti različne vire theme.json v UI za nastavitev globalnih slogov neposredno v Urejevalnik spletnega mesta WordPress.

To nas pušča v relativno težkem položaju. Ne samo, da je tam ni jasne poti za preglasitev slogov teme, vendar ni jasno, od kod izvirajo ti slogi – ali iz različnih plasti theme.json datoteke, style.css, vtičnik Gutenberg ali kje drugje?

Zakaj theme.json Namesto style.css?

Morda se sprašujete, zakaj se WordPress premika k definiciji slogov, ki temelji na JSON, namesto k tradicionalni datoteki CSS. Ben Dwyer iz razvojne ekipe Gutenberg zgovorno artikulira, zakaj theme.json pristop je korist za razvijalce tem.

Vredno je prebrati Benovo objavo, vendar je meso v tem citatu:

Preglasitev CSS, ne glede na to, ali so slogi postavitve, prednastavitve ali blokov, predstavlja oviro za integracijo in interoperabilnost: vizualno pariteto med vmesnikom in urejevalnikom postane težje vzdrževati, nadgradnje notranjih blokov so lahko v nasprotju s preglasitvami. CSS po meri je poleg tega manj prenosljiv med drugimi temami blokov.

S spodbujanjem avtorjev tem k uporabi theme.json API, kjer je to mogoče, je mogoče pravilno razrešiti hierarhijo definiranih slogov »osnova > tema > uporabnik«.

Ena glavnih prednosti premikanja CSS v JSON je, da je JSON strojno berljiv format, kar pomeni, da ga je mogoče izpostaviti v uporabniškem vmesniku urejevalnika spletnega mesta WordPress s pridobivanjem API-ja, kar uporabnikom omogoča spreminjanje privzetih vrednosti in prilagajanje videza spletnega mesta brez pisanje kakršnega koli CSS. Zagotavlja tudi način doslednega stiliziranja blokov, hkrati pa zagotavlja strukturo, ki ustvarja plasti specifičnosti, tako da imajo uporabniške nastavitve najvišjo prednost pred tistimi, ki so definirane v theme.json. To prepletanje med slogi na ravni teme v theme.json in uporabniško definirani slogi v uporabniškem vmesniku Global Styles so tisto, zaradi česar je pristop JSON tako privlačen.

Razvijalci ohranjajo doslednost v JSON, uporabniki pa pridobijo prilagodljivost s prilagoditvami brez kode. To je zmagovalno.

Zagotovo obstajajo druge prednosti in Mike McAlister iz WP Engine jih navaja več v tej niti na Twitterju. V tem lahko najdete še več prednosti poglobljeno razpravo na spletnem dnevniku Make WordPress Core. In ko ste to prebrali, primerjajte prednosti pristopa JSON z razpoložljive načine za definiranje in preglasitev slogov v klasičnih temah.

Definiranje stilov z elementi JSON

Kar zadeva dele teme, smo že videli velik napredek theme.json je sposoben stilizirati. Pred WordPressom 6.1 smo lahko naredili samo slog naslovov in povezav. Zdaj, z WordPress 6.1, dodamo lahko gumbe, napise, citate in naslove na mešanico.

In to naredimo z definiranjem elementi JSON. Elemente si predstavljajte kot posamezne komponente, ki živijo v bloku WordPress. Recimo, da imamo blok, ki vsebuje naslov, odstavek in gumb. Ti posamezni deli so elementi in obstaja elements predmet v theme.json kjer definiramo njihove sloge:

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

Boljši način za opis elementov JSON je kot komponente nizke ravni za teme in bloke, ki ne potrebujejo kompleksnosti blokov. So predstavitve primitivov HTML ki niso definirani v bloku, vendar jih je mogoče uporabiti med bloki. Kako so podprti v WordPressu (in vtičniku Gutenberg), je opisano v Priročnik za urejevalnik blokov in to Celotna vadnica za urejanje spletnega mesta avtorja Carolina Nymark.

Povezave so na primer oblikovane v elements predmet, vendar sami po sebi niso blok. Toda povezavo je mogoče uporabiti v bloku in bo podedovala sloge, definirane na elements.link predmet v theme.json. Vendar to ne zajame v celoti definicije elementa, saj so nekateri elementi registrirani tudi kot bloki, kot sta bloka naslova in gumba, vendar je te bloke še vedno mogoče uporabiti v drugih blokih.

Tukaj je tabela elementov, ki so trenutno na voljo za oblikovanje theme.json, z dovoljenjem Caroline:

Kot lahko vidite, je še zgodaj in veliko se mora še premakniti iz vtičnika Gutenberg v WordPress Core. Lahko pa vidite, kako hitro bi bilo narediti nekaj, kot je globalno oblikovanje vseh naslovov v temi, ne da bi iskali izbirnike v datotekah CSS ali orodjih za razvijalce.

Poleg tega lahko začnete opazovati tudi strukturo theme.json nekakšno oblikuje plasti specifičnosti, ki izhajajo iz globalnih elementov (npr headings) na posamezne elemente (npr h1) in slogi na ravni bloka (npr h1 v bloku).

Dodatne informacije o elementih JSON so na voljo v ta predlog Make WordPress in to odprto vstopnico v repo GitHub vtičnika Gutenberg.

JSON in CSS specifičnost

Nadaljujmo s pogovorom o specifičnosti CSS. Prej sem omenil, da pristop JSON k slogu vzpostavlja hierarhijo. In res je. Slogi, ki so definirani na elementih JSON v theme.json veljajo za privzete sloge tem. Vse, kar uporabnik nastavi v uporabniškem vmesniku Global Styles, bo preglasilo privzete nastavitve.

Z drugimi besedami: uporabniški slogi imajo več specifičnosti kot privzeti slogi tem. Oglejmo si blok gumbov, da dobimo občutek, kako to deluje.

Uporabljam Prazna tema, prazna tema WordPress brez oblikovanja CSS. Na novo stran bom dodal blok gumbov.

OK, vemo, da je WordPress Core opremljen z nekaj lahkotnega stila. Zdaj bom preklopil na privzeto temo TT3 iz WordPressa 6.1 in jo aktiviral. Če svojo stran osvežim z gumbom, gumb spremeni sloge.

Točno lahko vidite od kod prihajajo ti novi slogi v TT3 theme.json mapa. To nam pove, da imajo slogi elementov JSON prednost pred slogi WordPress Core.

Zdaj bom spremenil TT3 tako, da ga preglasim z a theme.json datoteko v podrejeni temi, kjer je privzeta barva ozadja bloka gumbov nastavljena na rdečo.

Toda opazite gumb za iskanje na zadnjem posnetku zaslona. Tudi rdeča bi morala biti, kajne? To mora pomeniti, da je stiliziran na drugi ravni, če je sprememba, ki sem jo naredil, na globalni ravni. Če želimo spremeniti tako gumbi, lahko to storimo na ravni uporabnika z uporabniškim vmesnikom Global Styles v urejevalniku spletnega mesta.

Spremenili smo barvo ozadja obeh gumbov v modro in spremenili tudi besedilo z uporabo uporabniškega vmesnika Global styles. Upoštevajte, da je modra od tam imela prednost pred slogi tem!

Motor sloga

To je zelo hitra, a dobra ideja o tem, kako se specifičnost CSS upravlja v temah blokov WordPress. Vendar to ni popolna slika, ker je še vedno nejasna Kje ti slogi so ustvarjeni. WordPress ima svoje lastne privzete sloge, ki prihajajo od nekje, vanje porabijo podatke theme.json za več slogovnih pravil in preglasi tista s čimer koli nastavljenim v Globalnih slogih.

Ali so ti slogi vključeni? Ali so v ločeni tabeli slogov? Mogoče so vbrizgani na stran v a ?

To je tisto novo Slogovni motor upajmo, da bo rešil. Slogovni mehanizem je nov API v WordPressu 6.1, ki naj bi zagotovil doslednost v tem, kako se ustvarjajo slogi in kje se slogi uporabljajo. Z drugimi besedami, uporablja vse možne vire slogov in je edini odgovoren za pravilno generiranje slogov blokov. Vem, vem. Še ena abstrakcija na vrhu drugih abstrakcij samo za ustvarjanje nekaterih stilov. Toda imeti centraliziran API za sloge je verjetno najelegantnejša rešitev glede na to, da lahko slogi prihajajo iz številnih krajev.

Dobili smo le prvi pogled na Style Engine. Pravzaprav je tukaj dokončano do zdaj, glede na vozovnico:

• Revizija in konsolidacija, kjer koda ustvari CSS za podporo blokov v ozadju, tako da so dostavljeni z istega mesta (v nasprotju z več mestih). To zajema pravila CSS, kot so rob, oblazinjenje, tipografija, barve in obrobe.
• Odstranite ponavljajoče se sloge, specifične za postavitev, in ustvarite semantična imena razredov.
• Zmanjšajte število vgrajenih slogovnih oznak, ki jih natisnemo na stran za podporo blokov, postavitve in elementov.

V bistvu je to temelj za vzpostavitev enotnega API-ja, ki vsebuje vsa pravila sloga CSS za temo, ne glede na to, od koder prihajajo. Očisti način, kako bi WordPress vbrizgal vgrajene sloge pred 6.1, in vzpostavi sistem za semantična imena razredov.

Dodatne podrobnosti o dolgoročnih in kratkoročnih ciljih Style Engine lahko najdete v tem Ustvarite razpravo o WordPress Core. Spremljate lahko tudi težava s sledenjem in projektna tabla več posodobitev.

Delo z elementi JSON

Nekaj ​​smo govorili o elementih JSON v theme.json in kako so v bistvu primitivi HTML za definiranje privzetih slogov za stvari, kot so med drugim naslovi, gumbi in povezave. Zdaj pa poglejmo dejansko uporabo element JSON in kako se obnaša v različnih slogovnih kontekstih.

Elementi JSON imajo na splošno dva konteksta: globalna raven in ravni bloka. Slogi globalne ravni so definirani z manj specifičnosti kot na ravni bloka, da se zagotovi, da imajo slogi, specifični za blok, prednost zaradi doslednosti, kjer koli se uporabljajo bloki.

Globalni slogi za elemente JSON

Oglejmo si novo privzeto temo TT3 in preučimo, kako so oblikovani njeni gumbi. Sledi skrajšano kopiranje in lepljenje TT3 theme.json datoteka (tukaj je celotna koda), ki prikazuje razdelek o globalnih slogih, izvirno kodo pa najdete tukaj.

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

Vsi gumbi so oblikovani na globalni ravni (styles.elements.button).

To lahko potrdimo tudi v DevTools. Opazite, da je poklical razred .wp-element-button je selektor. Isti razred se uporablja tudi za oblikovanje interaktivnih stanj.

Še enkrat, ta stil se dogaja na globalni ravni, izhaja iz theme.json. Kadarkoli uporabimo gumb, bo imel isto ozadje, ker si delita isti izbirnik in ga ne preglasijo nobena druga slogovna pravila.

Poleg tega je dodan WordPress 6.1 podpora za oblikovanje interaktivnih stanj za določene elemente, kot so gumbi in povezave, z uporabo psevdorazredov v theme.json - tudi :hover, :focusin :active — ali uporabniški vmesnik Global Styles. Avtomatski inženir Dave Smith dokazuje, to funkcijo v videoposnetku YouTube.

Barvo ozadja gumba lahko preglasimo bodisi v theme.json (po možnosti v podrejeni temi, ker uporabljamo privzeto temo WordPress) ali v nastavitvah Global Styles v urejevalniku mesta (podrejena tema ni potrebna, ker ne zahteva spremembe kode).

Ampak potem se bodo gumbi naenkrat spremenili. Kaj pa, če želimo preglasiti barvo ozadja, ko je gumb del določenega bloka? Tu pridejo v poštev slogi na ravni blokov.

Slogi na ravni bloka za elemente

Da bi razumeli, kako lahko uporabljamo in prilagajamo sloge na ravni bloka, spremenimo barvo ozadja gumba, ki ga vsebuje iskalni blok. Ne pozabite, da obstaja blok gumbov, vendar to, kar počnemo, je preglasitev barve ozadja na ravni bloka bloka Iskanje. Na ta način novo barvo uporabimo samo tam, namesto da bi jo uporabili globalno za vse gumbe.

Da bi to naredili, definiramo sloge na styles.blocks predmet v theme.json. Tako je, če definiramo globalne sloge za vse gumbe styles.elements, lahko definiramo sloge, specifične za blok, za elemente gumbov na styles.block, ki sledi podobni strukturi:

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

Poglej to? Nastavil sem background in text lastnosti na styles.blocks.core/search.elements.button z dvema spremenljivkama CSS, ki sta prednastavljeni v WordPressu.

rezultat? Gumb za iskanje je zdaj rdeč (--wp--preset--color--quaternary), privzeti blok gumbov pa ohrani svetlo zeleno ozadje.

Spremembo lahko opazimo tudi v DevTools.

Enako velja, če želimo oblikovati gumbe, ki so vključeni v druge bloke. In gumbi so samo en primer, zato si poglejmo drugega.

Primer: Oblikovanje naslovov na vsaki ravni

Vse te informacije povejmo domov s primerom. Tokrat bomo:

• Oblikujte vse naslove globalno
• Oblikujte vse elemente naslova 2
• Elementi Style Heading 2 v bloku Query Loop

Najprej začnimo z osnovno strukturo za theme.json:

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

To vzpostavlja oris za naše globalne sloge in sloge na ravni blokov.

Oblikujte vse naslove globalno

Dodajmo headings nasprotujte našim globalnim slogom in uporabite nekatere sloge:

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

To nastavi barvo za vse naslove na prednastavljeno osnovno barvo v WordPressu. Spremenimo barvo in velikost pisave elementov naslova 2 tudi na globalni ravni:

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

Zdaj so vsi elementi naslova 2 nastavljeni kot primarna prednastavljena barva z a tekoča velikost pisave. Morda pa želimo popraviti fontSize za element Heading 2, ko je uporabljen v bloku 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
            }
          }
        }
      }
    }
  }
}

Zdaj imamo tri ravni slogov za elemente naslova 2: vse naslove, vse elemente naslova 2 in elemente naslova 2, ki se uporabljajo v bloku Query Loop.

Primeri obstoječih tem

Čeprav smo si v tem članku ogledali le primere oblikovanja za gumbe in naslove, WordPress 6.1 podpira oblikovanje dodatnih elementov. Tam je tabela, ki jih opisuje “Definiranje slogov z elementi JSON” oddelek.

Verjetno se sprašujete, kateri elementi JSON podpirajo katere lastnosti CSS, da ne omenjamo, kako bi jih sploh deklarirali. Medtem ko čakamo na uradno dokumentacijo, bodo najboljši viri, ki jih imamo theme.json datoteke za obstoječe teme. Zagotovil bom povezave do tem na podlagi elementov, ki jih prilagajajo, in pokazal, katere lastnosti so prilagojene.

Bodite prepričani, da daste vsakemu theme.json datoteko dober videz, ker te teme vključujejo odlične primere oblikovanja na ravni blokov na styles.blocks predmet.

Zavijanje

Pogoste spremembe urejevalnika celotnega spletnega mesta postajajo a glavni vir draženja za mnoge ljudi, Vključno z tehnično podkovani uporabniki Gutenberga. Celo zelo preprosta pravila CSS, ki dobro delujejo s klasičnimi temami, se zdi, da ne delujejo za blok teme zaradi nove plasti specifičnosti smo obravnavali prej.

Glede a Predlog GitHub za preoblikovanje urejevalnika spletnega mesta v novem načinu brskalnika, Sara Gooding piše v objavi WP Tavern:

Z lahkoto se izgubite, medtem ko poskušate obiti urejevalnik spletnega mesta, razen če delate dan in noč znotraj orodja. Krmarjenje je nemirno in zmedeno, zlasti ko prehajate od brskanja po predlogi do urejanja predloge do spreminjanja posameznih blokov.

Tudi kot navdušen zgodnji jezdec v svetu Gutenbergovega urejevalnika blokov in tem za blok oči imam na tone lastnih frustracij. Sem pa optimist in pričakujem, da bo urejevalnik spletnega mesta, ko bo končan, revolucionarno orodje tako za uporabnike kot za tehnično podkovane razvijalce tem. to upajoči tvit to že potrjuje. Medtem se zdi, da bi se morali pripravljati na več sprememb in morda celo na nerodno vožnjo.

Reference

Navajam vse vire, ki sem jih uporabil med raziskovanjem informacij za ta članek.

elementi JSON

Globalni slogi

Slogovni motor

Hvala za branje! Rad bi slišal vaše razmišljanje o uporabi blokovnih tem in o tem, kako upravljate svoj CSS.