Az a mód, ahogyan a WordPress témákhoz CSS-t írunk, hatalmas változások közepette zajlik. Nemrég megosztottam egy technikát fluid típusú támogatás hozzáadása a WordPressben útján theme.json, egy új fájl, amely A WordPress keményen nyomul hogy az igazság központi forrásává váljon a stílusok meghatározásához a WordPress témákban, amelyek támogatják a teljes webhely szerkesztési (FSE) funkcióit.

Várj, nem style.css fájl? Ez még mindig megvan. Valójában, style.css is továbbra is kötelező fájl blokk témákban, bár szerepe nagymértékben a téma regisztrálásához használt metainformációkra korlátozódik. Mondjuk, az tény theme.json még mindig aktív fejlesztés alatt áll, ami azt jelenti, hogy egy átmeneti időszakban vagyunk, ahol előfordulhat, hogy megtalálja az ott meghatározott stílusokat styles.css vagy akár blokkszinten.

Szóval, hogyan néz ki valójában a stílus a WordPress FSE napjaiban? Ez az, amire ebben a cikkben szeretnék kitérni. Hiányzik a dokumentáció a blokktémák stílusához a WordPress téma fejlesztői kézikönyv, tehát minden, amiről itt szó van, az az, amit összegyűjtöttem a dolgok jelenlegi állásáról, valamint a WordPress-téma jövőjéről szóló megbeszélésekről.

A WordPress stílusok fejlődése

Az új fejlesztési funkciók, amelyek benne vannak WordPress 6.1 közelebb visz minket a stílusok olyan rendszeréhez, amelyek teljesen meghatározottak theme.json, de még rengeteg munka vár ránk, mielőtt teljesen rátámaszkodhatunk. Az egyik módja annak, hogy képet kapjunk arról, hogy mi várható a jövőbeli kiadásokban, az a Gutenberg bővítmény. Ez az a hely, ahol a kísérleti funkciók gyakran szárazon futnak.

Egy másik módja annak, hogy érezzük, hol tartunk, ha megnézzük a fejlődését alapértelmezett WordPress témák. A mai napig három alapértelmezett téma támogatja a teljes webhely szerkesztését:

De ne kezdje el kereskedni a CSS-szel style.css JSON tulajdonság-érték párokhoz theme.json csak még. Még mindig vannak olyan CSS stílusszabályok, amelyeket támogatni kell theme.json mielőtt erre gondolnánk. A fennmaradó fontos kérdéseket jelenleg megvitatják azzal a céllal, hogy az összes CSS-stílusszabályt teljes mértékben áthelyezzék theme.json és konszolidálja a különböző forrásokat theme.json egy UI a globális stílusok beállításához közvetlenül a WordPress webhelyszerkesztő.

Ezzel viszonylag nehéz helyzetben vagyunk. Nem csak ott van nincs egyértelmű út a témastílusok felülírásához, de nem világos, honnan származnak ezek a stílusok – a különböző rétegekből theme.json kép, style.css, a Gutenberg bővítmény, vagy valahol máshol?

Miért theme.json helyett style.css?

Kíváncsi lehet, hogy a WordPress miért halad a JSON-alapú stílusmeghatározás felé a hagyományos CSS-fájlok helyett. Ben Dwyer, a Gutenberg fejlesztőcsapatától ékesszólóan megfogalmazza, miért a theme.json megközelítés előnyt jelent a témafejlesztők számára.

Érdemes elolvasni Ben bejegyzését, de a hús ebben az idézetben van:

A CSS felülbírálása, legyen az elrendezés, előre beállított vagy blokkstílus, akadályt jelent az integráció és az interoperabilitás előtt: a frontend és a szerkesztő közötti vizuális paritást nehezebb fenntartani, a belső elemek blokkolására irányuló frissítések ütközhetnek a felülírásokkal. Az egyéni CSS ráadásul kevésbé hordozható más blokktémák között.

A téma szerzőinek használatának ösztönzésével theme.json Az API ahol lehetséges, az „alap > téma > felhasználó” definiált stílusok hierarchiája megfelelően feloldható.

A CSS JSON-ba való áthelyezésének egyik fő előnye, hogy a JSON géppel olvasható formátum, ami azt jelenti, hogy API lekérésével elérhető a WordPress Site Editor UI-ban, így a felhasználók módosíthatják az alapértelmezett értékeket és testreszabhatják a webhely megjelenését anélkül egyáltalán bármilyen CSS-t írni. Lehetőséget biztosít a blokkok következetes stíluszására is, miközben olyan struktúrát biztosít, amely olyan specifikus rétegeket hoz létre, hogy a felhasználói beállítások a legmagasabb prioritást élvezzék a theme.json. Ez a kölcsönhatás a témaszintű stílusok között theme.json és a Global Styles UI felhasználó által definiált stílusai teszik vonzóvá a JSON-megközelítést.

A fejlesztők fenntartják a JSON konzisztenciáját, a felhasználók pedig rugalmasságot kapnak a kód nélküli testreszabással. Ez mindenki számára előnyös.

Vannak más előnyök is, az biztos, és Mike McAlister, a WP Engine munkatársa számos felsorolást sorol fel ebben a Twitter-szálban. Ebben még több előnyt is találhatsz mélyreható megbeszélés a Make WordPress Core blogon. És miután elolvasta, hasonlítsa össze a JSON-megközelítés előnyeit a stílusok meghatározásának és felülbírálásának elérhető módjai a klasszikus témákban.

Stílusok meghatározása JSON elemekkel

Már sok előrelépést tapasztaltunk a téma mely részeit illetően theme.json stílusra képes. A WordPress 6.1 előtt csak stílusos címsorokat és linkeket tudtunk tenni. Most, a WordPress 6.1-el, gombokat, feliratokat, idézeteket és címsorokat adhatunk hozzá a keverékhez.

És ezt úgy tesszük, hogy meghatározzuk JSON elemek. Tekintse az elemeket úgy, mint egyedi összetevőket, amelyek egy WordPress blokkban élnek. Tegyük fel, hogy van egy blokkunk, amely egy címsort, egy bekezdést és egy gombot tartalmaz. Ezek az egyes darabok elemek, és van egy elements tárgy be theme.json ahol meghatározzuk a stílusukat:

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

A JSON-elemek leírásának jobb módja a témák és blokkok alacsony szintű összetevői, amelyeknek nincs szükségük a blokkok összetettségére. Ezek a HTML primitívek reprezentációi amelyek nincsenek blokkban definiálva, de blokkok között használhatók. A WordPress (és a Gutenberg-bővítmény) támogatásának módja a Blokkszerkesztő kézikönyv és ez a Teljes webhelyszerkesztési útmutató írta: Carolina Nymark.

Például a hivatkozások stílusa a elements objektum, de önmagukban nem blokk. De egy hivatkozás használható egy blokkban, és örökli a ben meghatározott stílusokat elements.link tárgy be theme.json. Ez azonban nem tartalmazza teljesen egy elem definícióját, mivel egyes elemek blokkként is regisztrálva vannak, például a Címsor és a Gomb blokkok – de ezek a blokkok továbbra is használhatók más blokkon belül.

Íme egy táblázat azokról az elemekről, amelyek jelenleg stílusozhatók theme.json, Carolina jóvoltából:

Amint látja, még korai idők járnak, és még sok mindennek át kell lépnie a Gutenberg beépülő modulból a WordPress Core-ba. De láthatja, milyen gyors lenne valami olyasmit csinálni, mint egy téma összes címsorának stílusa globálisan anélkül, hogy CSS-fájlokban vagy DevTools-ban keresne választókat.

Továbbá, akkor is elkezdheti látni, hogy a szerkezet theme.json specifikussági rétegeket képez, globális elemekből kiindulva (pl headings) egyes elemekre (pl h1), és blokkszintű stílusok (pl h1 blokkban található).

A JSON-elemekkel kapcsolatos további információk itt találhatók ez a Make WordPress javaslat és a ezt a nyitott jegyet a Gutenberg plugin GitHub repójában.

JSON és CSS sajátosság

Beszéljünk tovább a CSS-specifikusságról. Korábban említettem, hogy a stílus JSON-megközelítése hierarchiát hoz létre. És ez igaz. A JSON-elemeken meghatározott stílusok theme.json alapértelmezett témastílusnak számítanak. És bármi, amit a felhasználó beállít a Globális stílusok felhasználói felületén, felülírja az alapértelmezett értékeket.

Más szavakkal: a felhasználói stílusok pontosabbak, mint az alapértelmezett témastílusok. Vessünk egy pillantást a gombblokkra, hogy megtudjuk, hogyan működik ez.

használom Üres téma, egy üres WordPress téma CSS-stílus nélkül. Új oldalra fogok hozzáadni egy gombblokkot.

Rendben, tudjuk, hogy a WordPress Core-t némi könnyed stílussal szállítják. Most átváltok a WordPress 3 alapértelmezett TT6.1 témájára, és aktiválom. Ha a gombbal frissítem az oldalt, a gomb stílust vált.

Pontosan láthatod honnan jönnek azok az új stílusok a TT3-ban theme.json fájlt. Ez azt jelzi, hogy a JSON elemstílusok elsőbbséget élveznek a WordPress Core stílusokkal szemben.

Most módosítani fogom a TT3-at úgy, hogy felülírom a-val theme.json fájlt egy gyermektémában, ahol a Gombblokk alapértelmezett háttérszíne pirosra van állítva.

De figyelje meg a keresés gombot az utolsó képernyőképen. Annak is pirosnak kell lennie, nem? Ez azt jelenti, hogy a stílus egy másik szinten van, ha az általam végrehajtott változtatás globális szinten történik. Ha változtatni akarunk mindkét gombokat, megtehetjük ezt felhasználói szinten a webhelyszerkesztő Global Styles UI használatával.

Mindkét gomb háttérszínét kékre változtattuk, és a szöveget is módosítottuk a Global styles UI segítségével. Figyeld meg, hogy onnantól a kék elsőbbséget élvez a témastílusokkal szemben!

A stílusmotor

Ez egy nagyon gyors, de jó ötlet arra vonatkozóan, hogyan kezelik a CSS-specifikusságot a WordPress blokktémáiban. De ez nem a teljes kép, mert még mindig nem világos ahol azok a stílusok jönnek létre. A WordPressnek megvannak a saját alapértelmezett stílusai, amelyek valahonnan származnak, és felhasználják az adatokat theme.json további stílusszabályokért, és felülírja azokat, amelyek bármit beállítottak a Globális stílusokban.

Ezek a stílusok beletartoznak? Külön stíluslapon vannak? Talán beadják az oldalra a ?

Ez az, ami az új Stílusú motor remélhetőleg megoldódik. A Style Engine egy új API a WordPress 6.1-ben, amelynek célja, hogy egységessé tegye a stílusok létrehozását és a stílusok alkalmazási helyét. Más szóval, az összes lehetséges stílusforrást igénybe veszi, és kizárólagosan felelős a blokkstílusok megfelelő létrehozásáért. Tudom, tudom. Még egy absztrakció a többi absztrakción felül, csak néhány stílus szerzője érdekében. De a stílusok központosított API-ja valószínűleg a legelegánsabb megoldás, mivel a stílusok számos helyről származhatnak.

Még csak első pillantást vetünk a Style Engine-re. Valójában itt van, ami eddig elkészült, a jegy szerint:

• Vizsgálja meg és konszolidálja, hogy a kód hol generál blokktámogatási CSS-t a háttérben, hogy azok ugyanarról a helyről érkezzenek (nem több helyről). Ez magában foglalja a CSS-szabályokat, például a margót, a kitöltést, a tipográfiát, a színeket és a szegélyeket.
• Távolítsa el az ismétlődő elrendezés-specifikus stílusokat, és hozzon létre szemantikus osztályneveket.
• Csökkentse az oldalra nyomtatott soron belüli stíluscímkék számát a blokk-, elrendezés- és elemtámogatás érdekében.

Alapvetően ez az alapja egy egyetlen API létrehozásának, amely tartalmazza a témához tartozó összes CSS-stílusszabályt, bárhonnan is származnak. Megtisztítja azt a módot, ahogyan a WordPress beilleszti a 6.1 előtti stílusokat, és létrehoz egy rendszert a szemantikai osztálynevek számára.

A Style Engine hosszú és rövid távú céljairól további részleteket ebben találhat Készítsen WordPress Core beszélgetést. Ön is követheti a követési probléma és a projekt tábla több frissítés.

JSON elemekkel való munka

Beszéltünk egy kicsit a JSON-elemekről a theme.json fájlt, és hogy ezek alapvetően HTML-primitívek az alapértelmezett stílusok meghatározásához többek között a címsorokhoz, gombokhoz és hivatkozásokhoz. Most pedig nézzük valójában segítségével egy JSON elemet, és hogyan viselkedik a különböző stíluskontextusokban.

A JSON-elemeknek általában két kontextusuk van: a globális szinten és a blokk szintje. A globális szintű stílusok meghatározása kevésbé pontos, mint a blokk szintjén, így biztosítva, hogy a blokk-specifikus stílusok elsőbbséget élvezzenek a konzisztencia érdekében, ahol blokkokat használnak.

Globális stílusok a JSON-elemekhez

Nézzük meg az új alapértelmezett TT3 témát, és vizsgáljuk meg a gombjainak stílusát. A következő egy rövidített copy-paste a TT3-ról theme.json fájl (itt a teljes kódot), amely a globális stílusok részt mutatja, de az eredeti kódot itt találja meg.

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

Minden gomb stílusa globális szinten van (styles.elements.button).

Ezt a DevToolsban is megerősíthetjük. Figyeld meg, hogy egy osztály hívott .wp-element-button a választó. Ugyanezt az osztályt használják az interaktív állapotok stílusára is.

Ez a stílus megint csak globális szinten történik, innen származik theme.json. Amikor egy gombot használunk, annak ugyanaz a háttere, mert ugyanazt a választót osztják meg, és semmilyen más stílusszabály nem írja felül.

Mellesleg hozzáadtuk a WordPress 6.1-et interaktív állapotok stílusának támogatása bizonyos elemekhez, például gombokhoz és hivatkozásokhoz, pszeudoosztályok használatával theme.json - beleértve :hover, :focusés :active – vagy a Global Styles UI. automata mérnök Dave Smith mutatja ez a funkció egy YouTube videóban.

A gomb háttérszínét akár felül is bírálhatjuk theme.json (lehetőleg gyermektémában, mivel alapértelmezett WordPress-témát használunk) vagy a webhelyszerkesztő Globális stílusok beállításaiban (nincs szükség gyermektémára, mivel nem igényel kódmódosítást).

De akkor a gombok egyszerre változnak. Mi van, ha felül akarjuk írni a háttérszínt, amikor a gomb egy bizonyos blokk része? Itt jönnek képbe a blokk szintű stílusok.

Blokkszintű stílusok az elemekhez

Ahhoz, hogy megértsük, hogyan használhatjuk és testreszabhatjuk a stílusokat blokk szinten, változtassuk meg a Keresés blokkban található gomb háttérszínét. Ne feledje, van egy gombblokk, de mi azt csináljuk, hogy felülírjuk a háttérszínt a Keresés blokk blokk szintjén. Így csak ott alkalmazzuk az új színt, nem pedig globálisan az összes gombon.

Ehhez meghatározzuk a stílusokat a styles.blocks tárgy be theme.json. Így van, ha minden bekapcsolt gombhoz meghatározzuk a globális stílusokat styles.elements, meg tudjuk határozni a blokk-specifikus stílusokat a gombelemekhez styles.block, amely hasonló szerkezetet követ:

{
  "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ézd azt? beállítottam a background és a text tulajdonságok tovább styles.blocks.core/search.elements.button két CSS-változóval, amelyek előre be vannak állítva a WordPressben.

Az eredmény? A keresés gomb most piros (--wp--preset--color--quaternary), és az alapértelmezett gombblokk megtartja élénkzöld hátterét.

A DevToolsban is láthatjuk a változást.

Ugyanez igaz, ha más blokkokban szereplő gombokat szeretnénk stílusozni. A gombok pedig csak egy példa, ezért nézzünk egy másikat.

Példa: Címsorok stílusa minden szinten

Vezessük haza ezeket az információkat egy példával. Ezúttal a következőket fogjuk tenni:

• Stílusozzon minden címsort globálisan
• A Címsor 2 összes elemének stílusa
• Style Heading 2 elemek a Query Loop blokkban

Először is kezdjük az alapvető szerkezettel theme.json:

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

Ez meghatározza globális és blokkszintű stílusaink körvonalait.

Stílusozzon minden címsort globálisan

Tegyük hozzá a headings tiltakozzon globális stílusaink ellen, és alkalmazzon néhány stílust:

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

Ez az összes címsor színét a WordPress előre beállított alapszínére állítja. Változtassuk meg a Heading 2 elemek színét és betűméretét globális szinten is:

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

Most a Heading 2 összes eleme az elsődleges előre beállított színre van beállítva a folyékony betűméret. De lehet, hogy javítást akarunk fontSize a Heading 2 elemhez, ha azt a Query Look blokkban használják:

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

Most három szintű stílus áll rendelkezésünkre a Heading 2 elemekhez: az összes címsor, az összes Címsor 2 elem és a Címsor 2 elem, amelyeket a Lekérdezési hurok blokkban használunk.

Meglévő témapéldák

Míg ebben a cikkben csak a gombok és címsorok stíluspéldáit néztük meg, a WordPress 6.1 támogatja a további elemek stílusozását. Van egy táblázat, amely felvázolja őket „Stílusok meghatározása JSON-elemekkel” szakasz.

Valószínűleg kíváncsi arra, hogy mely JSON-elemek támogatják mely CSS-tulajdonságokat, nem beszélve arról, hogyan deklarálná ezeket. Amíg a hivatalos dokumentációra várunk, a rendelkezésünkre álló legjobb források a theme.json fájlokat a meglévő témákhoz. Hivatkozásokat fogok biztosítani a témákhoz az általuk testreszabott elemek alapján, és rámutatok a testreszabott tulajdonságokra.

Ügyeljen arra, hogy mindegyiket adjon theme.json jól nézzen ki, mert ezek a témák kiváló példákat tartalmaznak a blokkszintű stílusra a styles.blocks tárgy.

Csomagolta

A teljes webhely szerkesztőjének gyakori változtatásai a sok ember irritációjának fő forrásai, beleértve tech-hoz értő Gutenberg-felhasználók. Még a nagyon egyszerű CSS-szabályok is, amelyek jól működnek a klasszikus témákkal, úgy tűnik, nem működnek a blokktémáknál, mert a specifikusság új rétegei korábban foglalkoztunk.

Ami a GitHub javaslat a webhelyszerkesztő újratervezéséhez egy új böngésző módban, Sara Gooding írja a WP Tavern bejegyzésében:

Könnyű eltévedni, miközben megpróbálja megkerülni a Webhelyszerkesztőt, hacsak nem dolgozik éjjel-nappal az eszközben. A navigáció lendületes és zavaros, különösen, ha a sablonböngészéstől a sablonszerkesztésen át az egyes blokkok módosításáig megyünk át.

Még a Gutenberg blokkszerkesztő és a blokkszem-témák világának lelkes lovasaként is rengeteg saját frusztrációm van. Mindazonáltal optimista vagyok, és arra számítok, hogy a webhelyszerkesztő, ha elkészül, forradalmi eszköz lesz a felhasználók és a műszakilag hozzáértő témafejlesztők számára egyaránt. Ez reményteli tweet ezt már megerősíti. Addig is úgy tűnik, újabb változásokra, sőt talán még egy göröngyös utazásra is fel kellene készülnünk.

Referenciák

Felsorolom az összes forrást, amelyet a cikkhez kapcsolódó információk kutatása során használtam.

JSON elemek

Globális stílusok

Stílusú motor

Köszönöm, hogy elolvasta! Szeretném hallani a saját gondolatait a blokktémák használatával és a CSS kezelésével kapcsolatban.