将飞轮定价表重建为自定义块（大约 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 为您提供了一个漂亮的主题库，因此您可以以适合您网站目标的方式构建或重新配置您的网站！在此处了解有关飞轮的更多信息。