Podstawy budowania: badanie wzorców blokowych

Najnowsza wersja WordPressa pojawi się pod koniec miesiąca 25 stycznia. Być może do czasu, gdy to czytasz, wersja 5.9 została już udostępniona światu. Nie mogłem być bardziej podekscytowany. Istnieje niezliczona ilość ulepszeń i nowych funkcji, z których wiele omówimy w przyszłych artykułach, ale dzisiejszym tematem są „wzory blokowe”.

Chociaż nie jest to nowość w WordPressie, wzorce zyskują wiele świeżej uwagi ze względu na funkcje dostępne w wersji 5.9, w szczególności motywy blokowe. Wzorce szybko stają się podstawowym składnikiem samego WordPressa i wydają się być gotowe na przekształcenie w ten sposób, w jaki projektujemy i budujemy strony internetowe. Więc jaki jest lepszy czas na zbadanie, czym naprawdę są wzorce blokowe i jak można z nich korzystać?

Podstawy

Zanim zagłębimy się w schematy blokowe, zacznijmy od podstaw i ustalmy trochę terminologii. WordPress bardzo się zmienił w ciągu ostatnich kilku lat. Dobrze jest upewnić się, że wszyscy jesteśmy na tej samej stronie.

Blok

Blok to podstawowa „jednostka” treści w WordPressie. Od akapitu tekstu po galerię obrazów, blok może przybrać niemal dowolną formę. Lubię wyobrażać sobie pojedynczy kawałek LEGO . Chociaż każdy blok może wyglądać inaczej lub pełnić unikalną funkcję, wszystkie dobrze do siebie pasują, tworząc zawartość strony internetowej.

Wzór

Wzór blokowy to po prostu predefiniowany zbiór bloków, który tworzy określony układ. Wzór może być pojedynczym blokiem lub składać się z wielu. Jak zobaczymy później, wzorce sprawiają, że tworzenie złożonych układów stron jest łatwe i przyjemne.

Redaktor

Edytor to interfejs użytkownika, którego używamy do tworzenia stron i postów z bloków. Od momentu wprowadzenia w WordPress 5.0 aż do 2018 roku, Edytor był nazywany wieloma imionami. Należą do nich Gutenberg, Gutenberg Editor, Block Editor i inne. Na potrzeby tego artykułu użyjemy po prostu terminu „redaktor”.

Wstawiacz

W Edytorze Inserter służy do dodawania bloków i wzorów do strony. Dostęp do insertera można uzyskać, klikając niebieski znak (+) w lewym górnym rogu edytora.

Poniższy zrzut ekranu ilustruje nasze zdefiniowane terminy.

Dlaczego wzory blokowe?

Edytor umożliwia nam budowanie z bloków praktycznie każdego projektu, niezależnie od tego, czy jest to prosty post na blogu, czy rozbudowana strona docelowa. Użyjmy tego samego artykułu jako przykładu. To, co teraz czytasz, to blok akapitu. Powyższy nagłówek to blok Heading, a zrzut ekranu to tylko blok Image. Dodanie tych elementów treści do strony było łatwe. Otworzyłem Inserter, znalazłem odpowiedni blok i kliknąłem, aby wstawić.

Szybka wskazówka: Czy wiesz, że bloki można również wstawiać za pomocą polecenia ukośnika? Rozpocznij nowy akapit klawiszem „/”, a pojawi się lista dostępnych bloków. Wpisanie dodatkowych liter poprawi wyniki wyszukiwania. Spróbuj!

A może coś bardziej skomplikowanego? Rozważ poniższą tabelę cen, projekt często używany do prezentacji produktów lub usług w witrynie internetowej.

Przyjrzyj się uważnie, a możesz rozpoznać poszczególne bloki, które zostały użyte do stworzenia tego układu. Podstawą jest blok kolumn z trzema równo rozmieszczonymi kolumnami. Wewnątrz każdego bloku kolumny znajduje się blok separatora, nagłówka, akapitu, przycisków i odstępnika. Ile udało Ci się zauważyć?

W rzeczywistości ta tabela cen składa się z 25 pojedynczych bloków. Bez względu na poziom umiejętności z WordPress, odtworzenie tego układu od podstaw byłoby zarówno żmudne, jak i nieco trudne.

A teraz wyobraź sobie, że ta grupa 25 bloków została już dla Ciebie skonfigurowana. Jednym kliknięciem możesz wstawić pełną tabelę cenową i dostosować ją do swoich indywidualnych potrzeb. Co więcej, co by było, gdyby na wyciągnięcie ręki była ogromna kolekcja projektów, z których każdy pasowałby do estetyki Twojego motywu? Pomyśl o kreatywnych układach obrazu i tekstu, wezwaniach do działania, nagłówkach, stopkach, a nawet układach całej strony. Posiadanie tego typu „treści startowych” zaoszczędziłoby dużo czasu, a nawet uczyniłoby Edytor bardziej dostępnym dla nowszych użytkowników WordPressa.

W tym miejscu pojawiają się wzorce blokowe. Powyższa tabela cen jest w rzeczywistości wzorcem zawartym w nadchodzącym motywie Twenty Twenty-Two, który zostanie wydany wraz z WordPress 5.9!

Mam nadzieję, że to małe ćwiczenie zilustrowało, dlaczego jestem tak podekscytowany potencjałem wzorców blokowych, ale jak właściwie z nich korzystamy?

Jak korzystać z wzorów

Podobnie jak bloki, wzory można dodawać do strony za pomocą insertera. Po otwarciu insertera przejdź do zakładki „Wzory”, w której znajdują się wszystkie dostępne wzory posegmentowane według kategorii. Wybierz układ odpowiedni dla siebie i kliknij, aby wstawić. Następnie możesz edytować poszczególne bloki tworzące wzór, tak jak każdy inny blok. Nie ma ograniczeń co do liczby wzorów, które możesz wstawić. Mieszaj i dopasowuj, aby tworzyć niepowtarzalne projekty stron.

Podczas gdy Inserter zapewnia łatwy dostęp do wzorów blokowych, zauważysz, że podgląd każdego wzoru jest dość mały i wszystkie są ułożone w jednej kolumnie. Wizualizacja i porównanie układów może być trudne, co sprawia, że ​​wybór właściwego może być trudny.

Aby rozwiązać ten problem, WordPress 5.9 zawiera Eksplorator wzorców. Dostęp do tej ekscytującej nowej funkcji można uzyskać, klikając przycisk „Eksploruj” obok menu rozwijanego kategorii na karcie „Wzory”.

Eksplorator otwiera okno modalne, które zapewnia ulepszone przeglądanie dzięki wzorcom wyświetlanym w siatce. Można je również łatwo przeszukiwać lub filtrować według kategorii.

Powyższy zrzut ekranu to pierwsza iteracja Eksploratora wzorców. Oczekuje się, że przyszłe wersje WordPressa rozszerzą funkcjonalność Eksploratora. Obecne eksperymenty dodają podglądy na urządzenia mobilne/tablety oraz opcję prezentowania wzorów indywidualnie, w przeciwieństwie do układu siatki. Chociaż nic nie jest potwierdzone, wypatruj dodatkowych ulepszeń w WordPressie 6.0 w połowie 2022 roku.

Po całej tej dyskusji o wzorcach możesz się zastanawiać, skąd one właściwie pochodzą?

Gdzie je znaleźć?

Wzorce do zarejestrowania na jeden z trzech sposobów, za pomocą bieżącego motywu, wtyczki innej firmy lub samego WordPressa za pośrednictwem katalogu wzorców. Przyjrzyjmy się każdej metodzie.

Temat

Twój motyw będzie prawdopodobnie najbardziej bezpośrednim sposobem udostępniania wzorów w Twojej witrynie. Jak widzieliśmy w powyższej tabeli cen, wiele motywów opartych na blokach zawiera własne kolekcje wzorów na zamówienie. Jest to po prostu kolejny sposób na wyróżnienie się motywów, a solidny zestaw opcji układu będzie ogromną korzyścią dla użytkowników. W chwili pisania tego tekstu motyw Twenty Twenty-Two zostanie dostarczony z ponad 60!

Katalog wzorców (WordPress)

Począwszy od wydania WordPress 5.9, WordPress będzie udostępniał własne wzorce za pośrednictwem Katalogu wzorców.

Katalog wzorców jest repozytorium wzorców obsługiwanym przez społeczność, podobnie jak repozytoria wtyczek i motywów WordPress, i będzie otwarte do publicznych zgłoszeń do wydania 5.9. Wszystkie przesłane i zatwierdzone wzory będą łatwo dostępne do przeglądania i wstawiania bezpośrednio z Eksploratora wzorów. Oznacza to, że użytkownicy WordPressa będą mieli dostęp do setek, jeśli nie tysięcy, wzorców bloków.

Szybka wskazówka: Niektóre motywy mogą wyłączać wzorce zawarte w WordPress z Katalogu wzorców. Dzieje się tak często, gdy twórcy motywów dołączają własne kolekcje wzorców i chcą zapewnić lepsze wrażenia użytkownika.

Wtyczki innych firm

Wreszcie mamy wtyczki. Ponieważ wzorce istnieją od wielu lat, wiele wtyczek innych firm, takich jak Genesis Blocks i Redux, stworzyło rozbudowane biblioteki wzorców. Często te biblioteki nie są bezpośrednio zintegrowane z funkcjami takimi jak Eksplorator wzorców i zawierają niestandardowe bloki, których nie ma w rdzeniu WordPress. Mają również tendencję do korzystania z własnych metod wstawiania wzorców, ale z czasem spodziewam się, że wielu z nich zacznie dostosowywać się do nowego standardowego podejścia WordPressa.

Jeśli szukasz niszowych bloków i układów, podczas gdy Katalog wzorców wciąż się rozwija, lub nie używasz motywu z własnymi wzorcami, zdecydowanie polecam sprawdzenie, co mają do zaoferowania wtyczki innych firm.

Przyszłość wzorców

WordPress 5.9 wprowadzi wiele ulepszeń do wzorców blokowych. Jak już wspomnieliśmy, Pattern Explorer ułatwi wybór odpowiedniego projektu dla Twojej witryny. Katalog wzorów zapewni ci dostęp do ogromnej kolekcji wzorów stworzonych przez społeczność, które bezproblemowo zintegrują się z twoim motywem.

Chociaż zawsze będziesz mógł tworzyć niepowtarzalne projekty z pojedynczych bloków, wierzę, że większość z nas uda się prosto do Eksploratora wzorów. Wybierzemy układ, dostarczony przez nasz motyw lub z katalogu, a następnie dostosujemy go w razie potrzeby. Wiem, że będę.

Ponadto możemy oczekiwać, że nowe motywy oparte na blokach będą oceniane na podstawie tego, jak obszerna jest ich kolekcja wbudowanych wzorców blokowych. Motywy z ponad setką wzorów, wszystkie starannie skategoryzowane i obejmujące szeroki zakres przypadków użycia, prawdopodobnie staną się normą. Chociaż estetyka motywu jest ważna, zapewnienie użytkownikom narzędzi potrzebnych do bezproblemowego tworzenia pięknych stron internetowych jest najważniejsze.

Wzorce to przyszłość WordPressa, a przyszłość jest jasna.

Zawijanie

W tym artykule omówiliśmy, czym są wzorce blokowe, jak z nich korzystać i dlaczego zasadniczo zmienią sposób, w jaki budujemy witryny WordPress. W następnym artykule Podstawy Budowniczych zagłębimy się nieco głębiej i nauczymy Cię, jak tworzyć własne wzory!

Więc co myślisz o wzorach? Używasz ich na swojej stronie? Czy masz pytania, które nie zostały omówione w tym artykule? Daj nam znać w komentarzach.