使用块编辑器重新创建音乐艺术家 WordPress 主题主页

我每周最喜欢的活动之一是仔细阅读最新的主题以登陆 WordPress 主题目录。 通常，有一些有趣的设计概念。 然而，很多时候，我很失望地得知许多主页设计依赖于主题选项而不是块编辑器。

虽然编辑器有几个设计限制，但主题作者有大量的探索空间。 它有足够的能力以更少的代码工作来完成其中一些自定义主页设计。

音乐艺术家是最近引起我注意的主题之一。 我喜欢大型英雄区域和主题设计的几个元素。 安装后，我意识到主页布局是通过主题选项处理的。 但是，主题作者可以完全用块构建此页面，并将每个部分甚至整个设计包装成块模式。

这一切都可以通过块编辑器实现。

为了实践我所宣扬的内容，我花了几个小时直接从块编辑器重新创建了主题的主页演示。 无需代码。 有一些棘手的部分，我将进入。 但是，如果主题支持块编辑器，它的构建并不难，并且可以变得更容易。

计划是复制安装了音乐艺术家主题的自定义页面。 然而，主题缺乏区块支持意味着有些东西从根本上被打破了。 相反，我激活了一个设计相似的主题，例如字体和颜色。 因为我已经知道 Ariele Lite 可以使用块编辑器，所以看看我是否可以使用它进行构建是有意义的。 事实证明，这是一个坚实的基础。

以下是原始音乐艺术家主题主页（第一）和通过 Ariele Lite 主题使用块的娱乐（第二）的比较：

间距、颜色、排版和其他元素显然存在差异。 其中大部分归结为主题设计师的风格选择。 通过像 Editor Plus 这样的插件有更多的时间和修改，我可以调整到足以获得更接近的副本。 然而，我的目标是尽可能地贴近 WordPress 的核心。 从技术上讲，我安装了最新版本的 Gutenberg 插件，因此可能有一些项目尚未登陆 WordPress。

对于这个实验，我使用了：

• WordPress 5.7 测试版
• 古腾堡 10.1 测试版
• 阿里尔精简版 1.0.8
• 编辑器加 2.6

我只需要 Editor Plus 对 Group 块进行一些边距调整。 我本可以不理会它，但我想减少页面上部分之间的间距以获得更紧密的娱乐。 将来，我们会在 WordPress 中看到更多的间距控制，所以我认为这是一个公平的权衡。

该实验旨在向主题作者展示他们可以使用块系统构建他们的自定义设计。 放弃老式的主题选项意味着开发人员的代码工作量要少得多，让他们可以更多地专注于样式。 最终用户还受益于更大的灵活性，例如添加自定义元素或删除他们不需要的部分。 这甚至不包括单个块级别的样式选项。

第二个目的是向用户展示他们可以在没有代码的情况下创建其中一些主页。 块编辑器和全面的块就绪主题可以让您走得很远。

重建音乐艺术家主页

从 Ariele Lite 的底座开始意味着设计是盒装的。 但是，该主题有一个自定义的“空白画布”页面模板，可让用户设计整个页面。

由于块编辑器的限制，我无法完全重新创建一些元素。 其他部分是来自主题的问题或设计选择。

以下是我如何完成构建主页每个部分的总体概述。 我将跳过添加颜色和更改字体大小等部分，同时关注与布局相关的概念。

英雄区

WordPress 的封面块仍然是我最喜欢的块之一。 它允许用户在没有太多工作的情况下创建英雄部分。 我从原始演示中抓取了背景图像并将其放入。我迈出了真正的第一步。

然后，我添加了一个标题块，稍微调整了它的大小。 我在它后面加上了一个 Spacer 和 Social Icons 块。

我立刻碰到了两个障碍。 首先是 WordPress 不包含 iTunes 社交图标。 我无法在 Gutenberg 存储库上找到一个未解决的问题。 也许这不是一个经常被要求的功能。 第二个问题是社交图标块不输出社交网络标签，所以我无法复制那部分设计。

唱片部

有几种方法可以处理此部分。 假设列出的专辑是自定义帖子类型，无论这些专辑来自什么插件，理想情况下都有一个自定义块用于输出它们。 如果这些是博客文章或即将到来的查询块，用户也可以使用最新帖子块。

为简单起见，我决定添加一个 Columns 块并放入三个链接的图像。

媒体和文本部分

我对本节的计划是使用核心媒体和文本块。 但是，它仅支持自托管媒体。 我无法嵌入 YouTube 视频。

相反，我选择了 Columns 块。 在左栏中，我删除了一个 YouTube 视频 URL。 在右侧，我添加了标题、段落和按钮块。

视频部分

这是一个相对简单的部分来重新创建。 对于布局，它只需要一个 Heading 块，然后是一个 Columns 块。 然后，我从 YouTube 上抓取了几个视频链接并将 URL 粘贴到编辑器中。

最新帖子部分

这是我最麻烦的布局部分。 WordPress 提供了可以在网格中设置的最新帖子块。 但是，Ariele Lite 没有正确处理这些列。

所以，我作弊了一点。

我切换到支持即将推出的完整站点编辑功能的基于块的主题。 然后，我加入了一个查询块，以更好地控制帖子的列。 之后，我切换回了 Ariel Lite 主题。

原始设计可以使用当前的最新帖子块完成，因此这不是块编辑器问题。

页脚侧边栏部分

从技术上讲，页脚侧边栏超出了主页设计的范围。 它是整个网站的主题页脚的一部分。 但是，我决定添加它，因为我已经开始了。

本节需要 Columns 块。 从那时起，只需为每一列放入一个标题块。 我添加了段落、日历和图库块来重新创建三个“小部件”。

Ariele Lite 的日历块设计在浅色背景上效果更好。 这是我忽略的一个小痛点。 从长远来看，WordPress 应该为缺少它们的块提供设计控制。