Przegląd skryptu tworzenia bloku WordPress

Oficjalny zespół edytora WordPress (Gutenberg) udostępnił zgrabny mały skrypt, dzięki któremu możesz utworzyć wtyczkę blokową za pomocą ich @wordpress/create-blockskryptu npm.

Ten artykuł zawiera omówienie skryptu tworzenia bloku WordPress wraz ze szczegółami jego wyników.

UWAGA: ten artykuł dotyczy starszej wersji skryptu tworzenia bloku

Chociaż teorię można nadal zastosować, niektóre informacje zawarte w tym artykule mogą nie być już zgodne z najnowszym skryptem tworzenia bloku. Tutaj możesz zapoznać się z naszym zaktualizowanym przewodnikiem tworzenia skryptów blokowych.

Uruchamianie skryptu tworzenia bloku

Oficjalna dokumentacja podaje kilka różnych parametrów do przekazania do npm init @wordpress/blockpolecenia.

W mojej konfiguracji uruchomiłem go w trybie interaktywnym, pomijając parametry. Wprowadziłem następujące polecenie do mojego terminala (podczas gdy cded w moim wp-content/pluginsfolderze):

npm init @wordpress/block

Skrypt zadał mi kilka pytań, aby pomóc mi zbudować mój blok.

Chcąc stworzyć blok startowy dla pomysłu wtyczki, który mam („Wholesome Notes"), odpowiedziałem na następujące pytania:

• Ślimak bloku używany do identyfikacji (także nazwa wtyczki i folderu wyjściowego): Chcę, aby mój blok nazywał się Wholesome Notes, więc wprowadziłem wholesome-notes.

• Wewnętrzna przestrzeń nazw dla nazwy bloku (coś unikalnego dla Twoich produktów): Ponieważ powinna być unikalna dla wszystkich moich produktów, które wprowadziłem wholesome-code, ponieważ jest to nazwa mojej firmy. Z perspektywy czasu byłoby to lepiej skrócić do wclub wcltd.

• Wyświetlany tytuł Twojego bloku: wpisałem tytuł wtyczki, Wholesome Notes.

• Przegląd skryptu tworzenia bloku WordPressa Nie byłem w 100% pewien, co chcę tutaj napisać, więc właśnie wprowadziłem tekst, który zamierzam zmienić później.

• Dashicon ułatwiający identyfikację bloku (opcjonalnie): Szybko przywołując zasób Dashicons WordPress, wybrałem admin-comments, ponieważ ma ikonę stylu notatki.

• Nazwa kategorii ułatwiająca użytkownikom przeglądanie i odkrywanie Twojego bloku (użyj klawiszy strzałek): Wybrałem layout, chociaż szczerze mówiąc ten typ bloku prawdopodobnie potrzebowałby własnej kategorii. To coś, co mogę później zmienić.

Działanienpm init @wordpress/block

Skrypt następnie przeszedł do przodu i zainstalował wszystkie potrzebne zależności za pośrednictwem npm (w tym momencie po prostu instaluje wp-scriptspakiet npm jako zależność).

Sprawdzanie wyjścia

Dzięki powyższym poleceniom skrypt WordPress Create Block Script daje następujące dane wyjściowe:

• zdrowe-notatki
  • budować
    • index.asset.php
    • index.js
    • index.js.map
  • node_modules
  • src
    • index.js
  • .editorconfig
  • .gitignore
  • edytor.css
  • pakiet.json
  • styl.css
  • zdrowe-notatki.php

@wordpress /wyjście bloku

Poniżej znajduje się podział każdego z tych plików i folderów.

wholesome-notes

To jest folder główny wtyczki, ma taką samą nazwę jak ta, którą wpisałem dla "slug" w pytaniach konfiguracyjnych.

/build

To jest folder kompilacji. Zawiera wszystkie zasoby JavaScript i PHP wygenerowane z /srcfolderu. Są one umieszczane w kolejce poprzez główny wholesome-notes.phpplik programu ładującego.

/build/index.assets.php

Ten plik PHP jest generowany automatycznie podczas /srckompilacji folderu. Zawiera tablicę wszystkich przyzwoitości JavaScript edytora WordPress (Gutenberg) używanych przez twoją wtyczkę. Jest umieszczany w kolejce poprzez główny wholesome-notes.phpplik programu ładującego.

/build/index.js

Jest to główny skompilowany plik JavaScript, który jest umieszczany w kolejce poprzez główny wholesome-notes.phpplik programu ładującego.

/build/index.js.map

Ten plik jest generowany tylko wtedy, gdy kompilujesz zasoby do trybu programistycznego (tzn. uruchamiasz, npm starta nie npm run buildkompilujesz zasoby. Jest to plik pomocny dla debugerów JavaScript, który pomaga zidentyfikować nazwy plików i numery wierszy w przypadku wystąpienia błędów.

/node_modules

Jest to folder, w którym zainstalowane są wszystkie zależności JavaScript dla Twojej wtyczki.

/src

To jest folder, który zawiera wszystkie nieskompilowane zasoby Twojej wtyczki.

/src/index.js

To jest główny nieskompilowany plik JavaScript dla bloku edytora WordPress (Gutenberg). Początkowo zawiera całą logikę bloku.

/.editorconfig

Ten plik zawiera przydatne ustawienia wstępne dla IDE (zintegrowanego środowiska programistycznego), takie jak Visual Studio Code.

/.gitignore

Ten plik mówi git, aby ignorował niektóre pliki, gdy zatwierdzasz do repozytorium git (takiego jak GitHub).

/editor.css

Style w tym pliku są wyprowadzane tylko w edytorze, są umieszczane w kolejce poprzez główny wholesome-notes.phpplik ładujący.

/package.json

Ten plik zawiera wszystkie zależności npm dla wtyczki oraz polecenia, które można uruchomić. Zauważ, że wtyczka wykorzystuje wp-scripts( @wordpress/scripts) jako swoją podstawę, więc początkowo ładowane zależności dotyczą tego pakietu.

/style.css

Style w tym pliku są wyświetlane w edytorze, a na interfejsie witryny są umieszczane w kolejce za pośrednictwem głównego wholesome-notes.phppliku ładującego.

/wholesome-notes.php

To jest główny plik ładujący wtyczki. Jego nazwa została ustawiona poprzez „slug”, który wprowadziliśmy w początkowym skrypcie instalacyjnym. Umieszcza w kolejce wszystkie zasoby JavaScript potrzebne do wtyczki.

Eksploracja wtyczki

Po utworzeniu wtyczki, jeśli ją aktywujesz i wstawisz do edytora, będzie wyglądać jak poniższe zrzuty ekranu (frontend i backend).

Utwórz skrypt blokowy – domyślny interfejs

Utwórz skrypt blokowy – domyślny back-end

Jak widać, blok dostarcza nam podstawowych danych wyjściowych, które możemy łatwo zmienić, aby zaimplementować nasz własny blok.

Blokuj CSS

Jak widać na zrzutach ekranu, przykładowy kod w editor.cssimplementuje czerwoną granicę w edytorze, podczas gdy przykładowe style w styles.csssą stosowane zarówno do frontonu, jak i do backendu.

Blokuj JavaScript

Punktem wejścia do dostosowania nowo utworzonego bloku jest /src/index.jsplik.

W tym pliku znajduje się mnóstwo dokumentacji wbudowanej, wyjaśniającej, dlaczego niektóre funkcje są importowane, takie jak registerBlockTyperejestracja bloku i __obsługa tłumaczenia tekstu i18n.

Utwórz blok index.js Komentarze w wierszu

Daje również bardzo podstawowe dane wyjściowe dla funkcji editi save, które są przekazywane do rejestracji bloku.

Uwaga: w późniejszych wersjach skryptu zostały one wyodrębnione do własnych plików i dołączone jako moduły w tym pliku.

Utwórz blok index.js Edytuj i zapisz

Budowanie bloku

Zgodnie z dokumentacją create block npm, możesz użyć kilku poleceń w swoim terminalu (z folderu głównego wtyczki), aby wykonywać takie czynności, jak sprawdzanie jakości kodu lub aktualizowanie pakietów.

Główne polecenia, których będziesz potrzebować do zbudowania bloku, to npm startskompilowanie wtyczki do rozwoju i npm run buildskompilowanie ostatecznej wersji.

wp-scripts(z @wordpress/scriptspakietu npm) jest główną zależnością dla twojej wtyczki. Ta zależność abstrahuje od wszystkich narzędzi dla twojego bloku, więc możesz po prostu skupić się na tworzeniu kodu JavaScript.

Za kulisami wp-scriptsużywa webpackdo kompilacji wszystkich zasobów do /build/index.jspliku.

Więcej informacji wp-scriptsna ten temat można znaleźć w Podręczniku edytora bloków, a więcej informacji na temat konfiguracji kompilacji pakietu internetowego można znaleźć w sekcji Podręcznika „Konfiguracja kompilacji JavaScript”.

Rozszerzanie konfiguracji pakietu internetowego Utwórz blok

Baza kodu Twojego bloku może obejmować wiele plików, a nawet mieć wiele podbloków lub zawierać złożone style. W takich sytuacjach możesz chcieć rozszerzyć konfigurację pakietu webpack, która jest wbudowana w program wp-scripts.

Aby uzyskać więcej informacji, zobacz mój artykuł na temat rozszerzania wp-scriptskonfiguracji pakietu internetowego lub zapoznaj się z sekcją Skrypty pakietów w podręczniku Block Editor, aby uzyskać wskazówki.