Edycja całej strony w oparciu o bloki czyli motywy przyszłości

Wyobraź sobie, że twój motyw jest w całości zbudowany tylko z bloków, a ty masz kontrolę nad każdym, nawet najdrobniejszym elementem na stronie. Powiedzmy, że logo chcesz umieścić na środku, po jego lewej stronie wyświetlić menu, a po prawej napis: „Zadzwoń do mnie”.

I wyobraź sobie jeszcze, że nie musisz wchodzić w „bebechy” motywu (czyli pliki źródłowe w PHP), żeby to zrobić.

To niedługo stanie się realne w WordPressie dzięki tzw. Block Templates, Templates Parts i specjalnym blokom dynamicznym, takim jak na przykład Navigation, Post Title, Post Comments.

Już teraz trwają prace na wszystkimi elementami tej układanki, a całość znana jest pod tematem Full Site Editing. Sprawdźmy, jak to będzie działać i gdzie możesz to już teraz przetestować.

Full site editing – jak to działa

Na czym polega idea tworzenia całych stron za pomocą bloków? Najprościej będzie wyjaśnić to na przykładzie.

Poniżej widzimy stronę pojedynczego wpisu na WordPressie, która korzysta z templatki zbudowanej tylko z bloków (zero kodu PHP).

Wszystko co widzimy na tej stronie, łącznie z logo i menu, a nawet stopką zostało utworzone w blokowym edytorze WordPressa.

Templatka nosi tytuł single i jest odpowiednikiem templatki single.php, gdybyśmy chcieli się posłużyć analogią do dotychczas znanej nam hierarchii templatek w WordPressie.

W skrócie, chodzi nam o to, żeby wszystkie pojedyncze wpisy na naszej stronie miały ten sam spójny układ i wygląd. Jaki? Ano właśnie o tym decydujemy projektując templatkę single. A jak, o tym zaraz…

Teraz spójrzmy na inny wpis. Zwróćmy uwagę, że wygląda bardzo podobnie do poprzedniego.

Oba nasze wpisy mają sporo elementów wspólnych. Spróbujmy je sobie podsumować.

Elementy wspólne obu wpisów:

• Header, a w nim:
  • Logo
  • Menu
• Tytuł wpisu (odpowiedni dla każdego wpisu)
• Obrazek wyróżniający (odpowiedni dla każdego wpisu)
• Wypis (ang. excerpt). Równie dobrze w tym miejscu mogłaby być treść całego wpisu.
• Stopka

I jeszcze dwa czerwone paski (na górze i na dole strony), które dodałam, żeby pokazać, że templatka niekoniecznie musi rozpoczynać się od hedeara a kończyć na stropce).

I teraz najlepsze!

Cała nasza templatka została od A do Z utworzona w panelu admina WordPressa, za pomocą bloków. Zero PHP.

Na backendzie nasz Single prezentuje się następująco:

I jeszcze zbliżenie na blok My header:

Blok My header jest blokiem typu Template Part. W naszym przykładzie zawiera w sobie dwa bloki: Obrazek oraz Nawigację (Navigation).

I jeszcze jedno zbliżenie, tym razem na blok Kolumny:

A oto wszystkie bloki wchodzące w skład naszej templatki Single:

• Akapit
• Template part (tu: My header)
  • Obrazek (logo)
  • Nawigacja (menu)
• Kolumny
  • Kolumna
    • Post Title
    • Post Excerpt
  • Kolumna
    • Post Featured Image
• Template part (tu: My footer)
• Akapit

Pogrubiłam kilka bloków, które być może widzisz po raz pierwszy i które mają sens właściwie tylko w kontkeście projektowania templatek.

Nowy blok: Template Part

Pierwszym z tajemnicznych bloków jest Template Part. W powyższym przykładzie użyty jest dwa razy:

• Jako header
• Jako stopka

Bloki typu Template Part reprezentują elementy powtarzalne i wspólne dla kilku templatek.

W naszym przykładzie zbudowaliśmy tylko jedną templatkę, konkretnie templatkę dla „singli”, czyli wpisów blogowych. Z pewnością będzie nam potrzebna templatka również dla stron, albo dla archiwum kategorii. W nich również będziemy chcieli wykorzystać header i stropkę.

Wstawianie takich elementów jak menu (Navigation) czy logo do każdej templatki z osobna nie ma sensu, gdyż byłoby to bardzo trudne w utrzymaniu.

I stąd pomysł, żeby elementy współdzielone przez wszystkie templatki opakowywać w tak zwane Templates Parts.

Nowe bloki: Post title, Post Excerpt, Post Featured Image…

W naszym przykładzie pojawiły się również bloki, które reprezentują elementy dynamiczne na naszej stronie. Dynamiczne, a więc takie, które zmieniają się w zależności od kontekstu.

Do takich bloków należy blok wyświetlający tytuł wpisu lub jego obrazek wyróżniający.

Bloków dynamicznych w WordPressie będzie więcej:

Tych bloków będzie przybywać wraz z rozwojem koncepcji Full Site Eidting.

Każdy, kto przynajmniej raz w życiu stworzył własny motyw WordPress od zera już dostrzega analogię tych bloków do tak zwanych Template Tags.

I jedne i drugie wyciągają jakieś dynamiczne treści z naszej bazy danych, np. tytuł wpisu.

Dla przykładu, o ile kiedyś twórcy motywów musieli użyć funkcji the_title(), żeby w templatce single.php wyświetlnić tytuł wpisu, tak teraz, będzie można zrobić to samo w templatce o nazwie Single wstawiając do niej blok Post Title.

Gdzie tworzymy templatki oparte na blokach?

Templatki oparte na blokach tworzymy bezpośrednio w panelu admina (bezpośrednio w plikach źródłowych motywu też można, ale o tym za chwilę).

Cała ta koncepcja jest wciąż jeszcze w przygotowaniu, dlatego, jeśli chcemy mechanizm Full Site Editing wypróbować już teraz, należy:

• Uruchomić wtyczkę Gutenberg
  • Przejść do Gutenberg -> Experiments
  • Włączyć Full Site Editing

Wówczas w naszym WordPressie, po prawej stronie zobaczymy dwie nowe pozycje:

… które umożliwiają nam tworzenie templatek oraz ich części (Template Parts).

Nazwy templatek nie są przypadkowe.

W zależności od przeznaczenia templatki możesz utworzyć templatki o następujących nazwach:

• 404 – do wyświetlania stron które nie istnieją
• page – do wyświetlania zwykłych stron
• single – do wyświetlania wpisów blogowych
• single-post_type_slug (np. single-book) – do wyświetlania wpisów opartych o custom post type o danym slugu
• archive – do wyświetlania stron typu archiwum
• index – do wyświetlenia dowolnej strony z twojego WordPressa, jeśli bardziej „wyspecjalizowana” templatka (np. single) nie istnieje

W backendzie mogą one przykładowo wyglądać następująco:

Tak utworzone templatki możemy sobie następnie wyeksportować, zapisać jako pliki HTML i umieścić je w katalogu block templates naszego motywu.

Oczywiście nic nie stoi na przeszkodzie, żebyśmy takie templatki tworzyli bezpośrednio w kodzie HTML, ale robiąc to z poziomu edytora WordPressa, możemy dowolnie zagnieżdżać nawet bardzo skomplikowane bloki bez obawy, że zapomnimy domknąć jakiego taga.

Taki, oparty o bloki, motyw, możemy udostępniać dalej.

Jeśli ktoś stwierdzi, że to co zrobiliśmy, nie do końca mu odpowiada (bo dajmy na to w wpisy blogowe chce wyświetlać w innym układzie) nie ma problemu. Taka osoba sobie wejdzie w Wygląd -> Templates i utworzy własną templatkę Single, która nadpisze tę z motywu.

Full Site Editing brama do motywów przyszłości?

I tak powoli dochodzimy to senda tematu, a mianowicie kierunku jaki Full Site Editing wykreśli w WordPressie.

Skoro templatki motywu możemy już „wyklikać” z boków, to rodzi się pytanie:

Czy motowy przyszłości będą w całości oparte o bloki?

To pytania może budzić coś w rodzaju buntu: ale po co? I czy naprawdę chcemy dawać użytkownikom końcowym broń palną do ręki?

Bo skoro niedługo dostaniemy motyw, którego każdy element można nadpisać lub zmienić bez wchodzenia w kody źródłowe, to czy oby przypadkiem nie prosimy się o tworzenie stron-potworków?

Na to pytanie społeczność WordPressowa już dawno udzieliła odpowiedzi.

I dlatego twórcy page builderów (np. Divi czy Elementor) już jakiś czas temu dodali podobny mechanizm do swoich narzędzi. Ich użytkownicy, jeśli chcą mogą stworzyć cały układ strony od góry do dołu (łącznie z headerem i stopką) w panelu admina WordPress, z klocków oferowanych przez page buildery.

Jest to raj dla grafików z zacięciem technicznym. Nie muszą już być uzależnieni od programisty czy uczyć się programowania, żeby stworzyć stronę, w której logo będzie dokładnie tam, gdzie zapragną.

A ty co myślisz o koncepcji pełnej edycji strony?

Podoba ci się idea? Widzisz jakieś zagrożenia? Minusy? Jestem ogromnie ciekawa waszych komentarzy.