Kategorie we wzorcach bloków – mała wielka zmiana

Kiedy po raz pierwszy zobaczyłam Wzorce w WordPressie 5.5, mój początkowy entuzjazm i wielkie „No wreszcie!” szybko przerodziły się w jeszcze większe zdziwienie. „Ale jak to, bez żadnego grupowania?”. A właściwie filtrowania po kategoriach, bo kategorie jako takie były, tyle że niemal przezroczyste. Żeby wybrać jakiś fajny wzorzec, trzeba było użyć suwaka i przewijać w dół.

WordPress 5.6 przynosi zmianę: po otwarciu zakładki Wzorce, najpierw wybieramy kategorię, a dopiero potem widzimy listę szablonów bloków gotowych do wstawienia jednym kliknięciem.

Dlaczego ta z pozoru mała zmiana robi tak wielką różnicę? Zobaczmy.

Wzorce przed i po zmianie

Dla przypomnienia, Wzorce pozwalają szybko wstawić grupę bloków tworzących jakiś ładny układ.

Dostępne są w WordPressie podczas dodawania nowego bloku i przejściu do zakładki Wzorce (Patterns):

Wstawianie wzorców w WordPressie

Teraz w panelu Wzorców zobaczymy rozwijaną listę kategorii.

Tak oto zmieni się interfejs dodawania wzorców w WordPressie 5.6 w porównaniu z WordPressem 5.5:

Wzorce w WordPressie 5.5 – jedna długa lista

Wzorce w WordPressie 5.6 – filtrowanie po kategorii

Jak widać, wcześniej mieliśmy jedną długą listę do przewijania. Teraz, wybieramy najpierw kategorię, a dopiero potem widzimy gotowe układy bloków.

Dlaczego grupowanie wzorców po kategoriach robi wielką różnicę?

Tutaj nie chodzi tylko o fakt, że wcześniej użytkownik musiał przewijać w dół długą listę w poszukiwania właściwego wzorca.

To też.

Zwróćmy uwagę, że „zamknięcie” kolekcji wzorców bloków w jedną grupę/kategorię i oddzielenie ich od pozostałych jest ogromnym ukłonem w stronę autorów motywów i wtyczek.

Bo teraz przygotowane przez nich wzorce nie zginą w tłumie.

Użytkownicy będą mogli szybko sięgnąć po gotowce swojego ulubionego autora i odbudować jego wersję demo (demo motywu lub inne demo, np. demo strony z kolekcją bloków, jeśli mowa o autorze wtyczki oferującej bloki).

Znaczenie wzorców i kategorii wzorców w motywach

Z kategoryzacji wzorców korzystają już motywy WordPressa, między innymi motyw Twenty One, nadchodzący motyw domyślny WordPressa:

Motyw Twenty One rejestruje własną kategorię wzorców a w niej kilka gotowych do wstawienia układów bloków

Jest szansa, że wzorce bloków zgrupowane w kategorię pod nazwą motywu przyspieszą rozwój tej koncepcji w WordPressie.

Dzięki wzorcom popularne pytanie zadawane przez tysiące użytkowników WordPressa, przestanie być aktualne:

Dlaczego mój motyw po instalacji nie wygląda tak fajnie jak wersja demo? Autor: niemal każdy, kto po raz pierwszy kupił nowy WordPressa zauroczony przepiękną stroną demo

Wszyscy znamy ten ból.

To rozczarowanie, kiedy kupiliśmy motyw WordPressa za być może ładnych parę stówek i nie wiemy, co począć dalej po instalacji. Bo nasza strona główna wygląda nadal tak biednie, jak wyglądała i w niczym nie przypomina dopieszczonej strony demo, którą widzieliśmy na ThemeForest czy na stronie domowej autorów motywu.

Not anymore.

Teraz proces przygotowania strony demo (przez autorów motywów), a potem instalacji (przez użytkowników) będzie prosty.

Nowy, ekspresowy proces przygotowania i „instalacji” wersji demo strony opartej o bloki

Przygotowanie strony demo motywu w postaci wzorców bloków (autor motywu)

1. Autor motywu (lub wtyczki oferującej kolekcję bloków) tworzy sobie w edytorze blokowym WordPressa elegancką wersję strony głównej (lub innej), korzystając z bloków. Mogą to być jego własne bloki albo nawet tylko bloki WordPressa elegancko wystylizowane.

2. Kiedy strona jest gotowa, autor przełącza się z trybu Edytora Wizualnego na stronie w WordPress w tryb Edytor Kodu (opcja podstępna na każdej stronie pod menu trzech pionowych kropek) i kopiuje kod do schowka.

3. W swoim motywie/wtyczce za pomocą funkcji register_block_pattern rejestruje nowy wzorzec, do którego wkleja zapamiętany w schowku kod.

4. Dodaje wzorcowi nazwę, np. „Homepage – demo 1: hero heading, gallery and testimonials”.

5. Wypuszcza nową wersję motywu/wtyczki.

Na tym kończy się jego praca.

Teraz zadanie użytkownika, który zainstalował taki motyw jest proste.

Odtworzenie strony demo motywu w oparciu o wzorce bloków (użytkownik WordPressa)

1. Użytkownik zakłada nową stronę w WordPressie.

2. Klika na plusik dodania bloku.

3. Przełącza się w zakładkę Wzorce.

4. Wybiera kategorię z nazwą motywu.

5. Wybiera wzorzec po nazwie np. klika na „Homepage – demo 1: hero heading, gallery and testimonials”.

I już jego strona wygląda dokładnie tak jak strona z wersji demo.

1. Użytkownik podmienia treść na swoją

Koniec.

Tak na dobrą sprawę to wszystko było możliwe już od momentu wprowadzenia wzorców, czyli WordPressa 5.5.

Teraz, mając możliwość zgrupowania swoich wzorców pod własną nazwą (na przykład pod nazwą motywu), w miejscu wyraźnie oddzielonym od pozostałych wzorców, instrukcja instalacji motywu sprowadzi się do trzech kroków:

1. Zainstaluj motyw/wtyczkę.

2. W sekcji Wzorce wybierz nazwę motywu (wtyczki).

3. Użyj wzorzec X.

Jest porządek.

Nasze wzorce nie giną w gąszczu innych wzorców. Użytkownik może się skupić tylko na tych, na których nam zależy.

Nie ulega wątpliwości, że lepiej korzystać ze wzorców pochodzących od jednego dostawcy. Mają one spójny design.

Być może posiadają również dodatkowe style, dodane przez autorów motywu.

Zobaczmy to na jeszcze jednym przykładzie.

Wzorce motywu Seedled

Istniejące motywy już korzystają z mechanizmu wzorców. Kilka wzorców dostarcza na przykład motyw Seedled.

Wzorce motywu Seedled

A tak wygląda jeden ze wzorców motywu Seedled po wstawianiu do strony i dodaniu własnego obrazka:

Wzorzec Group with Split Background z motywu Seedled

Wstawienie wzorca spowodowało, że na stronie pojawiła się grupa kilku bloków, które tworzą elegancki układ z ciekawym dwukolorowym tłem.

Równie dobrze moglibyśmy odbudować taki „layout” ręcznie, ale wówczas mielibyśmy więcej pracy. Tak wygląda blok Grupa w motywie Seedled po wstawieniu do strony:

Dodanie bloku Grupa bez korzystania ze wzorca (motyw Seedled)

Zatem, aby przekształcić taką „gołą” grupę w taką jak we wzorcu, trzeba by było ręcznie zmienić kilka rzeczy: rozciągnąć ją na pełną szerokość, wybrać odpowiedni gradient, a potem do środka wstawić jeszcze kilka bloków, w odpowiednich proporcjach.

Prawa, że korzystanie z gotowca, czyli wzorca ten proces upraszcza?

Ale to nie koniec zalet korzystania ze wzorców.

Dzięki nim, możemy szybko uzyskać świetne efekty wizualne, które ciężko było by ustawić ręcznie, a czasami zwyczajnie wpaść na pomysł, że taki efekt jest możliwy.

Poniżej widzimy ciekawy efekt „wystających” obrazków, który powstał dzięki wykorzystaniu innego wzorca motywu Seedled – Group with image overlap.

Wykorzystanie wzorca Group with image overlap z motywu Seedled pozwala uzyskać efekt wystających obrazków

Tym razem blok Grupa składa się z dwóch kolumn, a obrazki w pierwszej z nich „wystają” poza zielone tło.

Jak to możliwe?

Efekt wystawiania obrazków stał się możliwy do uzyskania dzięki wykorzystaniu bloku Grupa ze specjalnym ustawieniem gradientu tła: 20% przezroczystości na górze i na dole, pełen kolor (60%) pośrodku.

Twórcy motywu Seedled zatytułowali to ustawienie gradientu „Stripe” (zobacz obrazek niżej), a jego uzyskaniu stało się możliwe dzięki wykorzystaniu przez autorów tzw. Block Gradient Presets.

Wzorce w połączeniu z presetami gradientów w motywie Seedled

Przykład ten pokazuje jak wykorzystanie wzorców przyczyniło się do pokazania praktycznych zastosowań innych ulepszeń w WordPressie (tu Gradient Presets ale też własnej palety kolorów).

Podsumowując

Cieszę się ogromnie, że idea wzorców się rozwija i jest już wykorzystana w motywach.

Wierzę, że wraz z możliwością filtrowania po kategoriach idea ta jeszcze bardziej się upowszechni i wykorzystanie wzorców stanie się standardem, nie tylko w motywach.

Dla przypomnienia dodam, że każdy z nas może już teraz tworzyć i wykorzystywać własne wzorce bloków, korzystając z prostej wtyczki Block Patterns Builder. Więcej na ten temat pisałam w artykule Szablony bloków – nachodzi wielka rzecz w WordPressie.

#Gutenberg