Jak pracować z blokami WordPress poza Gutenbergiem za pomocą Node.js

Edytor bloków WordPress zmienia wszystko, co dotyczy tego, jak tworzymy treści za pomocą tej platformy. Jest wiele nowości, które wprowadzają nowe wersje WordPressa w zakresie bloków, a przed nami jeszcze długa droga.

Z tego powodu programiści, którzy pracują z WordPress jako platformą programistyczną, powinni czuć się coraz bardziej komfortowo pracując z blokami. Jednak przejście z PHP na technologie oparte na JavaScript może być trudne.

W każdym razie musisz zaktualizować swoje umiejętności i nie bać się nowego stosu programistycznego WordPress. Im szybciej się z tym pogodzimy, tym więcej będziemy mieli możliwości wprowadzania innowacji.

Dzisiaj zobaczymy, jak możemy pracować z blokami Gutenberga bez konieczności przebywania w edytorze WordPress. Czemu? Z kilku powodów…

Pierwszym i najbardziej oczywistym jest to, że możemy. Od pewnego czasu definicja bloków rdzenia w edytorze Gutenberga jest dostępna jako osobny pakiet kodu. Oznacza to, że możemy z nich korzystać poza WordPressem dzięki menedżerowi pakietów NPM.

Ponadto istnieje cała seria funkcji do zarządzania blokami i pracy z nimi. I są również zawarte we własnym opakowaniu. Dlatego, jeśli chcemy pracować ze standardowymi blokami WordPress, musimy tylko zaimportować te dwa pakiety jako zależności w naszym projekcie.

Aby to osiągnąć, musimy utworzyć folder dla naszego projektu, uruchomić npm init , aby utworzyć plik package.json z danymi projektu, a następnie uruchomić następujące polecenie, aby zainstalować te dwie zależności:

 npm install @wordpress/block-library @wordpress/blocks

Następnym krokiem jest utworzenie index.js z kodem, który chcemy wykonać. Ten kod jest napisany w Node.js, wariancie JavaScript, który działa na serwerach. W dzisiejszym przykładzie zawartość index.js może wyglądać następująco:

 const { registerCoreBlocks } = require( '@wordpress/block-library' ); const { createBlock, serialize } = require( '@wordpress/blocks' ); registerCoreBlocks(); const myBlock = createBlock( 'core/paragraph', { content: 'This is a block created programmatically', } ); const serializedBlock = serialize( myBlock ); console.log( serializedBlock );

Pierwsze dwie instrukcje, które pojawiają się w poprzednim kodzie, są instrukcjami require do zaimportowania zależności. Jak powiedziałem wcześniej, chcemy zaimportować standardową definicję bloku WordPress. Robimy to za pomocą require('@wordpress/block-library') . Ponieważ chcemy tylko zaimportować funkcję registerCoreBlocks z tego pakietu, po lewej stronie symbolu równości dokonujemy destrukturyzacji tej funkcji.

W ten sam sposób importujemy pakiet @wordpress/blocks jako zależność. Ten pakiet to ten, który posiada funkcje do pracy z blokami. W pakiecie zdefiniowano wiele funkcji (masz je tutaj), ale w tym przykładzie chcemy tylko, aby createBlock utworzył nowe bloki i serialize je, aby przekonwertować je na ciągi, które możemy zapisać w treści postu WordPress.

Teraz, gdy mamy zaimportowane zależności, wywołujemy funkcję registerCoreBlocks , która ładuje definicję standardowych typów bloków WordPressa, abyśmy mogli z nich korzystać. Od tego momentu możemy tworzyć bloki, jak widać po wywołaniu funkcji createBlock przekazując jako parametr nazwę typu bloku, który chcemy utworzyć oraz obiekt z jego atrybutami.

W poprzednim przykładzie stworzymy blok akapitu, więc przekazujemy nazwę 'core/paragraph' a wewnątrz obiektu atrybutów przekazujemy treść akapitu, który ma zostać utworzony, jako ciąg znaków wewnątrz klucza content .

Na koniec wywołujemy funkcję serialize , przekazując jej właśnie utworzony blok. W rezultacie otrzymamy ciąg, który możemy wypisać za pomocą funkcji console.log .

Teraz możemy uruchomić powyższy kod wpisując node index.js w terminalu. Jeśli to zrobimy, dzieje się co następuje:

Wystąpił błąd w wykonaniu! Powodem jest to, że musimy mieć dostępną zmienną window , która nie jest zdefiniowana. Ale czym jest ta zmienna i dlaczego jej potrzebujemy?

Window to obiekt JavaScript zdefiniowany przez przeglądarkę i reprezentujący samo okno przeglądarki. Ponieważ wykonujemy kod w naszym terminalu (lub jeśli był uruchomiony produkcyjnie, na serwerze), nie mamy przeglądarki ze wspomnianą zmienną. Czy to oznacza, że ​​nie możemy używać bloków WordPress poza przeglądarką? Oczywiście, że nie!

Node.js ma kilka pakietów, które pozwalają nam symulować, że uruchamiamy nasz kod w środowisku przeglądarki. W tym przypadku użyjemy pakietu browser-env. Po prostu musimy go zainstalować tak jak wcześniej z pakietami WordPress:

 npm install browser-env

W naszym index.js musimy dodać nowe require importu zależności browser-env . Ale także musimy „naprawić” obiekt window , ponieważ nie jest on dostarczany z wymaganą metodą matchMedia . Jeśli skopiujesz poniższy kod i dodasz go na początku index.js , problem zostanie rozwiązany:

 // Setup environment to simulate a browser // (mandatory to register Gutenberg blocks). require( 'browser-env' )(); window.matchMedia = window.matchMedia || function () { return { matches: false, addListener: function () {}, removeListener: function () {}, }; };

Teraz możesz ponownie uruchomić kod, a zobaczysz, że nie zawodzi i zwraca tekstową reprezentację bloku akapitu, który właśnie utworzyliśmy za pomocą funkcji createBlock :

 $ node index.js <!-- wp:paragraph --> <p>This is a block created programmatically</p> <!-- /wp:paragraph -->

Masz cały kod w tym repozytorium GitHub. Możliwości pracy z blokami spoza edytora są ogromne. Możesz tworzyć bloki, klonować je, przekształcać w blok innego typu i wiele więcej.

Możliwość pracy z blokami poza edytorem WordPress pozwala nam manipulować zawartością naszego WordPressa i pracować z nimi z dowolnego miejsca. To otwiera przed programistami świat ogromnych możliwości, które dopiero zaczynamy odkrywać.

My w Nelio już korzystamy z tych możliwości. Wkrótce uruchomimy nową usługę, która, miejmy nadzieję, uznasz za bardzo interesującą. Czekajcie na wiadomości, które wydamy w nadchodzących tygodniach?.

Polecane zdjęcie Kelly Sikkema na Unsplash .