Szablony bloków – nachodzi wielka rzecz w WordPressie

Uwaga, uwaga! Już można wypróbować pierwsze Szablony Bloków (z ang. Block Patterns ostatecznie zostały przetłumaczone w polskiej wersji WordPressa jako Wzorce).

Szablony bloków to nic innego jak gotowe kolekcje bloków, które wstawia się do strony za pomocą jednego kliknięcia.

Sporo wtyczek już od dawna oferuje ten mechanizm, a niebawem wchodzi on do WordPressa core’a.

Z tego wpisu dowiesz się:

• Dlaczego szablony bloków to wielka rzeczy, która zrewolucjonizuje WordPressa.
• Zobaczysz przykłady pierwszych szablonów bloków udostępnionych przez ekipę WordPressa.
• Znajdziesz wskazówki, jak już teraz sprawdzić działanie tych szablonów.
• Dowiesz się, jak utworzyć własne szablony bloków:
  • gdy jesteś programistą (nawet początkującym)
  • gdy nie jesteś programistą
• Znajdziesz kilka pomysłów na utworzenie własnych kolekcji bloków

Block Patterns – brzmi nieco akdemicko, ale to manna z nieba dla końcowych użytkowników

Kiedy 2 miesiące temu pisałam artykuł Jak gotowe układy bloków przyspieszają robienie stron na WordPressie, nie sądziłam, że tak szybko będę mogła zobaczyć pierwsze takie przykłady w samym silniku WordPressa.

W tamtym artykule skupiłam się na wtyczkach, które umożliwiają wstawienie całych, gotowych układów treści do strony. A dziś, proszę, proszę! Ten mechanizm już jest dostępny w samym WordPressie. Co prawa jeszcze nie w wydaniu oficjalnym, ale już można go testować.

Szablony Bloków (aka Wzorce), to gotowe układy treści zbudowane z połączonych ze sobą bloków, które wstawiamy do naszej strony w kilku kliknięciach…

… i które potem może dowolnie przerabiać.

Najprościej będzie to wytłumaczyć na przykładach.

Zatem od razu sprawdźmy, jakie szablony mamy już dziś w zasięgu ręki od twórców WordPressa.

Jak przetestować Szablony Bloków

1. Użyj wersji WP 5.5 albo zainstaluj wtyczkę Gutenberg (dzięki tej wtyczce możesz na bieżąco śledzić zmiany w edytorze WP, jeszcze zanim wejdą do wersji oficjalnej)
2. Załóż nową stronę i kliknij plusik, tak, jakbyś chciał wstawić blok.
3. Przejdź do zakładki Patterns (Wzorce):

Zobaczysz listę gotowych szablonów:

4. Wybierz szablon, który ci się podoba i kliknij w niego.

W momencie kiedy piszę ten artykuł (początek maja 2020), gotowych szablonów jest zaledwie kilka.

Ale nawet tych kilka wystarczy, żeby zrozumieć ideę i potęgę tego mechanizmu.

Co się dzieje po wstawieniu szablonu do wpisu

Dla przykładu, wybierzmy sobie ten oto szablon:

Po wstawieniu szablonu do wpisu lub strony, zobaczymy nową grupę bloków:

Teraz, gdy klikniemy w prawym górnym rogu na Nawigację bloków, zobaczymy, że w tym przypadku do naszej strony został dodany blok grupa:

Kiedy teraz, w Nawigacji bloków klikniemy na właśnie wstawiony blok Grupa, zobaczymy wszystkie jego bloki podrzędnej (bloki-dzieci):

I teraz staje się jasne, co tu się wydarzyło.

Otóż wstawienie szablonu to nic innego jak dodanie całej kolekcji bloków, wraz z ustawionymi już kolorami, fontami itp.

Ktoś wykonał robotę za nas.

Teoretycznie, nic nie stoi na przeszkodzie, żebyśmy sami, ręcznie, krok po kroku zbudowali podobny układ od zera bezpośrednio w edytorze. Ale wówczas trzeba by się było nieco napracować i ręcznie wstawić wszystkie te bloki:

• Wstawić blok Grupa
  • Wewnątrz niego, wstawić 3 kolejne bloki Grupa
    • Wewnątrz każdego z nich wstawić blok Kolumny (lewa kolumna szarsza od prawej)
      • Do lewej kolumny wstawić blok Akapit
        • Wyśrodkować element
        • Ustawić mu wielkość fonta
        • Ustawić mu kolor
      • Do prawej kolumny wstawić:
        • akapit z większym fontem i odpowiednim kolorem
        • kolejny akapit z mniejszym fontem
        • blok Odstęp

Prawda, że nieco roboty jest?

A dzięki gotowemu szablonowi, mamy wszystko gotowe w 3 kliknięciach!

Dużo prościej jest wziąć gotowca i dostosować go do własnych potrzeb niż tworzyć wszystko za każdym razem od zera.

(Gdy chcesz wiedzieć, jak stworzyć własny szablon, chwila cierpliwości, zaraz podam przepis i na to)

Potęga gotowych szablonów bloków

Przykłady, które widzimy w WordPressie są bardzo proste i mało efekciarskie.

Jednak sam mechanizm jest bardzo potężny. Kiedy takie szablony zostaną przygotowane z głową (być może z pomocą grafika) stają się potężnym narzędziem do tworzenia stron w ekspresowym tempie.

Zobaczymy nieco ciekawsze przykłady.

Te dwa obazki niżej to fragmenty strony głównej, która została utworzona w kilkanaście minut za pomocą gotowych szablonów bloków.

Tutaj akurat, bloki te pochodzą z darmowej wtyczki Kadence Blocks.

A sam szablon w oryginale wygląda tak:

• Jak zrobić stronę główną w 30 minut

W tym filmiku pokazuję krok po krok, jak zrobić całą stronę główną w oparciu takie szablony (i jak przygotować grafiki wektorowe, nawet gdy nie jesteś grafikiem i nie masz narzędzi).

Ale wróćmy jeszcze do szablonów z core’a WordPressa.

Czego jeszcze brakuje w szablonach WordPresswych?

Interfejs WordPressa oferujący szablony jest na razie bardzo prosty.

Oto czego jeszcze mu brakuje:

• Szablony powinny być pogrupowane w kategorie.
• Powinna być wyszukiwarka szablonów.
• Szablony powinny mieć tytuły.

To wszystko mają już szablony tworzone przez wtyczki, tak jak wspominana w przykładach wyżej wtyczka Kadence.

Przyszłość szablonów

Bez wątpienia lista dostępnych szablonów kiedyś rozrośnie się i zamieni w ogromną bibliotekę. Może nawet zostanie utworzone oficjalne repozytorium takich gotowców?

Może kiedyś zamiast motywów użytkownicy WordPess będą przeszukiwać szablony bloków?

Taki rozwój wydarzeń jest bardzo prawdopodobny. Zwróćmy uwagę, że tak właśnie stało się w przypadku page builderów. Dowodem jest choćby portal wpbuilt.co, który oferuje gotowe templatki (prawie 5000!) pod Elementora, Divi i inne page buidery.

A tworzenie własnych szablonów jest naprawdę proste!

Chcesz stworzyć własny szablon bloków?

Jeśli chcesz stworzyć własnych szablon bloków, nic nie stoi na przeszkodzie.

Proces jest dość prosty.

Jeśli jesteś programistą (nawet początkującym)

Żeby utworzyć własny szablon bloków:

1. Zbuduj w edytorze WordPressa swoją kolekcję bloków (tak, tak, po prostu klikając na dowolnej stronie).
2. Użyj nowe API register_pattern (skorzystaj z dokumentacji WordPressa Block Patterns) i parametrach funkcji:
   • podaj nazwę swojego szablonu
   • wklej kod HTML’a bloków utworzonych w kroku 1.

Dla przypomnienia, żeby swoją kolekcję bloków skopiować jako kod HTML wystarczy w edytorze WordPressa przełączyć się w Edytor kodu (prawy górny róg – trzy pionowe kropki – Edytor) i skopiować kod do schowka.

Funkcję register_pattern możesz umieścić w pliku functions.php swojego motywu z wykorzystaniem hook’u init, a jeszcze bardziej elegancko byłoby utworzyć własną wtyczkę.

Pamiętaj tylko, że na szablony bloków wciąż są w fazie eksperymentalnej. Chociaż mówi się, że samo API rejestracji bloków nie powinno się już zmienić.

Jeśli nie jesteś programistą

1. Zainstaluj i włącz wtyczkę Block Patterns
2. Wejdź do sekcji Block Patterns (zobacz obrazk niżej)
3. Utwórz własny szablon z dostępnych bloków WordPress, na przykład taki:

4. Wejdź w edycję dowolnej strony lub wpisu
5. Kliknij w plusik (wstawianie bloku)
6. Przełącz się do zakładki Patterns (Szablony)
7. Wyszukaj swój szablon na liście
8. Wstaw do wpisu/strony

W momencie kiedy piszę ten wpis, w oficjalnej wersji WordPressa (5.4.1) nie ma jeszcze możliwości wstawiania szablonów, więc jeśli chcesz przetestować powyższe kroki, musisz mieć również wtyczkę Gutenberg.

Prawda że proste?

W ten sposób możesz utworzyć sobie własną bibliotekę ciekawych szablonów. Oto jeszcze jeden przykład:

I dla dociekliwych, szczegółowa struktura:

A tak będzies wyglądać lista wszystkich Twoich własnych szablonów:

Kiedy szablony bloków trafią do oficjalnej wersji WordPressa?

Wydanie WordPress 5.5 jest planowane na sierpień 2020. Jeszcze nie wiadomo, czy szablony znajdą się w tej wersji. Z jednej strony jest duża szansa, bo sam mechanizm całkiem sprawnie działa już we wtyczce Gutenberg.

Jednak już nie raz było tak, że ciekawie zapowiadające się rzeczy, które od dawna były dostępne we wtyczce Gutenberg, musiały być przesunięte do kolejnych wydań WordPressa.

W przypadku szablonów, samo API jest proste, ale interfejs użytkownika pozwalający na sprawne przeglądanie tysięcy gotowych szablonów musi być zaplanowany z głową.

Nawet jeśli zmieni się samo API, to i tak nic nie stoi na przeszkodzie, żeby już teraz tworzyć własne grupy bloków. Ta praca na pewno nie pójdzie na marne, bo w ostateczności można je wykorzystać już teraz jako tak zwane bloki ponownego użycia, o których już kiedyś pisałam.

A co Ty myślisz o szablonach bloków?

Podoba Ci się ten pomysł? Widzisz w tym przyszły kierunek rozwoju WordPressa?

Ja uważam, że block patterns to gruba sprawa. O ile samodzielne tworzenie bloków od zera jest bardzo trudne, to w przypadku szablonów sprawa jest dziecinnie prosta, bo z gotowych małych klocków lego budujemy własne okręty.

Nawet jeśli trochę poczekamy na nowe medium, żeby się móc swoją pracą dzielić i korzystać z pomysłów innych, to i tak przyszłość WP zapowiada się interesująco!