W wielu wpisach na Akademii Gutenberga pokazujemy jak zacząć zabawę z Gutenbergiem bez własnego środowiska lokalnego. Nie jest to jednak możliwe na dłuższą metę. W pewnym momencie musimy zacząć pisać kod, w sposób jaki robią to profesjonaliści.

Tworząc własne bloki do Gutenberga, większość czasu spędzisz pisząc nowoczesny JavaScript (ES6+). To wiąże się z koniecznością dodatkowego kroku: transpilacji. Kod który będziemy pisać musi być przerobiony na kod ES5, który rozumie przeglądarka.

No dobrze, ale czego właściwie potrzebujesz żeby ta transpilacja była możliwa na twoim komputerze? Tego dowiesz się w tym wpisie.

Wymagania

Tak naprawdę jedynym wymaganiem jest posiadanie zainstalowanego lokalnie Node.js. Sugeruję wersję co najmniej 20 (wersja 20 będzie wymagana do jednego narzędzia, o tym później).

Jeśli nie wiesz co to Node.js, to możesz pomyśleć o Node.js jak o PHP tylko w JavaScript. Bardzo wiele narzędzi do developmentu nowoczesnego JavaScript jest napisana w samym JavaScript i uruchamiana w środowisku Node. Stąd konieczność posiadania Node.js na praktycznie każdym komputerze programisty JavaScript/TypeScript!

Sprawdzisz czy masz zainstalowany Node.js komendą:

W odpowiedzi powinieneś otrzymać zainstalowaną wersję Node.js:

Jeśli nie masz zainstalowanego Node.js, pobierz po prostu instalator ze strony https://nodejs.org/en, zainstaluj, zrestartuj terminal i sprawdź ponownie.

Bardzo przydatnym narzędziem jest również nvm (Node Version Manager), dzięki któremu możemy łatwo zmieniać wersję Node.js. Na początek możesz pominąć instalację nvm, ale w przyszłości pewnie ci się przyda.

I to tak naprawdę tyle!

Inicjalizacja projektu

Załóżmy że tworzymy blok Gutenberga i mamy dostępny Node.js na naszej maszynie.

Po odrobinie czekania powinniśmy otrzymać informację o utworzonej dla nas wtyczce która dodaje nowy blok.

Przejdźmy więc do katalogu z wtyczką:

Gdzie znajduje się wszystko czego potrzebujemy aby zacząć pisać nasz własny blok.

Możemy zacząć nasz development używając komendy:

Od teraz wszystkie zmiany w plikach źródłowych (katalog /src), będą automatycznie wykrywane, transpilowane i wrzucane do katalogu /build.

No dobrze, ale jak to uruchomić, jak zobaczyć to w przeglądarce?

Do tego będziemy potrzebować WordPressa w którym tą wtyczkę po prostu aktywujemy.

WordPress

Tutaj możliwości są dziesiątki. Możesz po prostu zainstalować WordPressa w dowolny sposób w jaki preferujesz a następnie umieścić naszą wtyczkę, czyli katalog moj-pierwszy-blok we folderze wp-content/plugins twojego WordPressa.

Pokażę ci jednak najlepszy sposób na łatwe tworzenie lokalnego WordPressa, który działa na każdym systemie operacyjnym, dla każdego developera, który pracuje nad projektem i jest ściśle z nim powiązany.

WordPress Playground i wp-now

Będąc w katalogu wtyczki (moj-pierwszy-blok) zainstaluj paczkę wp-now. W tym celu uruchom w terminalu komendę:

Utwórzmy blueprint dla WordPress Playground. W tym celu stwórz plik .wp.json w głównym katalogu wtyczki. W pliku dodaj:

{
	"steps": [
		{
			"step": "rmdir",
			"path": "/var/www/html/wp-content/plugins/akismet"
		},
		{
			"step": "rm",
			"path": "/var/www/html/wp-content/plugins/hello.php"
		}
	]
}

Teraz przejdź do kodu i znajdź plik package.json

{
	"name": "moj-pierwszy-blok",
	"version": "0.1.0",
	"description": "Example block scaffolded with Create Block tool.",
	"author": "The WordPress Contributors",
	"license": "GPL-2.0-or-later",
	"main": "build/index.js",
	"scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"plugin-zip": "wp-scripts plugin-zip",
		"start": "wp-scripts start"
	},
	"devDependencies": {
		"@wordpress/scripts": "^26.16.0",
		"@wp-now/wp-now": "^0.1.63"
	}

A następnie zmień skrypt start tak aby uruchamiał też WordPressa razem z transpilacją skryptów (miejsca gdzie są ... pozostają bez zmian).

{
	...
	"scripts": {
		...
		"start": "wp-scripts start & wp-now start --blueprint=.wp.json"
	},
	...
}

Od teraz po uruchomieniu:

Zostanie odpalony watcher z transpilacją JavaScript oraz działający WordPress z już zainstalowaną i aktywowaną wtyczką z naszym blokiem!

Strona będzie dostępna pod adresem:

O czym zostaniesz poinformowany w konsoli.

Lokalny WordPress przy użyciu wp-env

Innym sposobem jest użycie oficjalnej paczki npm @wordpress/env.

Minusem jej jest to że wymaga zainstalowanego Dockera na lokalnej maszynie. Sama instalacja Docker Desktop jest bardzo prosta, ale Docker używa sporo zasobów komputera, w szczególności dysku.

Sposób użycia jest bardzo podobny do WordPress playground.

Zainstaluj paczkę npm:

W pliku package.json w skrypcie start podaj:

{
	...
	"scripts": {
		...
		"start": "wp-scripts start & wp-env start"
	},
	...
}

Główna przewaga wp-env nad Playgroundem (na chwilę obecną), to natywne wsparcie dla chociażby uruchamiania unit testów oraz włączania xdebug.

Inne sposoby instalacji WordPressa

Jeśli nie przeszkadza ci konieczność dopilnowania i ręcznego uruchomienia lokalnej instalacji WP, to możesz używać dowolnej instalacji.

Świetnie sprawdzi się w tym celu LocalWP lub DevKinsta.

Jeśli nie masz nic przeciwko instalowaniu PHP, MySQL i Apache/Nginx na swoim komputerze to możesz po prostu uruchomić WordPressa w ten sposób.

Niektóre firmy przechowują całego WordPressa w repozytorium, lub instalują go jako paczki Composera, ale w tym artykule nie będziemy mówić o takich przypadkach.

Development

Ok, mam już WordPressa, mam Node.js, uruchomiłem npm run start, mam działającą lokalnie stronę oraz transpilację działającą w tle w terminalu. Co dalej?

Właściwie to tyle, czas na ciebie! Wskocz do kodu i zacznij coś zmieniać i sprawdź jak twój blok zostaje zaktualizowany w przeglądarce.

Podsumowanie

Do profesjonalnego developmentu potrzebujesz:

• Zainstalowany lokalnie Node (najlepiej w wersji 20)
• Dowolnie zainstalowany WordPress
  • Uruchomiony jako WordPress Playground przez wp-now lub,
  • Uruchomiony w Dockerze przez wp-env lub,
  • W dowolny sposób (np. LocalWP)
• Podstawowa wiedza z JavaScript, budowania bloków Gutenberg, pomysł na własny blok i chęci!

To tyle, powodzenia!

Podobało się? Podziel się z innymi