Tworzenie niestandardowych bloków dla edytora Gutenberg w WordPressie może wydawać się skomplikowane, zwłaszcza dla początkujących deweloperów. W rzeczywistości, z odpowiednimi narzędziami i procesami, jest to zadanie, które można opanować w krótkim czasie. W tym artykule omówimy, jak skonfigurować środowisko do tworzenia bloków Gutenberga, zaczynając od podstaw, aż po stworzenie i uruchomienie pierwszego bloku.

Uruchomienie instancji WordPressa: LocalWP

Zanim przystąpimy do tworzenia bloków, musimy uruchomić lokalną instancję WordPressa. Jednym z najłatwiejszych sposobów na to jest skorzystanie z aplikacji LocalWP. LocalWP to narzędzie, które pozwala szybko i łatwo skonfigurować lokalne środowisko WordPressa na komputerze. Dzięki temu możemy testować nasze bloki bez potrzeby pracy na serwerze produkcyjnym.

Jeśli jeszcze nie masz LocalWP, zalecam zapoznanie się z osobnym tutorialem, który krok po kroku wyjaśnia, jak skonfigurować LocalWP i uruchomić lokalną stronę WordPress.

Instalacja Node.js i NPM

Aby móc tworzyć bloki Gutenberga, musisz zainstalować Node.js oraz NPM (Node Package Manager). Są to niezbędne narzędzia, które umożliwiają instalację oraz zarządzanie paczkami potrzebnymi do rozwoju bloków.

Proces instalacji Node.js i NPM różni się w zależności od systemu operacyjnego:

• Windows: Możesz pobrać instalator z oficjalnej strony Node.js i postępować zgodnie z instrukcjami.
• macOS: Możesz użyć Menedżera Pakietów Homebrew (brew install node).
• Linux: Instalacja może się różnić w zależności od dystrybucji, ale zazwyczaj jest to możliwe za pomocą menedżera pakietów np. apt-get lub yum.

Gdy już zainstalujesz Node.js i NPM, możesz przystąpić do tworzenia bloków.

Tworzenie pierwszego bloku

Kiedy mamy już uruchomioną instancję WordPressa i zainstalowane niezbędne narzędzia, możemy przystąpić do tworzenia naszego pierwszego bloku. W tym celu skorzystamy z paczki @wordpress/create-block, która automatyzuje proces tworzenia podstawowej struktury bloku, generując wszystkie potrzebne pliki i katalogi.

Krok 1: Przejście do katalogu wtyczek

Najpierw musimy przejść do katalogu, w którym przechowywane są wtyczki naszego WordPressa. W przypadku korzystania z LocalWP, można to zrobić za pomocą opcji „Site Shell” lub ręcznie, korzystając z terminala:

cd wp-content/plugins

Krok 2: Uruchomienie skryptu @wordpress/create-block

Następnie, w terminalu, uruchamiamy skrypt, który utworzy nową wtyczkę z blokiem:

npx @wordpress/create-block@latest hello-world

W tym przypadku hello-world to nazwa naszego bloku. System może poprosić o zgodę na instalację paczki npx, wystarczy potwierdzić, naciskając Y, a następnie Enter.

Po kilku minutach proces się zakończy, a w katalogu wp-content/plugins pojawi się nowy katalog hello-world, który będzie zawierał nasz pierwszy blok Gutenberga.

Weryfikacja działania bloku

Teraz, gdy nasz blok został utworzony, czas go przetestować.

Krok 1: Aktywacja wtyczki

Przejdź do panelu WordPressa i otwórz zakładkę „Wtyczki”. Powinieneś zobaczyć nową wtyczkę o nazwie „Hello World”. Kliknij przycisk „Włącz”, aby aktywować wtyczkę.

Krok 2: Dodanie bloku do strony

Przejdź do zakładki „Strony” i utwórz nową stronę. W edytorze Gutenberg kliknij przycisk „+” (dodawanie nowego bloku) i wyszukaj blok „Hello World”. Dodaj go do swojej strony, a następnie zapisz zmiany i przejdź do podglądu strony.

Podsumowanie

Gratulacje! Udało Ci się skonfigurować środowisko do tworzenia bloków Gutenberga, stworzyć pierwszy blok i przetestować jego działanie. W kolejnych krokach możesz rozbudowywać blok „Hello World” o dodatkowe funkcje i możliwości. W poznawaniu Gutenberga może pomóc Ci Block Editor Handbook stworzony przez deweloperów WordPress.

Mam nadzieję, że ten przewodnik był pomocny. Zachęcam do dalszej nauki i eksperymentowania z blokami Gutenberga.

Jeśli w ramach jednego środowiska chciałbyś pracować z większą liczbą bloków Gutenberga, to przeczytaj mój kolejny tutorial: Jak stworzyć jedną wtyczkę dla wielu bloków Gutenberga?