Od początku istnienia Gutenberga mamy możliwość wyboru między dwoma typami bloków: statycznymi i dynamicznymi.

Jedyna różnica między nimi to sposób w jaki renderują one treść na froncie strony (poza edytorem).

Jak zawsze, bez dalszego wstępu wyjaśnimy na przykładach jak działają oba typy bloków oraz kiedy używać danego z nich.

Bloki statyczne

Blok statyczny to taki blok w którym raz zapisana treść nie zmienia się między kolejnymi wyświetleniami bloku dopóki ta treść nie zostanie ponownie zmieniona w edytorze przez użytkownika. Innymi słowy w bloku statycznym jego cała treść jest znana od razu w momencie zapisania wpisu.

Przykładem takiego bloku jest np. blok „Akapit”.

Po zapisaniu takiego wpisu, treść bloku Akapit nie zostanie zmieniona dopóki ktoś jej nie zmieni w edytorze i nie zapisze ponownie wpisu. Dlatego nazywany go statycznym.

Bloki statyczne są w całości napisane w JavaScripcie. Za zapisywanie treści wpisu jest odpowiedzialna funkcja save() bloku. Więcej o tworzeniu własnego bloku tylko w JavaScripcie znajdziesz w tym wpisie.

<!-- wp:paragraph -->
<p>Akapit czyli blok statyczny!</p>
<!-- /wp:paragraph -->

Te śmieszne komentarze HTML określają początek i koniec bloku, a wszystko co wewnątrz nich to treść. Tak naprawdę nie musisz znać tej składni bo w większości przypadków generowaniem tego kodu zajmuje się sam Gutenberg.

Walidacja bloków statycznych

Jeśli próbowałeś stworzyć już własny statyczny blok do Gutenberga to pewnie natrafiłeś na błędy związane z walidacją bloku.

Zazwyczaj wygląda to tak:

• Tworzysz blok który zawiera daną strukturę w HTML
• Wstawiasz blok do edytora, wszystko działa
• Zmieniasz strukturę HTML (np. dodajesz nową klasę do elementu)
• Wracasz do edytora, odświeżasz stronę i widzisz błąd walidacji

W takiej sytuacji zostaniesz poproszony o próbę naprawienia bloku. Czasem się to uda, czasem nie.

Dzieje się tak ponieważ bloki statyczne, jak sama nazwa wskazuje nie mogę zmieniać swojej formy pomiędzy renderami. Gutenberg jest bardzo rygorystyczny jeśli chodzi o przestrzeganie tej zasady.

Funkcja save() oraz treść zapisana w treści wpisu są ze sobą ściśle powiązane. Gdy WordPress odczytuje treść wpisu, próbuje zrozumieć jakie bloki w niej się znajdują porównując je z tym co dany blok próbuje wyrenderować. Każde zmiany powodują że edytor nie będzie zadowolony!

Bloki statyczne raczej są aktualizowane rzadko, a jeśli już musimy to zrobić to powinniśmy używać deprecation API. Dzięki niemu możemy definiować poprzednie wersje metody save(). Jako alternatywę można również utworzyć nowy blok.

Bloki dynamiczne

Bloki dynamiczne to odwrotność bloków statycznych. Ich treść może zmieniać się między wyświetleniami bez konieczności ponownego zapisania wpisu w edytorze. Blok dynamiczny może odwoływać się do bazy danych, innej części strony, zewnętrznych zasobów itd. Treść bloku dynamicznego jest generowane po stronie serwera, czyli napisana jest w PHP.

Przykładem takiego bloku jest „Nazwa witryny”.

Nazwa witryny to wartość pobierana bezpośrednio z bazy danych. Nie ustawiamy jej jako treść. Ona jest zaciągana za każdym razem kiedy dany blok ma zostać wyświetlony. Dynamicznie.

Jeśli zmienimy nazwę witryny w późniejszym czasie, to nie musimy znajdować wszystkich wpisów w których użyliśmy tego bloku ponieważ ta wartość i tak jest generowana dynamicznie.

<!-- wp:site-title /-->

Jak widzisz w treści wpisu zostanie zachowany jedynie prosty samozamykający się komentarz HTML informujący stronę aby wygenerowała treść bloku site-title. Samym generowaniem zajmuje się odpowiedni plik PHP skonfigurowany przez sam blok.

Brak walidacji treści bloku

Jako że blok za każdym razem może wyglądać inaczej nie uświadczymy tu podobnych problemów jak w przypadku bloków statycznych.

Którego typu bloki powinieneś używać i tworzyć?

Przy tworzeniu własnych bloków będziesz często musiał podjąć decyzję jaki blok utworzyć: statyczny czy dynamiczny?

Często już same wymagania co do bloku sprawią że nie będziesz miał wyboru. Jeśli potrzebujesz wyciągnąć dane z innej części strony, wybrać je z bazy danych, zaciągnąć z API, to będziesz na pewno potrzebował bloku dynamicznego.

Jeśli jednak wiesz że wprowadzona treść pozostanie taka sama od momentu zapisu strony, wtedy nadal masz wybór, możesz użyć zarówno bloku dynamicznego jak i statycznego.

Zalety bloku statycznego

Bloki statyczne są ogólnie prostsze same w sobie ponieważ są napisane w jednym języku. Nie wymagają działania serwera do utworzenia markupu i treści. Są przewidywalne oraz bardziej wydajne bo są zapisane bezpośrednio w treści wpisu.

Dodatkowo bloki statyczne mogą zostać użyte do stworzenia „Block Plugin”, czyli wtyczki z blokiem która integruje się bezpośrednio z inserterem w Gutenbergu i pozwala na dodanie bloków bez manualnej instalacji wtyczki.

Zalety bloku dynamicznego

Zawartość i markup takiego bloku będzie się zmieniał. Dlatego właśnie nie jest on zapisywany do bazy danych w treści wpisu. Rezultatem tego jest brak problemów z walidacją bloku w edytorze, nawet jeśli zmienimy markup bloku.

Bloki dynamiczne dają większe możliwości niż bloki statyczne i czasem są jedyną opcją na stworzenie danego bloku.

Niektóre wtyczki wykorzystują bloki dynamiczne aby integrować się z kodem pisanym w PHP do Gutenberga (np. ACF).

Podsumowanie

Bloki statyczne mogą się wydawać irytujące, w szczególności na początku dla developerów PHP oraz developerów motywów klasycznych. Mimo to posiadają one wiele zalet. Wydaje się że z czasem będziemy widzieć coraz więcej bloków statycznych.

Bloki dynamiczne rozwiązują wiele problemów bloków statycznych oraz dają możliwości, które w blokach statycznych są niewykonalne. Przypadną one również wszystkim którzy są przyzwyczajeni do pisania w PHP i nie mają problemu z tym że każdy blok jest generowany po stronie serwera.

Koniec końców decyzja zawsze należy do ciebie. Który blok wybierzesz?

Podobało się? Podziel się z innymi