WordPress 5.8 的新功能

已发表: 2021-06-24

在观看了 WordCamp Europe 2021 上的演示,特别是 Matt Mullenweg 和 Matias Ventura 之间的谈话(其中包括块编辑器中的新功能视频)之后,我渴望尝试这个新版本的 WordPress 7月中旬即将发布的5.8。

所以我安装了 WordPress 5.8-beta2 版本,以便能够告诉你即将到来的新功能。 请记住,我已经使用 WordPress.org 的二十一二十一主题对该版本进行了测试,根据您在站点上安装的主题,提到的某些功能可能不可用。

嵌套块和块模式

随着 WordPress 5.5 的到来,块编辑器包含了块模式的概念。 块模式的想法非常简单:它们是由一组块组成的预定义部分或片段,您可以在创建页面和帖子时使用它们。 块模式可以是简单的显示两个按钮的部分或具有醒目和复杂布局的定价部分,甚至是整个页面的布局。

正在做很多工作以使编辑块和块模式更容易和更舒适。 并且,特别是使插入和移动它们更快。 首先,现在我们可以从左侧菜单栏中显示的块和模式列表中选择它们并将它们拖到页面区域以插入它们。

在 Gutenberg 中选择和插入模式的屏幕截图
从块和模式列表中,您可以选择并拖动要直接在页面上插入的块或模式。

最近,还添加了拖动图标(6 点图标),以便我们可以在容器中移动它所在的任何块。

在古腾堡编辑器中拖动块的选项
通过单击拖动图标,您可以移动列类型块内的封面块。

当您在一个块中时,按Esc 键切换到选择模式,然后按Enter 键返回编辑模式。

古腾堡编辑器中的选择模式
在 Gutenberg 编辑器中,您可以使用 Enter 和 Esc 键从选择模式切换到编辑模式。

在选择模式下(记得按Esc 键),优化了块结构之间的导航。 通过在一个块内移动鼠标,我们可以看到它包含的每个块的边界。 这样,更容易理解父块内的结构和拖动块。

在块编辑器中选择嵌套块的屏幕截图
在选择模式下,当在封面块中移动鼠标时,我们可以看到它所包含的每个块的边界。

而现在,有了这个新版本,当您切换到编辑模式(按Enter 键)时,移动块时也会显示其容器的边界,因此选择、拖放和拖放的过程更加容易和直观。

在 WordPress 5.8 编辑器中拖动块的选项
在 WordPress 5.8 编辑器中拖动块选项的屏幕截图。

图片版

继续改进块编辑的想法,关键块是图像类型块。 我们已经看到,我们现在可以通过将图像拖入图像、文本和媒体类型块或任何容器类型块(例如列)来插入图像。

但最大的新奇之处在于,我们可以在编辑器本身中编辑和修改插入的图像,而无需进入媒体库

块编辑器中的图像编辑选项
在块编辑器中编辑图像的选项。

除了居中添加图像链接的图标外,在 WordPress 5.8 中,我们还有三个新图标:裁剪添加文本双色调过滤器

裁剪图像

通过单击裁剪图标,会出现三个额外的菜单选项:缩放更改纵横比旋转图像

在块编辑器中编辑图像的屏幕截图
选择裁剪选项后,进行所需的缩放、纵横比和旋转修改,然后应用更改。

如您所见,您不再需要访问媒体库来让您的图像看起来像您需要的样子。

双色调滤镜

WordPress 5.8 附带的另一个新功能是能够以双色调过滤任何图像。 选择要应用于图像的滤镜的两种颜色,就是这样,图像只有两种色调。

WordPress 中图像双色调选项的屏幕截图
使用图像双色调选项以两种色调显示图像。

添加文字

这个新的图标,一个给图片添加文字的图标,相当于把图片变成了一个封面类型的块。 当然,在此更改之后,您可以像过去一样将您想要的文本添加到封面块中。

在 Gutenberg 中编辑背景块的屏幕截图
在古腾堡编辑封面块的屏幕截图。

此外,正如您在块属性中看到的那样,您现在还可以修改间距并为文本添加填充,以便文本准确地位于您希望它在图像中的位置。 可以为文本的 4 个边中的每一边定义相同或不同的填充。

就个人而言,我发现您可以直接在编辑器中添加和执行所有这些转换,而无需进入媒体库,这非常棒。 不过,如果你想为 SEO 优化你的图片,恐怕你还是得去图书馆。

块转换

正如我们已经看到如何将块从图像类型转换为封面类型,块编辑器现在包含其他类型的转换。 例如,您可以选择三个段落并将它们转换为标题、列、列表等。并且在执行转换之前,可以预览转换的新外观。

同样,您可以将一组图像类型块更改为图像库类型块,甚至是一组按钮等。

盖块

有了编辑器本身包含的所有这些新功能,封面块允许我们创建与迄今为止的设计截然不同的设计。 例如,现在我们可以有两个嵌套的封面块(在子节点和父节点之间有一个填充),每个都有自己的颜色、文本和焦点。

显示嵌套在古腾堡中的两个背景块的图像
显示两个嵌套覆盖块的图像。

导航块

WordCamp 上展示的视频中块编辑器预览的另一个重要新功能是新的导航块。 我们看到此块未包含在已安装的 beta 版本中,但您会在 Gutenberg 插件的最新版本 10.8.1 中找到它。

古腾堡的导航块
古腾堡的导航块。

此块允许您在任何页面上添加链接菜单,以便访问者可以转到任何其他页面。 它并不是要替代我们已经从 WordPress 中知道的导航菜单,而是当您想在页面上插入附加菜单时的替代方案。

除了指示您希望菜单是水平的还是垂直的,在创建菜单时您还有几个选项:

在 Gutenberg 中创建导航菜单
在块编辑器中创建导航菜单的选项。
  • 从现有菜单创建:您可以选择显示已在站点上创建的菜单。
  • 将其创建为空:这将创建一个空白菜单,供您手动添加要在导航中显示的每个链接。
  • 从所有顶级页面创建它 - 这将自动将您网站上的每个现有页面添加为链接,然后您可以对其进行编辑和重新排列。 此处仅添加顶级页面。

要向导航添加新链接,您必须单击+图标,您可以在以下选项中进行选择:

在导航菜单中添加项目
  • 页面链接:您网站上的一个页面。
  • 帖子链接:您网站上的帖子。
  • 类别链接:具有特定类别的所有帖子。
  • 标签链接:所有带有特定标签的帖子。
  • 自定义链接:外部 URL。
  • 社交图标:社交网络的图标。
  • 搜索:供访问者搜索您的内容的搜索框。

创建任何菜单后,您还可以选择更改其样式(字体、字体和背景颜色)、添加子菜单、移动项目等。

导航菜单属性
导航菜单属性。

因此,使用此块,您可以非常轻松地创建菜单设计。

使用导航块创建的菜单
使用导航块创建的菜单。

如您所见,这种新型区块将为我们的页面和帖子的设计提供更多可能性。

模板设计

这个新版本的 WordPress 编辑器给我们带来的另一个重大变化是模板设计完全集成到块编辑器中。 这样,您可以从创建的页面创建模板,并且还添加了在左侧边栏中可以列出其结构的选项。

在 WordPress 中设计模板
在 WordPress 中设计模板。 在左边我们可以看到模板的结构。

我们可以浏览模板的结构,每个元素都在编辑器中突出显示,因此很容易在适当的地方进行更改,并且您可以快速查看嵌套在每个容器块中的所有元素。

还有更多……

最后,在 WordCamp Europe 上展示的视频中,我们还看到了直接在块编辑器中定义主题的全局样式以更改调色板、排版等的选项。如果您仍然有任何疑问,使用这个新的WordPress 5.8 版本我们越来越接近不需要任何其他页面构建器来创建您的网站页面的目标。

XPS 在 Unsplash 上的精选图片