將飛輪定價表重建為自定義塊（大約 10 分鐘）

已發表: 2021-03-31

（古騰堡）塊編輯器無疑是現代 WordPress 的中心。隨著對 WordPress Core 的完整站點編輯，塊和他們承諾的一切都將留在這裡。

然而，積木並不總是做我們想做的事或看起來像我們喜歡的樣子。如果您以設計和構建網站為生，您就會知道千篇一律的東西在網絡上只能走這麼遠。在某些時候，我們需要頁面上的“塊”以一種非常特殊的方式顯示或表現。

自定義塊是這裡的解決方案！但是對於許多已經使用 WordPress 一段時間的人來說，自定義塊需要一種非常不同的開發方法。

不同的？是的！

難的？不！

我將向您展示如何輕鬆構建完全自定義的塊。大約需要10分鐘。對於任何想要在塊編輯器周圍提高技能的自由職業者或代理工作人員，我想你會喜歡這個的！

塊

假設我們正在做一個項目，設計師遞給我們一個電子商務網站的精美設計。它使用了最好的 WordPress + WooCommerce，但也有一些不能現成的。其中之一就是這裡：

霍普！這看起來很熟悉！

是的，我們將重建飛輪定價表作為自定義塊。 ? 周圍有即插即用的定價表塊，但我們這裡的價格表非常獨特，所以我們要推出自己的。

設置

這個故事的主角是一個名為 Genesis Custom Blocks 的插件。它在 wordpress.org 上是免費的，並且有一個 Pro 版本，它提供了一些很酷的高級功能，包括：

全新的 WordPress 安裝 – 本地的讚美
Genesis Custom Blocks（免費一個）已安裝並處於活動狀態
Genesis Block 主題的子主題

重要提示：Genesis Custom Blocks 不依賴於 Genesis 框架、上述 Genesis Block 主題或任何其他插件或主題。

註冊和配置塊

這個插件的美妙之處在於我們可以在 WordPress 管理員中做很多事情。

在 WordPress 管理員的左側菜單中，轉到自定義塊 > 添加新

我們現在看到的屏幕是塊生成器，我們將在其中為我們的塊配置一堆東西，包括添加字段。

這個插件的工作方式是它創建自定義塊，用戶在塊編輯器中工作，通過類似表單的界面中的字段輸入內容和數據。這個簡化/有主見的界面是加快自定義塊創建過程的因素之一。您無需弄清楚輸入 UI。

我們添加的塊詳細信息是：

名稱：定價表
蛞蝓：定價表
圖標：創世紀星球

我們添加的字段是：

姓名	蛞蝓	字段類型
圖標	圖標	圖片
姓名	姓名	文本
描述	描述	文本
價格	價格	數字
按鈕網址	按鈕網址	網址
站點計數	站點計數	數字
每月訪問	每月訪問	數字
磁盤空間	磁盤空間	數字
帶寬	帶寬	數字

向我們的自定義塊添加字段如下所示：

一旦我們添加了所有字段，它就是這樣的：

當我們點擊發佈時，我們會得到一個提示，提示我們下一步該做什麼。

這導致我們進入下一步：

模板化塊

該塊實際上已註冊並且現在可以在塊編輯器中使用。您可以跳到一個新的帖子/頁面並像添加任何其他塊一樣添加塊。它不會（還）顯示任何東西。這就是模板的用武之地。

Genesis Custom Blocks 讓 WordPress 開發人員可以利用我們在過去十年左右磨練出來的大量模板實踐。它超級簡單，感覺很熟悉。

在我們的子主題中，我們添加了幾個新文件夾和文件，如下所示：

/genesis-block-child-theme
    /blocks
        /pricing-table
            block.php
            block.css

這裡需要注意的事項：

我們在主題（子主題）中添加了一個blocks文件夾。
我們添加一個特定於我們當前正在處理的塊的文件夾，並將其命名為塊 slug 的任何名稱，在本例中為pricing-table 。
我們添加一個 PHP 文件和 CSS 文件。這些是我們將添加模板代碼的地方。

從我們的 PHP 文件開始，讓我們從基本的 HTML 標記和 CSS 類開始。

這將如下所示：

<div class="fw-pricing-table">
    <img src="">
    <h3 class="fw-pricing-table__name"></h3>
    <p class="fw-pricing-table__description"></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><span> monthly visits</span></p>
			<progress value="" max="400000"></progress>
		</div>
		<div>
			<p><span>GB Disk</span></p>
			<progress value="" max="50"></progress>
		</div>
		<div>
			<p><<span>GB bandwidth</span></p>
			<progress value="" max="500"></progress>
		</div>
	</div>
</div>

需要注意的事項：

我們已經準備好了一堆 CSS 類。注意：您可以處理 CSS，但對您有意義。
我們將使用<progress> HTML 標籤來處理我們的資源欄。

現在我們將使用插件提供給我們的一個簡單的 PHP 函數。有很多可用的，但您可能會花費大部分時間使用下面的這 2 個。我們在這個塊中專門使用第一個。

功能	它能做什麼
`block_field()`	在將塊添加到頁面/帖子時，獲取並輸出用戶輸入到字段中的數據。
`block_value()`	在將塊添加到頁面/帖子時，獲取用戶輸入到字段中的數據。

所以，有了這些函數，我們的 PHP 模板文件現在看起來像這樣：

<div class="fw-pricing-table">
    <img src="<?php block_field( 'icon' ); ?>">
    <h3 class="fw-pricing-table__name"><?php block_field( 'name' ); ?></h3>
    <p class="fw-pricing-table__description"><?php block_field( 'description' ); ?></p>
    <div class="fw-pricing-table__price">
        <span>$</span>
        <span><?php block_field( 'price' ); ?></span>
        <span>/mo</span>
    </div>
	<a class="fw-pricing-table__btn" href="<?php block_field( 'url' ); ?>">Get Started</a>
	<div class="fw-pricing-table__site-count">
		<span><?php block_field( 'site-count' ); ?></span>
		<span>WordPress Site</span>
	</div>
	<div class="fw-pricing-table__resources">
		<div>
			<p><?php block_field( 'monthly-visits' ); ?><span> monthly visits</span></p>
			<progress value="<?php block_field( 'monthly-visits' ); ?>" max="400000"></progress>
		</div>
		<div>
			<p><?php block_field( 'disk-space' ); ?><span>GB Disk</span></p>
			<progress value="<?php block_field( 'disk-space' ); ?>" max="50"></progress>
		</div>
		<div>
			<p><?php block_field( 'bandwidth' ); ?><span>GB bandwidth</span></p>
			<progress value="<?php block_field( 'bandwidth' ); ?>" max="500"></progress>
		</div>
	</div>
</div>

你可以看到我們在哪裡使用了block_field()函數來獲取和輸出數據。我們只是將字段的 slug 用作函數中的參數。例如block_field( 'icon' ) 。這是一個圖像字段類型，返回該圖像的 URL。

對於我們的 CSS，我們將它放在 block.css 模板文件中。再一次，CSS 可以隨心所欲地旋轉，我編寫的特定代碼與本教程並不特別相關，但我將把它留在這裡供您查看。

.fw-pricing-table {
    border-radius: 4px;
    transition: box-shadow .3s ease-in-out;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 2rem 2em 4em;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fw-pricing-table:hover {
    box-shadow: 0 5px 22px 0 rgb(0 0 0 / 10%);
}

.fw-pricing-table img {
    max-height: 100px;
    width: auto;
}

.fw-pricing-table__name {
    margin-top: 20px;
    font-weight: 400;
}

.fw-pricing-table__description {
    font-size: 16px;
    font-style: italic;
    font-family: serif;
    max-width: 160px;
}

.fw-pricing-table__price {
    color: #50c6db;
    display: flex;
    align-items: flex-start;
    font-size: 46px;
    font-weight: 500;
}

.fw-pricing-table__price span:last-child {
    font-size: 24px;
    margin-top: 6px;
}

.fw-pricing-table__btn {
    display: block;
    background-color: #338199;
    color: #fff;
    padding: 6px 20px;
    border-radius: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 10px;
}

.fw-pricing-table__btn:hover {
    background-color: #01516e;
    color: #fff;
}

.fw-pricing-table__site-count {
    font-size: 14px;
    margin-top: 24px;
    font-weight: 500;
    color: #50c6db;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.fw-pricing-table__resources {
    margin-top: 8px;
}

.fw-pricing-table__resources>div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.fw-pricing-table__resources p {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 18px;
}

.fw-pricing-table__resources progress[value] {
    margin-top: 6px;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border: none;
    border-radius: 3px;
    overflow: hidden;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-bar {
    background-color: #e7e7e7;
}

.fw-pricing-table__resources progress[value]::-webkit-progress-value {
    background-color: #50c6db;
    border-radius: 3px;
}

CSS 中最有趣的部分是<progress>標籤的樣式。有點繁瑣，但就是這樣。如果您想避免<progress> ，您可以切換到嵌套 div 設置併計算設置寬度。

就是這樣！ ?

回顧：

我們在 WP Admin 中添加並配置了塊
我們用 29 行基本 HTML 和一個 PHP 函數創建了一個 PHP 模板文件
我們將一些 CSS 放入block.css中以進行樣式設置。

使用我們的自定義塊

所以現在我們可以跳過並創建一個新的帖子或頁面並添加塊。為了保持定價選項的 4 列樣式，我們首先添加一個列塊，然後將我們的自定義定價表塊放入每一列。

單擊“添加塊”按鈕，您可以在此處看到我們的定價表塊已準備就緒。

下面顯示了我如何獲得四列並添加了四次自定義塊。當我選擇一個單獨的塊時，您可以看到它切換到表單 UI，它為我們提供了用於放入內容的字段。從表單視圖中單擊可以為我們提供預覽。

在塊編輯器中看起來很可愛，在前端看起來也一樣好。因為我們也在利用列塊，所以一切都很好並且響應迅速。

隨著我們的設計完成，我們可以使用 Gutenberg 的響應式柱塊並能夠依靠它，這個塊的總構建時間對我來說不到 10 分鐘。

您可以做幾件事來進一步改進該塊：

有一些字符串需要復數。即“WordPress 站點”應該是“WordPress 站點”，用於站點限制超過 1 個的計劃。 PHP模板文件中的一些基本邏輯可以解決這個問題。
您可以跳過列塊，而是使用中繼器字段（專業版功能）並將所有計劃包含在一個塊中。
將逗號添加到更大的數字。
進度條顯示最大關係的確切值。這看起來有點奇怪。您可以切換到更概念化的值。

收拾東西

如果您想下載並安裝此塊，可以在此處下載文件。可以在此處找到有關導入自定義塊的文檔。

其他重要鏈接：

插件
文檔網站
Genesis Slack 社區

如果您想了解更多 Genesis Custom Blocks 的實際效果，在 DE{CODE} 最近的一次會議上，我在大約 15 分鐘內構建並演示了四個單獨的自定義塊（複雜度越來越高）。在這裡查看點播錄製。

我希望您發現這很有用，並了解如何利用塊編輯器的強大功能進行自定義設計和構建非常容易。

乾杯!

使用 Flywheel 免費訪問 Genesis 構建的 StudioPress 主題！

重要的是您的託管服務提供商為您做的最多，這超出了性能和安全性！無需額外費用即可訪問超過 35 個由 Genesis 構建的 StudioPress 主題，Flywheel 為您提供了一個漂亮的主題庫，因此您可以以適合您網站目標的方式構建或重新配置您的網站！在此處了解有關飛輪的更多信息。