Pandify - porady jak projektować strony internetowe, darmowe materiały, liczne inspiracje web design.

Przepis na wygodne tworzenie bloków Gutenberg – ACF Blocks i Timber

Artykuł pojawił się 31.10.2018, autorem jest Maciek Palmowski i wpadł do kategorii WordPress

Gutenberg od samego początku nie spotkał się z ciepłym przyjęciem. Zarzutów wobec niego jest wiele – od zastosowanych technologii, poprzez sposób zapisu, o kwestiach związanych z dostępnością kończąc. Sam, mimo kilku podejść, zbytnim fanem nie zostałem.

8 września pojawiła się iskierka nadziei – ACF Blocks

Zapewne większa cześć czytelników się orientuje, ale proces tworzenia nowych bloków w Gutenbergu jest dość… karkołomny. Szczególnie jeśli porównamy to z obecnym procesem tworzenia motywów. Główną różnicą jest przerzucenie się na Reacta (można pisać również w czystym Javascript, ale nie jest to wygodne).

Na szczęście 8 września na blogu ACF pojawił się artykuł informujący o tym, że pracują nad acf_block. Miesiąc później świat ujrzała wersja 5.8.0.beta1. I nagle zaświeciło słońce, a ptaki zaćwierkały.

Co to jest ten acf_block?

To nic innego jak naprawdę łatwy i przyjemny sposób tworzenie bloków. Znowu posłużę się przykładami z zewnątrz.

Smashing Magazine opublikował artykuł jak stworzyć blok “Testimonial” – jest to naprawdę bardzo dobry artykuł, ale pokazuje ile pracy trzeba włożyć w przygotowanie tak prostego bloku.

Dla porównania za pomocą acf_block można to zrobić o wiele szybciej.

Różnica jest kolosalna. Oczywiście będą przypadki, gdzie rozwiązanie od ACF będzie zbyt ograniczone, ale myślę, że w 90% przypadków będzie odpowiednim narzędziem.

A jak to zintegrować z Timberem?

Przejdźmy teraz do meritum – bo Eric Karkovack już pokazał jak użyć acf_block w tradycyjny sposób, a ja chciałbym pokazać jak użyć go z Timberem. Zrobimy to na bazie “Testimonial”.

Czemu? Z dwóch powodów:

– jeżeli używacie już Timbera, to będzie to naturalna kolej rzeczy (a jak nie używacie, to zobaczcie czemu warto zacząć)
– kod będzie o wiele bardziej czytelny

Nim zaczniemy upewnijcie się, że macie zainstalowane:

  • Timbera (plugin albo z Composera)
  • Gutenberga
  • ACF w wersji minimum 5.8.0.beta1

Zacznijmy od zdefiniowania bloku poprzez dodanie do functions.php następującego kodu

Następnie definiujemy pola a ACF:

  • Avatar – obrazek – trzymamy go zapisanego jako ID
  • Author – text
  • Testimonial – textarea
  • Background color – colorpicker
  • Font Color – colorpicker

i ustawiamy żeby pokazały się w zdefiniowanym wcześniej bloku.

Teraz stworzymy funkcję, która będzie odpowiadać za renderowanie bloku – dopisujemy więc w functions.php:

W tym kroku tworzymy zmienną $vars do której wrzucamy wszystkie informacje związane z blokiem ($vars['blocks']) oraz wszystkie stworzone przez nas zmienne zmienne ($vars['fields']).

Pozostaje nam stworzyć plik content-testimonial.twig:

Jest to raczej dość oczywisty plik – po prostu wyświetlamy zmienne w odpowiednich miejscach.

Wnioski

Dzięki acf_blocks Gutenberg staje się w końcu tym czym powinien być na początku. Na pewno troszkę teraz z Agą poeksperymentujemy i zobaczy co można z Gutenberga wycisnąć. Może nawet ostatecznie się przekonamy i przepiszemy Pandify.pl aby używać ACF Blocks na co dzień. 🙂

Maciek Palmowski

Jestem programistą - hobbystycznie i zawodowo (pracuję w OsomStudio). Kiedy jednak odejdę od klawiatury jeżdżę na rowerze, biegam albo gram w gry.

Bądź na bieżąco!

Jeżeli chcesz otrzymywać informacje o najnowszych wpisach na blogu Pandify.pl zapisz się do naszego newslettera za pomocą poniższego formularza. Obiecujemy nie wysyłać nic więcej.