建站
咨詢
售后
建站咨詢
新聞中心
許多人抱怨開始構(gòu)建古騰堡區(qū)塊和應(yīng)用程序的障礙。學(xué)習(xí)曲線陡峭，主要是由于開發(fā)環(huán)境的安裝和配置困難。此外，扎實(shí)的JavaScript、Node.js、React和Redux知識(shí)是這個(gè)相當(dāng)復(fù)雜的秘訣的必備要素。
專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)三原免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近1000家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
官方的wordpress區(qū)塊編輯器手冊(cè)為開發(fā)人員提供了大量信息，但您可能會(huì)發(fā)現(xiàn)自己迷失在這些細(xì)節(jié)的海洋中。
值得一提的是，Gutenberg項(xiàng)目的首席架構(gòu)師Matías Ventura在接受WP Tavern采訪時(shí)所報(bào)告的內(nèi)容：
雖然有些人可以快速學(xué)習(xí)它，但這對(duì)人們來說仍然是一個(gè)很大的障礙。我認(rèn)為這有幾個(gè)層次；文檔在組織和演示方面可能要好一個(gè)數(shù)量級(jí)。我希望我們可以在那里做更多的事情。
考慮到這一點(diǎn)，我們決定提供一個(gè)分步教程，旨在幫助我們的讀者開始使用Gutenberg區(qū)塊開發(fā)。
古騰堡區(qū)塊開發(fā)先決條件
對(duì)于本教程，唯一需要的技能是對(duì)WordPress插件開發(fā)有很好的了解，并且至少對(duì)HTML、CSS、JavaScript和React有基本的了解。
這會(huì)是一個(gè)雄心勃勃的項(xiàng)目嗎？你打賭它會(huì)的！
在完整性和簡(jiǎn)單性之間找到正確的折衷方案或決定包含哪些主題和省略哪些主題并不容易。
希望中高級(jí)讀者能原諒我們沒有深入研究某些概念，例如React狀態(tài)、Redux存儲(chǔ)、高階組件等。這些主題需要額外的空間和注意力，并且可能對(duì)于開始區(qū)塊開發(fā)來說太高級(jí)了（除非您是 React 開發(fā)人員）。
出于同樣的原因，我們不會(huì)涵蓋與Gutenberg區(qū)塊開發(fā)相關(guān)的一些更高級(jí)的主題，例如動(dòng)態(tài)區(qū)塊和元框。
有了本文結(jié)尾您將獲得的知識(shí)，您將能夠立即開始享受樂趣并提高工作效率。
一旦您開始構(gòu)建區(qū)塊，您將準(zhǔn)備好進(jìn)一步提高您的技能并自行構(gòu)建更高級(jí)的古騰堡區(qū)塊。
什么是古騰堡區(qū)塊？
自2018年12月首次發(fā)布以來，區(qū)塊編輯器在各個(gè)方面都得到了極大的改進(jìn)：更強(qiáng)大的API、更高級(jí)的用戶界面、改進(jìn)的可用性、大量新區(qū)塊、全站點(diǎn)編輯的首次實(shí)現(xiàn)等等.
簡(jiǎn)而言之，即使古騰堡仍在大力開發(fā)中，它也已經(jīng)走過了漫長(zhǎng)的道路——如今，區(qū)塊編輯器已成為可靠的功能性頁(yè)面和網(wǎng)站構(gòu)建器的成熟候選者。
從開發(fā)人員的角度來看，Gutenberg是一個(gè)基于React的單頁(yè)應(yīng)用程序(SPA)，它允許WordPress用戶在WordPress中創(chuàng)建、編輯和刪除內(nèi)容。但是，這不應(yīng)該讓您想到傳統(tǒng)內(nèi)容編輯器的增強(qiáng)版。
我們想明確這一點(diǎn)：
Gutenberg不是常規(guī)的WYSIWYG編輯器。相反，它重新定義了WordPress中的整個(gè)編輯體驗(yàn)。
在古騰堡，內(nèi)容被劃分為區(qū)塊，這些區(qū)塊是用戶可以用來創(chuàng)建文章和頁(yè)面或整個(gè)網(wǎng)站的“磚塊”。
但從技術(shù)上講，什么是區(qū)塊？
我們喜歡WordPress的定義：
“區(qū)塊”是用于描述標(biāo)記單元的抽象術(shù)語(yǔ)，這些標(biāo)記單元組合在一起形成網(wǎng)頁(yè)的內(nèi)容或布局。這個(gè)想法將我們今天在WordPress中實(shí)現(xiàn)的概念與短代碼、自定義HTML和嵌入發(fā)現(xiàn)結(jié)合到一個(gè)一致的API和用戶體驗(yàn)中。
標(biāo)題、段落、列、圖像、畫廊以及構(gòu)成編輯器界面的所有元素，從側(cè)邊欄面板到區(qū)塊工具欄控件，都是React組件。
那么，什么是React組件？W3Schools提供以下定義：
組件是獨(dú)立且可重用的代碼。它們的用途與JavaScript函數(shù)相同，但獨(dú)立工作并通過
render()函數(shù)返回HTML。
在WordPress 5.8中使用Gutenberg區(qū)塊
雖然Gutenberg提供的編輯體驗(yàn)與經(jīng)典的WordPress編輯器相比是全新的，但WordPress將您的內(nèi)容片段存儲(chǔ)在數(shù)據(jù)庫(kù)中的方式根本沒有改變。這是因?yàn)镚utenberg是一個(gè)在WordPress中運(yùn)行的應(yīng)用程序，但不會(huì)改變CMS的核心工作方式。
使用Gutenberg創(chuàng)建的文章（包括文章、頁(yè)面和自定義文章類型）仍存儲(chǔ)在wp_posts表中，與經(jīng)典編輯器完全相同。
但是在使用Gutenberg創(chuàng)建的文章中，您會(huì)在表格中找到更多信息，這些信息代表了通過Classic Editor與Gutenberg創(chuàng)建的文章之間的根本區(qū)別。
這些信息看起來像HTML注釋，它們有一個(gè)特定的功能：分隔區(qū)塊：
代碼編輯器視圖中的博客文章。
區(qū)塊分隔符告訴WordPress要在屏幕上呈現(xiàn)什么區(qū)塊。它們還為JSON對(duì)象中的區(qū)塊屬性提供值。這些道具決定了區(qū)塊應(yīng)該在屏幕上呈現(xiàn)的方式：
wp_posts存儲(chǔ)在表中的博客文章
設(shè)置您的WordPress開發(fā)環(huán)境
設(shè)置現(xiàn)代JavaScript開發(fā)環(huán)境需要扎實(shí)的高級(jí)技術(shù)知識(shí)，例如Webpack、React和JSX、Babel、ESLint等。
被嚇倒了？不要！WordPress社區(qū)已經(jīng)通過提供強(qiáng)大的工具來幫助您避免混亂的手動(dòng)配置過程。
為簡(jiǎn)單起見，我們不會(huì)在本文中介紹轉(zhuǎn)譯（不過，我們建議您在了解區(qū)塊開發(fā)的基礎(chǔ)知識(shí)后熟悉一下）。相反，我們將介紹兩種替代工具，您可以使用它們?cè)趲追昼妰?nèi)快速輕松地設(shè)置現(xiàn)代JavaScript開發(fā)環(huán)境。您可以選擇對(duì)您的項(xiàng)目最方便的一個(gè)。
設(shè)置JavaScript開發(fā)環(huán)境以構(gòu)建Gutenberg區(qū)塊是一個(gè)三步過程：
讓我們開始吧。
1. 安裝Node.js和npm
在安裝您的開發(fā)環(huán)境并注冊(cè)您的第一個(gè)區(qū)塊之前，您需要安裝Node.js和Node包管理器 (npm)。
注：Node.js是基于Chrome的V8 JavaScript引擎構(gòu)建的JavaScript運(yùn)行時(shí)。npm，通常被稱為Node包管理器，被認(rèn)為是“世界上最大的軟件注冊(cè)表”。
您可以通過幾種不同的方式，安裝Node.js和npm。但首先，您可能需要檢查該軟件是否已安裝在您的計(jì)算機(jī)上。
為此，請(qǐng)啟動(dòng)終端并運(yùn)行以下命令：
node -v
如果結(jié)果為command not found，則您的計(jì)算機(jī)上未安裝Node.js，您可以繼續(xù)安裝。
對(duì)于本文，我們選擇了最簡(jiǎn)單的安裝選項(xiàng)，即Node Installer。您需要做的就是下載與您的操作系統(tǒng)相對(duì)應(yīng)的版本并啟動(dòng)安裝向?qū)В?/p>
Node.js下載頁(yè)面
安裝Node.js后，再次在終端中運(yùn)行node -v命令。您還可以運(yùn)行npm -v命令以確認(rèn)您有可用的npm包。
您現(xiàn)在配備了以下工具：
npxNode.js包運(yùn)行器（請(qǐng)參閱文檔）。這允許您運(yùn)行npm命令而無需先安裝它。npmNode.js包管理器（請(qǐng)參閱文檔）。這用于安裝依賴項(xiàng)和運(yùn)行腳本。
下一步是安裝開發(fā)環(huán)境。
2. 設(shè)置你的開發(fā)環(huán)境
在本地計(jì)算機(jī)上安裝最新版本的Node.js和npm后，您將需要一個(gè)WordPress開發(fā)環(huán)境。
您可以使用本地開發(fā)環(huán)境，也可以使用官方WordPress工具。讓我們來看看這兩種選擇。
選項(xiàng) 1：本地開發(fā)環(huán)境
您可以選擇不同的本地開發(fā)工具，例如MAMP或XAMPP：
在本地環(huán)境中創(chuàng)建一個(gè)新的WordPress網(wǎng)站。
選項(xiàng) 2：wp-env
您也可以選擇官方wp-env工具，它提供了一個(gè)本地WordPress開發(fā)環(huán)境，您可以直接從命令行啟動(dòng)。Noah Alen將其定義如下：
本地WordPress環(huán)境現(xiàn)在就像運(yùn)行單個(gè)命令一樣簡(jiǎn)單。
wp-env是用于本地WordPress環(huán)境的零配置工具。它提供有關(guān)選項(xiàng)的決策，以便用戶可以快速啟動(dòng)WordPress而不會(huì)浪費(fèi)時(shí)間。事實(shí)上，我們的目標(biāo)是讓所有人都能輕松訪問這些環(huán)境——無論您是開發(fā)人員、設(shè)計(jì)師、經(jīng)理還是其他任何人。
如果您決定試一試，安裝wp-env所需的工作量很小。只需按照以下步驟操作：
第 1 步：確認(rèn)Docker和Node.js安裝
為了滿足技術(shù)要求，您首先需要在您的計(jì)算機(jī)上安裝Docker和Node.js。那是因?yàn)?code>wp-env創(chuàng)建了一個(gè)運(yùn)行WordPress網(wǎng)站的Docker實(shí)例。對(duì)代碼所做的任何更改都會(huì)立即反映在WordPress實(shí)例中。
第 2 步：從命令行安裝@wordpress/env
在您的計(jì)算機(jī)上運(yùn)行Docker和Node.js，您可以繼續(xù)安裝WordPress開發(fā)環(huán)境。
您可以全局或本地安裝wp-env。要在全局范圍內(nèi)執(zhí)行此操作，您需要從插件目錄中運(yùn)行以下命令（更多信息請(qǐng)參見下面的“重要”通知框）：
npm install -g @wordpress/env
讓我們分解一下：
npm install安裝包。-g附加到命令后全局安裝指定的包。@wordpress/env是您要安裝的軟件包。
提示：默認(rèn)情況下，在Mac或Linux上，節(jié)點(diǎn)包安裝在/usr/local/lib/node_modules中。
如果當(dāng)前用戶對(duì)該目錄沒有寫權(quán)限，則會(huì)發(fā)出EACCES錯(cuò)誤。了解有關(guān)在全局安裝包時(shí)解決EACCES權(quán)限錯(cuò)誤的更多信息。
要確認(rèn)wp-env已成功安裝，請(qǐng)運(yùn)行以下命令：
wp-env --version
您應(yīng)該會(huì)看到當(dāng)前wp-env版本，這意味著您現(xiàn)在可以使用插件文件夾中的以下命令啟動(dòng)環(huán)境：
wp-env start
您可以使用以下地址訪問WordPress儀表盤：
- http://localhost:8888/wp-admin/
默認(rèn)憑據(jù)如下：
- 用戶名：
admin - 密碼：
password
設(shè)置你的區(qū)塊插件
現(xiàn)在您需要一個(gè)入門區(qū)塊插件來構(gòu)建。但是，無需手動(dòng)創(chuàng)建包含所有必要文件和文件夾的開發(fā)區(qū)塊插件，您只需運(yùn)行一個(gè)開發(fā)工具，即可提供開始區(qū)塊開發(fā)所需的所有文件和配置。
同樣，您有幾個(gè)選項(xiàng)可供選擇。讓我們來看看每一個(gè)。
選項(xiàng) 1：使用@wordpress/create-block設(shè)置區(qū)塊插件
@wordpress/create-block是用于創(chuàng)建Gutenberg區(qū)塊的官方零配置工具：
創(chuàng)建區(qū)塊是一種官方支持的創(chuàng)建區(qū)塊的方法，用于為WordPress插件注冊(cè)區(qū)塊。它提供了一個(gè)沒有配置的現(xiàn)代構(gòu)建設(shè)置。它生成PHP、JS、CSS代碼以及啟動(dòng)項(xiàng)目所需的所有其他內(nèi)容。
它很大程度上受到create-react-app的啟發(fā)。向@gaearon、整個(gè)Facebook團(tuán)隊(duì)和React社區(qū)致敬。
本地環(huán)境啟動(dòng)并運(yùn)行后，您可以通過簡(jiǎn)單地運(yùn)行命令npx @wordpress/create-block 來設(shè)置起始區(qū)塊，它將提供創(chuàng)建插件腳手架和注冊(cè)新區(qū)塊所需的所有文件和文件夾。
讓我們運(yùn)行一個(gè)測(cè)試，看看它是如何工作的。
從命令行工具導(dǎo)航到/wp-content/plugins/目錄并運(yùn)行以下命令：
npx @wordpress/create-block my-first-block
當(dāng)要求確認(rèn)時(shí)，輸入y繼續(xù)：
使用@wordpress/create-block創(chuàng)建一個(gè)區(qū)塊
該過程需要一些時(shí)間。完成后，您應(yīng)該得到以下響應(yīng)：
區(qū)塊插件已創(chuàng)建
現(xiàn)在啟動(dòng)您的WordPress開發(fā)環(huán)境并轉(zhuǎn)到WordPress儀表盤中的插件屏幕。一個(gè)名為“My First Block”的新插件應(yīng)該已添加到您的插件列表中：
區(qū)塊插件已成功安裝
注：如果您使用wp-env工具并從包含插件的目錄運(yùn)行wp-env start，它將自動(dòng)掛載并激活該插件。如果您從任何其他目錄運(yùn)行wp-env start，將創(chuàng)建一個(gè)通用的WordPress環(huán)境（另請(qǐng)參閱WordPress開發(fā)站點(diǎn)）。
如果需要，激活插件，創(chuàng)建一個(gè)新的博客文章，向下滾動(dòng)區(qū)塊插入器到小工具部分，然后選擇你的新區(qū)塊：
使用@wordpress/create-block創(chuàng)建的示例區(qū)塊
現(xiàn)在返回終端并將當(dāng)前目錄更改為my-first-block：
cd my-first-block
然后運(yùn)行以下命令：
npm start
這使您能夠在開發(fā)模式下運(yùn)行插件。要?jiǎng)?chuàng)建生產(chǎn)代碼，您應(yīng)該使用以下命令：
npm run build
選項(xiàng) 2：使用create-guten-block設(shè)置區(qū)塊插件
create-guten-block是用于構(gòu)建古騰堡區(qū)塊的第三方開發(fā)工具：
create-guten-block零配置開發(fā)工具包 (#0CJS) 可在幾分鐘內(nèi)開發(fā)WordPress Gutenberg區(qū)塊，無需配置React、webpack、ES6/7/8/Next、ESLint、Babel等。
就像官方工具create-block一樣，create-guten-block基于create-react-app，可以幫助您輕松生成您的第一個(gè)區(qū)塊插件。
該工具包提供了創(chuàng)建現(xiàn)代WordPress插件所需的一切，包括以下內(nèi)容：
- React、JSX和ES6語(yǔ)法支持。
- 幕后的webpack開發(fā)/生產(chǎn)構(gòu)建過程。
- ES6之外的語(yǔ)言附加功能，例如對(duì)象擴(kuò)展運(yùn)算符。
- 自動(dòng)前綴CSS，因此您不需要 -webkit或其他前綴。
- 一個(gè)構(gòu)建腳本，用于將JS、CSS和圖像與源映射捆綁在一起進(jìn)行生產(chǎn)。
- 使用單個(gè)依賴項(xiàng)cgb-scripts對(duì)上述工具進(jìn)行無憂更新。
請(qǐng)注意以下警告：
權(quán)衡是這些工具已預(yù)先配置為以特定方式工作。如果您的項(xiàng)目需要更多自定義，您可以“eject” 并自定義它，但是您需要維護(hù)此配置。
一旦你手頭有一個(gè)本地WordPress網(wǎng)站，啟動(dòng)你的命令行工具，導(dǎo)航到你安裝的/wp-content/plugins文件夾，然后運(yùn)行以下命令：
npx create-guten-block my-first-block
在創(chuàng)建項(xiàng)目結(jié)構(gòu)并下載依賴項(xiàng)時(shí)，您必須等待一兩分鐘：
使用create-guten-block創(chuàng)建Gutenberg區(qū)塊
該過程完成后，您應(yīng)該會(huì)看到以下屏幕：
使用create-guten-block成功創(chuàng)建Gutenberg區(qū)塊
下一張圖片顯示了在Visual Studio Code中運(yùn)行終端的項(xiàng)目結(jié)構(gòu)：
Visual Studio Code中的區(qū)塊插件
現(xiàn)在回到您的WordPress儀表盤。插件屏幕中應(yīng)該會(huì)列出一個(gè)新項(xiàng)目——它是my-first-block插件：
使用create-guten-block創(chuàng)建的新插件的插件屏幕
激活插件并返回終端。將當(dāng)前目錄更改為my-first-block，然后運(yùn)行npm start：
cd my-first-block npm start
您應(yīng)該得到以下響應(yīng)：
npm啟動(dòng)
同樣，這使您能夠在開發(fā)模式下運(yùn)行插件。要?jiǎng)?chuàng)建生產(chǎn)代碼，您應(yīng)該使用：
npm run build
激活插件并創(chuàng)建一個(gè)新文章或頁(yè)面，然后瀏覽您的區(qū)塊并選擇您全新的古騰堡區(qū)塊：
使用create-guten-block創(chuàng)建的新區(qū)塊
如需更深入的概述或出現(xiàn)錯(cuò)誤，請(qǐng)參閱Ahmad Awais提供的文檔。
初學(xué)者區(qū)塊腳手架的演練
無論您選擇兩種開發(fā)工具中的哪一種——create-block或者create-guten-block——您現(xiàn)在都有一個(gè)區(qū)塊腳手架，您可以將其用作構(gòu)建區(qū)塊插件的起點(diǎn)。
但究竟什么是區(qū)塊腳手架？
區(qū)塊腳手架是一個(gè)簡(jiǎn)寫術(shù)語(yǔ)，描述了WordPress識(shí)別區(qū)塊所需的支持目錄結(jié)構(gòu)。通常，該目錄包括index.php、index.js、style.css等文件，而這些文件又包含
register_block_type.
我們選擇了官方的Create Block開發(fā)工具，因?yàn)樗贐lock Editor Handbook中使用。但即使您決定使用第三方工具，例如create-guten-block，您的體驗(yàn)也不會(huì)有太大不同。
話雖如此，讓我們更深入地了解該create-block工具。
仔細(xì)查看Create Block開發(fā)工具
正如我們上面提到的，創(chuàng)建區(qū)塊是創(chuàng)建古騰堡區(qū)塊的官方命令行工具。在終端中運(yùn)行@wordpress/create-block會(huì)生成注冊(cè)新區(qū)塊類型所需的PHP、JS和SCSS文件和代碼：
npx @wordpress/create-block [options] [slug]
[slug]（可選）- 用于分配區(qū)塊slug并安裝插件[options]（可選）- 可用選項(xiàng)
默認(rèn)情況下，分配一個(gè)ESNext模板。這意味著您將獲得JavaScript的下一個(gè)版本，并添加了JSX語(yǔ)法。
如果您省略區(qū)塊名稱，該命令將以交互模式運(yùn)行，使您能夠在生成文件之前自定義多個(gè)選項(xiàng)：
npx @wordpress/create-block
在交互模式下運(yùn)行create-block
下圖顯示了使用官方創(chuàng)建區(qū)塊工具創(chuàng)建的區(qū)塊插件的文件結(jié)構(gòu)：
使用@wordpress/create-block創(chuàng)建的區(qū)塊插件的文件和文件夾
話雖如此，讓我們?yōu)g覽一下新區(qū)塊插件的主要文件和文件夾。
插件文件
使用主插件文件在服務(wù)器上注冊(cè)區(qū)塊：
/**
* Plugin Name: My First Block
* Description: Example block written with ESNext standard and JSX support – build step required.
* Requires at least: 5.8
* Requires PHP: 7.0
* Version: 0.1.0
* Author: The WordPress Contributors
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: my-first-block
*
* @package create-block
*/
/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
* through the block editor in the corresponding context.
*
* @see https://developer.wordpress.org/block-editor/tutorials/block-tutorial/writing-your-first-block-type/
*/
function create_block_my_first_block_block_init() {
register_block_type( __DIR__ );
}
add_action( 'init', 'create_block_my_first_block_block_init' );
register_block_type函數(shù)使用存儲(chǔ)在block.json文件中的元數(shù)據(jù)在服務(wù)器上注冊(cè)一個(gè)區(qū)塊類型。
該函數(shù)有兩個(gè)參數(shù)：
- 包含命名空間的區(qū)塊類型名稱，或者block.json文件所在文件夾的路徑，或者一個(gè)完整的
WP_Block_Type對(duì)象 - 一組區(qū)塊類型參數(shù)
在上面的代碼中，區(qū)塊類型參數(shù)由__DIR__ 魔術(shù)常量提供。這意味著block.json文件與插件文件位于同一文件夾中。
package.json文件
package.json文件為您的項(xiàng)目定義JavaScript屬性和腳本。這是您可以安裝項(xiàng)目依賴項(xiàng)的地方。
為了更好地理解此文件的用途，請(qǐng)使用您喜歡的代碼編輯器打開它：
{
"name": "my-first-block",
"version": "0.1.0",
"description": "Example block written with ESNext standard and JSX support – build step required.",
"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",
"start": "wp-scripts start",
"packages-update": "wp-scripts packages-update"
},
"dependencies": {
"@wordpress/block-editor": "^7.0.1",
"@wordpress/blocks": "^11.0.1",
"@wordpress/i18n": "^4.2.1"
},
"devDependencies": {
"@wordpress/scripts": "^18.0.0"
}
}
scripts 屬性是一個(gè)字典，其中包含使用npm run [cmd].
在本文中，我們將使用以下命令：
npm run build— 創(chuàng)建一個(gè)（壓縮的）生產(chǎn)版本npm run start— 創(chuàng)建一個(gè)（未壓縮的）開發(fā)版本
dependencies和devDependencies是將包名稱映射到版本的兩個(gè)對(duì)象。dependencies在生產(chǎn)中需要，而devDependences僅在本地開發(fā)中需要（閱讀更多）。
唯一的默認(rèn)開發(fā)依賴項(xiàng)是@wordpress/scripts包，它被定義為“為WordPress開發(fā)量身定制的可重用腳本的集合”。
block.json文件
從WordPress 5.8開始，block.json元數(shù)據(jù)文件是注冊(cè)區(qū)塊類型的規(guī)范方式。
擁有一個(gè)block.json文件有幾個(gè)好處，包括提高性能和在WordPress插件目錄上更好的可見性：
從性能的角度來看，當(dāng)主題支持延遲加載資產(chǎn)時(shí)，使用block.json注冊(cè)的區(qū)塊將對(duì)其資產(chǎn)排隊(duì)進(jìn)行開箱即用的優(yōu)化。
style或script屬性中列出的前端CSS和JavaScript資產(chǎn)僅在頁(yè)面上存在區(qū)塊時(shí)才會(huì)入隊(duì)，從而減少頁(yè)面大小。
運(yùn)行@wordpress/create-block命令會(huì)生成以下block.json文件：
{
"apiVersion": 2,
"name": "create-block/my-first-block",
"version": "0.1.0",
"title": "My First Block",
"category": "widgets",
"icon": "smiley",
"description": "Example block written with ESNext standard and JSX support – build step required.",
"supports": {
"html": false
},
"textdomain": "my-first-block",
"editorScript": "file:./build/index.js",
"editorStyle": "file:./build/index.css",
"style": "file:./build/style-index.css"
}
這是默認(rèn)屬性的完整列表：
apiVersion— 區(qū)塊使用的API版本（當(dāng)前版本為2）name— 包含命名空間的區(qū)塊的唯一標(biāo)識(shí)符version— 區(qū)塊的當(dāng)前版本title— 區(qū)塊的顯示標(biāo)題category— 區(qū)塊類別icon— Dashicon slug或自定義SVG圖標(biāo)description— 在區(qū)塊檢查器中可見的簡(jiǎn)短描述supports— 一組用于控制編輯器中使用的功能的選項(xiàng)textdomain— 插件文本域editorScript— 編輯器腳本定義editorStyle— 編輯器樣式定義style— 為區(qū)塊提供替代樣式
除了上面列出的屬性之外，您還可以（并且可能會(huì)）定義一個(gè)attributes對(duì)象，提供有關(guān)您的區(qū)塊存儲(chǔ)的數(shù)據(jù)的信息。在您的block.json中，您可以在鍵/值對(duì)中設(shè)置任意數(shù)量的屬性，其中鍵是屬性名稱，值是屬性定義。
看看下面的屬性定義示例：
"attributes": {
"content": {
"type": "array",
"source": "children",
"selector": "p"
},
"align": {
"type": "string",
"default": "none"
},
"link": {
"type": "string",
"default": "https://www.wbolt.com"
}
},
我們將在本文后面深入研究block.json文件，但您可能還想查看區(qū)塊編輯器手冊(cè)以獲取有關(guān)block.json元數(shù)據(jù)和屬性的更多詳細(xì)信息。
src文件夾
src文件夾是開發(fā)發(fā)生的地方。在該文件夾中，您將找到以下文件：
- index.js
- edit.js
- save.js
- editor.scss
- style.scss
index.js
index.js文件是您的起點(diǎn)。在這里，您將導(dǎo)入依賴項(xiàng)并在客戶端上注冊(cè)區(qū)塊類型：
import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import save from './save';
registerBlockType('create-block/my-first-block', {
edit: Edit,
save,
});
第一條語(yǔ)句從@wordpress/blocks包中導(dǎo)入函數(shù)registerBlockType。以下import語(yǔ)句將樣式表與Edit和save函數(shù)一起導(dǎo)入。
registerBlockType函數(shù)在客戶端注冊(cè)組件。該函數(shù)有兩個(gè)參數(shù)：一個(gè)區(qū)塊名稱namespace/block-name（與在服務(wù)器上注冊(cè)的相同）和一個(gè)區(qū)塊配置對(duì)象。
Edit函數(shù)提供了在區(qū)塊編輯器中呈現(xiàn)的區(qū)塊界面，而save函數(shù)提供了將被序列化并保存到數(shù)據(jù)庫(kù)中的結(jié)構(gòu)（閱讀更多）。
edit.js
edit.js是您構(gòu)建區(qū)塊管理界面的地方：
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';
export default function Edit() {
return (
{__('My First Block – hello from the editor!', 'my-first-block')}
);
}
首先，它從@wordpress/i18n包中導(dǎo)入函數(shù)__（這個(gè)包包含翻譯函數(shù)的JavaScript版本）、useBlockProps React鉤子和editor.scss文件。
之后，它會(huì)導(dǎo)出React組件（閱讀有關(guān)導(dǎo)入和導(dǎo)出語(yǔ)句的更多信息）。
save.js
save.js文件是我們構(gòu)建要保存到數(shù)據(jù)庫(kù)中的區(qū)塊結(jié)構(gòu)的位置：
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
export default function save() {
return (
{__(
'My First Block – hello from the saved content!',
'my-first-block'
)}
);
}
editor.scss和style.scss
除了腳本之外，還有兩個(gè)SASS文件位于src文件夾中。editor.scss文件包含應(yīng)用于編輯器上下文中區(qū)塊的樣式，而style.scss文件包含用于在前端顯示的區(qū)塊的樣式。我們將在本指南的第二部分深入研究這些文件。
node_modules和構(gòu)建文件夾
node_modules文件夾包含節(jié)點(diǎn)模塊及其依賴項(xiàng)。我們不會(huì)深入探討節(jié)點(diǎn)包，因?yàn)樗隽吮疚牡姆秶?，但您可以在本文中閱讀更多關(guān)于npm安裝包的位置的文章。
build文件夾包含構(gòu)建過程產(chǎn)生的JS和CSS文件。您可以在ESNext語(yǔ)法和JavaScript構(gòu)建設(shè)置指南中深入了解構(gòu)建過程。
項(xiàng)目：建造你的第一個(gè)古騰堡區(qū)塊
是時(shí)候弄臟我們的手了。本節(jié)將教你如何創(chuàng)建一個(gè)插件，提供一個(gè)名為Affiliate Block的CTA區(qū)塊。
該區(qū)塊將由兩列組成，左側(cè)是圖像，右側(cè)是文本段落。帶有可自定義鏈接的按鈕將放置在文本下方：
您將在本指南中學(xué)習(xí)構(gòu)建的區(qū)塊類型
這只是一個(gè)簡(jiǎn)單的示例，但它允許我們涵蓋古騰堡區(qū)塊開發(fā)的基礎(chǔ)知識(shí)。一旦你清楚地了解了基礎(chǔ)知識(shí)，你就可以在區(qū)塊編輯器手冊(cè)和任何其他可用的大量資源的幫助下繼續(xù)創(chuàng)建越來越復(fù)雜的古騰堡區(qū)塊。
Tips: 本教程中提供的示例代碼也可以在Gist上找到，供您參考。
假設(shè)您在本地開發(fā)環(huán)境中運(yùn)行了最新版本的WordPress，以下是您將從這里學(xué)到的內(nèi)容：
- 如何設(shè)置初學(xué)者區(qū)塊插件
- 工作中的block.json
- 使用內(nèi)置組件：RichText組件
- 向區(qū)塊工具欄添加控件
- 自定義區(qū)塊設(shè)置側(cè)邊欄
- 添加和自定義外部鏈接
- 添加多個(gè)區(qū)塊樣式
- 使用InnerBlocks組件嵌套區(qū)塊
- 其他改進(jìn)
如何設(shè)置初學(xué)者區(qū)塊插件
啟動(dòng)命令行工具并導(dǎo)航到/wp-content/plugins文件夾：
Mac OS文件夾中的新終端
現(xiàn)在，運(yùn)行以下命令：
npx @wordpress/create-block此命令生成用于在交互模式下注冊(cè)區(qū)塊的PHP、SCSS和JS文件，使您可以輕松地為您的區(qū)塊添加必要的數(shù)據(jù)。對(duì)于我們的示例，我們將使用以下詳細(xì)信息：
- Block slug: my-affiliate-block
- Internal namespace: my-affiliate-plugin
- Block display title: Affiliate block
- Short block description: An example block for Kinsta readers
- Dashicon: money
- Category name: design
- Plugin author: your name
- License: –
- Link to the license text: –
- Current plugin version: 0.1.0
安裝插件和所有依賴項(xiàng)需要幾分鐘。該過程完成后，您將看到以下響應(yīng)：
已安裝并注冊(cè)了Affiliate區(qū)塊以進(jìn)行開發(fā)
現(xiàn)在，從/wp-content/plugins文件夾運(yùn)行以下命令：
cd my-affiliate-block
Tips: 如果您正在運(yùn)行WordPress環(huán)境，則應(yīng)首先啟動(dòng)Docker Desktop，然后從插件文件夾中運(yùn)行
wp-env start。然后，您可以從Web瀏覽器啟動(dòng)http://localhost:8888/wp-login并使用Username：admin和Password：password登錄到您的WordPress儀表盤。
從Visual Studio代碼終端運(yùn)行命令
最后，在您的插件文件夾中（在我們的示例中為my-affiliate-block），您可以使用以下命令開始開發(fā)：
npm start
現(xiàn)在打開插件屏幕以查找并激活Affiliate Block插件：
Affiliate區(qū)塊插件
創(chuàng)建一個(gè)新文章，打開區(qū)塊插入器，然后向下滾動(dòng)到設(shè)計(jì)Design類別。單擊以添加Affiliate區(qū)塊：
使用@wordpress/create-block構(gòu)建的初學(xué)者區(qū)塊
工作中的block.json
正如我們前面提到的，服務(wù)器端區(qū)塊注冊(cè)發(fā)生在主.php文件中。但是，我們不會(huì)在.php文件中定義設(shè)置。相反，我們將使用block.json文件。
因此，再次打開block.json并仔細(xì)查看默認(rèn)設(shè)置：
{
"apiVersion": 2,
"name": "my-affiliate-plugin/my-affiliate-block",
"version": "0.1.0",
"title": "Affiliate Block",
"category": "design",
"icon": "money",
"description": "An example block for Kinsta readers",
"supports": {
"html": false
},
"textdomain": "my-affiliate-block",
"editorScript": "file:./build/index.js",
"editorStyle": "file:./build/index.css",
"style": "file:./build/style-index.css"
}
腳本和樣式
editorScript、editorStyle和style屬性提供前端和后端腳本和樣式的相對(duì)路徑。
您不必手動(dòng)注冊(cè)此處定義的腳本和樣式，因?yàn)樗鼈兪怯蒞ordPress自動(dòng)注冊(cè)和排隊(duì)的。為了證明這一點(diǎn)，啟動(dòng)瀏覽器檢查器并打開Network選項(xiàng)卡：
檢查Chrome DevTools中的資源
從上圖中可以看出，我們駐留在build文件夾中的index.js腳本已定期排入隊(duì)列，而無需添加任何PHP代碼。
用戶界面標(biāo)簽
title和description屬性提供了在編輯器中識(shí)別區(qū)塊所需的標(biāo)簽：
區(qū)塊側(cè)欄中的區(qū)塊名稱和描述
關(guān)鍵詞
正如我們之前提到的，您可以使用properties和attributes準(zhǔn)確地配置您的區(qū)塊設(shè)置。例如，您可以添加一個(gè)或多個(gè)keywords來幫助用戶搜索區(qū)塊：
{ "keywords": [ "wbolt", "affiliate", "money" ] }
如果您現(xiàn)在在快速插入器中輸入“wbolt”、“affiliate”或“money”，編輯器會(huì)建議您使用Affiliate區(qū)塊：
在快速插入器中使用關(guān)鍵字搜索區(qū)塊
本土化
如果您想知道JSON文件中字符串的本地化是如何發(fā)生的，答案如下：
在JavaScript中，您可以使用
@wordpress/blocks包中的nowregisterBlockTypeFromMetadata方法使用從block.json文件加載的元數(shù)據(jù)注冊(cè)區(qū)塊類型。所有本地化屬性都會(huì)自動(dòng)包裝在_x（來自@wordpress/i18n包）函數(shù)調(diào)用中，類似于它在PHP中的register_block_type_from_metadata工作方式。唯一的要求是在block.json文件中設(shè)置textdomain屬性。
這里我們使用registerBlockType函數(shù)而不是registerBlockTypeFromMetadata，因?yàn)楹笳咦怨膨v堡10.7以來已被棄用，但機(jī)制是相同的。
使用內(nèi)置組件：RichText組件
構(gòu)成Gutenberg區(qū)塊的元素是React組件，您可以通過wp全局變量訪問這些組件。例如，嘗試在瀏覽器的控制臺(tái)中輸入wp.editor。這將為您提供wp.editor模塊中包含的組件的完整列表。
滾動(dòng)列表并猜測(cè)其名稱所代表的組件。
同樣，您可以檢查wp.components模塊中包含的組件列表：
WP編輯器組件
Tips: 模塊化編程是一種軟件設(shè)計(jì)技術(shù)，強(qiáng)調(diào)將程序的功能分離為獨(dú)立的、可互換的模塊，這樣每個(gè)模塊都包含執(zhí)行所需功能的一個(gè)方面所需的一切（來源：維基百科）。
現(xiàn)在回到edit.js文件并仔細(xì)查看腳本：
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';
export default function Edit() {
return (
{__('My First Block – hello from the editor!', 'my-first-block')}
);
}
此代碼生成一個(gè)帶有簡(jiǎn)單、不可編輯文本的靜態(tài)區(qū)塊。但是我們可以很容易地改變：
代碼編輯器中的初學(xué)者區(qū)塊
要使文本可編輯，您必須將當(dāng)前標(biāo)記替換為使輸入內(nèi)容可編輯的組件。為此，Gutenberg提供了內(nèi)置的RichText組件。
將內(nèi)置組件添加到區(qū)塊中需要5個(gè)步驟：
第 1 步：從WordPress包中導(dǎo)入所需的組件
現(xiàn)在打開edit.js文件并更改以下import語(yǔ)句：
import { useBlockProps } from '@wordpress/block-editor';
…到：
import { useBlockProps, RichText } from '@wordpress/block-editor';
這樣，您就可以從 @wordpress/block-editor包中導(dǎo)入useBlockProps函數(shù)和 RichText組件。
使用BlockProps
useBlockPropsReact鉤子標(biāo)記了區(qū)塊的wrapper元素：
使用API版本2時(shí)，您必須使用區(qū)塊函數(shù)
edit中的新鉤子useBlockProps來標(biāo)記區(qū)塊的wrapper元素。該鉤子將插入啟用區(qū)塊行為所需的屬性和事件處理程序。您希望傳遞給區(qū)塊元素的任何屬性都必須通過useBlockProps傳遞，并且返回的值必須分布到元素上。
簡(jiǎn)單地說，useBlockProps自動(dòng)將屬性和類分配給wrapper元素（我們示例中的p元素）：
由useBlockProps生成的元素和類
如果useBlockProps從wrapper元素中刪除，您將擁有一個(gè)簡(jiǎn)單的文本字符串，無法訪問區(qū)塊功能和樣式：
沒有useBlockProps的同一個(gè)區(qū)塊
正如我們稍后將解釋的，您還可以傳遞給useBlockProps屬性對(duì)象來自定義輸出。
富文本
RichText組件提供了一個(gè)contenteditable輸入，允許用戶編輯和格式化內(nèi)容。
您可以在GitHub上的gutenberg/packages/block-editor/src/components/rich-text/README.md找到該組件。
第 2 步：在JSX代碼中包含相應(yīng)的元素
... const blockProps = useBlockProps(); return ();
讓我們逐行注釋代碼：
tagName— 可編輯HTML元素的標(biāo)簽名稱onChange— 當(dāng)元素內(nèi)容改變時(shí)調(diào)用的函數(shù)allowedFormats— 一組允許的格式。默認(rèn)情況下，允許所有格式value— 可編輯的HTML字符串placeholder— 當(dāng)元素為空時(shí)顯示的占位符文本
第 3 步：在block.json文件中定義必要的屬性
屬性提供有關(guān)區(qū)塊存儲(chǔ)的數(shù)據(jù)的信息，例如豐富的內(nèi)容、背景顏色、URL等。
您可以在一個(gè)對(duì)象中以鍵/值對(duì)的形式設(shè)置任意數(shù)量的屬性attributes，其中鍵是屬性名稱，值是屬性定義。
現(xiàn)在打開block.json文件并添加以下屬性attributes：
"attributes": {
"content": {
"type": "string",
"source": "html",
"selector": "p"
}
},
content屬性允許將用戶輸入的文本存儲(chǔ)在可編輯字段中：
type表示屬性存儲(chǔ)的數(shù)據(jù)類型。除非您定義enum屬性，否則該類型是必需的。source定義如何從文章內(nèi)容中提取屬性值。在我們的示例中，它是HTML內(nèi)容。請(qǐng)注意，如果您不提供源屬性，則數(shù)據(jù)將存儲(chǔ)在區(qū)塊分隔符中（閱讀更多）。selector是HTML標(biāo)記或任何其他選擇器，例如類名或id屬性。
我們將向Edit函數(shù)傳遞一個(gè)屬性對(duì)象。因此，返回到edit.js文件并進(jìn)行以下更改：
export default function Edit( { attributes, setAttributes } ) { ... }
第 4 步：定義事件處理程序
RichText元素有一個(gè)onChange屬性，當(dāng)元素的內(nèi)容改變時(shí)提供一個(gè)函數(shù)來調(diào)用。
讓我們定義該函數(shù)并查看整個(gè)edit.js腳本：
import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss';
export default function Edit( { attributes, setAttributes } ) {
const blockProps = useBlockProps();
const onChangeContent = ( newContent ) => {
setAttributes( { content: newContent } )
}
return (
現(xiàn)在保存文件并在終端窗口中運(yùn)行npm run start。然后，返回您的WordPress儀表盤，創(chuàng)建一個(gè)新文章或頁(yè)面并添加您的Affiliate區(qū)塊：
區(qū)塊編輯器中RichText組件的輸出
添加一些文本并切換到代碼視圖。這是您的代碼應(yīng)如下所示：
This is my first editable Gutenberg block ?
如果您現(xiàn)在保存頁(yè)面并檢查前端結(jié)果，您可能會(huì)有點(diǎn)失望，因?yàn)槟母牟粫?huì)影響站點(diǎn)。那是因?yàn)槟仨毿薷?strong>save.js文件以在保存文章時(shí)將用戶輸入存儲(chǔ)在數(shù)據(jù)庫(kù)中。
第 5 步：保存數(shù)據(jù)
現(xiàn)在打開save.js文件并更改腳本如下：
import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
export default function save( { attributes } ) {
const blockProps = useBlockProps.save();
return (
這就是我們?cè)谶@里所做的：
RichText從包中導(dǎo)入組件block-editor。- 通過一個(gè)對(duì)象參數(shù)向
save函數(shù)傳遞幾個(gè)屬性（在這個(gè)例子中，我們只傳遞了attributes屬性） - 返回組件的
RichText內(nèi)容
注：每當(dāng)您更改保存功能時(shí)，您必須刪除編輯器畫布中的任何區(qū)塊實(shí)例并再次包含它以查看它是否正常工作。閱讀有關(guān)區(qū)塊驗(yàn)證的更多信息。
您可以在區(qū)塊編輯器手冊(cè)中閱讀有關(guān)該RichText組件的更多信息，并在Github上找到完整的道具列表。
現(xiàn)在讓我們更進(jìn)一步。在下一節(jié)中，您將學(xué)習(xí)如何將控件添加到區(qū)塊工具欄。
向區(qū)塊工具欄添加控件
區(qū)塊工具欄包含一組控件，允許用戶操作部分區(qū)塊內(nèi)容。對(duì)于每個(gè)工具欄控件，您都會(huì)找到一個(gè)組件：
核心段落區(qū)塊工具欄
例如，您可以為區(qū)塊添加文本對(duì)齊控件。您需要做的就是從@wordpress/block-editor包中導(dǎo)入兩個(gè)組件。
我們將執(zhí)行與上一個(gè)示例相同的步驟：
第 1 步：從@wordpress/block-editor導(dǎo)入BlockControls和AlignmentControl組件
要將對(duì)齊控件添加到區(qū)塊工具欄，您需要兩個(gè)組件：
BlockControls呈現(xiàn)控件的動(dòng)態(tài)工具欄（未記錄）。AlignmentControl呈現(xiàn)一個(gè)下拉菜單，顯示所選區(qū)塊的對(duì)齊選項(xiàng)（閱讀更多）
打開edit.js文件，編輯import語(yǔ)句如下圖：
import {
useBlockProps,
RichText,
AlignmentControl,
BlockControls
} from '@wordpress/block-editor';
第 2 步：添加BlockControls和AlignmentControl元素
轉(zhuǎn)到Edit函數(shù)并插入與
export default function Edit( { attributes, setAttributes } ) {
const blockProps = useBlockProps();
return (
<>
在上面的代碼中，<>和是聲明React片段的簡(jiǎn)短語(yǔ)法，這是我們?cè)赗eact中返回多個(gè)元素的方式。
在這個(gè)例子中，AlignmentControl有兩個(gè)屬性：
value提供元素的當(dāng)前值onChange提供在值更改時(shí)運(yùn)行的事件處理程序
我們還為RichText元素定義了額外的屬性（查看完整的屬性列表和示例）
第三步：在block.json中定義align屬性
現(xiàn)在轉(zhuǎn)到block.json文件并添加align屬性：
"align": {
"type": "string",
"default": "none"
}
返回終端，使用^C停止當(dāng)前進(jìn)程并使用npm run start重新啟動(dòng)腳本。然后返回區(qū)塊編輯器，刷新頁(yè)面并選擇區(qū)塊。您應(yīng)該會(huì)看到帶有對(duì)齊控件的區(qū)塊工具欄：
對(duì)齊工具欄已成功添加
現(xiàn)在，如果您嘗試使用新的對(duì)齊控件格式化區(qū)塊內(nèi)容，您會(huì)發(fā)現(xiàn)沒有任何反應(yīng)。那是因?yàn)槲覀冞€沒有定義事件處理程序。
第 4 步：定義事件處理程序
現(xiàn)在定義onChangeAlign：
const onChangeAlign = ( newAlign ) => {
setAttributes( {
align: newAlign === undefined ? 'none' : newAlign,
} )
}
如果newAlign是undefined，那么我們?cè)O(shè)置newAlign為none。否則，我們使用newAlign.
我們的edit.js腳本應(yīng)該是完整的（現(xiàn)在）：
export default function Edit( { attributes, setAttributes } ) {
const blockProps = useBlockProps();
const onChangeContent = ( newContent ) => {
setAttributes( { content: newContent } )
}
const onChangeAlign = ( newAlign ) => {
setAttributes( {
align: newAlign === undefined ? 'none' : newAlign,
} )
}
return (
<>
現(xiàn)在您可以返回編輯器并對(duì)齊區(qū)塊內(nèi)容。
我們需要修改save函數(shù)，將區(qū)塊的內(nèi)容和屬性存儲(chǔ)在數(shù)據(jù)庫(kù)中。
第 5 步：保存數(shù)據(jù)
打開save.js，修改save函數(shù)如下：
export default function save( { attributes } ) {
const blockProps = useBlockProps.save();
return (
最后，為了使代碼更具可讀性，您可以使用解構(gòu)賦值語(yǔ)法從attribute對(duì)象中提取各個(gè)屬性：
export default function save( { attributes } ) {
const blockProps = useBlockProps.save();
const { content, align } = attributes;
return (
保存文件，重新啟動(dòng)進(jìn)程并以代碼編輯器模式返回編輯器。代碼應(yīng)如下所示：
This is my first editable Gutenberg block ?
右對(duì)齊文本
就是這樣！您剛剛向區(qū)塊工具欄添加了對(duì)齊控件?
您可以在區(qū)塊編輯器手冊(cè)中閱讀有關(guān)區(qū)塊工具欄控件的更多信息。
自定義區(qū)塊設(shè)置側(cè)邊欄
您還可以將控件添加到區(qū)塊設(shè)置側(cè)邊欄（甚至為您的應(yīng)用程序創(chuàng)建一個(gè)新的側(cè)邊欄）。
API為此提供了一個(gè)InspectorControls組件。
區(qū)塊編輯器手冊(cè)解釋了如何使用設(shè)置邊欄：
設(shè)置側(cè)邊欄用于顯示不常用的設(shè)置或需要更多屏幕空間的設(shè)置。設(shè)置側(cè)邊欄應(yīng)僅用于區(qū)塊級(jí)設(shè)置。
如果您的設(shè)置僅影響區(qū)塊內(nèi)的選定內(nèi)容（例如：段落內(nèi)選定文本的“粗體”設(shè)置）：請(qǐng)勿將其放在設(shè)置側(cè)邊欄中。即使在HTML模式下編輯區(qū)塊時(shí)也會(huì)顯示設(shè)置側(cè)邊欄，因此它應(yīng)該只包含區(qū)塊級(jí)設(shè)置。
再次：
步驟 1. 從@wordpress/block-editor導(dǎo)入InspectorControls和PanelColorSettings組件
您可以添加多個(gè)控件以允許用戶自定義區(qū)塊的特定方面。例如，您可以提供一個(gè)顏色控制面板。為此，您需要從block-editor模塊中導(dǎo)入InspectorControls和PanelColorSettings組件：
import {
useBlockProps,
RichText,
AlignmentControl,
BlockControls,
InspectorControls,
PanelColorSettings
} from '@wordpress/block-editor';
第 2 步：在JSX代碼中包含相應(yīng)的元素
現(xiàn)在您可以將相應(yīng)的元素添加到Edit函數(shù)返回的JSX中：
export default function Edit( { attributes, setAttributes } ) {
const blockProps = useBlockProps();
const onChangeContent = ( newContent ) => {
setAttributes( { content: newContent } )
}
const onChangeAlign = ( newAlign ) => {
setAttributes( {
align: newAlign === undefined ? 'none' : newAlign,
} )
}
return (
<>
請(qǐng)注意，我們還更新了RichText元素的style屬性：
第 3 步：在block.json中定義必要的屬性
現(xiàn)在在block.json文件中定義backgroundColor和textColor屬性：
"attributes": {
"content": {
"type": "string",
"source": "html",
"selector": "p"
},
"align": {
"type": "string",
"default": "none"
},
"backgroundColor": {
"type": "string"
},
"textColor": {
"type": "string"
}
},
第 4 步：定義事件處理程序
現(xiàn)在您需要定義backgroundColor和textColor兩個(gè)函數(shù)來更新用戶輸入：
const onChangeBackgroundColor = ( newBackgroundColor ) => {
setAttributes( { backgroundColor: newBackgroundColor } )
}
const onChangeTextColor = ( newTextColor ) => {
setAttributes( { textColor: newTextColor } )
}
第 5 步：保存數(shù)據(jù)
最后一步：打開save.js文件并按如下方式更改腳本：
export default function save( { attributes } ) {
const blockProps = useBlockProps.save();
const { content, align, backgroundColor, textColor } = attributes;
return (
現(xiàn)在停止進(jìn)程 (^C) 并再次運(yùn)行npm run start。刷新頁(yè)面，刪除任何區(qū)塊實(shí)例并將其再次添加到您的文章中：
帶有顏色設(shè)置面板的自定義區(qū)塊
進(jìn)行更改，保存文章，然后在前端查看。您在區(qū)塊編輯器中所做的更改應(yīng)反映在前端站點(diǎn)上。
添加和自定義外部鏈接
在本節(jié)中，您將向區(qū)塊類型添加新組件：
ExternalLink允許用戶將可自定義鏈接添加到Affiliate區(qū)塊的組件- 幾個(gè)側(cè)邊欄控件允許用戶自定義鏈接設(shè)置
步驟 1. 從@wordpress/components導(dǎo)入組件
現(xiàn)在需要從@wordpress/components導(dǎo)入幾個(gè)組件。打開你的edit.js文件并添加以下import語(yǔ)句：
import {
TextControl,
PanelBody,
PanelRow,
ToggleControl,
ExternalLink
} from '@wordpress/components';
< 文章標(biāo)題：構(gòu)建自定義古騰堡區(qū)塊：權(quán)威WordPress區(qū)塊開發(fā)教程
文章路徑：http://www.fisionsoft.com.cn/article/dhoiphh.html
