WordPress 5.8 有什么新功能 (全站编辑,WebP 图片,全局样式和设置,以及更多)

作者:Aini99
Aini99 更新时间:2021-07-15 16:21:45 浏览次数:

WordPress 5.8 将是一个重大的发布。除了数量惊人的功能、改进和错误修复之外,WP 5.8 还引入了一种构建网站的新方法,即把最初的功能纳入更广泛的项目 “完整站点编辑”(Full Site Editing)。

除了完整的站点编辑,WordPress 5.8 给 CMS 的几个方面带来了大量的改变和增强。

不使用 Gutenberg 插件的 WordPress 用户可以从总共 9 个 Gutenberg 版本中找到特性和改进 (深入了解每个版本,请参见 Gutenberg 9.9, 10.0, 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7)。

对于重视网站性能的用户来说,一个重要的新特性是 WebP 格式支持。

开发人员肯定会喜欢 IE11 从支持的浏览器列表中移除,新的块配置和基于主题的样式机制。改进的基于块的块配准系统。json,以及许多伴随 2021 年第二版 WordPress 发布而来的 API 改进。

所以,请耐心等待,因为这将是一个冗长的功能和增强的总结,为未来几个月发布的强大的新站点构建工具铺平道路。

WordPress 5.8 有很多变化。为了防止与你的主题和插件发生意外冲突的风险,我们强烈建议你运行你的网站的备份,并在升级你的活动网站之前在 staging 环境中测试新版本。

WordPress 5.8 的完整站点编辑功能

完整网站编辑的愿景是提供一系列工具和功能,允许 WordPress 用户使用块构建整个网站。使用完整站点编辑,我们将看到许多块可用来创建页面上的任何元素,从导航菜单到站点品牌,侧栏小部件,模板,等等。

即使 WordPress 5.8 引入了一些属于完整站点编辑 (FSE) 范围的功能,我们也不应该期望看到一个功能齐全的可视化站点构建环境。FSE 仍在进行中,WordPress 5.8 的发布开启了一个公开测试阶段。根据 Josepha Haden Chomphosy 的说法:

完整的站点编辑是一个项目的集合,它们一起代表了一个巨大的变化,可以说对于一个单独的发布来说太多了。要分享的最重要的背景是,它并不是作为完整的、默认的用户体验发布的。从第一阶段的合并过程中得到的最清晰的反馈之一是,我们的扩展程序 (代理、主题作者、插件开发者、站点构建者等) 没有足够的时间来准备即将到来的变化。

记住这一点,这个合并过程将不会是一个开关。现在的焦点不是完整和微妙的用户体验,而是 WordPress 5.8 的公开测试版。

所以我们现在不应该期望看到一个完美和完整的 FSE 体验。相反,随着时间的推移,我们将看到从 5.8 版开始添加和改进的新特性。出于同样的原因,我们可能认为 WordPress 5.8 不会对我们构建网站的习惯产生巨大的影响。

在写这篇文章的时候,网站所有者和管理员仍然需要通过安装一个区块主题来有意识地选择 FSE,比如 Twenty-Twenty One Blocks (Twenty-Twenty One 基于区块的版本),并激活 Gutenberg 插件。

完整的站点编辑包括一系列独立的子项目,包括站点编辑器、全局样式、查询块、导航块、模板、块主题等等。但是我们将在 WordPress 5.8 中看到最接近站点编辑的是模板编辑模式和相应的主题块,我们将在本文后面看到。

接下来,让我们来看看 WordPress 5.8 中合并到 Core 中的一些 FSE 特性。

模板编辑模式

模板编辑模式提供了一种使用块创建 post/page 模板的方法。这是一种降低网站构建复杂性的好方法,允许用户在习惯使用块的同时,从网站编辑器界面之外利用几个网站编辑特性。对于那些不使用基于块的主题,但仍在寻找从块编辑器的 UI 创建和编辑模板的简单方法的用户来说,这也是很好的。

在 WordPress 中定制主题从来没有这么容易过。现在你不再需要构建子主题来创建自定义模板。在 WordPress 5.8 中,模板编辑不局限于阻止主题,但也可以用于经典主题,尽管你必须选择启用经典主题。

主题块

正如前面提到的,FSE 不是一个单一的特性,而是一套完整的站点构建特性,它不仅与站点编辑器相关。模板编辑模式就是一个例子。但是和模板编辑一起,WordPress 5.8 也带来了许多可以显示从数据库动态检索到的信息的主题块。其中一些块也可以在非 fse 上下文中使用。

从 WordPress 5.8 开始,完整站点编辑器会阻止非 fse 上下文的可用

主题块为经典主题带来了模板标签功能,你可以像普通块一样使用它们。例如,你可以在文章内容或模板的任何地方添加文章标签或文章的特色图片。

查询循环块

有多少次你发现自己需要显示自定义的博客文章列表或自定义文章类型?想想产品、事件、不动产…… 当然,你有大量的插件可供选择,但创建高度定制查询的能力通常需要开发人员掌握 WordPress Loop 的技能。

通过在 WordPress 核心中引入查询循环块,网站所有者和管理员可以创建帖子和 cpt 列表,而无需编写复杂的代码或雇佣开发人员,至少在最常见的用例中是这样。

那么,查询循环块做什么呢?

简而言之,它的工作与 WordPress Loop 相同,只是在块编辑器的可视上下文中。

Query Loop 块根据用户对 WordPress 数据库的设置执行查询,循环遍历每个检索到的文章,并在页面上显示数据。

编辑器中的持久列表视图

FSE 扩展到 Post Editor 的另一个特性是 Persistent List 视图。在 WordPress 5.8 (和 Gutenberg 10.7) 之前,列表视图是在弹出窗口中显示的。当将焦点移到弹出窗口外时,列表将消失。

相反,站点编辑器将列表视图显示在包含整个块树的侧栏中。

在 WordPress 5.8 中,列表视图现在显示在文章编辑器的侧边栏中,允许用户更快速、更精确地浏览区块树。

WordPress 5.8 的列表视图侧边栏

在列表视图中单击一个项目将突出显示该列表项,并将焦点移动到 Post Editor 画布中的相应块。此外,如果你将鼠标悬停在列表视图中的项目上,项目和 Post Editor 中相应的块都会高亮显示。

最后,向块添加锚也会出现在列表视图中相应项的旁边。

基于块的小部件编辑器和自定义器中的块小部件

基于块的小部件编辑器是一个广泛的项目,旨在将块编辑器的界面引入经典主题小部件。

新的小部件编辑器为仍然使用经典主题的绝大多数用户提供了许多优势。同时,它允许他们在块界面成为所有 WordPress 用户的标准之前熟悉它。

正如 Anne McCarty 所指出的,基于块的小部件有几个优点,包括:

  • 你现在可以使用列、分隔符、间隔符和其他设计块在侧边栏、页眉和页脚中创建布局。
  • Widgets 现在默认支持富文本编辑,用户不需要添加自定义代码或嵌入带有插件的第三方 HTML 编辑器。
  • 许多基于短代码的小部件现在都以块的形式提供,从而简化了编辑体验。

Andrei Draganescu 还强调了我们可以从基于块的界面编辑小部件的优势:

将小部件功能升级为块的主要好处在于,你可以使用熟悉的块交互直接编辑小部件,就像你在站点上编辑页面或帖子时所使用的那样。能够使用块开启了大量新的创造性可能性,从无代码的迷你布局到利用核心和第三方块的巨大库来创建内容。

你不必担心你的小部件可能在 WordPress 5.8 中停止工作,因为社区已经努力确保向后兼容性,以便 “现有的小部件和第三方小部件将继续工作,并可以与块一起使用”(参见 WordPress 5.8 中基于块的小部件编辑器)。

但是,为了防止现有的 WordPress 安装出现任何兼容性问题,不要忘记在更新站点之前在分段环境中测试新版本。

对于那些现在选择不使用基于块的小部件编辑器的人来说,仍然可以通过三种不同的方式恢复经典的小部件屏幕:

  • 你可以安装官方的 Classic Widgets 插件,它恢复了 widget 屏幕以前的界面。插件 “将被支持和维护到至少 2022 年,或只要有必要”。

  • 主题开发者可以像往常一样通过删除主题支持来禁用基于块的小部件编辑器:

    remove_theme_support( 'widgets-block-editor' );
    
  • 一个新的 use_widgets_block_editor 过滤器也可以使用: Add_filter ('use_widgets_block_editor', '__return_false');

自定义小部件块

作为这个项目的一部分,WordPress 5.8 也为定制器带来了块小部件。

在定制器中添加基于块的小部件非常简单。通过单击小部件面板右上角的加号图标,可以启动自定义小部件插入器。

自定义小部件插入器

你还可以从窗口小部件面板的底部启动快速插入,如下图所示。

自定义小部件快速插入器

在撰写本文时,新的小部件编辑界面仍然需要改进和 bug 修复,但是自定义的可能性实际上是无限的。

基本上,从 WordPress 5.8 开始,你将拥有自定义器中的块编辑器的强大功能,你将能够构建高度自定义的侧边栏,而没有任何麻烦。

块编辑器功能和改进

除了第一个 FSE 实现,WordPress 5.8 还为块编辑器的几个元素带来了新功能和增强,这极大地改善了整体的编辑体验。

媒体和文本块增强

将一个块转换为一个列块已经有一段时间了。但是,将所有块转换为带有单个列的列块。这可能会导致媒体和文本块的次优结果,其中单个列通常是不合适的。

从 WordPress 5.8 (和 Gutenberg 10.2) 开始,将媒体和文本块转换为列块会自动添加两列:一列用于图像,另一列用于文本。

两列转换为媒体和文本

可重用块改进

可重用块允许用户保存一个块或一组块,以便以后在网站的任何帖子或页面中重用。这对于那些在不同的文章 / 页面中重复包含相同块或组块的用户来说非常有用。

在 WordPress 5.8 中,可重用的块在视觉上更加清晰,让用户更容易管理它们。

WordPress 5.8 中的一个可重用块

以下是用户将网站更新到 WordPress 5.8 后会发现的可重用块改进的快速列表:

  • 当创建一个可重用块时,模态现在允许用户为块分配一个名称。
  • 可重用块的名称现在显示在块工具栏、导航列表和面包屑中。
  • 当选择子块时,就会列出可重用的块。这标志着可用性的显著提高,因为它允许你轻松地识别父块及其内容。
  • 现在可以在侧边栏检查器中修改块名称。

规范化块工具栏

几个块工具栏已经重新排列,以提供跨块的一致的 UI 并改进用户体验。现在,工具栏控件按照 “元、块级、内联” 的语义顺序进行分组。

工具栏标题块

从 Gutenberg 10.1 和 Gutenberg 10.3 开始,一套完整的块工具栏被规范化了。其中包括图像、按钮、按钮、列表、标题、段落、引用、音频、文件、媒体和文本、视频等。

根据 Matias Ventura 的说法:

我们在工具栏中拥有的语义分组 —— 元的、块级的、内联的 —— 也应该有一个带有边界的可视化表示。现在,独立的块级控件有不同的表示,包括像导航这样的情况,其中每个控件都有边界。

因此,从 WordPress 5.8 开始,块工具栏组控制在被边界包围的段中。此外:

  • 元段包含块类型的控件,如块切换器、拖动手柄和移动控件。
  • 块级片段包含影响整个内容的特定块工具,如在段落块中的对齐或在图像块中的链接。
  • 内联级 / 其他段包含内联转换工具,例如文本块中的内联格式化。
  • More 菜单包含其他工具。

下图比较了 WordPress 5.7 和 5.8 中的图像块工具栏:

WordPress 5.7 和 WordPress 5.8 中的图像块工具栏

顶部工具栏的改进

在以前的 WordPress 版本中启用了顶部工具栏模式,顶部工具栏和块工具栏并排显示,如下图所示:

在 WordPress 5.8 中,启用顶部工具栏视图会将块工具栏固定在编辑器的顶部,就在顶部工具栏的下方。这与浏览器宽度无关,应该会显著改善用户体验。

嵌入式 pdf 文档

当一个 PDF 文件通过文件块添加到文档中时,一个新的侧边栏切换允许你启用 / 禁用嵌入式 PDF 版本。

你可以直接将文件拖到编辑器画布上,或者简单地从库中选择它。也可以手动调整 PDF 查看器的高度或使用侧边栏控件。

除移动浏览器外,所有主要的 web 浏览器都支持 PDF 浏览器。

双色版块支持

WordPress 5.8 合并到 Core 中最有趣的特性之一是双音滤波器,它是在 Gutenberg 10.6 中首次引入的。

图像块中新的双色设计工具

作为一个 “块支持” 的特性,在核心图像和覆盖块中默认启用了双音滤波器。然而,在封面块中,它不能与固定的背景一起工作。

图像和覆盖块工具栏现在显示一个应用双色调过滤器控件,显示一个双色调选择器,有许多预设选项供选择。

两个子控件允许分别定制阴影和高光。使用隐藏在内联样式中的 SVG 过滤器应用该效果,并使用特定的类名应用该效果。

表块颜色和边框

WordPress 5.8 还对 Table 块做了一些改进,包括更好地控制表格的背景和前景色。

Table 块的另一个附加功能是边框块支持,它使用户能够控制边框颜色、样式和宽度。

如果活动主题支持新特性,则新的边框设置面板提供三个新控件供用户自定义。

WordPress 5.8 和 TT1 块中的边界块控件

块插入器的改进

在 WordPress 5.8 中,块插入器得到了一些增强。

向上和向下按箭头将移动行焦点

  1. 二维键盘导航块插入器。现在,我们可以更精确、更直观地在各个区块之间导航。

    • 按向上 (↑) 和向下 (↓) 箭头将焦点移到上面或下面的行。
    • 按 Tab 键或 Shift + Tab 键可以在搜索框、标签列表和每个类别的第一项之间移动焦点。
  1. 一个新的 “主题” 类别,用于模板部件和变体现在出现在完整站点编辑的插入器。
  2. 自动完成短语匹配器中的多个单词现在是允许的。

额外的块编辑器改进

WordPress 5.8 带来了大量额外的小型和中型变化,值得在这里写几行。在这些增强中,我们要提到以下几点:

拖放支持

现在你可以从桌面拖放图片来替换封面块的背景。

增强的发布 UI

从 WordPress 5.8 开始,发布 UI 会显示站点图标和标题,让你更清楚地在哪里发布文章或页面 (Gutenberg 10.4)。

块 API 增强

WordPress 5.8 带来的 区块 API 增强值得插件开发者特别关注。

使用 block.json 文件现在被鼓励作为注册块类型的规范方式,并提供了几个优点:

关于性能,如果主题支持延迟加载资产,则通过块注册块类型。Json 文件将自动优化资源排队。这是因为只有当检测到 block 时,由 style 和 script 属性指定的资源才会在前端排队。这允许开发更高效的插件,减少页面大小,并防止本文中讨论的一些问题。 块。通过允许 block Types REST API 端点列出块,json 文件简化了服务器端块注册。 块。如果你决定提交你的 block 插件到 WordPress Plugins 目录,json 文件也是必需的。

register_block_type 函数的变化

从 WordPress 5.8 开始,register_block_type 函数已经被增强,可以从块中读取元数据。json 文件。现在,第一个参数接受块所在文件夹的路径。Json 文件的位置。

该函数的使用示例如下:

function create_custom_block_init() {
	register_block_type( __DIR__ );
}
add_action( 'init', 'create_custom_block_init' );

如果失败,它将返回已注册的块类型或 false

正如你可能注意到的,register_block_type 函数现在的使用方式与 register_block_type_from_metadata 函数相同,以前 register_block_type_from_metadata 函数是唯一可以通过从块中读取元数据来注册块类型的函数。json 文件。Greg 解释:

我们决定将 register_block_type_from_metadata 方法中预先存在的功能合并到 register_block_type 中,以避免它所造成的一些混乱。仍然可以使用这两个功能,但我们计划从现在开始在官方文档和工具中只使用较短的版本。

一旦在服务器上注册了块,你只需要在你的 index.js 文件中使用相同的块名在客户端上注册设置。

WordPress 5.8 中的 WebP 支持

WebP 被认为是下一代格式,是谷歌开发的一种图像格式,它提供 “比 PNG 或 JPEG 更好的压缩,这意味着更快的下载和更少的数据消耗。”

谷歌 Lighthouse 建议使用下一代图像格式

WebP 是一种现代的图像格式,为 web 上的图像提供了卓越的无损和有损压缩。使用 WebP,网站管理员和网站开发人员可以创建更小、更丰富的图片,使网络更快。

与 png 相比,WebP 无损图像的尺寸要小 26%。在等效的 SSIM 质量指数下,WebP 有损图像比可比的 JPEG 图像小 25-34%。

从 WordPress 5.8 开始,你将能够像使用 JPEG, PNG 和 GIF 格式一样使用 WebP 图像格式。只需上传你的图像到你的媒体库,并包括在你的内容。

在前一篇文章中,我们深入研究了 WebP 格式以及在 WordPress 中使用它的工具。现在,由于 WordPress 5.8 对 WebP 图像的支持,情况可能会有所改变。由于 WebP 格式得到了开箱即用的支持,你不需要安装第三方插件来在 WordPress 中上传 WebP 图像,至少在最常见的使用情况下是这样。

请注意,即使你现在可以使用媒体库将你的 WebP 图像上传到 WordPress, WordPress 不支持自动将图像转换为 WebP 格式。要在你的网站上启用这个功能,你需要一个第三方的 WebP WordPress 插件。

总结

WordPress 5.8 标志着完整站点编辑的一个里程碑。但是今年发布的第二款 WordPress 带来的不仅仅是 FSE。用户和开发者会发现区块编辑器有了大量改进,这是一个新的主题。json 机制,更强大的 Block API, WebP 图像格式支持,等等。

对块编辑器及其 UI 的大大小小的改进给我们留下了特别深刻的印象。我们喜欢在块之间改进的导航能力,改进的块工具栏,丰富的清晰的界面,以及对几个块的增强。

这些小的改变一点一点地改善了编辑体验,而且,在几乎没有意识到的情况下,我们发现自己正在使用更好、更健壮的软件。那是 WordPress !

Aini99

Aini99

本网站搬运了CC社区和XJ社区的cskzwr数据,大家可以在这里查询cskzwr数据,下载cskz地图和demo,同时还提供了一些kz视频制作教程。