Knoppen stylen in WordPress-blokthema's

Een tijdje terug, Ganesh Dahal heeft hier een bericht geschreven op CSS-Tricks reageren op een tweet waarin werd gevraagd naar het toevoegen van CSS-vakschaduwen op WordPress-blokken en -elementen. Er zit veel geweldige dingen in die gebruikmaken van nieuwe functies die in WordPress 6.1 zijn geleverd en die besturingselementen bieden voor het toepassen van schaduwen op dingen rechtstreeks in de gebruikersinterface van Block Editor en Site Editor.

Ganesh raakte kort de knopelementen in die post aan. Ik wil dat oppikken en dieper ingaan op benaderingen voor het stylen van knoppen in WordPress-blokthema's. Concreet gaan we een nieuwe openbreken theme.json bestand en splits verschillende benaderingen op voor het stylen van knoppen in het schema.

Waarom knoppen, vraag je? Dat is een goede vraag, dus laten we daarmee beginnen.

De verschillende soorten knopen

Als we het hebben over knoppen in de context van de WordPress Block Editor, moeten we onderscheid maken tussen twee verschillende typen:

1. Kindblokken binnen het knoppenblok
2. Knoppen die in een ander blok zijn genest (bijv. het blok Post Comments Form)

Als we beide blokken aan een sjabloon toevoegen, zien ze er standaard hetzelfde uit.

Maar de opmaak is heel anders:

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

Zoals we kunnen zien, zijn de HTML-tagnamen verschillend. Het zijn de gemeenschappelijke klassen — .wp-block-button en .wp-element-button — die zorgen voor een consistente styling tussen de twee knoppen.

Als we CSS zouden schrijven, zouden we ons op deze twee klassen richten. Maar zoals we weten, hebben WordPress-blokthema's een andere manier om stijlen te beheren, en dat is via de theme.json bestand. Ganesh behandelde dit ook tot in detail, en je zou er goed aan doen zijn artikel te lezen.

Dus, hoe definiëren we knopstijlen in theme.json zonder echte CSS te schrijven? Laten we het samen doen.

De basisstijlen maken

theme.json is een gestructureerde set schema geschreven in eigenschap: waardeparen. De eigenschappen op het hoogste niveau worden "secties" genoemd en we gaan werken met de styles sectie. Hier gaan alle stylinginstructies naartoe.

We zullen ons specifiek richten op de elements in de styles. Deze selector richt zich op HTML-elementen die tussen blokken worden gedeeld. Dit is de basisshell waarmee we werken:

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

Dus wat we moeten doen is a definiëren button element.

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

ZIJN button komt overeen met HTML-elementen die worden gebruikt om knopelementen aan de voorkant te markeren. Deze knoppen bevatten HTML-tags die een van onze twee soorten knoppen kunnen zijn: een op zichzelf staand onderdeel (dwz het Knoppenblok) of een onderdeel dat is genest in een ander blok (bijvoorbeeld het Post Comment-blok).

In plaats van elk afzonderlijk blok te moeten stylen, creëren we gedeelde stijlen. Laten we doorgaan en de standaard achtergrond- en tekstkleur wijzigen voor beide soorten knoppen in ons thema. Er is een color object daar in dat op zijn beurt ondersteunt background en text eigenschappen waar we de waarden instellen die we willen:

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

Dit verandert de kleur van beide knoptypen:

Als we DevTools openen en kijken naar de CSS die WordPress voor de knoppen genereert, zien we dat de .wp-element-button class voegt de stijlen toe waarin we hebben gedefinieerd theme.json:

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

Dat zijn onze standaardkleuren! Vervolgens willen we gebruikers visuele feedback geven wanneer ze de knop gebruiken.

Interactieve knopstijlen implementeren

Aangezien dit een site is die helemaal over CSS gaat, durf ik te wedden dat velen van jullie al bekend zijn met de interactieve toestanden van links en knoppen. Wij kunnen :hover plaats de muiscursor erover, tab ze erin :focus, klik erop om ze te maken :active. Heck, er is zelfs een :visited state om gebruikers een visuele indicatie te geven dat ze hier eerder op hebben geklikt.

Die zijn CSS pseudo-klassen en we gebruiken ze om de interacties van een link of knop te targeten.

In CSS kunnen we a :hover staat als volgt:

a:hover { /* Styles */
}

In theme.json, gaan we onze bestaande knopdeclaratie uitbreiden met deze pseudoklassen.

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

Let op de "gestructureerde" aard hiervan. We volgen eigenlijk een schets:

We hebben nu een volledige definitie van de standaard en interactieve stijlen van onze knop. Maar wat als we bepaalde knoppen willen stylen die in andere blokken zijn genest?

Stylingknoppen genest in afzonderlijke blokken

Laten we ons voorstellen dat we willen dat alle knoppen onze basisstijlen hebben, met één uitzondering. We willen dat de verzendknop van het Post Comment Form-blok blauw is. Hoe zouden we dat bereiken?

Dit blok is complexer dan het knopblok omdat het meer bewegende delen heeft: het formulier, invoer, instructieve tekst en de knop. Om de knop in dit blok te targeten, moeten we dezelfde soort JSON-structuur volgen als voor het button element, maar toegepast op het Post Comment Form-blok, dat is toegewezen aan het core/post-comments-form element:

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

Merk op dat we niet meer werken in elements niet meer. In plaats daarvan werken we binnen blocks die is gereserveerd voor het configureren van daadwerkelijke blokken. Knoppen daarentegen worden beschouwd als een globaal element omdat ze in blokken kunnen worden genest, ook al zijn ze ook beschikbaar als een op zichzelf staand blok.

De JSON-structuur ondersteunt elementen binnen elementen. Dus als er een button element in het Post Comment Form-blok, kunnen we het targeten in het core/post-comments-form blok:

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

Deze selector betekent dat we ons niet alleen op een specifiek blok richten, maar op een specifiek element dat in dat blok zit. Nu hebben we een standaardset knopstijlen die worden toegepast op alle knoppen in het thema, en een set stijlen die van toepassing zijn op specifieke knoppen die zijn opgenomen in het Post Comment Form-blok.

De door WordPress gegenereerde CSS heeft als resultaat een nauwkeurigere selector:

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

En wat als we verschillende interactieve stijlen willen definiëren voor de knop Reactieformulier plaatsen? Het is dezelfde deal als de manier waarop we het deden voor de standaardstijlen, alleen die zijn gedefinieerd in de core/post-comments-form blok:

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

Hoe zit het met knoppen die niet in blokken staan?

WordPress genereert automatisch de juiste klassen en past deze toe om deze knopstijlen uit te voeren. Maar wat als u een "hybride" WordPress-thema gebruikt dat blokken en volledige sitebewerking ondersteunt, maar ook "klassieke" PHP-sjablonen bevat? Of wat als je een aangepast blok hebt gemaakt, of zelfs een verouderde shortcode hebt die knoppen bevat? Geen van deze wordt behandeld door de WordPress-stijlengine!

Maak je geen zorgen. In al die gevallen voegt u de .wp-element-button class in de sjabloon-, blok- of shortcode-opmaak. De door WordPress gegenereerde stijlen worden vervolgens in die gevallen toegepast.

En er kunnen situaties zijn waarin u geen controle heeft over de opmaak. Een blokplug-in kan bijvoorbeeld een beetje te eigenwijs zijn en royaal zijn eigen stijl toepassen. Dat is waar je meestal naar de optie "Geavanceerd" in het instellingenpaneel van het blok kunt gaan en de klasse daar kunt toepassen:

Afsluiten

Tijdens het schrijven van "CSS" in theme.json in het begin misschien ongemakkelijk aanvoelen, ik heb gemerkt dat het een tweede natuur wordt. Net als CSS zijn er een beperkt aantal eigenschappen die u breed of zeer beperkt kunt toepassen met de juiste selectors.

En laten we de drie belangrijkste voordelen van het gebruik niet vergeten theme.json:

1. De stijlen worden toegepast op knoppen in zowel de front-end weergave als de blokeditor.
2. Uw CSS zal compatibel zijn met toekomstige WordPress-updates.
3. De gegenereerde stijlen werken zowel met blokthema's als met klassieke thema's — het is niet nodig om iets in een aparte stylesheet te dupliceren.

Als je hebt gebruikt theme.json stijlen in uw projecten, deel uw ervaringen en gedachten. Ik kijk uit naar het lezen van eventuele opmerkingen en feedback!

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/