Butoane de stil în temele bloc WordPress

Cu puțin timp în urmă, Ganesh Dahal a scris o postare aici pe CSS-Tricks Răspunzând la un tweet care a întrebat despre adăugarea umbrelor casetei CSS pe blocurile și elementele WordPress. Există o mulțime de lucruri grozave acolo care exploatează funcții noi livrate în WordPress 6.1, care oferă controale pentru aplicarea umbrelor lucrurilor direct în Editorul de blocuri și UI Editor de site.

Ganesh a atins pentru scurt timp elementele butoanelor din acea postare. Vreau să iau asta și să aprofundez abordările pentru butoanele de stil în temele blocate WordPress. Mai exact, vom deschide un nou theme.json fișier și descompune diferite abordări ale butoanelor de stil din schemă.

De ce butoane, întrebați? Este o întrebare bună, așa că să începem cu asta.

Diferitele tipuri de butoane

Când vorbim de butoane în contextul WordPress Block Editor, trebuie să facem distincția între două tipuri diferite:

1. Copii blocuri în interiorul blocului Buttons
2. Butoane care sunt imbricate în interiorul altui bloc (de exemplu, blocul Formular Postează comentarii)

Dacă adăugăm ambele blocuri la un șablon, în mod implicit au același aspect.

Dar marcajul este foarte diferit:

<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>

După cum putem vedea, numele etichetelor HTML sunt diferite. Sunt clasele comune - .wp-block-button și .wp-element-button — care asigură un stil consistent între cele două nasturi.

Dacă am scrie CSS, am viza aceste două clase. Dar după cum știm, temele de blocuri WordPress au un mod diferit de a gestiona stilurile, și asta prin intermediul theme.json fișier. Ganesh a acoperit și acest lucru în detaliu, și ai face bine să-i citești articolul.

Deci, cum definim stilurile de butoane în theme.json fără a scrie CSS real? Hai s-o facem împreună.

Crearea stilurilor de bază

theme.json este un set structurat de scheme scrise în perechi proprietate:valoare. Proprietățile de nivel superior se numesc „secțiuni” și vom lucra cu styles secțiune. Aici merg toate instrucțiunile de styling.

Ne vom concentra în mod special pe elements în styles. Acest selector vizează elementele HTML care sunt partajate între blocuri. Acesta este shell-ul de bază cu care lucrăm:

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

Deci, ceea ce trebuie să facem este să definim a button element.

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

Că button corespunde elementelor HTML care sunt utilizate pentru a marca elementele butoanelor de pe front-end. Aceste butoane conțin etichete HTML care ar putea fi oricare dintre cele două tipuri de butoane ale noastre: o componentă de sine stătătoare (adică blocul Button) sau o componentă imbricată într-un alt bloc (de exemplu blocul Post Comment).

În loc să fim nevoiți să stilăm fiecare bloc individual, creăm stiluri comune. Să mergem mai departe și să schimbăm culoarea implicită de fundal și text pentru ambele tipuri de butoane din tema noastră. Există o color obiect acolo care, la rândul său, sprijină background și text proprietăți în care setăm valorile pe care le dorim:

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

Aceasta schimbă culoarea ambelor tipuri de butoane:

Dacă deschideți DevTools și aruncați o privire la CSS-ul pe care WordPress îl generează pentru butoane, vedem că .wp-element-button clasa adaugă stilurile în care am definit theme.json:

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

Acestea sunt culorile noastre implicite! În continuare, dorim să oferim utilizatorilor feedback vizual atunci când interacționează cu butonul.

Implementarea stilurilor de butoane interactive

Deoarece acesta este un site despre CSS, pun pariu că mulți dintre voi sunt deja familiarizați cu stările interactive ale linkurilor și butoanelor. Putem :hover cursorul mouse-ului peste ele, introduceți-le :focus, dați clic pe ele pentru a le crea :active. La naiba, există chiar și un :visited pentru a oferi utilizatorilor o indicație vizuală că au făcut clic pe aceasta înainte.

Acestea sunt Pseudoclase CSS și le folosim pentru a viza interacțiunile unui link sau buton.

În CSS, am putea stila a :hover afirmă astfel:

a:hover { /* Styles */
}

In theme.json, vom extinde declarația noastră de buton existentă cu aceste pseudo-clase.

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

Observați natura „structurată” a acesteia. În principiu, urmăm o schiță:

Acum avem o definiție completă a stilurilor implicite și interactive ale butonului nostru. Dar dacă vrem să stilăm anumite butoane care sunt imbricate în alte blocuri?

Butoane de stil imbricate în blocuri individuale

Să ne imaginăm că vrem ca toate butoanele să aibă stilurile noastre de bază, cu o singură excepție. Dorim ca butonul de trimitere al blocului Formular Post Comentariu să fie albastru. Cum am realiza asta?

Acest bloc este mai complex decât blocul Button, deoarece are mai multe părți mobile: formularul, intrările, textul instructiv și butonul. Pentru a viza butonul din acest bloc, trebuie să urmăm același tip de structură JSON pe care l-am făcut pentru button element, dar aplicat blocului Formular Post Comment, care este mapat la core/post-comments-form element:

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

Observați că nu mai lucrăm elements mai mult. În schimb, lucrăm în interior blocks care este rezervat pentru configurarea blocurilor reale. Butoanele, dimpotrivă, sunt considerate un element global, deoarece pot fi imbricate în blocuri, chiar dacă sunt disponibile și ca bloc independent.

Structura JSON acceptă elemente în cadrul elementelor. Deci, dacă există un button element din blocul Formular Post Comment, îl putem viza în core/post-comments-form bloc:

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

Acest selector înseamnă că nu numai că vizam un anumit bloc, ci și un anumit element care este conținut în acel bloc. Acum avem un set implicit de stiluri de butoane care sunt aplicate tuturor butoanelor din temă și un set de stiluri care se aplică anumitor butoane care sunt conținute în blocul Formular Post Comment.

CSS-ul generat de WordPress are ca rezultat un selector mai precis:

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

Și dacă vrem să definim diferite stiluri interactive pentru butonul Postați formularul de comentarii? Este aceeași afacere ca și cum am făcut-o pentru stilurile implicite, doar acelea sunt definite în interiorul core/post-comments-form bloc:

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

Dar butoanele care nu sunt în blocuri?

WordPress generează și aplică automat clasele potrivite pentru a scoate aceste stiluri de butoane. Dar ce se întâmplă dacă utilizați o temă WordPress „hibridă” care acceptă blocuri și editarea întregului site, dar care conține și șabloane PHP „clasice”? Sau ce se întâmplă dacă ai făcut un bloc personalizat sau chiar dacă ai un shortcode vechi, care conține butoane? Niciuna dintre acestea nu este gestionată de Motor de stil WordPress!

Nu vă faceți griji. În toate aceste cazuri, ați adăuga .wp-element-button clasa în șablon, bloc sau marcaj de cod scurt. Stilurile generate de WordPress vor fi apoi aplicate în acele cazuri.

Și pot exista unele situații în care nu aveți control asupra markupului. De exemplu, unele plugin-uri de bloc ar putea fi puțin prea înțelepte și să-și aplice liberal propriul stil. Acolo puteți merge de obicei la opțiunea „Avansat” din panoul de setări al blocului și puteți aplica clasa acolo:

La finalul

În timp ce scrieți „CSS” în theme.json s-ar putea simți incomod la început, am descoperit că devine a doua natură. La fel ca CSS, există un număr limitat de proprietăți pe care le puteți aplica fie larg, fie foarte restrâns folosind selectoarele potrivite.

Și să nu uităm de cele trei avantaje principale ale utilizării theme.json:

1. Stilurile sunt aplicate butoanelor atât în ​​vizualizarea frontală, cât și în editorul de blocuri.
2. CSS-ul dvs. va fi compatibil cu viitoarele actualizări WordPress.
3. Stilurile generate funcționează atât cu teme de bloc, cât și cu teme clasice - nu este nevoie să duplicați nimic într-o foaie de stil separată.

Dacă ați folosit theme.json stiluri în proiectele dvs., vă rugăm să vă împărtășiți experiențele și gândurile. Aștept cu nerăbdare să citesc orice comentarii și feedback!

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/