WordPress 5.9 – nowości w edytorze blokowym

W zeszłym tygodniu doczekaliśmy się nowego wydania WordPressa – wersji 5.9. Czeka nas tu spora rewolucja, ale tylko gdy użyjemy motywu nowego typu, tzw. blokowego. WordPress 5.9 wprowadził bowiem do kokpitu kolejny ekran oparty o edytor blokowy, w którym możemy teraz edytować całą stronę.

Pierwszą rzeczą, która rzuca się w oczy w Kokpicie po zainstalowaniu WordPressa 5.9 z motywem Twenty Twenty-Two jest zakładka Wygląd. Zniknęły z niej ekrany Widżetów, Menu, Dostosuj (Customizer) oraz Edytora plików motywu! Pojawiła się w zamian nowa zakładka – Edytor – na razie oznaczona etykietą beta.

Pod zakładką Edytor kryje się edytor całej strony, po angielsku określany jako Full Site Editing. W edytorze możemy personalizować poszczególne szablony motywu np. szablon strony, wpisu, bloga, wyników wyszukiwania, strony 404. Możemy tu także edytować wygląd nagłówka i stopki.

Edytor jest w miarę prosty w obsłudze i naprawdę działa! Musieliśmy na niego poczekać 3 lata od momentu gdy edytor blokowy stał się częścią WordPressa, ale w końcu jest! Mimo, że jest to wersja beta i trafiłam po drodze na kilka niedoskonałości, na horyzoncie widać już efekt końcowy.

Motywy blokowe (block themes) – nowy sposób tworzenia motywów

Edytor całej strony (Full Site Editing) w pełni działa tylko z motywem blokowym. Motywów tych jest na razie bardzo mało, ale spodziewam się, że w najbliższych miesiącach pojawi się w repozytorium wiele nowych. Motywy blokowe można bowiem… wyklikać z bloków!

Jeśli chcielibyśmy spróbować swoich sił w tworzeniu motywu blokowego to najprościej jest zacząć od przeczytania oficjalnej dokumentacji Create a block theme oraz od przejrzenia kodu źródłowego motywu Twenty Twenty-Two, który jest pierwszym domyślnym motywem zbudowanym w całości z bloków.

W motywie blokowym szablony poszczególnych widoków WordPressa zbudowane są wyłącznie z kodu HTML i specyficznych “shortcodów” w postaci komentarzy HTML. W tych komentarzach zaszyta jest konfiguracja bloku, którą użytkownik ustawił w edytorze.

Przykład takiego “shortcodu”, który dynamicznie wygeneruje obrazek wyróżniający wpisu:

<!-- wp:post-featured-image {"isLink":true,"align":"wide","style":{"spacing":{"margin":{"top":"calc(1.75 * var(--wp--style--block-gap))"}}}} /-->

Jest to duża zmiana dla kogoś, kto do tej pory tworzył klasyczne motywy dla WordPressa. Przede wszystkim, do stworzenia templatek strony nie używamy tu języka PHP. Moim zdaniem to duża zaleta.

Twórca motywu, przeważnie frontendowiec, zostaje zwolniony z konieczności poznania języka PHP. Nie musi się teraz zastanawiać czy poprawnie użył danej funkcji PHP, nie musi się martwić o sprawdzanie czy dane pole zostało przez użytkownika wypełnione czy jest puste, nie musi samodzielnie tworzyć pętli. To wszystko jest teraz ukryte pod “shortcodami” i to inżynierowie tworzący WordPressa zadbali o bezpieczeństwo wyświetlanych danych, sprawdzanie warunków czy poprawne skonstruowanie pętli zapytania.

Twórca motywu może się teraz skupić tworzeniu poprawnej struktury HTML oraz na magii CSSa, którym można dowolnie modyfikować wygląd poszczególnych elementów strony (bloków).

No a dodatkowo, znacznie więcej osób może teraz tworzyć własne motywy, gdyż próg wejścia się tu mocno obniżył, przez to, że nie trzeba się znać na programowaniu. I to jest jak najbardziej OK. W końcu WordPress to najpopularniejsze na świecie narzędzie no-code do tworzenia stron internetowych.

Edytor całej strony – Full Site Editing

Przyjrzyjmy się teraz jak działa edytor strony i jak zmienić wygląd wybranej templatki.

Po wejściu w Wygląd -> Edytor ujrzymy interfejs edytora blokowego. Po kliknięciu na logo WordPressa, które znajduje się w lewym górnym rogu, otworzy się panel z dostępnymi do edycji szablonami, znanymi nam już z hierarchii templatek.

Weźmy dla przykładu szablon pojedynczej strony – Strona. Tu największym problemem był zawsze tytuł strony, który wyświetlał się powyżej bloków. Często u góry strony chcielibyśmy zastosować tzw. hero section/ hero image – duże zdjęcie w tle na całą szerokość ekranu, na którym umieszczony jest np. tytuł strony.

No i teraz możemy w edytorze przerobić sobie templatkę tak, aby tytuły podstron wyświetlały się na takim hero. Wystarczy dodać blok Okładka i wstawić do niego blok Tytuł strony. Dzięki temu na każdej podstronie będzie się wyświetlać tytuł tej konkretnej strony.

W kolejnym wydaniu WordPressa pojawi się także możliwość ustawiania obrazka wyróżniającego jako obraz w bloku Okladka. Na chwilę obecną musimy ustawić statyczny obrazek, który będzie się wyświetlać na wszystkich podstronach.

Poniżej ustawionej przed chwilą Okładki widzimy blok Treść wpisu. W jego miejsce podstawi się treść danej podstrony – utworzonej oczywiście też za pomocą bloków.

Nawigacja – WordPress 5.9

Kolejnym elementem WordPressa, który doczekał się całkowitej przemiany jest menu/ nawigacja strony. Menu możemy teraz edytować za pomocą bloku Nawigacja. Jest to o wiele bardziej intuicyjne niż stary interfejs, gdyż menu edytujemy teraz bezpośrednio w rzeczywistym podglądzie strony.

Udało mi się nawet dodać ikonę do elementu menu, bez używania dodatkowych wtyczek. Na chwilę obecną do menu możemy wstawić, oprócz tradycyjnego linku, jeszcze ikony mediów społecznościowych, wyszukiwarkę oraz logo witryny. Dzięki temu można np. stworzyć nagłówek z wyśrodkowanym logotypem.

Zespół pracujący nad rozwojem edytora eksploruje także opcję dodawania obrazków i innych elementów treści do nawigacji, aby można było tworzyć bardziej złożone układy nawigacji np. mega menu. Mam nadzieję, że to się uda zaimplementować do edytora. Taka opcja byłaby z pewnością bardzo przydatna.

Edycja nagłówka i stopki – WordPress 5.9

Poza samym menu, w edytorze możemy także edytować cały nagłówek oraz stopkę. Możemy dodawać, usuwać bloki, tworzyć układy kolumnowe, a także dostosować style (np. zmienić kolor tła).

Działa to całkiem dobrze, w ciągu kilku minut byłam w stanie zmienić wygląd stopki.

Edycja stylów i theme.json – WordPress 5.9

W WordPressie 5.9 pojawił się także edytor stylów, który jest częścią edytora strony. Edytor stylów jest wizualną nakładką na plik theme.json, w którym możemy skonfigurować domyślne ustawienia edytora blokowego oraz style bloków.

Samego pliku theme.json możemy używać w zarówno w klasycznych, jak i blokowych motywach. Natomiast wizualny edytor stylów działa tylko z motywem blokowym.

"theme.json"
{
  "version": 2,
  "settings": {
    "appearanceTools": true,   
    "color": {
      "palette": [
	{
	"slug": "foreground",
        "color": "#000000",
        "name": "Foreground"
	},
	{		
        "slug": "background",
        "color": "#ffffff",	 
        "name": "Background"
	},
        "itd..."
      ]
    }
  }
}

Możliwość ustawiania stylów dla edytora blokowego za pomocą pliku theme.json jest, moim zdaniem, najważniejszym krokiem w rozwoju Gutenberga.

Problem z edytorem blokowym polegał na tym, że cały ciężar dostosowania stylów edytora spoczywał na barkach twórcy motywu. Po pierwsze, trzeba było przygotować osobne style na frontend i osobne dla edytora blokowego. Trzeba było przewidzieć wszystkie zmienne stylów, które mogą zostać wygenerowane przez użytkownika – np. gdy zmieni tło z jasnego na ciemne. Ogromne problemy sprawiał też tzw. spacing – a szczególnie pionowe odstępy między blokami, paddingi w poszczególnych sekcjach itp. Na dodatek, twórca motywu musiał też zadbać o to, aby bloki w wp-adminie i odpowiadający im HTML na frontendzie wyświetlały się identycznie, tak aby edytowanie strony w kokpicie sprawiało wrażenie jakby się edytowało tą stronę na frontendzie.

Tak naprawdę, to od twórcy motywu zależało czy z edytora blokowego dało się jakoś sensownie korzystać. Niestety, zdecydowana większość motywów z repozytorium WordPressa nie posiada poprawnie zaimplementowanych stylów dla edytora. Dobrze to widać na poniższym przykładzie, nawet motyw, który nazywa się Gutener sobie z tym nie radzi.

WordPress 5.9 wprowadził na tym polu sporo pozytywnych zmian. Domyślne style skonfigurujemy teraz w pliku theme.json, z którego zostanie wygenerowany odpowiedni CSS. Kod CSS zostanie załączony zarówno do edytora, jak i na frontend. Dzięki temu twórca motywu może teraz w łatwy sposób spersonalizować style edytora, a style bloków “same się zsynchronizują” między wp-adminem a frontendem.

Teoretycznie da się dzisiaj stworzyć motyw blokowy zawierający zaledwie kilka linijek kodu PHP (odpowiedzialnych głównie za załączenie styli i fontów), kilka plików HTML wygenerowanych bezpośrednio w edytorze, skopiowanych i wklejonych do motywu, oraz pliku theme.json zawierającego m.in. deklarację styli. Dodatkowo nie ma też żadnych przeszkód aby kod HTML wygenerowany z edytora dowolnie ostylować za pomocą CSSa czy SCSSa.

Tworzenie motywów dla edytora blokowego zostało teraz przeogromnie uproszczone. W kolejnym wydaniu WordPressa czeka nas jeszcze kilka ulepszeń tego systemu.

WordPress 5.9 – Podsumowanie

Powoli zmierzamy do zakończenia fazy II wdrożenia nowego doświadczenia edycji strony za pomocą bloków w WordPressie. Jako power user edytora, jestem pod wrażeniem jak długą drogę przeszedł w ciągu ostatnich 3 lat. Myślę, że gdyby edytor został wdrożony do WordPressa w stanie dzisiejszym, a nie w stanie WordPress 5.0, to byłoby znacznie mniej kontrowersji wokół tej zmiany i na pewno znacznie mniej niechęci.

Najbardziej podoba mi się to, że sposób edycji wszystkich elementów strony został ujednolicony. Ja już dawno przyzwyczaiłam się do edytora blokowego, więc gdy pierwszy raz usiadłam do edycji menu czy templatek w nowym edytorze całej strony, to zajęło mi zaledwie kilka minut żeby wstępnie zorientować się w nowym sposobie edycji tych elementów.

Podoba mi się również to, że wiele działań, do których wcześniej potrzebowaliśmy wtyczki, można teraz wykonać w samym edytorze. Pozwala to wyeliminować część wtyczek z naszego WordPressa. A to duży plus, choćby z punktu widzenia bezpieczeństwa strony czy późniejszego jej utrzymania.

Bardzo podoba mi się też, że do tworzenia motywów nie trzeba używać języka PHP, mimo że komentarze w kodzie HTML wygenerowanym z edytora wyglądają może, na pierwszy rzut oka, trochę dziwnie. Jednak, moim zdaniem, stosowanie samego tylko języka HTML może przyczynić się do poprawy bezpieczeństwa stron. Nie ma co się bowiem oszukiwać, sporo kodu w motywach dodawane jest na tzw. „pałę” – skopiowane z czeluści internetu i wklejone bez żadnej weryfikacji. I to nie tylko przez amatorów, którzy lubią sobie podłubać w kodzie strony, bo w agencjach kodujących strony na zamówienie też to wcale nie jest taką rzadką praktyką. Tutaj kod HTML kopiujemy bezpośrednio z edytora, co na pewno jest to znacznie lepszą opcją niż kopiowanie kodu z przypadkowych tutoriali. Muszę przyznać, że przemawia to do mnie.

Ciekawe będzie teraz obserwować repozytorium motywów WordPressa. Spodziewam się tutaj, w kolejnych miesiącach, wysypu nowych motywów blokowych. Na pewno jest to świetny moment na wejście ze swoim motywem do repozytorium. Dziś już wiadomo czego ludzie oczekują od motywu – gotowych i dobrej jakości demo stron, z możliwością dostosowania do swojej marki. W WordPressie 5.9 można taki motyw bez problemu ludziom zaoferować, wykorzystując potencjał edytora całej strony i stylów – czyli generalnie edytora blokowego. Moim zdaniem, warto z tym poeksperymentować i wejść na rynek na wczesnym etapie, kiedy konkurencja jeszcze praktycznie nie istnieje.

A jak tam Wasze doświadczenia z edytorem całej strony? Próbowaliście już stworzyć motyw w nowy sposób? Ciekawa też jestem czy myślicie o edytorze bardziej w kontekście nowych możliwości czy raczej zagrożenia. Dajcie znać w komentarzu.