Odtworzenie Onia: budowanie tła pociągnięcia pędzlem za pomocą bloków WordPress

Przeglądając w tym tygodniu najnowsze wydania z katalogu motywów WordPress, natknąłem się na jedną, która przyciągnęła moją uwagę. Onia była czysta i minimalistyczna, zachowując swoje zawijasy, aby zwrócić uwagę tylko na kilka elementów na stronie.

Czy to może być jeden z tych nieoszlifowanych diamentów, których zawsze szukam w darmowym katalogu motywów?

Miał potencjał, ale zawiódł. Kiedy zgłębiałem temat, wydawało mi się, że autor spędził 90% czasu na zaprojektowaniu przyciągającej wzrok strony tytułowej. Zagłębiając się w wewnętrzne strony, nie zwracałem uwagi na typografię, ponieważ liczba znaków w wierszu przekraczała 150 i więcej, ponad dwukrotnie więcej niż powinna być dla wygodnego czytania.

To jest coś, co jest łatwe do rozwiązania. Byłem bardziej rozczarowany, że Onia nie była motywem blokowym. Były tam wszystkie elementy. Nie robił niczego szczególnie skomplikowanego i nie było wyraźnego powodu, by był tematem klasycznym.

Wczoraj wieczorem usiadłem i odtworzyłem Onię jako motyw blokowy. Technicznie rzecz biorąc, zbudowałem jego stronę główną bezpośrednio z edytora na bazie projektu motywu podstawowego, który już miałem pod ręką. Było kilka wyzwań, ale większość pracy wykonałem w mniej więcej godzinę. Pozostałe elementy zajęły trochę więcej czasu, gdy przejrzałem możliwe rozwiązania.

Poniżej porównanie dwóch pierwszych stron (Onia jest pierwsza, potem moja rekreacja):

Oczywiście pozwoliłem sobie na kilka swobody w zakresie odstępów, rozmiaru i kolorowania. Nie próbowałem dokładnej repliki. Zamiast tego był to trochę restart z kilkoma spinami na oryginale.

Kilka szybkich notatek

Jedną z rzeczy, które często frustrują mnie w motywach, jest to, że pokazują te piękne logo w wersji demonstracyjnej, ale nie oferują użytkownikowi możliwości pracy z tą samą czcionką. Nie byłem pewien, jaka oryginalna rodzina czcionek została użyta w logo, ale dodałem Sacramento jako opcję pisma kursywą:

Te cechy mogą mieć znaczenie dla przeciętnego użytkownika. Nie każdy może załadować Photoshopa i stworzyć własne, specjalistyczne logo. Mogą jednak wpisać nazwę swojej witryny i wybrać opcję czcionki dla wersji zwykłego tekstu.

Technicznie rzecz biorąc, obecnie w Gutenberg są dwie funkcje, ale nie w WordPress 5.9, z którego korzystałem. Pierwszy to blok Czytaj więcej. Onia miała to w swojej siatce postów. Jako autor motywów po prostu czekałbym na tę funkcję, gdyby była to napad. Biorąc pod uwagę, że zarówno polecany obraz, jak i tytuł posta prowadzą do strony z pojedynczym postem, nie był to element typu make-or-break.

Drugą brakującą funkcją jest opcja „pokaż etykiety” dla bloku ikon społecznościowych. Obejściem oryginalnego projektu byłoby użycie bloku nawigacji, ponieważ linki były zwykłym tekstem. Inną opcją byłby niestandardowy styl bloku dla ikon społecznościowych. Tak czy inaczej, nie był to bloker dla tego motywu wydanego jako motyw blokowy.

Każdy inny element projektu motywu jest możliwy dzięki systemowi blokowemu.

Styl bloku pociągnięć pędzla

Powiedziałem, że są wyzwania, ale używam tego terminu w znaczeniu „fajnych rzeczy”. Są to elementy, w których projektanci i programiści mogą zagłębić się w problem i próbować wprowadzać innowacje, i są to rozwiązania, którymi chcę się podzielić.

Jednym z moich ulubionych elementów projektowych motywu było użycie SVG do stworzenia pociągnięcia pędzlem za nagłówkiem wstępu:

Motyw używał starej metody pakowania elementu <span> wewnątrz <h1> . Powoduje to zastosowanie tła pędzla do kilku ostatnich słów tekstu. Jednak ta implementacja jest problematyczna na mniejszych urządzeniach, które nie nadążają za naturalnym przepływem przerw w tekście, gdy ekran się zmienia. Użytkownicy nie mieli również możliwości kontrolowania koloru pociągnięcia pędzla lub tekstu.

Chciałem wiedzieć, czy jest lepszy sposób na zrobienie tego, oferując użytkownikom maksymalną elastyczność.

Na szczęście WordPress News został niedawno ponownie uruchomiony z zupełnie nowym projektem, który opiera się w dużej mierze na pociągnięciach pędzla. Dodatkowo motyw jest objęty licencją GPL, więc jego zasoby są dostępne bezpłatnie.

Szczerze mówiąc, żałuję, że nie spojrzałem na jego kod źródłowy przed przeczytaniem różnych stron pomocy i wsparcia CSS. Projektanci naszej społeczności rozwiązali już problemy, które napotkałem. Wystarczyło dostosować ich rozwiązania do moich potrzeb.

Po krótkiej sprzeczce udało mi się stworzyć dostosowywalne tło pociągnięcia pędzla dla nagłówków:

Użytkownicy mogą jak zawsze dostosować kolor tekstu. Jednak modyfikacja koloru tła zmienia kolor pociągnięcia pędzla. Obrys zawsze wyrównuje się z ostatnią linią tekstu, więc będzie działał niezależnie od rozmiaru ekranu. Nie zawsze jest to pożądane. Istnieją jednak inne rozwiązania dla przypadków użycia, takich jak wyróżnianie określonego tekstu.

Poniższy zrzut ekranu to widok edytora, gdy zmieniam kolor:

Aby utworzyć tło pociągnięcia pędzla dla bloków nagłówka, dodałem następujący kod do pliku functions.php mojego motywu:

 add_action( 'init', 'tavern_register_block_styles' ); function tavern_register_block_styles() { register_block_style( 'core/heading', [ 'name' => 'brush', 'label' => __( 'Brush', 'tavern' ) ] ); }

Następnie pobrałem plik brush-stroke-big.svg z repozytorium WordPress News i dodałem go do folderu /assets/svg w moim motywie.

Ostatnim krokiem było dodanie niestandardowego CSS do arkusza stylów mojego motywu. Bardziej szczegółowo omówiłem dodawanie stylów w moim poprzednim samouczku Building with Blocks dla tych, którzy potrzebują odświeżenia.

 /* Cancel out WP's padding on headings with backgrounds. */ :is( h1, h2, h3, h4, h5, h6 ).is-style-brush.has-background { padding: 0; } /* Add default background to headings. Clip it to the text. */ :where( h1, h2, h3, h4, h5, h6 ).is-style-brush { position: relative; z-index: 1; background-color: #b5b5b5; background-clip: text !important; -webkit-background-clip: text !important; } /* Adds the brushstroke to ::before. Using ::after can conflict with editor. */ :where( h1, h2, h3, h4, h5, h6 ).is-style-brush::before { content: ""; position: absolute; z-index: -1; bottom: -1rem; left: -1rem; height: calc( 1.25em + 1rem ); width: 100%; background-color: inherit; -webkit-mask-image: url('assets/svg/brush-stroke-big.svg'); mask-image: url('assets/svg/brush-stroke-big.svg'); -webkit-mask-position: left bottom; mask-position: left bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }

Większość z tych zasad można dostosować indywidualnie dla każdego przypadku. Niektórzy mogą potrzebować trochę bałaganu, w zależności od tematu.

To rozwiązanie może działać dla innych bloków. Zachęcam autorów motywów do eksperymentowania i używania innych SVG, aby zobaczyć, co wymyślą.

Uwaga: motyw Onia łączy się z CDN z obrazem tła SVG, co nie powinno być dozwolone na WordPress.org. Nie mogłem też znaleźć na nim żadnych informacji licencyjnych. Nie mając pewności, czy jest zgodny z GPL, nie użyłem zasobu z motywu.