Budowanie biblioteki wzorów z bloków Gutenberg

Gutenberg reprezentuje ogromną zmianę w kierunku projektowania stron internetowych opartego na wzorach. W tym artykule omówię podejścia, które zastosowaliśmy podczas tworzenia własnej elastycznej biblioteki niestandardowych bloków Gutenberga.

tło

Wydanie Gutenberga z grudnia 2018 r. stanowiło największą zmianę w WordPress od czasu jego powstania. Nowy, oparty na blokach interfejs „przeciągnij i upuść” zmienia sposób, w jaki programiści tworzą motywy, jak projektanci rozważają podział witryn na części składowe oraz jak redaktorzy treści zarządzają i planują tworzenie treści.

Jest to fundamentalna zmiana w kierunku projektowania stron internetowych opartych na wzorcach; system elementów wielokrotnego użytku, które można konsekwentnie stosować w całej witrynie, aby zapewnić jak najlepsze wrażenia użytkownika i usprawnić przepływ pracy. Podczas gdy wielu z nas pracowało już z wzorcami, Gutenberg przyspiesza tę zmianę w przyspieszonym tempie. Ponieważ WordPress obsługuje jedną trzecią witryn na całym świecie, nie można przecenić wpływu tej zmiany.

W tym artykule podkreślono niektóre problemy, z którymi musieliśmy się zmierzyć jako programiści, gdy zaczynaliśmy planować i budować bibliotekę wzorców, jak przezwyciężyliśmy ograniczenia związane z Gutenbergiem oraz podejście, jakie przyjęliśmy, aby stworzyć nasz elastyczny system bloków niestandardowych.

Nasz cel

Jako wyspecjalizowani twórcy szytych na miarę witryn WordPress, Gutenberg dał nam doskonałą okazję do stworzenia zunifikowanej biblioteki wzorów; zestaw dostosowywalnych bloków do użytku z wieloma naszymi niestandardowymi kompilacjami witryn internetowych.

Chcieliśmy nie tylko skorzystać z tego nowego doświadczenia edycji, ale także móc zaoferować rozwiązanie wykorzystujące nasz własny system bez polegania na ograniczonym zestawie podstawowych bloków Gutenberga lub patchworku gotowych rozwiązań innych firm.

Kompleksowy zestaw bloków na wyciągnięcie ręki oznacza również, że nie musimy tworzyć każdego bloku od zera dla nowych kompilacji witryn Gutenberg. To pozwoliłoby nam poświęcić jeszcze więcej czasu na dopracowywanie estetyki witryny i dodawanie dopracowań i optymalizacji, które pomagają oddzielić witrynę od konkurencji.

Wyzwania

Elastyczność projektowania

Potrzebowaliśmy wszechstronnego systemu projektowania z kilkoma wzorami, który dawałby nam elastyczność w tworzeniu różnorodnych motywów na zamówienie.

Osiągnięcie odpowiedniej równowagi między możliwością utrzymania skończonej i realistycznej liczby wzorów bez kompromisów w zakresie projektowania motywów było wyzwaniem.

Zmiana w rozwoju tematu

Przed Gutenbergiem przyjęliśmy wiele różnych podejść do rozwoju tematów. Najczęstszym było tworzenie indywidualnych szablonów stron dla oddzielnych części witryny. Szablony byłyby bardzo nakazowe i zawierałyby niestandardowe pola dla każdej zaprojektowanej sekcji. Szablon „Studium przypadku” może na przykład zawierać pola dla edytora tekstu, galerii obrazów, referencji itp. Jednak po umieszczeniu w szablonie nie można ich łatwo zmienić.

To podejście jest nie tylko restrykcyjne pod względem układu strony, ale zwykle oznaczało konieczność powtarzania wysiłków przy każdej nowej witrynie opartej na szablonie; należy utworzyć pola, skonfigurować szablony i oddzielne komponenty zakodowane do wyświetlania na interfejsie użytkownika.

Aby dostosować się do Gutenberga, musieliśmy zmienić nasze podejście do programowania, zrozumieć, w jaki sposób możemy tworzyć komponenty wielokrotnego użytku i skorzystać z elastyczności, którą Gutenberg oferuje nam teraz w przypadku nowych kompilacji stron internetowych.

Gutenberg nie jest tak elastyczny

Po wyjęciu z pudełka Gutenberg ma dostępnych ponad 30 podstawowych bloków. Wszystko, od podstawowych elementów treści, takich jak akapity, nagłówki i elementy listy, po bardziej złożone widżety i elementy osadzone.

W przypadku wielu naszych kompilacji stron internetowych duża liczba tych podstawowych bloków jest albo nieistotna, albo nie ma poziomu funkcjonalności, którego wymagałyby od nich nasze motywy. Potrzebowaliśmy sposobu na stworzenie własnego zestawu wzorów, które pełnią bardzo specyficzne funkcje, odpowiednie do projektu motywu.

Innym problemem, który wkrótce odkryliśmy w Gutenbergu, jest to, że tworzenie bardziej złożonych układów za pomocą bloków rdzenia nie jest ani łatwe, ani intuicyjne.

Na przykład wzorzec bloku „treść i obraz” może wymagać, aby obok obrazu pojawił się nagłówek, akapit, lista i przycisk z opcją wyświetlania obrazu po lewej lub prawej stronie treści, a te elementy muszą być wyświetlane w spójnym układzie.

Ten poziom wolności nie przychodzi łatwo Gutenbergowi. Chociaż istnieje kilka bloków, które mogą dodawać tekst, obrazy i przyciski, są one z natury dość atomowe i po dodaniu pojedynczo pojawiają się jako osobne bloki ułożone w stos. Wcześnie stało się jasne, że Gutenberg nie był wystarczająco elastyczny i musieliśmy być w stanie zbudować własne niestandardowe bloki.

Nasze rozwiązanie

Wszechstronny system projektowania

Przed wydaniem Gutenberga zainwestowaliśmy dużo czasu w badania i wizualizację wzorów dla naszej biblioteki wzorów.

Wiązało się to z audytem kilku naszych istniejących witryn internetowych i prototypów w celu skompilowania biblioteki szkieletowej powszechnie używanych elementów.

Nasi projektanci i programiści kontynuowali współpracę, aby zrozumieć, w jaki sposób te elementy można połączyć w bloki Gutenberga i jak można utworzyć określony typ bloku, aby przy ograniczonych opcjach dostosowywania pojedynczy blok mógł wyglądać znacznie inaczej w zależności od motywu.

Kiedy już podzieliliśmy nasze wzory na bloki, byliśmy gotowi do rozpoczęcia budowania.

Bloki konstrukcyjne z zaawansowanymi polami niestandardowymi

Każdy programista motywów prawie na pewno w pewnym momencie natknął się na zaawansowane pola niestandardowe (ACF). Dzięki intuicyjnemu interfejsowi można tworzyć wiele różnych typów pól; wszystko, od podstawowych pól tekstowych i edytorów treści po selektory dat, osadzone mapy i pola galerii. Można je łatwo przypisać do różnych obszarów witryny, takich jak typy postów, szablony stron, kategorie i strony użytkowników.

Najnowsza wersja bloków ACF, ACF, rozszerza całą tę znajomą funkcjonalność na Gutenberga. Grupy pól można tworzyć i przypisywać do różnych bloków opartych na ACF w taki sam sposób, jak w przypadku innych obszarów witryny.

Za pomocą kilku linijek kodu wymaganych do zarejestrowania bloku i pól wyjściowych możliwe jest utworzenie podstawowego niestandardowego bloku w ciągu kilku minut. Łatwość, z jaką można tworzyć bloki przy tym podejściu, pozwoliła nam skupić się na konfiguracji, wyjściu i stylizacji bloków.

Byliśmy teraz w stanie stworzyć zestaw niestandardowych bloków, które dawały całą elastyczność Gutenberga, ale były ograniczone do projektu motywu, co pomogłoby w spójnych układach.

Wtyczka biblioteki wzorców

Po stworzeniu kilku przykładowych bloków, zdecydowaliśmy się z pomocą zespołu inżynierów spakować nasze bloki w niestandardową wtyczkę.

Ta wtyczka oparta na blokach umożliwia szybkie wdrażanie niestandardowych wzorców dla nowych kompilacji witryn. Są one następnie dostosowywane na poziomie tematycznym.

Nasza wtyczka Pattern Library zawiera kilka przydatnych funkcji:

1. Podstawowe pliki szablonów bloków, które pozwalają nam szybko dodawać nowe bloki;
2. Funkcje umożliwiające inicjowanie podstawowych bloków i bloków niestandardowych oraz uwzględnienie ich w kategoriach niestandardowych;
3. Ekran ustawień administratora, na którym każdy blok może być włączony lub wyłączony;
4. Możliwość nadpisania układu i struktury bloku w ramach motywu;
5. Możliwość nadpisania stylizacji blokowej na poziomie motywu;
6. Ładowanie arkuszy stylów na poziomie motywu w Gutenbergu, aby podgląd administratora bloku wyglądał tak samo jak bloki frontonu. Wykorzystanie siatki CSS pomogło nam zmaksymalizować elastyczność w estetyce i układzie, jednocześnie minimalizując zmiany strukturalne;
7. Określone bloki można ograniczyć do określonych typów postów, aby zachować spójność.

Rozwój wtyczki Pattern Library będzie postępującą ewolucją, ale teraz mamy ponad 15 bloków, które można wykorzystać do zbudowania znacznej części naszych elastycznych projektów motywów.

Nasz zestaw bloków obejmuje wzorce treści i obrazów, referencje, powiązane artykuły i bloki zespołów, a także więcej wzorców w stylu prezentacji, w tym galerie, statystyki i suwaki.

streszczenie

Jesteśmy bardzo podekscytowani możliwościami, jakie otworzyły Gutenberg i nasza niestandardowa Biblioteka Wzorów.

Nie tylko możemy nadal rozwijać naszą ofertę stron internetowych na zamówienie, korzystając z najnowszych możliwości edycji, ale jesteśmy w stanie tworzyć bardzo elastyczne strony internetowe z ujednoliconym podejściem programistycznym, które pomaga nam tworzyć bogate doświadczenia dla użytkowników końcowych.

Minęły prawie 2 miesiące, odkąd po raz pierwszy zaczęliśmy używać naszej biblioteki wzorców bloków Gutenberga, której teraz używamy w wielu nowych kompilacjach witryn. Klienci chętnie korzystali z Gutenberga, a opinie klientów były jak dotąd bardzo pozytywne.

„Matt i Pammy dostarczyli samouczek na temat elementów witryny, które utworzyłeś i są niesamowite!! Elastyczność i profesjonalizm są fantastyczne i jestem bardzo wdzięczny za całą Twoją niesamowitą pracę nad tym do tej pory.. Naprawdę podekscytowany stroną teraz. Dziękuję Ci"

– Rachel Smith, YMCA Nottingham

Będziemy nadal rozbudowywać naszą bibliotekę wzorów niestandardowych bloków i udoskonalać je dalszymi ulepszeniami, w miarę jak spędzamy więcej czasu z Gutenbergiem. Obecnie pracujemy nad naszą piątą witryną z siedzibą w Gutenbergu, więc wkrótce czekaj na studium przypadku!

Jeśli potrzebujesz pomocy w rozwoju WordPressa, nie wahaj się z nami skontaktować.