Stylizowanie przycisków w motywach blokowych WordPress

Trochę z powrotem, podczas gdy, Ganesh Dahal napisał tutaj post na temat CSS-Tricks odpowiadając na tweet, w którym pytano o dodanie cieni CSS do bloków i elementów WordPress. Jest tam wiele świetnych rzeczy, które wykorzystują nowe funkcje wprowadzone w WordPress 6.1, które zapewniają kontrolę nad stosowaniem cieni do rzeczy bezpośrednio w interfejsie Edytora bloków i Edytora witryn.

Ganesh krótko dotknął elementów przycisków w tym poście. Chcę to podnieść i zagłębić się w podejście do stylizacji przycisków w motywach blokowych WordPress. Konkretnie, zamierzamy otworzyć świeże theme.json plik i rozbij różne podejścia do stylów przycisków w schemacie.

Dlaczego przyciski, pytasz? To dobre pytanie, więc od tego zacznijmy.

Różne rodzaje przycisków

Kiedy mówimy o przyciskach w kontekście edytora bloków WordPress, musimy rozróżnić dwa różne typy:

1. Bloki potomne wewnątrz bloku Buttons
2. Przyciski zagnieżdżone w innym bloku (np. blok Post Comments Form)

Jeśli dodamy oba te bloki do szablonu, domyślnie będą miały ten sam wygląd.

Ale znaczniki są bardzo różne:

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

Jak widać, nazwy znaczników HTML są różne. To wspólne zajęcia — .wp-block-button i .wp-element-button — które zapewniają spójną stylizację między dwoma przyciskami.

Gdybyśmy pisali CSS, skupilibyśmy się na tych dwóch klasach. Ale jak wiemy, motywy blokowe WordPress mają inny sposób zarządzania stylami, a to dzięki theme.json plik. Ganesh również omówił to bardzo szczegółowoi dobrze by było, gdybyś przeczytał jego artykuł.

Jak więc definiujemy style przycisków w theme.json bez pisania rzeczywistego CSS? Zróbmy to razem.

Tworzenie stylów bazowych

theme.json to uporządkowany zestaw schematów zapisanych w parach właściwość:wartość. Właściwości najwyższego poziomu nazywane są „sekcjami” i będziemy pracować z styles Sekcja. To tutaj znajdują się wszystkie instrukcje dotyczące stylizacji.

Skupimy się konkretnie na elements styles. Ten selektor dotyczy elementów HTML, które są wspólne dla bloków. Oto podstawowa powłoka, z którą pracujemy:

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

Więc to, co musimy zrobić, to zdefiniować a button elementem.

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

Że button odpowiada elementom HTML używanym do oznaczania elementów przycisków w interfejsie użytkownika. Przyciski te zawierają znaczniki HTML, które mogą być jednym z naszych dwóch typów przycisków: samodzielnym komponentem (tj. blokiem przycisków) lub komponentem zagnieżdżonym w innym bloku (np. blokiem komentarzy do postów).

Zamiast stylizować każdy pojedynczy blok, tworzymy wspólne style. Przejdźmy dalej i zmieńmy domyślne tło i kolor tekstu dla obu typów przycisków w naszym motywie. jest color tam obiekt, który z kolei wspiera background i text properties, w których ustawiamy żądane wartości:

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

Spowoduje to zmianę koloru obu typów przycisków:

Jeśli otworzysz DevTools i spojrzysz na CSS, który WordPress generuje dla przycisków, zobaczymy, że .wp-element-button class dodaje style, które zdefiniowaliśmy w theme.json:

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

To są nasze domyślne kolory! Następnie chcemy przekazywać użytkownikom wizualną informację zwrotną podczas interakcji z przyciskiem.

Implementacja interaktywnych stylów przycisków

Ponieważ jest to strona poświęcona CSS, założę się, że wielu z was jest już zaznajomionych z interaktywnymi stanami łączy i przycisków. Możemy :hover najedź na nie kursorem myszy, włóż je do :focus, kliknij je, aby je utworzyć :active. Cholera, jest nawet :visited stan, aby dać użytkownikom wizualną informację, że już to kliknęli.

To są Pseudoklasy CSS i używamy ich do ukierunkowania interakcji linku lub przycisku.

W CSS możemy stylizować a :hover stwierdzić tak:

a:hover { /* Styles */
}

In theme.json, rozszerzymy naszą istniejącą deklarację przycisku o te pseudoklasy.

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

Zwróć uwagę na „ustrukturyzowaną” naturę tego. Zasadniczo postępujemy zgodnie ze schematem:

Mamy teraz pełną definicję domyślnych i interaktywnych stylów naszego przycisku. Ale co, jeśli chcemy nadać styl niektórym przyciskom, które są zagnieżdżone w innych blokach?

Przyciski stylizacyjne zagnieżdżone w pojedynczych blokach

Wyobraźmy sobie, że chcemy, aby wszystkie przyciski miały nasze podstawowe style, z jednym wyjątkiem. Chcemy, aby przycisk wysyłania bloku Post Comment Form był niebieski. Jak byśmy to osiągnęli?

Ten blok jest bardziej złożony niż blok Przycisk, ponieważ zawiera więcej ruchomych części: formularz, dane wejściowe, tekst instruktażowy i przycisk. Aby kierować reklamy na przycisk w tym bloku, musimy postępować zgodnie z tą samą strukturą JSON, co dla button element, ale zastosowany do bloku Post Comment Form, który jest mapowany na core/post-comments-form element:

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

Zauważ, że już nie pracujemy elements nie więcej. Zamiast tego pracujemy w środku blocks który jest zarezerwowany do konfigurowania rzeczywistych bloków. Z kolei przyciski są uważane za element globalny, ponieważ można je zagnieżdżać w blokach, mimo że są również dostępne jako samodzielne bloki.

Struktura JSON obsługuje elementy w elementach. Więc jeśli istnieje button element w bloku Formularz komentarza do postu, możemy na niego nakierować w core/post-comments-form blok:

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

Ten selektor oznacza, że ​​nie tylko celujemy w określony blok — kierujemy się w określony element zawarty w tym bloku. Teraz mamy domyślny zestaw stylów przycisków, które są stosowane do wszystkich przycisków w motywie, oraz zestaw stylów, które mają zastosowanie do określonych przycisków zawartych w bloku Post Comment Form.

CSS generowany przez WordPress ma w rezultacie bardziej precyzyjny selektor:

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

A co jeśli chcemy zdefiniować różne interaktywne style dla przycisku Post Comment Form? To ta sama transakcja, co w przypadku stylów domyślnych, tylko te są zdefiniowane w pliku 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. } } } } }
}

A co z przyciskami, które nie są w blokach?

WordPress automatycznie generuje i stosuje odpowiednie klasy do wyświetlania tych stylów przycisków. Ale co, jeśli używasz „hybrydowego” motywu WordPress, który obsługuje bloki i edycję całej witryny, ale zawiera również „klasyczne” szablony PHP? A co, jeśli utworzyłeś niestandardowy blok, a nawet masz starszy krótki kod zawierający przyciski? Żaden z nich nie jest obsługiwany przez Silnik stylu WordPress!

Bez smutków. We wszystkich tych przypadkach dodałbyś .wp-element-button class w znacznikach szablonu, bloku lub krótkiego kodu. Style wygenerowane przez WordPress zostaną następnie zastosowane w tych przypadkach.

Mogą zaistnieć sytuacje, w których nie masz kontroli nad znacznikami. Na przykład niektóre wtyczki blokujące mogą być trochę zbyt uparte i swobodnie stosować własny styl. Tam zazwyczaj możesz przejść do opcji „Zaawansowane” w panelu ustawień bloku i zastosować tam klasę:

Zamykając

Podczas pisania „CSS” w theme.json może początkowo wydawać się niezręczne, odkryłem, że staje się to drugą naturą. Podobnie jak CSS, istnieje ograniczona liczba właściwości, które można stosować w szerokim lub bardzo wąskim zakresie za pomocą odpowiednich selektorów.

I nie zapominajmy o trzech głównych zaletach używania theme.json:

1. Style są stosowane do przycisków zarówno w widoku frontonu, jak iw edytorze bloków.
2. Twój CSS będzie kompatybilny z przyszłymi aktualizacjami WordPress.
3. Wygenerowane style działają zarówno z motywami blokowymi, jak i motywami klasycznymi — nie ma potrzeby duplikowania czegokolwiek w osobnym arkuszu stylów.

Jeśli użyłeś theme.json stylów w swoich projektach, podziel się swoimi doświadczeniami i przemyśleniami. Z niecierpliwością czekam na wszelkie komentarze i opinie!

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/