Wzory blokowe zmienią wszystko

Opublikowany: 2020-03-24
Zrzut ekranu grupy bloków sprzedaży książek.
Sekcja sprzedaży książek z niestandardowego motywu.

To było około rok temu. Z radością projektowałem temat dla początkujących powieściopisarzy. Chciałem wyprzedzić konkurencję i zareklamować motyw specjalnie dla pisarzy, którzy podejmą próbę wyzwania Narodowego Miesiąca Pisania Powieści 2019.

Krótko mówiąc, NaNoWriMo to wir miesiąca, w którym tysiące ludzi z całego świata klekoczą na klawiaturach, aby napisać rękopis zawierający 50 000 słów. Miesiąc czystej siły woli, kawa na litry i nieprzespane noce w zamian za chwałę. Na końcu podróży nie ma żadnych nagród głównych ani gwarantowanych kontraktów wydawniczych. Zdobywasz certyfikat, kilka kuponów i prawa do przechwałek. Wyzwanie ukończyłem w 2018 roku.

Zainspirowany moim zwycięstwem kilka miesięcy wcześniej, stworzyłem motyw dla tych, którzy wyruszą w podróż w następnym roku. Chciałem także poszerzyć jego atrakcyjność dla każdego, kto może być aspirującym powieściopisarzem, ale niekoniecznie biorącym udział w wyzwaniu. A może nawet komuś, kto właśnie opublikował swoją pierwszą książkę. Być może byłaby to okazja do włączenia kilku nowych użytkowników WordPressa do naszej społeczności.

Przedstawiłem układ strony głównej, aby pokazać, jak użytkownicy mogą polecać swoją najnowszą książkę za pomocą przycisku zakupu. Wówczas mnie olśniło.

Jak ktoś mógłby zbudować tę stronę sprzedaży książek bez solidnego doświadczenia z edytorem bloków?

Korzystałem z wtyczki Gutenberg od miesięcy, zanim pojawiła się w WordPress 5.0. Znałem tajniki systemu.

Projekt był prosty. Używając podstawowego bloku mediów i tekstu, nagłówka, kilku akapitów i przycisku, stworzyłem coś, co mogło być zbyt skomplikowane dla przeciętnego użytkownika. Nie poznałem nawet niestandardowych opcji koloru, rozmiaru czcionki i stylu blokowego, które zaakcentowały układ.

Ta prosta kombinacja bloków mogła być dla niektórych zbyt skomplikowana. Miałem inne plany na bardziej złożone układy. Inni autorzy tematów przyjęli większe kombinacje bloków. Dla użytkowników końcowych prawdopodobnie wkraczali w świat, który nie miał sensu. Oglądali piękne dema tematów i byli sfrustrowani, gdy nie mogli sprawić, by coś działało. Edytor bloków nie był i nadal nie jest wystarczająco intuicyjny, aby użytkownicy o najmniejszej wiedzy mogli tworzyć układy wykraczające poza podstawy.

Zdecydowałem się na samouczek krok po kroku, który poprowadzi moich użytkowników do zbudowania tej prostej sekcji sprzedaży książek. Jednak dokumentacja nie zawsze jest najlepszą odpowiedzią. Nawet jeśli użytkownicy go znajdą i przeczytają, wyniki nie zawsze są dokładne. O wiele prościej byłoby mieć przycisk, który po kliknięciu wstawia tę sekcję bezpośrednio do edytora. Użytkownik może następnie dostosować go do swoich treści.

Właśnie tam pojawiają się wzory blokowe.

Autorzy motywów powinni być w stanie tworzyć unikalne i złożone kombinacje bloków z niestandardowymi stylami. Użytkownicy powinni być w stanie po prostu sprawić, by wyglądało to jak demo .

Od czasu „budowania” (używam tego terminu luźno) mojego pierwszego motywu WordPress w 2005 roku, widziałem lub próbowałem rozwiązać ten problem na różne sposoby. Szablony stron. Opcje motywu. Skróty. Widgety. Ty to nazwij. Wszystkie zostały już wypróbowane. Każda metoda stanowiła główne przeszkody dla użytkowników. Niektóre ( hem, skrócone kody ) pozostawiły treści użytkowników w chaosie i stworzyły efekt blokady, w którym ostatecznie byli przywiązani do swojego tematu.

Już dawno minął czas na coś nowego.

Czym są wzorce blokowe i jak poprawią one komfort użytkownika?

Zrzut ekranu wzorca bloku kolumny cen.
Sekcja niestandardowych kolumn cenowych.

Co się dzieje, gdy użytkownik chce zbudować układ z wieloma kolumnami opcji cenowych, jak pokazano na powyższym zrzucie ekranu? Powodzenia. Większość nie mogła tego wyprodukować w systemie blokowym. Nawet bez wzorów blokowych motyw wymagałby niestandardowych stylów bloków, aby było to możliwe. Wtyczki prawdopodobnie wypełnią pustkę dla tak złożonych wyników i przez lata radziły sobie z tabelami cen na różne sposoby. Co by było, gdybyśmy mogli tworzyć takie układy w motywach lub w znacznie prostszych wtyczkach?

Jest to możliwe dzięki wzorom blokowym.

Mówiąc prościej, wzór blokowy to grupa bloków. Core WordPress, motywy i wtyczki będą mogły rejestrować wzorce z dołączonymi do nich predefiniowanymi ustawieniami.

Z punktu widzenia przeciętnego użytkownika wzory blokowe to predefiniowane sekcje, których można użyć do tworzenia układów. Te układy mogą być czymś tak prostym, jak sekcja książki we wcześniejszej części tego artykułu lub bardziej złożone kolumny cenowe. Dzięki tym wzorom użytkownicy będą mogli tworzyć złożone układy jednym kliknięciem.

System blokowy położył podwaliny pod znacznie inną i zgodną z przyszłością przyszłość niż to, czego doświadczaliśmy przez lata. Pod koniec dnia większość bloków to zwykły stary kod HTML. Wzorce blokowe będą niczym innym jak rejestracją grupy tych bloków. Gdy użytkownik przełącza motywy, ich zawartość pozostaje nienaruszona, nawet jeśli nowy motyw nie rejestruje tych samych wzorców.

Wersja 7.7 wtyczki Gutenberg zawierała pierwszą iterację interfejsu dla wzorców. Jest prosty i przejdzie kilka kolejnych iteracji, zanim będzie gotowy do użycia w produkcji. Docelowo będzie w pełni zintegrowany interfejs do wybierania spośród wielu wzorów. Użytkownik widzi coś, z czego chce skorzystać. Klikają na ten wzór. Zostaje wstawiony do posta.

Nigdy więcej skomplikowanych opcji motywu. Nigdy więcej zupy shortcode. Koniec z godzinami frustracji i zastanawianiem się, dlaczego nie możesz zbudować niestandardowej strony głównej pokazanej w tym starannie przygotowanym demo motywu.

Może jestem odrobinę optymistą. Wzory blokowe będą wymagały ogromnego wkładu społeczności twórców motywów i wtyczek. Chociaż rdzeń WordPressa domyślnie dostarcza kilka popularnych wzorców, w żaden sposób nie pokrywają one zakresu projektu, który jest możliwy, gdy autorzy motywów wykorzystają swoje umiejętności artystyczne.

Zawsze byłem podekscytowany edytorem bloków. Jednak zawsze wydawało mi się, że jestem bardziej podekscytowany potencjałem niż produktem końcowym. Ciągle czekałem, aż stanie się tym, o czym myślałem, że może być. Tak, wciąż czekam. Jednak majstrowanie przy wczesnej wersji systemu wzorców wydaje się, że zbliżamy się do punktu, w którym możemy robić te niesamowite rzeczy, które edytor miał nam umożliwić. Długo czekaliśmy, a przed nami jeszcze trochę. Ale po tym, jak doświadczyłem dotychczasowej pracy, nabrałem nowej pasji do projektu.