Stíluszó gombok a WordPress blokktémákban

Egy kicsit vissza, Ganesh Dahal írt egy bejegyzést itt a CSS-Tricks-en válaszolva egy tweetre, amely a CSS-doboz-árnyékok WordPress-blokkokhoz és -elemekhez való hozzáadását kérdezte. Rengeteg nagyszerű dolog található benne, amelyek kihasználják a WordPress 6.1-ben szállított új funkciókat, amelyek vezérlőket biztosítanak az árnyékok alkalmazásához közvetlenül a Blokkszerkesztő és a Webhelyszerkesztő felhasználói felületén.

Ganesh röviden érintette a gombelemeket abban a bejegyzésben. Ezt szeretném átgondolni, és mélyebbre szeretnék menni a WordPress blokktémák gombjainak stíluskezelési módszereibe. Konkrétan egy frisset fogunk feltörni theme.json fájlba, és lebontja a séma gombjainak stílusának különféle megközelítéseit.

Miért gombok, kérdezed? Ez egy jó kérdés, úgyhogy kezdjük ezzel.

Különböző típusú gombok

Amikor a WordPress Block Editor kontextusában a gombokról beszélünk, két különböző típust kell megkülönböztetnünk:

1. Gyermekblokkok a gombok blokkjában
2. Más blokkba beágyazott gombok (például a Megjegyzések közzététele űrlap blokkba)

Ha mindkét blokkot hozzáadjuk egy sablonhoz, akkor alapértelmezés szerint azonos megjelenésűek.

De a jelölés nagyon eltérő:

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

Amint látjuk, a HTML-címkék nevei eltérőek. Ezek a közös osztályok - .wp-block-button és a .wp-element-button — amelyek egységes stílust biztosítanak a két gomb között.

Ha CSS-t írnánk, ezt a két osztályt céloznánk meg. De mint tudjuk, a WordPress blokktémái más módon kezelik a stílusokat, és ez a theme.json fájlt. Ganesh erre is nagyon részletesen kitért, és jól tennéd, ha elolvasnád a cikkét.

Tehát hogyan határozzuk meg a gombstílusokat theme.json valódi CSS írása nélkül? Csináljuk együtt.

Az alapstílusok létrehozása

theme.json tulajdonság:érték párokba írt strukturált sémakészlet. A legfelső szintű tulajdonságokat „szakaszoknak” nevezzük, és ezzel fogunk dolgozni styles szakasz. Itt található az összes stílusra vonatkozó utasítás.

Kifejezetten a elements a styles. Ez a választó a blokkok között megosztott HTML-elemeket célozza meg. Ez az alaphéj, amellyel dolgozunk:

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

Tehát amit tennünk kell, az az a button elem.

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

Hogy button megfelel azoknak a HTML-elemeknek, amelyek a gombelemek megjelölésére szolgálnak a kezelőfelületen. Ezek a gombok HTML-címkéket tartalmaznak, amelyek lehetnek a két gombtípusunk egyike: önálló komponens (azaz a Gombblokk) vagy egy másik blokkon belül beágyazott komponens (például a Megjegyzés bejegyzése blokk).

Ahelyett, hogy minden egyes blokkot stílust kellene alakítanunk, közös stílusokat hozunk létre. Menjünk tovább, és változtassuk meg a témánk mindkét gombjának alapértelmezett háttér- és szövegszínét. Van egy color tárgy van benne, ami viszont támogatja background és a text tulajdonságok, ahol beállítjuk a kívánt értékeket:

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

Ez megváltoztatja mindkét gombtípus színét:

Ha feltörjük a DevTools programot, és megnézzük a WordPress által a gombokhoz generált CSS-t, azt látjuk, hogy a .wp-element-button osztály hozzáadja az általunk meghatározott stílusokat theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

Ezek az alapértelmezett színeink! Ezt követően vizuális visszajelzést szeretnénk adni a felhasználóknak, amikor a gombbal lépnek kapcsolatba.

Interaktív gombstílusok megvalósítása

Mivel ez az oldal a CSS-ről szól, lefogadom, hogy sokan már ismerik a hivatkozások és gombok interaktív állapotait. Tudunk :hover vigye az egérmutatót rájuk, és tabulátorozza őket :focus, kattintson rájuk az elkészítéséhez :active. A fenébe, van még egy :visited állapotot, hogy vizuálisan jelezze a felhasználóknak, hogy korábban kattintottak erre.

Ezek CSS pszeudoosztályok és a arra használjuk őket, hogy megcélozzuk egy link vagy gomb interakcióit.

A CSS-ben stílusozhatunk a :hover állítsd ki így:

a:hover { /* Styles */
}

In theme.json, a meglévő gombdeklarációnkat ezekkel a pszeudoosztályokkal bővítjük.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

Figyeld meg ennek „strukturált” jellegét. Alapvetően egy vázlatot követünk:

Most már teljes körűen meghatároztuk gombjaink alapértelmezett és interaktív stílusát. De mi van akkor, ha bizonyos gombokat szeretnénk stílusba állítani, amelyek más blokkokban vannak beágyazva?

Az egyes blokkokba ágyazott stílusgombok

Képzeljük el, hogy egy kivétellel minden gombnak a saját alapstílusát szeretnénk elérni. Azt akarjuk, hogy a Hozzászólás közzététele űrlap blokk elküldése gombja kék színű legyen. Hogyan érnénk el ezt?

Ez a blokk összetettebb, mint a Gombblokk, mert több mozgó része van: az űrlap, a bemenetek, a tanulságos szöveg és a gomb. A blokk gombjának megcélzásához ugyanazt a fajta JSON-struktúrát kell követnünk, mint amit a blokknál tettünk button elemet, de alkalmazzuk a Megjegyzés közzétételi űrlap blokkra, amely le van képezve a core/post-comments-form elem:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

Figyelje meg, hogy már nem dolgozunk elements többé. Ehelyett belül dolgozunk blocks amely a tényleges blokkok konfigurálására van fenntartva. Ezzel szemben a gombok globális elemnek számítanak, mivel blokkokba ágyazhatók, annak ellenére, hogy önálló blokkként is elérhetők.

A JSON-struktúra támogatja az elemeken belüli elemeket. Tehát, ha van a button elemet a Post Comment Form blokkban, megcélozhatjuk a core/post-comments-form Blokk:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

Ez a választó azt jelenti, hogy nem csak egy adott blokkot célozunk meg, hanem egy adott elemet is megcélozunk, amely abban a blokkban található. Most már van egy alapértelmezett gombstíluskészletünk, amely a téma összes gombjára vonatkozik, valamint egy stíluskészlet, amely a Megjegyzés közzététele űrlap blokkban található meghatározott gombokra vonatkozik.

A WordPress által generált CSS-nek pontosabb választója van ennek eredményeként:

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

És mi van akkor, ha különböző interaktív stílusokat szeretnénk definiálni a Megjegyzés űrlap közzététele gombhoz? Ez ugyanaz, mint az alapértelmezett stílusok esetében, csak azok vannak meghatározva a stílusokon belül core/post-comments-form Blokk:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

Mi a helyzet a nem blokkokban lévő gombokkal?

A WordPress automatikusan generálja és alkalmazza a megfelelő osztályokat ezeknek a gombstílusoknak a megjelenítéséhez. De mi van akkor, ha egy „hibrid” WordPress témát használ, amely támogatja a blokkokat és a teljes webhely szerkesztését, de tartalmaz „klasszikus” PHP-sablonokat is? Vagy mi van, ha egyedi blokkot hozna létre, vagy akár egy régi rövid kódot is tartalmaz, amely gombokat tartalmaz? Ezek közül egyiket sem kezeli a WordPress stílusú motor!

Semmi gond. Mindegyik esetben hozzá kell adni a .wp-element-button osztályt a sablon, blokk vagy rövid kód jelölésében. A WordPress által generált stílusok ezekben az esetekben kerülnek alkalmazásra.

És előfordulhatnak olyan helyzetek, amikor nincs befolyása a jelölésre. Előfordulhat például, hogy néhány blokkbővítmény túlságosan elgondolkodtató, és bőségesen alkalmazza a saját stílusát. Itt általában a blokk beállítási paneljén a „Speciális” opcióra léphet, és ott alkalmazhatja az osztályt:

Csomagolta

A „CSS” beírása közben theme.json eleinte kínosnak tűnhet, rájöttem, hogy ez a második természet. A CSS-hez hasonlóan korlátozott számú tulajdonság van, amelyeket széles körben vagy nagyon szűken alkalmazhat a megfelelő választókkal.

És ne feledkezzünk meg a használat három fő előnyéről theme.json:

1. A stílusok mind a kezelőfelület nézetében, mind a blokkszerkesztő gombjaira vonatkoznak.
2. CSS-je kompatibilis lesz a WordPress jövőbeli frissítéseivel.
3. A generált stílusok blokkotémákkal és klasszikus témákkal egyaránt működnek – nem kell semmit másolni egy külön stíluslapon.

Ha használta theme.json projektjei stílusát, kérjük, ossza meg tapasztalatait és gondolatait. Várom minden észrevételt és visszajelzést!

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/