97精品人妻系列无码人妻,成人片黄网站a毛片免费,69国产成人综合久久精品

WordPress開發(fā)目前正經(jīng)歷轉(zhuǎn)型期，無論您是WordPress新手還是資深開發(fā)者，“全站編輯”（FSE）功能的引入，包括區(qū)塊編輯器（WordPress 5.0）和站點(diǎn)編輯器（WordPress 5.9），都顛覆了我們構(gòu)建WordPress主題和插件的傳統(tǒng)方式。

儘管我們第一次接觸區(qū)塊編輯器已經(jīng)五年了，但它的開發(fā)仍然充滿挑戰(zhàn)，因?yàn)槲臋n要么缺失，要么過時(shí)。這更多地反映了FSE功能快速迭代的現(xiàn)狀。

例如，2018年，CSS-tricks上曾發(fā)表過一個(gè)關(guān)於Gutenberg開發(fā)入門的系列文章。但時(shí)過境遷，雖然那種開發(fā)方式仍然有效，但已不再推薦（此外，它所基於的create-guten-block項(xiàng)目也不再維護(hù)）。

本文旨在幫助您開始WordPress區(qū)塊開發(fā)，並遵循當(dāng)前的方法。當(dāng)然，本文發(fā)布後，情況可能會發(fā)生變化。但我將嘗試關(guān)注其核心思想，因?yàn)榧词构ぞ邥S著時(shí)間推移而發(fā)展，核心概念很可能保持不變。

WordPress區(qū)塊究竟是什麼？

首先，讓我們澄清一些術(shù)語，例如“區(qū)塊”。在WordPress 5.0之前的這些功能的所有開發(fā)都使用代號“Gutenberg”（印刷術(shù)的發(fā)明者）。

從那時(shí)起，“Gutenberg”已被用來描述與區(qū)塊相關(guān)的一切，包括區(qū)塊編輯器和站點(diǎn)編輯器，因此它變得複雜到一些人討厭這個(gè)名字的程度。最重要的是，還有一個(gè)Gutenberg插件用於測試實(shí)驗(yàn)性功能，以供將來可能包含。如果您認(rèn)為將所有這些稱為“全站編輯”可以解決問題，那麼也存在一些擔(dān)憂。

因此，在本文中，當(dāng)我們提到“區(qū)塊”時(shí)，指的是在WordPress區(qū)塊編輯器中創(chuàng)建內(nèi)容的組件。區(qū)塊被插入頁面或文章中，並為特定類型的內(nèi)容提供結(jié)構(gòu)。 WordPress自帶了一些用於常見內(nèi)容類型的“核心”區(qū)塊，例如段落、列表、圖像、視頻和音頻等等。

除了這些核心區(qū)塊外，我們還可以創(chuàng)建自定義區(qū)塊。這就是WordPress區(qū)塊開發(fā)的重點(diǎn)（還可以過濾核心區(qū)塊以修改其功能，但您可能暫時(shí)不需要）。

區(qū)塊的作用

在我們深入創(chuàng)建區(qū)塊之前，我們必須首先了解區(qū)塊的內(nèi)部工作原理。這絕對可以節(jié)省我們以後很多麻煩。

我喜歡將區(qū)塊抽像地理解為：一個(gè)具有某些屬性（稱為屬性）的實(shí)體，代表某些內(nèi)容。我知道這聽起來很模糊，但請耐心聽我解釋。區(qū)塊基本上以兩種方式表現(xiàn)出來：作為區(qū)塊編輯器中的圖形界面，或作為數(shù)據(jù)庫中的數(shù)據(jù)塊。

當(dāng)您打開WordPress區(qū)塊編輯器並插入一個(gè)區(qū)塊（例如，Pullquote區(qū)塊）時(shí)，您會得到一個(gè)不錯(cuò)的界面。您可以點(diǎn)擊該界面並編輯引用的文本。區(qū)塊編輯器UI右側(cè)的“設(shè)置”面板提供用於調(diào)整文本和設(shè)置區(qū)塊外觀的選項(xiàng)。

當(dāng)您完成創(chuàng)建精美的引用並點(diǎn)擊“發(fā)布”時(shí)，整篇文章都會存儲在數(shù)據(jù)庫的wp_posts表中。由於Gutenberg，這沒有什麼新意。這就是事情一直以來的工作方式——WordPress將文章內(nèi)容存儲在數(shù)據(jù)庫中的指定表中。但新的是Pullquote區(qū)塊的表示是存儲在wp_posts表的post_content字段中的內(nèi)容的一部分。

這種表示是什麼樣的？讓我們來看看：

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

看起來像普通的HTML，對吧？！用技術(shù)術(shù)語來說，這就是“序列化”的區(qū)塊。請注意HTML註釋中的JSON數(shù)據(jù)，“textAlign”：“right”。這是一個(gè)屬性——與區(qū)塊相關(guān)的屬性。

假設(shè)您關(guān)閉了區(qū)塊編輯器，然後一段時(shí)間後再次打開它。區(qū)塊編輯器將檢索相關(guān)post_content字段中的內(nèi)容。然後，編輯器解析檢索到的內(nèi)容，並在遇到以下內(nèi)容時(shí)：

<code>...</code>

它會自言自語：

好吧，這看起來像一個(gè)Pullquote區(qū)塊。嗯……它也有一個(gè)屬性……我確實(shí)有一個(gè)JavaScript文件，它告訴我如何根據(jù)其屬性在編輯器中構(gòu)造Pullquote區(qū)塊的圖形界面。我現(xiàn)在應(yīng)該這樣做，以便以其全部榮耀呈現(xiàn)此區(qū)塊。

作為區(qū)塊開發(fā)者，您的工作是：

告訴WordPress您要註冊特定類型的區(qū)塊，以及相關(guān)細(xì)節(jié)。
向區(qū)塊編輯器提供JavaScript文件，這將幫助它在編輯器中呈現(xiàn)區(qū)塊，同時(shí)將其“序列化”以將其保存到數(shù)據(jù)庫中。
提供區(qū)塊正常運(yùn)行所需的任何其他資源，例如樣式和字體。

需要注意的是，所有這些從序列化數(shù)據(jù)到圖形界面的轉(zhuǎn)換——反之亦然——只發(fā)生在區(qū)塊編輯器中。在前端，內(nèi)容的顯示方式與存儲方式完全相同。因此，從某種意義上說，區(qū)塊是一種將數(shù)據(jù)放入數(shù)據(jù)庫的巧妙方法。

希望這能使您更清楚地了解區(qū)塊的工作原理。

區(qū)塊只是插件

區(qū)塊只是插件。好吧，從技術(shù)上講，您可以將區(qū)塊放在主題中，也可以將多個(gè)區(qū)塊放在一個(gè)插件中。但是，通常情況下，如果您想製作一個(gè)區(qū)塊，您將要製作一個(gè)插件。因此，如果您曾經(jīng)創(chuàng)建過WordPress插件，那麼您已經(jīng)部分掌握了製作WordPress區(qū)塊的方法。

但是，讓我們假設(shè)您從未設(shè)置過WordPress插件，更不用說區(qū)塊了。你甚至從哪裡開始？

設(shè)置區(qū)塊

我們已經(jīng)介紹了什麼是區(qū)塊。讓我們開始設(shè)置來製作一個(gè)。

確保已安裝Node

這將使您可以訪問npm和npx命令，其中npm安裝區(qū)塊的依賴項(xiàng)並幫助編譯內(nèi)容，而npx在不安裝軟件包的情況下運(yùn)行軟件包上的命令。如果您使用的是macOS，您可能已經(jīng)安裝了Node，並且可以使用nvm更新版本。如果您使用的是Windows，則需要下載並安裝Node。

創(chuàng)建項(xiàng)目文件夾

現(xiàn)在，您可能會遇到其他教程，它們直接跳轉(zhuǎn)到命令行並指示您安裝名為@wordpress/create-block的軟件包。此軟件包非常棒，因?yàn)樗鼤梢粋€(gè)完整的項(xiàng)目文件夾，其中包含開始開發(fā)所需的所有依賴項(xiàng)和工具。

我個(gè)人在設(shè)置自己的區(qū)塊時(shí)會採用這種方法，但請暫時(shí)容忍我一下，因?yàn)槲蚁胂氲闹饔^內(nèi)容，並僅關(guān)注基本開發(fā)環(huán)境的必需部分，以便理解。

這些是我想特別指出的文件：

readme.txt：這有點(diǎn)像插件目錄的正面，通常用於描述插件並提供有關(guān)用法和安裝的更多詳細(xì)信息。如果您將區(qū)塊提交到WordPress插件目錄，則此文件有助於填充插件頁面。如果您計(jì)劃為區(qū)塊插件創(chuàng)建GitHub存儲庫，那麼您也可以考慮使用包含相同信息的README.md文件，以便它在那裡很好地顯示。
package.json：這定義了開發(fā)所需的Node軟件包。我們將在安裝時(shí)打開它。在經(jīng)典的WordPress插件開發(fā)中，您可能習(xí)慣於使用Composer和composer.json文件。這是它的等效項(xiàng)。
plugin.php：這是主要的插件文件，是的，它是經(jīng)典的PHP！我們將在這裡放置插件標(biāo)題和元數(shù)據(jù)，並使用它來註冊插件。

除了這些文件外，還有一個(gè)src目錄，它應(yīng)該包含區(qū)塊的源代碼。

擁有這些文件和src目錄就足以開始了。在那組中，請注意我們實(shí)際上只需要一個(gè)文件（plugin.php）來製作插件。其餘的要么提供信息，要么用於管理開發(fā)環(huán)境。

前面提到的@wordpress/create-block軟件包為我們搭建了這些文件（以及更多）。您可以將其視為自動化工具，而不是必需品。無論如何，它確實(shí)使工作更容易，因此您可以通過運(yùn)行以下命令來自由地使用它來搭建區(qū)塊：

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

安裝區(qū)塊依賴項(xiàng)

假設(shè)您已準(zhǔn)備好上一節(jié)中提到的三個(gè)文件，現(xiàn)在該安裝依賴項(xiàng)了。首先，我們需要指定我們將需要的依賴項(xiàng)。我們通過編輯package.json來做到這一點(diǎn)。使用@wordpress/create-block實(shí)用程序時(shí)，會為我們生成以下內(nèi)容（添加了註釋；JSON不支持註釋，因此如果您複製代碼，請刪除註釋）：

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

查看無註釋版本

```json { "name": "block-example", "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": "^24.1.0" } }

<code>...</code>

現(xiàn)在package.json已設(shè)置完畢，我們應(yīng)該能夠通過在命令行中導(dǎo)航到項(xiàng)目文件夾並運(yùn)行npm install來安裝所有這些依賴項(xiàng)。

添加插件標(biāo)題

如果您來自經(jīng)典的WordPress插件開發(fā)，那麼您可能知道所有插件在主插件文件中都有一塊信息，這有助於WordPress識別插件並在WordPress管理面板的“插件”屏幕上顯示有關(guān)它的信息。

以下是@wordpress/create-block為我生成的，用於一個(gè)創(chuàng)造性地稱為“Hello World”的插件：

npx @wordpress/create-block

這在主插件文件中，您可以根據(jù)需要隨意命名。您可以將其命名為index.php或plugin.php之類的通用名稱。 create-block包會自動將其命名為您在安裝時(shí)提供的項(xiàng)目名稱。由於我將此示例稱為“Block Example”，因此該包為我們提供了一個(gè)block-example.php文件，其中包含所有這些內(nèi)容。

您需要更改一些詳細(xì)信息，例如將自己設(shè)為作者等等。並非所有這些都是必要的。如果我從“頭”開始，那麼它可能更接近於此：

{
  // 定義項(xiàng)目名稱
  "name": "block-example",
  // 使用語義版本控制設(shè)置項(xiàng)目版本號
  "version": "0.1.0",
  // 項(xiàng)目的簡短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以將其替換為您自己
  "author": "The WordPress Contributors",
  // 標(biāo)準(zhǔn)許可信息
  "license": "GPL-2.0-or-later",
  // 定義主JavaScript文件
  "main": "build/index.js",
  // 我們在開發(fā)過程中構(gòu)建和編譯插件所需的一切
  "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"
  },
  // 定義使用腳本包的哪個(gè)版本（撰寫本文時(shí)為24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

我不會詳細(xì)介紹每一行的確切用途，因?yàn)檫@在WordPress插件手冊中已經(jīng)是一個(gè)完善的模式了。

文件結(jié)構(gòu)

我們已經(jīng)查看了區(qū)塊所需的文件。但是，如果您使用的是@wordpress/create-block，您將在項(xiàng)目文件夾中看到許多其他文件。

以下是目前包含的內(nèi)容：

<code>
這里的@wordpress/scripts包是主要的依賴項(xiàng)。如您所見，它是一個(gè)devDependency，這意味著它有助于開發(fā)。如何？它公開了wp-scripts二進(jìn)制文件，我們可以使用它來編譯我們的代碼，從src目錄到build目錄，等等。

WordPress維護(hù)了許多其他軟件包，用于各種目的。例如，@wordpress/components軟件包為WordPress區(qū)塊編輯器提供了一些預(yù)制UI組件，可用于為區(qū)塊創(chuàng)建一致的用戶體驗(yàn)，并符合WordPress設(shè)計(jì)標(biāo)準(zhǔn)。

您實(shí)際上*不需要*安裝這些軟件包，即使您想使用它們也是如此。這是因?yàn)檫@些@wordpress依賴項(xiàng)不會與您的區(qū)塊代碼捆綁在一起。相反，任何引用實(shí)用程序軟件包代碼的導(dǎo)入語句——例如@wordpress/components——都用于在編譯期間構(gòu)造“資產(chǎn)”文件。此外，這些導(dǎo)入語句被轉(zhuǎn)換為將導(dǎo)入映射到全局對象的屬性的語句。例如，import { \_\_ } from "@wordpress/i18n"被轉(zhuǎn)換為const \_\_ = window.wp.i18n.\_\_的縮小版本。（window.wp.i18n是一個(gè)保證在全局范圍內(nèi)可用的對象，一旦相應(yīng)的i18n軟件包文件被排隊(duì)）。

在插件文件中注冊區(qū)塊期間，隱式使用“資產(chǎn)”文件來告訴WordPress區(qū)塊的軟件包依賴項(xiàng)。這些依賴項(xiàng)會自動排隊(duì)。所有這些都在幕后完成，前提是您使用的是scripts軟件包。也就是說，您仍然可以選擇在package.json文件中本地安裝依賴項(xiàng)以進(jìn)行代碼完成和參數(shù)信息：

```json
// etc.
"devDependencies": {
  "@wordpress/scripts": "^24.1.0"
},
"dependencies": {
  "@wordpress/components": "^19.17.0"
}</code>

哇，好多！讓我們指出新的內(nèi)容：

build/：此文件夾在處理生產(chǎn)用途的文件時(shí)接收已編譯的資產(chǎn)。
node_modules：此文件夾保存我們運(yùn)行npm install時(shí)安裝的所有開發(fā)依賴項(xiàng)。
src/：此文件夾保存插件的源代碼，這些源代碼將被編譯並發(fā)送到build目錄。我們稍後將查看其中的每個(gè)文件。
.editorconfig：這包含用於調(diào)整代碼編輯器以實(shí)現(xiàn)代碼一致性的配置。
.gitignore：這是一個(gè)標(biāo)準(zhǔn)的存儲庫文件，用於識別應(yīng)從版本控制跟蹤中排除的本地文件。您的node_modules絕對應(yīng)該包含在此處。
package-lock.json：這是一個(gè)自動生成的文件，用於跟蹤使用npm install安裝的所需軟件包的更新。

區(qū)塊元數(shù)據(jù)

我想與您一起深入研究src目錄，但首先將重點(diǎn)放在其中的一個(gè)文件上：block.json。如果您使用的是create-block，它已經(jīng)為您準(zhǔn)備好了；如果沒有，請繼續(xù)創(chuàng)建它。 WordPress正在大力推動將其作為標(biāo)準(zhǔn)的規(guī)範(fàn)方法來註冊區(qū)塊，方法是提供元數(shù)據(jù)，這些元數(shù)據(jù)為WordPress提供上下文，以便同時(shí)識別區(qū)塊並在區(qū)塊編輯器中呈現(xiàn)它。

以下是@wordpress/create-block為我生成的內(nèi)容：

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

實(shí)際上，我們可以在此處包含許多不同的信息，但實(shí)際上只需要name和title。一個(gè)超級精簡的版本可能如下所示：

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

$schema定義用於驗(yàn)證文件內(nèi)容的模式格式。聽起來像是一個(gè)必需的東西，但它完全是可選的，因?yàn)樗试S支持的代碼編輯器驗(yàn)證語法並提供其他額外功能，例如工具提示提示和自動完成。
apiVersion指的是插件使用的Block API的哪個(gè)版本。今天，版本2是最新版本。
name是一個(gè)必需的唯一字符串，有助於識別插件。請注意，我已經(jīng)在前面添加了css-tricks/，我將其用作命名空間，以幫助避免與可能具有相同名稱的其他插件發(fā)生衝突。您可以選擇使用您的姓名首字母縮寫之類的東西（例如as/block-example）。
version是WordPress建議用作發(fā)布新版本時(shí)的緩存清除機(jī)制。
title是另一個(gè)必需的字段，它設(shè)置在顯示插件的任何位置使用的名稱。
category將區(qū)塊與其他區(qū)塊分組，並將其一起顯示在區(qū)塊編輯器中。當(dāng)前存在的類別包括文本、媒體、設(shè)計(jì)、小部件、主題和嵌入，您甚至可以創(chuàng)建自定義類別。
icon允許您從Dashicons庫中選擇一些內(nèi)容，以便在區(qū)塊編輯器中以可視方式表示您的區(qū)塊。我使用format-quote圖標(biāo)，因?yàn)槲覀冊谶@個(gè)示例中正在製作我們自己的pullquote之類的東西。我們可以利用現(xiàn)有的圖標(biāo)而不是必須創(chuàng)建我們自己的圖標(biāo)，這很好，儘管這當(dāng)然也是可能的。
editorScript是主JavaScript文件index.js所在的位置。

註冊區(qū)塊

在我們進(jìn)入實(shí)際代碼之前，還有一件事，那就是註冊插件。我們剛剛設(shè)置了所有這些元數(shù)據(jù)，我們需要一種方法讓W(xué)ordPress使用它。這樣，WordPress就知道在哪裡可以找到所有插件資產(chǎn)，以便可以將它們排隊(duì)用於區(qū)塊編輯器。

註冊區(qū)塊是一個(gè)兩步過程。我們需要在PHP和JavaScript中註冊它。對於PHP方面，打開主插件文件（在本例中為block-example.php），並在插件標(biāo)題之後添加以下內(nèi)容：

<code>...</code>

這就是create-block實(shí)用程序?yàn)槲疑傻膬?nèi)容，這就是為什麼函數(shù)的命名方式如此的原因。我們可以使用不同的名稱。關(guān)鍵是避免與其他插件衝突，因此最好在此處使用您的命名空間以使其盡可能唯一：

npx @wordpress/create-block

如果包含所有區(qū)塊元數(shù)據(jù)的block.json位於src中，為什麼我們要指向build目錄？這是因?yàn)槲覀兊拇a仍然需要編譯。 scripts軟件包處理src目錄中文件的代碼並將生產(chǎn)中使用的已編譯文件放置在build目錄中，同時(shí)複製block.json文件。

好了，讓我們轉(zhuǎn)到註冊區(qū)塊的JavaScript方面。打開src/index.js並確保它如下所示：

{
  // 定義項(xiàng)目名稱
  "name": "block-example",
  // 使用語義版本控制設(shè)置項(xiàng)目版本號
  "version": "0.1.0",
  // 項(xiàng)目的簡短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以將其替換為您自己
  "author": "The WordPress Contributors",
  // 標(biāo)準(zhǔn)許可信息
  "license": "GPL-2.0-or-later",
  // 定義主JavaScript文件
  "main": "build/index.js",
  // 我們在開發(fā)過程中構(gòu)建和編譯插件所需的一切
  "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"
  },
  // 定義使用腳本包的哪個(gè)版本（撰寫本文時(shí)為24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

我們正在進(jìn)入React和JSX領(lǐng)域！這告訴WordPress：

從@wordpress/blocks軟件包導(dǎo)入registerBlockType模塊。
從block.json導(dǎo)入元數(shù)據(jù)。
從其相應(yīng)的文件導(dǎo)入Edit和Save組件。我們稍後將向這些文件中添加代碼。
註冊區(qū)塊，並使用Edit和Save組件來呈現(xiàn)區(qū)塊並將內(nèi)容保存到數(shù)據(jù)庫中。

Edit和save函數(shù)是怎麼回事？ WordPress區(qū)塊開發(fā)的細(xì)微之處之一是區(qū)分“後端”和“前端”，這些函數(shù)用於在這些上下文中呈現(xiàn)區(qū)塊的內(nèi)容，其中edit處理後端呈現(xiàn)，save將內(nèi)容從區(qū)塊編輯器寫入數(shù)據(jù)庫以在網(wǎng)站的前端呈現(xiàn)內(nèi)容。

快速測試

我們可以快速操作一下，看看我們的區(qū)塊是否在區(qū)塊編輯器中工作並在前端呈現(xiàn)。讓我們再次打開index.js，並使用edit和save函數(shù)返回一些基本內(nèi)容，以說明它們的工作方式：

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

這基本上是我們之前代碼的精簡版本，只是我們直接指向block.json中的元數(shù)據(jù)來獲取區(qū)塊名稱，並且省略了Edit和Save組件，因?yàn)槲覀冎苯訌拇颂庍\(yùn)行函數(shù)。

我們可以通過在命令行中運(yùn)行npm run build來編譯它。之後，我們可以在區(qū)塊編輯器中訪問名為“Block Example”的區(qū)塊：

如果我們將區(qū)塊放入內(nèi)容區(qū)域，我們將獲得從edit函數(shù)返回的消息：

如果我們保存並發(fā)布文章，則在前端查看時(shí)，我們應(yīng)該獲得從save函數(shù)返回的消息：

創(chuàng)建區(qū)塊

看起來一切正常！現(xiàn)在我們已經(jīng)確認(rèn)一切正常，我們可以恢復(fù)到測試之前的index.js中的內(nèi)容：

<code>...</code>

請注意，edit和save函數(shù)與src目錄中@wordpress/create-block為我們生成的兩個(gè)現(xiàn)有文件相關(guān)聯(lián)，並且包含我們在每個(gè)文件中需要的其他導(dǎo)入。更重要的是，這些文件建立了包含區(qū)塊標(biāo)記的Edit和Save組件。

後端標(biāo)記（src/edit.js）

npx @wordpress/create-block

看看我們做了什麼？我們正在從@wordpress/block-editor軟件包導(dǎo)入props，這允許我們生成稍後可以用於樣式的類。我們還導(dǎo)入了__國際化函數(shù)，用於處理翻譯。

前端標(biāo)記（src/save.js）

這將創(chuàng)建一個(gè)Save組件，我們將使用與src/edit.js幾乎相同的內(nèi)容，但文本略有不同：

{
  // 定義項(xiàng)目名稱
  "name": "block-example",
  // 使用語義版本控制設(shè)置項(xiàng)目版本號
  "version": "0.1.0",
  // 項(xiàng)目的簡短描述
  "description": "Example block scaffolded with Create Block tool.",
  // 您可以將其替換為您自己
  "author": "The WordPress Contributors",
  // 標(biāo)準(zhǔn)許可信息
  "license": "GPL-2.0-or-later",
  // 定義主JavaScript文件
  "main": "build/index.js",
  // 我們在開發(fā)過程中構(gòu)建和編譯插件所需的一切
  "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"
  },
  // 定義使用腳本包的哪個(gè)版本（撰寫本文時(shí)為24.1.0）
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

同樣，我們得到了一個(gè)可以在CSS中使用的不錯(cuò)的類：

樣式區(qū)塊

我們剛剛介紹瞭如何使用區(qū)塊屬性來創(chuàng)建類。您正在CSS相關(guān)的網(wǎng)站上閱讀這篇文章，因此我覺得如果我們沒有特別介紹如何編寫區(qū)塊樣式，我會錯(cuò)過一些東西。

區(qū)分前端和後端樣式

如果您查看src目錄中的block.json，您會發(fā)現(xiàn)兩個(gè)與樣式相關(guān)的字段：

editorStyle提供應(yīng)用於後端的樣式的路徑。
style是應(yīng)用於前端和後端的共享樣式的路徑。

Kev Quirk有一篇詳細(xì)的文章展示了他使後端編輯器看起來像前端UI的方法。

回想一下，@wordpress/scripts軟件包在處理/src目錄中的代碼並將已編譯的資產(chǎn)放置在/build目錄中時(shí)，會復(fù)制block.json文件。用於註冊區(qū)塊的是build/block.json文件。 這意味著我們在src/block.json中提供的任何路徑都應(yīng)相對於build/block.json編寫。

使用Sass

我們可以將幾個(gè)CSS文件放入build目錄中，在src/block.json中引用路徑，運(yùn)行build，然後就完成了。但這並沒有充分利用@wordpress/scripts編譯過程的功能，該過程能夠?qū)ass編譯成CSS。相反，我們將樣式文件放在src目錄中，並在JavaScript中導(dǎo)入它們。

這樣做時(shí)，我們需要注意@wordpress/scripts如何處理樣式：

導(dǎo)入到JavaScript代碼中的名為style.css或style.scss或style.sass的文件將編譯為style-index.css。
所有其他樣式文件都將被編譯並捆綁到index.css中。

@wordpress/scripts軟件包使用webpack進(jìn)行捆綁，並使用PostCSS插件進(jìn)行樣式處理。 PostCSS可以使用其他插件進(jìn)行擴(kuò)展。 scripts軟件包使用Sass、SCSS和Autoprefixer的插件，所有這些插件都無需安裝其他軟件包即可使用。

事實(shí)上，當(dāng)您使用@wordpress/create-block啟動初始區(qū)塊時(shí)，您可以很好地開始使用SCSS文件，您可以使用這些文件快速上手：

editor.scss包含應(yīng)用於後端編輯器的所有樣式。
style.scss包含前端和後端共享的所有樣式。

現(xiàn)在讓我們通過編寫一些我們將編譯成區(qū)塊CSS的Sass來實(shí)際操作一下。儘管這些示例不會非常Sass化，但我仍然將它們寫入SCSS文件以演示編譯過程。

前端和後端樣式

好的，讓我們從應(yīng)用於前端和後端的樣式開始。首先，我們需要創(chuàng)建src/style.scss（如果您使用的是@wordpress/create-block，它已經(jīng)存在），並確保我們導(dǎo)入它，我們可以在index.js中執(zhí)行此操作：

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

打開src/style.scss並在其中使用從區(qū)塊屬性為我們生成的類放入一些基本樣式：

<code>...</code>

現(xiàn)在就這些！當(dāng)我們運(yùn)行build時(shí)，這將編譯成build/style.css，並由區(qū)塊編輯器和前端引用。

後端樣式

您可能需要編寫特定於區(qū)塊編輯器的樣式。為此，請創(chuàng)建src/editor.scss（同樣，@wordpress/create-block為您執(zhí)行此操作），並在其中放入一些樣式：

npx @wordpress/create-block

然後在edit.js中導(dǎo)入它，該文件包含我們的Edit組件（我們可以在任何地方導(dǎo)入它，但由於這些樣式是用於編輯器的，因此在此處導(dǎo)入組件更合乎邏輯）：

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

現(xiàn)在，當(dāng)我們運(yùn)行npm run build時(shí)，樣式將應(yīng)用於這兩種上下文中的區(qū)塊：

在block.json中引用樣式

我們在edit.js和index.js中導(dǎo)入了樣式文件，但請記住，編譯步驟為我們在build目錄中生成了兩個(gè)CSS文件：index.css和style-index.css。我們需要在區(qū)塊元數(shù)據(jù)中引用這些生成的文件。

讓我們向block.json元數(shù)據(jù)添加幾個(gè)語句：

<code>...</code>

再次運(yùn)行npm run build，在您的WordPress網(wǎng)站上安裝並激活插件，您就可以使用了！

您可以使用npm run start以監(jiān)視模式運(yùn)行您的構(gòu)建，每次您更改代碼並保存時(shí)都會自動編譯您的代碼。

我們只是觸及了表面

實(shí)際的區(qū)塊使用了區(qū)塊編輯器的“設(shè)置”側(cè)邊欄和WordPress提供的其他功能來創(chuàng)建豐富的用戶體驗(yàn)。此外，由於區(qū)塊實(shí)際上有兩個(gè)版本——edit和save——您還需要考慮如何組織代碼以避免代碼重複。

但希望這有助於消除創(chuàng)建WordPress區(qū)塊的總體過程的神秘感。這確實(shí)是WordPress開發(fā)的新時(shí)代。學(xué)習(xí)新的做事方法很困難，但我期待著看到它的發(fā)展。像@wordpress/create-block這樣的工具有所幫助，但即使那樣，了解它到底在做什麼以及為什麼這樣做也很不錯(cuò)。

我們在這裡介紹的內(nèi)容會改變嗎？很可能！但至少您有一個(gè)基線可以作為參考，因?yàn)槲覀兝^續(xù)關(guān)注WordPress區(qū)塊的成熟，包括製作它們的最佳實(shí)踐。