Utwórz niestandardowy blok Gutenberga – Część 1: Konfigurowanie środowiska programistycznego

W pierwszej części tej serii samouczków, jak tworzyć niestandardowe bloki Gutenberga, musimy skonfigurować nasze środowisko programistyczne. Potrzebujemy miejsca, w którym będziemy mogli pisać nasz kod w składniach ES6/ESNext i kompilować go w drodze. Możliwe jest pisanie niestandardowych bloków Gutenberga przy użyciu składni ES5 bez konfigurowania Webpack i Babel. Ale kod będzie naprawdę niewygodny do czytania i pisania. Jeśli nie masz pewności, dlaczego musimy to wszystko zrobić lub na czym polega różnica, przeczytaj mój post wyjaśniający to. Gwarantuję Ci, że gdy wrócisz, przekonasz się, że zrobisz ten dodatkowy krok w celu napisania lepszego kodu.

Zakładam, że masz już lokalny WordPress działający na stosie LAMP lub podobnym. I że piszesz motyw lub wtyczkę. Jeśli chodzi o mnie, umieszczam swój kod w opracowanym przeze mnie motywie awp-starter-theme, znajdującym się w moim folderze motywów WordPress. Chcę oddzielić mój rozwój Gutenberga od wszystkich innych plików motywów, więc tworzę podkatalog gutenberg-devw moim folderze głównym motywu. Będzie to folder mojego projektu i folder, do którego będę się odwoływać w dalszej części serii samouczków.

Napisałem już szczegółowy przewodnik, jak skonfigurować środowisko programistyczne dla Gutenberga, więc szybko przejdę przez te kroki. Jeśli nigdy wcześniej tego nie robiłeś, polecam przeczytać poniższy link, ponieważ zawiera więcej informacji niż to, co znajdziesz tutaj!

Skonfiguruj projekt z webpackiem

Korzystając z terminala (terminal iOS lub cmd systemu Windows, oba działają dobrze) przejdź do folderu projektu (w moim przypadku awp-starter-theme/gutenberg-dev). Inicjujemy nowy projekt, prosząc npm o wygenerowanie package.jsonz ogólną treścią.

Tworzenie pakietu.json

npm init -y

Następnie zainstaluję skrypty WordPressa, które bardzo nam pomogą w konfiguracji za pomocą tego polecenia (które doda podfolder node_modulesi package-lock.jsonrównież):

npm install --save-dev --save-exact @wordpress/scripts

Otwórz package.jsonplik w folderze projektu w edytorze i znajdź scriptswłaściwość. Zastępujemy go dwoma skryptami z właśnie zainstalowanego pakietu WordPress:

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
},

Skrypt „build" skompiluje moje pliki. Ale ponieważ musi być uruchamiany ręcznie za każdym razem, gdy wprowadzana jest zmiana, będziemy raczej używać skryptu „start” podczas tworzenia. Następnie zainicjuje „tryb oglądania”, w którym nasłuchuje do zmian wprowadzonych w dowolnym pliku skryptu i rekompiluje je za każdym razem, gdy zapisujesz zmiany.

Konfiguracja pakietu internetowego

Następnym krokiem jest utworzenie pliku konfiguracyjnego webpacka. Robię to, ponieważ nie chcę używać domyślnych nazw plików źródłowych i wyjściowych oraz folderów. Chcę sam zdecydować, gdzie są moje pliki źródłowe i gdzie powinny trafić skompilowane pliki.

Za pomocą @wordpress/scriptspakietu, który zainstalowaliśmy, możemy odziedziczyć konfigurację webpacka WordPressa i nadpisać tylko te części, które chcemy zmienić.

W naszym folderze projektu utwórz nowy plik o nazwie webpack.config.jsi otwórz go w edytorze. Dodaj tę treść:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
    ...defaultConfig,
    entry: {
        'block-awhitepixel-myfirstblock': './src/block-awhitepixel-myfirstblock.js'
    },
    output: {
        path: path.join(__dirname, '../assets/js'),
        filename: '[name].js'
    }
}

Powoduje to zdefiniowanie mojego pliku wpisu (obecnie tylko jednego) we entrywłaściwości znajdującej się w podfolderze srcw folderze mojego projektu o nazwie block-awhitepixel-myfirstblock.js. Oczywiście nazwij swoje pliki, jak chcesz, ale pamiętaj, aby zmienić zarówno klucz, jak i wartość. Ponieważ we outputwłaściwości proszę webpack o skompilowanie moich plików wpisów z kluczem wpisu jako nazwą pliku. We pathwłaściwości proszę o umieszczenie wszystkich skompilowanych plików jeden krok poza folderem mojego projektu i do assets/jsfolderu motywu. Dostosuj nazwy plików i lokalizację do swojego projektu. Jeśli jesteś zdezorientowany, zapoznaj się z moim szczegółowym przewodnikiem .

Utwórz podfolder src/w folderze projektu i tutaj umieścimy wszystkie pliki źródłowe. (Dostosuj, jeśli zmieniłeś entrylokalizację w webpack.config.js). Utwórz plik block-awhitepixel-myfirstblock.jstutaj i pozostaw go na razie pusty.

Jest jeszcze jeden krok – dotyczy to nas, którzy chcą korzystać z najnowszych funkcji ESNext. Domyślna konfiguracja WordPress Babel niestety tego nie zawiera. A ponieważ chcę używać funkcji takich jak funkcje strzałek, muszę również skonfigurować Babel.

Konfiguracja Babel

Najpierw musimy zainstalować kilka pakietów dla naszej konfiguracji Babel, wpisując to polecenie:

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

Kiedy to zrobisz, utwórz nowy plik .babelrcw naszym folderze projektu. Tutaj umieścimy naszą konfigurację Babel:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        [
            "@babel/plugin-proposal-class-properties"
        ]
    ]
}

I to wszystko w przypadku konfiguracji naszego środowiska programistycznego!

Komendy kompilacji

Podczas programowania będziesz musiał kompilować pliki JavaScript. W naszym package.jsondodaliśmy dwa skrypty właśnie do tego.

Ilekroć chcemy programować w naszych plikach JavaScript, uruchamiamy to w terminalu:

npm run build

To polecenie wykona kompilację za każdym razem, gdy uruchomisz to w terminalu. Spróbuj, a powinieneś zobaczyć, że generuje plik block-awhitepixel-myfirstblock.js(wraz z jednym lub dwoma innymi plikami „zasobów”) w zdefiniowanym folderze wyjściowym, który zdefiniowałeś w webpack.config.js. W moim przypadku pojawia się w awp-starter-theme/assets/js/.

Użycie powyższego polecenia działa dobrze, ale denerwujące jest powtarzanie za każdym razem, gdy wprowadzasz zmiany w plikach. Prawdopodobnie wolisz zamiast tego uruchomić to polecenie:

npm run start

Spowoduje to ustawienie terminala w „trybie zegarka”, wykrywając wszelkie zmiany zapisane w plikach JavaScript i kompilując je w miarę postępu. Za każdym razem, gdy twoje pliki zawierają błędy, terminal wyświetli komunikaty o błędach. Naciśnij CTRL + C, aby zatrzymać proces oglądania.

Jako odniesienie mój folder projektu wygląda teraz jak obraz. Wolę oddzielić wszystkie pliki konfiguracyjne, a zwłaszcza podfolder node_modules/(który zawiera dosłownie dziesiątki tysięcy plików) od reszty mojego kodu motywu. Ułatwia konfigurowanie reguł ignorowania – na przykład kompilatory SCSS lub git ignore. Skonfigurowaliśmy już konfigurację webpacka, aby skompilować ostateczne pliki bezpośrednio awp-starter-theme/assets/js/wraz z innymi plikami JavaScript dla mojego motywu.

Jesteśmy teraz gotowi do następnej części, w której zaczniemy od rejestracji naszego pierwszego niestandardowego bloku.