如何使用 Node.js 在 Gutenberg 之外使用 WordPress 塊

WordPress 塊編輯器正在改變與我們如何使用該平台創建內容相關的一切。 WordPress的新版本帶來了許多關於塊的新奇事物，未來還有很長的路要走。

出於這個原因，使用 WordPress 作為開發平台的開發人員應該對使用塊感到越來越舒服。 然而，從 PHP 到基於 JavaScript 的技術的飛躍可能很困難。

無論如何，你必須更新你的技能，不要害怕新的 WordPress 開發堆棧。 我們越早適應它，我們就越有機會進行創新。

今天我們將了解如何在無需進入 WordPress 編輯器的情況下使用 Gutenberg 塊。 為什麼？ 有幾個原因…

第一個也是最明顯的是因為我們可以。 一段時間以來，Gutenberg 編輯器中的核心塊定義已作為單獨的代碼包提供。 這意味著借助 NPM 包管理器，我們可以在 WordPress 之外使用它們。

此外，還有一整套功能來管理和使用它們。 它們也包含在自己的包裝中。 因此，如果我們想使用標準的 WordPress 塊，我們只需要將這兩個包作為依賴項導入到我們的項目中。

為此，我們必須為我們的項目創建一個文件夾，運行npm init以使用項目數據創建一個package.json文件，然後運行以下命令來安裝這兩個依賴項：

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

下一步是使用我們要執行的代碼創建一個index.js文件。 這段代碼是用 Node.js 編寫的，Node.js 是在服務器上運行的 JavaScript 的一種變體。 對於今天的例子， index.js的內容可以如下：

 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 );

前面代碼中出現的前兩個語句是導入依賴項的require語句。 正如我之前所說，我們要導入標準的 WordPress 塊定義。 我們使用require('@wordpress/block-library')做到這一點。 因為我們只想從這個包中導入registerCoreBlocks函數，所以在等號的左邊我們解構了這個函數。

以同樣的方式，我們將@wordpress/blocks包作為依賴項導入。 這個包是具有處理塊的功能的包。 包中定義了很多函數（你有它們在這裡），但對於這個例子，我們只希望createBlock創建新塊并serialize以將它們轉換為我們可以保存在 WordPress 帖子內容中的字符串。

現在我們已經導入了依賴項，我們調用registerCoreBlocks函數，它加載標準 WordPress 塊類型的定義，以便我們可以使用它們。 從那時起，我們可以創建塊，正如您在調用createBlock函數時所看到的那樣，將我們要創建的塊類型的名稱和具有其屬性的對像作為參數傳遞。

在前面的示例中，我們將創建一個段落塊，因此我們傳遞名稱'core/paragraph'並在屬性對像中傳遞要創建的段落內容作為content鍵中的字符串。

最後，我們調用serialize函數，將我們剛剛創建的塊傳遞給它。 結果，我們將得到一個可以使用console.log函數輸出的字符串。

現在我們可以在終端中輸入node index.js來運行上面的代碼。 如果我們這樣做，會發生以下情況：

執行中有錯誤！ 原因是我們需要有可用的window變量，它沒有被定義。 但是這個變量是什麼，我們為什麼需要它？

Window 是瀏覽器定義並表示瀏覽器窗口本身的 JavaScript 對象。 由於我們在終端中執行代碼（或者如果它在生產環境中運行，在服務器上），我們沒有帶有所述變量的瀏覽器。 這是否意味著我們不能在瀏覽器之外使用 WordPress 塊？ 當然不是！

Node.js 有幾個包允許我們模擬我們在瀏覽器環境中運行我們的代碼。 在這種情況下，我們將使用 browser-env 包。 我們只需要像之前使用 WordPress 軟件包一樣安裝它：

 npm install browser-env

在我們的index.js文件中，我們必須添加一個新的require來導入browser-env依賴項。 而且，我們必須“修復” window對象，因為它沒有提供所需的matchMedia方法。 如果復制下面的代碼，添加到index.js文件的開頭，問題就解決了：

 // 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 () {}, }; };

現在你可以再次運行代碼，你會看到它沒有失敗，並且它返回了我們剛剛使用createBlock函數創建的段落塊的文本表示：

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

您擁有此 GitHub 存儲庫中的所有代碼。 從編輯器外部處理塊的可能性是巨大的。 您可以創建塊、克隆它們、將它們轉換為不同類型的塊等等。

能夠在 WordPress 編輯器之外使用塊允許我們操作 WordPress 的內容並在任何地方使用它們。 這為我們剛剛開始探索的開發人員打開了一個充滿無限可能的世界。

我們 Nelio 已經在利用這些可能性。 我們將很快推出一項新服務，希望您會覺得它非常有趣。 請繼續關注我們將在未來幾週發布的消息嗎？

Kelly Sikkema 在 Unsplash 上的特色圖片。