A więc chcesz zacząć swoją przygodę z Full Site Editingiem (w skrócie FSE) jako twórca klasycznych motywów opartych o PHP? Na początek muszę Cię zmartwić — nie będzie łatwo (i to nie wcale przez duże wymagania techniczne), ale nagroda, jaka czeka na wytrwałych, jest warta poświęcenia.

Wróć do podstaw

Pamiętasz swoje pierwsze podejścia do tworzenia klasycznych¹ motywów w WordPressie? Rozpiera Cię duma, jak pomyślisz sobie o kodzie, który naklepałeś i kliknąłeś w panelu admina niebieski przycisk Aktywuj? Pewnie nie, ale i tak na 100% towarzyszyła temu ogromna ekscytacja — jednym słowem magia. Moja pierwsza rada jest taka — znajdź w sobie to ciekawskie dziecko i zacznij się po prostu bawić, bez myślenia o tym czy kod jest idealny, na to przyjdzie czas później. Psuj, zmieniaj, klikaj wszędzie gdzie tylko chcesz i obserwuj co się dzieje.

Poznaj swój nowy edytor

Tutaj czeka Cię pierwsze duże zaskoczenie, bo nie mówię o VS Code czy PhpStorm, ale o edytorze nawigacji, stron, szablonów, wzorców i nie tylko, który jest już teraz dostępny w WordPressie. Aby zobaczyć edytor w akcji, zainstaluj i włącz jakikolwiek motyw blokowy. Na początek polecam Ci Twenty Twenty-Three, który jest (jeszcze) domyślnym motywem instalowanym wraz z WordPressem.

Aby zainstalować motyw, przejdź do zakładki Wygląd / Motywy i w sekcji Popularne albo Motywy blokowe odszukaj Twenty Twenty-Three. Jeśli go tam nie znajdziesz to użyj wyszukiwarki.

Po zainstalowaniu i aktywacji przejdź do zakładki Edytor i niech dzieje się magia ✨. Jeśli nie wiesz, co robić to zajrzyj wyżej po instrukcje 😺. Mówiąc całkiem poważnie zachęcam Cię do obejrzenia jednego z odcinków Soboty z WordPressem gdzie wspólnie z Dawidem Urbańskim omawiamy Edytor krok po kroku.

Zmień sposób myślenia

Wiem, jak to brzmi, ale uwierz mi, że bez tego będzie bardzo Ciężko. Mam tutaj przede wszystkim na myśli podejście do pisania kodu CSS oraz tworzenia szablonów w PHP. W przypadku podejścia klasycznego wszystko dzieje na poziomie kodu i dlatego jest takie fascynujące dla twórców motywów. Przy tworzeniu motywów blokowych to podejście jest wywrócone o 180° (nie mylić z 360° 😂). W tym przypadku nasza praca w dużej mierze opiera się na ustawieniach z poziomu Site Editora i dotyczy zarówno wyglądu jak i logiki szablonów. W momencie kiedy jesteśmy gotowi opublikować nasze zmiany w repozytorium, eksportujemy naszą pracę przy pomocy narzędzi udostępnionych przez WordPress lub korzystamy z wtyczki, o której wspominam w dalszych sekcjach.

Struktura plików i katalogów

Jeśli pamiętasz, to przy tworzeniu klasycznych motywów z wykorzystaniem PHP musimy zadbać o to, aby znalazły się tam przynajmniej takie pliki jak index.php, style.css. W przypadku motywów blokowych także istnieją wymagane pliki, do których należą style.css, theme.json oraz templates/index.html. Różnica, jaka rzuca się od razu w oczy to brak plików PHP. Tak dobrze widzisz, tworząc motywy blokowe możesz obyć się bez używania PHP. Jest jeden wyjątek, ale na tym etapie jest to nieistotne. Struktura w przypadku wymaganych plików wygląda następująco:

style.css

/*
Theme Name: Demo
*/

theme.json

{}

templates/index.html

Hello World 🚀

W rzeczywistości struktura plików i katalogów nigdy nie ogranicza się tylko to wymaganych plików, dlatego też warto mieć na uwadze poniższą strukturę. Dzięki tej strukturze mamy pewność, że WordPress poprawnie rozpozna pliki i pokaże je nam z poziomu Edytora. Taka struktura wygląda następująca

1. style.css – tutaj umieszczamy wymagany nagłówek w postaci komentarza tak samo jak w przypadku motywów klasycznych. Ważne jest, aby unikać pisania kodu CSS w klasyczny sposób, jak tylko się da. Do stylowania używamy pliku theme.json.
2. theme.json – plik odpowiedzialny za całą warstwę wizualną naszego motywu
3. 📁 patterns – folder zawierający wzorce. Dzięki użyciu tego folderu nasze wzorce zostaną automatycznie zarejestrowane w motywie.
4. 📁 parts – folder zawierający części szablonów takie jak nagłówek czy stopka
5. 📁 templates – folder zawierający szablony. Umieść tutaj wszystkie szablony zgodnie z hierarchią szablonów. Dodatkowo jeśli masz jakieś niestandardowe szablony dla strony czy postów to także tutaj jest ich miejsce. Aby motyw był zgodny z FSE należy tutaj umieścić minimum jeden plik tj. index.html
6. 📁 assets – folder zawierający wszelkie rodzaju zasoby jak obrazki, ikony, fonty, pliki JS i CSS, itd.

W przypadku motywu Twenty Twenty-Four taka struktura wygląda następująco.

theme.json to Twój nowy przyjaciel

Zanim przejdę do przedstawienia Twojego najlepszego przyjeciela, pozwól, że mniej doświadczonym wyjaśnię czy jest format JSON.

Czym jest format JSON?

Najprościej ujmując, jest to sposób na organizację i przechowywanie danych opierający się o klucz i wartość (podobnie jak tablice asocjacyjne w PHP) z możliwością zagnieżdżania. Wartości w JSON mogą przyjmować formę ciągu znaków, liczby, wartości logiczne (true / false), tablicy lub obiektu. Wiem, brzmi to bardzo technicznie, więcej najlepiej pokażę Ci to na przykładzie.

{
  "name": "Marcin Krzemiński",
  "age": 40,
  "married": true,
  "friends": [
    {
      "name": "Dawid Urbański",
      "age": 34,
      "married": false,
      "pets": [
        {
          "name": "Toby",
          "age": 1,
          "type": "dog"
        }
      ]
    },
    {
      "name": "Adam Zieliński",
      "age": 30,
      "married": false
    }
  ]
}

Jak wygląda theme.json w najprostszej postaci?

W zasadzie to wystarczy w pliku umieścić nawiasy klamrowe {} i gotowe, ale aby dobrze pracowało nam się z tym plikiem to polecam ustawić tam dwa klucze jak na snippecie poniżej:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2
}

Jednym z ważniejszych ustawień jest zdefiniowanie klucza $schema. Dlaczego? Ponieważ jeśli korzystasz z popularnych edytorów kodu jak VSCode czy PhpStorm to masz dostępne podpowiadanie dla kluczy i ich wartości, a do tego także walidację jeśli zrobisz literówkę albo inny, trudny do zauważenia błąd.

Z kolei version pomaga zapewnić kompatybilność i umożliwia przyszłe aktualizacje i ulepszenia.

Najważniejsze sekcje w theme.json

Poza wspomnianymi powyżej wartościami jak version oraz $schema mamy kilka dodatkowych, które warto omówić.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {},
  "styles": {},
  "templateParts": [],
  "customTemplates": []
}

Sekcja settings służy do definiowania globalnych ustawień motywu.. Możesz tutaj ustawić takie właściwości jak kolory, typografia, odstępy czy też układ. Użytkownik może (jeśli mu na to zezwolimy) dostosować te ustawienia z poziomu panelu administracyjnego, co pozwala na personalizację wyglądu motywu bez konieczności ingerencji w kod.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "color": {
      "defaultPalette": false,
      "palette": [
        {
          "color": "#f5f5f5",
          "name": "Biały",
          "slug": "white"
        }
      ]
    }
  },
  "styles": {},
  "templateParts": [],
  "customTemplates": []
}

Ustawienia te w większości zostaną odzwierciedlone w CSSie jako custom properties, czyli inaczej mówiąc zmienne CSS. Dla powyższego przykładu zostanie wygenerowany taki oto kod:

body {
    ...
    --wp--preset--color--white: #f5f5f5;
    ...
}

Sekcja styles służy do definiowania stylów CSS dla różnych elementów HTML (w tym body), bloków motywu. Dodatkowo możesz tutaj ustawić odstępy, typografię a także dodać dodatkowy kod CSS, który w klasycznych motywach jest dostępny w Edytor / Dostosuj / Dodatkowy CSS.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {},
  "styles": {
    "blocks": {
      "core/paragraph": {
        "color": {
          "text": "var(--wp--preset--color--white)"
        }
      }
    },
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "css": "a{text-decoration-thickness:0.0625em;text-underline-offset: 0.15em}"
  },
  "templateParts": [],
  "customTemplates": []
}

Sekcja customTemplates służy do definiowania niestandardowych szablonów stron dla motywu. Sekcja ta jest odpowiednikiem definiowania Template Name w plikach PHP dla motywów klasycznych.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {},
  "styles": {},
  "templateParts": [],
  "customTemplates": [
    {
      "name": "page-no-title",
      "postTypes": ["page"],
      "title": "Page No Title"
    },
    {
      "name": "page-with-sidebar",
      "postTypes": ["page"],
      "title": "Page With Sidebar"
    },
    {
      "name": "page-wide",
      "postTypes": ["page"],
      "title": "Page with wide Image"
    },
    {
      "name": "single-with-sidebar",
      "postTypes": ["post"],
      "title": "Single with Sidebar"
    }
  ]
}

Sekcja templateParts służy do definiowania części szablonów, które mogą być używane szablonach. Każdy szablon może należeć do jednej z trzech części:

• footer
• header
• uncategorized

Dzęki takiemu podziałowi mamy możliwość zarządzania tymi częściami w sposób bardziej granularny i kontekstowy.

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {},
  "styles": {},
  "templateParts": [
    {
      "area": "header",
      "name": "header",
      "title": "Header"
    },
    {
      "area": "footer",
      "name": "footer",
      "title": "Footer"
    },
    {
      "area": "uncategorized",
      "name": "sidebar",
      "title": "Sidebar"
    },
    {
      "area": "uncategorized",
      "name": "post-meta",
      "title": "Post Meta"
    }
  ],
  "customTemplates": []
}

Zarządzanie stylami z poziomu Edytora

O ile zarządzanie sekcjami jak templateParts czy customTemplates ma moim zdaniem sens z poziomu theme.json, o tyle pisanie wszystkich ustawień i stylów z palca może być bardzo czasochłonne – zwłaszcza na początku drogi z tworzeniem motywów blokowych.

Użyj edytora wizualnego do edycji ustawień i stylów

Aby przejść do ustawień globalnych przejdz do Wygląd / Edytor. Następnie wybierz style i jako ostatni krok kliknij w ikonkę ołówka.

Poniższy zrzut ekranu pokazuje jak dostać się do poszczególnych ustawień dla stylów globalnych a także do ustawień dla bloków. Polecam spędzić w tych sekcjach trochę więcej czasu i zobaczyć jakie mamy możliwości przy tworzeniu motywów blokowych. Nie bój się, że coś zepsujesz albo nadpiszes zmiany ponieważ FSE wersjonuje wszystkie nasze zmiany i możemy je przywrócić. Działa to w taki sam sposób jak rewizje w postach czy stronach.

Zapisz swoje zmiany na dysku

Aby zapisać efekt swojej pracy na dysku użyj opcji eksportu, która jest także dostępna z poziomu Edytora. Taki zapisany motyw możesz z powodzeniem przesłać na serwer i uruchomić na swojej stronie. Jeśli tworzysz motywy zawodowo to jak najbardziej taki plik możesz przesłać swojemu klientowi. Instalacja motywu blokowego nie różni się niczym od instalacji klasycznych motywów, więc nie będzie tutaj żadnego zaskoczenia.

Przydatne narzędzia

Na chwilę obecną polecam Ci zapoznać z tymi oto narzędziami. Pozwolą Ci zaoszczędzić sporo czasu i z pewnością usprawnią twój workflow.

Create Block Theme

Pierwszym z nich jest wtyczka od zespłu WordPress.org, która daje takie możliwości jak:

• tworzenie szkieletu motywu blokowego,
• tworzenie motywu potomnego,
• zapisywanie zmian na dysku
• i nie tylko

Wtyczkę możesz pobrać z oficjalnego repozytorium WordPressa.

ThemeGen – Block Theme Generator

Narzędzie to jest aplikacją napisaną w Next.js i udostępnia wizualny edytor dla pliku theme.json. Póki co jest w wersji beta, ale z mojego doświadczenia działa całkiem stabilnie. Jeśli autor doda automatyczne generowanie zmian bez dodatkowego kliku to będzie 🔥.

ThemeGen dostępny jest adresem: https://themegen-preview.vercel.app.

Podsumowanie

• Pamiętaj o tym, że tworzenie motywów blokowych to nie to samo, co tworzenie klasycznych motywów. Na początku skup się na zabawie i poznaniu nowego edytora.
• Edytor blokowy to narzędzie, które pozwala edytować nawigację, strony, szablony i inne elementy strony internetowej. Aby go poznać, zainstaluj i włącz dowolny motyw blokowy, np. Twenty Twenty-Three.
• Tworzenie motywów blokowych wymaga zmiany sposobu myślenia. Zamiast pisać kod, skupiasz się na tworzeniu design systemu, którego następnie używasz aby budować szablony.
• Motywy blokowe są oparte na strukturze plików i katalogów, która jest inna niż w przypadku klasycznych motywów.
• Plik theme.json zawiera wszystkie informacje o Twoim motywie, w tym o blokach, stylach i konfiguracji. Pomocnym narzędzie może okazać ThemeGen.

Tym oto sposobem dotarłeś do końca i wiesz jak zacząć swoją przygodę z tworzeniem motywów blokowych. Dzięki za uwagę. Jeśli coś było nie jasne, albo po prostu chcesz o coś zapytać użyj sekcji komentarze poniżej.

Kolejne wpisy o FSE już niebawem, tymaczasem macham na dobranoc 👋🏻.

1. Motywy oparte o PHP ↩︎

Podobało się? Podziel się z innymi